Andrew Zambazos
352 lines
11 KiB
HTML
352 lines
11 KiB
HTML
<html>
|
|
<head>
|
|
<style type="text/css">
|
|
* {
|
|
-webkit-user-select: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background: #10121b;
|
|
color: #e3e5e8;
|
|
font-family: 'Inter', -apple-system, 'Segoe UI', 'Open Sans', Arial, sans-serif;
|
|
height: 100vh;
|
|
width: 100%;
|
|
padding: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.top-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
|
|
.search-bar {
|
|
background: #1a1c23;
|
|
border-radius: 10px;
|
|
padding: 10px 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 300px;
|
|
border: 1px solid #2d303e;
|
|
}
|
|
|
|
.search-bar svg {
|
|
fill: #6b7280;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.search-bar input {
|
|
background: transparent;
|
|
border: none;
|
|
color: #e3e5e8;
|
|
width: 100%;
|
|
outline: none;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.user-profile {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.notification-icon {
|
|
background: #1a1c23;
|
|
padding: 8px;
|
|
border-radius: 8px;
|
|
margin-right: 16px;
|
|
cursor: pointer;
|
|
border: 1px solid #2d303e;
|
|
}
|
|
|
|
.notification-icon svg {
|
|
fill: #8a8d9e;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
gap: 24px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: linear-gradient(135deg, #1a1c23, #2d303e);
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: transform 0.2s ease;
|
|
border: 1px solid #2d303e;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
|
border-color: #6366f1;
|
|
}
|
|
|
|
.stat-icon {
|
|
background: linear-gradient(135deg, #6366f1, #8b5cf6);
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.stat-icon svg {
|
|
fill: white;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 1.8rem;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.stat-label {
|
|
color: #8a8d9e;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.welcome-card {
|
|
background: linear-gradient(135deg, #4f46e5, #8b5cf6);
|
|
border-radius: 20px;
|
|
padding: 2rem;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 32px;
|
|
box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.5);
|
|
cursor: pointer;
|
|
transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
|
|
}
|
|
|
|
.welcome-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 15px 30px -5px rgba(99, 102, 241, 0.6);
|
|
}
|
|
|
|
.welcome-text {
|
|
max-width: 60%;
|
|
}
|
|
|
|
.welcome-text h2 {
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.welcome-text p {
|
|
font-size: 1rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.welcome-illustration {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.chart-container {
|
|
background: #1a1c23;
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
border: 1px solid #2d303e;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.chart-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.chart-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
|
|
.chart-options {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.chart-option {
|
|
background: #2d303e;
|
|
border-radius: 6px;
|
|
padding: 6px 12px;
|
|
font-size: 0.8rem;
|
|
color: #8a8d9e;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chart-option.active {
|
|
background: #4f46e5;
|
|
color: white;
|
|
}
|
|
|
|
.chart-placeholder {
|
|
height: 200px;
|
|
background: linear-gradient(90deg, #2d303e, #1a1c23);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #6b7280;
|
|
}
|
|
|
|
/* Icons */
|
|
.search-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.notification-icon svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
/* For simplicity, we're adding SVG definitions inline */
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.welcome-illustration {
|
|
animation: pulse 3s ease-in-out infinite;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- SVG Icons -->
|
|
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
|
|
<symbol id="search" viewBox="0 0 24 24">
|
|
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
|
|
</symbol>
|
|
<symbol id="notification" viewBox="0 0 24 24">
|
|
<path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
|
|
</symbol>
|
|
<symbol id="users" viewBox="0 0 24 24">
|
|
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
|
|
</symbol>
|
|
<symbol id="chart" viewBox="0 0 24 24">
|
|
<path d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99z"/>
|
|
</symbol>
|
|
<symbol id="calendar" viewBox="0 0 24 24">
|
|
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
|
|
</symbol>
|
|
<symbol id="settings" viewBox="0 0 24 24">
|
|
<path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
|
|
</symbol>
|
|
</svg>
|
|
|
|
<div class="top-bar">
|
|
<h1 class="page-title">Dashboard</h1>
|
|
|
|
<div class="search-bar">
|
|
<svg class="search-icon"><use xlink:href="#search" /></svg>
|
|
<input type="text" placeholder="Search..." />
|
|
</div>
|
|
|
|
<div class="user-profile">
|
|
<div class="notification-icon">
|
|
<svg><use xlink:href="#notification" /></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="welcome-card">
|
|
<div class="welcome-text">
|
|
<h2>Welcome to the Dashboard!</h2>
|
|
<p>Track your metrics, analyze data, and manage your tasks all in one place.</p>
|
|
</div>
|
|
<div class="welcome-illustration">
|
|
<svg width="60" height="60" viewBox="0 0 24 24" fill="white">
|
|
<use xlink:href="#chart" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<svg><use xlink:href="#users" /></svg>
|
|
</div>
|
|
<div class="stat-value">1,485</div>
|
|
<div class="stat-label">Total Users</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<svg><use xlink:href="#chart" /></svg>
|
|
</div>
|
|
<div class="stat-value">$12,489</div>
|
|
<div class="stat-label">Total Revenue</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<svg><use xlink:href="#calendar" /></svg>
|
|
</div>
|
|
<div class="stat-value">64</div>
|
|
<div class="stat-label">Pending Tasks</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<svg><use xlink:href="#settings" /></svg>
|
|
</div>
|
|
<div class="stat-value">89%</div>
|
|
<div class="stat-label">System Status</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-container">
|
|
<div class="chart-header">
|
|
<div class="chart-title">Performance Analytics</div>
|
|
<div class="chart-options">
|
|
<div class="chart-option">Day</div>
|
|
<div class="chart-option active">Week</div>
|
|
<div class="chart-option">Month</div>
|
|
<div class="chart-option">Year</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart-placeholder">
|
|
Chart will be displayed here
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |