Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Formosa Blue - Deployment Map</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" /> | |
| <style> | |
| #map { | |
| height: 600px; | |
| width: 100%; | |
| border-radius: 1rem; | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .map-icon { | |
| background-color: #1a4b8c; | |
| border-radius: 50%; | |
| border: 3px solid white; | |
| width: 20px; | |
| height: 20px; | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased bg-secondary text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 left-0 right-0 bg-gray-900 bg-opacity-90 backdrop-blur-sm z-50 py-3 px-6 shadow-md"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <a href="index.html" class="flex items-center"> | |
| <img src="https://live.staticflickr.com/65535/54802034845_729ff8d37d_b.jpg" alt="Formosa Blue Logo" class="h-10 mr-3 rounded-full"> | |
| <span class="text-xl font-bold">Formosa <span class="text-primary">Blue</span></span> | |
| </a> | |
| <div class="hidden md:flex space-x-8 items-center"> | |
| <a href="index.html" class="text-white hover:text-blue-400 transition">Home</a> | |
| <a href="map.html" class="text-blue-400 font-medium">Deployment Map</a> | |
| <a href="index.html#mission" class="text-white hover:text-blue-400 transition">Our Mission</a> | |
| <a href="#about" class="text-white hover:text-blue-400 transition">About</a> | |
| <a href="#technology" class="text-white hover:text-blue-400 transition">Technology</a> | |
| <a href="https://www.youtube.com/@FormosaBlue" target="_blank" class="text-white hover:text-red-500 transition"> | |
| Our Youtube Page | |
| </a> | |
| </div> | |
| <button class="md:hidden"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Map Section --> | |
| <section class="py-16 px-6 bg-gray-900 pt-24"> | |
| <div class="container mx-auto"> | |
| <div class="text-center mb-12" data-aos="fade-up"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Our <span class="text-primary">Deployment</span> Map</h1> | |
| <p class="text-xl text-accent max-w-3xl mx-auto"> | |
| Track our active cleanup robots across Taiwan's coastline | |
| </p> | |
| </div> | |
| <div class="bg-gray-800 p-6 rounded-xl" data-aos="fade-up"> | |
| <div id="map"></div> | |
| </div> | |
| <div class="mt-12 grid md:grid-cols-4 gap-6"> | |
| <div class="bg-gray-800 p-6 rounded-xl" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="map-icon mr-4"></div> | |
| <h3 class="text-xl font-semibold">Taichung West Coast 1</h3> | |
| </div> | |
| <p class="text-blue-100">Soon to be active</p> | |
| <p class="text-blue-100 mt-2">Goal: 50kg of debris</p> | |
| </div> | |
| <div class="bg-gray-800 p-6 rounded-xl" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="map-icon mr-4"></div> | |
| <h3 class="text-xl font-semibold">Taichung West Coast 2</h3> | |
| </div> | |
| <p class="text-blue-100">Soon to be active</p> | |
| <p class="text-blue-100 mt-2">Goal: 50kg of debris</p> | |
| </div> | |
| <div class="bg-gray-800 p-6 rounded-xl" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="map-icon mr-4"></div> | |
| <h3 class="text-xl font-semibold">Downtown Taichung City</h3> | |
| </div> | |
| <p class="text-blue-100">Soon to be active</p> | |
| <p class="text-blue-100 mt-2">Goal: 100 kg of debris</p> | |
| </div> | |
| <div class="bg-gray-800 p-6 rounded-xl" data-aos="fade-up" data-aos-delay="400"> | |
| <div class="flex items-center mb-4"> | |
| <div class="map-icon mr-4"></div> | |
| <h3 class="text-xl font-semibold">North Taichung (Lipao Amusement Park) </h3> | |
| </div> | |
| <p class="text-blue-100">Soon to be active</p> | |
| <p class="text-blue-100 mt-2">Goal: 100 kg of debris</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Formosa Blue</h3> | |
| <p class="text-blue-100"> | |
| High school innovators creating sustainable solutions for ocean cleanup. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="index.html" class="text-blue-100 hover:text-white transition">Home</a></li> | |
| <li><a href="map.html" class="text-blue-100 hover:text-white transition">Deployment Map</a></li> | |
| <li><a href="#about" class="text-blue-100 hover:text-white transition">About</a></li> | |
| <li><a href="#technology" class="text-blue-100 hover:text-white transition">Technology</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Connect</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-blue-100 hover:text-white transition">Instagram</a></li> | |
| <li><a href="#" class="text-blue-100 hover:text-white transition">Twitter</a></li> | |
| <li><a href="#" class="text-blue-100 hover:text-white transition">LinkedIn</a></li> | |
| <li><a href="https://www.youtube.com/@FormosaBlue" target="_blank" class="text-blue-100 hover:text-white transition">YouTube</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Newsletter</h4> | |
| <p class="text-blue-100 mb-4">Stay updated with our progress</p> | |
| <div class="flex"> | |
| <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg text-gray-900 w-full"> | |
| <button class="bg-blue-600 px-4 py-2 rounded-r-lg hover:bg-blue-700 transition"> | |
| <i data-feather="send"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800 text-center text-blue-100"> | |
| <p>© 2025 Formosa Blue. All rights reserved. Created by high school students for a cleaner ocean.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize map | |
| const map = L.map('map').setView([24.3, 120.6], 10); | |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' | |
| }).addTo(map); | |
| // Add markers for robot locations | |
| const locations = [ | |
| { name: "Taichung West Coast 1", coords: [24.25, 120.48], collected: "50 kg" }, | |
| { name: "Taichung West Coast 2", coords: [24.28, 120.52], collected: "50 kg" }, | |
| { name: "Central Taichung", coords: [24.15, 120.65], collected: "100 kg" }, | |
| { name: "North Taichung", coords: [24.35, 120.7], collected: "100 kg" } | |
| ]; | |
| locations.forEach(loc => { | |
| const marker = L.marker(loc.coords).addTo(map) | |
| .bindPopup(` | |
| <div class="font-bold text-blue-600">${loc.name}</div> | |
| <div class="text-sm">Goal: ${loc.collected}</div> | |
| `); | |
| marker.on('mouseover', function() { | |
| this.openPopup(); | |
| }); | |
| }); | |
| // Initialize AOS animation library | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |