Created
June 6, 2025 12:04
-
-
Save MACT14203/0559078a4c403308853b9ef8b33bd985 to your computer and use it in GitHub Desktop.
Untitled
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Mapa de Estacionamientos</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| font-family: sans-serif; | |
| background-color: #f0f0f0; | |
| color: #222; | |
| } | |
| .container { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .car-icon { | |
| position: absolute; | |
| width: 150px; | |
| pointer-events: none; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .car-icon.visible { | |
| opacity: 1; | |
| } | |
| .horizontal { | |
| transform: rotate(0deg); | |
| } | |
| .vertical { | |
| transform: rotate(90deg); | |
| } | |
| .spot-label { | |
| position: absolute; | |
| font-size: 14px; | |
| font-weight: bold; | |
| padding: 2px 4px; | |
| background: rgba(255, 255, 255, 0.7); | |
| border: 1px solid #aaa; | |
| border-radius: 4px; | |
| transform: translate(-50%, -50%); | |
| pointer-events: none; | |
| } | |
| .occupied-label { | |
| background: rgba(255, 0, 0, 0.7); | |
| color: white; | |
| } | |
| #reset { | |
| margin-top: 20px; | |
| padding: 10px 20px; | |
| font-size: 16px; | |
| } | |
| #legend { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| background: #fff; | |
| padding: 15px 20px; | |
| border: 2px solid #444; | |
| border-radius: 10px; | |
| box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2); | |
| font-size: 18px; | |
| z-index: 1000; | |
| } | |
| #legend span { | |
| font-weight: bold; | |
| } | |
| #available-count { | |
| color: green; | |
| } | |
| #occupied-count { | |
| color: red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="legend"> | |
| 🚗 <span id="available-count">8</span> disponibles<br> | |
| ❌ <span id="occupied-count">0</span> ocupados | |
| </div> | |
| <div class="container" id="map-container"> | |
| <img src="https://i.imgur.com/yWi977D.jpeg" usemap="#image-map" alt="Mapa de Parking" /> | |
| <map name="image-map"> | |
| <area shape="rect" coords="37,412,185,313" onclick="toggleCar(1, 37, 313, 148, 99, 'horizontal')" href="#" alt="1"> | |
| <area shape="rect" coords="285,285,376,421" onclick="toggleCar(2, 285, 285, 91, 136, 'vertical')" href="#" alt="2"> | |
| <area shape="rect" coords="286,143,375,284" onclick="toggleCar(3, 286, 143, 89, 141, 'vertical')" href="#" alt="3"> | |
| <area shape="rect" coords="286,1,376,143" onclick="toggleCar(4, 286, 1, 90, 142, 'vertical')" href="#" alt="4"> | |
| <area shape="rect" coords="36,184,184,251" onclick="toggleCar(5, 36, 184, 148, 67, 'horizontal')" href="#" alt="5"> | |
| <area shape="rect" coords="36,118,185,182" onclick="toggleCar(6, 36, 118, 149, 64, 'horizontal')" href="#" alt="6"> | |
| <area shape="rect" coords="36,60,183,115" onclick="toggleCar(7, 36, 60, 147, 55, 'horizontal')" href="#" alt="7"> | |
| <area shape="rect" coords="37,0,183,59" onclick="toggleCar(8, 37, 0, 146, 59, 'horizontal')" href="#" alt="8"> | |
| </map> | |
| </div> | |
| <br> | |
| <button id="reset" onclick="resetParking()">Resetear Estacionamiento</button> | |
| <script> | |
| const totalSpots = 8; | |
| const occupiedSpots = new Set(); | |
| function updateLegend() { | |
| document.getElementById("available-count").textContent = totalSpots - occupiedSpots.size; | |
| document.getElementById("occupied-count").textContent = occupiedSpots.size; | |
| } | |
| function toggleCar(id, x, y, w, h, orientation) { | |
| const container = document.getElementById("map-container"); | |
| const existingCar = document.getElementById(`car-${id}`); | |
| const existingLabel = document.getElementById(`label-${id}`); | |
| if (existingCar) { | |
| existingCar.remove(); | |
| existingLabel.classList.remove("occupied-label"); | |
| occupiedSpots.delete(id); | |
| } else { | |
| const img = document.createElement("img"); | |
| img.src = "https://i.imgur.com/skmdG9w.png"; | |
| img.className = `car-icon ${orientation} visible`; | |
| img.id = `car-${id}`; | |
| const offsetX = w / 2 - 75; | |
| const offsetY = h / 2 - 75; | |
| img.style.left = `${x + offsetX}px`; | |
| img.style.top = `${y + offsetY}px`; | |
| container.appendChild(img); | |
| const label = document.getElementById(`label-${id}`); | |
| if (label) label.classList.add("occupied-label"); | |
| occupiedSpots.add(id); | |
| } | |
| updateLegend(); | |
| } | |
| function resetParking() { | |
| const icons = document.querySelectorAll(".car-icon"); | |
| icons.forEach(icon => icon.remove()); | |
| occupiedSpots.clear(); | |
| document.querySelectorAll(".spot-label").forEach(label => label.classList.remove("occupied-label")); | |
| updateLegend(); | |
| } | |
| function initSpotLabels() { | |
| const data = [ | |
| [1, 37, 313, 148, 99], | |
| [2, 285, 285, 91, 136], | |
| [3, 286, 143, 89, 141], | |
| [4, 286, 1, 90, 142], | |
| [5, 36, 184, 148, 67], | |
| [6, 36, 118, 149, 64], | |
| [7, 36, 60, 147, 55], | |
| [8, 37, 0, 146, 59] | |
| ]; | |
| const container = document.getElementById("map-container"); | |
| data.forEach(([id, x, y, w, h]) => { | |
| const label = document.createElement("div"); | |
| label.className = "spot-label"; | |
| label.id = `label-${id}`; | |
| label.textContent = id; | |
| label.style.left = `${x + w / 2}px`; | |
| label.style.top = `${y + h / 2}px`; | |
| container.appendChild(label); | |
| }); | |
| } | |
| window.onload = () => { | |
| initSpotLabels(); | |
| updateLegend(); | |
| }; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment