|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Dashboard | NeuralGlow Circuitry</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<style> |
|
|
body { |
|
|
background-color: #000000; |
|
|
background-image: radial-gradient(circle at 50% 50%, #010066 0%, #000000 70%); |
|
|
height: 100vh; |
|
|
overflow: hidden; |
|
|
} |
|
|
.dashboard-container { |
|
|
animation: glowPulse 8s ease infinite alternate; |
|
|
} |
|
|
@keyframes glowPulse { |
|
|
0% { box-shadow: 0 0 30px rgba(237, 28, 36, 0.3); } |
|
|
50% { box-shadow: 0 0 60px rgba(1, 0, 102, 0.5); } |
|
|
100% { box-shadow: 0 0 30px rgba(237, 28, 36, 0.3); } |
|
|
} |
|
|
.stat-card { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
border: 1px solid rgba(255, 255, 255, 0.2); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.stat-card:hover { |
|
|
transform: translateY(-5px); |
|
|
border-color: #ed1c24; |
|
|
box-shadow: 0 0 20px rgba(237, 28, 36, 0.5); |
|
|
} |
|
|
.btn-logout { |
|
|
background: linear-gradient(135deg, #010066 0%, #ed1c24 100%); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.btn-logout:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 20px rgba(237, 28, 36, 0.3); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="flex h-screen"> |
|
|
|
|
|
<div class="hidden md:flex w-1/2 items-center justify-center"> |
|
|
<div class="logo-container w-3/4"> |
|
|
<svg viewBox="0 0 3840 2160" preserveAspectRatio="xMidYMid meet"> |
|
|
<g transform="translate(0,2160) scale(0.1,-0.1)"> |
|
|
<path class="main-path" fill="none" stroke="#ffffff" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" d="M19135 18870 c460 -44 724 -94 1025 -197 174 -59 276 -102 425 -178 721 -368 1279 -997 1636 -1846 174 -415 237 -785 198 -1175 -39 -397 -114 -568 -721 -1649 -50 -88 -94 -171 -100 -184 -25 -66 -48 -177 -48 -230 0 -49 -4 -65 -24 -88 -33 -39 -95 -39 -133 0 -25 25 -27 33 -26 101 1 106 39 244 98 361 28 55 139 258 247 450 349 625 450 846 496 1085 56 293 55 449 -4 765 -63 329 -251 755 -509 1150 -442 677 -1060 1126 -1825 1326 -216 56 -500 98 -686 102 l-109 2 0 -415 0 -414 35 -8 c19 -4 73 -14 120 -23 396 -76 785 -334 1007 -667 l45 -68 353 0 c221 0 374 -4 407 -11 76 -16 185 -76 244 -134 71 -69 96 -138 97 -265 1 -88 -2 -100 -32 -164 -30 -62 -87 -131 -150 -179 -13 -10 -19 -22 -15 -27 5 -5 50 -10 100 -12 83 -3 98 -7 168 -42 101 -51 167 -114 202 -191 24 -52 27 -73 28 -165 1 -99 -1 -109 -31 -171 -23 -46 -53 -85 -98 -128 -101 -94 -181 -127 -344 -140 l-76 -6 -3 -208 -2 -207 27 -11 c70 -26 117 -57 162 -104 70 -74 93 -125 99 -215 16 -280 -277 -505 -550 -420 -294 91 -369 424 -145 642 19 18 75 53 123 78 l89 45 5 268 5 269 28 24 c25 21 37 24 117 24 82 0 142 8 232 31 45 12 125 76 155 126 17 29 23 53 23 101 0 95 -28 136 -127 186 l-52 26 -405 0 c-377 0 -405 -1 -410 -17 -2 -10 -8 -43 -11 -73 -23 -184 -108 -421 -215 -595 -111 -182 -296 -374 -473 -493 -213 -142 -425 -221 -697 -259 -96 -13 -130 -22 -133 -33 -2 -8 -5 -540 -6 -1183 -2 -1040 -1 -1168 13 -1173 10 -4 84 57 228 187 117 106 216 198 220 204 4 5 8 191 8 413 l0 402 -53 34 c-98 63 -160 151 -191 273 -9 34 -16 78 -16 98 0 51 27 149 57 208 32 64 106 138 174 174 50 26 63 28 159 28 88 -1 113 -4 155 -23 205 -95 308 -310 245 -514 -44 -142 -156 -249 -305 -292 l-40 -12 -5 -438 -5 -438 -46 -42 c-25 -22 -126 -116 -225 -207 -98 -91 -233 -214 -299 -273 -109 -96 -123 -106 -159 -106 -27 0 -47 7 -63 22 l-23 21 -1 1231 c-1 677 -4 1276 -8 1331 l-6 100 -40 7 c-246 40 -358 73 -520 153 -287 140 -517 352 -674 620 -78 134 -147 303 -179 445 -26 110 -31 139 -38 207 -3 40 -12 77 -19 83 -8 7 -99 9 -256 8 l-244 -3 0 -314 0 -315 70 -35 c122 -61 225 -191 254 -321 61 -267 -125 -502 -409 -518 -255 -13 -467 166 -478 405 -6 131 41 247 142 348 43 43 150 105 181 105 8 0 24 9 35 20 20 20 20 33 20 629 0 536 -2 610 -15 621 -9 7 -38 23 -64 36 -64 29 -126 86 -172 156 -161 249 -17 585 274 639 233 42 466 -158 467 -401 0 -166 -94 -324 -241 -401 l-64 -34 0 -210 0 -210 240 -5 c132 -3 248 -2 257 3 11 4 19 24 23 55 19 137 66 317 111 425 231 548 722 917 1305 981 82 8 124 17 130 27 12 20 12 785 -1 809 -9 17 -20 19 -103 15 -50 -3 -147 -7 -215 -10 -129 -5 -322 -26 -457 -50 -714 -125 -1256 -414 -1778 -949 -245 -250 -394 -590 -469 -1066 -33 -210 -4 -860 64 -1427 l12 -101 -66 -134 c-124 -248 -344 -638 -651 -1153 -186 -311 -225 -389 -214 -419 9 -23 86 -76 257 -177 490 -290 531 -323 546 -432 9 -64 -8 -124 -74 -257 -54 -109 -57 -119 -56 -186 2 -80 12 -102 117 -231 76 -95 102 -152 123 -274 26 -147 16 -339 -40 -774 -9 -66 -22 -165 -31 -220 -31 -203 -37 -271 -31 -334 11 -119 71 -186 245 -275 167 -84 194 -91 356 -90 161 1 291 25 445 81 219 79 295 96 445 97 92 0 119 -3 166 -22 106 -42 181 -129 220 -253 18 -58 19 -117 19 -1428 0 -976 -3 -1377 -11 -1400 -11 -31 -52 -61 -84 -61 -25 0 -72 28 -80 47 -4 10 -9 644 -12 1408 l-5 1390 -27 45 c-40 67 -87 90 -188 90 -101 0 -189 -18 -318 -65 -55 -20 -118 -42 -140 -50 -86 -29 -362 -75 -449 -75 -59 0 -181 22 -252 45 -68 23 -260 120 -315 161 -162 119 -228 306 -189 539 45 263 99 707 106 870 7 155 -5 273 -35 339 -10 22 -46 75 -80 116 -72 87 -105 146 -126 227 -32 124 -17 207 75 393 45 92 49 106 37 124 -19 30 -157 123 -332 224 -295 170 -407 250 -441 314 -9 17 -14 58 -14 115 0 82 3 93 38 163 20 41 82 149 136 240 180 299 368 622 469 805 55 99 113 205 130 235 17 30 56 105 87 167 56 111 57 112 48 170 -35 241 -78 856 -78 1128 0 216 16 363 61 568 72 326 205 620 379 832 66 81 278 288 400 391 371 313 841 549 1325 663 28 7 66 16 85 21 274 71 947 126 1225 100z"/> |
|
|
</g> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-full md:w-1/2 flex items-center justify-center p-8"> |
|
|
<div class="dashboard-container bg-black bg-opacity-70 backdrop-blur-md rounded-xl p-10 w-full max-w-2xl border border-white border-opacity-20"> |
|
|
<div class="text-center mb-10"> |
|
|
<h1 class="text-4xl font-bold text-white mb-2">Neural Dashboard</h1> |
|
|
<p class="text-white text-opacity-70">System status and controls</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10"> |
|
|
<div class="stat-card rounded-lg p-6"> |
|
|
<h3 class="text-white text-lg font-semibold mb-2">Neural Activity</h3> |
|
|
<p class="text-3xl font-bold text-blue-400">87%</p> |
|
|
<p class="text-white text-opacity-70 text-sm mt-2">Optimal performance</p> |
|
|
</div> |
|
|
<div class="stat-card rounded-lg p-6"> |
|
|
<h3 class="text-white text-lg font-semibold mb-2">Connections</h3> |
|
|
<p class="text-3xl font-bold text-red-400">1,248</p> |
|
|
<p class="text-white text-opacity-70 text-sm mt-2">Active synapses</p> |
|
|
</div> |
|
|
<div class="stat-card rounded-lg p-6"> |
|
|
<h3 class="text-white text-lg font-semibold mb-2">Processing</h3> |
|
|
<p class="text-3xl font-bold text-purple-400">42.7 TB</p> |
|
|
<p class="text-white text-opacity-70 text-sm mt-2">Data throughput</p> |
|
|
</div> |
|
|
<div class="stat-card rounded-lg p-6"> |
|
|
<h3 class="text-white text-lg font-semibold mb-2">Security</h3> |
|
|
<p class="text-3xl font-bold text-green-400">99.9%</p> |
|
|
<p class="text-white text-opacity-70 text-sm mt-2">Threat prevention</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-10"> |
|
|
<h2 class="text-white text-xl font-semibold mb-4">System Controls</h2> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<button class="bg-gray-800 hover:bg-gray-700 text-white py-3 px-4 rounded-lg transition">Neural Sync</button> |
|
|
<button class="bg-gray-800 hover:bg-gray-700 text-white py-3 px-4 rounded-lg transition">Data Stream</button> |
|
|
<button class="bg-gray-800 hover:bg-gray-700 text-white py-3 px-4 rounded-lg transition">Circuit Map</button> |
|
|
<button class="bg-gray-800 hover:bg-gray-700 text-white py-3 px-4 rounded-lg transition">Performance</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<button class="btn-logout w-full py-3 px-4 rounded-lg text-white font-medium focus:outline-none"> |
|
|
Disconnect |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
