Compare commits
9 Commits
f2423b34a8
...
main
Author | SHA1 | Date | |
---|---|---|---|
881e16b8d7 | |||
5174453261 | |||
be5b561799 | |||
943a51ec5e | |||
ac4268c0c7 | |||
56b717cfab | |||
fc74957bb7 | |||
d88a85233a | |||
09549aabea |
@@ -14,26 +14,30 @@ artists_easter_egg: ", Marie Birner (Couch)"
|
||||
project_quote: "Digital Shadows konfrontiert Besucher*innen mit ihrem digitalen Selbst – kopiert, vermessen, analysiert. Ein Experiment über Datenmacht, Sichtbarkeit und Kontrolle im digitalen Zeitalter."
|
||||
project_quote_attribution: "— Digital Shadows Team"
|
||||
project_description: "Digital Shadows lädt die Teilnehmer*innen ein, Fragen digitaler und physischer Identität, Datensicherheit und Kontrolle zu erleben. In immersiven Zonen, die mit choreografischen Elementen verwoben sind, begegnen Besucher*innen sich selbst gespiegelt, kopiert, vermessen und verlieren sich gleichzeitig in einem System, das mehr über sie weiß, als sie preisgeben wollen. Zwischen Spiel und Analyse, Verbergen und Transparenz entsteht eine Reflexion über Identität im Zeitalter von Gesichtserkennung, Deepfakes und algorithmischer Profilierung. Wie täuscht man eine Kamera? Wie sichtbar möchte ich sein? Wem gehört, was ich hinterlasse, und wer profitiert davon? Dieses Experiment ist ein kollaboratives Unterfangen zwischen Wissenschaft und Kunst, das Macht, Sichtbarkeit und Selbstbestimmung im digitalen Raum greifbar macht. Durch eine Erkundung digitaler Materialität und algorithmischer Intelligenz entfaltet sich eine manchmal absurde, immer unmittelbare Reflexion über unsere Rolle in datengetriebenen Welten, bis wir unserem digitalen Dilemma gegenüberstehen und die Wahl noch immer bei uns liegt."
|
||||
what_to_do_title: "Was tun mit diesen Informationen?"
|
||||
visit_booth_title: "Besuche unseren Stand"
|
||||
visit_booth_description: "Wir freuen uns darauf, dich an unserem Stand in der Post City Linz zu sehen, wo unser Team dir zeigt, was passiert, wenn dein digitaler Schatten allmächtig wird. "
|
||||
jku_link_title: "Zur JKU Informationsseite"
|
||||
what_to_do_title: "Unsere Aktivitäten"
|
||||
find_out_more: "Erfahre mehr"
|
||||
location_postcity: "Wo: Postcity Linz"
|
||||
play_game_title: "Spiele unser Spiel"
|
||||
play_game_title: "Finde die Überwachungskameras"
|
||||
play_game_description: "Schon mal durch Linz gewandert mit dem Ziel, (versteckte) Kameras zu finden? Nun, wenn du so jemand bist, dann ist unser 'Kameras entdecken'-Spiel ideal für dich! "
|
||||
game_link_title: "Zur Spiel-Seite"
|
||||
location_linz: "Wo: überall in Linz"
|
||||
tour_aef_title: "Finden deinen perfekten Partner"
|
||||
tour_aef_description: "Entdecke echte Verbindungen durch unsere fachkundig geführten Touren. <strong>Dein perfekter Partner wartet auf dich.</strong> Bringe deine Freunde als Unterstützung mit und sichere dir noch heute deinen Termin."
|
||||
tour_aef_title: "Anmeldung zu <q>Finde deinen perfekten Partner</q>"
|
||||
tour_aef_description: "Digital Shadows lädt dich ein, Fragen nach digitaler und physischer Identität, Datensicherheit und Kontrolle hautnah zu erleben. In immersiven Zonen mit choreografischen Elementen begegnen dir Spiegelungen, Kopien und Messungen deiner selbst – während du dich zugleich in einem System verlierst, das mehr über dich weiß, als du preisgeben willst.<br /><br/>Zwischen Spiel und Analyse, zwischen Verbergen und Offenlegen entsteht eine eindringliche Reflexion über Identität im Zeitalter von Gesichtserkennung, Deepfakes und algorithmischem Profiling. Wie täuscht man eine Kamera? Wie sichtbar will ich sein? Wem gehören meine digitalen Spuren – und wer profitiert davon?<br /><br />Dieses Experiment, eine Zusammenarbeit von Wissenschaft und Kunst, macht Machtverhältnisse, Sichtbarkeit und Selbstbestimmung im digitalen Raum greifbar. In der Auseinandersetzung mit digitaler Materialität und algorithmischer Intelligenz entfaltet sich ein mitunter absurdes, stets unmittelbares Spiegelbild unserer Rolle in datengetriebenen Welten – bis wir unserem eigenen digitalen Dilemma gegenüberstehen und die Entscheidung noch immer bei uns liegt."
|
||||
tour_register: "Jetzt anmelden"
|
||||
tour_register_title: "Zur Tour anmelden"
|
||||
more_infos: "Mehr Infos"
|
||||
new_header: "Laufende Ausstellung • Performances • Immersive Theater Tour"
|
||||
scientific_background: "Wissenschaftlicher Hintergrund zu Digital Shadows"
|
||||
calendar: "Kalender"
|
||||
cal_options: "Wähle wie du den Kalender anzeigen willst"
|
||||
cal_new_tab: "In neuen Tab öffnen"
|
||||
cal_show_here: "Hier anzeigen <small>(Google Inhalt laden)</small>"
|
||||
|
||||
# Game page
|
||||
game_title: "Wer findet die meisten Kameras?"
|
||||
game_explanation_todo: "Willkommen zu unserem Überwachungsbewusstseinsspiel! Als Teil unserer Digital Shadows Ausstellung beim Ars Electronica Festival haben wir QR-Codes bei Überwachungskameras in ganz Linz platziert. Deine Mission: Entdecke die Kameras, scanne unsere Codes und finde heraus, wie allgegenwärtig öffentliche Überwachung wirklich ist. Wir sind aber nur Menschen – wir haben nur einen kleinen Teil aller Kameras erfasst, die unsere Stadt beobachten. Wer beobachtet wen in unseren öffentlichen Räumen? Die Jagd beginnt jetzt! 🕵️"
|
||||
save_button: "Speichern"
|
||||
amount_participants: "Aktuell gibt es insgesamt %{amount} Teilnehmer (die mindestens 1 Kamera gefunden haben)."
|
||||
amount_participants: "Aktuell gibt es insgesamt %{amount} Teilnehmer:innen (die mindestens 1 Kamera gefunden haben)."
|
||||
cameras_found: "Du hast %{found}/%{total} Kameras gefunden:"
|
||||
highscore_title: "Bestenliste"
|
||||
not_found_title: "ups"
|
||||
@@ -53,9 +57,6 @@ received_characters: "Erhaltene Zeichen"
|
||||
see_ranking: "Sieh deine Platzierung"
|
||||
new_name_title: "Neuer Name!"
|
||||
new_name_message: "Fühlt es sich viel anders an?"
|
||||
footer_text: "Footer "
|
||||
footer_todo: "noch zu vervollständigen"
|
||||
footer_links: "mit Links"
|
||||
impressum: "Impressum"
|
||||
|
||||
# Privacy Policy
|
||||
@@ -102,7 +103,6 @@ data_security_description: "Alle Daten, die zwischen Ihrem Browser und unseren S
|
||||
minors: "Minderjährige"
|
||||
minors_description: "Diese Website darf nur von Personen ab 14 Jahren genutzt werden. Nutzer unter 14 Jahren benötigen die ausdrückliche Einverständniserklärung ihrer Erziehungsberechtigten."
|
||||
data_protection_officer: "Datenschutzbeauftrager"
|
||||
data_protection_officer_contact: "Stabsstelle Datenschutz der Johannes Kepler Universität Linz"
|
||||
data_protection_officer_contact_full: "Stabsstelle Datenschutz der Johannes Kepler Universität Linz<br>Altenberger Straße 69, 4040 Linz<br>+43 732 2468 3802<br>datenschutz@jku.at"
|
||||
data_collection_timing: "Wann werden Daten gesammelt"
|
||||
data_collection_timing_description: "Daten werden gesammelt, wenn die Website besucht wird und QR Codes gescannt werden."
|
||||
@@ -127,10 +127,8 @@ cam_how_it_works: "Wie es funktioniert"
|
||||
cam_tech_setup_title: "Technische Ausstattung"
|
||||
cam_tech_setup_p1: "Das System besteht aus einer Hauptkamera und bis zu 10 kleineren Sensorstationen, die an verschiedenen Festivalstandorten positioniert sind. Diese Kameras erfassen Bilder und nutzen Gesichtserkennung, um Besucher*innen zu identifizieren und zu verfolgen, während sie sich zwischen den Stationen bewegen."
|
||||
cam_tech_setup_p2: "Das System verarbeitet biometrische Merkmale (gespeichert als \"Embeddings\"), Zeitstempel, Standortdaten und optional benutzerzugewiesene Pseudonyme, um zu demonstrieren, wie moderne Überwachungssysteme funktionieren."
|
||||
cam_tech_setup_footer: "Mehrere Standorte im gesamten Festivalgelände"
|
||||
cam_data_processing_title: "Daten<wbr/>verarbeitung"
|
||||
cam_data_processing_p1: "<strong>Wichtig ist, dass die tatsächlichen Bilder nicht gespeichert werden</strong> - nur die extrahierten biometrischen Daten und zugehörigen Metadaten werden verarbeitet und vorübergehend auf einem sicheren Server an der JKU gespeichert."
|
||||
cam_data_processing_footer: "Sicherer Server am JKU Institut für Netzwerke und Sicherheit"
|
||||
cam_festival_details: "Festival-Details"
|
||||
cam_when_where_title: "Wann & Wo"
|
||||
cam_festival_info: "Ars Electronica Festival 2025"
|
||||
|
@@ -14,20 +14,25 @@ artists_easter_egg: ", Marie Birner (Couch)"
|
||||
project_quote: "Digital Shadows confronts visitors with their digital self – copied, measured, analyzed. An experiment on data power, visibility, and control in the digital age."
|
||||
project_quote_attribution: "— Digital Shadows Team"
|
||||
project_description: "Digital Shadows invites the participants to experience questions of digital and physical identity, data security, and control. In immersive zones woven with choreographic elements, visitors encounter themselves mirrored, copied, measured and simultaneously lose themselves in a system that knows more about them than they intend to reveal. Between play and analysis, concealment and transparency, a reflection emerges on identity in the age of facial recognition, deepfakes, and algorithmic profiling. How does one fool a camera? How visible do I want to be? Who owns what I leave behind, and who profits from it? This experiment is a collaborative endeavor between science and art, making power, visibility, and self-determination in digital space tangible. Through an exploration of digital materiality and algorithmic intelligence, a sometimes absurd, always immediate reflection unfolds on our role in data-driven worlds until we face our digital dilemma, and the choice is still ours to make."
|
||||
what_to_do_title: "What to do with this information?"
|
||||
visit_booth_title: "Visit our booth"
|
||||
visit_booth_description: "We will be delighted to see you at our booth in the Post City Linz, where our team will show you, what happens when your Digital Shadow becomes allmighty. "
|
||||
jku_link_title: "Go to JKU Information Page"
|
||||
what_to_do_title: "Our Activities"
|
||||
find_out_more: "Find out more"
|
||||
location_postcity: "Where: Postcity Linz"
|
||||
play_game_title: "Play our game"
|
||||
play_game_description: "Ever wandered through Linz with the aim to find (hidden) cameras? Well, if you are that kind of person than our 'Discover cameras' game will be ideal for you! "
|
||||
game_link_title: "Go to Game Page"
|
||||
location_linz: "Where: all over Linz"
|
||||
tour_aef_title: "Find Your Perfect Partner"
|
||||
tour_aef_description: "Discover meaningful connections through our expertly guided tours. <strong>Your perfect match is waiting.</strong> Bring your friends along for support and book your tour slots today."
|
||||
tour_aef_title: "Registration for <q>Find Your Perfect Partner</q>"
|
||||
tour_aef_description: "Digital Shadows invites you to explore pressing questions about digital and physical identity, data security, and control in an immediate and tangible way. In immersive zones with choreographic elements, you encounter reflections, copies, and measurements of yourself—while at the same time losing yourself in a system that knows more about you than you may wish to reveal.
|
||||
Between play and analysis, between concealment and disclosure, an intense reflection emerges on identity in the age of facial recognition, deepfakes, and algorithmic profiling. How can one deceive a camera? How visible do I want to be? Who owns my digital traces—and who benefits from them?<br /><br />This experiment, a collaboration between science and art, makes power structures, visibility, and self-determination in digital spaces tangible. In engaging with digital materiality and algorithmic intelligence, an at times absurd yet always immediate mirror of our role in data-driven worlds unfolds—until we face our own digital dilemma, with the decision still in our hands"
|
||||
tour_register: "Register now"
|
||||
tour_register_title: "Register a slot"
|
||||
more_infos: "More infos"
|
||||
new_header: "Ongoing Exhibition • Performances • Immersive Tour"
|
||||
scientific_background: "Scientific background to Digital Shadows"
|
||||
calendar: "Calendar"
|
||||
cal_options: "Choose how you'd like to access the calendar"
|
||||
cal_new_tab: "Open in New Tab"
|
||||
cal_show_here: "Show here <small>(load Google content)</small>"
|
||||
|
||||
# Game page
|
||||
game_title: "Who finds the most cameras?"
|
||||
@@ -53,9 +58,6 @@ received_characters: "Received characters"
|
||||
see_ranking: "See your ranking"
|
||||
new_name_title: "New name!"
|
||||
new_name_message: "Does it feel much different?"
|
||||
footer_text: "Footer "
|
||||
footer_todo: "to be completed"
|
||||
footer_links: "with links"
|
||||
impressum: "Impressum"
|
||||
|
||||
# Privacy Policy
|
||||
@@ -63,7 +65,6 @@ privacy_policy: "Privacy Policy"
|
||||
privacy_policy_title: "Privacy Policy"
|
||||
data_controller: "Data controller"
|
||||
data_controller_info: "Johannes Kepler Universität Linz<br>Institut für Netzwerke und Sicherheit<br>Science Park 3, 2nd Floor<br>Altenberger Straße 69, 4040 Linz, Austria<br>https://www.ins.jku.at/<br>+43 732 2468-4120<br>office@digidow.eu<br>VAT identification number (UID) of JKU: ATU57515567"
|
||||
see_impressum: "See the impressum"
|
||||
overview: "Overview"
|
||||
privacy_overview: "This privacy policy explains how we collect and process data on this website, which is part of the <a href='https://www.jku.at/ars-electronica-2025-panic-yes-no/digital-shadows/' target='_blank'>Digital Shadows exhibition of the Ars Electronica Festival 2025</a>."
|
||||
data_we_collect: "Data we collect"
|
||||
@@ -103,7 +104,6 @@ data_security_description: "All data transmitted between your browser and our se
|
||||
minors: "Minors"
|
||||
minors_description: "This website may only be used by persons aged 14 and over. Users under 14 require the express consent of their parents or guardians."
|
||||
data_protection_officer: "Data Protection Officer"
|
||||
data_protection_officer_contact: "Data Protection Office of Johannes Kepler University Linz"
|
||||
data_protection_officer_contact_full: "Data Protection Office of Johannes Kepler University Linz<br>Altenberger Straße 69, 4040 Linz<br>+43 732 2468 3802<br>datenschutz@jku.at"
|
||||
data_collection_timing: "When data is collected"
|
||||
data_collection_timing_description: "Data is collected when the website is visited and QR codes are scanned."
|
||||
|
106
src/index.rs
106
src/index.rs
@@ -30,45 +30,103 @@ pub(super) async fn index(cookies: CookieJar, headers: HeaderMap) -> Markup {
|
||||
}
|
||||
p { (t!("project_description")) }
|
||||
|
||||
h2 { (t!("what_to_do_title")) }
|
||||
|
||||
div.grid.gap-lg.grid-cols-2 {
|
||||
article.col-span-2 {
|
||||
header { (t!("tour_aef_title")) }
|
||||
|
||||
(PreEscaped(t!("tour_aef_description")))
|
||||
|
||||
article {
|
||||
header { (t!("what_to_do_title")) }
|
||||
div class="text-center" {
|
||||
(PreEscaped(t!("new_header")))
|
||||
}
|
||||
a
|
||||
href="https://www.jku.at/ars-electronica-2025-panic-yes-no/digital-shadows/"
|
||||
href="https://ars.electronica.art/panic/de/view/digital-shadows-22a38ddb450c81d08bc4f50a818b0319/"
|
||||
target="_blank"
|
||||
class="btn mt-1 block"
|
||||
role="button"
|
||||
title=(t!("tour_register_title")) { (t!("tour_register")) }
|
||||
|
||||
footer { (t!("location_postcity")) }
|
||||
role="button" {
|
||||
(t!("more_infos"))
|
||||
(PreEscaped(" ↗️"))
|
||||
}
|
||||
}
|
||||
article {
|
||||
header { (t!("play_game_title")) }
|
||||
|
||||
(t!("play_game_description"))
|
||||
|
||||
a href="/game" title=(t!("game_link_title")) { (t!("find_out_more")) }
|
||||
|
||||
footer { (t!("location_linz")) }
|
||||
a
|
||||
href="/game"
|
||||
class="btn mt-1 block"
|
||||
title=(t!("game_link_title"))
|
||||
role="button" { (t!("find_out_more")) }
|
||||
}
|
||||
article {
|
||||
header { (t!("visit_booth_title")) }
|
||||
article.col-span-2 {
|
||||
header { (PreEscaped(t!("tour_aef_title"))) }
|
||||
|
||||
(t!("visit_booth_description"))
|
||||
(PreEscaped(t!("tour_aef_description")))
|
||||
|
||||
a
|
||||
href="https://www.jku.at/ars-electronica-2025-panic-yes-no/digital-shadows/"
|
||||
href="https://reglist24.com/digital-shadows-tour/form"
|
||||
target="_blank"
|
||||
title=(t!("jku_link_title")) { (t!("find_out_more")) }
|
||||
|
||||
footer { (t!("location_postcity")) }
|
||||
class="btn mt-1 block"
|
||||
role="button"
|
||||
title=(t!("tour_register_title")) {
|
||||
(t!("tour_register"))
|
||||
(PreEscaped(" ↗️"))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
a
|
||||
href="https://digidow.eu"
|
||||
target="_blank"
|
||||
class="btn mt-1 block"
|
||||
role="button" { (t!("scientific_background"))(PreEscaped(" ↗️")) }
|
||||
|
||||
|
||||
h2 { (t!("calendar")) }
|
||||
div #calendar-options .calendar-options {
|
||||
p { (t!("cal_options")) }
|
||||
|
||||
a href="https://calendar.google.com/calendar/embed?height=600&wkst=2&ctz=Europe%2FVienna&showPrint=0&showTz=0&showCalendars=0&showTabs=0&showDate=0&showNav=0&showTitle=0&mode=AGENDA&hl=en&src=YjA4NTZlZDUyZDAwNmY3ZTczNTgxYTk2NjI4MjFjMDZhYWJkZjUzMDBkMjZmMDZiOWFiYzg2YWE3YzBhNzFlNkBncm91cC5jYWxlbmRhci5nb29nbGUuY29t&color=%23d50000"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="calendar-link" {
|
||||
(t!("cal_new_tab"))
|
||||
(PreEscaped(" ↗️"))
|
||||
}
|
||||
|
||||
button #embed-calendar .embed-button {
|
||||
(PreEscaped(t!("cal_show_here")))
|
||||
}
|
||||
}
|
||||
|
||||
iframe #google-calendar
|
||||
data-src="https://calendar.google.com/calendar/embed?height=600&wkst=2&ctz=Europe%2FVienna&showPrint=0&showTz=0&showCalendars=0&showTabs=0&showDate=0&showNav=0&showTitle=0&mode=AGENDA&hl=en&src=YjA4NTZlZDUyZDAwNmY3ZTczNTgxYTk2NjI4MjFjMDZhYWJkZjUzMDBkMjZmMDZiOWFiYzg2YWE3YzBhNzFlNkBncm91cC5jYWxlbmRhci5nb29nbGUuY29t&color=%23d50000"
|
||||
width="100%"
|
||||
height="600"
|
||||
frameborder="0"
|
||||
scrolling="no"
|
||||
class="hidden" {}
|
||||
|
||||
script {
|
||||
(PreEscaped(r#"
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const calendarOptions = document.getElementById('calendar-options');
|
||||
const embedButton = document.getElementById('embed-calendar');
|
||||
const iframe = document.getElementById('google-calendar');
|
||||
|
||||
embedButton.addEventListener('click', function() {
|
||||
// Hide the options
|
||||
calendarOptions.classList.add('hidden');
|
||||
|
||||
// Load the iframe by setting src from data-src
|
||||
const src = iframe.getAttribute('data-src');
|
||||
iframe.setAttribute('src', src);
|
||||
|
||||
// Show the iframe
|
||||
iframe.classList.remove('hidden');
|
||||
});
|
||||
});
|
||||
"#))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -131,9 +189,9 @@ pub(super) async fn cam(cookies: CookieJar, headers: HeaderMap) -> Markup {
|
||||
p { (t!("cam_legal_description")) }
|
||||
|
||||
div.legal-docs {
|
||||
a href="/static/dsb-request.pdf" target="_blank" title=(t!("cam_legal_request_title")) { (t!("cam_legal_request")) }
|
||||
a href="/static/dsb-request.pdf" target="_blank" title=(t!("cam_legal_request_title")) { (t!("cam_legal_request"))(PreEscaped(" ↗️"))}
|
||||
" | "
|
||||
a href="/static/dsb-accept.pdf" target="_blank" title=(t!("cam_legal_decision_title")) { (t!("cam_legal_decision")) }
|
||||
a href="/static/dsb-accept.pdf" target="_blank" title=(t!("cam_legal_decision_title")) { (t!("cam_legal_decision"))(PreEscaped(" ↗️")) }
|
||||
}
|
||||
})
|
||||
|
||||
|
@@ -41,7 +41,7 @@ impl Backend {
|
||||
WHERE rank <= COALESCE(
|
||||
(SELECT rank FROM ranked_clients ORDER BY rank LIMIT 1 OFFSET 9),
|
||||
(SELECT MAX(rank) FROM ranked_clients)
|
||||
)
|
||||
) AND amount > 0
|
||||
ORDER BY rank, name"
|
||||
)
|
||||
.fetch_all(db)
|
||||
|
@@ -22,6 +22,44 @@
|
||||
body {
|
||||
hyphens: auto;
|
||||
}
|
||||
.calendar-options {
|
||||
border: 2px solid #ccc;
|
||||
color: white;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
background-color: gray;
|
||||
border-radius: 5px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.calendar-link {
|
||||
display: inline-block;
|
||||
background-color: #4285f4;
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.embed-button {
|
||||
background-color: #34a853;
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
margin: 10px;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/** Headline Styles */
|
||||
h1 {
|
||||
|
@@ -19,35 +19,58 @@ function setLanguageCookie() {
|
||||
|
||||
/** [ph] */
|
||||
function switchTheme() {
|
||||
let isLight = true;
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches){
|
||||
isLight = false
|
||||
}
|
||||
|
||||
const html = document.documentElement
|
||||
const switchTheme = document.getElementById('theme_switcher')
|
||||
// Define the SVG icons first
|
||||
const os_default = '<svg viewBox="0 0 16 16"><path fill="currentColor" d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/></svg>'
|
||||
const sun = '<svg viewBox="0 0 16 16"><path fill="currentColor" d="M8 11a3 3 0 1 1 0-6a3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8a4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/></svg>'
|
||||
const moon = '<svg viewBox="0 0 16 16"><g fill="currentColor"><path d="M6 .278a.768.768 0 0 1 .08.858a7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277c.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316a.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71C0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278zM4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063c-4.61 0-8.343-3.714-8.343-8.29c0-1.167.242-2.278.681-3.286z"/><path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/></g></svg>'
|
||||
const removeTooltip = (timeInt = 1750) => {
|
||||
setTimeout(()=>{
|
||||
switchTheme.blur()
|
||||
},timeInt)
|
||||
|
||||
// Check for saved theme preference first
|
||||
let savedTheme = localStorage.getItem('theme-preference');
|
||||
let isLight = true;
|
||||
|
||||
if (savedTheme) {
|
||||
// Use saved preference
|
||||
isLight = savedTheme === 'light';
|
||||
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
// Fall back to OS preference only if no saved theme
|
||||
isLight = false;
|
||||
}
|
||||
|
||||
switchTheme.innerHTML = os_default
|
||||
//html.setAttribute('data-theme', 'auto')
|
||||
switchTheme.setAttribute('data-tooltip', 'os theme')
|
||||
switchTheme.focus()
|
||||
removeTooltip(3000)
|
||||
const html = document.documentElement;
|
||||
const switchTheme = document.getElementById('theme_switcher');
|
||||
|
||||
switchTheme.addEventListener('click', (e)=> {
|
||||
e.preventDefault()
|
||||
isLight = !isLight
|
||||
html.setAttribute('data-theme', isLight? 'light':'dark')
|
||||
switchTheme.innerHTML = isLight? sun : moon
|
||||
switchTheme.setAttribute('data-tooltip', `theme ${isLight?'light':'dark'}`)
|
||||
removeTooltip()
|
||||
})
|
||||
const removeTooltip = (timeInt = 1750) => {
|
||||
setTimeout(() => {
|
||||
switchTheme.blur();
|
||||
}, timeInt);
|
||||
};
|
||||
|
||||
// Apply the theme immediately if we have a saved preference
|
||||
if (savedTheme && savedTheme !== 'auto') {
|
||||
html.setAttribute('data-theme', savedTheme);
|
||||
switchTheme.innerHTML = isLight ? sun : moon;
|
||||
switchTheme.setAttribute('data-tooltip', `theme ${savedTheme}`);
|
||||
} else {
|
||||
// Default OS theme
|
||||
switchTheme.innerHTML = os_default;
|
||||
switchTheme.setAttribute('data-tooltip', 'os theme');
|
||||
}
|
||||
|
||||
switchTheme.focus();
|
||||
removeTooltip(3000);
|
||||
|
||||
switchTheme.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
isLight = !isLight;
|
||||
const newTheme = isLight ? 'light' : 'dark';
|
||||
|
||||
// Save preference
|
||||
localStorage.setItem('theme-preference', newTheme);
|
||||
|
||||
html.setAttribute('data-theme', newTheme);
|
||||
switchTheme.innerHTML = isLight ? sun : moon;
|
||||
switchTheme.setAttribute('data-tooltip', `theme ${newTheme}`);
|
||||
removeTooltip();
|
||||
});
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user