diff --git a/public/css/launcher.css b/public/css/launcher.css index 83832c4..d2864a7 100644 --- a/public/css/launcher.css +++ b/public/css/launcher.css @@ -1,3 +1,98 @@ +/* ================================================ + launcher.css – Dynasty of Knights Launcher +================================================ */ + +/* ── Fonts ─────────────────────────────────────── */ + +@font-face { + font-family: "Cinzel Decorative"; + src: + url("/fonts/CinzelDecorative-Regular.woff2") format("woff2"), + url("/fonts/CinzelDecorative-Regular.ttf") format("truetype"); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: "Cinzel Decorative"; + src: + url("/fonts/CinzelDecorative-Bold.woff2") format("woff2"), + url("/fonts/CinzelDecorative-Bold.ttf") format("truetype"); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: "Cinzel Decorative"; + src: + url("/fonts/CinzelDecorative-Black.woff2") format("woff2"), + url("/fonts/CinzelDecorative-Black.ttf") format("truetype"); + font-weight: 900; + font-style: normal; +} + +@font-face { + font-family: "Cinzel"; + src: url("/fonts/Cinzel-Regular.ttf") format("truetype"); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: "Cinzel"; + src: url("/fonts/Cinzel-Medium.ttf") format("truetype"); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: "Cinzel"; + src: url("/fonts/Cinzel-SemiBold.ttf") format("truetype"); + font-weight: 600; + font-style: normal; +} + +@font-face { + font-family: "Cinzel"; + src: url("/fonts/Cinzel-Bold.ttf") format("truetype"); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: "Cinzel"; + src: url("/fonts/Cinzel-ExtraBold.ttf") format("truetype"); + font-weight: 800; + font-style: normal; +} + +@font-face { + font-family: "Cinzel"; + src: url("/fonts/Cinzel-Black.ttf") format("truetype"); + font-weight: 900; + font-style: normal; +} + +@font-face { + font-family: "Tangerine"; + src: + url("/fonts/Tangerine-Regular.woff2") format("woff2"), + url("/fonts/Tangerine-Regular.ttf") format("truetype"); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: "Tangerine"; + src: + url("/fonts/Tangerine-Bold.woff2") format("woff2"), + url("/fonts/Tangerine-Bold.ttf") format("truetype"); + font-weight: 700; + font-style: normal; +} + +/* ── Base ───────────────────────────────────────── */ + html, body { margin: 0; @@ -11,6 +106,8 @@ body { justify-content: center; } +/* ── Worldmap ───────────────────────────────────── */ + .worldmap { position: relative; width: 2037px; @@ -51,7 +148,8 @@ body { stroke: #6ec6ff; } -/* ── Map Tooltip ───────────────────────────────── */ +/* ── Map Tooltip ────────────────────────────────── */ + #map-tooltip { position: fixed; pointer-events: none; @@ -74,44 +172,31 @@ body { margin: 6px 0; } +/* ── Chat ───────────────────────────────────────── */ + #game-chat { position: fixed; - left: 20px; bottom: 20px; - width: 400px; height: 300px; - background: linear-gradient(#2b2115, #1a140d); - border: 3px solid #8b6a3c; - color: #f3e6c5; - font-family: serif; - display: flex; flex-direction: column; - z-index: 1000; } #chat-messages { flex: 1; - resize: none; - background: #1b140b; - border: none; - color: #f3e6c5; - padding: 5px; - font-size: 13px; - overflow-y: auto; } @@ -123,80 +208,54 @@ body { .chat-channels button { background: linear-gradient(#6b4a25, #3a2512); - border: 1px solid #caa46a; - color: #f3e6c5; - font-family: serif; - font-size: 13px; - padding: 3px 8px; - cursor: pointer; - transition: all 0.15s ease; } .chat-channels button:hover { background: linear-gradient(#8a6235, #4a3018); - border-color: #ffd27a; - box-shadow: 0 0 6px rgba(255, 210, 120, 0.6); } .chat-channels button.active { background: linear-gradient(#a37742, #5c3a1a); - border-color: #ffd27a; - box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6); } -.global-chat { - color: #e6c48a; -} -.guild-chat { - color: #6ed37c; -} -.private-chat { - color: #7ec8ff; -} +.global-chat { color: #e6c48a; } +.guild-chat { color: #6ed37c; } +.private-chat { color: #7ec8ff; } + +/* ── Online-User-Liste ──────────────────────────── */ #online-users { position: fixed; - left: 20px; bottom: 340px; - width: 350px; - background: linear-gradient(#2b2115, #1a140d); - border: 3px solid #8b6a3c; - color: #f3e6c5; - font-family: serif; - overflow-y: auto; } .online-header { background: #3a2a17; - padding: 5px; - text-align: center; - border-bottom: 2px solid #8b6a3c; } #online-list div { padding: 4px; - cursor: pointer; } @@ -214,7 +273,8 @@ body { box-shadow: 0 0 6px #3cff3c; } -/* ── Music Control ─────────────────────────────── */ +/* ── Music Control ──────────────────────────────── */ + #music-control { position: fixed; bottom: 16px; diff --git a/views/launcher.ejs b/views/launcher.ejs index ae20a61..a962c78 100644 --- a/views/launcher.ejs +++ b/views/launcher.ejs @@ -8,84 +8,6 @@ href="/images/favicon/dok_favicon_32px.ico" type="image/x-icon" /> - @@ -260,525 +182,71 @@ -
-
-
- Gebäude -
-
- ✕ + Gebäude + +
+ +
+ + +
-
- -
- - - - - - - - -
- - -
-
-
-
-
+
+
+
-
-
Spieler Online
- -
-
- -
-
Globalchat
- -
- - - -
- - - -
- - -
-
-
- -
- -
-
- Avatar -
VIP 0
-
-
-
...
-
- Energie -
- 40 / 40 -
+
-
-
-
-
- - -
-
-
- ⚪ - 0 -
-
-
- 💠 - 0 -
-
-
- 🪙 - 0 -
- -
- -
-
- 🪵 - 0 -
-
-
- 🪨 - 0 -
-
-
-
+
-
-
- +
+
+ 🃏 Kartendeck
- -
- +
+ 📅 Tägliche Events
- -
- +
+ ⚔️ Helden Bonus
- -
- +
+ 🏆 Sealed Liga
- -
- +
+ 💀 Beschwörer der Seelen
- -
- +
+ 🎁 Online Bonus
- -
- +
+ ⚡ Aktionen
- -
- +
+ 🏪 Basar
- -
- +
+ 🎴 10 Booster Aktion
- -
- +
+ 🎯 Boosterjagd
@@ -885,6 +353,7 @@
+
@@ -912,11 +381,11 @@ "/music/dueg-oth-musik-hintergrund-142725.mp3", ]; - const audio = document.getElementById("bg-music"); + const audio = document.getElementById("bg-music"); const muteBtn = document.getElementById("music-mute-btn"); - const vol = document.getElementById("music-volume"); + const vol = document.getElementById("music-volume"); - let muted = localStorage.getItem("dok_muted") === "true"; + let muted = localStorage.getItem("dok_muted") === "true"; let started = false; if (localStorage.getItem("dok_vol") !== null) @@ -930,12 +399,7 @@ audio.src = shuffled[i]; audio.muted = muted; if (!muted) { - audio - .play() - .then(() => { - started = true; - }) - .catch(() => {}); + audio.play().then(() => { started = true; }).catch(() => {}); } } @@ -950,27 +414,16 @@ localStorage.setItem("dok_muted", muted); if (!muted) { if (!audio.src) playTrack(index); - audio - .play() - .then(() => { - started = true; - }) - .catch(() => {}); + audio.play().then(() => { started = true; }).catch(() => {}); } } - muteBtn.addEventListener("click", () => { - muted = !muted; - applyMute(); - }); + muteBtn.addEventListener("click", () => { muted = !muted; applyMute(); }); vol.addEventListener("input", () => { audio.volume = parseFloat(vol.value); localStorage.setItem("dok_vol", vol.value); - if (parseFloat(vol.value) > 0 && muted) { - muted = false; - applyMute(); - } + if (parseFloat(vol.value) > 0 && muted) { muted = false; applyMute(); } muteBtn.textContent = parseFloat(vol.value) === 0 ? "🔇" : "🔊"; }); @@ -979,12 +432,7 @@ function tryResume() { if (!muted && (audio.paused || !started)) { - audio - .play() - .then(() => { - started = true; - }) - .catch(() => {}); + audio.play().then(() => { started = true; }).catch(() => {}); } } document.addEventListener("click", tryResume); @@ -1006,24 +454,20 @@