-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
173 lines (147 loc) · 5.49 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
<!DOCTYPE html>
<html>
<head>
<!-- Meta -->
<title>Bootstap Playground</title>
<meta charset="UTF-8">
<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<!-- jQuery Plugins -->
<style type="text/css">
body {
background: #edeae3;
}
.demo {
margin: 20px auto;
padding: 20px;
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
border: 1px solid #ccc;
}
.demo h1:first-child {
margin-bottom: 20px;
}
</style>
<!-- Demo Styles -->
<style type="text/css">
.modal#overlay-3 {
width: 650px;
}
.modal#overlay-3 ul.thumbnails li, .modal.custom_theme_type ul.thumbnails{
margin-bottom: 0;
}
</style>
</head>
<body>
<!-- Demo 1 -->
<div class="container demo" id="demo1">
<h1>Demo 1 - Popovers</h1>
<a href="#" class="btn btn-danger" rel="popover" data-title="Uh-oh" data-content="You launched the popover">hover for popover</a>
</div>
<!-- Demo 2 -->
<div class="container demo" id="demo2">
<h1>Demo 2 - Basic Table (rusic)</h1>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Field</th>
<th>Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>Title - <code>{{idea.title}}</code></td>
<td>The Title</td>
</tr>
<tr>
<td>Content - <code>{{idea.content}}</code></td>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, elit pharetra laoreet consequat, nisl urna volutpat tellus, non porttitor augue neque vel est. Nam vehicula aliquam tortor, sed lobortis nisl auctor sit amet. Nullam eu lacus sed quam lacinia tristique feugiat eget ligula. Donec sit amet arcu vel risus gravida vehicula. Quisque lacus turpis, lobortis quis vehicula eu, adipiscing id tellus. Maecenas varius urna eu orci dignissim viverra. Aliquam tempor adipiscing urna, vitae scelerisque leo blandit suscipit. Vivamus ut mi et eros varius consequat sed at dolor. Integer interdum enim ut lacus imperdiet quis interdum felis vestibulum. Suspendisse potenti. Proin volutpat est a enim ultricies varius. Proin neque arcu, pulvinar nec euismod et, vestibulum non augue. Morbi nulla nibh, ornare et convallis quis, condimentum non dolor. Ut bibendum condimentum ligula, vitae euismod felis pharetra ut. In nec metus quam. Nunc convallis egestas nisl sit amet dignissim.
</td>
</tr>
<tr>
<td>Custom 1 - <code>{{idea.custom1}}</code></td>
<td>
<pre>http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg</pre>
</td>
</tr>
<tr>
<td>Custom 2 - <code>{{idea.custom2}}</code></td>
<td>
<pre>true</pre>
</td>
</tr>
<tr>
<td>Custom 3 - <code>{{idea.custom3}}</code></td>
<td>
<pre>10</pre>
</td>
</tr>
<tr>
<td>Custom 4 - <code>{{idea.custom4}}</code></td>
<td>
<pre><div><br/> <h1>Someone posted this code snippet</h1><br/></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Demo 3 -->
<div class="container demo" id="demo3">
<h1>Demo 3 - Modal (rusic)</h1>
<a class="btn" data-toggle="modal" href="#overlay-3" >Launch Modal</a>
</div>
<!-- Demo 4 -->
<div class="container demo" id="demo4">
<h1>Demo 4 - Button Groups (skadoosh)</h1>
<div class="btn-group">
<a class="btn" href="#"><i class="icon-home"></i> adambutler</a>
<a class="btn" href="#"><i class="icon-user"></i> friends</a>
<a class="btn active" href="#"><i class="icon-heart"></i> following</a>
</div>
</div>
<!-- Overlays -->
<!-- Demo 3 -->
<div class="modal fade span10 custom_theme_type" id="overlay-3">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>New Custom Theme</h3>
</div>
<div class="modal-body">
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<br/><img src="assets/octocat.png" alt=""><br/>
<div class="caption">
<h5>Github</h5>
<p>If your a ninja developer you can hook your GitHub repository directly to Rusic. When you push to GitHub Rusic will automatically grab your last commit.</p>
<p><a href="#" class="btn btn-primary">Use GitHub</a>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<br/><img src="assets/html5logo.png" alt=""><br/>
<div class="caption">
<h5>Web based editor</h5>
<p>If you’re a designer like me you don’t always want to fiddle around with GitHub</p>
<p><a href="#" class="btn btn-primary">Use the Web based editor</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
// Demo 1
$('#demo1 a').popover();
// Demo 3
$('.modal#overlay-3').modal({
show: false
});
</script>
</html>