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");
|
||||
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 = `
|
||||
<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