This repository has been archived by the owner on Oct 2, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 57
/
index.html
94 lines (73 loc) · 5.64 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Luxbar Demo</title>
<link rel="stylesheet" href="build/luxbar.css">
<link rel="stylesheet" href="demo-app/react_build/style.css">
<link rel="stylesheet" href="demo-app/react_build/radiothemes.css">
<link rel="icon" href="demo-app/favicon.png" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.4.1/hint.min.css" />
</head>
<body>
<div class="container">
<div id="display"></div>
<div style="text-align: center;">
<h1 style="font-size: 52px;">Luxbar</h1>
<h2>Featherweight, Responsive, CSS Only Navigation Bar</h2>
<div class="row center-xs center-md center-sm demo-btn-holder">
<a class="demo-btn col-md-2 col-sm-2 col-xs-10" href="https://github.com/balzss/luxbar"><i class="fa fa-github" aria-hidden="true"></i> GitHub</a>
<a class="demo-btn col-md-2 col-sm-2 col-xs-10" href="https://github.com/balzss/luxbar/blob/master/docs/docs.md"><i class="fa fa-file-text-o" aria-hidden="true"></i> Docs</a>
<a class="demo-btn col-md-2 col-sm-2 col-xs-10" href="https://github.com/balzss/luxbar/blob/master/docs/faq.md"><i class="fa fa-question-circle-o" aria-hidden="true"></i> FAQ</a>
</div>
</div>
<h1 style="padding-top: 24px;">Getting started:</h1>
<p>Download with NPM:</p>
<code><pre><div id="npmCode">npm install luxbar</div><div class="copy-btn">COPY</div><div id="npmCopyBtn" class="copy-btn" data-clipboard-target="#npmCode"><span id="npmHint" class="hint--left hint--rounded" aria-label="">COPY</span></div></pre></code>
<p>Or with Bower:</p>
<code><pre><div id="bowerCode">bower install luxbar</div><div class="copy-btn">COPY</div><div id="bowerCopyBtn" class="copy-btn" data-clipboard-target="#bowerCode"><span id="bowerHint" class="hint--left hint--rounded" aria-label="">COPY</span></div></pre></code>
<p>Or use CDN:</p>
<code><pre><div id="cdnCode"><link rel="stylesheet" href="https://cdn.rawgit.com/balzss/luxbar/ae5835e2/build/luxbar.min.css"></div><div class="copy-btn">COPY</div><div id="cdnCopyBtn" class="copy-btn" data-clipboard-target="#cdnCode"><span id="cdnHint" class="hint--left hint--rounded" aria-label="">COPY</span></div></pre></code>
<p>Or download the source directly:</p>
<div class="row center-md center-sm center-xs demo-btn-holder">
<a class="demo-btn col-md-3 col-sm-3 col-xs-10" href="https://github.com/balzss/luxbar/archive/0.3.0.zip"><i class="fa fa-download" aria-hidden="true"></i> luxbar-0.3.0.zip</a>
<a class="demo-btn col-md-3 col-sm-3 col-xs-10" href="https://github.com/balzss/luxbar/archive/0.3.0.tar.gz"><i class="fa fa-download" aria-hidden="true"></i> luxbar-0.3.0.tar.gz</a>
</div>
<p>Then customize the look of it (color, menu alignement, etc) with the options below. The navbar will update realtime accordingly. After everything looks the way you want, grab the generated HTML code from the bottom and drop it into your project.</p>
<p>Please note that that the dropdown can't be configured throught the demo app (yet!) so if you want to know how to implement it <a href="https://github.com/balzss/luxbar/blob/master/docs/dropdown-example.md" style="text-decoration: underline; ">check out this link</a>.</p>
<div class="demo-option-group col-md-12">
<h2>Menu builder:</h2>
<p>To add a new element click on the plus icon, type in the item name and click enter. To remove one, simply click on the one you want to remove.</p>
<div id="builder"></div>
</div>
<div class="row">
<div class="col-md-5 col-sm-12 col-xs-12" id="option-pane"> </div>
<div id="theme-selector" class="col-md-7 col-sm-12 col-xs-12"></div>
</div>
<h1>Generated Code:</h1>
<div id="code"></div>
</div>
<div id="footer"></div>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.6.0/clipboard.min.js"></script>
<script src="demo-app/react_build/bundle.js" type="text/javascript"></script>
<script>
var clipboard = new Clipboard('.copy-btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
var btnElem = document.getElementById(e.trigger.id).firstChild;
btnElem.setAttribute("aria-label", "Copied!");
setTimeout(function(){
btnElem.setAttribute("aria-label", "");
},1000);
});
</script>
</body>
</html>