-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex3.html
127 lines (116 loc) · 4.51 KB
/
index3.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<!-- Bootstrap -->
<!-- <link href="css/bootstrap.min.css" rel="stylesheet"> -->
<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" style="display:none;">
<div class="sss-unitInfo host">
<p class="sss-unitInfo-id">host100</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">
<div class="sss-unitInfo client unit-hh">
<p class="sss-unitInfo-id">drum01</p>
<p class="sss-unitInfo-inst">Drums</p>
<p class="sss-unitInfo-type">Hi-Hat</p>
<span class="sss-unitInfo-arrow"></span>
</div>
<div class="sss-unitInfo client unit-bd">
<p class="sss-unitInfo-id">drum02</p>
<p class="sss-unitInfo-inst">Drums</p>
<p class="sss-unitInfo-type">Bass Drum</p>
</div>
<div class="sss-unitInfo client unit-sd">
<p class="sss-unitInfo-id">drum03</p>
<p class="sss-unitInfo-inst">Drums</p>
<p class="sss-unitInfo-type">Snare</p>
</div>
</div>
<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>
<div id="starting">
<section id="timelineWrapper" class="sss-timelineWrapper">
<div class="sss-timeline sss-timeline-hh">
<!-- <span class="sss-note"></span> -->
</div>
<div class="sss-timeline sss-timeline-sd" id="test-timeline">
<!-- <span class="sss-note"></span> -->
</div>
<div class="sss-timeline sss-timeline-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>
<div id="history">
<ul>
</ul>
</div>
</section>
<script type="text/javascript">
// ユーザ名をランダムに生成
var userName = 'host' + Math.floor(Math.random() * 100);
</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/rhythm.js"></script> -->
<!-- // <script src="./js/script.js"></script> -->
<script>
$(function(){
$("#test-timeline").on("click",function(){
$(this).append($('<span class="sss-note"></span>'));
});
});
</script>
</body>
</html>