1pub fn dashboard_html() -> &'static str {
2 r##"<!DOCTYPE html>
3<html lang="en">
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Rullst ORM - Admin Panel</title>
8 <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">
9 <style>
10 :root {
11 --bg-color: #0d1117;
12 --surface-color: rgba(30, 35, 45, 0.6);
13 --border-color: rgba(255, 255, 255, 0.1);
14 --primary: #f9322c;
15 --primary-hover: #ff4c46;
16 --text-main: #ffffff;
17 --text-muted: #8b949e;
18 }
19
20 * {
21 box-sizing: border-box;
22 margin: 0;
23 padding: 0;
24 font-family: 'Outfit', sans-serif;
25 }
26
27 body {
28 background-color: var(--bg-color);
29 color: var(--text-main);
30 min-height: 100vh;
31 display: flex;
32 background-image:
33 radial-gradient(circle at 15% 50%, rgba(249, 50, 44, 0.08), transparent 25%),
34 radial-gradient(circle at 85% 30%, rgba(50, 100, 255, 0.05), transparent 25%);
35 }
36
37 .sidebar {
38 width: 260px;
39 background: var(--surface-color);
40 backdrop-filter: blur(12px);
41 border-right: 1px solid var(--border-color);
42 padding: 2rem 1rem;
43 display: flex;
44 flex-direction: column;
45 gap: 2rem;
46 }
47
48 .brand {
49 display: flex;
50 align-items: center;
51 gap: 12px;
52 padding: 0 1rem;
53 }
54
55 .brand-icon {
56 width: 32px;
57 height: 32px;
58 background: linear-gradient(135deg, var(--primary), #ff7e5f);
59 border-radius: 8px;
60 display: grid;
61 place-items: center;
62 font-weight: 800;
63 font-size: 1.2rem;
64 box-shadow: 0 4px 15px rgba(249, 50, 44, 0.3);
65 }
66
67 .brand-text {
68 font-size: 1.4rem;
69 font-weight: 800;
70 letter-spacing: -0.5px;
71 background: linear-gradient(90deg, #fff, #bbb);
72 -webkit-background-clip: text;
73 -webkit-text-fill-color: transparent;
74 }
75
76 .nav-link {
77 display: flex;
78 align-items: center;
79 gap: 12px;
80 padding: 0.8rem 1rem;
81 color: var(--text-muted);
82 text-decoration: none;
83 border-radius: 8px;
84 transition: all 0.3s ease;
85 font-weight: 600;
86 }
87
88 .nav-link:hover, .nav-link.active {
89 background: rgba(255, 255, 255, 0.05);
90 color: var(--text-main);
91 transform: translateX(4px);
92 }
93
94 .main-content {
95 flex: 1;
96 padding: 3rem;
97 overflow-y: auto;
98 }
99
100 .header {
101 display: flex;
102 justify-content: space-between;
103 align-items: center;
104 margin-bottom: 3rem;
105 }
106
107 .header h1 {
108 font-size: 2.5rem;
109 font-weight: 800;
110 letter-spacing: -1px;
111 }
112
113 .stats-grid {
114 display: grid;
115 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
116 gap: 1.5rem;
117 margin-bottom: 3rem;
118 }
119
120 .stat-card {
121 background: var(--surface-color);
122 backdrop-filter: blur(12px);
123 border: 1px solid var(--border-color);
124 padding: 1.5rem;
125 border-radius: 16px;
126 transition: transform 0.3s ease, box-shadow 0.3s ease;
127 position: relative;
128 overflow: hidden;
129 }
130
131 .stat-card:hover {
132 transform: translateY(-5px);
133 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
134 border-color: rgba(249, 50, 44, 0.3);
135 }
136
137 .stat-card::before {
138 content: '';
139 position: absolute;
140 top: 0; left: 0; width: 100%; height: 4px;
141 background: linear-gradient(90deg, var(--primary), #ff7e5f);
142 opacity: 0;
143 transition: opacity 0.3s ease;
144 }
145
146 .stat-card:hover::before { opacity: 1; }
147
148 .stat-title {
149 color: var(--text-muted);
150 font-size: 0.9rem;
151 text-transform: uppercase;
152 letter-spacing: 1px;
153 font-weight: 600;
154 margin-bottom: 0.5rem;
155 }
156
157 .stat-value {
158 font-size: 2.5rem;
159 font-weight: 800;
160 }
161
162 .table-container {
163 background: var(--surface-color);
164 backdrop-filter: blur(12px);
165 border: 1px solid var(--border-color);
166 border-radius: 16px;
167 overflow: hidden;
168 animation: fadeIn 0.8s ease-out;
169 }
170
171 table {
172 width: 100%;
173 border-collapse: collapse;
174 }
175
176 th, td {
177 padding: 1.2rem;
178 text-align: left;
179 border-bottom: 1px solid var(--border-color);
180 }
181
182 th {
183 background: rgba(0,0,0,0.2);
184 color: var(--text-muted);
185 font-weight: 600;
186 font-size: 0.85rem;
187 text-transform: uppercase;
188 letter-spacing: 1px;
189 }
190
191 tr { transition: background 0.2s ease; }
192 tr:hover { background: rgba(255,255,255,0.02); }
193
194 .badge {
195 padding: 4px 12px;
196 border-radius: 20px;
197 font-size: 0.8rem;
198 font-weight: 600;
199 background: rgba(46, 160, 67, 0.15);
200 color: #3fb950;
201 border: 1px solid rgba(46, 160, 67, 0.3);
202 }
203
204 @keyframes fadeIn {
205 from { opacity: 0; transform: translateY(20px); }
206 to { opacity: 1; transform: translateY(0); }
207 }
208 </style>
209</head>
210<body>
211
212 <div class="sidebar">
213 <div class="brand">
214 <div class="brand-icon">R</div>
215 <div class="brand-text">Rullst Admin</div>
216 </div>
217 <nav>
218 <a href="#" class="nav-link active">Dashboard</a>
219 <a href="#" class="nav-link">Models / Tables</a>
220 <a href="#" class="nav-link">Audit Logs</a>
221 <a href="#" class="nav-link">Settings</a>
222 </nav>
223 </div>
224
225 <div class="main-content">
226 <div class="header">
227 <h1>Database Overview</h1>
228 <p style="color: var(--text-muted)">Welcome back, Admin.</p>
229 </div>
230
231 <div class="stats-grid">
232 <div class="stat-card">
233 <div class="stat-title">Total Records</div>
234 <div class="stat-value">14,293</div>
235 </div>
236 <div class="stat-card">
237 <div class="stat-title">Active Models</div>
238 <div class="stat-value">12</div>
239 </div>
240 <div class="stat-card">
241 <div class="stat-title">Recent Audits</div>
242 <div class="stat-value">342</div>
243 </div>
244 </div>
245
246 <div class="table-container">
247 <table>
248 <thead>
249 <tr>
250 <th>Model Name</th>
251 <th>Table</th>
252 <th>Status</th>
253 <th>Actions</th>
254 </tr>
255 </thead>
256 <tbody>
257 <tr>
258 <td><strong>User</strong></td>
259 <td style="color: var(--text-muted)">users</td>
260 <td><span class="badge">Healthy</span></td>
261 <td><a href="#" style="color: var(--primary); text-decoration: none; font-weight: 600;">View Data</a></td>
262 </tr>
263 <tr>
264 <td><strong>Document</strong></td>
265 <td style="color: var(--text-muted)">documents</td>
266 <td><span class="badge">Healthy</span></td>
267 <td><a href="#" style="color: var(--primary); text-decoration: none; font-weight: 600;">View Data</a></td>
268 </tr>
269 <tr>
270 <td><strong>Tenant</strong></td>
271 <td style="color: var(--text-muted)">tenants</td>
272 <td><span class="badge">Healthy</span></td>
273 <td><a href="#" style="color: var(--primary); text-decoration: none; font-weight: 600;">View Data</a></td>
274 </tr>
275 </tbody>
276 </table>
277 </div>
278 </div>
279
280</body>
281</html>"##
282}