summaryrefslogtreecommitdiff
path: root/views/pages/global-map.html
diff refs
from: back
to: back
| flip
diff options
context:
space:
mode:
Diffstat (limited to 'views/pages/global-map.html')
-rw-r--r--views/pages/global-map.html83
1 files changed, 47 insertions, 36 deletions
diff --git a/views/pages/global-map.html b/views/pages/global-map.html
index 4b17d16..4b07bd2 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -3,6 +3,8 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="og:title" content="{{ .L.GlobalMap.Header }}">
+ <meta name="og:description" content="{{ .L.GlobalMap.Description }}">
<title>{{ .L.GlobalMap.Header }} // SAYA TODAY</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
{{ block "header" . }}{{ end }}
@@ -12,7 +14,7 @@
<link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css">
</head>
-<body data-theme="ram" class="font-andika text-main-hard overflow-hidden bg-interlocked-hexagons h-[100dvh] flex flex-row ar-lt-0.8:flex-col">
+<body data-theme="ram" class="font-andika text-main-hard overflow-hidden bg-interlocked-hexagons h-dvh">
<script>
function switchTheme(theme) {
@@ -22,14 +24,15 @@
case "olive": theme = "lettuce"; break;
case "lettuce": theme = "night"; break;
case "night": theme = "ram"; break;
- case "ram": theme = "olive"; break;
+ case "ram": theme = "lilac"; break;
+ case "lilac": theme = "olive"; break;
}
}
localStorage.setItem('theme', theme);
document.body.setAttribute('data-theme', theme);
}
- const savedTheme = localStorage.getItem('theme') || 'ram';
+ const savedTheme = localStorage.getItem('theme') || 'lilac';
switchTheme(savedTheme);
</script>
@@ -41,32 +44,38 @@
}
</script>
- <div id="sidebar" class="bg-sidebar flex sticky flex-col ar-gt-0.8:items-center shadow-2xl z-20 w-[5rem] ar-lt-0.8:w-[100dvw] h-[100dvh] ar-lt-0.8:h-[8dvh]">
- <div class="logo-custom ar-lt-0.8:hidden text-sidebar font-andika font-extrabold text-center relative z-20">
- saya.today
- </div>
- <div class="text-[3rem] ar-lt-0.8:text-[5dvh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1dvw] flex flex-col ar-lt-0.8:flex-row gap-0 relative z-20">
- <a href="/{{ .Lang }}" class="w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh]">
- <i class="fas fa-home flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
+ <div id="sidebar" class="bg-sidebar block fixed shadow-[0_0_0.4rem_black] z-1001 w-fit h-auto">
+ <div class="text-[3rem] flex flex-col gap-0 relative z-1001">
+ <a href="./" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false">
+ <i class="fas fa-circle-left flex w-18 h-18 content-center text-center text-sidebar"></i>
+ </a>
+ <a href="/{{ .Lang }}" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false">
+ <i class="fas fa-home flex w-18 h-18 content-center text-center text-sidebar"></i>
</a>
- <a href="/{{ .Lang }}/blog" class="w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh]">
- <i class="fas fa-search flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
+ <a href="/{{ .Lang }}/blog" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false">
+ <i class="fas fa-search flex w-18 h-18 content-center text-center text-sidebar"></i>
</a>
- <a href="/{{ .Lang }}/map" class="w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh]">
- <i class="fas fa-map flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
+ <a href="/{{ .Lang }}/map" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false">
+ <i class="fas fa-map flex w-18 h-18 content-center text-center text-sidebar"></i>
+ </a>
+ <div id="toolbar-theme-button" onclick="toggleThemeWheel();" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false">
+ <i id="toolbar-theme-button-content" class="fas fa-swatchbook flex w-18 h-18 content-center text-center text-sidebar"></i>
+ </div>
+ <a href="/{{ .Lang }}/user" id="sidebar-user-button" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false">
+ <i onclick="return changeUrl('/{{ .Lang }}/user');" class="fas fa-user flex w-18 h-18 content-center text-center text-sidebar"></i>
</a>
- <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook flex w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i>
</div>
<div class="theme-wheel" id="theme-wheel">
<div class="theme-icon" data-theme="olive"></div>
<div class="theme-icon" data-theme="lettuce"></div>
<div class="theme-icon" data-theme="night"></div>
<div class="theme-icon" data-theme="ram"></div>
+ <div class="theme-icon" data-theme="lilac"></div>
<div class="theme-pin"></div>
</div>
</div>
- <div id="map-container" class="bg-background-dark flex z-10 w-[calc(100dvw-5rem)] ar-lt-0.8:w-[100dvw] h-[100dvh] ar-lt-0.8:h-[92dvh]"></div>
+ <div id="map-container" class="bg-background-dark flex z-10 w-full h-full"></div>
<script src="https://f003.backblazeb2.com/file/sayana-static/libs/htmx/2.0.6/htmx.min.js"></script>
<script src="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.js"></script>
@@ -74,7 +83,7 @@
<script>
const themeWheel = document.getElementById('theme-wheel');
- const themeButton = document.getElementById('theme-button');
+ const themeButton = document.getElementById('toolbar-theme-button');
const themeIcons = document.querySelectorAll('.theme-icon');
const themeWheelRadius = convertRemToPixels(6);
@@ -190,7 +199,7 @@
themeWheel.addEventListener('mouseleave', hideThemeWheel);
document.addEventListener('click', (e) => {
- if (!themeWheel.contains(e.target) && e.target !== themeButton) {
+ if (!themeWheel.contains(e.target) && e.target !== themeButton && !e.target.classList.contains("toolbar-theme-button-content")) {
hideThemeWheel();
}
});
@@ -223,43 +232,45 @@
function initLocationMap() {
map = L.map('map-container').setView([{{ .MapLocationLat }}, {{ .MapLocationLong }}], 4);
- L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
- maxZoom: 18,
- attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+ L.tileLayer('https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png', {
+ maxZoom: 20,
+ attribution: '<a href="https://github.com/cyclosm/cyclosm-cartocss-style/releases" title="CyclOSM - Open Bicycle render">CyclOSM</a> | Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+ zoomControl: false
+ }).addTo(map);
+
+ L.control.zoom({
+ position: 'topright'
}).addTo(map);
map.addLayer(markers);
}
- function stringToColor(str) {
+ function markerToHsl(str, newCoef) {
let hash = 0;
- for (let i = 0; i < str.length; i++) {
+ for (let i = 0; i < str.length / 2; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
+ hash = str.charCodeAt(str.length - i - 1) + ((hash << 5) - hash);
+ hash %= 360;
}
- let color = '#';
- for (let i = 0; i < 3; i++) {
- const value = (hash >> (i * 8)) & 0xFF;
- color += ('00' + value.toString(16)).substr(-2);
- }
-
- return color;
+ return [hash, (20 + newCoef * 80).toFixed(0), (20 + newCoef * 75).toFixed(0)];
}
- function mapAddMarker(x, y, relativeErrorMeters = 0, title = "", link = "", thumbnail = "") {
- const titleColor = stringToColor(title);
+ function mapAddMarker(x, y, relativeErrorMeters = 0, title = "", link = "", thumbnail = "", newCoef = 1) {
+ const [h, s, l] = markerToHsl(title, newCoef);
+ const color = `hsl(${h} ${s}% ${l}%)`;
if (relativeErrorMeters != 0) {
var circle = L.circle([x, y], {
- color: titleColor,
- fillColor: titleColor,
+ color: color,
+ fillColor: color,
fillOpacity: 0.15,
radius: relativeErrorMeters
}).addTo(map);
}
var marker = L.marker([x, y], {
- icon: createCustomIcon(titleColor),
+ icon: createCustomIcon(color),
title: title,
}).bindPopup(`
<div class="flex flex-row justify-center justify-items-center">
@@ -273,7 +284,7 @@
document.addEventListener('DOMContentLoaded', () => {
initLocationMap();
{{- range .MapMarkers }}
- mapAddMarker({{ .Lat }}, {{ .Long }}, {{ .AccuracyMeters }}, {{ .Title }}, {{ .PageLink }}, {{ .Thumbnail }});
+ mapAddMarker({{ .Lat }}, {{ .Long }}, {{ .AccuracyMeters }}, {{ .Title }}, {{ .PageLink }}, {{ .Thumbnail }}, {{ fdiv .Index (len $.MapMarkers) }});
{{- end }}
});
generated by cgitext v1.3.1+17 (git 2.54.0) at 2026-09-10 14:37:25 +0000