Skip to content

Commit 17e85e0

Browse files
bytecode001bytecode001
authored
Add files via upload
1 parent 1f60532 commit 17e85e0

3 files changed

Lines changed: 2403 additions & 0 deletions

File tree

‎045-drag-to-reorder-dashboard/index.html‎

Lines changed: 315 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,316 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<meta name="color-scheme" content="dark">
7+
<meta name="theme-color" content="#0b0d14">
8+
<meta name="referrer" content="no-referrer">
9+
<meta
10+
http-equiv="Content-Security-Policy"
11+
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'"
12+
>
13+
<meta
14+
name="description"
15+
content="A modular dashboard with pointer-driven reordering, FLIP animations, keyboard controls, and locally saved layouts."
16+
>
17+
<title>AERIS — Drag-to-Reorder Dashboard</title>
18+
<link rel="stylesheet" href="styles.css">
19+
<script src="script.js" defer></script>
20+
</head>
121

22+
<body>
23+
<a class="skip-link" href="#dashboard-grid">Skip to dashboard cards</a>
24+
25+
<!-- Decorative gradients are intentionally hidden from assistive technology. -->
26+
<div class="ambient ambient--lime" aria-hidden="true"></div>
27+
<div class="ambient ambient--violet" aria-hidden="true"></div>
28+
29+
<div class="app-shell">
30+
<header class="topbar">
31+
<a class="brand" href="#main-content" aria-label="AERIS dashboard home">
32+
<span class="brand__mark" aria-hidden="true">
33+
<svg viewBox="0 0 32 32" focusable="false">
34+
<path d="M7 22.5 16 5l9 17.5-9-4.25L7 22.5Z"></path>
35+
<circle cx="16" cy="24.5" r="2.5"></circle>
36+
</svg>
37+
</span>
38+
<span class="brand__word">AERIS</span>
39+
</a>
40+
41+
<div class="workspace-pill" aria-label="Current workspace">
42+
<span class="workspace-pill__dot" aria-hidden="true"></span>
43+
Creative workspace
44+
</div>
45+
46+
<div class="topbar__actions">
47+
<time class="live-time" id="live-time" aria-label="Current time"></time>
48+
<button class="icon-button" id="reset-layout" type="button" aria-label="Restore the default card order">
49+
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
50+
<path d="M4 4v5h5"></path>
51+
<path d="M5.6 15.3A7.5 7.5 0 1 0 6 8.1L4 9"></path>
52+
</svg>
53+
</button>
54+
<div class="avatar" role="img" aria-label="Profile placeholder">A</div>
55+
</div>
56+
</header>
57+
58+
<main id="main-content">
59+
<section class="intro" aria-labelledby="dashboard-title">
60+
<div>
61+
<p class="eyebrow" id="today-label">Your workspace</p>
62+
<h1 id="dashboard-title"><span id="greeting">Good morning</span>.</h1>
63+
<p class="intro__copy">Shape the week, then move what matters.</p>
64+
</div>
65+
66+
<div class="layout-hint">
67+
<span class="layout-hint__icon" aria-hidden="true">
68+
<svg viewBox="0 0 24 24" focusable="false">
69+
<circle cx="9" cy="7" r="1.25"></circle>
70+
<circle cx="15" cy="7" r="1.25"></circle>
71+
<circle cx="9" cy="12" r="1.25"></circle>
72+
<circle cx="15" cy="12" r="1.25"></circle>
73+
<circle cx="9" cy="17" r="1.25"></circle>
74+
<circle cx="15" cy="17" r="1.25"></circle>
75+
</svg>
76+
</span>
77+
<span><strong>Make it yours.</strong> Press and drag any card to place it anywhere.</span>
78+
</div>
79+
</section>
80+
81+
<p class="sr-only" id="drag-instructions">
82+
With a mouse, press and drag any non-interactive area of a card. On touch, drag from its handle. With a keyboard, press Enter or Space on a handle, use the arrow keys to move the card, then press Enter or Space again to save. Press Escape to cancel.
83+
</p>
84+
85+
<!-- The DOM order of these cards is the layout source of truth. -->
86+
<section class="dashboard-grid" id="dashboard-grid" aria-label="Reorderable dashboard cards">
87+
<article class="dashboard-card card--focus" data-card-id="deep-work" data-card-title="Deep work">
88+
<header class="card-header">
89+
<div>
90+
<p class="card-kicker">Focus</p>
91+
<h2>Deep work</h2>
92+
</div>
93+
<button class="drag-handle" type="button" aria-label="Reorder Deep work" aria-describedby="drag-instructions" aria-pressed="false">
94+
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
95+
<circle cx="9" cy="7" r="1.25"></circle><circle cx="15" cy="7" r="1.25"></circle>
96+
<circle cx="9" cy="12" r="1.25"></circle><circle cx="15" cy="12" r="1.25"></circle>
97+
<circle cx="9" cy="17" r="1.25"></circle><circle cx="15" cy="17" r="1.25"></circle>
98+
</svg>
99+
</button>
100+
</header>
101+
<div class="focus-layout">
102+
<div>
103+
<p class="metric metric--large">18<span>h</span> 42<span>m</span></p>
104+
<p class="metric-note"><span class="trend trend--up">↗ 12%</span> from last week</p>
105+
</div>
106+
<div class="focus-ring" role="img" aria-label="Seventy-eight percent of weekly focus target completed">
107+
<svg viewBox="0 0 100 100" aria-hidden="true" focusable="false">
108+
<circle class="focus-ring__track" cx="50" cy="50" r="42"></circle>
109+
<circle class="focus-ring__value" cx="50" cy="50" r="42"></circle>
110+
</svg>
111+
<span>78<small>%</small></span>
112+
</div>
113+
</div>
114+
<div class="card-footer">
115+
<span>Weekly target</span><strong>24 hours</strong>
116+
</div>
117+
</article>
118+
119+
<article class="dashboard-card card--momentum" data-card-id="momentum" data-card-title="Momentum">
120+
<header class="card-header">
121+
<div>
122+
<p class="card-kicker">Flow score</p>
123+
<h2>Momentum</h2>
124+
</div>
125+
<button class="drag-handle" type="button" aria-label="Reorder Momentum" aria-describedby="drag-instructions" aria-pressed="false">
126+
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
127+
<circle cx="9" cy="7" r="1.25"></circle><circle cx="15" cy="7" r="1.25"></circle>
128+
<circle cx="9" cy="12" r="1.25"></circle><circle cx="15" cy="12" r="1.25"></circle>
129+
<circle cx="9" cy="17" r="1.25"></circle><circle cx="15" cy="17" r="1.25"></circle>
130+
</svg>
131+
</button>
132+
</header>
133+
<div class="score-row">
134+
<p class="metric metric--score">86</p>
135+
<span class="score-row__unit">/ 100</span>
136+
</div>
137+
<div class="mini-bars" aria-label="Momentum over the last seven days" role="img">
138+
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
139+
</div>
140+
<p class="insight"><span aria-hidden="true">✦</span> Your strongest streak this month.</p>
141+
</article>
142+
143+
<article class="dashboard-card card--agenda" data-card-id="agenda" data-card-title="Today's agenda">
144+
<header class="card-header">
145+
<div>
146+
<p class="card-kicker" id="agenda-day-label">Today</p>
147+
<h2>Today's agenda</h2>
148+
</div>
149+
<button class="drag-handle" type="button" aria-label="Reorder Today's agenda" aria-describedby="drag-instructions" aria-pressed="false">
150+
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
151+
<circle cx="9" cy="7" r="1.25"></circle><circle cx="15" cy="7" r="1.25"></circle>
152+
<circle cx="9" cy="12" r="1.25"></circle><circle cx="15" cy="12" r="1.25"></circle>
153+
<circle cx="9" cy="17" r="1.25"></circle><circle cx="15" cy="17" r="1.25"></circle>
154+
</svg>
155+
</button>
156+
</header>
157+
<ol class="agenda-list">
158+
<li><time datetime="09:30">09:30</time><span><strong>Creative sprint</strong><small>Brand system</small></span></li>
159+
<li><time datetime="11:00">11:00</time><span><strong>Client review</strong><small>30 min · Video</small></span></li>
160+
<li><time datetime="15:00">15:00</time><span><strong>3D asset pass</strong><small>Production</small></span></li>
161+
</ol>
162+
</article>
163+
164+
<article class="dashboard-card card--rhythm" data-card-id="weekly-rhythm" data-card-title="Weekly rhythm">
165+
<header class="card-header">
166+
<div>
167+
<p class="card-kicker">Activity</p>
168+
<h2>Weekly rhythm</h2>
169+
</div>
170+
<button class="drag-handle" type="button" aria-label="Reorder Weekly rhythm" aria-describedby="drag-instructions" aria-pressed="false">
171+
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
172+
<circle cx="9" cy="7" r="1.25"></circle><circle cx="15" cy="7" r="1.25"></circle>
173+
<circle cx="9" cy="12" r="1.25"></circle><circle cx="15" cy="12" r="1.25"></circle>
174+
<circle cx="9" cy="17" r="1.25"></circle><circle cx="15" cy="17" r="1.25"></circle>
175+
</svg>
176+
</button>
177+
</header>
178+
<div class="chart-summary">
179+
<p class="metric">32.5<span>h</span></p>
180+
<span class="trend trend--up">+8.4%</span>
181+
</div>
182+
<div class="line-chart" role="img" aria-label="Weekly activity rose from Monday to Sunday with a peak on Saturday">
183+
<svg viewBox="0 0 320 118" preserveAspectRatio="none" aria-hidden="true" focusable="false">
184+
<path class="line-chart__grid" d="M0 22.5h320M0 58.5h320M0 94.5h320"></path>
185+
<path class="line-chart__area" d="M0 92 C35 88 47 64 82 70 S130 91 165 58 S209 49 238 34 S279 15 320 25 V118 H0 Z"></path>
186+
<path class="line-chart__line" d="M0 92 C35 88 47 64 82 70 S130 91 165 58 S209 49 238 34 S279 15 320 25"></path>
187+
</svg>
188+
<div class="chart-days" aria-hidden="true"><span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span><span>S</span></div>
189+
</div>
190+
</article>
191+
192+
<article class="dashboard-card card--tasks" data-card-id="priority-queue" data-card-title="Priority queue">
193+
<header class="card-header">
194+
<div>
195+
<p class="card-kicker">Three of five</p>
196+
<h2>Priority queue</h2>
197+
</div>
198+
<button class="drag-handle" type="button" aria-label="Reorder Priority queue" aria-describedby="drag-instructions" aria-pressed="false">
199+
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
200+
<circle cx="9" cy="7" r="1.25"></circle><circle cx="15" cy="7" r="1.25"></circle>
201+
<circle cx="9" cy="12" r="1.25"></circle><circle cx="15" cy="12" r="1.25"></circle>
202+
<circle cx="9" cy="17" r="1.25"></circle><circle cx="15" cy="17" r="1.25"></circle>
203+
</svg>
204+
</button>
205+
</header>
206+
<ul class="task-list">
207+
<li><label><input type="checkbox" checked><span>Finalize visual directions</span></label><small>09:00</small></li>
208+
<li><label><input type="checkbox" checked><span>Package responsive assets</span></label><small>10:30</small></li>
209+
<li><label><input type="checkbox" checked><span>Publish project notes</span></label><small>12:00</small></li>
210+
<li><label><input type="checkbox"><span>Record process walkthrough</span></label><small>Tomorrow</small></li>
211+
</ul>
212+
</article>
213+
214+
<article class="dashboard-card card--ideas" data-card-id="ideas" data-card-title="Ideas captured">
215+
<header class="card-header">
216+
<div>
217+
<p class="card-kicker">Library</p>
218+
<h2>Ideas captured</h2>
219+
</div>
220+
<button class="drag-handle" type="button" aria-label="Reorder Ideas captured" aria-describedby="drag-instructions" aria-pressed="false">
221+
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
222+
<circle cx="9" cy="7" r="1.25"></circle><circle cx="15" cy="7" r="1.25"></circle>
223+
<circle cx="9" cy="12" r="1.25"></circle><circle cx="15" cy="12" r="1.25"></circle>
224+
<circle cx="9" cy="17" r="1.25"></circle><circle cx="15" cy="17" r="1.25"></circle>
225+
</svg>
226+
</button>
227+
</header>
228+
<p class="metric metric--large">47</p>
229+
<p class="metric-note">Seven new notes this week</p>
230+
<div class="tag-cloud" aria-label="Popular idea categories">
231+
<span>Interaction</span><span>3D</span><span>Editorial</span><span>Motion</span>
232+
</div>
233+
</article>
234+
235+
<article class="dashboard-card card--pulse" data-card-id="creative-pulse" data-card-title="Creative pulse">
236+
<header class="card-header">
237+
<div>
238+
<p class="card-kicker">Last 28 days</p>
239+
<h2>Creative pulse</h2>
240+
</div>
241+
<button class="drag-handle" type="button" aria-label="Reorder Creative pulse" aria-describedby="drag-instructions" aria-pressed="false">
242+
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
243+
<circle cx="9" cy="7" r="1.25"></circle><circle cx="15" cy="7" r="1.25"></circle>
244+
<circle cx="9" cy="12" r="1.25"></circle><circle cx="15" cy="12" r="1.25"></circle>
245+
<circle cx="9" cy="17" r="1.25"></circle><circle cx="15" cy="17" r="1.25"></circle>
246+
</svg>
247+
</button>
248+
</header>
249+
<div class="heatmap" role="img" aria-label="Creative activity heatmap showing consistent activity over the last four weeks">
250+
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
251+
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
252+
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
253+
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
254+
</div>
255+
<div class="pulse-caption"><span><i></i> Less</span><span><i></i><i></i><i></i> More</span></div>
256+
<p class="insight"><span aria-hidden="true">●</span> 11-day creation streak</p>
257+
</article>
258+
259+
<article class="dashboard-card card--milestone" data-card-id="milestone" data-card-title="Next milestone">
260+
<header class="card-header">
261+
<div>
262+
<p class="card-kicker">Launch plan</p>
263+
<h2>Next milestone</h2>
264+
</div>
265+
<button class="drag-handle" type="button" aria-label="Reorder Next milestone" aria-describedby="drag-instructions" aria-pressed="false">
266+
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
267+
<circle cx="9" cy="7" r="1.25"></circle><circle cx="15" cy="7" r="1.25"></circle>
268+
<circle cx="9" cy="12" r="1.25"></circle><circle cx="15" cy="12" r="1.25"></circle>
269+
<circle cx="9" cy="17" r="1.25"></circle><circle cx="15" cy="17" r="1.25"></circle>
270+
</svg>
271+
</button>
272+
</header>
273+
<div class="milestone-date"><span>Portfolio refresh</span><time datetime="2026-09-02">02 Sep</time></div>
274+
<div class="progress-track" role="progressbar" aria-label="Portfolio refresh progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="68"><span></span></div>
275+
<div class="milestone-meta"><strong>68% complete</strong><span>4 tasks left</span></div>
276+
<div class="collaborators" aria-label="Three collaborators">
277+
<span>JD</span><span>AM</span><span>LC</span><i>+2</i>
278+
</div>
279+
</article>
280+
281+
<article class="dashboard-card card--resources" data-card-id="resource-mix" data-card-title="Resource mix">
282+
<header class="card-header">
283+
<div>
284+
<p class="card-kicker">This week</p>
285+
<h2>Resource mix</h2>
286+
</div>
287+
<button class="drag-handle" type="button" aria-label="Reorder Resource mix" aria-describedby="drag-instructions" aria-pressed="false">
288+
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
289+
<circle cx="9" cy="7" r="1.25"></circle><circle cx="15" cy="7" r="1.25"></circle>
290+
<circle cx="9" cy="12" r="1.25"></circle><circle cx="15" cy="12" r="1.25"></circle>
291+
<circle cx="9" cy="17" r="1.25"></circle><circle cx="15" cy="17" r="1.25"></circle>
292+
</svg>
293+
</button>
294+
</header>
295+
<div class="resource-donut" role="img" aria-label="Resource mix: 46 percent design, 31 percent production, and 23 percent admin">
296+
<div class="resource-donut__shape"><span>32.5<small>h</small></span></div>
297+
<ul>
298+
<li><i class="legend-dot legend-dot--lime"></i><span>Design</span><strong>46%</strong></li>
299+
<li><i class="legend-dot legend-dot--violet"></i><span>Production</span><strong>31%</strong></li>
300+
<li><i class="legend-dot legend-dot--blue"></i><span>Admin</span><strong>23%</strong></li>
301+
</ul>
302+
</div>
303+
</article>
304+
</section>
305+
</main>
306+
307+
<footer class="app-footer">
308+
<p><span class="save-dot" aria-hidden="true"></span> Layout saved on this device</p>
309+
<p>AERIS / 2026</p>
310+
</footer>
311+
</div>
312+
313+
<div class="toast" id="toast" role="status" aria-live="polite" aria-atomic="true"></div>
314+
<div class="sr-only" id="drag-status" role="status" aria-live="assertive" aria-atomic="true"></div>
315+
</body>
316+
</html>

0 commit comments

Comments
 (0)