WallyHackenslacker/mainty
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: integrate dark mode support in home view

Browse Source
This commit is contained in:
Wally Hackenslacker
2026-05-01 15:14:18 -04:00
parent df7baa8276
commit 6d73ab0592
1 changed files with 51 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/index.php
+51 -48
View File
@@ -6,14 +6,15 @@
<title><?php echo APP_NAME; ?> - Vehicles</title> <title><?php echo APP_NAME; ?> - Vehicles</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-gray-100 min-h-screen"> <body class="theme-page min-h-screen">
<!-- Header --> <!-- Header -->
<header class="bg-white 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 text-gray-800 hover:text-gray-600 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"> <div class="flex items-center space-x-4">
<a href="<?php echo url('/settings'); ?>" class="text-gray-600 hover:text-gray-800"> <a href="<?php echo url('/settings'); ?>" class="theme-text-muted hover:opacity-95">
<i class="bi bi-gear-fill text-2xl"></i> <i class="bi bi-gear-fill text-2xl"></i>
</a> </a>
</div> </div>
@@ -22,28 +23,28 @@
<main class="max-w-7xl mx-auto px-4 py-8"> <main class="max-w-7xl mx-auto px-4 py-8">
<?php if (isset($_SESSION['error'])): ?> <?php if (isset($_SESSION['error'])): ?>
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4"> <div class="bg-red-100 border border-red-400 text-red-700 dark:bg-red-950/40 dark:border-red-800 dark:text-red-200 px-4 py-3 rounded mb-4">
<?php echo htmlspecialchars($_SESSION['error']); unset($_SESSION['error']); ?> <?php echo htmlspecialchars($_SESSION['error']); unset($_SESSION['error']); ?>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php if (isset($_SESSION['success'])): ?> <?php if (isset($_SESSION['success'])): ?>
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4"> <div class="bg-green-100 border border-green-400 text-green-700 dark:bg-green-950/40 dark:border-green-800 dark:text-green-200 px-4 py-3 rounded mb-4">
<?php echo htmlspecialchars($_SESSION['success']); unset($_SESSION['success']); ?> <?php echo htmlspecialchars($_SESSION['success']); unset($_SESSION['success']); ?>
</div> </div>
<?php endif; ?> <?php endif; ?>
<!-- Header with view toggle and add button --> <!-- Header with view toggle and add button -->
<div class="flex justify-between items-center mb-6"> <div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-semibold text-gray-700">My Vehicles</h2> <h2 class="text-xl font-semibold theme-text">My Vehicles</h2>
<div class="flex items-center space-x-3"> <div class="flex items-center space-x-3">
<div class="flex bg-white rounded-lg shadow-sm"> <div class="flex theme-surface rounded-lg shadow-sm">
<a href="<?php echo url('/home?view=grid'); ?>" <a href="<?php echo url('/home?view=grid'); ?>"
class="px-3 py-2 <?php echo $viewMode === 'grid' ? 'bg-blue-600 text-white' : 'text-gray-600 hover:bg-gray-100'; ?> rounded-l-lg transition"> class="px-3 py-2 <?php echo $viewMode === 'grid' ? 'bg-blue-600 text-white' : 'theme-text-muted hover:opacity-95'; ?> rounded-l-lg transition">
<i class="bi bi-grid-3x3-gap-fill"></i> <i class="bi bi-grid-3x3-gap-fill"></i>
</a> </a>
<a href="<?php echo url('/home?view=list'); ?>" <a href="<?php echo url('/home?view=list'); ?>"
class="px-3 py-2 <?php echo $viewMode === 'list' ? 'bg-blue-600 text-white' : 'text-gray-600 hover:bg-gray-100'; ?> rounded-r-lg transition"> class="px-3 py-2 <?php echo $viewMode === 'list' ? 'bg-blue-600 text-white' : 'theme-text-muted hover:opacity-95'; ?> rounded-r-lg transition">
<i class="bi bi-list-ul"></i> <i class="bi bi-list-ul"></i>
</a> </a>
</div> </div>
@@ -57,10 +58,10 @@
<!-- Vehicles Display --> <!-- Vehicles Display -->
<?php if (empty($vehicles)): ?> <?php if (empty($vehicles)): ?>
<div class="bg-white rounded-lg shadow-sm p-12 text-center"> <div class="theme-surface rounded-lg shadow-sm p-12 text-center">
<i class="bi bi-car-front text-6xl text-gray-300 mb-4"></i> <i class="bi bi-car-front text-6xl theme-text-muted mb-4"></i>
<h3 class="text-xl font-semibold text-gray-700 mb-2">No vehicles yet</h3> <h3 class="text-xl font-semibold theme-text mb-2">No vehicles yet</h3>
<p class="text-gray-500 mb-4">Get started by adding your first vehicle</p> <p class="theme-text-muted mb-4">Get started by adding your first vehicle</p>
<button onclick="showAddVehicleModal()" <button onclick="showAddVehicleModal()"
class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition"> class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition">
Add Your First Vehicle Add Your First Vehicle
@@ -71,15 +72,15 @@
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<?php foreach ($vehicles as $vehicle): ?> <?php foreach ($vehicles as $vehicle): ?>
<a href="<?php echo url('/vehicles/' . $vehicle['id']); ?>" <a href="<?php echo url('/vehicles/' . $vehicle['id']); ?>"
class="bg-white rounded-lg shadow-sm hover:shadow-md transition p-6 block"> class="theme-surface rounded-lg shadow-sm hover:shadow-md transition p-6 block">
<div class="flex items-start justify-between mb-3"> <div class="flex items-start justify-between mb-3">
<div class="bg-blue-100 p-3 rounded-lg"> <div class="bg-blue-100 p-3 rounded-lg">
<i class="bi bi-car-front-fill text-blue-600 text-2xl"></i> <i class="bi bi-car-front-fill text-blue-600 text-2xl"></i>
</div> </div>
<span class="text-sm text-gray-500"><?php echo $vehicle['maintenance_count']; ?> records</span> <span class="text-sm theme-text-muted"><?php echo $vehicle['maintenance_count']; ?> records</span>
</div> </div>
<h3 class="text-lg font-semibold text-gray-800 mb-2"><?php echo htmlspecialchars($vehicle['name']); ?></h3> <h3 class="text-lg font-semibold theme-text mb-2"><?php echo htmlspecialchars($vehicle['name']); ?></h3>
<div class="space-y-1 text-sm text-gray-600"> <div class="space-y-1 text-sm theme-text">
<?php if ($vehicle['year'] || $vehicle['make'] || $vehicle['model']): ?> <?php if ($vehicle['year'] || $vehicle['make'] || $vehicle['model']): ?>
<p><?php echo implode(' ', array_filter([$vehicle['year'], $vehicle['make'], $vehicle['model']])); ?></p> <p><?php echo implode(' ', array_filter([$vehicle['year'], $vehicle['make'], $vehicle['model']])); ?></p>
<?php endif; ?> <?php endif; ?>
@@ -87,47 +88,47 @@
<p><i class="bi bi-credit-card-2-front"></i> <?php echo htmlspecialchars($vehicle['license_plate']); ?></p> <p><i class="bi bi-credit-card-2-front"></i> <?php echo htmlspecialchars($vehicle['license_plate']); ?></p>
<?php endif; ?> <?php endif; ?>
<?php if ($vehicle['last_maintenance_date']): ?> <?php if ($vehicle['last_maintenance_date']): ?>
<p class="text-xs text-gray-500 mt-2">Last service: <?php echo date('M d, Y', strtotime($vehicle['last_maintenance_date'])); ?></p> <p class="text-xs theme-text-muted mt-2">Last service: <?php echo date('M d, Y', strtotime($vehicle['last_maintenance_date'])); ?></p>
<?php endif; ?> <?php endif; ?>
</div> </div>
</a> </a>
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>
<?php else: ?> <?php else: ?>
<div class="bg-white rounded-lg shadow-sm overflow-hidden"> <div class="theme-surface rounded-lg shadow-sm overflow-hidden">
<table class="w-full"> <table class="w-full">
<thead class="bg-gray-50 border-b"> <thead class="theme-surface-alt theme-border">
<tr> <tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Vehicle</th> <th class="px-6 py-3 text-left text-xs font-medium theme-text-muted uppercase tracking-wider">Vehicle</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Details</th> <th class="px-6 py-3 text-left text-xs font-medium theme-text-muted uppercase tracking-wider">Details</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">License Plate</th> <th class="px-6 py-3 text-left text-xs font-medium theme-text-muted uppercase tracking-wider">License Plate</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Records</th> <th class="px-6 py-3 text-left text-xs font-medium theme-text-muted uppercase tracking-wider">Records</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Service</th> <th class="px-6 py-3 text-left text-xs font-medium theme-text-muted uppercase tracking-wider">Last Service</th>
</tr> </tr>
</thead> </thead>
<tbody class="divide-y divide-gray-200"> <tbody class="divide-y theme-border">
<?php foreach ($vehicles as $vehicle): ?> <?php foreach ($vehicles as $vehicle): ?>
<tr class="hover:bg-gray-50 cursor-pointer" onclick="window.location='<?php echo url('/vehicles/' . $vehicle['id']); ?>'"> <tr class="theme-surface-alt hover:opacity-95 cursor-pointer" onclick="window.location='<?php echo url('/vehicles/' . $vehicle['id']); ?>'">
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center"> <div class="flex items-center">
<div class="bg-blue-100 p-2 rounded"> <div class="bg-blue-100 p-2 rounded">
<i class="bi bi-car-front-fill text-blue-600"></i> <i class="bi bi-car-front-fill text-blue-600"></i>
</div> </div>
<div class="ml-3"> <div class="ml-3">
<div class="text-sm font-medium text-gray-900"><?php echo htmlspecialchars($vehicle['name']); ?></div> <div class="text-sm font-medium theme-text"><?php echo htmlspecialchars($vehicle['name']); ?></div>
</div> </div>
</div> </div>
</td> </td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600"> <td class="px-6 py-4 whitespace-nowrap text-sm theme-text">
<?php echo implode(' ', array_filter([$vehicle['year'], $vehicle['make'], $vehicle['model']])) ?: '-'; ?> <?php echo implode(' ', array_filter([$vehicle['year'], $vehicle['make'], $vehicle['model']])) ?: '-'; ?>
</td> </td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600"> <td class="px-6 py-4 whitespace-nowrap text-sm theme-text">
<?php echo htmlspecialchars($vehicle['license_plate']) ?: '-'; ?> <?php echo htmlspecialchars($vehicle['license_plate']) ?: '-'; ?>
</td> </td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600"> <td class="px-6 py-4 whitespace-nowrap text-sm theme-text">
<?php echo $vehicle['maintenance_count']; ?> <?php echo $vehicle['maintenance_count']; ?>
</td> </td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600"> <td class="px-6 py-4 whitespace-nowrap text-sm theme-text">
<?php echo $vehicle['last_maintenance_date'] ? date('M d, Y', strtotime($vehicle['last_maintenance_date'])) : '-'; ?> <?php echo $vehicle['last_maintenance_date'] ? date('M d, Y', strtotime($vehicle['last_maintenance_date'])) : '-'; ?>
</td> </td>
</tr> </tr>
@@ -141,51 +142,51 @@
<!-- Add Vehicle Modal --> <!-- Add Vehicle Modal -->
<div id="addVehicleModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> <div id="addVehicleModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div class="bg-white rounded-lg p-6 w-full max-w-md"> <div class="theme-surface rounded-lg p-6 w-full max-w-md">
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold">Add New Vehicle</h3> <h3 class="text-xl font-semibold">Add New Vehicle</h3>
<button onclick="hideAddVehicleModal()" class="text-gray-500 hover:text-gray-700"> <button onclick="hideAddVehicleModal()" class="theme-text-muted hover:opacity-80">
<i class="bi bi-x-lg"></i> <i class="bi bi-x-lg"></i>
</button> </button>
</div> </div>
<form method="POST" action="<?php echo url('/vehicles/add'); ?>"> <form method="POST" action="<?php echo url('/vehicles/add'); ?>">
<div class="space-y-4"> <div class="space-y-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">Name *</label> <label class="block text-sm font-medium theme-text mb-1">Name *</label>
<input type="text" name="name" required <input type="text" name="name" required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> class="w-full px-3 py-2 border theme-border theme-input rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div> </div>
<div class="grid grid-cols-2 gap-4"> <div class="grid grid-cols-2 gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">Year</label> <label class="block text-sm font-medium theme-text mb-1">Year</label>
<input type="text" name="year" <input type="text" name="year"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> class="w-full px-3 py-2 border theme-border theme-input rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">Color</label> <label class="block text-sm font-medium theme-text mb-1">Color</label>
<input type="text" name="color" <input type="text" name="color"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> class="w-full px-3 py-2 border theme-border theme-input rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div> </div>
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">Make</label> <label class="block text-sm font-medium theme-text mb-1">Make</label>
<input type="text" name="make" <input type="text" name="make"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> class="w-full px-3 py-2 border theme-border theme-input rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">Model</label> <label class="block text-sm font-medium theme-text mb-1">Model</label>
<input type="text" name="model" <input type="text" name="model"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> class="w-full px-3 py-2 border theme-border theme-input rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">License Plate</label> <label class="block text-sm font-medium theme-text mb-1">License Plate</label>
<input type="text" name="license_plate" <input type="text" name="license_plate"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> class="w-full px-3 py-2 border theme-border theme-input rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div> </div>
</div> </div>
<div class="flex space-x-3 mt-6"> <div class="flex space-x-3 mt-6">
<button type="button" onclick="hideAddVehicleModal()" <button type="button" onclick="hideAddVehicleModal()"
class="flex-1 px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition"> class="flex-1 px-4 py-2 border theme-border rounded-md theme-text-muted hover:opacity-95 transition">
Cancel Cancel
</button> </button>
<button type="submit" <button type="submit"
@@ -197,6 +198,8 @@
</div> </div>
</div> </div>
<?php $themeSection = 'body'; include __DIR__ . '/partials/theme.php'; ?>
<script> <script>
function showAddVehicleModal() { function showAddVehicleModal() {
document.getElementById('addVehicleModal').classList.remove('hidden'); document.getElementById('addVehicleModal').classList.remove('hidden');