Add 1 files
Browse files- index.html +44 -1
index.html
CHANGED
|
@@ -21,5 +21,48 @@
|
|
| 21 |
}
|
| 22 |
.district.active {
|
| 23 |
transform: translateY(-10px) scale(1.05);
|
| 24 |
-
box-shadow:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 25 |
</html>
|
|
|
|
| 21 |
}
|
| 22 |
.district.active {
|
| 23 |
transform: translateY(-10px) scale(1.05);
|
| 24 |
+
box-shadow: 0 15px 30px rgba(0,0,0,0.3);
|
| 25 |
+
z-index: 20;
|
| 26 |
+
}
|
| 27 |
+
.pulse {
|
| 28 |
+
animation: pulse 2s infinite;
|
| 29 |
+
}
|
| 30 |
+
@keyframes pulse {
|
| 31 |
+
0% { transform: scale(1); }
|
| 32 |
+
50% { transform: scale(1.05); }
|
| 33 |
+
100% { transform: scale(1); }
|
| 34 |
+
}
|
| 35 |
+
#victoria-harbor {
|
| 36 |
+
background: linear-gradient(90deg, rgba(0,119,190,0.3) 0%, rgba(0,119,190,0.1) 50%, rgba(0,119,190,0.3) 100%);
|
| 37 |
+
}
|
| 38 |
+
</style>
|
| 39 |
+
</head>
|
| 40 |
+
<body class="bg-gray-100 font-sans">
|
| 41 |
+
<div class="container mx-auto px-4 py-8">
|
| 42 |
+
<div class="text-center mb-8">
|
| 43 |
+
<h1 class="text-4xl font-bold text-indigo-800 mb-2">Hong Kong Explorer</h1>
|
| 44 |
+
<p class="text-lg text-gray-600">Discover the vibrant districts of Asia's World City</p>
|
| 45 |
+
<div class="mt-4 flex justify-center space-x-4">
|
| 46 |
+
<button id="tour-btn" class="px-4 py-2 bg-indigo-600 text-white rounded-full hover:bg-indigo-700 transition flex items-center">
|
| 47 |
+
<i class="fas fa-map-marked-alt mr-2"></i> Take a Tour
|
| 48 |
+
</button>
|
| 49 |
+
<button id="reset-btn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-full hover:bg-gray-300 transition">
|
| 50 |
+
Reset Map
|
| 51 |
+
</button>
|
| 52 |
+
</div>
|
| 53 |
+
</div>
|
| 54 |
+
|
| 55 |
+
<div id="map-container" class="relative w-full max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
|
| 56 |
+
<!-- Hong Kong Island -->
|
| 57 |
+
<div class="absolute top-10 left-1/4 w-1/3">
|
| 58 |
+
<div id="central-western" class="district absolute top-0 left-0 w-24 h-24 bg-red-200 rounded-lg cursor-pointer flex items-center justify-center text-xs font-medium text-red-800" data-info="Central & Western District - The financial heart of Hong Kong with colonial heritage">
|
| 59 |
+
Central & Western
|
| 60 |
+
</div>
|
| 61 |
+
<div id="wan-chai" class="district absolute top-20 left-20 w-20 h-20 bg-red-300 rounded-lg cursor-pointer flex items-center justify-center text-xs font-medium text-red-900" data-info="Wan Chai - Mix of business and entertainment with the iconic Convention Centre">
|
| 62 |
+
Wan Chai
|
| 63 |
+
</div>
|
| 64 |
+
<div id="eastern" class="district absolute top-40 left-10 w-28 h-20 bg-red-400 rounded-lg cursor-pointer flex items-center justify-center text-xs font-medium text-white" data-info="Eastern District - Residential areas with beautiful coastal scenery">
|
| 65 |
+
Eastern
|
| 66 |
+
</div>
|
| 67 |
+
<div id="southern" class="district absolute top-60 left-0 w-32 h-24 bg-red-500 rounded-lg cursor-pointer flex items-center justify-center text-xs font-medium text-white" data-info="Southern District - Luxury
|
| 68 |
</html>
|