Footer and Header Includes added

This commit is contained in:
2025-11-10 21:27:58 +01:00
parent 5f39e3497d
commit be1ef92cc6
6 changed files with 4584 additions and 184 deletions

View File

@@ -1,183 +0,0 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bratonien Adventskalender 2025</title>
<!-- === Styles === -->
<link rel="preload" href="/shared/css/style.css" as="style" onload="this.rel='stylesheet'">
<link rel="preload" href="/2025/css/popup.css" as="style" onload="this.rel='stylesheet'">
<link rel="preload" href="/2025/css/main.css" as="style" onload="this.rel='stylesheet'">
<link rel="preload" href="/2025/css/day.css" as="style" onload="this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="/adventskalender/shared/css/style.css">
<link rel="stylesheet" href="/2025/css/popup.css">
<link rel="stylesheet" href="/2025/css/main.css">
<link rel="stylesheet" href="/2025/css/day.css">
</noscript>
<!-- === Favicon (optional, falls du schon eines angelegt hast) === -->
<link rel="icon" type="image/png" href="favicon-2025.webp">
</head>
<body>
<main>
<h1>Bratonien Adventskalender 2025</h1>
<div class="kalenderbild">
<picture>
<!-- AVIF -->
<source
type="image/avif"
srcset="
assets/images/480/avif/Basisbild.avif 480w,
assets/images/720/avif/Basisbild.avif 720w,
assets/images/1024/avif/Basisbild.avif 1024w,
assets/images/1366/avif/Basisbild.avif 1366w,
assets/images/1600/avif/Basisbild.avif 1600w,
assets/images/1920/avif/Basisbild.avif 1920w,
assets/images/2560/avif/Basisbild.avif 2560w,
assets/images/3840/avif/Basisbild.avif 3840w"
sizes="
(min-width: 3840px) 3840px,
(min-width: 2560px) 2560px,
(min-width: 1920px) 1920px,
(min-width: 1600px) 1600px,
(min-width: 1366px) 1366px,
100vw">
<!-- WebP -->
<source
type="image/webp"
srcset="
assets/images/480/webp/Basisbild.webp 480w,
assets/images/720/webp/Basisbild.webp 720w,
assets/images/1024/webp/Basisbild.webp 1024w,
assets/images/1366/webp/Basisbild.webp 1366w,
assets/images/1600/webp/Basisbild.webp 1600w,
assets/images/1920/webp/Basisbild.webp 1920w,
assets/images/2560/webp/Basisbild.webp 2560w,
assets/images/3840/webp/Basisbild.webp 3840w"
sizes="
(min-width: 3840px) 3840px,
(min-width: 2560px) 2560px,
(min-width: 1920px) 1920px,
(min-width: 1600px) 1600px,
(min-width: 1366px) 1366px,
100vw">
<!-- JPEG-Fallback -->
<img
src="assets/images/1366/jpeg/Basisbild.jpeg"
srcset="
assets/images/480/jpeg/Basisbild.jpeg 480w,
assets/images/720/jpeg/Basisbild.jpeg 720w,
assets/images/1024/jpeg/Basisbild.jpeg 1024w,
assets/images/1366/jpeg/Basisbild.jpeg 1366w,
assets/images/1600/jpeg/Basisbild.jpeg 1600w,
assets/images/1920/jpeg/Basisbild.jpeg 1920w,
assets/images/2560/jpeg/Basisbild.jpeg 2560w,
assets/images/3840/jpeg/Basisbild.jpeg 3840w"
sizes="
(min-width: 3840px) 3840px,
(min-width: 2560px) 2560px,
(min-width: 1920px) 1920px,
(min-width: 1600px) 1600px,
(min-width: 1366px) 1366px,
100vw"
alt="Bratonien Adventskalender 2025"
decoding="async"
fetchpriority="high">
</picture>
<div class="door hinge-right" data-day="18" data-left="6" data-top="9" data-width="8.5">18</div>
<div class="openfield" data-day="18" data-left="6" data-top="9" data-width="8.5"></div>
<div class="door hinge-left" data-day="2" data-left="23" data-top="12" data-width="8.5">2</div>
<div class="openfield" data-day="2" data-left="23" data-top="12" data-width="8.5"></div>
<div class="door hinge-right" data-day="21" data-left="38" data-top="8" data-width="8.5">21</div>
<div class="openfield" data-day="21" data-left="38" data-top="8" data-width="8.5"></div>
<div class="door hinge-left" data-day="10" data-left="54" data-top="11" data-width="8.5">10</div>
<div class="openfield" data-day="10" data-left="54" data-top="11" data-width="8.5"></div>
<div class="door hinge-right" data-day="5" data-left="69" data-top="13" data-width="8.5">5</div>
<div class="openfield" data-day="5" data-left="69" data-top="13" data-width="8.5"></div>
<div class="door hinge-right" data-day="14" data-left="82" data-top="6" data-width="8.5">14</div>
<div class="openfield" data-day="14" data-left="82" data-top="6" data-width="8.5"></div>
<div class="fluegel left" data-day="6" data-top="28" data-left="9" data-width="6">6</div>
<div class="fluegel right" data-day="6" data-top="28" data-left="15" data-width="6"></div>
<div class="openfield" data-day="6" data-top="28" data-left="9" data-width="12"></div>
<div class="door hinge-left" data-day="1" data-left="29" data-top="30" data-width="8.5">1</div>
<div class="openfield" data-day="1" data-left="29" data-top="30" data-width="8.5"></div>
<div class="door hinge-right" data-day="23" data-left="39" data-top="31" data-width="8.5">23</div>
<div class="openfield" data-day="23" data-left="39" data-top="31" data-width="8.5"></div>
<div class="door hinge-left" data-day="4" data-left="55" data-top="27" data-width="8.5">4</div>
<div class="openfield" data-day="4" data-left="55" data-top="27" data-width="8.5"></div>
<div class="door hinge-right" data-day="9" data-left="68" data-top="34" data-width="8.5">9</div>
<div class="openfield" data-day="9" data-left="68" data-top="34" data-width="8.5"></div>
<div class="door hinge-left" data-day="17" data-left="84" data-top="29" data-width="8.5">17</div>
<div class="openfield" data-day="17" data-left="84" data-top="29" data-width="8.5"></div>
<div class="door hinge-right" data-day="8" data-left="4" data-top="50" data-width="8.5">8</div>
<div class="openfield" data-day="8" data-left="4" data-top="50" data-width="8.5"></div>
<div class="door hinge-left" data-day="16" data-left="21" data-top="52" data-width="8.5">16</div>
<div class="openfield" data-day="16" data-left="21" data-top="52" data-width="8.5"></div>
<div class="door hinge-right" data-day="3" data-left="35" data-top="50" data-width="8.5">3</div>
<div class="openfield" data-day="3" data-left="35" data-top="50" data-width="8.5"></div>
<div class="door hinge-left" data-day="12" data-left="52" data-top="49" data-width="8.5">12</div>
<div class="openfield" data-day="12" data-left="52" data-top="49" data-width="8.5"></div>
<div class="door hinge-right" data-day="19" data-left="64" data-top="55" data-width="8.5">19</div>
<div class="openfield" data-day="19" data-left="64" data-top="55" data-width="8.5"></div>
<div class="door hinge-left" data-day="7" data-left="84" data-top="50" data-width="8.5">7</div>
<div class="openfield" data-day="7" data-left="84" data-top="50" data-width="8.5"></div>
<div class="door hinge-right" data-day="13" data-left="8" data-top="72" data-width="8.5">13</div>
<div class="openfield" data-day="13" data-left="8" data-top="72" data-width="8.5"></div>
<div class="door hinge-left" data-day="15" data-left="24" data-top="69" data-width="8.5">15</div>
<div class="openfield" data-day="15" data-left="24" data-top="69" data-width="8.5"></div>
<div class="door hinge-right" data-day="22" data-left="37" data-top="73" data-width="8.5">22</div>
<div class="openfield" data-day="22" data-left="37" data-top="73" data-width="8.5"></div>
<div class="door hinge-left" data-day="11" data-left="54" data-top="68" data-width="8.5">11</div>
<div class="openfield" data-day="11" data-left="54" data-top="68" data-width="8.5"></div>
<div class="fluegel left" data-day="24" data-top="67" data-left="81" data-width="7.5">2</div>
<div class="fluegel right" data-day="24" data-top="67" data-left="88.5" data-width="7.5">4</div>
<div class="openfield" data-day="24" data-top="67" data-left="81" data-width="15.0"></div>
</div>
</main>
<!-- === Popup-Fenster für Geschenke === -->
<div id="popup-overlay">
<div id="popup-box">
<button id="popup-close">&times;</button>
<div id="popup-content"></div>
</div>
</div>
<script src="../shared/js/position.js"defer></script>
<script src="../shared/js/glitter.js"defer></script>
<script src="../shared/js/save-progress.js"defer></script>
<script src="../shared/js/lock.js"defer></script>
<script src="js/background.js"defer></script>
<script src="js/popup.js"defer></script>
<script src="../shared/js/door-open.js"defer></script>
</body>
</html>

