-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·291 lines (280 loc) · 19.7 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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Musharing 晓音</title>
<link href="https://fonts.googleapis.com/css?family=Heebo:400,700|IBM+Plex+Sans:600" rel="stylesheet">
<link rel="stylesheet" href="dist/css/style.css">
<link rel="stylesheet" href="./dist/css/iconfont.css">
</head>
<body class="is-boxed has-animations">
<div class="body-wrap boxed-container">
<header class="site-header">
<div class="container">
<div class="site-header-inner">
<div class="brand header-brand">
<div class="hero-cta">
<!-- <h1 class="m-0">
<a href="#">
<img class="header-logo-image asset-light" src="dist/images/logo-light.svg" alt="Logo">
<img class="header-logo-image asset-dark" src="dist/images/logo-dark.svg" alt="Logo">
</a>
</h1> -->
<div class="lights-toggle">
<input id="lights-toggle" type="checkbox" name="lights-toggle" class="switch"
checked="checked">
<label for="lights-toggle" class="text-xs"><span>Turn me <span
class="label-text">dark</span></span></label>
</div>
<a href="./index.html">
<span class="iconfont icon-homepage"
style="position: absolute; right: 5%; font-size: 30px !important;"></span>
</a>
</div>
</div>
</div>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<div class="hero-inner">
<div class="hero-copy">
<h1 class="hero-title mt-0">Musharing</h1>
<p class="hero-paragraph">
<blockquote>互联网时代的全新音乐分享方式</blockquote>
</p>
<p class="hero-paragraph">
<em>晓音(Musharing)</em>是一款通过互联网与朋友即时分享音乐的 android 应用程序。
有了 musharing，你可以在<em>真</em>同步播放音乐的背景下与朋友聊天，无论你们相距多远。
</p>
<p class="hero-paragraph"></p>
<div class="hero-cta">
<a class="button button-primary"
href="https://github.com/musharing-team/Musharing-Android/tree/master/release"
style="padding-bottom: 50px">
<div class="cta-cta">
<div>马上下载</div>
<svg style="margin: 0 auto" width="24" height="24"
xmlns="http://www.w3.org/2000/svg">
<title>Android</title>
<path style="margin: 0 auto"
d="M24 19H0a13.6 13.6 0 0 1 2.21-6.07A11.2 11.2 0 0 1 5.87 9.4l.41-.23-2.02-3.41a.51.51 0 0 1 .17-.7.5.5 0 0 1 .69.18l2.08 3.5a12.62 12.62 0 0 1 4.84-.9 12.2 12.2 0 0 1 4.75.9l2.07-3.5a.5.5 0 0 1 .7-.17.51.51 0 0 1 .16.7L17.7 9.19l.5.28a11.38 11.38 0 0 1 3.63 3.62A14.48 14.48 0 0 1 24 19zm-7.5-4.48a1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1 1 1 0 0 0-1 1zm-11 0a1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1 1 1 0 0 0-1 1z"
fill="#FFF" />
</svg>
</div>
</a>
</div>
</div>
<div class="hero-media">
<div class="header-illustration">
<img class="header-illustration-image asset-light"
src="dist/images/header-illustration-light.svg" alt="Header illustration">
<img class="header-illustration-image asset-dark"
src="dist/images/header-illustration-dark.svg" alt="Header illustration">
</div>
<div class="hero-media-illustration">
<img class="hero-media-illustration-image asset-light"
src="dist/images/hero-media-illustration-light.svg" alt="Hero media illustration">
<img class="hero-media-illustration-image asset-dark"
src="dist/images/hero-media-illustration-dark.svg" alt="Hero media illustration">
</div>
<div class="hero-media-container">
<!-- <img class="hero-media-image asset-light" src="dist/images/hero-media-light.svg" alt="Hero media"> -->
<img class="hero-media-image asset-light"
src="dist/images/musharing/icon-transparent.svg" alt="Hero media">
<!-- <img class="hero-media-image asset-dark" src="dist/images/hero-media-dark.svg" alt="Hero media"> -->
<img class="hero-media-image asset-dark"
src="dist/images/musharing/icon-transparent.svg" alt="Hero media">
</div>
</div>
</div>
</div>
</section>
<section class="features section">
<div class="container">
<div class="features-inner section-inner has-bottom-divider">
<div class="features-header text-center">
<div class="container-sm">
<h2 class="section-title mt-0">发现 Musharing</h2>
<p class="section-paragraph">
“晓音”是一个专注于交互感、私密感、体验感的熟人社交音乐软件。
它与其它音乐软件不同的在于，注重交流，追求同步与即时，强调两个人，旨在传达感情。
</p>
<div class="features-image">
<img class="features-illustration asset-dark"
src="dist/images/features-illustration-dark.svg" alt="Feature illustration">
<!-- <img class="features-box asset-dark" src="dist/images/features-box-dark.svg" alt="Feature box"> -->
<img class="features-box asset-dark" src="dist/images/musharing/screenshot.svg"
alt="Feature box">
<img class="features-illustration asset-dark"
src="dist/images/features-illustration-top-dark.svg"
alt="Feature illustration top">
<img class="features-illustration asset-light"
src="dist/images/features-illustration-light.svg" alt="Feature illustration">
<!-- <img class="features-box asset-light" src="dist/images/features-box-light.svg" alt="Feature box"> -->
<img class="features-box asset-light" src="dist/images/musharing/screenshot.svg"
alt="Feature box">
<img class="features-illustration asset-light"
src="dist/images/features-illustration-top-light.svg"
alt="Feature illustration top">
</div>
</div>
</div>
<div class="features-wrap">
<div class="feature is-revealing">
<div class="feature-inner">
<div class="feature-icon">
<img class="asset-light" src="dist/images/musharing/tpsl2.svg" alt="Feature 01">
<img class="asset-dark" src="dist/images/musharing/tpsl2.svg" alt="Feature 01">
</div>
<div class="feature-content">
<h3 class="feature-title mt-0">世界上第一台随身听</h3>
<p class="text-sm mb-0">1979年7月1日，索尼发布了第一款标志性的盒式磁带随身听
TPS-L2。令人印象深刻的是，它配备有两个迷你耳机插孔，允许两个人同时收听。同时，TPS-L2
有一个“HotLine”按钮，用来激活一个小的内置麦克风，部分覆盖磁带中的声音，允许一个用户通过音乐与另一个用户交谈。</p>
<p class="text-sm mb-0">
在这个随身听已经几乎成为历史的时代里，偶有那么一刻，我们会怀念它曾经带给我们的仪式感与感动。这是“晓音”诞生的初衷。</p>
<p class="text-sm mb-0">“晓音”以 Android App 的形式，希望复刻 TPS-L2 带来的感动。</p>
</div>
</div>
</div>
<div class="feature is-revealing">
<div class="feature-inner">
<div class="feature-icon">
<img class="asset-light" src="dist/images/musharing/musharing-color.svg"
alt="Feature 02">
<img class="asset-dark" src="dist/images/musharing/musharing-color.svg"
alt="Feature 02">
</div>
<div class="feature-content">
<h3 class="feature-title mt-0">现在，有一首歌只想和你听</h3>
<p class="text-sm mb-0">
网易云把小众音乐的爱好者聚集在了一起，全民k歌为每个人预留了发挥的空间。二者的火爆，是因为许多音乐是应该拿出来与大家一起分享的——而有的音乐，只愿意与一个人分享。
</p>
<p class="text-sm mb-0">“晓音”只为你把音乐分享给那个人。</p>
<p class="text-sm mb-0">
“晓音”秉持极简主义风格，播放音乐的同时，可以用在应用内进行聊天交互，虽然是用键盘输入的文字，但它更像我们在说话，不能撤回，也只能用自己的记忆保存。
</p>
<p class="text-sm mb-0">不论携手相依，或是相隔异地。愿此刻二人世界，只有音乐为伴。</p>
</div>
</div>
</div>
<div class="feature is-revealing">
<div class="feature-inner">
<div class="feature-icon">
<img class="asset-light" src="dist/images/musharing/hotline.svg"
alt="Feature 03">
<img class="asset-dark" src="dist/images/musharing/hotline.svg"
alt="Feature 03">
</div>
<div class="feature-content">
<h3 class="feature-title mt-0">说不出的话，晓音帮你唱出来</h3>
<p class="text-sm mb-0">文字不能传达的，就亲口对ta说。</p>
<p class="text-sm mb-0">按下“HotLine”，音乐的声音将被调低，同时设备的麦克风将采集你的声音并传达给那个人。</p>
<p class="text-sm mb-0">把不敢说的话，用唱的方式告诉ta。</p>
</div>
</div>
</div>
</div>
<div class="features-header text-center">
<div class="container-sm">
<br /><br /><hr /><br /><br />
<h2 class="section-title mt-0">开发动态</h2>
<p class="section-paragraph">
【Updated 2020.02.04】
We are glad to iterate Musharing into beta versions, which means a set of great
progress was made by our continual hard work. There seems still an endless way to
go, but we are ready for next.
Enjoy your Musharing and await a better.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="cta section">
<div class="container-sm">
<div class="cta-inner section-inner">
<div class="cta-header text-center">
<h2 class="section-title mt-0">加入 Musharing</h2>
<div class="cta-cta" style="float: left">
<p class="section-paragraph">现在下载体验 Musharing 与全新音乐分享方式。</p>
<a class="button button-primary"
href="https://github.com/musharing-team/Musharing-Android/tree/master/release">下载
Musharing</a>
<p> </p>
</div>
<div class="cta-cta" style="float: right">
<p class="section-paragraph">参与项目的开发，与 Musharing 一起成长。</p>
<a class="button button-primary"
href="https://github.com/musharing-team/Musharing-Android">开放源代码</a>
<p> </p>
</div>
</div>
</div>
</div>
<div style="margin: 0px">
<em style="font-size: 10px">【注】目前只提供开发中的 Beta 版本，不保证稳定性。</em>
</div>
</section>
</main>
<footer class="site-footer has-top-divider">
<div class="container">
<div class="site-footer-inner">
<div class="brand footer-brand">
<a href="#">
<img class="asset-light" src="dist/images/logo-light.svg" alt="Logo">
<img class="asset-dark" src="dist/images/logo-dark.svg" alt="Logo">
</a>
</div>
<ul class="footer-links list-reset">
<li>
<a href="./faq.html">常见问题</a>
</li>
<li>
<a href="./contact.html">联系我们</a>
</li>
</ul>
<ul class="footer-social-links list-reset">
<li>
<a href="https://github.com/musharing-team/Musharing-Android">
<span class="screen-reader-text">GitHub</span>
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
fill="#FFF"></path>
</svg>
</a>
</li>
<li>
<span class="screen-reader-text">Mail</span>
<img src="dist/images/musharing/mail.svg" height="16" width="16">
</a>
</li>
<!-- <li>
<a href="#">
<span class="screen-reader-text">Google</span>
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<path
d="M7.9 7v2.4H12c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C11.5 1.7 9.9 1 8 1 4.1 1 1 4.1 1 8s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H7.9z"
fill="#FFF" />
</svg>
</a>
</li> -->
</ul>
<div class="footer-copyright">Copyright © 2019 Musharing Team, all rights reserved.</div>
</div>
</div>
<div>免责声明：网页设计来自<a href="https://cruip.com/switch/" target="_blank" title="switch, cruip">cruip</a>，©
Switch,
cruip all rights reserved。如果有侵犯权益，请您告知，我们会立即处理。</div>
</footer>
</div>
<script src="dist/js/main.min.js"></script>
</body>
</html>