Skip to content

Commit d6dc1cc

Browse files
ithiria894claude
ithiria894
and
claude
committed
Add demo GIF and demo page for README
Demo shows hover annotations on a TaskFlow demo app with light header to contrast against the dark UI Annotator toolbar. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 2442190 commit d6dc1cc

2 files changed

Lines changed: 245 additions & 0 deletions

File tree

‎docs/demo-page.html‎

Lines changed: 245 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,245 @@
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.0">
6+
<title>TaskFlow — Project Dashboard</title>
7+
<style>
8+
* { margin: 0; padding: 0; box-sizing: border-box; }
9+
body { font-family: system-ui, -apple-system, sans-serif; background: #f8fafc; color: #1e293b; }
10+
11+
/* Header */
12+
header { background: white; color: #1e293b; padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e2e8f0; }
13+
header h1 { font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
14+
header h1 span { color: #6366f1; }
15+
nav { display: flex; gap: 4px; }
16+
nav a { color: #64748b; text-decoration: none; font-size: 13px; padding: 6px 14px; border-radius: 6px; cursor: pointer; transition: all .15s; }
17+
nav a:hover { color: #1e293b; background: #f1f5f9; }
18+
nav a.active { color: #6366f1; background: #eef2ff; }
19+
.user-area { display: flex; align-items: center; gap: 12px; }
20+
.notif-btn { background: none; border: none; color: #64748b; cursor: pointer; font-size: 16px; position: relative; }
21+
.notif-dot { position: absolute; top: -2px; right: -2px; width: 7px; height: 7px; background: #f43f5e; border-radius: 50%; }
22+
.avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #4f46e5); display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; font-weight: 600; }
23+
24+
/* Main layout */
25+
.container { max-width: 1100px; margin: 0 auto; padding: 20px 24px; }
26+
27+
/* Top bar */
28+
.top-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
29+
.search-input { flex: 1; padding: 9px 14px 9px 36px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 13px; background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") 12px center no-repeat; }
30+
.btn { padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; display: flex; align-items: center; gap: 6px; transition: all .15s; }
31+
.btn-primary { background: #6366f1; color: white; }
32+
.btn-primary:hover { background: #4f46e5; }
33+
.btn-outline { background: white; color: #475569; border: 1px solid #e2e8f0; }
34+
.btn-outline:hover { border-color: #6366f1; color: #6366f1; }
35+
36+
/* Stats row */
37+
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
38+
.stat-card { background: white; border-radius: 10px; padding: 16px 18px; border: 1px solid #e2e8f0; }
39+
.stat-label { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: .6px; font-weight: 500; }
40+
.stat-row { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
41+
.stat-value { font-size: 26px; font-weight: 700; }
42+
.stat-change { font-size: 11px; font-weight: 500; }
43+
.stat-change.up { color: #16a34a; }
44+
.stat-change.down { color: #dc2626; }
45+
.stat-bar { height: 4px; border-radius: 2px; background: #f1f5f9; margin-top: 10px; overflow: hidden; }
46+
.stat-bar-fill { height: 100%; border-radius: 2px; }
47+
48+
/* Two-column layout */
49+
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
50+
51+
/* Task list */
52+
.panel { background: white; border-radius: 10px; border: 1px solid #e2e8f0; overflow: hidden; }
53+
.panel-header { padding: 14px 18px; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }
54+
.panel-title { font-size: 14px; font-weight: 600; }
55+
.panel-badge { background: #f1f5f9; color: #64748b; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
56+
.task-item { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid #f8fafc; cursor: pointer; transition: background .1s; }
57+
.task-item:last-child { border-bottom: none; }
58+
.task-item:hover { background: #fafbfc; }
59+
.task-check { width: 16px; height: 16px; border: 2px solid #cbd5e1; border-radius: 4px; flex-shrink: 0; }
60+
.task-check.done { background: #6366f1; border-color: #6366f1; position: relative; }
61+
.task-check.done::after { content: "✓"; color: white; font-size: 10px; position: absolute; top: -1px; left: 2px; }
62+
.task-info { flex: 1; min-width: 0; }
63+
.task-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
64+
.task-name.completed { color: #94a3b8; text-decoration: line-through; }
65+
.task-meta { font-size: 11px; color: #94a3b8; margin-top: 1px; }
66+
.priority { padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; letter-spacing: .3px; }
67+
.priority.high { background: #fef2f2; color: #dc2626; }
68+
.priority.medium { background: #fffbeb; color: #d97706; }
69+
.priority.low { background: #f0fdf4; color: #16a34a; }
70+
71+
/* Activity feed */
72+
.activity-item { padding: 12px 18px; border-bottom: 1px solid #f8fafc; display: flex; gap: 10px; }
73+
.activity-item:last-child { border-bottom: none; }
74+
.activity-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
75+
.activity-dot.blue { background: #6366f1; }
76+
.activity-dot.green { background: #16a34a; }
77+
.activity-dot.amber { background: #d97706; }
78+
.activity-text { font-size: 12px; color: #475569; line-height: 1.5; }
79+
.activity-time { font-size: 11px; color: #94a3b8; }
80+
81+
/* Footer */
82+
footer { text-align: center; padding: 28px; color: #94a3b8; font-size: 11px; }
83+
</style>
84+
</head>
85+
<body>
86+
<header id="main-header">
87+
<h1 id="app-title"><span>◆</span> TaskFlow</h1>
88+
<nav id="main-nav" role="navigation">
89+
<a class="active" id="nav-dashboard">Dashboard</a>
90+
<a id="nav-projects">Projects</a>
91+
<a id="nav-team">Team</a>
92+
<a id="nav-calendar">Calendar</a>
93+
<a id="nav-reports">Reports</a>
94+
</nav>
95+
<div class="user-area" id="user-menu">
96+
<button class="notif-btn" id="notifications" aria-label="Notifications">
97+
🔔<span class="notif-dot"></span>
98+
</button>
99+
<div class="avatar" id="user-avatar">N</div>
100+
</div>
101+
</header>
102+
103+
<div class="container">
104+
<div class="top-bar" id="toolbar">
105+
<input class="search-input" id="search-tasks" type="text" placeholder="Search tasks, projects, people..." />
106+
<button class="btn btn-primary" id="btn-new-task">+ New Task</button>
107+
<button class="btn btn-outline" id="btn-filter">Filter</button>
108+
<button class="btn btn-outline" id="btn-sort">Sort</button>
109+
</div>
110+
111+
<section class="stats" id="stats-section">
112+
<div class="stat-card" id="stat-active">
113+
<div class="stat-label">Active Tasks</div>
114+
<div class="stat-row">
115+
<div class="stat-value">38</div>
116+
<div class="stat-change up">+5 this week</div>
117+
</div>
118+
<div class="stat-bar"><div class="stat-bar-fill" style="width:72%;background:#6366f1"></div></div>
119+
</div>
120+
<div class="stat-card" id="stat-completed">
121+
<div class="stat-label">Completed</div>
122+
<div class="stat-row">
123+
<div class="stat-value">89</div>
124+
<div class="stat-change up">70% rate</div>
125+
</div>
126+
<div class="stat-bar"><div class="stat-bar-fill" style="width:70%;background:#16a34a"></div></div>
127+
</div>
128+
<div class="stat-card" id="stat-overdue">
129+
<div class="stat-label">Overdue</div>
130+
<div class="stat-row">
131+
<div class="stat-value">5</div>
132+
<div class="stat-change down">+2 today</div>
133+
</div>
134+
<div class="stat-bar"><div class="stat-bar-fill" style="width:12%;background:#dc2626"></div></div>
135+
</div>
136+
<div class="stat-card" id="stat-team">
137+
<div class="stat-label">Team Load</div>
138+
<div class="stat-row">
139+
<div class="stat-value">83%</div>
140+
<div class="stat-change up">balanced</div>
141+
</div>
142+
<div class="stat-bar"><div class="stat-bar-fill" style="width:83%;background:#d97706"></div></div>
143+
</div>
144+
</section>
145+
146+
<div class="grid-2">
147+
<div class="panel" id="task-panel">
148+
<div class="panel-header">
149+
<span class="panel-title" id="task-list-title">Recent Tasks</span>
150+
<span class="panel-badge">12 open</span>
151+
</div>
152+
<div id="task-list" role="list">
153+
<div class="task-item" id="task-1" role="listitem">
154+
<div class="task-check"></div>
155+
<div class="task-info">
156+
<div class="task-name">Update API documentation for v3 endpoints</div>
157+
<div class="task-meta">Due Mar 20 · Backend · Alex</div>
158+
</div>
159+
<span class="priority high">HIGH</span>
160+
</div>
161+
<div class="task-item" id="task-2" role="listitem">
162+
<div class="task-check"></div>
163+
<div class="task-info">
164+
<div class="task-name">Fix authentication redirect loop on mobile</div>
165+
<div class="task-meta">Due Mar 21 · Auth · Sam</div>
166+
</div>
167+
<span class="priority high">HIGH</span>
168+
</div>
169+
<div class="task-item" id="task-3" role="listitem">
170+
<div class="task-check done"></div>
171+
<div class="task-info">
172+
<div class="task-name completed">Redesign onboarding flow wireframes</div>
173+
<div class="task-meta">Completed Mar 18 · Design · Kim</div>
174+
</div>
175+
<span class="priority medium">MED</span>
176+
</div>
177+
<div class="task-item" id="task-4" role="listitem">
178+
<div class="task-check"></div>
179+
<div class="task-info">
180+
<div class="task-name">Implement dark mode toggle component</div>
181+
<div class="task-meta">Due Mar 25 · Frontend · Nicole</div>
182+
</div>
183+
<span class="priority medium">MED</span>
184+
</div>
185+
<div class="task-item" id="task-5" role="listitem">
186+
<div class="task-check done"></div>
187+
<div class="task-info">
188+
<div class="task-name completed">Write E2E tests for checkout flow</div>
189+
<div class="task-meta">Completed Mar 17 · QA · Jordan</div>
190+
</div>
191+
<span class="priority low">LOW</span>
192+
</div>
193+
<div class="task-item" id="task-6" role="listitem">
194+
<div class="task-check"></div>
195+
<div class="task-info">
196+
<div class="task-name">Set up monitoring alerts for production</div>
197+
<div class="task-meta">Due Mar 28 · DevOps · Alex</div>
198+
</div>
199+
<span class="priority low">LOW</span>
200+
</div>
201+
</div>
202+
</div>
203+
204+
<div class="panel" id="activity-panel">
205+
<div class="panel-header">
206+
<span class="panel-title" id="activity-title">Activity</span>
207+
<span class="panel-badge">Today</span>
208+
</div>
209+
<div id="activity-feed" role="feed">
210+
<div class="activity-item" id="activity-1">
211+
<div class="activity-dot green"></div>
212+
<div>
213+
<div class="activity-text"><strong>Kim</strong> completed "Onboarding wireframes"</div>
214+
<div class="activity-time">2 hours ago</div>
215+
</div>
216+
</div>
217+
<div class="activity-item" id="activity-2">
218+
<div class="activity-dot blue"></div>
219+
<div>
220+
<div class="activity-text"><strong>Alex</strong> commented on "API docs"</div>
221+
<div class="activity-time">3 hours ago</div>
222+
</div>
223+
</div>
224+
<div class="activity-item" id="activity-3">
225+
<div class="activity-dot amber"></div>
226+
<div>
227+
<div class="activity-text"><strong>Sam</strong> flagged auth bug as blocking</div>
228+
<div class="activity-time">5 hours ago</div>
229+
</div>
230+
</div>
231+
<div class="activity-item" id="activity-4">
232+
<div class="activity-dot blue"></div>
233+
<div>
234+
<div class="activity-text"><strong>Nicole</strong> created "Dark mode toggle"</div>
235+
<div class="activity-time">Yesterday</div>
236+
</div>
237+
</div>
238+
</div>
239+
</div>
240+
</div>
241+
</div>
242+
243+
<footer id="app-footer">TaskFlow v2.1 · 6 team members · Last sync 2 min ago</footer>
244+
</body>
245+
</html>

‎docs/demo.gif‎

20.3 KB
Loading

0 commit comments

Comments
 (0)