added main page

This commit is contained in:
cabbbyy
2025-08-11 16:01:33 +08:00
parent 65e1322918
commit 27f40ce999

52
index.html Normal file
View File

@@ -0,0 +1,52 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Myatt Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Meta Info -->
<meta name="description" content="Myatt Map Manuscript">
<meta property="og:title" content="Myatt Map">
<meta property="og:description" content="Myatt Map Manuscript">
<meta property="og:url" content="https://map.rchou.org">
<meta property="og:type" content="website">
<meta property="og:image" content="https://maps.rchou.org/images/pfp.jpg">
<!-- Map -->
<link
href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css"
rel="stylesheet"
/>
<!-- Favicon -->
<link rel="stylesheet" href="style.css" />
<link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon/favicon-16x16.png">
<link rel="manifest" href="./favicon/site.webmanifest">
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
</head>
<body>
<!-- Map -->
<div id="map"></div>
<!-- Lightbox overlay -->
<div id="overlay">
<img id="overlay-img" alt="Expanded view">
</div>
<!-- Legend -->
<div id="legend">
<h4 id="legend-header">Legend</h4>
<div><span class="legend-color" style="background:red"></span> Places</div>
<div><span class="legend-color" style="background:#FF8DA1"></span> Activites</div>
<div><span class="legend-color" style="background:#000080"></span> Restaurants</div>
</div>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
<script src="pins.js"></script>
<script src="script.js"></script>
</body>
</html>