-
Notifications
You must be signed in to change notification settings - Fork 14
/
index.html
192 lines (158 loc) · 6.99 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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<!--[if lt IE 7]><html class="ie9 ie8 ie7 ie6" lang="en"><![endif]-->
<!--[if IE 7]><html class="ie9 ie8 ie7" lang="en"><![endif]-->
<!--[if IE 8]><html class="ie9 ie8" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie9" lang="en"><![endif]-->
<!--[if gt IE 9]><!--><html lang="en"><!--<![endif]-->
<head>
<title>BaseDemo - {{project-name}}</title>
<!--
Include BaseDemo
BaseDemo is a code demoing tool for displaying demos the easiest way possible
It is not required for the demo to work and should not be included in your
implementation of the demoed code on your projects.
For more on BaseDemo here: https://github.com/sebnitu/BaseDemo
-->
<link rel="stylesheet" href="bd.styles.css">
<!--
Things you could use find & replace to update:
** To-Do: This should be done later in JS through a config file **
{{project-name}}
{{project-url}}
{{project-download-url}}
{{author-name}}
{{author-url}}
License; visit the link below for more info on choosing a license
http://creativecommons.org/
{{license-name}}
{{license-url}}
-->
<!-- CSS Test Zone -->
<style></style>
<!-- JavaScript Test Zone -->
<script></script>
</head>
<body>
<div class="wrapper">
<div class="page">
<nav class="nav">
<ul>
<li><a href="{{author-url}}">About the Author</a></li>
<li><a href="{{project-url}}">Documentation</a></li>
<li class="download"><a href="{{project-download-url}}"><img src="bd.download.png" alt=""> Download <span class="version">v1.0</span></a></li>
</ul>
</nav>
<header class="header">
<h1>BaseDemo <span class="version">v1.0</span></h1>
<p>BaseDemo is just a basic template that can be used for creating demos for your development projects. It also works great for <a href="http://pages.github.com/">GitHub Pages</a>. This is an example of what you could do with this template and some content types.<p>
<div class="custom-nav"></div>
</header>
<div class="sep"><span class="left-arrow arrow"></span><span class="right-arrow arrow"></span></div>
<div class="demo" id="demo-one">
<div class="description">
<h2>Example One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque risus id eros semper non eleifend lorem imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam fermentum sapien non nibh consectetur elementum.</p>
</div><!-- .description -->
<nav class="subnav tabs">
<ul>
<li class="active"><a href="#panel-1">Demo</a></li>
<li><a href="#panel-2">JavaScript</a></li>
<li><a href="#panel-3">HTML</a></li>
<li><a href="#panel-4">CSS</a></li>
</ul>
</nav>
<div class="panels">
<div class="panel" id="panel-1">
<pre>This is where your output or results would go.</pre>
</div><!-- .panel -->
<div class="panel" id="panel-2">
<pre>JavaScript code would go here.</pre>
</div><!-- .panel -->
<div class="panel" id="panel-3">
<pre>Mmmm, nothing like some solid HTML.</pre>
</div><!-- .panel -->
<div class="panel" id="panel-4">
<pre>CSS is nice too!</pre>
</div><!-- .panel -->
</div><!-- .panels -->
</div><!-- .demo -->
<div class="sep"><span class="left-arrow arrow"></span><span class="right-arrow arrow"></span></div>
<div class="options">
<div class="description">
<h2>Available Options</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque risus id eros semper non eleifend lorem imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam fermentum sapien non nibh consectetur elementum.</p>
</div><!-- .description -->
<div class="table-wrap">
<table width="100%" class="options-table" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="20%">Key</th>
<th width="18%">Default value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Key</td>
<td>Value</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque risus id eros semper non eleifend lorem imperdiet.</td>
</tr>
<tr>
<td>Key</td>
<td>Value</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque risus id eros semper non eleifend lorem imperdiet.</td>
</tr>
<tr>
<td>Key</td>
<td>Value</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque risus id eros semper non eleifend lorem imperdiet.</td>
</tr>
<tr>
<td>Key</td>
<td>Value</td>
<td>Toggle auto rotate.</td>
</tr>
<tr>
<td>Key</td>
<td>Value</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque risus id eros semper non eleifend lorem imperdiet.</td>
</tr>
</tbody>
</table>
</div><!-- .table-wrap -->
</div><!-- .options -->
<div class="options">
<div class="description">
<h2>Methods</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque risus id eros semper non eleifend lorem imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam fermentum sapien non nibh consectetur elementum.</p>
</div><!-- .description -->
<div class="table-wrap">
<table width="100%" class="options-table" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="20%">Method</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>someMethodHere()</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque risus id eros semper non eleifend lorem imperdiet.</td>
</tr>
</tbody>
</table>
</div><!-- .table-wrap -->
</div><!-- .options -->
</div><!-- .page -->
<footer class="footer">
<p><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">{{project-name}}</span> is built and maintained by <a xmlns:cc="http://creativecommons.org/ns#" href="{{author-url}}" property="cc:attributionName" rel="cc:attributionURL">{{author-name}}</a> and is licensed under a <a rel="license" href="#">{{license-name}}</a>. Follow me on <a href="#">Twitter</a>, <a href="#">GitHub</a> and <a href="#">Dribbble</a>.</p>
<p><a rel="license" href="http://creativecommons.org/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a></p>
</footer>
</div><!-- .wrapper -->
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="bd.jquery.min.js"%3E%3C/script%3E'))</script>
<!-- JavaScript -->
<script src="bd.ui.js"></script>
</body>
</html>