186 lines
8.6 KiB
TypeScript
186 lines
8.6 KiB
TypeScript
import { APP_STYLES } from "./app-assets.js";
|
|
|
|
export function htmlPage(): string {
|
|
return `<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>mapix</title>
|
|
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" />
|
|
<link rel="stylesheet" href="/vendor/leaflet/leaflet.css" />
|
|
<style>
|
|
${APP_STYLES}
|
|
</style>
|
|
</head>
|
|
<body data-theme="light">
|
|
<div class="top-right-controls">
|
|
<button class="secondary theme-toggle" id="theme-toggle" type="button" aria-label="Switch to dark mode">
|
|
<span class="button-icon" id="theme-toggle-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M8 1.8V3.1M8 12.9v1.3M3.1 3.1l.9.9M12 12l.9.9M1.8 8H3.1M12.9 8h1.3M3.1 12.9l.9-.9M12 4l.9-.9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
|
|
<circle cx="8" cy="8" r="3.2" stroke="currentColor" stroke-width="1.4"/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<button class="secondary route-toggle" id="route-toggle" type="button" aria-label="Hide route line" aria-pressed="true">
|
|
<span class="button-icon" id="route-toggle-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M3 11.5 6.2 8.2c.4-.4 1-.5 1.5-.2l1.1.7c.5.3 1.1.2 1.5-.2L13 5.8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<circle cx="3" cy="11.5" r="1" fill="currentColor"/>
|
|
<circle cx="13" cy="5.8" r="1" fill="currentColor"/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<main>
|
|
<section class="map-panel">
|
|
<div id="map"></div>
|
|
</section>
|
|
</main>
|
|
|
|
<aside>
|
|
<section class="card panel-stack">
|
|
<div class="panel-toolbar">
|
|
<button class="secondary panel-collapse" id="sidebar-collapse" type="button" aria-label="Collapse left panel">
|
|
<span class="button-icon" id="sidebar-collapse-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M9.5 4 5.5 8l4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<img
|
|
class="panel-logo"
|
|
id="panel-logo"
|
|
src="/assets/logo-light.png"
|
|
alt="mapix"
|
|
width="156"
|
|
height="66"
|
|
/>
|
|
</div>
|
|
<label>
|
|
Share URL
|
|
<input
|
|
id="share-url"
|
|
placeholder="https://cloud.example.com/index.php/s/..."
|
|
spellcheck="false"
|
|
autocomplete="off"
|
|
/>
|
|
</label>
|
|
<div class="button-row">
|
|
<button class="primary" id="load-share" type="button">
|
|
<span class="button-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M8 2v7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
|
|
<path d="M5 6.5 8 9.5 11 6.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M3 12.5h10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
|
|
</svg>
|
|
</span>
|
|
<span>Import</span>
|
|
</button>
|
|
<button class="danger" id="cancel-share" type="button" disabled>
|
|
<span class="button-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
|
|
</svg>
|
|
</span>
|
|
<span>Stop</span>
|
|
</button>
|
|
</div>
|
|
<div class="status-row">
|
|
<span class="spinner" id="activity-spinner" aria-hidden="true"></span>
|
|
<div class="status" id="share-status">Ready to import.</div>
|
|
</div>
|
|
<div class="progress" aria-label="Loading progress">
|
|
<div class="progress-bar" aria-hidden="true">
|
|
<div class="progress-fill" id="progress-fill"></div>
|
|
</div>
|
|
<div class="progress-meta">
|
|
<span id="progress-text">0 / 0</span>
|
|
<span id="progress-detail">ready</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card photo-card">
|
|
<h2>Photos</h2>
|
|
<small id="photo-count" class="muted">0 photos</small>
|
|
<div id="photo-list" class="list">
|
|
<div class="empty-state" id="empty-state">No images imported yet.</div>
|
|
</div>
|
|
</section>
|
|
</aside>
|
|
|
|
<section class="card timeline" aria-label="Photo timeline">
|
|
<div class="timeline-summary" id="timeline-summary">No photos imported yet.</div>
|
|
<div class="timeline-body">
|
|
<div class="timeline-chart" id="timeline-chart">
|
|
<div class="timeline-bars" id="timeline-bars"></div>
|
|
<div class="timeline-selection" id="timeline-selection"></div>
|
|
<div class="timeline-brush" id="timeline-brush"></div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-actions">
|
|
<button class="secondary panel-collapse" id="timeline-clear" type="button" aria-label="Reset range" disabled>
|
|
<span class="button-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M13 8a5 5 0 1 1-1.5-3.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M11.8 2.9v3.2H8.6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<button class="secondary panel-collapse" id="timeline-collapse" type="button" aria-label="Collapse timeline">
|
|
<span class="button-icon" id="timeline-collapse-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M4 6.5 8 10.5l4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="overlay" id="overlay" aria-hidden="true">
|
|
<button class="overlay-nav overlay-prev" id="overlay-prev" type="button" aria-label="Previous photo">
|
|
<span class="button-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M9.5 4 5.5 8l4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<a class="overlay-action overlay-download" id="overlay-download" href="#" download aria-label="Download photo">
|
|
<span class="button-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M8 2v7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
|
|
<path d="M5 6.5 8 9.5 11 6.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M3 12.5h10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
|
|
</svg>
|
|
</span>
|
|
</a>
|
|
<button class="close overlay-close" id="close-overlay" type="button" aria-label="Close photo">x</button>
|
|
<div class="overlay-card" id="overlay-card">
|
|
<div class="overlay-media" id="overlay-media">
|
|
<div class="overlay-loading" id="overlay-loading" aria-live="polite" aria-atomic="true">
|
|
<span class="spinner active" aria-hidden="true"></span>
|
|
<strong id="overlay-loading-text">Loading full-size image...</strong>
|
|
</div>
|
|
<img id="overlay-image" alt="" />
|
|
</div>
|
|
<footer class="overlay-caption" id="overlay-caption">
|
|
<strong id="overlay-title">Photo</strong>
|
|
</footer>
|
|
</div>
|
|
<button class="overlay-nav overlay-next" id="overlay-next" type="button" aria-label="Next photo">
|
|
<span class="button-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M6.5 4 10.5 8l-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<script src="/vendor/leaflet/leaflet.js"></script>
|
|
<script type="module" src="/client/app.js"></script>
|
|
</body>
|
|
</html>`;
|
|
}
|