-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
155 lines (130 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
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calming</title>
<!-- 图标link -->
<link id="favicon" rel="icon" href="">
<!-- 默认self host，如果要改为在线需要修改下面的注释 -->
<!-- jQuery(Staticfile CDN) -->
<!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script> -->
<script src="./js/jquery.min.js"></script>
<!-- MDL 修补MDUI的缺漏-->
<!-- <script src="./js/material.min.js"></script>
<link rel="stylesheet" href="./css/material.min.css"> -->
<!-- MDUI CSS -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css" integrity="sha384-cLRrMq39HOZdvE0j6yBojO4+1PrHfB7a9l5qLcmRm/fiWXYY+CndJPmyu5FV/9Tw" crossorigin="anonymous" /> -->
<link rel="stylesheet" href="./css/mdui.min.css" integrity="sha384-cLRrMq39HOZdvE0j6yBojO4+1PrHfB7a9l5qLcmRm/fiWXYY+CndJPmyu5FV/9Tw" crossorigin="anonymous" />
<!-- MDUI Script -->
<!-- <script src="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/js/mdui.min.js" integrity="sha384-gCMZcshYKOGRX9r6wbDrvF+TcCCswSHFucUzUPwka+Gr+uHgjlYvkABr95TCOz3A" crossorigin="anonymous"></script> -->
<script src="./js/mdui.min.js" integrity="sha384-gCMZcshYKOGRX9r6wbDrvF+TcCCswSHFucUzUPwka+Gr+uHgjlYvkABr95TCOz3A" crossorigin="anonymous"></script>
<!-- Noto Sans SC -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@openfonts/noto-sans-sc_chinese-simplified@1.44.9/index.min.css"> -->
<link rel="stylesheet" href="./css/noto-sans.css">
<link rel="stylesheet" href="./css/style.css">
<script src="./js/script.js"></script>
<script src="./js/activity.js"></script>
<script src="./js/load.js" defer></script>
</head>
<body class="mdui-theme-layout-auto mdui-theme-primary-indigo">
<div id="content">
<!-- 标题部分 -->
<div class="mdui-container">
<div class="title-rack"></div>
<div class="title-rack-extend mdui-hidden-xs-down"></div>
<h1 id="headline-hi">Loading now, please wait⏳</h1>
<div class="mdui-divider"></div>
</div>
<!-- 内容部分 -->
<div class="mdui-container mdui-m-t-3" id="platte">
<!-- <h2 class="mdui-typo-title">自然音</h2>
<div class="mdui-row">
-->
<!-- 内容卡片 -->
<!-- <div class="card-container mdui-col-xs-12 mdui-col-sm-4 mdui-col-md-2 mdui-col-lg-1">
<div class="mdui-card">
<div class="mdui-card-media">
<img src="./img/ocean.webp" />
<div class="mdui-grid-tile-actions">
<div class="mdui-grid-tile-text">
<div class="mdui-grid-tile-title">Title</div>
<div class="mdui-grid-tile-subtitle"> -->
<!-- <i class="mdui-icon material-icons">nature</i> -->
<!-- This is subtitle</div>
</div>
<div class="mdui-grid-tile-buttons">
<button onclick="play('Ocean','Continuous body of salt water that is contained in enormous basins on Earth’s surface.','./sound/ocean.m4a','./img/ocean.webp')" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">play_arrow</i>
</button>
</div>
</div>
</div>
</div>
</div> -->
</div>
</div>
<!-- Control Bar 支架 -->
<div id="bottom-rack"></div>
<!-- overlay 阴影遮罩层 -->
<div id="panel-overlay"></div>
<!-- 大屏 -->
<div class="mdui-hidden-sm-down" id="bigscreen-panel">
<div class="mdui-container-fluid">
<div class="mdui-row mdui-row-gapless mdui-theme-layout-auto">
<div class="mdui-col-sm-3 mdui-theme-layout-auto" id="sm-left-panel">
<!-- 左边 -->
<div class="title-rack-fixed"></div>
<div class="mdui-container mdui-m-l-5 mdui-m-t-3">
<div class="mdui-typo-display-1 panel-title">Title</div>
<div class="mdui-typo-subheading-opacity mdui-m-t-2 panel-subtitle">This is your subheading</div>
</div>
</div>
<div class="mdui-col-sm-9" id="sm-right-panel">
<!-- 右边 -->
<img class="panel-img" src="./img/head_picture.webp">
</div>
</div>
</div>
</div>
<!-- 小屏 -->
<div class="mdui-hidden-md-up mdui-theme-layout-auto" id="smallscreen-panel">
<img class="panel-img" src="./img/head_picture.webp">
<div class="mdui-container-fluid" id="smallscreen-title">
<div class="title-rack-fixed"></div>
<div class="mdui-container mdui-m-l-5 mdui-m-t-3">
<div class="mdui-typo-display-1 panel-title">Title</div>
<div class="mdui-typo-subheading-opacity mdui-m-t-2 panel-subtitle">This is your subheading</div>
</div>
</div>
</div>
</div>
<!-- Control Bar -->
<div class="mdui-appbar mdui-shadow-3 mdui-color-white control-bar">
<div class="mdui-toolbar mdui-theme-layout-auto">
<a href="javascript:suspend()" class="mdui-btn mdui-btn-icon ">
<i class="mdui-icon material-icons" id="play-button-icon">play_arrow</i>
</a>
<span class="mdui-typo-title mdui-hidden-sm-down" style="margin-right: -8px;" id="now-playing-title">Now Playing :</span>
<span class="mdui-typo-title bar-title">欢迎</span>
<span class="mdui-typo-subheading-opacity" id="timer">0:00</span>
<audio id="audio" loop="loop"></audio>
<div class="mdui-toolbar-spacer "></div>
<a onclick="openVolumeBar()" class="mdui-btn mdui-btn-icon mdui-hidden-xs-down" id="bar-volume">
<i class="mdui-icon material-icons" id="volume-icon">volume_up</i>
</a>
<div class="mdui-hidden-xs-down" id="volume-bar-container">
<label class="mdui-slider">
<input type="range" class="" id="slide-bar" min="0" max="100" tabindex="0" value="100">
</label>
</div>
<input type="checkbox" id="arrowbox">
<label for="arrowbox">
<a onclick="switchPanel()" class="mdui-btn mdui-btn-icon" id="bar-icon-reverse">
<i class="mdui-icon material-icons ">keyboard_arrow_up</i>
</a>
</label>
</div>
</div>
</body>
</html>