-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
108 lines (105 loc) · 7.33 KB
/
Copy pathindex.html
File metadata and controls
108 lines (105 loc) · 7.33 KB
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
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#111318" />
<title>DegNote — 捕捉旋律</title>
<link rel="stylesheet" href="./src/styles.css" />
</head>
<body>
<div class="app-shell">
<header class="topbar" data-tauri-drag-region>
<div class="titlebar-identity" data-tauri-drag-region>
<span id="project-title" class="project-title" data-tauri-drag-region>未命名</span>
<span class="project-edited" data-tauri-drag-region>已编辑</span>
</div>
<div class="transport-shell">
<div class="transport" aria-label="播放控制">
<button id="play-cursor" class="play-button" title="从光标播放（Space）">
<span class="play-icon">▶</span><span class="play-label">播放</span>
</button>
<button id="play-start" class="icon-button" title="从头播放">↤</button>
<button id="metronome" class="icon-button metronome-button" aria-pressed="false" title="节拍器" aria-label="启用或关闭节拍器">
<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M6 16h8l-1.8-11H7.8L6 16Z"/><path d="m10 12 2.6-4.8M8 16h4"/></svg>
</button>
</div>
<div id="transport-progress" class="transport-progress" aria-label="播放进度"><i id="transport-progress-fill"></i></div>
</div>
<div class="topbar-actions">
<div class="history-controls">
<button id="undo" title="撤销（⌘Z）" aria-label="撤销"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M7.5 5 3 9l4.5 4M3.5 9H12a5 5 0 0 1 5 5"/></svg></button>
<button id="redo" title="重做（⇧⌘Z）" aria-label="重做"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="m12.5 5 4.5 4-4.5 4M16.5 9H8a5 5 0 0 0-5 5"/></svg></button>
</div>
<div class="titlebar-version" data-tauri-drag-region>V0.6.0</div>
<button id="inspector-toggle" class="inspector-toggle" title="显示或隐藏侧栏" aria-label="显示或隐藏侧栏" aria-pressed="true"><svg viewBox="0 0 20 20" aria-hidden="true"><rect x="2.5" y="3" width="15" height="14" rx="2.5"/><path d="M12.5 3v14"/></svg></button>
</div>
</header>
<section class="control-strip" aria-label="工程参数">
<div id="inspector-resizer" class="inspector-resizer" aria-hidden="true"></div>
<details class="inspector-section" open>
<summary><span>工程设置</span><small>PROJECT</small></summary>
<div class="inspector-body setting-list">
<label><span>BPM</span><input id="bpm" class="numeric-input" type="number" min="20" max="300" value="120" /></label>
<label><span>拍号</span><select id="meter"><option value="4/4">4 / 4</option><option value="3/4">3 / 4</option><option value="2/4">2 / 4</option><option value="6/8">6 / 8</option></select></label>
<label><span>调号</span><select id="key"></select></label>
<label><span>基准八度</span><input id="octave" class="numeric-input" type="number" min="1" max="6" value="3" /></label>
<button id="swing" class="setting-toggle" aria-pressed="false" title="启用 Swing"><span>SWING</span><i class="toggle-led"></i></button>
<div id="swing-settings" class="swing-settings" hidden>
<label><span>模式</span><select id="swing-unit" aria-label="Swing 音符单位"><option value="8">8 分</option><option value="16">16 分</option></select></label>
<label><span>比例</span><span class="number-with-unit"><input id="swing-ratio" class="numeric-input" type="number" min="50" max="75" value="67" /></span></label>
</div>
</div>
</details>
<details class="inspector-section" open>
<summary><span>轨道</span><small>TRACKS</small></summary>
<div class="inspector-body">
<div class="track-control-row" data-track-row="chords">
<button class="track-name" data-track-activate="chords"><strong>和弦</strong><small>CHORDS</small></button>
<button class="track-eye" data-track-toggle="chords" aria-pressed="true" title="显示/隐藏和弦轨" aria-label="显示或隐藏和弦轨"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M2.4 10s2.7-4.2 7.6-4.2 7.6 4.2 7.6 4.2-2.7 4.2-7.6 4.2S2.4 10 2.4 10Z"/><circle cx="10" cy="10" r="2.2"/></svg></button>
<button data-track-mute="chords" aria-pressed="false" title="Mute">M</button>
<button data-track-solo="chords" aria-pressed="false" title="Solo">S</button>
</div>
<div class="track-control-row active" data-track-row="melody">
<button class="track-name" data-track-activate="melody"><strong>旋律</strong><small>MELODY</small></button>
<button class="track-eye" data-track-toggle="melody" aria-pressed="true" title="显示/隐藏旋律轨" aria-label="显示或隐藏旋律轨"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M2.4 10s2.7-4.2 7.6-4.2 7.6 4.2 7.6 4.2-2.7 4.2-7.6 4.2S2.4 10 2.4 10Z"/><circle cx="10" cy="10" r="2.2"/></svg></button>
<button data-track-mute="melody" aria-pressed="false" title="Mute">M</button>
<button data-track-solo="melody" aria-pressed="false" title="Solo">S</button>
</div>
<div class="track-control-row lyric-track-row" data-track-row="lyrics">
<div class="track-name"><strong>歌词</strong><small>LYRICS</small></div>
<button class="track-eye" data-track-toggle="lyrics" aria-pressed="true" title="显示/隐藏歌词轨" aria-label="显示或隐藏歌词轨"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M2.4 10s2.7-4.2 7.6-4.2 7.6 4.2 7.6 4.2-2.7 4.2-7.6 4.2S2.4 10 2.4 10Z"/><circle cx="10" cy="10" r="2.2"/></svg></button>
</div>
</div>
</details>
<details class="inspector-section" open>
<summary><span>作品信息</span><small>METADATA</small></summary>
<div class="inspector-body metadata-fields">
<label><span>标题</span><input id="meta-title" type="text" value="未命名旋律" /></label>
<label><span>创作者</span><input id="meta-creator" type="text" /></label>
<label class="notes-field"><span>备注</span><textarea id="meta-notes" rows="4"></textarea></label>
</div>
</details>
</section>
<main class="editor-content">
<section class="workspace" aria-labelledby="score-title">
<div class="workspace-heading">
<div>
<h1 id="score-title">未命名旋律</h1>
<span id="score-creator" class="score-creator"></span>
</div>
</div>
<div id="score" class="score" tabindex="0" aria-label="简谱旋律与歌词编辑器"></div>
<div class="beat-ruler" aria-hidden="true"><span>1</span><span>2</span><span>3</span><span>4</span></div>
</section>
</main>
<footer class="statusbar">
<div id="time-status">00:00 / 00:00</div>
<div id="measure-status">旋律轨 · 1/4 小节</div>
<div id="cursor-status"></div>
</footer>
</div>
<div id="toast" role="status" aria-live="polite"></div>
<script type="module" src="./src/app.js"></script>
</body>
</html>