| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Map & Directions | TimeSands</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@300;400;600&display=swap'); |
| body { font-family: 'Poppins', sans-serif; } |
| .glass-effect { |
| backdrop-filter: blur(10px); |
| background: rgba(15, 23, 42, 0.7); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| #map { |
| height: 400px; |
| width: 100%; |
| border-radius: 1rem; |
| } |
| </style> |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" /> |
| <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script> |
| </head> |
| <body class="bg-slate-900 text-white"> |
| <div class="container mx-auto px-6 py-16"> |
| <a href="index.html" class="mb-4 inline-flex items-center text-amber-400 hover:text-amber-300 transition"> |
| <i data-feather="arrow-left" class="mr-2"></i> Back to Home |
| </a> |
| <h1 class="text-4xl md:text-5xl font-bold mb-12 text-center font-playfair"> |
| Map & <span class="text-amber-400">Directions</span> |
| </h1> |
| |
| <div class="max-w-6xl mx-auto"> |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| <div class="lg:col-span-2"> |
| <div id="map" class="mb-8"></div> |
| <div class="glass-effect p-6 rounded-xl"> |
| <h2 class="text-2xl font-bold mb-4 text-amber-400">Montreal Main Event Location</h2> |
| <p class="mb-4">Place des Festivals, Quartier des Spectacles</p> |
| <p class="mb-6">175 Sainte-Catherine St W, Montreal, QC H2X 3X5</p> |
| <div class="flex flex-wrap gap-4"> |
| <a href="#" class="flex items-center text-amber-400"> |
| <i data-feather="navigation" class="mr-2"></i> |
| <span>Get Directions</span> |
| </a> |
| <a href="#" class="flex items-center text-amber-400"> |
| <i data-feather="download" class="mr-2"></i> |
| <span>Download Map PDF</span> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="glass-effect p-6 rounded-xl mb-6"> |
| <h2 class="text-2xl font-bold mb-4 text-amber-400">Transportation</h2> |
| <div class="space-y-4"> |
| <div> |
| <h3 class="font-bold flex items-center"> |
| <i data-feather="train" class="mr-2 text-blue-400"></i> |
| Metro |
| </h3> |
| <p class="text-slate-300">Saint-Laurent (Green Line) or Place-des-Arts (Green Line)</p> |
| </div> |
| <div> |
| <h3 class="font-bold flex items-center"> |
| <i data-feather="bus" class="mr-2 text-green-400"></i> |
| Bus |
| </h3> |
| <p class="text-slate-300">Routes 15, 55, 129, 435</p> |
| </div> |
| <div> |
| <h3 class="font-bold flex items-center"> |
| <i data-feather="car" class="mr-2 text-amber-400"></i> |
| Parking |
| </h3> |
| <p class="text-slate-300">Underground parking at Complexe Desjardins (5 min walk)</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="glass-effect p-6 rounded-xl"> |
| <h2 class="text-xl font-bold mb-4">Access Points</h2> |
| <ul class="space-y-3"> |
| <li class="flex items-start"> |
| <div class="bg-amber-500 rounded-full w-5 h-5 flex items-center justify-center mt-1 mr-3 flex-shrink-0"> |
| <span class="text-xs font-bold text-black">1</span> |
| </div> |
| <p>Main Entrance - Sainte-Catherine St</p> |
| </li> |
| <li class="flex items-start"> |
| <div class="bg-amber-500 rounded-full w-5 h-5 flex items-center justify-center mt-1 mr-3 flex-shrink-0"> |
| <span class="text-xs font-bold text-black">2</span> |
| </div> |
| <p>Family Entrance - De Maisonneuve Blvd</p> |
| </li> |
| <li class="flex items-start"> |
| <div class="bg-amber-500 rounded-full w-5 h-5 flex items-center justify-center mt-1 mr-3 flex-shrink-0"> |
| <span class="text-xs font-bold text-black">3</span> |
| </div> |
| <p>VIP Entrance - Balmoral St</p> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| feather.replace(); |
| |
| |
| const map = L.map('map').setView([45.508888, -73.561668], 16); |
| |
| L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { |
| attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' |
| }).addTo(map); |
| |
| L.marker([45.508888, -73.561668]).addTo(map) |
| .bindPopup('TimeSands Hourglass Location') |
| .openPopup(); |
| </script> |
| </body> |
| </html> |
