StudyWithMiku/index.html at main · WenqiOfficial/StudyWithMiku · GitHub

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
<!DOCTYPE html>
<html lang="zh">

<head>
  <Link Rel="SHORTCUT ICON" href="icon.png">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="referrer" content="never">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- SEO START -->
  <meta name="description" content="STUDY WITH MIKU 在线自习室！来享受一个与初音未来一起高效学习的时间吧！ STUDY WITH MIKU is an online study room! Join us for a Kawaii and Productive study environment!">
  <meta name="keywords" content="MIKU, Study, Cute, Kawaii, VOCALOID, STUDY WITH MIKU, Hatsune Miku, 自习室, 在线自习室, 学习, 初音未来">
  <meta name="author" content="WenqiOfficial">
  <meta property="og:url" content="https://study.wenqi.icu/">
  <meta property="og:site_name" content="STUDY WITH MIKU - 初音未来在线自习室">
  <meta property="og:title" content="STUDY WITH MIKU - 初音未来在线自习室">
  <meta property="og:description" content="STUDY WITH MIKU 在线自习室！来享受一个与初音未来一起高效学习的时间吧！ STUDY WITH MIKU is an online study room! Join us for a Kawaii and Productive study environment!">
  <meta property="twitter:domain" content="wenqi.icu">
  <meta property="twitter:title" content="STUDY WITH MIKU - 初音未来在线自习室">
  <meta property="twitter:description" content="STUDY WITH MIKU 在线自习室！来享受一个与初音未来一起高效学习的时间吧！ STUDY WITH MIKU is an online study room! Join us for a Kawaii and Productive study environment!">
  <meta property="twitter:url" content="https://study.wenqi.icu/">
  <meta property="og:image" content="assets/cover.png">
  <meta property="twitter:image:src" content="assets/cover.png">
  <meta property="twitter:card" content="summary_large_image">
  <!-- SEO END -->
  <title>STUDY WITH MIKU - 初音未来在线自习室</title>
  <link rel="apple-touch-icon" href="icon.png">
  <link rel="manifest" href="mainfest.json">
  <link rel="preload" href="assets/css/fonts/sjsq.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>
  <link href="https://fonts.googlefonts.cn/css?family=Quicksand:400" rel="stylesheet">
  <link charset="utf-8" href="assets/css/shared/sp/css/common.css" rel="stylesheet">
  <link charset="utf-8" href="assets/css/main.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.snrat.com/ajax/libs/aplayer/1.10.1/APlayer.min.css" integrity="sha256-uqQQGnDcmRKvhKwc5Vm4XT1GQ2oV6t1U0NR2N9tV+BQ=" crossorigin="anonymous">
  <!-- Umami START -->
  <script defer src="assets/js/umami.js" data-host-url="https://umami.eo.wenqi.icu" data-website-id="b91d816b-91e7-4974-ba3d-ccb61dbecfd6" data-domains="study.wenqi.icu,studymiku.wenqi.icu,studymiku.dev.wenqi.icu,studymiku.cloudflare.wenqi.icu"></script>
  <script src="assets/js/ufunction.js"></script>
  <script>
    setInterval(() => {
      if (window.umami) {
        umami.track('heartbeat');
      }
    }, 20000);
  </script>
  <!-- Umami END -->
  <script src="https://cdnjs.snrat.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.snrat.com/ajax/libs/aplayer/1.10.1/APlayer.min.js" integrity="sha256-6Y7CJDaltoeNgk+ZftgCD9jLgmGv4xKUo8nQ0HgAwVo=" crossorigin="anonymous"></script>
  <script>var meting_api='https://api.injahow.cn/meting/?server=:server&type=:type&id=:id&auth=:auth&r=:r';</script>
  <script src="https://cdnjs.snrat.com/ajax/libs/meting/2.0.2/Meting.min.js" integrity="sha256-656Pn0lfzbjFgzE6OdsEkFsaxl0ye4HZOzV8fH8/nXA=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.snrat.com/ajax/libs/countup.js/2.8.0/countUp.umd.min.js" integrity="sha256-q+sphCsLSSNmIA52TfXzBrcZkfoLrf2u8usQ7sT7etw=" crossorigin="anonymous"></script>
  <script charset="utf-8" src="assets/js/mikuplayer.min.js" type="text/javascript"></script>
  <!-- <script charset="utf-8" src="assets/js/mikuplayer.js" type="text/javascript"></script> -->
</head>

