Explorer
project
index.html
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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RloopUI — Admin Dashboard</title>
</head>
<body>
<!-- Login overlay -->
<div class="login-overlay" id="loginOverlay">
<div class="login-card glass">
<div class="login-brand">
<div class="brand-mark">R</div>
<div>
<div class="brand-name">RloopUI</div>
<div class="brand-sub">Admin Console</div>
</div>
</div>
<h2>Welcome back</h2>
<p class="muted">Sign in to access your dashboard</p>
<div id="loginForm">
<label>Email
<input type="email" id="email" value="admin@rloop.dev" required />
</label>
<label>Password
<input type="password" id="password" value="demo1234" required />
</label>
<div class="row between">
<label class="check"><input type="checkbox" checked /> Remember me</label>
<a href="#" class="link">Forgot password?</a>
</div>
<button type="button" id="loginBtn" class="btn btn-primary block">Sign in</button>
<div class="login-foot muted">Demo mode — any credentials work</div>
</div>
</div>
</div>
<!-- App shell -->
<div class="app" id="app" hidden>
<aside class="sidebar" id="sidebar">
<div class="side-brand">
<div class="brand-mark">R</div>
<span class="brand-text">Rloop<span class="accent">UI</span></span>
</div>
<nav class="side-nav">
<a class="nav-item active" data-page="overview"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg><span>Overview</span></a>
<a class="nav-item" data-page="orders"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg><span>Orders</span><span class="badge">12</span></a>
<a class="nav-item" data-page="customers"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg><span>Customers</span></a>
<a class="nav-item" data-page="products"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg><span>Products</span></a>
<a class="nav-item" data-page="analytics"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg><span>Analytics</span></a>
<div class="nav-section">Workspace</div>
<a class="nav-item" data-page="team"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg><span>Team</span></a>
<a class="nav-item" data-page="settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h0a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h0a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg><span>Settings</span></a>
</nav>
<div class="side-foot">
<div class="user-mini">
<div class="avatar">SA</div>
<div>
<div class="u-name">Saleh A.</div>
<div class="u-role muted">Administrator</div>
</div>
</div>
</div>
</aside>
<div class="main">
<header class="topbar">
<button class="icon-btn only-mobile" id="menuBtn" aria-label="Menu">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
</button>
<div class="search">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input placeholder="Search anything…" />
<kbd>⌘K</kbd>
</div>
<div class="top-actions">
<button class="icon-btn" id="themeBtn" aria-label="Theme">
<svg class="i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
<svg class="i-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
</button>
<button class="icon-btn relative" aria-label="Notifications">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
<span class="dot"></span>
</button>
<button class="avatar avatar-btn" id="logoutBtn" title="Logout">SA</button>
</div>
</header>
<main class="content">
<div class="page-head">
<div>
<h1>Good morning, Saleh</h1>
<p class="muted">Here's what's happening today.</p>
</div>
<div class="head-actions">
<button class="btn btn-ghost">Export</button>
<button class="btn btn-primary">+ New Product</button>
</div>
</div>
<section class="stats">
<div class="card glass stat">
<div class="stat-head"><span class="muted">Revenue</span><span class="pill up">+12.4%</span></div>
<div class="stat-val">$48,219</div>
<svg class="spark" viewBox="0 0 100 30" preserveAspectRatio="none"><polyline fill="none" stroke="url(#g1)" stroke-width="2" points="0,22 10,18 20,20 30,12 40,15 50,8 60,11 70,5 80,9 90,4 100,7"/><defs><linearGradient id="g1" x1="0" x2="1"><stop offset="0" stop-color="#7c5cff"/><stop offset="1" stop-color="#22d3ee"/></linearGradient></defs></svg>
</div>
<div class="card glass stat">
<div class="stat-head"><span class="muted">Orders</span><span class="pill up">+5.2%</span></div>
<div class="stat-val">1,284</div>
<svg class="spark" viewBox="0 0 100 30" preserveAspectRatio="none"><polyline fill="none" stroke="#22d3ee" stroke-width="2" points="0,15 10,18 20,12 30,16 40,10 50,14 60,8 70,12 80,6 90,10 100,5"/></svg>
</div>
<div class="card glass stat">
<div class="stat-head"><span class="muted">Customers</span><span class="pill down">-1.1%</span></div>
<div class="stat-val">9,432</div>
<svg class="spark" viewBox="0 0 100 30" preserveAspectRatio="none"><polyline fill="none" stroke="#f472b6" stroke-width="2" points="0,8 10,12 20,10 30,14 40,11 50,16 60,13 70,18 80,15 90,20 100,17"/></svg>
</div>
<div class="card glass stat">
<div class="stat-head"><span class="muted">Conversion</span><span class="pill up">+0.8%</span></div>
<div class="stat-val">3.42%</div>
<svg class="spark" viewBox="0 0 100 30" preserveAspectRatio="none"><polyline fill="none" stroke="#34d399" stroke-width="2" points="0,20 10,16 20,18 30,14 40,15 50,10 60,12 70,8 80,11 90,6 100,9"/></svg>
</div>
</section>
<section class="grid-2">
<div class="card glass">
<div class="card-head">
<div>
<h3>Revenue overview</h3>
<p class="muted small">Last 12 months</p>
</div>
<div class="tabs">
<button class="tab active">Month</button>
<button class="tab">Quarter</button>
<button class="tab">Year</button>
</div>
</div>
<svg class="chart" viewBox="0 0 600 220" preserveAspectRatio="none">
<defs>
<linearGradient id="area" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#7c5cff" stop-opacity="0.45"/>
<stop offset="100%" stop-color="#7c5cff" stop-opacity="0"/>
</linearGradient>
</defs>
<g stroke="currentColor" stroke-opacity="0.08">
<line x1="0" y1="40" x2="600" y2="40"/>
<line x1="0" y1="90" x2="600" y2="90"/>
<line x1="0" y1="140" x2="600" y2="140"/>
<line x1="0" y1="190" x2="600" y2="190"/>
</g>
<path d="M0,160 L50,140 L100,150 L150,110 L200,120 L250,80 L300,95 L350,60 L400,75 L450,40 L500,55 L550,30 L600,45 L600,220 L0,220 Z" fill="url(#area)"/>
<polyline points="0,160 50,140 100,150 150,110 200,120 250,80 300,95 350,60 400,75 450,40 500,55 550,30 600,45" fill="none" stroke="#7c5cff" stroke-width="2.5"/>
</svg>
</div>
<div class="card glass">
<div class="card-head">
<div>
<h3>Top sources</h3>
<p class="muted small">Traffic breakdown</p>
</div>
</div>
<ul class="src-list">
<li><span>Direct</span><div class="bar"><i style="width:72%"></i></div><span class="num">72%</span></li>
<li><span>Organic</span><div class="bar"><i style="width:54%;background:linear-gradient(90deg,#22d3ee,#34d399)"></i></div><span class="num">54%</span></li>
<li><span>Referral</span><div class="bar"><i style="width:38%;background:linear-gradient(90deg,#f472b6,#fb7185)"></i></div><span class="num">38%</span></li>
<li><span>Social</span><div class="bar"><i style="width:26%;background:linear-gradient(90deg,#fbbf24,#f97316)"></i></div><span class="num">26%</span></li>
<li><span>Email</span><div class="bar"><i style="width:18%;background:linear-gradient(90deg,#34d399,#22d3ee)"></i></div><span class="num">18%</span></li>
</ul>
</div>
</section>
<section class="card glass">
<div class="card-head">
<div>
<h3>Recent orders</h3>
<p class="muted small">Latest activity from your store</p>
</div>
<button class="btn btn-ghost">View all</button>
</div>
<div class="table-wrap">
<table class="table">
<thead>
<tr><th>Order</th><th>Customer</th><th>Product</th><th>Amount</th><th>Status</th><th></th></tr>
</thead>
<tbody>
<tr><td>#A-2841</td><td><span class="cell-user"><span class="avatar sm">EM</span>Emma Watson</span></td><td>Pro License × 2</td><td>$248.00</td><td><span class="tag tag-ok">Paid</span></td><td><button class="icon-btn sm">⋯</button></td></tr>
<tr><td>#A-2840</td><td><span class="cell-user"><span class="avatar sm">JK</span>John Kim</span></td><td>Team Seat</td><td>$59.00</td><td><span class="tag tag-warn">Pending</span></td><td><button class="icon-btn sm">⋯</button></td></tr>
<tr><td>#A-2839</td><td><span class="cell-user"><span class="avatar sm">AS</span>Aisha S.</span></td><td>Pro License</td><td>$124.00</td><td><span class="tag tag-ok">Paid</span></td><td><button class="icon-btn sm">⋯</button></td></tr>
<tr><td>#A-2838</td><td><span class="cell-user"><span class="avatar sm">LV</span>Liam V.</span></td><td>Starter</td><td>$29.00</td><td><span class="tag tag-bad">Refunded</span></td><td><button class="icon-btn sm">⋯</button></td></tr>
<tr><td>#A-2837</td><td><span class="cell-user"><span class="avatar sm">NP</span>Nora P.</span></td><td>Pro License × 5</td><td>$620.00</td><td><span class="tag tag-ok">Paid</span></td><td><button class="icon-btn sm">⋯</button></td></tr>
</tbody>
</table>
</div>
</section>
</main>
</div>
<div class="scrim" id="scrim"></div>
</div>
</body>
</html>
rloop.dev/p/Pr-M08