My-Media-Control/options.html at main · Ping6666/My-Media-Control · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Control Settings</title>
    <link rel="stylesheet" href="options.css">
</head>
<body>
    <main class="page">
        <header class="hero">
            <div>
                <p class="eyebrow">Media Control</p>
                <h1>Control Panel</h1>
                <p class="subtitle">Tune speed, volume, popup size, overlay behavior, and keyboard shortcuts.</p>
            </div>
            <div class="hero-actions">
                <button id="reset-defaults" class="ghost-btn" type="button">Reset Defaults</button>
                <button id="save-settings" class="primary-btn" type="button">Save Settings</button>
            </div>
        </header>

        <p id="status-message" class="status" aria-live="polite"></p>

        <section class="panel-grid">
            <article class="panel">
                <h2>Speed Control</h2>
                <div class="field-grid">
                    <label class="field">
                        <span>Minimum (x)</span>
                        <input id="speed-min" type="number" min="0.1" max="16" step="0.05">
                    </label>
                    <label class="field">
                        <span>Maximum (x)</span>
                        <input id="speed-max" type="number" min="0.1" max="16" step="0.05">
                    </label>
                    <label class="field">
                        <span>Step (x)</span>
                        <input id="speed-step" type="number" min="0.05" max="5" step="0.05">
                    </label>
                </div>
            </article>

            <article class="panel">
                <h2>Volume Control</h2>
                <div class="field-grid">
                    <label class="field">
                        <span>Minimum (%)</span>
                        <input id="volume-min" type="number" min="0" max="1000" step="1">
                    </label>
                    <label class="field">
                        <span>Maximum (%)</span>
                        <input id="volume-max" type="number" min="0" max="1000" step="1">
                    </label>
                    <label class="field">
                        <span>Step (%)</span>
                        <input id="volume-step" type="number" min="1" max="500" step="1">
                    </label>
                </div>
            </article>

            <article class="panel">
                <h2>Playback Controls</h2>
                <div class="field-grid">
                    <label class="field">
                        <span>Seek Step (seconds)</span>
                        <input id="timestamp-step" type="number" min="1" max="600" step="1">
                    </label>
                </div>
            </article>

            <article class="panel">
                <h2>Popup Size</h2>
                <div class="field-grid">
                    <label class="field">
                        <span>Popup Width (px)</span>
                        <input id="popup-width" type="number" min="320" max="900" step="10">
                    </label>
                    <label class="field">
                        <span>Popup Height (px)</span>
                        <input id="popup-height" type="number" min="240" max="1200" step="10">
                    </label>
                </div>
            </article>

            <article class="panel">
                <h2>Overlay</h2>
                <div class="field-grid">
                    <label class="field checkbox-field">
                        <span>Overlay Visible by Default</span>
                        <input id="overlay-visible" type="checkbox">
                    </label>
                </div>
            </article>

            <article class="panel hotkey-panel">
                <div class="panel-heading">
                    <div>
                        <h2>Hotkeys</h2>
                        <p>Click Record, then press the shortcut you want.</p>
                    </div>
                </div>
                <div id="hotkey-list" class="hotkey-list"></div>
            </article>
        </section>
    </main>

    <template id="hotkey-row-template">
        <div class="hotkey-row">
            <div>
                <div class="hotkey-label"></div>
                <div class="hotkey-hint"></div>
            </div>
            <div class="hotkey-controls">
                <input class="hotkey-value" type="text" readonly>
                <button class="ghost-btn hotkey-record" type="button">Record</button>
                <button class="ghost-btn hotkey-clear" type="button">Clear</button>
            </div>
        </div>
    </template>

    <script src="options.js"></script>
</body>
</html>