Skip to content

Commit 1425697

Browse files
bytecode001bytecode001
authored
Add files via upload
1 parent 5db6843 commit 1425697

1 file changed

Lines changed: 132 additions & 0 deletions

File tree

‎049-dependency-checklist/index.html‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,133 @@
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="description" content="A dependency-aware project checklist with nested tasks and real-time progress tracking.">
7+
<meta name="theme-color" content="#111318">
8+
<title>Relay — Dependency Checklist</title>
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap" rel="stylesheet">
12+
<link rel="stylesheet" href="css/style.css">
13+
</head>
14+
<body>
15+
<a class="skip-link" href="#task-list">Skip to checklist</a>
116

17+
<div class="app-shell">
18+
<aside class="sidebar" aria-label="Primary navigation">
19+
<a class="brand" href="#" aria-label="Relay home">
20+
<span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
21+
<span>relay</span>
22+
</a>
23+
24+
<nav class="nav-list" aria-label="Workspace">
25+
<a class="nav-item active" href="#task-list" aria-current="page">
26+
<svg aria-hidden="true" viewBox="0 0 24 24"><path d="M9 5h10M9 12h10M9 19h10M4 5h.01M4 12h.01M4 19h.01"/></svg>
27+
Checklist
28+
</a>
29+
<button class="nav-item" id="open-dependency-map" type="button">
30+
<svg aria-hidden="true" viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="19" cy="6" r="2"/><circle cx="19" cy="18" r="2"/><path d="m7 11 10-4M7 13l10 4"/></svg>
31+
Dependencies
32+
</button>
33+
</nav>
34+
35+
<div class="sidebar-footer">
36+
<div class="mini-progress" aria-label="Overall project progress">
37+
<div class="mini-progress-row"><span>Project progress</span><strong id="sidebar-progress">0%</strong></div>
38+
<div class="progress-track"><span id="sidebar-progress-bar"></span></div>
39+
</div>
40+
<button class="profile" type="button" aria-label="Open profile menu">
41+
<span class="avatar">FS</span>
42+
<span><strong>Francesco</strong><small>Product workspace</small></span>
43+
<svg aria-hidden="true" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>
44+
</button>
45+
</div>
46+
</aside>
47+
48+
<main class="main-content">
49+
<header class="topbar">
50+
<button class="mobile-menu" id="mobile-menu" type="button" aria-label="Open navigation" aria-expanded="false">
51+
<span></span><span></span>
52+
</button>
53+
<div class="breadcrumb"><span>Projects</span><i>/</i><strong>Website launch</strong></div>
54+
<div class="top-actions">
55+
<span class="saved-state" id="saved-state"><i></i> Saved locally</span>
56+
<button class="icon-button" id="theme-toggle" type="button" aria-label="Toggle color theme">
57+
<svg class="sun" aria-hidden="true" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.66 6.34l1.41-1.41"/></svg>
58+
</button>
59+
<button class="avatar avatar-button" type="button" aria-label="Open account">FS</button>
60+
</div>
61+
</header>
62+
63+
<section class="hero" aria-labelledby="page-title">
64+
<div>
65+
<span class="eyebrow"><i></i> Active project</span>
66+
<h1 id="page-title">Website launch</h1>
67+
<p>Complete each step in order. Tasks unlock automatically when every prerequisite is finished.</p>
68+
</div>
69+
<button class="reset-button" id="reset-button" type="button">
70+
<svg aria-hidden="true" viewBox="0 0 24 24"><path d="M3 12a9 9 0 1 0 3-6.7L3 8M3 3v5h5"/></svg>
71+
Reset progress
72+
</button>
73+
</section>
74+
75+
<section class="progress-panel" aria-labelledby="progress-title">
76+
<div class="progress-copy">
77+
<span class="progress-kicker">Overall progress</span>
78+
<div class="progress-heading"><strong id="progress-count">0 of 12 tasks</strong><span id="progress-percent">0%</span></div>
79+
<div class="large-progress-track" role="progressbar" aria-label="Overall completion" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><span id="main-progress-bar"></span></div>
80+
</div>
81+
<div class="next-up" id="next-up">
82+
<span class="next-icon" aria-hidden="true">
83+
<svg viewBox="0 0 24 24"><path d="m8 5 8 7-8 7"/></svg>
84+
</span>
85+
<span><small>Next milestone</small><strong id="next-task">Create project brief</strong></span>
86+
</div>
87+
</section>
88+
89+
<section class="toolbar" aria-label="Checklist controls">
90+
<div class="filters" role="group" aria-label="Filter tasks">
91+
<button class="filter active" type="button" data-filter="all" aria-pressed="true">All <span id="all-count">12</span></button>
92+
<button class="filter" type="button" data-filter="available" aria-pressed="false">Available <span id="available-count">0</span></button>
93+
<button class="filter" type="button" data-filter="locked" aria-pressed="false">Locked <span id="locked-count">0</span></button>
94+
<button class="filter" type="button" data-filter="completed" aria-pressed="false">Completed <span id="completed-count">0</span></button>
95+
</div>
96+
<button class="map-button" id="map-button" type="button">
97+
<svg aria-hidden="true" viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="19" cy="6" r="2"/><circle cx="19" cy="18" r="2"/><path d="m7 11 10-4M7 13l10 4"/></svg>
98+
View dependency map
99+
</button>
100+
</section>
101+
102+
<div class="task-list" id="task-list" aria-live="polite"></div>
103+
</main>
104+
</div>
105+
106+
<dialog class="dependency-dialog" id="dependency-dialog" aria-labelledby="dependency-title">
107+
<div class="dialog-header">
108+
<div><span class="eyebrow"><i></i> Project logic</span><h2 id="dependency-title">Dependency map</h2></div>
109+
<button class="dialog-close" id="dialog-close" type="button" aria-label="Close dependency map">&times;</button>
110+
</div>
111+
<p class="dialog-intro">Follow the paths to understand which completed tasks release the next stage.</p>
112+
<div class="dependency-map" id="dependency-map"></div>
113+
</dialog>
114+
115+
<dialog class="confirm-dialog" id="confirm-dialog" aria-labelledby="confirm-title">
116+
<div class="confirm-icon" aria-hidden="true">
117+
<svg viewBox="0 0 24 24"><path d="M12 9v4M12 17h.01"/><path d="M10.3 3.7 2.8 17a2 2 0 0 0 1.7 3h15a2 2 0 0 0 1.7-3L13.7 3.7a2 2 0 0 0-3.4 0Z"/></svg>
118+
</div>
119+
<h2 id="confirm-title">Reset all progress?</h2>
120+
<p>This will mark every task as incomplete. Your current progress cannot be recovered.</p>
121+
<div class="confirm-actions">
122+
<button id="cancel-reset" type="button">Cancel</button>
123+
<button id="confirm-reset" type="button">Reset progress</button>
124+
</div>
125+
</dialog>
126+
127+
<div class="toast" id="toast" role="status" aria-live="polite">
128+
<span class="toast-check">✓</span><span id="toast-message">Task completed</span>
129+
</div>
130+
131+
<script src="js/app.js" defer></script>
132+
</body>
133+
</html>

0 commit comments

Comments
 (0)