-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
130 lines (114 loc) · 4.8 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section class="sss-wrapper">
<header class="sss-header">
<h1 class="sss-title">Second Screen Session</h1>
<p class="sss-subTitle">Catch the beat</p>
</header>
<div id="waiting">
<div class="sss-unitInfo host">
<p class="sss-unitInfo-id" id="my-id"></p>
<div class="sss-unitInfo-rowRight">
<div id="music" class="sss-unitInfo-btnWrapper">
<button class="sss-unitInfo-btn" id="music-start">Start Music</button>
</div>
<div id="session" class="sss-unitInfo-btnWrapper">
<button class="sss-unitInfo-btn" id="session-call">Start Session</button>
</div>
</div>
</div>
<div class="sss-clients" id="playerCard">
</div>
</div>
<div id="starting" style="display:none;">
<section id="timelineWrapper" class="sss-timelineWrapper">
<div class="sss-timeline sss-timeline-hh" id="sounds-hh">
<!-- <span class="sss-note"></span> -->
</div>
<div class="sss-timeline sss-timeline-sd" id="sounds-sd">
<!-- <span class="sss-note"></span> -->
</div>
<div class="sss-timeline sss-timeline-bd" id="sounds-bd">
<!-- <span class="sss-note"></span> -->
</div>
</section>
<section class="sss-units">
<div class="drum-item drum-hh">
Hi-Hat
<div class="drum-effect"></div>
</div>
<div class="drum-item drum-bd">
Bass Drum
<div class="drum-effect"></div>
</div>
<div class="drum-item drum-sd">
Snare
<div class="drum-effect"></div>
</div>
</section>
<!-- <div id="sound-buttons">
<img class="" id="sounds-hh" src="http://dummyimage.com/100x40/fefefe/0010ee&text=Hi-hat" alt="Hi-hat">
<img class="" id="sounds-sd" src="http://dummyimage.com/100x40/fefefe/0010ee&text=Snare+Drum" alt="SnareDrum">
<img class="" id="sounds-bd" src="http://dummyimage.com/100x40/fefefe/0010ee&text=Bass+Drum" alt="BassDrum">
<img class="" id="sounds-cy" src="http://dummyimage.com/100x40/fefefe/0010ee&text=Cymbal" alt="Cymbal">
</div> -->
</div>
<p>
<h3>難易度</h3>
<label><input type="radio" name="difficulty" value="easy" checked>Easy</label>
<label><input type="radio" name="difficulty" value="normal">Normal</label>
<label><input type="radio" name="difficulty" value="hard">Hard</label>
</p>
<!--
<p>
あなたのPeerID：<span id="my-id">...</span><br>
チャット中のPeerID：<span id="their-id"></span><br>
チャット可能なPeerID：<select id="contactlist" name="contact"></select>
<button type="button" id="make-connection">接続</button>
</p>
-->
<!-- <div id="session">
<button type="button" id="session-call">セッション開始！</button>
</div> -->
<!-- <div id="music">
<button id="music-start">Musicスタート！</button>
</div> -->
<!-- <div id="sound-buttons">
<img class="" id="sounds-hh" src="http://dummyimage.com/100x40/fefefe/0010ee&text=Hi-hat" alt="Hi-hat">
<img class="" id="sounds-sd" src="http://dummyimage.com/100x40/fefefe/0010ee&text=Snare+Drum" alt="SnareDrum">
<img class="" id="sounds-bd" src="http://dummyimage.com/100x40/fefefe/0010ee&text=Bass+Drum" alt="BassDrum">
<img class="" id="sounds-cy" src="http://dummyimage.com/100x40/fefefe/0010ee&text=Cymbal" alt="Cymbal">
</div> -->
<div id="history">
<ul>
</ul>
</div>
<script type="text/javascript">
// ユーザ名をランダムに生成
var userName = 'host' + Math.floor(Math.random() * 100);
var myInst = 'host';
var myKey = 'host';
</script>
<script src="./js/jquery-2.1.0.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="https://skyway.io/dist/0.3/peer.js"></script>
<script src="./js/funky.js"></script>
<script src="./js/script.js"></script>
<script src="./js/timeline.js"></script>
</body>
</html>