81 lines
3.2 KiB
HTML
81 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Tile Server UI preview</title>
|
||
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5.6.1/dist/maplibre-gl.css" />
|
||
<link rel="stylesheet" href="/src/TileServer.Api/wwwroot/css/demo.css" />
|
||
<style>
|
||
#map { background: #d8d2c4; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="map"></div>
|
||
<header class="hud hud--top">
|
||
<div class="brand">
|
||
<span class="brand__mark" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" width="22" height="22">
|
||
<rect x="2" y="2" width="9" height="9" rx="1.6" fill="currentColor" opacity="0.95"/>
|
||
<rect x="13" y="2" width="9" height="9" rx="1.6" fill="currentColor" opacity="0.55"/>
|
||
<rect x="2" y="13" width="9" height="9" rx="1.6" fill="currentColor" opacity="0.55"/>
|
||
<rect x="13" y="13" width="9" height="9" rx="1.6" fill="currentColor" opacity="0.28"/>
|
||
</svg>
|
||
</span>
|
||
<span class="brand__text">
|
||
<strong>Tile Server</strong>
|
||
<span>OSM · MapLibre · Geofabrik</span>
|
||
</span>
|
||
</div>
|
||
<div class="toolbar">
|
||
<label class="field field--inline">
|
||
<span>Источник</span>
|
||
<select><option>Центральный федеральный округ</option></select>
|
||
</label>
|
||
<label class="field field--inline">
|
||
<span>Стиль</span>
|
||
<select><option>osm-bright</option></select>
|
||
</label>
|
||
<span class="pill pill--ok">готово</span>
|
||
<button type="button" class="btn btn--accent">Синхронизировать</button>
|
||
<a class="link" href="#">OpenAPI</a>
|
||
</div>
|
||
</header>
|
||
<form class="hud hud--goto">
|
||
<div class="goto__head">
|
||
<div>
|
||
<h1>Камера</h1>
|
||
<p class="coords">55.75580°<span class="coords__sep">·</span>37.61730°<span class="coords__sep">z</span>14.00</p>
|
||
</div>
|
||
</div>
|
||
<div class="presets">
|
||
<button type="button" class="preset">Москва</button>
|
||
<button type="button" class="preset">ЦФО</button>
|
||
<button type="button" class="preset preset--ghost">По выгрузке</button>
|
||
</div>
|
||
<div class="goto__row">
|
||
<label class="field"><span>Широта</span><input value="55.75580" /></label>
|
||
<label class="field"><span>Долгота</span><input value="37.61730" /></label>
|
||
<label class="field field--zoom"><span>Зум</span><input value="14.00" /></label>
|
||
</div>
|
||
<button type="submit" class="btn btn--accent btn--block">Перейти</button>
|
||
</form>
|
||
<aside class="hud hud--status is-ready">
|
||
<details open>
|
||
<summary><span class="worker__pulse"></span> Воркер</summary>
|
||
<dl>
|
||
<div><dt>Задача</dt><dd>ожидание</dd></div>
|
||
<div><dt>Источник</dt><dd>готово</dd></div>
|
||
<div><dt>Собран</dt><dd>21.09.2026, 23:25</dd></div>
|
||
</dl>
|
||
</details>
|
||
</aside>
|
||
<div class="maplibregl-ctrl-top-right">
|
||
<div class="maplibregl-ctrl maplibregl-ctrl-group">
|
||
<button type="button">+</button>
|
||
<button type="button">−</button>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|