View File

@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bratonien Adventskalender 2025</title>
<!-- === Styles === -->
<link rel="preload" href="/adventskalender/shared/css/style.css" as="style" onload="this.rel='stylesheet'">
<link rel="preload" href="/adventskalender/2025/css/popup.css" as="style" onload="this.rel='stylesheet'">
<link rel="preload" href="/adventskalender/2025/css/main.css" as="style" onload="this.rel='stylesheet'">
<link rel="preload" href="/adventskalender/2025/css/day.css" as="style" onload="this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="/adventskalender/shared/css/style.css">
<link rel="stylesheet" href="/adventskalender/2025/css/popup.css">
<link rel="stylesheet" href="/adventskalender/2025/css/main.css">
<link rel="stylesheet" href="/adventskalender/2025/css/day.css">
</noscript>
<!-- === Favicon === -->
<link rel="icon" type="image/png" href="/adventskalender/2025/favicon-2025.webp">
</head>
<body>
<!-- === HEADER (Include) === -->
<?php include __DIR__ . '/../includes/header.html'; ?>
<main>
<h1>Bratonien Adventskalender 2025</h1>
<div class="kalenderbild">
<picture>
<!-- AVIF -->
<source
type="image/avif"
srcset="
assets/images/480/avif/Basisbild.avif 480w,
assets/images/720/avif/Basisbild.avif 720w,
assets/images/1024/avif/Basisbild.avif 1024w,
assets/images/1366/avif/Basisbild.avif 1366w,
assets/images/1600/avif/Basisbild.avif 1600w,
assets/images/1920/avif/Basisbild.avif 1920w,
assets/images/2560/avif/Basisbild.avif 2560w,
assets/images/3840/avif/Basisbild.avif 3840w"
sizes="100vw">
<!-- WebP -->
<source
type="image/webp"
srcset="
assets/images/480/webp/Basisbild.webp 480w,
assets/images/720/webp/Basisbild.webp 720w,
assets/images/1024/webp/Basisbild.webp 1024w,
assets/images/1366/webp/Basisbild.webp 1366w,
assets/images/1600/webp/Basisbild.webp 1600w,
assets/images/1920/webp/Basisbild.webp 1920w,
assets/images/2560/webp/Basisbild.webp 2560w,
assets/images/3840/webp/Basisbild.webp 3840w"
sizes="100vw">
<!-- JPEG-Fallback -->
<img
src="assets/images/1366/jpeg/Basisbild.jpeg"
srcset="
assets/images/480/jpeg/Basisbild.jpeg 480w,
assets/images/720/jpeg/Basisbild.jpeg 720w,
assets/images/1024/jpeg/Basisbild.jpeg 1024w,
assets/images/1366/jpeg/Basisbild.jpeg 1366w,
assets/images/1600/jpeg/Basisbild.jpeg 1600w,
assets/images/1920/jpeg/Basisbild.jpeg 1920w,
assets/images/2560/jpeg/Basisbild.jpeg 2560w,
assets/images/3840/jpeg/Basisbild.jpeg 3840w"
sizes="100vw"
alt="Bratonien Adventskalender 2025"
decoding="async"
fetchpriority="high">
</picture>
<!-- === Türen & Felder === -->
<!-- (Dein gesamter bestehender Tür-HTML-Code bleibt unverändert hier stehen) -->
<!-- ... -->
</div>
</main>
<!-- === Popup-Fenster === -->
<div id="popup-overlay">
<div id="popup-box">
<button id="popup-close">&times;</button>
<div id="popup-content"></div>
</div>
</div>
<!-- === FOOTER (Include) === -->
<?php include __DIR__ . '/../includes/footer.html'; ?>
<!-- === Scripts === -->
<script src="/adventskalender/shared/js/header.js" defer></script>
<script src="/adventskalender/shared/js/position.js" defer></script>
<script src="/adventskalender/shared/js/glitter.js" defer></script>
<script src="/adventskalender/shared/js/save-progress.js" defer></script>
<script src="/adventskalender/shared/js/lock.js" defer></script>
<script src="/adventskalender/2025/js/background.js" defer></script>
<script src="/adventskalender/2025/js/popup.js" defer></script>
<script src="/adventskalender/shared/js/door-open.js" defer></script>
</body>
</html>

View File

@@ -0,0 +1,26 @@
<header class="main-header">
<div class="logo">
<a href="/">
<img src="/shared/images/logo.svg"
alt="Bratonien Logo"
onerror="this.onerror=null;this.src='/shared/images/logo.png';">
</a>
</div>
<div class="header-title">
<h1>Adventskalender 2025</h1>
</div>
<nav class="main-nav" id="mainNav">
<ul>
<li><a href="/">Übersicht</a></li>
<li><a href="/2025/">Kalender 2025</a></li>
<!-- <li><a href="/2025/">Kalender 2025</a></li> -->
<li><a href="https://bratonien.de" target="_blank" rel="noopener noreferrer">bratonien.de</a></li>
</ul>
</nav>
<button class="burger" id="burgerBtn" aria-label="Menü öffnen oder schließen">
<span></span><span></span><span></span>
</button>
</header>

View File

@@ -7,6 +7,8 @@
<link rel="stylesheet" href="shared/css/style.css">
</head>
<body>
<?php include __DIR__ . '/includes/header.html'; ?>
<main>
<h1>🎄 Bratonien Adventskalender</h1>
<p>Willkommen im Adventskalender-Archiv von Bratonien.</p>
@@ -17,5 +19,7 @@
</ul>
</section>
</main>
<?php include __DIR__ . '/includes/footer.html'; ?>
</body>
</html>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 2.7 MiB