|
- <!DOCTYPE html>
- <html lang="en">
-
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Reslevis Map Viewer</title>
- <script src="https://cdn.tailwindcss.com"></script>
- <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
- <script src="https://cdn.tailwindcss.com"></script>
- <script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>
- <script>
- tailwind.config = {
- theme: {
- extend: {
- colors: {
- brand: '#008EED',
- primary: '#008EED',
- }
- }
- }
- }
- </script>
- </head>
-
- <body class="p-6 font-sans">
-
- <div class=" w-full flex align-items-center justify-content-center text-center justify-between">
- <!-- Floor Selector -->
- <select id="floor-select" class="select select-bordered border-[#008EED] select-primary w-full max-w-xs">
- <option value="0" selected>Floor 0</option>
- <option value="1">Floor 1</option>
- </select>
-
- <!-- Legend -->
- <div class="flex items-center justify-center p-4 rounded-lg">
- <div class="flex items-center gap-2 m-2">
- <span class="text-[#008EED] text-[30px]">
- <span class="iconify" data-icon="lsicon:online-gateway-outline"></span>
- </span>
- <span class="text-sm font-medium">Gateway</span>
- </div>
- <div class="flex items-center gap-2 m-2">
- <span class="text-[#008EED] text-2xl">
- <span class="iconify text-[30px]" data-icon="heroicons:signal"></span>
- </span>
- <span class="text-sm font-medium">Beacon</span>
- </div>
- </div>
-
- </div>
-
- <!-- Floor 0 Container -->
- <div id="container-floor-0" class="floor-container">
- <!-- Map Wrapper: defined aspect ratio, relative for positioning icons -->
- <div id="wrapper-floor-0" class="relative w-full bg-[#efefef] rounded overflow-hidden aspect-[2982/1592]">
- <img src="map-floor0.svg" alt="Floor 0 Map" class="absolute inset-0 w-full h-full object-contain z-10">
- <div id="overlay-floor-0" class="absolute inset-0 z-20 pointer-events-none w-full h-full"></div>
- </div>
- </div>
-
- <!-- Floor 1 Container -->
- <div id="container-floor-1" class="floor-container hidden">
- <div id="wrapper-floor-1" class="relative w-full bg-[#efefef] rounded overflow-hidden aspect-[2982/1592]">
- <img src="map-floor1.svg" alt="Floor 1 Map" class="absolute inset-0 w-full h-full object-contain z-10">
- <div id="overlay-floor-1" class="absolute inset-0 z-20 pointer-events-none w-full h-full"></div>
- </div>
- </div>
-
-
- <script src="map.js?v=2"></script>
- </body>
-
- </html>
|
