refactor: split server page assets
This commit is contained in:
2164
src/server/app-assets.ts
Normal file
2164
src/server/app-assets.ts
Normal file
File diff suppressed because it is too large
Load Diff
162
src/server/page-template.ts
Normal file
162
src/server/page-template.ts
Normal file
@@ -0,0 +1,162 @@
|
||||
import { APP_STYLES, CLIENT_SCRIPT } 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="stylesheet"
|
||||
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
||||
crossorigin=""
|
||||
/>
|
||||
<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">
|
||||
<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>
|
||||
</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">
|
||||
<div class="overlay-card">
|
||||
<header>
|
||||
<strong id="overlay-title">Photo</strong>
|
||||
<button class="close" id="close-overlay" type="button" aria-label="Close photo">
|
||||
x
|
||||
</button>
|
||||
</header>
|
||||
<div class="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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
||||
<script type="module">
|
||||
${CLIENT_SCRIPT}
|
||||
</script>
|
||||
</body>
|
||||
</html>`;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user