newWebsite2.0
This commit is contained in:
Br0tcraft
161
mini/pages/today.html
Normal file
161
mini/pages/today.html
Normal file
@@ -0,0 +1,161 @@
|
||||
<section class="today-dashboard">
|
||||
<article class="card today-summary-card">
|
||||
<div class="summary-date">
|
||||
<span id="weekday">Sonntag</span>
|
||||
<span id="date">15. August 2026</span>
|
||||
</div>
|
||||
<div class="summary-details">
|
||||
<div class="summary-item">
|
||||
<img src="assets/icons/shirt.svg" alt="Shirt Icon">
|
||||
<div>
|
||||
<strong>Gewand</strong>
|
||||
<span id="summary-color">Grün</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<img src="assets/icons/users.svg" alt="Users Icon">
|
||||
<div>
|
||||
<strong>Ministranten</strong>
|
||||
<span id="summary-count">4</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="card liturgical-card">
|
||||
<div class="liturgical-title-row">
|
||||
<h3>Gewand</h3>
|
||||
</div>
|
||||
<p class="card-hint">
|
||||
Die Gewandfarbe richtet sich nach dem Kirchenjahr. Ihr übernehmt einfach die Farbe, die auch der Pfarrer
|
||||
trägt.<br>
|
||||
<small>(Bei Weiß oder Gold zieht ihr stattdessen Grün an.)</small>
|
||||
</p>
|
||||
<div class="info-stack">
|
||||
<div class="info-line">
|
||||
<div class="info-line-icon info-line-icon-green">
|
||||
<img src="assets/icons/shirt.svg" alt="Shirt Icon">
|
||||
</div>
|
||||
<div>
|
||||
<strong>Grünes Gewand</strong>
|
||||
<span>An Tagen im Jahreskreis</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-line">
|
||||
<div class="info-line-icon info-line-icon-lilac">
|
||||
<img src="assets/icons/shirt.svg" alt="Shirt Icon">
|
||||
</div>
|
||||
<div>
|
||||
<strong>Lilanes Gewand</strong>
|
||||
<span>An Tagen der Buße und Fastenzeit</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-line">
|
||||
<div class="info-line-icon info-line-icon-red">
|
||||
<img src="assets/icons/shirt.svg" alt="Shirt Icon">
|
||||
</div>
|
||||
<div>
|
||||
<strong>Rotes Gewand</strong>
|
||||
<span>An Festtagen des Heiligen Geistes und der Märtyrer</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card placement-card">
|
||||
<div class="placement-header">
|
||||
<h3>Sitzordnung</h3>
|
||||
<button class="placement-toggle" id="incense-toggle">
|
||||
<img src="assets/images/tasks/incense.svg" alt="Weihrauch Icon" class="task-icon"> Weihrauch
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="placement-stage">
|
||||
<img id="placement-background" src="assets/images/placement/background.svg" alt="Platzierung Altar">
|
||||
<img id="placement-image" src="assets/images/placement/entrance.svg" alt="Platzierung Einzug">
|
||||
</div>
|
||||
|
||||
<div class="placement-controls">
|
||||
<button id="placement-prev"><img src="assets/icons/arrow_left.svg" alt="Pfeil Links Icon"></button>
|
||||
<span id="placement-label">Einzug</span>
|
||||
<button id="placement-next"><img src="assets/icons/arrow_right.svg" alt="Pfeil Rechts Icon"></button>
|
||||
</div>
|
||||
|
||||
<div class="placement-legend">
|
||||
<div class="legend-item"><img src="assets/images/tasks/bread-wine.svg" alt="Gabenbereitung Icon"
|
||||
class="task-icon"> Gabenbereitung</div>
|
||||
<div class="legend-item"><img src="assets/images/tasks/candle.svg" alt="Kerze Icon" class="task-icon">
|
||||
<p id="kerze-label">Kerze</p>
|
||||
</div>
|
||||
<div class="legend-item" id="basket-toggle"><img src="assets/images/tasks/basket.svg" alt="Kollekte Icon"
|
||||
class="task-icon">
|
||||
Kollekte</div>
|
||||
<div class="legend-item" id="incense-legend"><img src="assets/images/tasks/incense.svg" alt="Weihrauch Icon"
|
||||
class="task-icon"> Weihrauch</div>
|
||||
</div>
|
||||
</article>
|
||||
<div class="card pdf-download-card">
|
||||
<div class="pdf-download-content">
|
||||
<img src="assets/icons/file.svg" alt="File Icon">
|
||||
<div>
|
||||
<strong>Kurzübersicht</strong>
|
||||
<span>Gewand, Platzierungen & Aufgaben als PDF</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="pdf/heute-kurzuebersicht.pdf" download class="btn-download">
|
||||
<img src="assets/icons/download.svg" alt="Download Icon"> PDF herunterladen
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="tasks-section">
|
||||
<h2>Deine Aufgaben</h2>
|
||||
<div class="tasks-grid">
|
||||
<button class="task-card" data-task="gabenbereitung">
|
||||
<image src="assets/images/tasks/bread-wine.svg" alt="Gabenbereitung Icon">
|
||||
<span class="task-name">Gabenbereitung</span>
|
||||
<span class="task-arrow"><img src="assets/icons/arrow_right.svg" alt="Pfeil Icon"></span>
|
||||
</button>
|
||||
<button class="task-card" data-task="kerze">
|
||||
<img src="assets/images/tasks/candle.svg" alt="Kerze Icon">
|
||||
<span class="task-name">Kerze</span>
|
||||
<span class="task-arrow"><img src="assets/icons/arrow_right.svg" alt="Pfeil Icon"></span>
|
||||
</button>
|
||||
<button class="task-card" data-task="kollekte">
|
||||
<img src="assets/images/tasks/basket.svg" alt="Kollekte Icon">
|
||||
<span class="task-name">Kollekte</span>
|
||||
<span class="task-arrow"><img src="assets/icons/arrow_right.svg" alt="Pfeil Icon"></span>
|
||||
</button>
|
||||
<button class="task-card" data-task="weihrauch">
|
||||
<img src="assets/images/tasks/incense.svg" alt="Weihrauch Icon">
|
||||
<span class="task-name">Weihrauch</span>
|
||||
<span class="task-arrow"><img src="assets/icons/arrow_right.svg" alt="Pfeil Icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="task-modal">
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header">
|
||||
<div class="modal-top-row">
|
||||
<div class="modal-icon">
|
||||
<img id="modal-icon" src="" alt="Aufgaben Icon">
|
||||
</div>
|
||||
<button class="modal-close" aria-label="Schließen">
|
||||
<img src="assets/icons/x.svg" alt="Schließen Icon">
|
||||
</button>
|
||||
</div>
|
||||
<h3 class="modal-title" id="modal-title">Titel</h3>
|
||||
<p class="modal-description" id="modal-description">
|
||||
Hier steht eine kurze Erklärung.
|
||||
</p>
|
||||
</div>
|
||||
<div id="task-segmented-control" class="segmented-control" style="display:none;"></div>
|
||||
<ol class="modal-steps" id="modal-steps">
|
||||
<li>Schritt 1</li>
|
||||
<li>Schritt 2</li>
|
||||
</ol>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
Reference in New Issue
Block a user