86 lines
5.3 KiB
HTML
86 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<meta name="theme-color" content="#ffffff">
|
|
<title>Карта</title>
|
|
<script src="../common/telegram.js"></script>
|
|
<script src="../common/eruda.min.js?v15"></script>
|
|
<link rel="stylesheet" href="./styles/main.css?v15">
|
|
</head>
|
|
<body>
|
|
<section id="block" aria-live="polite">
|
|
<div id="loader"></div>
|
|
<h3>Загрузка карты</h3>
|
|
<p>0/6 загружено...</p>
|
|
</section>
|
|
|
|
<main id="app" aria-label="Карта университета">
|
|
<section id="map" aria-label="Карта здания">
|
|
<div id="controls">
|
|
<button id="floor-current" class="floor-current" type="button" aria-expanded="false">
|
|
<span>2 этаж</span>
|
|
<svg aria-hidden="true" viewBox="0 -960 960 960"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>
|
|
</button>
|
|
<div id="floor-select" class="floor-select hidden" aria-label="Выбор этажа">
|
|
<button type="button" data-floor="1">1 этаж</button>
|
|
<button type="button" data-floor="2" class="active">2 этаж</button>
|
|
<button type="button" data-floor="3">3 этаж</button>
|
|
<button type="button" data-floor="4">4 этаж</button>
|
|
<button type="button" data-floor="5">5 этаж</button>
|
|
<button type="button" data-floor="6">6 этаж</button>
|
|
</div>
|
|
</div>
|
|
<div id="wr" aria-live="polite"></div>
|
|
<div id="map-message" class="map-message hidden"></div>
|
|
</section>
|
|
|
|
<section id="bottom-panel" aria-label="Поиск и навигация">
|
|
<nav id="mode-switch" aria-label="Режим карты">
|
|
<button id="search-mode" type="button" class="active" aria-selected="true">Поиск</button>
|
|
<button id="navigator-mode" type="button" aria-selected="false">Навигатор</button>
|
|
</nav>
|
|
|
|
<section id="search-panel" class="panel-card" aria-labelledby="search-mode">
|
|
<p id="search-title" class="panel-title">Напиши название аудитории ниже</p>
|
|
<div class="field-row">
|
|
<svg aria-hidden="true" viewBox="0 -960 960 960"><path d="M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 294q122-112 181-203.5T720-552q0-109-69.5-178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 106Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Zm0-480Z"/></svg>
|
|
<input id="room-search" type="text" autocomplete="off" inputmode="search" placeholder="Писать сюда..." aria-label="Поиск аудитории">
|
|
</div>
|
|
<div id="search-hints" class="hints" aria-live="polite"></div>
|
|
</section>
|
|
|
|
<section id="navigator-panel" class="panel-card hidden" aria-labelledby="navigator-mode">
|
|
<p class="panel-title">Построй маршрут до аудитории</p>
|
|
<div class="navigator-fields">
|
|
<div class="field-row">
|
|
<svg aria-hidden="true" viewBox="0 -960 960 960"><path d="m120-120 80-80h560l80 80H120Zm80-160v-160h560v160H200Zm0-240v-160h560v160H200Zm0-240v-80h560v80H200Z"/></svg>
|
|
<input id="route-start" type="text" autocomplete="off" inputmode="search" placeholder="Аудитория возле тебя..." aria-label="Начальная аудитория">
|
|
</div>
|
|
<div id="route-start-hints" class="hints" aria-live="polite"></div>
|
|
<div class="field-row">
|
|
<svg aria-hidden="true" viewBox="0 -960 960 960"><path d="M480-80 160-400l56-56 224 224v-528h80v528l224-224 56 56L480-80Z"/></svg>
|
|
<input id="route-end" type="text" autocomplete="off" inputmode="search" placeholder="Аудитория которая тебе нужна..." aria-label="Конечная аудитория">
|
|
</div>
|
|
<div id="route-end-hints" class="hints" aria-live="polite"></div>
|
|
</div>
|
|
<button id="route-submit" class="primary-button" type="button">Найти</button>
|
|
<p id="route-feedback" class="feedback" aria-live="polite"></p>
|
|
</section>
|
|
|
|
<section id="route-card" class="route-card hidden" aria-live="polite">
|
|
<div class="route-card-head">
|
|
<p id="route-summary" class="route-summary" aria-label="Маршрут"></p>
|
|
<button id="route-hide" type="button" aria-expanded="true">Скрыть</button>
|
|
</div>
|
|
<strong id="route-title" class="route-title">Маршрут</strong>
|
|
<div id="route-steps" class="route-steps"></div>
|
|
</section>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="./js/map.js?v15"></script>
|
|
<script>window.Telegram.WebApp.expand(); window.ZatupsMap.init();</script>
|
|
</body>
|
|
</html>
|