Add progressive web app companion for cross-platform access
Vite + TypeScript PWA that mirrors the Android app's core features: - Pre-processed shelter data (build-time UTM33N→WGS84 conversion) - Leaflet map with shelter markers, user location, and offline tiles - Canvas compass arrow (ported from DirectionArrowView.kt) - IndexedDB shelter cache with 7-day staleness check - Service worker with CacheFirst tiles and precached app shell - i18n for en, nb, nn (ported from Android strings.xml) - iOS/Android compass handling with low-pass filter - Respects user map interaction (no auto-snap on pan/zoom) - Build revision cache-breaker for reliable SW updates Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
46365b713b
commit
e8428de775
12051 changed files with 1799735 additions and 0 deletions
374
pwa/src/styles/main.css
Normal file
374
pwa/src/styles/main.css
Normal file
|
|
@ -0,0 +1,374 @@
|
|||
/**
|
||||
* Dark emergency theme — same colors as the Android app (colors.xml).
|
||||
* Mobile-first responsive design.
|
||||
*/
|
||||
|
||||
/* --- Reset & base --- */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: #1A1A2E;
|
||||
color: #ECEFF1;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
/* --- App shell layout --- */
|
||||
#app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* --- Status bar --- */
|
||||
#status-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #16213E;
|
||||
padding: 6px 12px;
|
||||
min-height: 36px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#status-text {
|
||||
flex: 1;
|
||||
color: #B0BEC5;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#refresh-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #B0BEC5;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#refresh-btn:hover {
|
||||
color: #ECEFF1;
|
||||
}
|
||||
|
||||
/* --- Main content area (map or compass) --- */
|
||||
#main-content {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
#map-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#compass-container {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #0F0F23;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#compass-container.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#compass-distance {
|
||||
position: absolute;
|
||||
bottom: 32px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#compass-address {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 18px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* --- Toggle FAB --- */
|
||||
#toggle-fab {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: #FF6B35;
|
||||
border: none;
|
||||
color: #FFFFFF;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#toggle-fab:hover {
|
||||
background: #E55A2B;
|
||||
}
|
||||
|
||||
/* --- Reset view button --- */
|
||||
#reset-view-btn {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
bottom: 16px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #16213E;
|
||||
border: 2px solid #B0BEC5;
|
||||
color: #B0BEC5;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#reset-view-btn.visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#reset-view-btn:hover {
|
||||
background: #1A1A2E;
|
||||
color: #ECEFF1;
|
||||
border-color: #ECEFF1;
|
||||
}
|
||||
|
||||
/* --- No-cache warning banner --- */
|
||||
#no-cache-banner {
|
||||
display: none;
|
||||
align-items: center;
|
||||
background: #E65100;
|
||||
padding: 6px 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#no-cache-banner.visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#no-cache-banner span {
|
||||
flex: 1;
|
||||
color: #FFFFFF;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#cache-retry-btn {
|
||||
background: none;
|
||||
border: 1px solid #FFFFFF;
|
||||
color: #FFFFFF;
|
||||
font-size: 12px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* --- Bottom sheet --- */
|
||||
#bottom-sheet {
|
||||
background: #1A1A2E;
|
||||
padding: 12px;
|
||||
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Selected shelter summary */
|
||||
#selected-shelter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#mini-arrow {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#selected-shelter-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#selected-shelter-address {
|
||||
color: #ECEFF1;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#selected-shelter-details {
|
||||
color: #90A4AE;
|
||||
font-size: 13px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* Shelter list items */
|
||||
#shelter-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.shelter-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.shelter-item:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.shelter-item.selected {
|
||||
border-color: #FF6B35;
|
||||
background: rgba(255, 107, 53, 0.1);
|
||||
}
|
||||
|
||||
.shelter-item-address {
|
||||
color: #ECEFF1;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.shelter-item-details {
|
||||
color: #90A4AE;
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* --- Loading overlay --- */
|
||||
#loading-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 2000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
#loading-spinner {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 4px solid rgba(255, 255, 255, 0.2);
|
||||
border-top-color: #FF6B35;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
#loading-text {
|
||||
color: #FFFFFF;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
padding: 0 32px;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
#loading-button-row {
|
||||
display: none;
|
||||
gap: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
#loading-button-row button {
|
||||
padding: 8px 20px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#loading-skip-btn {
|
||||
background: transparent;
|
||||
border: 1px solid #FFFFFF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
#loading-ok-btn {
|
||||
background: #FF6B35;
|
||||
border: none;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* --- Shelter marker icons --- */
|
||||
.shelter-marker {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* --- Leaflet overrides for dark theme --- */
|
||||
.leaflet-control-zoom a {
|
||||
background: #16213E !important;
|
||||
color: #ECEFF1 !important;
|
||||
border-color: #2a2a4e !important;
|
||||
}
|
||||
|
||||
.leaflet-control-attribution {
|
||||
background: rgba(26, 26, 46, 0.8) !important;
|
||||
color: #90A4AE !important;
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
.leaflet-control-attribution a {
|
||||
color: #B0BEC5 !important;
|
||||
}
|
||||
|
||||
.leaflet-popup-content-wrapper {
|
||||
background: #16213E !important;
|
||||
color: #ECEFF1 !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.leaflet-popup-tip {
|
||||
background: #16213E !important;
|
||||
}
|
||||
|
||||
.leaflet-popup-close-button {
|
||||
color: #B0BEC5 !important;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue