Spaces:
Running
Running
You are a master programmer in HTML, CSS and JS. Create an app that consist in showing interactive special markers on a map, with the following requirements:
af133a9
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HoldSpot</title> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <!-- Top UI --> | |
| <div class="top-ui"> | |
| <input type="text" id="search-bar" placeholder="Search markers..."> | |
| <div class="token-display"> | |
| <span class="liquidity-token"><i class="fas fa-tint"></i> <span id="liquidity-count">0</span></span> | |
| <span class="value-token"><i class="fas fa-coins"></i> <span id="value-count">0</span></span> | |
| <span class="engagement-token"><i class="fas fa-fire"></i> <span id="engagement-count">0</span></span> | |
| </div> | |
| </div> | |
| <!-- Map Container --> | |
| <div id="map"></div> | |
| <!-- Bottom UI --> | |
| <div class="bottom-ui"> | |
| <button id="dashboard-btn" class="nav-btn"><i class="fas fa-chart-line"></i></button> | |
| <button id="battle-btn" class="nav-btn"><i class="fas fa-fist-raised"></i></button> | |
| <button id="shop-btn" class="nav-btn"><i class="fas fa-store"></i></button> | |
| <button id="add-marker-btn" class="nav-btn"><i class="fas fa-plus-circle"></i></button> | |
| </div> | |
| <!-- Modals --> | |
| <div id="marker-modal" class="modal"> | |
| <div class="modal-content"> | |
| <h3 id="marker-title"></h3> | |
| <p id="marker-body"></p> | |
| <div class="marker-stats"> | |
| <span>Favorites: <span id="marker-favorites">0</span></span> | |
| <span>Likes: <span id="marker-likes">0</span></span> | |
| <span>Z-Depth: <span id="marker-zdepth">0</span></span> | |
| </div> | |
| <div class="action-buttons"> | |
| <button id="link-btn" class="action-btn"><i class="fas fa-link"></i></button> | |
| <button id="mail-btn" class="action-btn"><i class="fas fa-envelope"></i></button> | |
| <button id="fav-btn" class="action-btn"><i class="far fa-heart"></i></button> | |
| <button id="like-btn" class="action-btn"><i class="far fa-thumbs-up"></i></button> | |
| <button id="share-btn" class="action-btn"><i class="fas fa-share-alt"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="add-marker-modal" class="modal"> | |
| <div class="modal-content"> | |
| <input type="text" id="marker-title-input" placeholder="Title (max 50 chars)" maxlength="50"> | |
| <textarea id="marker-body-input" placeholder="Description (max 500 chars)" maxlength="500"></textarea> | |
| <select id="marker-subcategory"> | |
| <!-- Options will be populated by JS --> | |
| </select> | |
| <input type="email" id="marker-email" placeholder="Email (optional)"> | |
| <input type="url" id="marker-link" placeholder="Link (optional)"> | |
| <button id="create-marker-btn">Create Marker</button> | |
| </div> | |
| </div> | |
| <div id="dashboard-modal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="tabs"> | |
| <button class="tab-btn active" data-tab="metrics">Metrics</button> | |
| <button class="tab-btn" data-tab="exchange">Exchange House</button> | |
| <button class="tab-btn" data-tab="archetypes">Archetypes</button> | |
| </div> | |
| <div class="tab-content"> | |
| <div id="metrics-tab" class="tab-pane active"> | |
| <!-- Metrics content will be populated by JS --> | |
| </div> | |
| <div id="exchange-tab" class="tab-pane"> | |
| <!-- Exchange content will be populated by JS --> | |
| </div> | |
| <div id="archetypes-tab" class="tab-pane"> | |
| <!-- Archetypes content will be populated by JS --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="shop-modal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="tabs"> | |
| <button class="tab-btn active" data-tab="boosters">Boosters</button> | |
| <button class="tab-btn" data-tab="potions">Potions</button> | |
| <button class="tab-btn" data-tab="unlockers">Unlockers</button> | |
| </div> | |
| <div class="tab-content"> | |
| <div id="boosters-tab" class="tab-pane active"> | |
| <!-- Boosters content will be populated by JS --> | |
| </div> | |
| <div id="potions-tab" class="tab-pane"> | |
| <!-- Potions content will be populated by JS --> | |
| </div> | |
| <div id="unlockers-tab" class="tab-pane"> | |
| <!-- Unlockers content will be populated by JS --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="battle-modal" class="modal"> | |
| <div class="modal-content"> | |
| <div id="battle-info"> | |
| <!-- Battle info will be populated by JS --> | |
| </div> | |
| <button id="start-battle-btn">Start Battle</button> | |
| </div> | |
| </div> | |
| <!-- Notification Container --> | |
| <div id="notification-container"></div> | |
| <!-- Scripts --> | |
| <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> | |
| <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js"></script> | |
| <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore-compat.js"></script> | |
| <script src="script.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |