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
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Desktop Settings — Prototype 3 (scenes-first)</title>
<link rel="stylesheet" href="desktop-settings-shared.css">
<style>
/* Scenes-first: the hero scene grid + the active-scene readout. */
.ds-scene.hero { min-height: 74px; padding: 12px 8px; }
.ds-scene.hero .sc-glyph { font-size: 24px; }
.ds-scene.hero .sc-name { font-size: 12.5px; }
.scene-readout {
background: var(--well); border: 1px solid var(--line); border-radius: 10px;
padding: 8px 11px; font-size: 11.5px; color: var(--steel); min-height: 20px;
}
.scene-readout b { color: var(--gold); font-weight: 700; }
.scene-readout .sets { color: var(--silver); }
.manual-head { display: flex; align-items: center; gap: 8px; }
.manual-head .hint { color: var(--dim); font-size: 10px; margin-left: auto; }
</style>
</head>
<body class="ds-stage">
<div class="ds-caption">
<b>Direction 3 — Scenes-first.</b> The scene selector is the hero: one tap sets
the whole desktop (the iOS-Focus idea). Individual controls sit below as the
manual-override layer, and touching one drops you out of the active scene.
</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"));
const NAMEOF = {
autodim: "auto-dim", caffeine: "caffeine", touchpad: "touchpad", mouse: "mouse",
airplane: "airplane", nightlight: "night light", dnd: "DND",
};
function sceneSummary(name) {
const sets = DS.SCENES[name].sets;
const parts = Object.entries(sets).map(([k, v]) => {
if (k === "powerprofile") return v;
return (v ? "" : "no ") + (NAMEOF[k] || k);
});
return parts.join(", ");
}
function openWallpaper() {
subview.innerHTML = "";
subview.appendChild(DS.wallpaperSubview(() => subview.classList.remove("open")));
subview.classList.add("open");
}
function render() {
body.innerHTML = "";
const col = DS.h("div", "ds-col");
// Hero scenes
col.appendChild(DS.engrave("Scene"));
const grid = DS.h("div", "ds-grid2");
Object.keys(DS.SCENES).forEach((n) => {
const k = DS.sceneKey(n);
k.classList.add("hero");
k.addEventListener("mouseenter", () => setReadout(n));
grid.appendChild(k);
});
col.appendChild(grid);
const readout = DS.h("div", "scene-readout");
readout.id = "readout";
col.appendChild(readout);
// Manual override layer
const mh = DS.h("div", "manual-head");
mh.appendChild(DS.engrave("Manual"));
const hint = DS.h("span", "hint", "overrides the scene");
mh.appendChild(hint);
col.appendChild(mh);
const grid2 = DS.h("div", "ds-grid2");
["autodim", "caffeine", "touchpad", "mouse", "nightlight", "dnd"].forEach((key) =>
grid2.appendChild(DS.toggleTile(key)));
if (DS.state.laptop) grid2.appendChild(DS.toggleTile("airplane"));
col.appendChild(grid2);
const levels = DS.h("div", "ds-well");
levels.appendChild(DS.slider("brightness"));
levels.appendChild(DS.slider("kbd"));
col.appendChild(levels);
col.appendChild(DS.profileSeg());
const acts = DS.h("div", "ds-grid3");
acts.appendChild(DS.actionBtn("Lock", "\u{f033e}", false));
acts.appendChild(DS.actionBtn("Suspend", "\u{f04b2}", false));
acts.appendChild(DS.actionBtn("Wallpaper", "\u{f021c}", false, openWallpaper));
col.appendChild(acts);
body.appendChild(col);
setReadout(DS.state.scene);
document.getElementById("scene-sub").textContent = DS.state.scene ? "▶ " + DS.state.scene : "";
}
function setReadout(name) {
const r = document.getElementById("readout");
if (!r) return;
if (!name) { r.innerHTML = `<span>No scene active — controls are manual.</span>`; return; }
r.innerHTML = `<b>${name}</b> — <span class="sets">${sceneSummary(name)}</span>`;
}
DS.onChange(render);
render();
</script>
</body>
</html>
|
