regoTab/undefined
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Parking Allocation Dashboard</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>10 <style>11 .floor-card {12 transition: all 0.3s ease;13 }14 .floor-card:hover {15 transform: translateY(-3px);16 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);17 }18 .parking-spot {19 width: 100px;20 height: 50px;21 border: 1px solid #ccc;22 display: flex;23 align-items: center;24 justify-content: center;25 margin: 5px;26 cursor: pointer;27 transition: all 0.2s ease;28 }29 .parking-spot:hover {30 transform: scale(1.05);31 }32 .occupied {33 background-color: #fca5a5;34 }35 .available {36 background-color: #86efac;37 }38 .reserved {39 background-color: #fcd34d;40 }41 </style>42</head>43<body class="bg-gray-100">44 <div class="container mx-auto px-4 py-8">45 <header class="mb-8">46 <h1 class="text-3xl font-bold text-indigo-800">Parking Allocation System</h1>47 <div class="flex items-center mt-2">48 <div class="w-4 h-4 bg-red-300 mr-2"></div><span class="text-sm mr-4">Occupied</span>49 <div class="w-4 h-4 bg-green-300 mr-2"></div><span class="text-sm mr-4">Available</span>50 <div class="w-4 h-4 bg-yellow-300 mr-2"></div><span class="text-sm">Reserved</span>51 </div>52 </header>53 54 <div class="mb-8">55 <div class="flex space-x-4 mb-4">56 <button class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 focus:outline-none" id="bpBtn">BP Parking</button>57 <button class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 focus:outline-none" id="hdBtn">HD Parking</button>58 </div>59 </div>60 61 <div id="bpParking" class="parking-section">62 <h2 class="text-2xl font-semibold mb-4 text-indigo-700">BP Parking Allocation</h2>63 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">64 <!-- Floors 1-13 will be generated here -->65 </div>66 </div>67 68 <div id="hdParking" class="parking-section hidden">69 <h2 class="text-2xl font-semibold mb-4 text-indigo-700">HD Parking Allocation</h2>70 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">71 <!-- HD Floors will be generated here -->72 </div>73 </div>74 75 <div id="spotDetailsModal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center">76 <div class="bg-white p-6 rounded-lg max-w-md w-full">77 <h3 class="text-xl font-bold mb-4">Parking Spot Details</h3>78 <div id="spotDetailsContent"></div>79 <button class="mt-4 px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700" id="closeModal">Close</button>80 </div>81 </div>82 </div>83 84 <script>85 // Sample data structure - in a real app this would come from an API86 const parkingData = {87 bp: {88 floors: [89 {90 floor: "1st Floor",91 spots: [92 { number: "B1-77", occupied: true, tenant: "NDLOVU, A", unit: "101", reg: "HJ 67 MT GP" },93 { number: "B1-125", occupied: true, tenant: "MAMPURU, KB", unit: "102", reg: "KX 34 YV GP" },94 // Add all BP parking spots here...95 ]96 },97 // Add all BP floors here...98 ]99 },100 hd: {101 floors: [102 {103 floor: "1st Floor",104 spots: [105 { number: "B1-32", occupied: true, tenant: "DLUNGWANE, SW", unit: "114", reg: "JVK 023 GP" },106 // Add all HD parking spots here...107 ]108 },109 // Add all HD floors here...110 ]111 }112 };113 114 function renderParkingFloors(data, containerId) {115 const container = document.querySelector(`#${containerId} > div`);116 container.innerHTML = '';117 118 data.floors.forEach(floor => {119 const floorCard = document.createElement('div');120 floorCard.className = 'floor-card bg-white p-4 rounded-lg shadow';121 122 const floorTitle = document.createElement('h3');123 floorTitle.className = 'text-lg font-semibold mb-3 text-indigo-600';124 floorTitle.textContent = floor.floor;125 126 const spotsContainer = document.createElement('div');127 spotsContainer.className = 'flex flex-wrap';128 129 floor.spots.forEach(spot => {130 const spotElement = document.createElement('div');131 spotElement.className = `parking-spot rounded ${spot.occupied ? 'occupied' : 'available'}`;132 spotElement.textContent = spot.number;133 spotElement.onclick = () => showSpotDetails(spot);134 135 spotsContainer.appendChild(spotElement);136 });137 138 floorCard.appendChild(floorTitle);139 floorCard.appendChild(spotsContainer);140 container.appendChild(floorCard);141 });142 }143 144 function showSpotDetails(spot) {145 const modal = document.getElementById('spotDetailsModal');146 const content = document.getElementById('spotDetailsContent');147 148 let html = `149 <p><strong>Spot Number:</strong> ${spot.number}</p>150 <p><strong>Status:</strong> ${spot.occupied ? 'Occupied' : 'Available'}</p>151 `;152 153 if (spot.occupied) {154 html += `155 <p><strong>Tenant:</strong> ${spot.tenant}</p>156 <p><strong>Unit:</strong> ${spot.unit}</p>157 <p><strong>Registration:</strong> ${spot.reg}</p>158 `;159 }160 161 content.innerHTML = html;162 modal.classList.remove('hidden');163 }164 165 document.getElementById('closeModal').onclick = () => {166 document.getElementById('spotDetailsModal').classList.add('hidden');167 };168 169 document.getElementById('bpBtn').onclick = () => {170 document.getElementById('bpParking').classList.remove('hidden');171 document.getElementById('hdParking').classList.add('hidden');172 renderParkingFloors(parkingData.bp, 'bpParking');173 };174 175 document.getElementById('hdBtn').onclick = () => {176 document.getElementById('hdParking').classList.remove('hidden');177 document.getElementById('bpParking').classList.add('hidden');178 renderParkingFloors(parkingData.hd, 'hdParking');179 };180 181 // Initialize with BP parking182 renderParkingFloors(parkingData.bp, 'bpParking');183 feather.replace();184 </script>185</body>186</html>