-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathindex.html
144 lines (129 loc) · 6.76 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
<!doctype html>
<!--[if lt IE 8]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Bootstrap HTML5 Soundboard</title>
<meta name="description" content="An HTML 5 Soundboard powered by Bootstrap.">
<meta name="author" content="sk33lz">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<style>
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/style.css">
<!-- <link rel="stylesheet/less" href="less/style.less"> -->
<!-- <script src="js/libs/less-1.2.1.min.js"></script> -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<a href="https://github.com/sk33lz/bootstrap-html5-soundboard"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 1031;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Bootstrap HTML 5 Soundboard</a>
<div class="nav-collapse">
<ul class="nav">
<!-- <li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li> -->
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>Flash is Dead!</h1>
<h2>Long Live HTML5 Soundboards!</h2>
<p>The Bootstrap HTML5 Soundboard is an HTML5 Soundboard proof of concept. It doesn't require Flash and runs on modern web technologies like HTML5, jQuery, and CSS3. It is built on top of <a href="http://getbootstrap.com/" title="Bootstrap framework">Boostrap</a>, so it should run on any modern web browser and any mobile devices out of the box.</p>
<p>Click on an image to play the audio clip compatible with your device.</p>
<p><a href="https://github.com/sk33lz/bootstrap-html5-soundboard/wiki" class="btn btn-primary btn-large" title="Learn More about the Bootstrap HTML5 Soundboard">Learn more »</a></p>
</div>
</div> <!-- /container -->
<div class="container">
<div class="player">
<section>
<audio class="chewbacca" title="Chewbacca Audio Clip">
<source src="audio/chewbacca.mp3" />
<source src="audio/chewbacca.ogg" />
<source src="audio/chewbacca.m4a" />
</audio>
<audio class="angry" title="Don't Drive Angry Clip">
<source src="audio/angry.mp3" />
<source src="audio/angry.ogg" />
<source src="audio/angry.wav" />
</audio>
<audio class="luck" title="No Such Thing as Luck Clip">
<source src="audio/luck.mp3" />
<source src="audio/luck.wav" />
</audio>
<audio class="raven" title="Great Odin's Raven! Clip">
<source src="audio/raven.mp3" />
<source src="audio/raven.ogg" />
<source src="audio/raven.wav" />
</audio>
<ul id="doc" class="list floated soundboard clearfix">
<!-- Audio soundboard will go here -->
</ul>
</section>
</div> <!-- /player -->
</div> <!-- /container -->
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="span4">
<h2>Found an Issue?</h2>
<p>Found an issue with Bootstrap HTML5 Soundboard? Please submit an issue to the <a href="https://github.com/sk33lz/bootstrap-html5-soundboard/issues" title="GitHub Issue Queue">GitHub Issue Queue</a>.</p>
<p><a class="btn" href="https://github.com/sk33lz/bootstrap-html5-soundboard/issues" title="Submit an Issue">Submit an Issue »</a></p>
</div>
<div class="span4">
<h2>Pull Requests Welcome!</h2>
<p>Got a cool feature you would like to see in this script and can write the code? Please <a href="https://github.com/sk33lz/bootstrap-html5-soundboard/pulls" title="Submit a Pull Request on GitHub">Submit a Pull Request on GitHub</a>!</p>
<p><a class="btn" href="https://github.com/sk33lz/bootstrap-html5-soundboard/pulls" title="Submit a Pull Request">Submit a Pull Request »</a></p>
</div>
<div class="span4">
<h2>Developer Wiki</h2>
<p>We will be putting together some sweet documentation on how to use this script and build on to it on the <a href="https://github.com/sk33lz/bootstrap-html5-soundboard/wiki" title="GitHub Wiki">GitHub Wiki</a>.</p>
<p><a class="btn" href="https://github.com/sk33lz/bootstrap-html5-soundboard/wiki">View the Wiki »</a></p>
</div>
</div>
<hr>
</div> <!-- /container -->
<div class="container">
<footer>
<small>All sounds clips and images are copyright their original owners. Audio clips and images included on this site are for educational and research purposes only.</small>
</footer>
</div> <!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.8.2.min.js"><\/script>')</script>
<script src="js/libs/bootstrap/bootstrap-transition.js"></script>
<script src="js/libs/bootstrap/bootstrap-collapse.js"></script>
<script src="js/script.js"></script>
<!--<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; // Change UA-XXXXX-X to be your site's ID
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>-->
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script>
<script>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})})</script>
<![endif]-->
</body>
</html>