lean-spec 0.2.5-dev.20251124064307 → 0.2.5-dev.20251124070920

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,35 +3,222 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Task Manager</title>
6
+ <title>Admin Dashboard</title>
7
7
  <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0"></script>
8
9
  </head>
9
10
  <body>
10
- <div class="container">
11
- <header>
12
- <h1>My Tasks</h1>
13
- <p class="subtitle">Stay organized, stay productive</p>
11
+ <!-- Sidebar Navigation -->
12
+ <aside class="sidebar">
13
+ <div class="sidebar-header">
14
+ <div class="logo">
15
+ <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
16
+ <rect width="32" height="32" rx="8" fill="currentColor" opacity="0.2"/>
17
+ <path d="M16 8L24 12V20L16 24L8 20V12L16 8Z" fill="currentColor"/>
18
+ </svg>
19
+ <span class="logo-text">AdminPro</span>
20
+ </div>
21
+ </div>
22
+
23
+ <nav class="sidebar-nav">
24
+ <a href="#" class="nav-item active">
25
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
26
+ <rect x="3" y="3" width="6" height="6" rx="1" stroke="currentColor" stroke-width="2"/>
27
+ <rect x="11" y="3" width="6" height="6" rx="1" stroke="currentColor" stroke-width="2"/>
28
+ <rect x="3" y="11" width="6" height="6" rx="1" stroke="currentColor" stroke-width="2"/>
29
+ <rect x="11" y="11" width="6" height="6" rx="1" stroke="currentColor" stroke-width="2"/>
30
+ </svg>
31
+ <span>Dashboard</span>
32
+ </a>
33
+ <a href="#" class="nav-item">
34
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
35
+ <path d="M10 11C12.2091 11 14 9.20914 14 7C14 4.79086 12.2091 3 10 3C7.79086 3 6 4.79086 6 7C6 9.20914 7.79086 11 10 11Z" stroke="currentColor" stroke-width="2"/>
36
+ <path d="M3 17C3 14.2386 5.23858 12 8 12H12C14.7614 12 17 14.2386 17 17" stroke="currentColor" stroke-width="2"/>
37
+ </svg>
38
+ <span>Users</span>
39
+ </a>
40
+ <a href="#" class="nav-item">
41
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
42
+ <path d="M3 6H17M3 10H17M3 14H17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
43
+ </svg>
44
+ <span>Analytics</span>
45
+ </a>
46
+ <a href="#" class="nav-item">
47
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
48
+ <rect x="3" y="3" width="14" height="14" rx="2" stroke="currentColor" stroke-width="2"/>
49
+ <path d="M7 8H13M7 12H10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
50
+ </svg>
51
+ <span>Reports</span>
52
+ </a>
53
+ <a href="#" class="nav-item">
54
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
55
+ <circle cx="10" cy="10" r="3" stroke="currentColor" stroke-width="2"/>
56
+ <path d="M10 3V5M10 15V17M17 10H15M5 10H3M15.364 4.636L13.95 6.05M6.05 13.95L4.636 15.364M15.364 15.364L13.95 13.95M6.05 6.05L4.636 4.636" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
57
+ </svg>
58
+ <span>Settings</span>
59
+ </a>
60
+ </nav>
61
+
62
+ <div class="sidebar-footer">
63
+ <div class="user-profile">
64
+ <div class="avatar">JD</div>
65
+ <div class="user-info">
66
+ <div class="user-name">John Doe</div>
67
+ <div class="user-role">Administrator</div>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </aside>
72
+
73
+ <!-- Main Content -->
74
+ <main class="main-content">
75
+ <!-- Top Bar -->
76
+ <header class="top-bar">
77
+ <div class="search-bar">
78
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
79
+ <circle cx="9" cy="9" r="6" stroke="currentColor" stroke-width="2"/>
80
+ <path d="M13.5 13.5L17 17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
81
+ </svg>
82
+ <input type="text" placeholder="Search..." />
83
+ </div>
84
+
85
+ <div class="top-bar-actions">
86
+ <button class="icon-button" title="Notifications">
87
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
88
+ <path d="M10 3C7.79086 3 6 4.79086 6 7V10L4 12V14H16V12L14 10V7C14 4.79086 12.2091 3 10 3Z" stroke="currentColor" stroke-width="2"/>
89
+ <path d="M8 14V15C8 16.1046 8.89543 17 10 17C11.1046 17 12 16.1046 12 15V14" stroke="currentColor" stroke-width="2"/>
90
+ </svg>
91
+ <span class="badge">3</span>
92
+ </button>
93
+ <button class="icon-button" title="Messages">
94
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
95
+ <path d="M17 10C17 13.866 13.866 17 10 17C8.87809 17 7.82343 16.7223 6.89743 16.2334L3 17L3.76661 13.1026C3.27766 12.1766 3 11.1219 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2"/>
96
+ </svg>
97
+ </button>
98
+ </div>
14
99
  </header>
15
100
 
16
- <main>
17
- <div class="task-input">
18
- <input type="text" id="taskInput" placeholder="What needs to be done?" />
19
- <button id="addButton">Add Task</button>
101
+ <!-- Dashboard Content -->
102
+ <div class="dashboard-content">
103
+ <!-- Page Header -->
104
+ <div class="page-header">
105
+ <div>
106
+ <h1>Dashboard Overview</h1>
107
+ <p class="page-subtitle">Welcome back! Here's what's happening today.</p>
108
+ </div>
109
+ <button class="btn-primary">
110
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
111
+ <path d="M8 3V13M3 8H13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
112
+ </svg>
113
+ New Report
114
+ </button>
20
115
  </div>
21
116
 
22
- <div class="task-list">
23
- <ul id="taskList"></ul>
117
+ <!-- Stats Grid -->
118
+ <div class="stats-grid">
119
+ <div class="stat-card">
120
+ <div class="stat-header">
121
+ <div class="stat-icon blue">
122
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
123
+ <path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke="currentColor" stroke-width="2"/>
124
+ <circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
125
+ <path d="M23 21V19C22.9993 18.1137 22.7044 17.2528 22.1614 16.5523C21.6184 15.8519 20.8581 15.3516 20 15.13" stroke="currentColor" stroke-width="2"/>
126
+ <path d="M16 3.13C16.8604 3.35031 17.623 3.85071 18.1676 4.55232C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89318 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88" stroke="currentColor" stroke-width="2"/>
127
+ </svg>
128
+ </div>
129
+ <span class="stat-change positive">↑ 12%</span>
130
+ </div>
131
+ <div class="stat-content">
132
+ <h3 class="stat-value" id="totalUsers">2,847</h3>
133
+ <p class="stat-label">Total Users</p>
134
+ </div>
135
+ </div>
136
+
137
+ <div class="stat-card">
138
+ <div class="stat-header">
139
+ <div class="stat-icon green">
140
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
141
+ <path d="M12 2V6M12 18V22M4.93 4.93L7.76 7.76M16.24 16.24L19.07 19.07M2 12H6M18 12H22M4.93 19.07L7.76 16.24M16.24 7.76L19.07 4.93" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
142
+ <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
143
+ </svg>
144
+ </div>
145
+ <span class="stat-change positive">↑ 8%</span>
146
+ </div>
147
+ <div class="stat-content">
148
+ <h3 class="stat-value" id="revenue">$45,231</h3>
149
+ <p class="stat-label">Revenue</p>
150
+ </div>
151
+ </div>
152
+
153
+ <div class="stat-card">
154
+ <div class="stat-header">
155
+ <div class="stat-icon purple">
156
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
157
+ <path d="M3 12L9 18L21 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
158
+ </svg>
159
+ </div>
160
+ <span class="stat-change positive">↑ 23%</span>
161
+ </div>
162
+ <div class="stat-content">
163
+ <h3 class="stat-value" id="completedTasks">892</h3>
164
+ <p class="stat-label">Completed Tasks</p>
165
+ </div>
166
+ </div>
167
+
168
+ <div class="stat-card">
169
+ <div class="stat-header">
170
+ <div class="stat-icon orange">
171
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
172
+ <path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
173
+ </svg>
174
+ </div>
175
+ <span class="stat-change negative">↓ 4%</span>
176
+ </div>
177
+ <div class="stat-content">
178
+ <h3 class="stat-value" id="activeProjects">24</h3>
179
+ <p class="stat-label">Active Projects</p>
180
+ </div>
181
+ </div>
24
182
  </div>
25
183
 
26
- <div class="stats">
27
- <span id="taskCount">0 tasks</span>
184
+ <!-- Charts Row -->
185
+ <div class="charts-row">
186
+ <div class="chart-card">
187
+ <div class="chart-header">
188
+ <h3>Revenue Overview</h3>
189
+ <select class="chart-period">
190
+ <option>Last 7 days</option>
191
+ <option>Last 30 days</option>
192
+ <option>Last 90 days</option>
193
+ </select>
194
+ </div>
195
+ <canvas id="revenueChart"></canvas>
196
+ </div>
197
+
198
+ <div class="chart-card">
199
+ <div class="chart-header">
200
+ <h3>Traffic Sources</h3>
201
+ <select class="chart-period">
202
+ <option>This month</option>
203
+ <option>Last month</option>
204
+ </select>
205
+ </div>
206
+ <canvas id="trafficChart"></canvas>
207
+ </div>
28
208
  </div>
29
- </main>
30
209
 
31
- <footer>
32
- <p>Built with ❤️ • Try adding dark theme support!</p>
33
- </footer>
34
- </div>
210
+ <!-- Recent Activity -->
211
+ <div class="activity-section">
212
+ <div class="section-header">
213
+ <h3>Recent Activity</h3>
214
+ <a href="#" class="view-all">View All →</a>
215
+ </div>
216
+ <div class="activity-list" id="activityList">
217
+ <!-- Activity items will be populated by JavaScript -->
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </main>
35
222
 
36
223
  <script src="app.js"></script>
37
224
  </body>