kjh2064
430fb9d089
✅ Pages Created: 1. index-new.html - Hero landing page with feature showcase 2. dashboard-control-center-new.html - Dashboard with stats, charts, activity feed 3. auth-login-new.html - Modern login form with social auth options 4. forms-inputs-new.html - Comprehensive form components & validation 5. tables-basic-new.html - Various table styles (simple, striped, hover, bordered) 🎨 Features: ✅ All pages use modular CSS files (base, components, forms, tables, etc.) ✅ Dark mode support with localStorage persistence ✅ Theme toggle button on each page ✅ Fully responsive design (mobile-first) ✅ Bootstrap 5 conventions & utilities ✅ FontAwesome 6 icons integration ✅ Professional styling & UX patterns ✅ Card-based layouts ✅ Status badges & indicators ✅ Form validation states 📱 Responsive Breakpoints: - Mobile: < 576px - Tablet (sm): ≥ 576px - Tablet (md): ≥ 768px - Desktop (lg): ≥ 992px - Desktop (xl): ≥ 1200px - Desktop (xxl): ≥ 1400px 🔗 Page Links: - index-new.html → dashboard-control-center-new.html (Launch Dashboard) - All pages link to components-showcase.html - All pages have theme toggle & navigation ✨ These 5 pages demonstrate all major Bootstrap 5 components: - Navigation & headers - Stats cards - Charts (placeholder) - Forms (inputs, selects, textarea, validation) - Tables (multiple variants) - Badges & status indicators - Buttons & actions - Modal dialogs (ready for implementation) - Dark mode themes Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
399 lines
15 KiB
HTML
399 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-bs-theme="light">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Control Center Dashboard | SmartAdmin</title>
|
|
<meta name="description" content="SmartAdmin Dashboard">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=5">
|
|
|
|
<link rel="icon" href="img/favicon-32x32.png" type="image/png" sizes="32x32">
|
|
|
|
<!-- SmartAdmin Bootstrap 5 - Modular CSS -->
|
|
<link rel="stylesheet" media="screen, print" href="css/base.css">
|
|
<link rel="stylesheet" media="screen, print" href="css/components.css">
|
|
<link rel="stylesheet" media="screen, print" href="css/forms.css">
|
|
<link rel="stylesheet" media="screen, print" href="css/tables.css">
|
|
<link rel="stylesheet" media="screen, print" href="css/layout.css">
|
|
<link rel="stylesheet" media="screen, print" href="css/darkmode.css">
|
|
<link rel="stylesheet" media="screen, print" href="css/responsive.css">
|
|
<link rel="stylesheet" media="screen, print" href="css/utilities.css">
|
|
|
|
<link rel="stylesheet" media="screen, print" href="plugins/waves/waves.min.css">
|
|
<link rel="stylesheet" media="screen, print" href="css/smartapp.min.css">
|
|
<link rel="stylesheet" media="screen, print" href="webfonts/smartadmin/sa-icons.css">
|
|
<link rel="stylesheet" media="screen, print" href="webfonts/fontawesome/fontawesome.css">
|
|
|
|
<style>
|
|
body {
|
|
background-color: var(--bs-gray-50);
|
|
}
|
|
|
|
[data-bs-theme="dark"] body {
|
|
background-color: var(--bs-gray-900);
|
|
}
|
|
|
|
.app-header {
|
|
background-color: var(--bs-body-bg);
|
|
border-bottom: 1px solid var(--bs-gray-200);
|
|
padding: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
box-shadow: var(--bs-box-shadow);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.app-logo {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--bs-primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.breadcrumb {
|
|
margin: 0;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.stat-card {
|
|
background-color: var(--bs-body-bg);
|
|
border: 1px solid var(--bs-gray-200);
|
|
border-radius: var(--bs-border-radius-lg);
|
|
padding: 1.5rem;
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
box-shadow: var(--bs-box-shadow-lg);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
color: var(--bs-primary);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.stat-label {
|
|
color: var(--bs-gray-600);
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.chart-placeholder {
|
|
background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(76, 175, 80, 0.1) 100%);
|
|
border-radius: var(--bs-border-radius-lg);
|
|
padding: 3rem;
|
|
text-align: center;
|
|
color: var(--bs-gray-600);
|
|
border: 2px dashed var(--bs-gray-300);
|
|
}
|
|
|
|
.recent-activity {
|
|
background-color: var(--bs-body-bg);
|
|
border-radius: var(--bs-border-radius-lg);
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.activity-item {
|
|
display: flex;
|
|
gap: 1rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid var(--bs-gray-200);
|
|
}
|
|
|
|
.activity-item:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.activity-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
background-color: var(--bs-gray-100);
|
|
color: var(--bs-primary);
|
|
}
|
|
|
|
.activity-content h6 {
|
|
margin: 0 0 0.25rem 0;
|
|
}
|
|
|
|
.activity-time {
|
|
color: var(--bs-gray-600);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.nav-top {
|
|
display: flex;
|
|
gap: 2rem;
|
|
margin-left: auto;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.nav-top a {
|
|
color: var(--bs-body-color);
|
|
text-decoration: none;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.nav-top a:hover {
|
|
color: var(--bs-primary);
|
|
}
|
|
|
|
.theme-toggle {
|
|
background: none;
|
|
border: none;
|
|
color: var(--bs-body-color);
|
|
cursor: pointer;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.page-title {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.nav-top {
|
|
gap: 1rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Header -->
|
|
<header class="app-header">
|
|
<a href="index-new.html" class="app-logo">
|
|
<i class="fa-solid fa-chart-line me-2"></i>SmartAdmin
|
|
</a>
|
|
<nav>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="index-new.html">Home</a></li>
|
|
<li class="breadcrumb-item active">Dashboard</li>
|
|
</ol>
|
|
</nav>
|
|
<ul class="nav-top">
|
|
<li><a href="components-showcase.html">Components</a></li>
|
|
<li><a href="auth-login-new.html">Login</a></li>
|
|
</ul>
|
|
<button class="theme-toggle" id="themeToggle" title="Toggle Dark Mode">
|
|
<i class="fa-solid fa-moon"></i>
|
|
</button>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main style="padding: 2rem;">
|
|
<div class="container-xxl">
|
|
<div class="page-title">Control Center Dashboard</div>
|
|
|
|
<!-- Statistics Cards -->
|
|
<div class="row mb-4">
|
|
<div class="col-12 col-sm-6 col-md-3 mb-3">
|
|
<div class="stat-card">
|
|
<div class="stat-value">$45,230</div>
|
|
<div class="stat-label">Total Revenue</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-3 mb-3">
|
|
<div class="stat-card">
|
|
<div class="stat-value">1,234</div>
|
|
<div class="stat-label">New Users</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-3 mb-3">
|
|
<div class="stat-card">
|
|
<div class="stat-value">89.2%</div>
|
|
<div class="stat-label">Conversion Rate</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-3 mb-3">
|
|
<div class="stat-card">
|
|
<div class="stat-value">412</div>
|
|
<div class="stat-label">Active Sessions</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Row -->
|
|
<div class="row mb-4">
|
|
<div class="col-12 col-lg-8 mb-3">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="fa-solid fa-chart-line me-2"></i>Revenue Trend
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart-placeholder">
|
|
<i class="fa-solid fa-chart-area" style="font-size: 3rem; opacity: 0.3;"></i>
|
|
<p style="margin-top: 1rem;">Chart visualization goes here</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-lg-4 mb-3">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="fa-solid fa-chart-pie me-2"></i>Distribution
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart-placeholder">
|
|
<i class="fa-solid fa-circle-notch" style="font-size: 3rem; opacity: 0.3;"></i>
|
|
<p style="margin-top: 1rem;">Pie chart goes here</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Activity -->
|
|
<div class="row">
|
|
<div class="col-12 col-lg-6 mb-3">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="fa-solid fa-history me-2"></i>Recent Activity
|
|
</div>
|
|
<div class="recent-activity">
|
|
<div class="activity-item">
|
|
<div class="activity-icon">
|
|
<i class="fa-solid fa-user-check"></i>
|
|
</div>
|
|
<div>
|
|
<h6>New user registered</h6>
|
|
<p>John Doe joined the platform</p>
|
|
<span class="activity-time">2 minutes ago</span>
|
|
</div>
|
|
</div>
|
|
<div class="activity-item">
|
|
<div class="activity-icon" style="background-color: rgba(76, 175, 80, 0.1); color: var(--bs-success);">
|
|
<i class="fa-solid fa-check-circle"></i>
|
|
</div>
|
|
<div>
|
|
<h6>Payment processed</h6>
|
|
<p>$2,450 transaction completed</p>
|
|
<span class="activity-time">15 minutes ago</span>
|
|
</div>
|
|
</div>
|
|
<div class="activity-item">
|
|
<div class="activity-icon" style="background-color: rgba(244, 67, 54, 0.1); color: var(--bs-danger);">
|
|
<i class="fa-solid fa-exclamation-circle"></i>
|
|
</div>
|
|
<div>
|
|
<h6>High server load detected</h6>
|
|
<p>CPU usage at 85%</p>
|
|
<span class="activity-time">1 hour ago</span>
|
|
</div>
|
|
</div>
|
|
<div class="activity-item">
|
|
<div class="activity-icon" style="background-color: rgba(255, 152, 0, 0.1); color: var(--bs-warning);">
|
|
<i class="fa-solid fa-bell"></i>
|
|
</div>
|
|
<div>
|
|
<h6>System update available</h6>
|
|
<p>Version 2.5.0 is ready to install</p>
|
|
<span class="activity-time">3 hours ago</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-6 mb-3">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="fa-solid fa-list me-2"></i>Top Performing Pages
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<table class="table table-hover mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>Page</th>
|
|
<th>Views</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>/dashboard</td>
|
|
<td>12,450</td>
|
|
<td><span class="badge badge-success">Active</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>/products</td>
|
|
<td>8,230</td>
|
|
<td><span class="badge badge-success">Active</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>/analytics</td>
|
|
<td>6,120</td>
|
|
<td><span class="badge badge-success">Active</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>/settings</td>
|
|
<td>3,450</td>
|
|
<td><span class="badge badge-warning">Moderate</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>/help</td>
|
|
<td>1,220</td>
|
|
<td><span class="badge badge-info">Low</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
const themeToggle = document.getElementById('themeToggle');
|
|
const html = document.documentElement;
|
|
|
|
const savedTheme = localStorage.getItem('theme') || 'light';
|
|
html.setAttribute('data-bs-theme', savedTheme);
|
|
updateThemeIcon();
|
|
|
|
themeToggle.addEventListener('click', () => {
|
|
const currentTheme = html.getAttribute('data-bs-theme');
|
|
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
|
html.setAttribute('data-bs-theme', newTheme);
|
|
localStorage.setItem('theme', newTheme);
|
|
updateThemeIcon();
|
|
});
|
|
|
|
function updateThemeIcon() {
|
|
const icon = themeToggle.querySelector('i');
|
|
const currentTheme = html.getAttribute('data-bs-theme');
|
|
if (currentTheme === 'dark') {
|
|
icon.classList.remove('fa-moon');
|
|
icon.classList.add('fa-sun');
|
|
} else {
|
|
icon.classList.add('fa-moon');
|
|
icon.classList.remove('fa-sun');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|