änderung der namensgebung
This commit is contained in:
parent
0e423f834d
commit
778aef8b0a
6
app.js
6
app.js
@ -1,4 +1,4 @@
|
|||||||
require("dotenv").config();
|
require("dotenv").config();
|
||||||
|
|
||||||
const express = require("express");
|
const express = require("express");
|
||||||
const path = require("path");
|
const path = require("path");
|
||||||
@ -21,8 +21,8 @@ const avatar = require("./routes/avatar");
|
|||||||
const equip = require("./routes/equip");
|
const equip = require("./routes/equip");
|
||||||
const equipment = require("./routes/equipment");
|
const equipment = require("./routes/equipment");
|
||||||
const blackmarket = require("./routes/blackmarket");
|
const blackmarket = require("./routes/blackmarket");
|
||||||
const mineRoute = require("./routes/mine_route");
|
const mineRoute = require("./routes/mine");
|
||||||
const arenaRoutes = require("./routes/routes_arena");
|
const arenaRoutes = require("./routes/arena");
|
||||||
const { registerArenaHandlers } = require("./sockets/arena");
|
const { registerArenaHandlers } = require("./sockets/arena");
|
||||||
const { registerChatHandlers } = require("./sockets/chat");
|
const { registerChatHandlers } = require("./sockets/chat");
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,9 @@
|
|||||||
|
/* ================================================
|
||||||
|
building.css – Charakter, Equipment, Inventar
|
||||||
|
Dynasty of Knights
|
||||||
|
Popup/Tooltip/Notification → popup.css
|
||||||
|
================================================ */
|
||||||
|
|
||||||
/* =========================
|
/* =========================
|
||||||
Base
|
Base
|
||||||
========================= */
|
========================= */
|
||||||
@ -27,195 +33,6 @@ body {
|
|||||||
box-shadow: 0 0 6px #3cff3c;
|
box-shadow: 0 0 6px #3cff3c;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* =========================
|
|
||||||
Popup Fenster
|
|
||||||
========================= */
|
|
||||||
|
|
||||||
.building-popup {
|
|
||||||
position: fixed;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
|
|
||||||
width: 900px;
|
|
||||||
max-width: 90vw;
|
|
||||||
max-height: 1000px;
|
|
||||||
|
|
||||||
background: url("/images/parchment.png") center / cover no-repeat;
|
|
||||||
|
|
||||||
border: 4px solid #6b4b2a;
|
|
||||||
border-radius: 10px;
|
|
||||||
|
|
||||||
box-shadow:
|
|
||||||
0 0 40px rgba(0, 0, 0, 0.9),
|
|
||||||
inset 0 0 25px rgba(0, 0, 0, 0.5);
|
|
||||||
|
|
||||||
display: none;
|
|
||||||
flex-direction: column;
|
|
||||||
z-index: 1000;
|
|
||||||
|
|
||||||
animation: popupFade 0.25s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.building-popup.active {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================
|
|
||||||
Popup Header
|
|
||||||
========================= */
|
|
||||||
|
|
||||||
.popup-header {
|
|
||||||
padding: 14px;
|
|
||||||
font-family: "Tangerine", serif;
|
|
||||||
font-size: 36px;
|
|
||||||
|
|
||||||
background: linear-gradient(#6b4b2a, #3c2414);
|
|
||||||
|
|
||||||
border-bottom: 2px solid #8b6a3c;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
color: #f0d9a6;
|
|
||||||
text-shadow: 0 2px 4px black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-header span {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================
|
|
||||||
Tabs
|
|
||||||
========================= */
|
|
||||||
|
|
||||||
.popup-tabs {
|
|
||||||
display: flex;
|
|
||||||
border-bottom: 2px solid #8b6a3c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-tabs button {
|
|
||||||
flex: 1;
|
|
||||||
padding: 10px;
|
|
||||||
|
|
||||||
font-family: "Cinzel", serif;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
background: linear-gradient(#5c3b20, #3a2513);
|
|
||||||
|
|
||||||
border: 1px solid #8b6a3c;
|
|
||||||
color: #e7d9b4;
|
|
||||||
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-tabs button:hover {
|
|
||||||
background: linear-gradient(#8b6a3c, #5c3b20);
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-tabs button.active {
|
|
||||||
background: linear-gradient(#d4b97a, #9c7a3a);
|
|
||||||
color: #2b1b0f;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================
|
|
||||||
Popup Inhalt
|
|
||||||
========================= */
|
|
||||||
|
|
||||||
.popup-content {
|
|
||||||
padding: 16px 60px 16px 60px;
|
|
||||||
|
|
||||||
font-size: 15px;
|
|
||||||
line-height: 1.6;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
border-radius: 6px;
|
|
||||||
|
|
||||||
color: #2b1b0f;
|
|
||||||
|
|
||||||
overflow-y: auto;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-content h3 {
|
|
||||||
font-family: "Tangerine", serif;
|
|
||||||
font-size: 32px;
|
|
||||||
color: #3b2412;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-content p {
|
|
||||||
color: #3a2413;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================
|
|
||||||
Tab Inhalte
|
|
||||||
========================= */
|
|
||||||
|
|
||||||
.tab-content {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-content.active {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================
|
|
||||||
Buttons
|
|
||||||
========================= */
|
|
||||||
|
|
||||||
.popup-content button {
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
background: linear-gradient(#7a5a2a, #caa24b);
|
|
||||||
|
|
||||||
border: 1px solid #e0c67b;
|
|
||||||
padding: 10px 18px;
|
|
||||||
|
|
||||||
color: #1a1206;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-content button:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
box-shadow:
|
|
||||||
0 0 10px #ffd66b,
|
|
||||||
0 0 25px #caa24b;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================
|
|
||||||
Tooltip
|
|
||||||
========================= */
|
|
||||||
|
|
||||||
#map-tooltip {
|
|
||||||
position: fixed;
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
background: rgba(0, 0, 0, 0.85);
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-radius: 6px;
|
|
||||||
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
display: none;
|
|
||||||
z-index: 9999;
|
|
||||||
|
|
||||||
max-width: 200px;
|
|
||||||
|
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
#map-tooltip strong {
|
|
||||||
color: #ffd700;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================
|
/* =========================
|
||||||
Character Window
|
Character Window
|
||||||
========================= */
|
========================= */
|
||||||
@ -601,127 +418,6 @@ body {
|
|||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* =========================
|
|
||||||
Game Notification
|
|
||||||
========================= */
|
|
||||||
|
|
||||||
#game-notification {
|
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%) scale(0.85);
|
|
||||||
|
|
||||||
z-index: 9999;
|
|
||||||
|
|
||||||
width: 360px;
|
|
||||||
max-width: 90vw;
|
|
||||||
|
|
||||||
background: url("/images/parchment.png") center / cover no-repeat;
|
|
||||||
|
|
||||||
border: 3px solid #6b4b2a;
|
|
||||||
border-radius: 10px;
|
|
||||||
|
|
||||||
box-shadow:
|
|
||||||
0 0 40px rgba(0, 0, 0, 0.9),
|
|
||||||
inset 0 0 20px rgba(0, 0, 0, 0.4);
|
|
||||||
|
|
||||||
display: none;
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
transition:
|
|
||||||
opacity 0.2s ease,
|
|
||||||
transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
#game-notification.show {
|
|
||||||
display: block;
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate(-50%, -50%) scale(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-header {
|
|
||||||
padding: 12px 16px;
|
|
||||||
|
|
||||||
background: linear-gradient(#6b4b2a, #3c2414);
|
|
||||||
border-bottom: 2px solid #8b6a3c;
|
|
||||||
border-radius: 7px 7px 0 0;
|
|
||||||
|
|
||||||
font-family: "Tangerine", serif;
|
|
||||||
font-size: 28px;
|
|
||||||
color: #f0d9a6;
|
|
||||||
text-shadow: 0 2px 4px black;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-body {
|
|
||||||
padding: 20px 20px 10px 20px;
|
|
||||||
|
|
||||||
font-family: "Cinzel", serif;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #2b1b0f;
|
|
||||||
line-height: 1.8;
|
|
||||||
text-align: center;
|
|
||||||
white-space: pre-line;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-footer {
|
|
||||||
padding: 10px 20px 16px 20px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-btn {
|
|
||||||
padding: 8px 28px !important;
|
|
||||||
font-size: 14px !important;
|
|
||||||
font-family: "Cinzel", serif !important;
|
|
||||||
font-weight: bold !important;
|
|
||||||
background: linear-gradient(#7a5a2a, #caa24b) !important;
|
|
||||||
border: 1px solid #e0c67b !important;
|
|
||||||
border-radius: 4px;
|
|
||||||
color: #1a1206 !important;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.2s;
|
|
||||||
margin-top: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-btn:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
box-shadow:
|
|
||||||
0 0 10px #ffd66b,
|
|
||||||
0 0 20px #caa24b;
|
|
||||||
}
|
|
||||||
|
|
||||||
#game-notification-overlay {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
z-index: 9998;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#game-notification-overlay.show {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================
|
|
||||||
Animation
|
|
||||||
========================= */
|
|
||||||
|
|
||||||
@keyframes popupFade {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate(-50%, -40%);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* =========================
|
/* =========================
|
||||||
Schwarzmarkt Tabs
|
Schwarzmarkt Tabs
|
||||||
========================= */
|
========================= */
|
||||||
|
|||||||
@ -212,102 +212,18 @@
|
|||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
background: url("/images/items/blauer%20cristal.png") center / contain no-repeat;
|
background: url("/images/items/blauer%20cristal.png") center / contain
|
||||||
|
no-repeat;
|
||||||
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
|
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Blauer Kristall / Gems – Bild aus der Datenbank */
|
/* Ressource Icons (gem, silver, wood, stone, gold, iron) – einheitliche Größe */
|
||||||
.hud-res-icon-gem {
|
.hud-res-icon-gem,
|
||||||
width: 28px;
|
.hud-res-icon-silver,
|
||||||
height: 28px;
|
.hud-res-icon-wood,
|
||||||
flex-shrink: 0;
|
.hud-res-icon-stone,
|
||||||
display: flex;
|
.hud-res-icon-gold,
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hud-res-icon-gem img {
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
object-fit: contain;
|
|
||||||
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Silbermünze – Bild aus der Datenbank */
|
|
||||||
.hud-res-icon-silver {
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hud-res-icon-silver img {
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
object-fit: contain;
|
|
||||||
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Holz – Bild aus der Datenbank */
|
|
||||||
.hud-res-icon-wood {
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hud-res-icon-wood img {
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
object-fit: contain;
|
|
||||||
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Stein – Bild aus der Datenbank */
|
|
||||||
.hud-res-icon-stone {
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hud-res-icon-stone img {
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
object-fit: contain;
|
|
||||||
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Goldmünze – Bild aus der Datenbank */
|
|
||||||
.hud-res-icon-gold {
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hud-res-icon-gold img {
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
object-fit: contain;
|
|
||||||
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Eisen – Bild aus der Datenbank */
|
|
||||||
.hud-res-icon-iron {
|
.hud-res-icon-iron {
|
||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
@ -317,6 +233,11 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hud-res-icon-gem img,
|
||||||
|
.hud-res-icon-silver img,
|
||||||
|
.hud-res-icon-wood img,
|
||||||
|
.hud-res-icon-stone img,
|
||||||
|
.hud-res-icon-gold img,
|
||||||
.hud-res-icon-iron img {
|
.hud-res-icon-iron img {
|
||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
|
|||||||
31
public/css/launcher-dev.css
Normal file
31
public/css/launcher-dev.css
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
/* ================================================
|
||||||
|
launcher-dev.css – Map Developer Tool
|
||||||
|
Dynasty of Knights
|
||||||
|
================================================ */
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background: #000;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
polygon {
|
||||||
|
fill: rgba(255, 0, 0, 0.35);
|
||||||
|
stroke: red;
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
@ -171,3 +171,54 @@
|
|||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
box-shadow: 0 0 6px #3cff3c;
|
box-shadow: 0 0 6px #3cff3c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Music Control ─────────────────────────────── */
|
||||||
|
#music-control {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 16px;
|
||||||
|
right: 16px;
|
||||||
|
z-index: 9999;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
background: rgba(10, 5, 0, 0.85);
|
||||||
|
border: 1px solid #c8960c;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
#music-mute-btn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 0;
|
||||||
|
color: #f0d080;
|
||||||
|
transition: transform 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#music-mute-btn:hover {
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
#music-volume {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 80px;
|
||||||
|
height: 4px;
|
||||||
|
background: #3a2000;
|
||||||
|
border-radius: 2px;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#music-volume::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #c8960c;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|||||||
165
public/css/login.css
Normal file
165
public/css/login.css
Normal file
@ -0,0 +1,165 @@
|
|||||||
|
/* ================================================
|
||||||
|
login.css – Login-Seite & Register-Seite
|
||||||
|
Dynasty of Knights
|
||||||
|
================================================ */
|
||||||
|
|
||||||
|
/* ── Base ──────────────────────────────────────── */
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "Tangerine", serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: url("/images/background_login.png") center / cover no-repeat fixed;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Nebel ─────────────────────────────────────── */
|
||||||
|
.fog {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 40%;
|
||||||
|
z-index: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fogmove {
|
||||||
|
0% { transform: translateX(0); }
|
||||||
|
100% { transform: translateX(-50%); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Login Panel ───────────────────────────────── */
|
||||||
|
.launcher {
|
||||||
|
width: 380px;
|
||||||
|
padding: 30px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
font-family: "Tangerine", serif;
|
||||||
|
font-size: 16px;
|
||||||
|
background: rgba(10, 15, 20, 0.75);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(100, 170, 255, 0.4);
|
||||||
|
box-shadow:
|
||||||
|
0 0 40px rgba(0, 0, 0, 0.8),
|
||||||
|
0 0 20px rgba(70, 120, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Register Box ──────────────────────────────── */
|
||||||
|
.register-box {
|
||||||
|
width: 380px;
|
||||||
|
padding: 30px;
|
||||||
|
background: rgba(10, 15, 20, 0.8);
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(100, 170, 255, 0.4);
|
||||||
|
box-shadow:
|
||||||
|
0 0 40px rgba(0, 0, 0, 0.8),
|
||||||
|
0 0 20px rgba(70, 120, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Charakter Box ─────────────────────────────── */
|
||||||
|
.box {
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
padding: 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
text-align: center;
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Inputs / Selects / Buttons ────────────────── */
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
button,
|
||||||
|
.register,
|
||||||
|
.server-status {
|
||||||
|
width: 100%;
|
||||||
|
padding: 13px;
|
||||||
|
font-size: 24px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-family: "Tangerine", serif;
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||||
|
border-radius: 6px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Login Button ──────────────────────────────── */
|
||||||
|
.login {
|
||||||
|
width: 100%;
|
||||||
|
padding: 14px;
|
||||||
|
font-size: 32px;
|
||||||
|
background: linear-gradient(45deg, #3da2ff, #7dd3ff);
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow:
|
||||||
|
0 0 20px #4aa3ff,
|
||||||
|
0 0 40px #4aa3ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Register Link ─────────────────────────────── */
|
||||||
|
.register {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
color: #ccc;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register:hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Zurück Link ───────────────────────────────── */
|
||||||
|
.back {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
color: #ccc;
|
||||||
|
margin-top: 10px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back:hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Server Status Box ─────────────────────────── */
|
||||||
|
.server-status {
|
||||||
|
margin-top: 18px;
|
||||||
|
font-size: 24px;
|
||||||
|
padding: 10px;
|
||||||
|
background: rgba(0, 0, 0, 0.45);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.online { color: #3cff5a; }
|
||||||
|
.offline { color: #ff4b4b; }
|
||||||
|
|
||||||
|
/* ── Fehler-Meldung ────────────────────────────── */
|
||||||
|
.error {
|
||||||
|
color: red;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Charakter-Seite: Input/Button ─────────────── */
|
||||||
|
.box input,
|
||||||
|
.box button {
|
||||||
|
width: 100%;
|
||||||
|
padding: 14px;
|
||||||
|
margin-top: 10px;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
@ -68,7 +68,9 @@
|
|||||||
border: 1px solid rgba(122, 90, 26, 0.3);
|
border: 1px solid rgba(122, 90, 26, 0.3);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 7px 12px;
|
padding: 7px 12px;
|
||||||
transition: border-color 0.2s, background 0.2s;
|
transition:
|
||||||
|
border-color 0.2s,
|
||||||
|
background 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mine-resource-row.mine-resource-ready {
|
.mine-resource-row.mine-resource-ready {
|
||||||
@ -85,97 +87,12 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Blauer Kristall / Gems – Bild aus der Datenbank */
|
/* Ressource Icons (gem, silver, wood, stone, gold, iron) – einheitliche Größe */
|
||||||
.mine-resource-icon-gem {
|
.mine-resource-icon-gem,
|
||||||
width: 100px;
|
.mine-resource-icon-silver,
|
||||||
height: 100px;
|
.mine-resource-icon-wood,
|
||||||
flex-shrink: 0;
|
.mine-resource-icon-stone,
|
||||||
display: flex;
|
.mine-resource-icon-gold,
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mine-resource-icon-gem img {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
object-fit: contain;
|
|
||||||
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Silbermünze – Bild aus der Datenbank */
|
|
||||||
.mine-resource-icon-silver {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mine-resource-icon-silver img {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
object-fit: contain;
|
|
||||||
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Holz – Bild aus der Datenbank */
|
|
||||||
.mine-resource-icon-wood {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mine-resource-icon-wood img {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
object-fit: contain;
|
|
||||||
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Stein – Bild aus der Datenbank */
|
|
||||||
.mine-resource-icon-stone {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mine-resource-icon-stone img {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
object-fit: contain;
|
|
||||||
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Goldmünze – Bild aus der Datenbank */
|
|
||||||
.mine-resource-icon-gold {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mine-resource-icon-gold img {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
object-fit: contain;
|
|
||||||
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Eisen – Bild aus der Datenbank */
|
|
||||||
.mine-resource-icon-iron {
|
.mine-resource-icon-iron {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
@ -185,6 +102,11 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mine-resource-icon-gem img,
|
||||||
|
.mine-resource-icon-silver img,
|
||||||
|
.mine-resource-icon-wood img,
|
||||||
|
.mine-resource-icon-stone img,
|
||||||
|
.mine-resource-icon-gold img,
|
||||||
.mine-resource-icon-iron img {
|
.mine-resource-icon-iron img {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
@ -253,7 +175,9 @@
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
transition: filter 0.15s, transform 0.1s;
|
transition:
|
||||||
|
filter 0.15s,
|
||||||
|
transform 0.1s;
|
||||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
|
||||||
@ -291,8 +215,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes minePulse {
|
@keyframes minePulse {
|
||||||
0%, 100% { opacity: 1; }
|
0%,
|
||||||
50% { opacity: 0.45; }
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.45;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mine-error {
|
.mine-error {
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import { showNotification } from "../notification.js";
|
import { showNotification } from "../notification.js";
|
||||||
|
|
||||||
export async function loadSchwarzmarkt() {
|
export async function loadBlackmarket() {
|
||||||
const ui = document.querySelector(".building-ui");
|
const ui = document.querySelector(".building-ui");
|
||||||
|
|
||||||
ui.innerHTML = `
|
ui.innerHTML = `
|
||||||
@ -3,7 +3,7 @@ const slotsPerPage = 32;
|
|||||||
let inventoryItems = [];
|
let inventoryItems = [];
|
||||||
let totalInventoryPages = 1;
|
let totalInventoryPages = 1;
|
||||||
|
|
||||||
export async function loadWohnhaus() {
|
export async function loadCharacterHouse() {
|
||||||
const ui = document.querySelector(".building-ui");
|
const ui = document.querySelector(".building-ui");
|
||||||
|
|
||||||
ui.innerHTML = `
|
ui.innerHTML = `
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { loadWohnhaus } from "./buildings/wohnhaus.js";
|
import { loadCharacterHouse } from "./buildings/character-house.js";
|
||||||
import { loadSchwarzmarkt } from "./buildings/schwarzmarkt.js";
|
import { loadBlackmarket } from "./buildings/blackmarket.js";
|
||||||
import { loadMine } from "./buildings/mine.js";
|
import { loadMine } from "./buildings/mine.js";
|
||||||
const popup = document.getElementById("building-popup");
|
const popup = document.getElementById("building-popup");
|
||||||
const title = document.getElementById("popup-title");
|
const title = document.getElementById("popup-title");
|
||||||
@ -8,8 +8,8 @@ const tooltip = document.getElementById("map-tooltip");
|
|||||||
const tooltipCache = {};
|
const tooltipCache = {};
|
||||||
|
|
||||||
const buildingModules = {
|
const buildingModules = {
|
||||||
11: loadWohnhaus, // Tabs ausblenden, eigenes UI
|
11: loadCharacterHouse, // Tabs ausblenden, eigenes UI
|
||||||
12: loadSchwarzmarkt, // Tabs ausblenden, eigenes UI
|
12: loadBlackmarket, // Tabs ausblenden, eigenes UI
|
||||||
10: loadMine, // Tabs bleiben sichtbar, nur Aktionen-Tab befüllen
|
10: loadMine, // Tabs bleiben sichtbar, nur Aktionen-Tab befüllen
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -70,7 +70,7 @@ document.querySelectorAll(".building").forEach((building) => {
|
|||||||
<div class="popup-info-title">${data.name}</div>
|
<div class="popup-info-title">${data.name}</div>
|
||||||
<div class="popup-stat-row"><span class="popup-stat-key">Level</span><span class="popup-stat-val">${data.level}</span></div>
|
<div class="popup-stat-row"><span class="popup-stat-key">Level</span><span class="popup-stat-val">${data.level}</span></div>
|
||||||
<div class="popup-stat-row"><span class="popup-stat-key">Punkte</span><span class="popup-stat-val">${data.points} / ${data.nextLevelPoints}</span></div>
|
<div class="popup-stat-row"><span class="popup-stat-key">Punkte</span><span class="popup-stat-val">${data.points} / ${data.nextLevelPoints}</span></div>
|
||||||
<p class="popup-desc">${data.description}</p>
|
<p class="popup-desc" style="color:#cccccc !important;font-size:13px;line-height:1.8;">${data.description}</p>
|
||||||
<div class="popup-xp-wrap">
|
<div class="popup-xp-wrap">
|
||||||
<div class="popup-xp-label">Fortschritt zum nächsten Level</div>
|
<div class="popup-xp-label">Fortschritt zum nächsten Level</div>
|
||||||
<div class="popup-xp-track">
|
<div class="popup-xp-track">
|
||||||
|
|||||||
@ -1,26 +1,26 @@
|
|||||||
import { loadGlucksbox } from "./quickmenu/glucksbox.js";
|
import { loadLuckyBox } from "./quickmenu/lucky-box.js";
|
||||||
import { loadEvents } from "./quickmenu/events.js";
|
import { loadEvents } from "./quickmenu/events.js";
|
||||||
import { loadHeldenbonus } from "./quickmenu/heldenbonus.js";
|
import { loadHeroBonus } from "./quickmenu/hero-bonus.js";
|
||||||
import { loadSealedliga } from "./quickmenu/sealedliga.js";
|
import { loadSealedLeague } from "./quickmenu/sealed-league.js";
|
||||||
import { loadBeschwoerer } from "./quickmenu/beschwoerer.js";
|
import { loadSummoner } from "./quickmenu/summoner.js";
|
||||||
import { loadOnlinebonus } from "./quickmenu/onlinebonus.js";
|
import { loadOnlinebonus } from "./quickmenu/onlinebonus.js";
|
||||||
import { loadAktionen } from "./quickmenu/aktionen.js";
|
import { loadActions } from "./quickmenu/actions.js";
|
||||||
import { loadBasar } from "./quickmenu/basar.js";
|
import { loadBazaar } from "./quickmenu/bazaar.js";
|
||||||
import { loadBoosteraktion } from "./quickmenu/boosteraktion.js";
|
import { loadBoosterAction } from "./quickmenu/booster-action.js";
|
||||||
import { loadBoosterjagd } from "./quickmenu/boosterjagd.js";
|
import { loadBoosterHunt } from "./quickmenu/booster-hunt.js";
|
||||||
|
|
||||||
/* Popup-ID → Loader Funktion */
|
/* Popup-ID → Loader Funktion */
|
||||||
const popupLoaders = {
|
const popupLoaders = {
|
||||||
"qm-popup-glucksbox": loadGlucksbox,
|
"qm-popup-glucksbox": loadLuckyBox,
|
||||||
"qm-popup-events": loadEvents,
|
"qm-popup-events": loadEvents,
|
||||||
"qm-popup-heldenbonus": loadHeldenbonus,
|
"qm-popup-heldenbonus": loadHeroBonus,
|
||||||
"qm-popup-sealedliga": loadSealedliga,
|
"qm-popup-sealedliga": loadSealedLeague,
|
||||||
"qm-popup-beschwoerer": loadBeschwoerer,
|
"qm-popup-beschwoerer": loadSummoner,
|
||||||
"qm-popup-onlinebonus": loadOnlinebonus,
|
"qm-popup-onlinebonus": loadOnlinebonus,
|
||||||
"qm-popup-aktionen": loadAktionen,
|
"qm-popup-aktionen": loadActions,
|
||||||
"qm-popup-basar": loadBasar,
|
"qm-popup-basar": loadBazaar,
|
||||||
"qm-popup-boosteraktion": loadBoosteraktion,
|
"qm-popup-boosteraktion": loadBoosterAction,
|
||||||
"qm-popup-boosterjagd": loadBoosterjagd,
|
"qm-popup-boosterjagd": loadBoosterHunt,
|
||||||
};
|
};
|
||||||
|
|
||||||
/* ================================
|
/* ================================
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
export async function loadAktionen() {
|
export async function loadActions() {
|
||||||
const body = document.getElementById("qm-body-aktionen");
|
const body = document.getElementById("qm-body-aktionen");
|
||||||
if (!body) return;
|
if (!body) return;
|
||||||
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
export async function loadBasar() {
|
export async function loadBazaar() {
|
||||||
const body = document.getElementById("qm-body-basar");
|
const body = document.getElementById("qm-body-basar");
|
||||||
if (!body) return;
|
if (!body) return;
|
||||||
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
export async function loadBoosteraktion() {
|
export async function loadBoosterAction() {
|
||||||
const body = document.getElementById("qm-body-boosteraktion");
|
const body = document.getElementById("qm-body-boosteraktion");
|
||||||
if (!body) return;
|
if (!body) return;
|
||||||
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
export async function loadBoosterjagd() {
|
export async function loadBoosterHunt() {
|
||||||
const body = document.getElementById("qm-body-boosterjagd");
|
const body = document.getElementById("qm-body-boosterjagd");
|
||||||
if (!body) return;
|
if (!body) return;
|
||||||
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
export async function loadHeldenbonus() {
|
export async function loadHeroBonus() {
|
||||||
const body = document.getElementById("qm-body-heldenbonus");
|
const body = document.getElementById("qm-body-heldenbonus");
|
||||||
if (!body) return;
|
if (!body) return;
|
||||||
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
export async function loadGlucksbox() {
|
export async function loadLuckyBox() {
|
||||||
const body = document.getElementById("qm-body-glucksbox");
|
const body = document.getElementById("qm-body-glucksbox");
|
||||||
if (!body) return;
|
if (!body) return;
|
||||||
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
export async function loadSealedliga() {
|
export async function loadSealedLeague() {
|
||||||
const body = document.getElementById("qm-body-sealedliga");
|
const body = document.getElementById("qm-body-sealedliga");
|
||||||
if (!body) return;
|
if (!body) return;
|
||||||
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
export async function loadBeschwoerer() {
|
export async function loadSummoner() {
|
||||||
const body = document.getElementById("qm-body-beschwoerer");
|
const body = document.getElementById("qm-body-beschwoerer");
|
||||||
if (!body) return;
|
if (!body) return;
|
||||||
|
|
||||||
215
rename-all.ps1
Normal file
215
rename-all.ps1
Normal file
@ -0,0 +1,215 @@
|
|||||||
|
# ============================================================
|
||||||
|
# Dynasty of Knights — Datei-Umbenennung (Windows PowerShell)
|
||||||
|
# Ausfuehren im ROOT-Verzeichnis des Projekts: .\rename-all.ps1
|
||||||
|
# ============================================================
|
||||||
|
|
||||||
|
Write-Host "Starte Umbenennung..." -ForegroundColor Cyan
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# 1. BACKEND ROUTES
|
||||||
|
# ============================================================
|
||||||
|
|
||||||
|
Rename-Item "routes\mine_route.js" "mine.js"
|
||||||
|
Rename-Item "routes\routes_arena.js" "arena.js"
|
||||||
|
|
||||||
|
Write-Host "Backend-Routes umbenannt" -ForegroundColor Green
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# 2. FRONTEND — BUILDING-MODULE
|
||||||
|
# ============================================================
|
||||||
|
|
||||||
|
Rename-Item "public\js\buildings\schwarzmarkt.js" "blackmarket.js"
|
||||||
|
Rename-Item "public\js\buildings\wohnhaus.js" "character-house.js"
|
||||||
|
|
||||||
|
Write-Host "Building-Module umbenannt" -ForegroundColor Green
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# 3. FRONTEND — QUICKMENU-MODULE
|
||||||
|
# ============================================================
|
||||||
|
|
||||||
|
Rename-Item "public\js\quickmenu\glucksbox.js" "lucky-box.js"
|
||||||
|
Rename-Item "public\js\quickmenu\heldenbonus.js" "hero-bonus.js"
|
||||||
|
Rename-Item "public\js\quickmenu\sealedliga.js" "sealed-league.js"
|
||||||
|
Rename-Item "public\js\quickmenu\beschwoerer.js" "summoner.js"
|
||||||
|
Rename-Item "public\js\quickmenu\aktionen.js" "actions.js"
|
||||||
|
Rename-Item "public\js\quickmenu\basar.js" "bazaar.js"
|
||||||
|
Rename-Item "public\js\quickmenu\boosteraktion.js" "booster-action.js"
|
||||||
|
Rename-Item "public\js\quickmenu\boosterjagd.js" "booster-hunt.js"
|
||||||
|
|
||||||
|
Write-Host "Quickmenu-Module umbenannt" -ForegroundColor Green
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# 4. VIEW-TEMPLATE
|
||||||
|
# ============================================================
|
||||||
|
|
||||||
|
Rename-Item "views\1v1_spielfeld.ejs" "1v1-battlefield.ejs"
|
||||||
|
|
||||||
|
Write-Host "EJS-Template umbenannt" -ForegroundColor Green
|
||||||
|
|
||||||
|
Write-Host ""
|
||||||
|
Write-Host "Starte Code-Aenderungen..." -ForegroundColor Cyan
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# HILFSFUNKTION: Text in Datei ersetzen
|
||||||
|
# ============================================================
|
||||||
|
|
||||||
|
function Replace-InFile($path, $oldText, $newText) {
|
||||||
|
$content = Get-Content $path -Raw -Encoding UTF8
|
||||||
|
$updated = $content -replace [regex]::Escape($oldText), $newText
|
||||||
|
Set-Content $path $updated -Encoding UTF8 -NoNewline
|
||||||
|
}
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# app.js
|
||||||
|
# ============================================================
|
||||||
|
|
||||||
|
Replace-InFile "app.js" `
|
||||||
|
'require("./routes/mine_route")' `
|
||||||
|
'require("./routes/mine")'
|
||||||
|
|
||||||
|
Replace-InFile "app.js" `
|
||||||
|
'require("./routes/routes_arena")' `
|
||||||
|
'require("./routes/arena")'
|
||||||
|
|
||||||
|
Write-Host "app.js aktualisiert" -ForegroundColor Green
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# routes\arena.js (ehem. routes_arena.js)
|
||||||
|
# ============================================================
|
||||||
|
|
||||||
|
Replace-InFile "routes\arena.js" `
|
||||||
|
'res.render("1v1_spielfeld"' `
|
||||||
|
'res.render("1v1-battlefield"'
|
||||||
|
|
||||||
|
Write-Host "routes\arena.js aktualisiert" -ForegroundColor Green
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# public\js\buildings\character-house.js
|
||||||
|
# ============================================================
|
||||||
|
|
||||||
|
Replace-InFile "public\js\buildings\character-house.js" `
|
||||||
|
'export async function loadWohnhaus' `
|
||||||
|
'export async function loadCharacterHouse'
|
||||||
|
|
||||||
|
Write-Host "character-house.js aktualisiert" -ForegroundColor Green
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# public\js\buildings\blackmarket.js
|
||||||
|
# ============================================================
|
||||||
|
|
||||||
|
Replace-InFile "public\js\buildings\blackmarket.js" `
|
||||||
|
'export async function loadSchwarzmarkt' `
|
||||||
|
'export async function loadBlackmarket'
|
||||||
|
|
||||||
|
Write-Host "blackmarket.js aktualisiert" -ForegroundColor Green
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# public\js\map-ui.js
|
||||||
|
# ============================================================
|
||||||
|
|
||||||
|
Replace-InFile "public\js\map-ui.js" `
|
||||||
|
'import { loadWohnhaus } from "./buildings/wohnhaus.js"' `
|
||||||
|
'import { loadCharacterHouse } from "./buildings/character-house.js"'
|
||||||
|
|
||||||
|
Replace-InFile "public\js\map-ui.js" `
|
||||||
|
'import { loadSchwarzmarkt } from "./buildings/schwarzmarkt.js"' `
|
||||||
|
'import { loadBlackmarket } from "./buildings/blackmarket.js"'
|
||||||
|
|
||||||
|
Replace-InFile "public\js\map-ui.js" `
|
||||||
|
'loadWohnhaus' `
|
||||||
|
'loadCharacterHouse'
|
||||||
|
|
||||||
|
Replace-InFile "public\js\map-ui.js" `
|
||||||
|
'loadSchwarzmarkt' `
|
||||||
|
'loadBlackmarket'
|
||||||
|
|
||||||
|
Write-Host "map-ui.js aktualisiert" -ForegroundColor Green
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# Quickmenu-Dateien — Funktionsnamen
|
||||||
|
# ============================================================
|
||||||
|
|
||||||
|
Replace-InFile "public\js\quickmenu\lucky-box.js" 'export async function loadGlucksbox' 'export async function loadLuckyBox'
|
||||||
|
Replace-InFile "public\js\quickmenu\hero-bonus.js" 'export async function loadHeldenbonus' 'export async function loadHeroBonus'
|
||||||
|
Replace-InFile "public\js\quickmenu\sealed-league.js" 'export async function loadSealedliga' 'export async function loadSealedLeague'
|
||||||
|
Replace-InFile "public\js\quickmenu\summoner.js" 'export async function loadBeschwoerer' 'export async function loadSummoner'
|
||||||
|
Replace-InFile "public\js\quickmenu\actions.js" 'export async function loadAktionen' 'export async function loadActions'
|
||||||
|
Replace-InFile "public\js\quickmenu\bazaar.js" 'export async function loadBasar' 'export async function loadBazaar'
|
||||||
|
Replace-InFile "public\js\quickmenu\booster-action.js" 'export async function loadBoosteraktion' 'export async function loadBoosterAction'
|
||||||
|
Replace-InFile "public\js\quickmenu\booster-hunt.js" 'export async function loadBoosterjagd' 'export async function loadBoosterHunt'
|
||||||
|
|
||||||
|
Write-Host "Quickmenu-Funktionsnamen aktualisiert" -ForegroundColor Green
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# public\js\quickmenu.js — Imports + Funktionsreferenzen
|
||||||
|
# ============================================================
|
||||||
|
|
||||||
|
Replace-InFile "public\js\quickmenu.js" `
|
||||||
|
'import { loadGlucksbox } from "./quickmenu/glucksbox.js"' `
|
||||||
|
'import { loadLuckyBox } from "./quickmenu/lucky-box.js"'
|
||||||
|
|
||||||
|
Replace-InFile "public\js\quickmenu.js" `
|
||||||
|
'import { loadHeldenbonus } from "./quickmenu/heldenbonus.js"' `
|
||||||
|
'import { loadHeroBonus } from "./quickmenu/hero-bonus.js"'
|
||||||
|
|
||||||
|
Replace-InFile "public\js\quickmenu.js" `
|
||||||
|
'import { loadSealedliga } from "./quickmenu/sealedliga.js"' `
|
||||||
|
'import { loadSealedLeague } from "./quickmenu/sealed-league.js"'
|
||||||
|
|
||||||
|
Replace-InFile "public\js\quickmenu.js" `
|
||||||
|
'import { loadBeschwoerer } from "./quickmenu/beschwoerer.js"' `
|
||||||
|
'import { loadSummoner } from "./quickmenu/summoner.js"'
|
||||||
|
|
||||||
|
Replace-InFile "public\js\quickmenu.js" `
|
||||||
|
'import { loadAktionen } from "./quickmenu/aktionen.js"' `
|
||||||
|
'import { loadActions } from "./quickmenu/actions.js"'
|
||||||
|
|
||||||
|
Replace-InFile "public\js\quickmenu.js" `
|
||||||
|
'import { loadBasar } from "./quickmenu/basar.js"' `
|
||||||
|
'import { loadBazaar } from "./quickmenu/bazaar.js"'
|
||||||
|
|
||||||
|
Replace-InFile "public\js\quickmenu.js" `
|
||||||
|
'import { loadBoosteraktion } from "./quickmenu/boosteraktion.js"' `
|
||||||
|
'import { loadBoosterAction } from "./quickmenu/booster-action.js"'
|
||||||
|
|
||||||
|
Replace-InFile "public\js\quickmenu.js" `
|
||||||
|
'import { loadBoosterjagd } from "./quickmenu/boosterjagd.js"' `
|
||||||
|
'import { loadBoosterHunt } from "./quickmenu/booster-hunt.js"'
|
||||||
|
|
||||||
|
Replace-InFile "public\js\quickmenu.js" 'loadGlucksbox' 'loadLuckyBox'
|
||||||
|
Replace-InFile "public\js\quickmenu.js" 'loadHeldenbonus' 'loadHeroBonus'
|
||||||
|
Replace-InFile "public\js\quickmenu.js" 'loadSealedliga' 'loadSealedLeague'
|
||||||
|
Replace-InFile "public\js\quickmenu.js" 'loadBeschwoerer' 'loadSummoner'
|
||||||
|
Replace-InFile "public\js\quickmenu.js" 'loadAktionen' 'loadActions'
|
||||||
|
Replace-InFile "public\js\quickmenu.js" 'loadBasar' 'loadBazaar'
|
||||||
|
Replace-InFile "public\js\quickmenu.js" 'loadBoosteraktion' 'loadBoosterAction'
|
||||||
|
Replace-InFile "public\js\quickmenu.js" 'loadBoosterjagd' 'loadBoosterHunt'
|
||||||
|
|
||||||
|
Write-Host "quickmenu.js aktualisiert" -ForegroundColor Green
|
||||||
|
|
||||||
|
# ============================================================
|
||||||
|
# ZUSAMMENFASSUNG
|
||||||
|
# ============================================================
|
||||||
|
|
||||||
|
Write-Host ""
|
||||||
|
Write-Host "============================================================" -ForegroundColor Cyan
|
||||||
|
Write-Host " FERTIG! 12 Dateien umbenannt + alle Referenzen angepasst." -ForegroundColor Cyan
|
||||||
|
Write-Host "============================================================" -ForegroundColor Cyan
|
||||||
|
Write-Host ""
|
||||||
|
Write-Host "Geaenderte Dateien:" -ForegroundColor Yellow
|
||||||
|
Write-Host " app.js"
|
||||||
|
Write-Host " routes\arena.js (war: routes_arena.js)"
|
||||||
|
Write-Host " routes\mine.js (war: mine_route.js)"
|
||||||
|
Write-Host " views\1v1-battlefield.ejs (war: 1v1_spielfeld.ejs)"
|
||||||
|
Write-Host " public\js\map-ui.js"
|
||||||
|
Write-Host " public\js\quickmenu.js"
|
||||||
|
Write-Host " public\js\buildings\character-house.js (war: wohnhaus.js)"
|
||||||
|
Write-Host " public\js\buildings\blackmarket.js (war: schwarzmarkt.js)"
|
||||||
|
Write-Host " public\js\quickmenu\lucky-box.js (war: glucksbox.js)"
|
||||||
|
Write-Host " public\js\quickmenu\hero-bonus.js (war: heldenbonus.js)"
|
||||||
|
Write-Host " public\js\quickmenu\sealed-league.js (war: sealedliga.js)"
|
||||||
|
Write-Host " public\js\quickmenu\summoner.js (war: beschwoerer.js)"
|
||||||
|
Write-Host " public\js\quickmenu\actions.js (war: aktionen.js)"
|
||||||
|
Write-Host " public\js\quickmenu\bazaar.js (war: basar.js)"
|
||||||
|
Write-Host " public\js\quickmenu\booster-action.js (war: boosteraktion.js)"
|
||||||
|
Write-Host " public\js\quickmenu\booster-hunt.js (war: boosterjagd.js)"
|
||||||
@ -1,4 +1,4 @@
|
|||||||
const express = require("express");
|
const express = require("express");
|
||||||
const router = express.Router();
|
const router = express.Router();
|
||||||
const db = require("../database/database");
|
const db = require("../database/database");
|
||||||
|
|
||||||
@ -63,7 +63,7 @@ router.get("/1v1", requireLogin, async (req, res) => {
|
|||||||
|
|
||||||
// Kein matchId → direkte Vorschau ohne Matchmaking (z.B. für Tests)
|
// Kein matchId → direkte Vorschau ohne Matchmaking (z.B. für Tests)
|
||||||
if (!matchId) {
|
if (!matchId) {
|
||||||
return res.render("1v1_spielfeld", {
|
return res.render("1v1-battlefield", {
|
||||||
title: "1v1 Kampf",
|
title: "1v1 Kampf",
|
||||||
matchId: null,
|
matchId: null,
|
||||||
mySlot: "player1",
|
mySlot: "player1",
|
||||||
@ -102,7 +102,7 @@ router.get("/1v1", requireLogin, async (req, res) => {
|
|||||||
|
|
||||||
const isPlayer1 = slot === "player1";
|
const isPlayer1 = slot === "player1";
|
||||||
|
|
||||||
res.render("1v1_spielfeld", {
|
res.render("1v1-battlefield", {
|
||||||
title: "⚔️ 1v1 Kampf",
|
title: "⚔️ 1v1 Kampf",
|
||||||
matchId,
|
matchId,
|
||||||
mySlot: slot || "player1",
|
mySlot: slot || "player1",
|
||||||
@ -125,7 +125,7 @@ router.get("/1v1", requireLogin, async (req, res) => {
|
|||||||
================================ */
|
================================ */
|
||||||
|
|
||||||
router.get("/2v2", (req, res) => {
|
router.get("/2v2", (req, res) => {
|
||||||
res.render("1v1_spielfeld", {
|
res.render("1v1-battlefield", {
|
||||||
title: "2v2 Kampf",
|
title: "2v2 Kampf",
|
||||||
matchId: null,
|
matchId: null,
|
||||||
mySlot: "player1",
|
mySlot: "player1",
|
||||||
@ -144,7 +144,7 @@ router.get("/2v2", (req, res) => {
|
|||||||
================================ */
|
================================ */
|
||||||
|
|
||||||
router.get("/4v4", (req, res) => {
|
router.get("/4v4", (req, res) => {
|
||||||
res.render("1v1_spielfeld", {
|
res.render("1v1-battlefield", {
|
||||||
title: "4v4 Kampf",
|
title: "4v4 Kampf",
|
||||||
matchId: null,
|
matchId: null,
|
||||||
mySlot: "player1",
|
mySlot: "player1",
|
||||||
@ -1,57 +1,11 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Charakter erstellen</title>
|
<title>Charakter erstellen</title>
|
||||||
|
<link rel="stylesheet" href="/css/global.css" />
|
||||||
<style>
|
<link rel="stylesheet" href="/css/login.css" />
|
||||||
|
|
||||||
body{
|
|
||||||
|
|
||||||
margin:0;
|
|
||||||
height:100vh;
|
|
||||||
|
|
||||||
background:url("/images/background_login.png") center / cover no-repeat;
|
|
||||||
|
|
||||||
display:flex;
|
|
||||||
justify-content:center;
|
|
||||||
align-items:center;
|
|
||||||
|
|
||||||
font-family:sans-serif;
|
|
||||||
color:white;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.box{
|
|
||||||
|
|
||||||
background:rgba(0,0,0,0.7);
|
|
||||||
padding:40px;
|
|
||||||
border-radius:10px;
|
|
||||||
text-align:center;
|
|
||||||
width:400px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
input,
|
|
||||||
button{
|
|
||||||
width: 100%;
|
|
||||||
padding: 14px;
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
border-radius: 6px;
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error{
|
|
||||||
|
|
||||||
color:red;
|
|
||||||
margin-bottom:10px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|||||||
140
views/index.ejs
140
views/index.ejs
@ -8,144 +8,8 @@
|
|||||||
href="/images/favicon/dok_favicon_32px.ico"
|
href="/images/favicon/dok_favicon_32px.ico"
|
||||||
type="image/x-icon"
|
type="image/x-icon"
|
||||||
/>
|
/>
|
||||||
<link rel="stylesheet" href="/css/global.css">
|
<link rel="stylesheet" href="/css/global.css" />
|
||||||
|
<link rel="stylesheet" href="/css/login.css" />
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: "Tangerine", serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
min-height: 100vh;
|
|
||||||
background: url("/images/background_login.png") center / cover no-repeat fixed;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Nebel über Tal */
|
|
||||||
|
|
||||||
.fog {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 40%;
|
|
||||||
z-index: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fogmove {
|
|
||||||
0% {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Login Panel */
|
|
||||||
|
|
||||||
.launcher {
|
|
||||||
width: 380px;
|
|
||||||
padding: 30px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
font-family: "Tangerine", serif;
|
|
||||||
font-size: 16px;
|
|
||||||
background: rgba(10, 15, 20, 0.75);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid rgba(100, 170, 255, 0.4);
|
|
||||||
|
|
||||||
box-shadow:
|
|
||||||
0 0 40px rgba(0, 0, 0, 0.8),
|
|
||||||
0 0 20px rgba(70, 120, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Inputs */
|
|
||||||
|
|
||||||
input,
|
|
||||||
select,
|
|
||||||
button,
|
|
||||||
.register,
|
|
||||||
.server-status {
|
|
||||||
width: 100%;
|
|
||||||
padding: 13px;
|
|
||||||
font-size: 24px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
font-family: "Tangerine", serif;
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
||||||
border-radius: 6px;
|
|
||||||
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Login Button */
|
|
||||||
|
|
||||||
.login {
|
|
||||||
width: 100%;
|
|
||||||
padding: 14px;
|
|
||||||
font-size: 32px;
|
|
||||||
background: linear-gradient(45deg, #3da2ff, #7dd3ff);
|
|
||||||
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
transition: 0.25s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
|
|
||||||
box-shadow:
|
|
||||||
0 0 20px #4aa3ff,
|
|
||||||
0 0 40px #4aa3ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Register */
|
|
||||||
|
|
||||||
.register {
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
color: #ccc;
|
|
||||||
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.register:hover {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Server Status */
|
|
||||||
|
|
||||||
.server-status {
|
|
||||||
margin-top: 18px;
|
|
||||||
font-size: 24px;
|
|
||||||
padding: 10px;
|
|
||||||
background: rgba(0, 0, 0, 0.45);
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.online {
|
|
||||||
color: #3cff5a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.offline {
|
|
||||||
color: #ff4b4b;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@ -5,35 +5,7 @@
|
|||||||
|
|
||||||
<title>Map Developer</title>
|
<title>Map Developer</title>
|
||||||
<link rel="stylesheet" href="/css/global.css" />
|
<link rel="stylesheet" href="/css/global.css" />
|
||||||
|
<link rel="stylesheet" href="/css/launcher-dev.css" />
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
background: #000;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
polygon {
|
|
||||||
fill: rgba(255, 0, 0, 0.35);
|
|
||||||
stroke: red;
|
|
||||||
stroke-width: 2;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@ -10,7 +10,10 @@
|
|||||||
/>
|
/>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Cinzel:wght@400;600&display=swap" rel="stylesheet" />
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Cinzel:wght@400;600&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
<link rel="stylesheet" href="/css/launcher.css" />
|
<link rel="stylesheet" href="/css/launcher.css" />
|
||||||
<link rel="stylesheet" href="/css/global.css" />
|
<link rel="stylesheet" href="/css/global.css" />
|
||||||
<link rel="stylesheet" href="/css/building.css" />
|
<link rel="stylesheet" href="/css/building.css" />
|
||||||
@ -18,76 +21,6 @@
|
|||||||
<link rel="stylesheet" href="/css/quickmenu.css" />
|
<link rel="stylesheet" href="/css/quickmenu.css" />
|
||||||
<link rel="stylesheet" href="/css/hud.css" />
|
<link rel="stylesheet" href="/css/hud.css" />
|
||||||
<link rel="stylesheet" href="/css/mine.css" />
|
<link rel="stylesheet" href="/css/mine.css" />
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
height: 100vh;
|
|
||||||
|
|
||||||
background: #000;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
font-family: sans-serif;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel {
|
|
||||||
background: rgba(0, 0, 0, 0.6);
|
|
||||||
padding: 40px;
|
|
||||||
border-radius: 10px;
|
|
||||||
text-align: center;
|
|
||||||
width: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Music Control ── */
|
|
||||||
#music-control {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 16px;
|
|
||||||
right: 16px;
|
|
||||||
z-index: 9999;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
background: rgba(10, 5, 0, 0.85);
|
|
||||||
border: 1px solid #c8960c;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 6px 10px;
|
|
||||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
|
|
||||||
}
|
|
||||||
#music-mute-btn {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 1;
|
|
||||||
padding: 0;
|
|
||||||
color: #f0d080;
|
|
||||||
transition: transform 0.15s;
|
|
||||||
}
|
|
||||||
#music-mute-btn:hover {
|
|
||||||
transform: scale(1.2);
|
|
||||||
}
|
|
||||||
#music-volume {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
width: 80px;
|
|
||||||
height: 4px;
|
|
||||||
background: #3a2000;
|
|
||||||
border-radius: 2px;
|
|
||||||
outline: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
#music-volume::-webkit-slider-thumb {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #c8960c;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
@ -222,7 +155,6 @@
|
|||||||
BUILDING POPUP
|
BUILDING POPUP
|
||||||
================================ -->
|
================================ -->
|
||||||
<div id="building-popup" class="building-popup">
|
<div id="building-popup" class="building-popup">
|
||||||
|
|
||||||
<!-- Eckornamente -->
|
<!-- Eckornamente -->
|
||||||
<div class="popup-corner c-tl">
|
<div class="popup-corner c-tl">
|
||||||
<svg viewBox="0 0 30 30" width="30" height="30">
|
<svg viewBox="0 0 30 30" width="30" height="30">
|
||||||
@ -265,74 +197,327 @@
|
|||||||
|
|
||||||
<!-- Body: Sidebar + Content -->
|
<!-- Body: Sidebar + Content -->
|
||||||
<div class="popup-body">
|
<div class="popup-body">
|
||||||
|
|
||||||
<!-- Vertikale Tab-Sidebar -->
|
<!-- Vertikale Tab-Sidebar -->
|
||||||
<div class="popup-tabs">
|
<div class="popup-tabs">
|
||||||
|
|
||||||
<!-- Info Tab -->
|
<!-- Info Tab -->
|
||||||
<button class="tab active" data-tab="info">
|
<button class="tab active" data-tab="info">
|
||||||
<svg class="tab-icon tab-icon-default" viewBox="0 0 26 26" fill="none">
|
<svg
|
||||||
<path d="M13 3 L22 7 L22 14 C22 18.5 17.5 22 13 23 C8.5 22 4 18.5 4 14 L4 7 Z" stroke="#6a4820" stroke-width="1.5" fill="#1a0e04"/>
|
class="tab-icon tab-icon-default"
|
||||||
<path d="M13 6 L19.5 9 L19.5 14 C19.5 17.5 16.5 20.2 13 21 C9.5 20.2 6.5 17.5 6.5 14 L6.5 9 Z" stroke="#7a5828" stroke-width="1" fill="#221408"/>
|
viewBox="0 0 26 26"
|
||||||
|
fill="none"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M13 3 L22 7 L22 14 C22 18.5 17.5 22 13 23 C8.5 22 4 18.5 4 14 L4 7 Z"
|
||||||
|
stroke="#6a4820"
|
||||||
|
stroke-width="1.5"
|
||||||
|
fill="#1a0e04"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M13 6 L19.5 9 L19.5 14 C19.5 17.5 16.5 20.2 13 21 C9.5 20.2 6.5 17.5 6.5 14 L6.5 9 Z"
|
||||||
|
stroke="#7a5828"
|
||||||
|
stroke-width="1"
|
||||||
|
fill="#221408"
|
||||||
|
/>
|
||||||
<circle cx="13" cy="13" r="2" fill="#6a4820" />
|
<circle cx="13" cy="13" r="2" fill="#6a4820" />
|
||||||
<line x1="13" y1="9" x2="13" y2="11" stroke="#6a4820" stroke-width="1.5" stroke-linecap="round"/>
|
<line
|
||||||
<line x1="13" y1="15" x2="13" y2="17" stroke="#6a4820" stroke-width="1.5" stroke-linecap="round"/>
|
x1="13"
|
||||||
|
y1="9"
|
||||||
|
x2="13"
|
||||||
|
y2="11"
|
||||||
|
stroke="#6a4820"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1="13"
|
||||||
|
y1="15"
|
||||||
|
x2="13"
|
||||||
|
y2="17"
|
||||||
|
stroke="#6a4820"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<svg class="tab-icon tab-icon-active" viewBox="0 0 26 26" fill="none">
|
<svg
|
||||||
<path d="M13 3 L22 7 L22 14 C22 18.5 17.5 22 13 23 C8.5 22 4 18.5 4 14 L4 7 Z" stroke="#c8960c" stroke-width="1.5" fill="#3a2208"/>
|
class="tab-icon tab-icon-active"
|
||||||
<path d="M13 6 L19.5 9 L19.5 14 C19.5 17.5 16.5 20.2 13 21 C9.5 20.2 6.5 17.5 6.5 14 L6.5 9 Z" stroke="#e0b040" stroke-width="1" fill="#4a3010"/>
|
viewBox="0 0 26 26"
|
||||||
|
fill="none"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M13 3 L22 7 L22 14 C22 18.5 17.5 22 13 23 C8.5 22 4 18.5 4 14 L4 7 Z"
|
||||||
|
stroke="#c8960c"
|
||||||
|
stroke-width="1.5"
|
||||||
|
fill="#3a2208"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M13 6 L19.5 9 L19.5 14 C19.5 17.5 16.5 20.2 13 21 C9.5 20.2 6.5 17.5 6.5 14 L6.5 9 Z"
|
||||||
|
stroke="#e0b040"
|
||||||
|
stroke-width="1"
|
||||||
|
fill="#4a3010"
|
||||||
|
/>
|
||||||
<circle cx="13" cy="13" r="2" fill="#f0d060" />
|
<circle cx="13" cy="13" r="2" fill="#f0d060" />
|
||||||
<line x1="13" y1="9" x2="13" y2="11" stroke="#f0d060" stroke-width="1.5" stroke-linecap="round"/>
|
<line
|
||||||
<line x1="13" y1="15" x2="13" y2="17" stroke="#f0d060" stroke-width="1.5" stroke-linecap="round"/>
|
x1="13"
|
||||||
|
y1="9"
|
||||||
|
x2="13"
|
||||||
|
y2="11"
|
||||||
|
stroke="#f0d060"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1="13"
|
||||||
|
y1="15"
|
||||||
|
x2="13"
|
||||||
|
y2="17"
|
||||||
|
stroke="#f0d060"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<div class="tab-tip">Info</div>
|
<div class="tab-tip">Info</div>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Aktionen Tab -->
|
<!-- Aktionen Tab -->
|
||||||
<button class="tab" data-tab="actions">
|
<button class="tab" data-tab="actions">
|
||||||
<svg class="tab-icon tab-icon-default" viewBox="0 0 26 26" fill="none">
|
<svg
|
||||||
<line x1="5" y1="5" x2="21" y2="21" stroke="#6a4820" stroke-width="2" stroke-linecap="round"/>
|
class="tab-icon tab-icon-default"
|
||||||
<line x1="21" y1="5" x2="5" y2="21" stroke="#6a4820" stroke-width="2" stroke-linecap="round"/>
|
viewBox="0 0 26 26"
|
||||||
<line x1="2" y1="10" x2="8" y2="6" stroke="#6a4820" stroke-width="1.5" stroke-linecap="round"/>
|
fill="none"
|
||||||
<line x1="24" y1="10" x2="18" y2="6" stroke="#6a4820" stroke-width="1.5" stroke-linecap="round"/>
|
>
|
||||||
<line x1="3" y1="7" x2="7" y2="3" stroke="#5a3810" stroke-width="1.5" stroke-linecap="round"/>
|
<line
|
||||||
<line x1="23" y1="7" x2="19" y2="3" stroke="#5a3810" stroke-width="1.5" stroke-linecap="round"/>
|
x1="5"
|
||||||
<circle cx="13" cy="13" r="2" fill="#1a0e04" stroke="#5a3810" stroke-width="1"/>
|
y1="5"
|
||||||
|
x2="21"
|
||||||
|
y2="21"
|
||||||
|
stroke="#6a4820"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1="21"
|
||||||
|
y1="5"
|
||||||
|
x2="5"
|
||||||
|
y2="21"
|
||||||
|
stroke="#6a4820"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1="2"
|
||||||
|
y1="10"
|
||||||
|
x2="8"
|
||||||
|
y2="6"
|
||||||
|
stroke="#6a4820"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1="24"
|
||||||
|
y1="10"
|
||||||
|
x2="18"
|
||||||
|
y2="6"
|
||||||
|
stroke="#6a4820"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1="3"
|
||||||
|
y1="7"
|
||||||
|
x2="7"
|
||||||
|
y2="3"
|
||||||
|
stroke="#5a3810"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1="23"
|
||||||
|
y1="7"
|
||||||
|
x2="19"
|
||||||
|
y2="3"
|
||||||
|
stroke="#5a3810"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
cx="13"
|
||||||
|
cy="13"
|
||||||
|
r="2"
|
||||||
|
fill="#1a0e04"
|
||||||
|
stroke="#5a3810"
|
||||||
|
stroke-width="1"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<svg class="tab-icon tab-icon-active" viewBox="0 0 26 26" fill="none">
|
<svg
|
||||||
<line x1="5" y1="5" x2="21" y2="21" stroke="#d4a030" stroke-width="2" stroke-linecap="round"/>
|
class="tab-icon tab-icon-active"
|
||||||
<line x1="21" y1="5" x2="5" y2="21" stroke="#d4a030" stroke-width="2" stroke-linecap="round"/>
|
viewBox="0 0 26 26"
|
||||||
<line x1="2" y1="10" x2="8" y2="6" stroke="#f0d060" stroke-width="1.5" stroke-linecap="round"/>
|
fill="none"
|
||||||
<line x1="24" y1="10" x2="18" y2="6" stroke="#f0d060" stroke-width="1.5" stroke-linecap="round"/>
|
>
|
||||||
<line x1="3" y1="7" x2="7" y2="3" stroke="#c8960c" stroke-width="1.5" stroke-linecap="round"/>
|
<line
|
||||||
<line x1="23" y1="7" x2="19" y2="3" stroke="#c8960c" stroke-width="1.5" stroke-linecap="round"/>
|
x1="5"
|
||||||
<circle cx="13" cy="13" r="2.5" fill="#3a2208" stroke="#f0d060" stroke-width="1"/>
|
y1="5"
|
||||||
|
x2="21"
|
||||||
|
y2="21"
|
||||||
|
stroke="#d4a030"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1="21"
|
||||||
|
y1="5"
|
||||||
|
x2="5"
|
||||||
|
y2="21"
|
||||||
|
stroke="#d4a030"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1="2"
|
||||||
|
y1="10"
|
||||||
|
x2="8"
|
||||||
|
y2="6"
|
||||||
|
stroke="#f0d060"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1="24"
|
||||||
|
y1="10"
|
||||||
|
x2="18"
|
||||||
|
y2="6"
|
||||||
|
stroke="#f0d060"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1="3"
|
||||||
|
y1="7"
|
||||||
|
x2="7"
|
||||||
|
y2="3"
|
||||||
|
stroke="#c8960c"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1="23"
|
||||||
|
y1="7"
|
||||||
|
x2="19"
|
||||||
|
y2="3"
|
||||||
|
stroke="#c8960c"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
cx="13"
|
||||||
|
cy="13"
|
||||||
|
r="2.5"
|
||||||
|
fill="#3a2208"
|
||||||
|
stroke="#f0d060"
|
||||||
|
stroke-width="1"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<div class="tab-tip">Aktionen</div>
|
<div class="tab-tip">Aktionen</div>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Upgrade Tab -->
|
<!-- Upgrade Tab -->
|
||||||
<button class="tab" data-tab="upgrade">
|
<button class="tab" data-tab="upgrade">
|
||||||
<svg class="tab-icon tab-icon-default" viewBox="0 0 26 26" fill="none">
|
<svg
|
||||||
<rect x="5" y="18" width="16" height="3" rx="1" fill="#3a2808" stroke="#5a3810" stroke-width="1"/>
|
class="tab-icon tab-icon-default"
|
||||||
<rect x="7" y="14" width="12" height="5" rx="1" fill="#2a1c08" stroke="#5a3810" stroke-width="1"/>
|
viewBox="0 0 26 26"
|
||||||
<rect x="14" y="5" width="7" height="5" rx="1" fill="#2a1c08" stroke="#6a4820" stroke-width="1.2"/>
|
fill="none"
|
||||||
<line x1="16" y1="10" x2="9" y2="17" stroke="#6a4820" stroke-width="2" stroke-linecap="round"/>
|
>
|
||||||
|
<rect
|
||||||
|
x="5"
|
||||||
|
y="18"
|
||||||
|
width="16"
|
||||||
|
height="3"
|
||||||
|
rx="1"
|
||||||
|
fill="#3a2808"
|
||||||
|
stroke="#5a3810"
|
||||||
|
stroke-width="1"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="7"
|
||||||
|
y="14"
|
||||||
|
width="12"
|
||||||
|
height="5"
|
||||||
|
rx="1"
|
||||||
|
fill="#2a1c08"
|
||||||
|
stroke="#5a3810"
|
||||||
|
stroke-width="1"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="14"
|
||||||
|
y="5"
|
||||||
|
width="7"
|
||||||
|
height="5"
|
||||||
|
rx="1"
|
||||||
|
fill="#2a1c08"
|
||||||
|
stroke="#6a4820"
|
||||||
|
stroke-width="1.2"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1="16"
|
||||||
|
y1="10"
|
||||||
|
x2="9"
|
||||||
|
y2="17"
|
||||||
|
stroke="#6a4820"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
<circle cx="8" cy="13" r="0.8" fill="#6a4820" />
|
<circle cx="8" cy="13" r="0.8" fill="#6a4820" />
|
||||||
<circle cx="6" cy="11" r="0.5" fill="#5a3810" />
|
<circle cx="6" cy="11" r="0.5" fill="#5a3810" />
|
||||||
</svg>
|
</svg>
|
||||||
<svg class="tab-icon tab-icon-active" viewBox="0 0 26 26" fill="none">
|
<svg
|
||||||
<rect x="5" y="18" width="16" height="3" rx="1" fill="#4a3010" stroke="#c8960c" stroke-width="1"/>
|
class="tab-icon tab-icon-active"
|
||||||
<rect x="7" y="14" width="12" height="5" rx="1" fill="#3a2208" stroke="#c8960c" stroke-width="1"/>
|
viewBox="0 0 26 26"
|
||||||
<rect x="14" y="5" width="7" height="5" rx="1" fill="#4a3010" stroke="#f0d060" stroke-width="1.2"/>
|
fill="none"
|
||||||
<line x1="16" y1="10" x2="9" y2="17" stroke="#d4a030" stroke-width="2" stroke-linecap="round"/>
|
>
|
||||||
|
<rect
|
||||||
|
x="5"
|
||||||
|
y="18"
|
||||||
|
width="16"
|
||||||
|
height="3"
|
||||||
|
rx="1"
|
||||||
|
fill="#4a3010"
|
||||||
|
stroke="#c8960c"
|
||||||
|
stroke-width="1"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="7"
|
||||||
|
y="14"
|
||||||
|
width="12"
|
||||||
|
height="5"
|
||||||
|
rx="1"
|
||||||
|
fill="#3a2208"
|
||||||
|
stroke="#c8960c"
|
||||||
|
stroke-width="1"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="14"
|
||||||
|
y="5"
|
||||||
|
width="7"
|
||||||
|
height="5"
|
||||||
|
rx="1"
|
||||||
|
fill="#4a3010"
|
||||||
|
stroke="#f0d060"
|
||||||
|
stroke-width="1.2"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1="16"
|
||||||
|
y1="10"
|
||||||
|
x2="9"
|
||||||
|
y2="17"
|
||||||
|
stroke="#d4a030"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
<circle cx="8" cy="13" r="1" fill="#f0d060" />
|
<circle cx="8" cy="13" r="1" fill="#f0d060" />
|
||||||
<circle cx="6" cy="11" r="0.7" fill="#c8960c" />
|
<circle cx="6" cy="11" r="0.7" fill="#c8960c" />
|
||||||
<circle cx="10" cy="11" r="0.6" fill="#f0d060" />
|
<circle cx="10" cy="11" r="0.6" fill="#f0d060" />
|
||||||
</svg>
|
</svg>
|
||||||
<div class="tab-tip">Upgrade</div>
|
<div class="tab-tip">Upgrade</div>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Tab-Inhalte -->
|
<!-- Tab-Inhalte -->
|
||||||
@ -341,7 +526,6 @@
|
|||||||
<div class="tab-content" id="tab-actions"></div>
|
<div class="tab-content" id="tab-actions"></div>
|
||||||
<div class="tab-content" id="tab-upgrade"></div>
|
<div class="tab-content" id="tab-upgrade"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -676,7 +860,12 @@
|
|||||||
audio.src = shuffled[i];
|
audio.src = shuffled[i];
|
||||||
audio.muted = muted;
|
audio.muted = muted;
|
||||||
if (!muted) {
|
if (!muted) {
|
||||||
audio.play().then(() => { started = true; }).catch(() => {});
|
audio
|
||||||
|
.play()
|
||||||
|
.then(() => {
|
||||||
|
started = true;
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -691,7 +880,12 @@
|
|||||||
localStorage.setItem("dok_muted", muted);
|
localStorage.setItem("dok_muted", muted);
|
||||||
if (!muted) {
|
if (!muted) {
|
||||||
if (!audio.src) playTrack(index);
|
if (!audio.src) playTrack(index);
|
||||||
audio.play().then(() => { started = true; }).catch(() => {});
|
audio
|
||||||
|
.play()
|
||||||
|
.then(() => {
|
||||||
|
started = true;
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -715,7 +909,12 @@
|
|||||||
|
|
||||||
function tryResume() {
|
function tryResume() {
|
||||||
if (!muted && (audio.paused || !started)) {
|
if (!muted && (audio.paused || !started)) {
|
||||||
audio.play().then(() => { started = true; }).catch(() => {});
|
audio
|
||||||
|
.play()
|
||||||
|
.then(() => {
|
||||||
|
started = true;
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
document.addEventListener("click", tryResume);
|
document.addEventListener("click", tryResume);
|
||||||
|
|||||||
@ -3,93 +3,8 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Registrieren - Dynasty of Knights</title>
|
<title>Registrieren - Dynasty of Knights</title>
|
||||||
<link rel="stylesheet" href="/css/global.css">
|
<link rel="stylesheet" href="/css/global.css" />
|
||||||
<style>
|
<link rel="stylesheet" href="/css/login.css" />
|
||||||
|
|
||||||
body {
|
|
||||||
margin:0;
|
|
||||||
min-height:100vh;
|
|
||||||
|
|
||||||
background:url("/images/background_login.png") center / cover no-repeat;
|
|
||||||
|
|
||||||
display:flex;
|
|
||||||
justify-content:center;
|
|
||||||
align-items:center;
|
|
||||||
|
|
||||||
font-family:sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.register-box {
|
|
||||||
|
|
||||||
width:380px;
|
|
||||||
padding:30px;
|
|
||||||
|
|
||||||
background:rgba(10,15,20,0.8);
|
|
||||||
|
|
||||||
border-radius:10px;
|
|
||||||
|
|
||||||
border:1px solid rgba(100,170,255,0.4);
|
|
||||||
|
|
||||||
box-shadow:
|
|
||||||
0 0 40px rgba(0,0,0,0.8),
|
|
||||||
0 0 20px rgba(70,120,255,0.5);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
input, select, button {
|
|
||||||
|
|
||||||
width:100%;
|
|
||||||
padding:12px;
|
|
||||||
margin-bottom:15px;
|
|
||||||
|
|
||||||
border-radius:6px;
|
|
||||||
|
|
||||||
border:1px solid rgba(255,255,255,0.2);
|
|
||||||
|
|
||||||
background:rgba(255,255,255,0.1);
|
|
||||||
|
|
||||||
color:white;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
|
|
||||||
background:linear-gradient(45deg,#3da2ff,#7dd3ff);
|
|
||||||
|
|
||||||
border:none;
|
|
||||||
|
|
||||||
cursor:pointer;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
|
|
||||||
box-shadow:
|
|
||||||
0 0 20px #4aa3ff,
|
|
||||||
0 0 40px #4aa3ff;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.error {
|
|
||||||
|
|
||||||
color:red;
|
|
||||||
margin-bottom:15px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.back {
|
|
||||||
|
|
||||||
display:block;
|
|
||||||
text-align:center;
|
|
||||||
color:#ccc;
|
|
||||||
margin-top:10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back:hover {
|
|
||||||
color:white;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user