|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="zh"> |
| 3 | + |
| 4 | +<head> |
| 5 | + <meta charset="utf-8"> |
| 6 | + <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| 7 | + <meta name="apple-mobile-web-app-capable" content="yes"> |
| 8 | + <meta name="mobile-web-app-capable" content="yes"> |
| 9 | + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> |
| 10 | + <meta name="description" content="通过点击/触摸播放声音并出现变化图案的互动内容。"> |
| 11 | + <title>歌tap</title> |
| 12 | + <link rel="apple-touch-icon" href="icon.png"> |
| 13 | + <link charset="UTF-8" href="shared/sp/css/common.css" rel="stylesheet"> |
| 14 | + <link charset="utf-8" href="css/utatap.css" rel="stylesheet"> |
| 15 | + <script charset="utf-8" src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js" type="text/javascript"></script> |
| 16 | + <script charset="utf-8" src="https://unpkg.com/pixi.js@6.0.2/dist/browser/pixi.min.js" type="text/javascript"></script> |
| 17 | + <script charset="utf-8" src="https://unpkg.com/gsap@3.6.1/dist/gsap.min.js" type="text/javascript"></script> |
| 18 | + <script charset="UTF-8" src="shared/js/common-2.min.js" type="text/javascript"></script> |
| 19 | + <script charset="utf-8" src="js/utatap.js" type="text/javascript"></script> |
| 20 | +</head> |
| 21 | + |
| 22 | +<body> |
| 23 | + <div id="view"></div> |
| 24 | + <div id="scene_top"> |
| 25 | + <h1>歌tap</h1> |
| 26 | + <div id="ng"> |
| 27 | + <p class="atten">十分抱歉,<br>您的浏览器并不支持本页面需要的特性</p> |
| 28 | + </div> |
| 29 | + <div class="ok"> |
| 30 | + <p id="bt_start"><a href="javascript:void(0);">! 开始 !</a></p> |
| 31 | + </div> |
| 32 | + <div class="ok"> |
| 33 | + <p id="bt_select"><a href="javascript:void(0);">: 选择 :</a></p> |
| 34 | + </div> |
| 35 | + <p id="bt_about"><a href="javascript:void(0);">* 关于 *</a></p> |
| 36 | + <div class="ok"> |
| 37 | + <p class="attention">※ 调高你的音量并享受吧!</p> |
| 38 | + </div> |
| 39 | + </div> |
| 40 | + <div id="scene_loading"> |
| 41 | + <p>少女祈祷中</p> |
| 42 | + <hr size="1" color="#fff"> </div> |
| 43 | + <div id="scene_main"> |
| 44 | + <div class="set"> |
| 45 | + <p class="attention">点击 & 拖动或者按任意键!</p> |
| 46 | + <p id="bt_feedback"><a href="javascript:void(0);">反馈: 开启</a></p> |
| 47 | + <p id="bt_backtrack"><a href="javascript:void(0);">背景音乐: 开启</a></p> |
| 48 | + </div> |
| 49 | + </div> |
| 50 | + <div id="select_cover"></div> |
| 51 | + <div id="select"> |
| 52 | + <div id="select_in"> |
| 53 | + <p class="close"><span id="bt_close">×</span></p> |
| 54 | + <div class="split"> |
| 55 | + <div class="container_vocal"> |
| 56 | + <p class="con">选择歌姬</p> |
| 57 | + <ul id="vocals"></ul> |
| 58 | + <hr class="custom_dash" /> |
| 59 | + <div class="custom"> |
| 60 | + <input type="file" id="file_vocal" title="从本地上传歌姬" accept=".json"> |
| 61 | + <label for="file_vocal">*自定义*</label> |
| 62 | + </div> |
| 63 | + </div> |
| 64 | + <hr /> |
| 65 | + <div class="container_tracks"> |
| 66 | + <p class="con">选择背景音轨</p> |
| 67 | + <ul id="tracks"></ul> |
| 68 | + <hr class="custom_dash" /> |
| 69 | + <div class="custom"> |
| 70 | + <input type="file" id="file_music" title="从本地上传背景音轨" accept=".json"> |
| 71 | + <label for="file_music">*自定义*</label> |
| 72 | + </div> |
| 73 | + </div> |
| 74 | + </div> |
| 75 | + <p>欢迎将你制作的歌姬与背景音轨文件贡献到 <a href="https://github.com/MrXiaoM/uta-tap/tree/main/data" target="_blank">Github 仓库</a>!</p> |
| 76 | + <p class="con">本地配置制作教程也在仓库哦~</p> |
| 77 | + </div> |
| 78 | + </div> |
| 79 | + <div id="about_cover"></div> |
| 80 | + <div id="about"> |
| 81 | + <div id="about_in"> |
| 82 | + <p class="close"><span id="bt_close">×</span></p> |
| 83 | + <p class="con"> 声音来源 <a href="https://github.com/MrXiaoM/uta-tap/tree/main/data" target="_blank">Github 的各位!</a> </p> |
| 84 | + <p class="con"> 作者 <a href="https://www.mrxiaom.top/" target="_blank">人间工作</a> </p> |
| 85 | + <p class="link"> 灵感来源 <a href="https://aidn.jp/mikutap" target="_blank">mikutap</a><br>(原作者 <a href="https://aidn.jp" target="_blank">daniwell</a> (<a href="https://twitter.com/daniwell_aidn" target="_blank">twitter</a>)) </p> |
| 86 | + <p class="con"> 想要点击开始后自动播放吗? 请在链接后加上 <code>?auto=1</code> </p> |
| 87 | + </div> |
| 88 | + </div> |
| 89 | + <div id="bt_back"><返回</div> |
| 90 | + <div id="bt_fs">全屏显示</div> |
| 91 | +</body> |
| 92 | + |
| 93 | +</html> |
0 commit comments