<body>
  <div id="scene_top">
    <h1>STUDY WITH MIKU</h1>
    <div id="ng">
      <p class="atten">肥肠抱歉...<br>您的浏览器并不支持本页面需要的特性(JavaScript、本地存储)</p>
    </div>
    <div class="ok">
      <p id="bt_top"><a id="btt_start" class="disabled" onclick="ufunction.track('Study')" href="#">! STUDY !</a></p>
      <p id="bt_top"><a id="btt_setting" href="#">* 设置 *</a></p>
    </div>
    <p id="bt_about"><a id="btt_about" href="#">* 关于 *</a></p>
    <div class="ok">
      <p class="topattention">* 调节好音量，和MIKU一起学习吧! </p>
      <p id="toptips" class="topattention"></p>
    </div>
    <div id="loading">
      <p class="topattention loading">资源加载中...</p>
    </div>
  </div>
  <div id="scene_learning">
    <div class="tips">
      <p class="attention">开始认真学习/工作吧！</p>
      <p class="worldtime">现在时间:<text id="worldtime">0分</text></p>
      <p class="studytime">已经学习<text id="studytime">0分钟</text>了</p>
      <p class="hitokoto">"<hitokoto id="hitokoto">获取一言中...(*/ω＼*)</hitokoto>"</p>
    </div>
    <video src="" id="loop_clip" autoplay loop muted playsinline webkit-playsinline>
    </video>
  </div>
  <div id="about_cover"></div>
  <div id="about">
    <div id="about_in">
      <p class="close"><span id="bt_aboutclose">×</span></p>
      <p class="con"> 你已经与MIKU一起学习<text id="sumtime">0分钟了</text> </p>
      <p class="con">----------------------</p>
      <p class="con"> 素材来源 STUDY WITH MIKU <a href="https://www.bilibili.com/medialist/detail/ml2817394206" target="_blank" rel="noopener">All Parts</a> </p>
      <p class="con"> 作者 <a href="https://github.com/WenqiOfficial/" target="_blank" rel="noopener">WenqiOfficial</a> (<a href="https://space.bilibili.com/168567806" target="_blank" rel="noopener">bilibili</a>) <a href="https://github.com/WenqiOfficial/StudyWithMiku/issues/new/choose" target="_blank" rel="noopener">向我反馈</a> </p>
      <p class="link"> 感谢以下优秀项目！<br><a href="https://aplayer.js.org/" target="_blank" rel="noopener">APlayer</a> & <a href="https://github.com/metowolf/MetingJS" target="_blank" rel="noopener">MetingJS</a><br><a href="https://aidn.jp/mikutap/" target="_blank" rel="noopener">MikuTap</a> By <a href="https://aidn.jp/" target="_blank" rel="noopener">daniwellP</a> </p>
      <p class="con"> 共有<span id="umami_value_visitors">0</span>位朋友与Miku一起学习<span id="umami_value_studytimes">0</span>次啦 <br> 此刻<span id="umami_value_onlineuser">0</span>位朋友正在与MIKU一起学习! <br> *数据同步有延时... </p>
      <p class="link"> 一个不同版本的 <a href="https://study.mikumod.com/" target="_blank" rel="noopener">松灰酸的自习室~</a> </p>
    </div>
  </div>
  <div id="menu_cover"></div>
  <div id="menu">
    <div id="menu_in">
      <p class="close"><span id="bt_menuclose">×</span></p>
      <p class="con"> 场景设定 </p>
      <p class="con" id="bt_frame"><a href="#" class="btt_switcher" id="btt_scene">经典</a></p>
      <p class="con"> TIPS显示设定 </p>
      <p class="con" id="bt_frame"><a href="#" class="btt_switcher" id="btt_mode_hitokoto"> 一 言: <text id="hitokoto_mode">轮换</text></a></p>
      <p class="con" id="bt_frame"><a href="#" class="btt_switcher" id="btt_mode_worldtime">世界时间: <text id="worldtime_mode">轮换</text></a></p>
      <p class="con" id="bt_frame"><a href="#" class="btt_switcher" id="btt_mode_studytime">学习时长: <text id="studytime_mode">轮换</text></a></p>
      <p class="con"> 计时逻辑设定 </p>
      <p class="con" id="bt_frame"><a href="#" class="btt_switcher" id="btt_strict">严格模式(离开页面自动停止): 关</a></p>
      <p class="con"> 更多设定 </p>
      <p class="con" id="bt_frame"><a href="#" class="btt_switcher" id="btt_menu_music">歌单设定</a></p>
    </div>
  </div>
  <div id="top_cover"></div>
  <div id="music">
    <div id="music_in">
      <p class="close"><span id="bt_musicclose">×</span></p>
      <p class="con"> 音乐平台 </p>
      <p class="con" id="bt_frame"><a href="#" class="btt_switcher" id="btt_platform_netease"> 网易 </a>  <a href="#" class="btt_switcher" id="btt_platform_tencent"> Q Q </a></p>
      <!-- <p class="con" id="bt_frame"><a href="#" class="btt_switcher" id="btt_platform_kugou"> 酷狗 </a></p> -->
      <!-- <p class="con"> 歌单ID </p> -->
      <p class="con"> <label for="songlist_id"> 歌单ID </label> <input type="text" id="songlist_id" autocomplete="off" minlength="1" maxlength="18" value="" onkeyup="value=value.replace(/[^\d]/g,'')"> </p>
      <p class="con" id="musicconf"> <text id="conf_state">即将应用</text> <br> 音乐平台: <text id="platform"></text> 歌单ID: <text id="id"></text> </p>
      <p class="con" id="bt_frame"><a href="#" class="btt_switcher" id="btt_music_submit"> 应用 </a></p>
      <p class="con" id="bt_frame"><a href="#" class="btt_switcher" id="btt_music_reset"> 恢复默认 </a></p>
    </div>
  </div>
  <div id="rest_cover"></div>
  <div id="rest">
    <div id="rest_in">
      <p class="close"><span id="bt_restclose">×</span></p>
      <p class="con"> 休息中... </p>
      <p class="con"> 本次共学习<text id="time">0分钟</text> </p>
      <p class="con"> 已休息<text id="resttime">0分钟</text> </p>
      <p class="con">----------------------</p>
      <p class="con"> 音乐已默认暂停 <a href="#" id="bt_musicswitch">点我来切换</a> </p>
      <p class="con"> 此刻还有<span id="umami_value_onlineuser2">0</span>位朋友正在和你一样努力着呢，加油吧! <br> *数据同步有延时...</p>
      <p class="link"> <a id="bt_stop" href="#">结 束</a> </p>
    </div>
  </div>
  <div id="bt_rest">＜休息</div>
  <div id="bt_fs">∷全屏</div>
  <div id="bt_tomato"></div>
  <div id="player_back"></div>
  <meting-js> </meting-js>
  <script charset="utf-8" src="assets/js/miku.js" type="text/javascript"></script>
  <script src="check_ver.js" type="text/javascript"></script> <!-- temporary solution -->
</body>
</html>