fix: move theme toggle into shared top-bar controls
This commit is contained in:
+35
-26
@@ -6,50 +6,58 @@
|
|||||||
<title><?php echo htmlspecialchars($vehicle['name']); ?> - Maintenance Export</title>
|
<title><?php echo htmlspecialchars($vehicle['name']); ?> - Maintenance Export</title>
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
||||||
|
<?php $themeSection = 'head'; include __DIR__ . '/partials/theme.php'; ?>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-white p-8">
|
<body class="theme-page min-h-screen">
|
||||||
<div class="max-w-4xl mx-auto">
|
<header class="theme-surface shadow-sm">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
|
||||||
|
<a href="<?php echo url('/home'); ?>" class="text-2xl font-bold theme-text hover:opacity-95 transition"><?php echo APP_NAME; ?></a>
|
||||||
|
<?php $showSettings = false; include __DIR__ . '/partials/topbar-controls.php'; ?>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="max-w-4xl mx-auto px-4 py-8">
|
||||||
<div class="text-center mb-8">
|
<div class="text-center mb-8">
|
||||||
<h1 class="text-3xl font-bold text-gray-800 mb-2"><?php echo APP_NAME; ?></h1>
|
<h1 class="text-3xl font-bold theme-text mb-2"><?php echo APP_NAME; ?></h1>
|
||||||
<h2 class="text-xl text-gray-600">Vehicle Maintenance Export</h2>
|
<h2 class="text-xl theme-text-muted">Vehicle Maintenance Export</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Vehicle Information -->
|
<!-- Vehicle Information -->
|
||||||
<div class="bg-gray-50 rounded-lg p-6 mb-8">
|
<div class="theme-surface rounded-lg shadow-sm p-6 mb-8">
|
||||||
<h3 class="text-xl font-semibold text-gray-800 mb-4">Vehicle Information</h3>
|
<h3 class="text-xl font-semibold theme-text mb-4">Vehicle Information</h3>
|
||||||
<div class="grid grid-cols-2 gap-4">
|
<div class="grid grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<span class="font-medium text-gray-700">Name:</span>
|
<span class="font-medium theme-text">Name:</span>
|
||||||
<span class="text-gray-600"><?php echo htmlspecialchars($vehicle['name']); ?></span>
|
<span class="theme-text-muted"><?php echo htmlspecialchars($vehicle['name']); ?></span>
|
||||||
</div>
|
</div>
|
||||||
<?php if ($vehicle['year']): ?>
|
<?php if ($vehicle['year']): ?>
|
||||||
<div>
|
<div>
|
||||||
<span class="font-medium text-gray-700">Year:</span>
|
<span class="font-medium theme-text">Year:</span>
|
||||||
<span class="text-gray-600"><?php echo htmlspecialchars($vehicle['year']); ?></span>
|
<span class="theme-text-muted"><?php echo htmlspecialchars($vehicle['year']); ?></span>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<?php if ($vehicle['make']): ?>
|
<?php if ($vehicle['make']): ?>
|
||||||
<div>
|
<div>
|
||||||
<span class="font-medium text-gray-700">Make:</span>
|
<span class="font-medium theme-text">Make:</span>
|
||||||
<span class="text-gray-600"><?php echo htmlspecialchars($vehicle['make']); ?></span>
|
<span class="theme-text-muted"><?php echo htmlspecialchars($vehicle['make']); ?></span>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<?php if ($vehicle['model']): ?>
|
<?php if ($vehicle['model']): ?>
|
||||||
<div>
|
<div>
|
||||||
<span class="font-medium text-gray-700">Model:</span>
|
<span class="font-medium theme-text">Model:</span>
|
||||||
<span class="text-gray-600"><?php echo htmlspecialchars($vehicle['model']); ?></span>
|
<span class="theme-text-muted"><?php echo htmlspecialchars($vehicle['model']); ?></span>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<?php if ($vehicle['color']): ?>
|
<?php if ($vehicle['color']): ?>
|
||||||
<div>
|
<div>
|
||||||
<span class="font-medium text-gray-700">Color:</span>
|
<span class="font-medium theme-text">Color:</span>
|
||||||
<span class="text-gray-600"><?php echo htmlspecialchars($vehicle['color']); ?></span>
|
<span class="theme-text-muted"><?php echo htmlspecialchars($vehicle['color']); ?></span>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<?php if ($vehicle['license_plate']): ?>
|
<?php if ($vehicle['license_plate']): ?>
|
||||||
<div>
|
<div>
|
||||||
<span class="font-medium text-gray-700">License Plate:</span>
|
<span class="font-medium theme-text">License Plate:</span>
|
||||||
<span class="text-gray-600"><?php echo htmlspecialchars($vehicle['license_plate']); ?></span>
|
<span class="theme-text-muted"><?php echo htmlspecialchars($vehicle['license_plate']); ?></span>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
@@ -57,16 +65,16 @@
|
|||||||
|
|
||||||
<!-- Maintenance History -->
|
<!-- Maintenance History -->
|
||||||
<div>
|
<div>
|
||||||
<h3 class="text-xl font-semibold text-gray-800 mb-4">Maintenance History</h3>
|
<h3 class="text-xl font-semibold theme-text mb-4">Maintenance History</h3>
|
||||||
|
|
||||||
<?php if (empty($maintenanceItems)): ?>
|
<?php if (empty($maintenanceItems)): ?>
|
||||||
<p class="text-gray-500 text-center py-8">No maintenance records available.</p>
|
<p class="theme-text-muted text-center py-8">No maintenance records available.</p>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
<div class="space-y-4">
|
<div class="space-y-4">
|
||||||
<?php foreach ($maintenanceItems as $item): ?>
|
<?php foreach ($maintenanceItems as $item): ?>
|
||||||
<div class="border border-gray-300 rounded-lg p-4">
|
<div class="theme-surface border theme-border rounded-lg p-4">
|
||||||
<div class="flex justify-between items-start mb-2">
|
<div class="flex justify-between items-start mb-2">
|
||||||
<h4 class="text-lg font-semibold text-gray-800"><?php echo htmlspecialchars($item['name']); ?></h4>
|
<h4 class="text-lg font-semibold theme-text"><?php echo htmlspecialchars($item['name']); ?></h4>
|
||||||
<?php if ($item['cost']): ?>
|
<?php if ($item['cost']): ?>
|
||||||
<span class="bg-green-100 text-green-800 px-3 py-1 rounded">
|
<span class="bg-green-100 text-green-800 px-3 py-1 rounded">
|
||||||
$<?php echo number_format($item['cost'], 2); ?>
|
$<?php echo number_format($item['cost'], 2); ?>
|
||||||
@@ -74,7 +82,7 @@
|
|||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm text-gray-600 mb-2">
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm theme-text-muted mb-2">
|
||||||
<div>
|
<div>
|
||||||
<strong>Date:</strong> <?php echo date('M d, Y', strtotime($item['date'])); ?>
|
<strong>Date:</strong> <?php echo date('M d, Y', strtotime($item['date'])); ?>
|
||||||
</div>
|
</div>
|
||||||
@@ -94,7 +102,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php if ($item['description']): ?>
|
<?php if ($item['description']): ?>
|
||||||
<div class="mt-2 text-sm text-gray-600">
|
<div class="mt-2 text-sm theme-text-muted">
|
||||||
<strong>Description:</strong><br>
|
<strong>Description:</strong><br>
|
||||||
<?php echo nl2br(htmlspecialchars($item['description'])); ?>
|
<?php echo nl2br(htmlspecialchars($item['description'])); ?>
|
||||||
</div>
|
</div>
|
||||||
@@ -105,10 +113,11 @@
|
|||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-8 text-center text-sm text-gray-500">
|
<div class="mt-8 text-center text-sm theme-text-muted">
|
||||||
<p>Exported on <?php echo date('F j, Y \a\t g:i A'); ?></p>
|
<p>Exported on <?php echo date('F j, Y \a\t g:i A'); ?></p>
|
||||||
<p>Generated by <?php echo APP_NAME; ?></p>
|
<p>Generated by <?php echo APP_NAME; ?></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</main>
|
||||||
|
<?php $themeSection = 'body'; include __DIR__ . '/partials/theme.php'; ?>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
+1
-5
@@ -13,11 +13,7 @@
|
|||||||
<header class="theme-surface shadow-sm">
|
<header class="theme-surface shadow-sm">
|
||||||
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
|
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
|
||||||
<a href="<?php echo url('/home'); ?>" class="text-2xl font-bold theme-text hover:opacity-95 transition"><?php echo APP_NAME; ?></a>
|
<a href="<?php echo url('/home'); ?>" class="text-2xl font-bold theme-text hover:opacity-95 transition"><?php echo APP_NAME; ?></a>
|
||||||
<div class="flex items-center space-x-4">
|
<?php $showSettings = true; include __DIR__ . '/partials/topbar-controls.php'; ?>
|
||||||
<a href="<?php echo url('/settings'); ?>" class="theme-text-muted hover:opacity-95">
|
|
||||||
<i class="bi bi-gear-fill text-2xl"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|||||||
+38
-29
@@ -8,36 +8,45 @@
|
|||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
||||||
<?php $themeSection = 'head'; include __DIR__ . '/partials/theme.php'; ?>
|
<?php $themeSection = 'head'; include __DIR__ . '/partials/theme.php'; ?>
|
||||||
</head>
|
</head>
|
||||||
<body class="theme-page min-h-screen flex items-center justify-center">
|
<body class="theme-page min-h-screen">
|
||||||
<div class="theme-surface p-8 rounded-lg shadow-md w-full max-w-md">
|
<header class="theme-surface shadow-sm">
|
||||||
<h1 class="text-3xl font-bold theme-text mb-6 text-center"><?php echo APP_NAME; ?></h1>
|
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
|
||||||
|
<a href="<?php echo url('/home'); ?>" class="text-2xl font-bold theme-text hover:opacity-95 transition"><?php echo APP_NAME; ?></a>
|
||||||
<?php if (isset($_SESSION['error'])): ?>
|
<?php $showSettings = false; include __DIR__ . '/partials/topbar-controls.php'; ?>
|
||||||
<div class="border px-4 py-3 rounded mb-4" style="background-color: #fee2e2; background-color: color-mix(in srgb, #ef4444 14%, var(--theme-surface)); border-color: #fca5a5; border-color: color-mix(in srgb, #ef4444 40%, var(--theme-border)); color: #7f1d1d; color: var(--theme-text);">
|
</div>
|
||||||
<?php echo htmlspecialchars($_SESSION['error']); unset($_SESSION['error']); ?>
|
</header>
|
||||||
</div>
|
|
||||||
<?php endif; ?>
|
<main class="min-h-[calc(100vh-72px)] flex items-center justify-center px-4 py-8">
|
||||||
|
<div class="theme-surface p-8 rounded-lg shadow-md w-full max-w-md">
|
||||||
<?php if (isset($_SESSION['success'])): ?>
|
<h1 class="text-3xl font-bold theme-text mb-6 text-center"><?php echo APP_NAME; ?></h1>
|
||||||
<div class="border px-4 py-3 rounded mb-4" style="background-color: #dcfce7; background-color: color-mix(in srgb, #22c55e 14%, var(--theme-surface)); border-color: #86efac; border-color: color-mix(in srgb, #22c55e 40%, var(--theme-border)); color: #14532d; color: var(--theme-text);">
|
|
||||||
<?php echo htmlspecialchars($_SESSION['success']); unset($_SESSION['success']); ?>
|
|
||||||
</div>
|
|
||||||
<?php endif; ?>
|
|
||||||
|
|
||||||
<form method="POST" action="<?php echo url('/login'); ?>" class="space-y-4">
|
|
||||||
<div>
|
|
||||||
<label for="password" class="block text-sm font-medium theme-text mb-1">Password</label>
|
|
||||||
<input type="password" id="password" name="password" required autofocus
|
|
||||||
class="w-full px-3 py-2 border border-gray-300 theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
placeholder="Enter your password">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit"
|
<?php if (isset($_SESSION['error'])): ?>
|
||||||
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-200">
|
<div class="border px-4 py-3 rounded mb-4" style="background-color: #fee2e2; background-color: color-mix(in srgb, #ef4444 14%, var(--theme-surface)); border-color: #fca5a5; border-color: color-mix(in srgb, #ef4444 40%, var(--theme-border)); color: #7f1d1d; color: var(--theme-text);">
|
||||||
Login
|
<?php echo htmlspecialchars($_SESSION['error']); unset($_SESSION['error']); ?>
|
||||||
</button>
|
</div>
|
||||||
</form>
|
<?php endif; ?>
|
||||||
</div>
|
|
||||||
|
<?php if (isset($_SESSION['success'])): ?>
|
||||||
|
<div class="border px-4 py-3 rounded mb-4" style="background-color: #dcfce7; background-color: color-mix(in srgb, #22c55e 14%, var(--theme-surface)); border-color: #86efac; border-color: color-mix(in srgb, #22c55e 40%, var(--theme-border)); color: #14532d; color: var(--theme-text);">
|
||||||
|
<?php echo htmlspecialchars($_SESSION['success']); unset($_SESSION['success']); ?>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<form method="POST" action="<?php echo url('/login'); ?>" class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label for="password" class="block text-sm font-medium theme-text mb-1">Password</label>
|
||||||
|
<input type="password" id="password" name="password" required autofocus
|
||||||
|
class="w-full px-3 py-2 border border-gray-300 theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
placeholder="Enter your password">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit"
|
||||||
|
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-200">
|
||||||
|
Login
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
<?php $themeSection = 'body'; include __DIR__ . '/partials/theme.php'; ?>
|
<?php $themeSection = 'body'; include __DIR__ . '/partials/theme.php'; ?>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -106,19 +106,6 @@ if ($themeSection === 'head'):
|
|||||||
color: var(--theme-text-muted);
|
color: var(--theme-text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
#themeToggle {
|
|
||||||
position: fixed;
|
|
||||||
top: calc(1rem + env(safe-area-inset-top));
|
|
||||||
right: 1rem;
|
|
||||||
z-index: 50;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
#themeToggle {
|
|
||||||
top: calc(4.75rem + env(safe-area-inset-top));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#themeToggle:focus-visible {
|
#themeToggle:focus-visible {
|
||||||
outline: 3px solid #2563eb;
|
outline: 3px solid #2563eb;
|
||||||
outline-offset: 2px;
|
outline-offset: 2px;
|
||||||
@@ -129,24 +116,6 @@ endif;
|
|||||||
|
|
||||||
if ($themeSection === 'body'):
|
if ($themeSection === 'body'):
|
||||||
?>
|
?>
|
||||||
<button
|
|
||||||
id="themeToggle"
|
|
||||||
type="button"
|
|
||||||
class="bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full shadow-md transition"
|
|
||||||
aria-label="Switch to dark mode"
|
|
||||||
title="Switch to dark mode"
|
|
||||||
>
|
|
||||||
<i id="themeToggleIcon" class="bi bi-moon-stars-fill" aria-hidden="true"></i>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<noscript>
|
|
||||||
<style>
|
|
||||||
#themeToggle {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</noscript>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
(function () {
|
(function () {
|
||||||
var html = document.documentElement;
|
var html = document.documentElement;
|
||||||
|
|||||||
@@ -0,0 +1,31 @@
|
|||||||
|
<?php
|
||||||
|
$showSettings = isset($showSettings) ? (bool) $showSettings : false;
|
||||||
|
$settingsUrl = isset($settingsUrl) ? (string) $settingsUrl : url('/settings');
|
||||||
|
?>
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<button
|
||||||
|
id="themeToggle"
|
||||||
|
type="button"
|
||||||
|
class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-lg shadow-sm transition"
|
||||||
|
aria-label="Switch to dark mode"
|
||||||
|
title="Switch to dark mode"
|
||||||
|
aria-pressed="false"
|
||||||
|
>
|
||||||
|
<i id="themeToggleIcon" class="bi bi-moon-stars-fill" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<?php if ($showSettings): ?>
|
||||||
|
<a href="<?php echo htmlspecialchars($settingsUrl); ?>" class="theme-text-muted hover:opacity-95">
|
||||||
|
<i class="bi bi-gear-fill text-2xl" aria-hidden="true"></i>
|
||||||
|
<span class="sr-only">Settings</span>
|
||||||
|
</a>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<noscript>
|
||||||
|
<style>
|
||||||
|
#themeToggle {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</noscript>
|
||||||
+1
-5
@@ -13,11 +13,7 @@
|
|||||||
<header class="theme-surface shadow-sm">
|
<header class="theme-surface shadow-sm">
|
||||||
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
|
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
|
||||||
<a href="<?php echo url('/home'); ?>" class="text-2xl font-bold theme-text hover:opacity-90 transition"><?php echo APP_NAME; ?></a>
|
<a href="<?php echo url('/home'); ?>" class="text-2xl font-bold theme-text hover:opacity-90 transition"><?php echo APP_NAME; ?></a>
|
||||||
<div class="flex items-center space-x-4">
|
<?php $showSettings = false; include __DIR__ . '/partials/topbar-controls.php'; ?>
|
||||||
<a href="<?php echo url('/settings'); ?>" class="theme-text-muted hover:opacity-90">
|
|
||||||
<i class="bi bi-gear-fill text-2xl"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|||||||
+73
-64
@@ -8,73 +8,82 @@
|
|||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
||||||
<?php $themeSection = 'head'; include __DIR__ . '/partials/theme.php'; ?>
|
<?php $themeSection = 'head'; include __DIR__ . '/partials/theme.php'; ?>
|
||||||
</head>
|
</head>
|
||||||
<body class="theme-page min-h-screen flex items-center justify-center">
|
<body class="theme-page min-h-screen">
|
||||||
<div class="theme-surface p-8 rounded-lg shadow-md w-full max-w-md">
|
<header class="theme-surface shadow-sm">
|
||||||
<h1 class="text-3xl font-bold theme-text mb-6 text-center"><?php echo APP_NAME; ?> Setup</h1>
|
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
|
||||||
|
<a href="<?php echo url('/home'); ?>" class="text-2xl font-bold theme-text hover:opacity-95 transition"><?php echo APP_NAME; ?></a>
|
||||||
<?php if (isset($_SESSION['error'])): ?>
|
<?php $showSettings = false; include __DIR__ . '/partials/topbar-controls.php'; ?>
|
||||||
<div class="border px-4 py-3 rounded mb-4" style="background-color: #fee2e2; background-color: color-mix(in srgb, #ef4444 14%, var(--theme-surface)); border-color: #fca5a5; border-color: color-mix(in srgb, #ef4444 40%, var(--theme-border)); color: #7f1d1d; color: var(--theme-text);">
|
|
||||||
<?php echo htmlspecialchars($_SESSION['error']); unset($_SESSION['error']); ?>
|
|
||||||
</div>
|
|
||||||
<?php endif; ?>
|
|
||||||
|
|
||||||
<div class="mb-6 p-4 border rounded" style="background-color: #eff6ff; background-color: color-mix(in srgb, #3b82f6 12%, var(--theme-surface)); border-color: #bfdbfe; border-color: color-mix(in srgb, #3b82f6 35%, var(--theme-border)); color: #1e3a8a; color: var(--theme-text);">
|
|
||||||
<h2 class="font-semibold mb-2">System Requirements</h2>
|
|
||||||
<ul class="space-y-1 text-sm">
|
|
||||||
<li class="flex items-center">
|
|
||||||
<i class="bi bi-check-circle-fill text-green-600 mr-2"></i>
|
|
||||||
<span>PHP Version: <?php echo PHP_VERSION; ?>
|
|
||||||
<?php if (version_compare(PHP_VERSION, '8.0.0', '>=')): ?>
|
|
||||||
<span class="text-green-600">(✓ Meets requirement)</span>
|
|
||||||
<?php else: ?>
|
|
||||||
<span class="text-red-600">(✗ Requires 8.0+)</span>
|
|
||||||
<?php endif; ?>
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-center">
|
|
||||||
<?php if (extension_loaded('pdo_sqlite')): ?>
|
|
||||||
<i class="bi bi-check-circle-fill text-green-600 mr-2"></i>
|
|
||||||
<span>SQLite: <span class="text-green-600">Available (✓)</span></span>
|
|
||||||
<?php else: ?>
|
|
||||||
<i class="bi bi-x-circle-fill text-red-600 mr-2"></i>
|
|
||||||
<span>SQLite: <span class="text-red-600">Not Available (✗)</span></span>
|
|
||||||
<?php endif; ?>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
</header>
|
||||||
<?php
|
|
||||||
$canSetup = version_compare(PHP_VERSION, '8.0.0', '>=') && extension_loaded('pdo_sqlite');
|
<main class="min-h-[calc(100vh-72px)] flex items-center justify-center px-4 py-8">
|
||||||
?>
|
<div class="theme-surface p-8 rounded-lg shadow-md w-full max-w-md">
|
||||||
|
<h1 class="text-3xl font-bold theme-text mb-6 text-center"><?php echo APP_NAME; ?> Setup</h1>
|
||||||
<?php if (!$canSetup): ?>
|
|
||||||
<div class="border px-4 py-3 rounded mb-4" style="background-color: #fef9c3; background-color: color-mix(in srgb, #eab308 16%, var(--theme-surface)); border-color: #facc15; border-color: color-mix(in srgb, #eab308 38%, var(--theme-border)); color: #854d0e; color: var(--theme-text);">
|
<?php if (isset($_SESSION['error'])): ?>
|
||||||
<p class="font-semibold">System requirements not met!</p>
|
<div class="border px-4 py-3 rounded mb-4" style="background-color: #fee2e2; background-color: color-mix(in srgb, #ef4444 14%, var(--theme-surface)); border-color: #fca5a5; border-color: color-mix(in srgb, #ef4444 40%, var(--theme-border)); color: #7f1d1d; color: var(--theme-text);">
|
||||||
<p class="text-sm mt-1">Please ensure PHP 8.0+ and SQLite extension are available.</p>
|
<?php echo htmlspecialchars($_SESSION['error']); unset($_SESSION['error']); ?>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<div class="mb-6 p-4 border rounded" style="background-color: #eff6ff; background-color: color-mix(in srgb, #3b82f6 12%, var(--theme-surface)); border-color: #bfdbfe; border-color: color-mix(in srgb, #3b82f6 35%, var(--theme-border)); color: #1e3a8a; color: var(--theme-text);">
|
||||||
|
<h2 class="font-semibold mb-2">System Requirements</h2>
|
||||||
|
<ul class="space-y-1 text-sm">
|
||||||
|
<li class="flex items-center">
|
||||||
|
<i class="bi bi-check-circle-fill text-green-600 mr-2"></i>
|
||||||
|
<span>PHP Version: <?php echo PHP_VERSION; ?>
|
||||||
|
<?php if (version_compare(PHP_VERSION, '8.0.0', '>=')): ?>
|
||||||
|
<span class="text-green-600">(✓ Meets requirement)</span>
|
||||||
|
<?php else: ?>
|
||||||
|
<span class="text-red-600">(✗ Requires 8.0+)</span>
|
||||||
|
<?php endif; ?>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center">
|
||||||
|
<?php if (extension_loaded('pdo_sqlite')): ?>
|
||||||
|
<i class="bi bi-check-circle-fill text-green-600 mr-2"></i>
|
||||||
|
<span>SQLite: <span class="text-green-600">Available (✓)</span></span>
|
||||||
|
<?php else: ?>
|
||||||
|
<i class="bi bi-x-circle-fill text-red-600 mr-2"></i>
|
||||||
|
<span>SQLite: <span class="text-red-600">Not Available (✗)</span></span>
|
||||||
|
<?php endif; ?>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<?php else: ?>
|
|
||||||
<form method="POST" action="<?php echo url('/setup'); ?>" class="space-y-4">
|
<?php
|
||||||
<div>
|
$canSetup = version_compare(PHP_VERSION, '8.0.0', '>=') && extension_loaded('pdo_sqlite');
|
||||||
<label for="password" class="block text-sm font-medium theme-text-muted mb-1">Create Password</label>
|
?>
|
||||||
<input type="password" id="password" name="password" required
|
|
||||||
class="w-full px-3 py-2 border border-gray-300 theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
<?php if (!$canSetup): ?>
|
||||||
placeholder="Enter password (min 6 characters)">
|
<div class="border px-4 py-3 rounded mb-4" style="background-color: #fef9c3; background-color: color-mix(in srgb, #eab308 16%, var(--theme-surface)); border-color: #facc15; border-color: color-mix(in srgb, #eab308 38%, var(--theme-border)); color: #854d0e; color: var(--theme-text);">
|
||||||
|
<p class="font-semibold">System requirements not met!</p>
|
||||||
|
<p class="text-sm mt-1">Please ensure PHP 8.0+ and SQLite extension are available.</p>
|
||||||
</div>
|
</div>
|
||||||
|
<?php else: ?>
|
||||||
<div>
|
<form method="POST" action="<?php echo url('/setup'); ?>" class="space-y-4">
|
||||||
<label for="confirm_password" class="block text-sm font-medium theme-text-muted mb-1">Confirm Password</label>
|
<div>
|
||||||
<input type="password" id="confirm_password" name="confirm_password" required
|
<label for="password" class="block text-sm font-medium theme-text-muted mb-1">Create Password</label>
|
||||||
class="w-full px-3 py-2 border border-gray-300 theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
<input type="password" id="password" name="password" required
|
||||||
placeholder="Confirm password">
|
class="w-full px-3 py-2 border border-gray-300 theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
</div>
|
placeholder="Enter password (min 6 characters)">
|
||||||
|
</div>
|
||||||
<button type="submit"
|
|
||||||
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-200">
|
<div>
|
||||||
Complete Setup
|
<label for="confirm_password" class="block text-sm font-medium theme-text-muted mb-1">Confirm Password</label>
|
||||||
</button>
|
<input type="password" id="confirm_password" name="confirm_password" required
|
||||||
</form>
|
class="w-full px-3 py-2 border border-gray-300 theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
<?php endif; ?>
|
placeholder="Confirm password">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<button type="submit"
|
||||||
|
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-200">
|
||||||
|
Complete Setup
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
<?php $themeSection = 'body'; include __DIR__ . '/partials/theme.php'; ?>
|
<?php $themeSection = 'body'; include __DIR__ . '/partials/theme.php'; ?>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
+1
-5
@@ -13,11 +13,7 @@
|
|||||||
<header class="theme-surface shadow-sm">
|
<header class="theme-surface shadow-sm">
|
||||||
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
|
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
|
||||||
<a href="<?php echo url('/home'); ?>" class="text-2xl font-bold theme-text hover:opacity-90 transition"><?php echo APP_NAME; ?></a>
|
<a href="<?php echo url('/home'); ?>" class="text-2xl font-bold theme-text hover:opacity-90 transition"><?php echo APP_NAME; ?></a>
|
||||||
<div class="flex items-center space-x-4">
|
<?php $showSettings = true; include __DIR__ . '/partials/topbar-controls.php'; ?>
|
||||||
<a href="<?php echo url('/settings'); ?>" class="theme-text-muted hover:opacity-90">
|
|
||||||
<i class="bi bi-gear-fill text-2xl"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user