Erstellen des Daily Events
This commit is contained in:
parent
cf99782c66
commit
9515ac2720
139
public/css/events.css
Normal file
139
public/css/events.css
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
.events-grid {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
padding: 10px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
transition: transform 0.15s ease, filter 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
filter: brightness(1.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card:active {
|
||||||
|
transform: translateY(0px) scale(0.96);
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card-img-wrap {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 6px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card:hover .event-card-img-wrap {
|
||||||
|
border-color: rgba(255, 200, 80, 0.5);
|
||||||
|
box-shadow: 0 0 10px rgba(255, 180, 50, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card-img-wrap img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
image-rendering: pixelated;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card-label {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #cccccc;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.3;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================================
|
||||||
|
Detail-Popup (Overlay)
|
||||||
|
================================ */
|
||||||
|
|
||||||
|
#event-detail-overlay {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.55);
|
||||||
|
z-index: 9999;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#event-detail-overlay.active {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
#event-detail-popup {
|
||||||
|
background: #1e1a14;
|
||||||
|
border: 1px solid rgba(255, 200, 80, 0.3);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 24px;
|
||||||
|
min-width: 280px;
|
||||||
|
max-width: 420px;
|
||||||
|
width: 90%;
|
||||||
|
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
|
||||||
|
position: relative;
|
||||||
|
animation: eventDetailIn 0.18s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes eventDetailIn {
|
||||||
|
from { opacity: 0; transform: scale(0.92) translateY(8px); }
|
||||||
|
to { opacity: 1; transform: scale(1) translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
#event-detail-popup .edp-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 12px;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #888;
|
||||||
|
font-size: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: 1;
|
||||||
|
transition: color 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#event-detail-popup .edp-close:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
#event-detail-popup .edp-img {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto 14px;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
object-fit: contain;
|
||||||
|
image-rendering: pixelated;
|
||||||
|
}
|
||||||
|
|
||||||
|
#event-detail-popup .edp-title {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #f5c842;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#event-detail-popup .edp-body {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #cccccc;
|
||||||
|
line-height: 1.7;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
@ -2,7 +2,91 @@ export async function loadEvents() {
|
|||||||
const body = document.getElementById("qm-body-events");
|
const body = document.getElementById("qm-body-events");
|
||||||
if (!body) return;
|
if (!body) return;
|
||||||
|
|
||||||
|
/* ================================
|
||||||
|
CSS einmalig laden
|
||||||
|
================================ */
|
||||||
|
if (!document.querySelector('link[href="/css/events.css"]')) {
|
||||||
|
const link = document.createElement("link");
|
||||||
|
link.rel = "stylesheet";
|
||||||
|
link.href = "/css/events.css";
|
||||||
|
document.head.appendChild(link);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================================
|
||||||
|
Event-Daten (hier später befüllen)
|
||||||
|
================================ */
|
||||||
|
const events = [
|
||||||
|
{ id: 1, img: "/images/items/runenhaufen.png", label: "Textzeile 1" },
|
||||||
|
{ id: 2, img: "/images/items/runenhaufen.png", label: "Textzeile 2" },
|
||||||
|
{ id: 3, img: "/images/items/runenhaufen.png", label: "Textzeile 3" },
|
||||||
|
{ id: 4, img: "/images/items/runenhaufen.png", label: "Textzeile 4" },
|
||||||
|
{ id: 5, img: "/images/items/runenhaufen.png", label: "Textzeile 5" },
|
||||||
|
];
|
||||||
|
|
||||||
|
/* ================================
|
||||||
|
Haupt-HTML injizieren
|
||||||
|
================================ */
|
||||||
body.innerHTML = `
|
body.innerHTML = `
|
||||||
<p>Inhalt folgt...</p>
|
<!-- 5er Event-Grid -->
|
||||||
|
<div class="events-grid">
|
||||||
|
${events
|
||||||
|
.map(
|
||||||
|
(ev) => `
|
||||||
|
<div class="event-card" data-event-id="${ev.id}">
|
||||||
|
<div class="event-card-img-wrap">
|
||||||
|
<img src="${ev.img}" alt="${ev.label}" draggable="false">
|
||||||
|
</div>
|
||||||
|
<span class="event-card-label">${ev.label}</span>
|
||||||
|
</div>`
|
||||||
|
)
|
||||||
|
.join("")}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Detail-Popup -->
|
||||||
|
<div id="event-detail-overlay">
|
||||||
|
<div id="event-detail-popup">
|
||||||
|
<button class="edp-close" id="edp-close-btn">✕</button>
|
||||||
|
<img class="edp-img" id="edp-img" src="" alt="">
|
||||||
|
<div class="edp-title" id="edp-title"></div>
|
||||||
|
<div class="edp-body" id="edp-body">Inhalt folgt...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
/* ================================
|
||||||
|
Event-Karten klickbar machen
|
||||||
|
================================ */
|
||||||
|
|
||||||
|
const overlay = body.querySelector("#event-detail-overlay");
|
||||||
|
const edpImg = body.querySelector("#edp-img");
|
||||||
|
const edpTitle = body.querySelector("#edp-title");
|
||||||
|
const edpBody = body.querySelector("#edp-body");
|
||||||
|
|
||||||
|
body.querySelectorAll(".event-card").forEach((card) => {
|
||||||
|
card.addEventListener("click", () => {
|
||||||
|
const id = Number(card.dataset.eventId);
|
||||||
|
const ev = events.find((e) => e.id === id);
|
||||||
|
if (!ev) return;
|
||||||
|
|
||||||
|
edpImg.src = ev.img;
|
||||||
|
edpImg.alt = ev.label;
|
||||||
|
edpTitle.textContent = ev.label;
|
||||||
|
edpBody.textContent = "Inhalt folgt..."; // hier später befüllen
|
||||||
|
|
||||||
|
overlay.classList.add("active");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/* Detail-Popup schließen */
|
||||||
|
body.querySelector("#edp-close-btn").addEventListener("click", () => {
|
||||||
|
overlay.classList.remove("active");
|
||||||
|
});
|
||||||
|
|
||||||
|
overlay.addEventListener("click", (e) => {
|
||||||
|
if (e.target === overlay) overlay.classList.remove("active");
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener("keydown", function edpEsc(e) {
|
||||||
|
if (e.key === "Escape") overlay.classList.remove("active");
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user