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
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Desktop Settings — Prototype 2 (sectioned rack)</title>
<link rel="stylesheet" href="desktop-settings-shared.css">
</head>
<body class="ds-stage">
<div class="ds-caption">
<b>Direction 2 — Sectioned rack.</b> Full-width console keys stacked under
engraved section labels, closest to the net/bt panel idiom. Densest and most
scannable; every control is one row you read top to bottom.
</div>
<div class="ds-bar"><span>19:24</span><span class="gear">⚙</span></div>
<div class="ds-panel" id="panel">
<div class="ds-face">
<span class="glyph">⚙</span>
<span class="title">Settings</span>
<span class="sub" id="scene-sub"></span>
<span class="x">✕</span>
</div>
<div id="body"></div>
<div class="ds-toast" id="toast"></div>
<div class="ds-subview" id="subview"></div>
</div>
<script src="desktop-settings-shared.js"></script>
<script>
const body = document.getElementById("body");
const subview = document.getElementById("subview");
DS.bindToast(document.getElementById("toast"));
function openWallpaper() {
subview.innerHTML = "";
subview.appendChild(DS.wallpaperSubview(() => subview.classList.remove("open")));
subview.classList.add("open");
}
function section(label, nodes) {
const wrap = DS.h("div", "ds-col");
wrap.appendChild(DS.engrave(label));
nodes.forEach((n) => wrap.appendChild(n));
return wrap;
}
// A wallpaper entry row styled like a console key that opens the sub-view.
function wallpaperRow() {
const el = DS.h("div", "ds-key");
el.innerHTML =
`<span class="ds-lamp off"></span><span class="k-glyph">\u{f021c}</span>` +
`<span class="k-name">Wallpaper</span><span class="k-state">manage ›</span>`;
el.onclick = openWallpaper;
return el;
}
function render() {
body.innerHTML = "";
const col = DS.h("div", "ds-col");
col.appendChild(section("Display", [
DS.toggleKey("autodim"),
DS.toggleKey("nightlight"),
(() => { const w = DS.h("div", "ds-well"); w.appendChild(DS.slider("brightness")); w.appendChild(DS.slider("kbd")); return w; })(),
]));
col.appendChild(section("Input", [
DS.toggleKey("touchpad"),
DS.toggleKey("mouse"),
]));
const powerNodes = [];
if (DS.state.laptop) powerNodes.push(DS.toggleKey("airplane"));
powerNodes.push(DS.profileSeg());
const acts = DS.h("div", "ds-grid2");
acts.appendChild(DS.actionBtn("Lock", "\u{f033e}", false));
acts.appendChild(DS.actionBtn("Suspend", "\u{f04b2}", false));
powerNodes.push(acts);
col.appendChild(section("Power", powerNodes));
col.appendChild(section("Notifications", [DS.toggleKey("dnd")]));
const scenes = DS.h("div", "ds-grid4");
Object.keys(DS.SCENES).forEach((n) => scenes.appendChild(DS.sceneKey(n)));
col.appendChild(section("Scenes", [scenes]));
col.appendChild(section("Wallpaper", [wallpaperRow()]));
body.appendChild(col);
document.getElementById("scene-sub").textContent = DS.state.scene ? "▶ " + DS.state.scene : "";
}
DS.onChange(render);
render();
</script>
</body>
</html>
|
