Spaces:
Running
Running
File size: 9,304 Bytes
b7526df 30d120a b7526df 30d120a ab1a99b 30d120a ab1a99b 18eff1d ab1a99b ca06711 2e3af7c 952ce0f a8c2b37 ab1a99b b7526df ab1a99b b7526df 30d120a b7526df f27cf5f b7526df f27cf5f b7526df f27cf5f b7526df f27cf5f b7526df f27cf5f b7526df f27cf5f b7526df f27cf5f b7526df f27cf5f b7526df ab1a99b b7526df a8c2b37 b7526df f27cf5f b7526df f27cf5f b7526df f27cf5f b7526df | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 | <!DOCTYPE html>
<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> |