-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdashboard.html
More file actions
162 lines (151 loc) · 6.53 KB
/
dashboard.html
File metadata and controls
162 lines (151 loc) · 6.53 KB
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BoutiqueBloom Dashboard</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="icon" type="image/png" sizes="64x64" href="images/favicon.png?v=2">
<link rel="shortcut icon" type="image/png" href="images/favicon.png?v=2">
</head>
<body class="dashboard-page">
<div id="page-loader">
<div class="loader-spinner"></div>
</div>
<header class="navbar">
<div class="container navbar-inner">
<a href="index.html" class="brand">BoutiqueBloom</a>
<nav aria-label="Top navigation" class="top-nav-actions">
<ul class="top-nav-list">
<li><a href="#" class="top-nav-link">Help Center</a></li>
<li><a href="#" class="top-nav-link">Notifications</a></li>
<li><a href="#" class="top-nav-link">Workspace</a></li>
</ul>
</nav>
<div class="profile-menu" aria-label="User profile controls">
<div class="avatar-placeholder" role="img" aria-label="Mira profile avatar">
S
</div>
<button class="btn" type="button">Profile</button>
<a class="btn btn-accent" href="login.html">Logout</a>
</div>
</div>
</header>
<main class="container dashboard-shell">
<aside class="sidebar" aria-label="Sidebar navigation">
<nav class="sidebar-nav">
<ul>
<li><a href="dashboard.html" class="sidebar-link is-active">Dashboard</a></li>
<li><a href="campaigns.html" class="sidebar-link">Campaigns</a></li>
<li><a href="planner.html" class="sidebar-link">Content Planner</a></li>
<li><a href="catalogue.html" class="sidebar-link">Catalogue</a></li>
<li><a href="coming-soon.html" class="sidebar-link">Analytics</a></li>
<li><a href="coming-soon.html" class="sidebar-link">Brand Assets</a></li>
<li><a href="coming-soon.html" class="sidebar-link">Messages</a></li>
<li><a href="settings.html" class="sidebar-link">Settings</a></li>
</ul>
</nav>
</aside>
<section class="dashboard-main" aria-label="Dashboard overview">
<header class="dashboard-header section">
<h1>Good Evening, Shrish</h1>
<p>Here’s how your brand is performing this week.</p>
</header>
<section class="stats-grid section" aria-label="Key summary statistics">
<article class="card stat-card">
<h2>Active Campaigns</h2>
<p class="stat-value" data-target="6">0</p>
<p class="stat-meta">2 launching this weekend</p>
</article>
<article class="card stat-card">
<h2>Scheduled Posts</h2>
<p class="stat-value" data-target="18">0</p>
<p class="stat-meta">Across Instagram, Facebook, and Pinterest</p>
</article>
<article class="card stat-card">
<h2>Weekly Reach</h2>
<p class="stat-value" data-target="42700">0</p>
<p class="stat-meta">Up 12% from last week</p>
</article>
<article class="card stat-card">
<h2>Brand Consistency</h2>
<p class="stat-value" data-target="94">0</p>
<p class="stat-meta">Tone and visual alignment score</p>
</article>
</section>
<section class="content-grid section" aria-label="Detailed performance and planning">
<div class="content-primary">
<article class="card chart-card">
<header>
<h2>Campaign Performance</h2>
</header>
<div class="chart-placeholder" role="img" aria-label="Campaign performance trend chart">
<p>Performance chart area</p>
</div>
<p>
Your "Autumn Window Refresh" campaign is currently driving the highest
engagement, with saves increasing steadily over the past 5 days.
</p>
</article>
<article class="card calendar-card">
<header>
<h2>Upcoming Content Calendar</h2>
</header>
<ul class="calendar-list">
<li>
<time datetime="2026-03-14T10:00">Mon, 10:00 AM</time>
<p>Instagram Reel: "Behind the Scenes at Morning Setup"</p>
</li>
<li>
<time datetime="2026-03-15T12:30">Tue, 12:30 PM</time>
<p>Facebook Post: Spring Product Feature Carousel</p>
</li>
<li>
<time datetime="2026-03-16T09:00">Wed, 9:00 AM</time>
<p>Blog Draft Review: "5 Styling Ideas for Small Boutiques"</p>
</li>
<li>
<time datetime="2026-03-17T15:00">Thu, 3:00 PM</time>
<p>Pinterest Pins Batch Scheduled: New Arrivals Collection</p>
</li>
</ul>
</article>
</div>
<aside class="content-secondary" aria-label="Supporting insights and actions">
<article class="card">
<header>
<h2>Brand Voice Notes</h2>
</header>
<p>
Keep copy warm, conversational, and aspirational this week. Highlight
craftsmanship and local story-driven messaging.
</p>
</article>
<article class="card">
<header>
<h2>Recent Activity</h2>
</header>
<ul class="activity-list">
<li>Anna approved your Easter campaign visuals.</li>
<li>3 new customer messages flagged for response.</li>
<li>Logo pack v3 uploaded to Brand Assets.</li>
<li>Analytics report generated for March Week 2.</li>
</ul>
</article>
<article class="card quick-actions">
<header>
<h2>Quick Actions</h2>
</header>
<div class="quick-actions-buttons">
<button type="button" class="btn btn-primary">Create Campaign</button>
<button type="button" class="btn">Schedule Post</button>
<button type="button" class="btn btn-accent">Upload Brand Asset</button>
</div>
</article>
</aside>
</section>
</section>
</main>
<script src="js/script.js"></script>
</body>
</html>