dingdagabum

CSS/style.css

@@ -4,9 +4,22 @@ body {
     font-size: 15px;
     margin: 0;
     padding: 0;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    width: 100vw;
+    max-width: 100vw;
+    overflow-x: hidden;
 }
 #wrapper {
-
+    flex: 1 0 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    margin-bottom: 20px;
+    width: 100vw;
+    max-width: 100vw;
 }
 
 a {
@@ -16,6 +29,11 @@ a {
 #navigation {
     display: flex;
     justify-content: center;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    background: #BAC8D4;
+    width: 100vw;
 }
 .link-container {
     display: grid;
@@ -38,17 +56,19 @@ a {
     background-size: contain;
 }
 #footer {
-    position: absolute;
+    position: relative;
     bottom: 0;
     left: 0;
-    width: 100%;
+    width: 100vw;
-    height: 240px;
+    height: 180px;
     background-color: #BAC8D4;
-
+    display: flex;
-    display: grid;
+    flex-direction: column;
-    grid-template-columns: 6% 5% 43% 32% 14%;
-    grid-template-rows: 45% 10% 45%;
     align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    z-index: 999;
+    padding: 10px 0;
 }
 
 .container-zahlungsmittel {
@@ -61,11 +81,16 @@ a {
 }
 
 .inhalt {
+    flex: 1 1 auto;
     display: flex;
-    height: 10px;
     justify-content: center;
     align-items: center;
-    width: 100%;
+    width: 100vw;
+    min-height: 0;
+    min-width: 0;
+    margin: 0;
+    padding: 0 2vw;
+    box-sizing: border-box;
 }
 
 .zahlungsmittel-img {
@@ -102,27 +127,26 @@ a {
     padding-right: 30px;
 }
 .container-welcome-inhalt {
-    grid-template-columns: 39% 61%;
     display: grid;
-    width: 110em;
+    grid-template-columns: 1fr 1fr;
-    min-height: 80%;
+    width: 100%;
+    max-width: 900px;
+    min-height: 200px;
     border-radius: 10px;
+    background: white;
+    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
+    justify-items: center;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 10px 0;
 }
 
-.beispiel-austellung1-img {
+.beispiel-austellung1-img, .beispiel-austellung2-img {
-    height: 480px;
+    height: 200px;
-    width: 670px;
+    width: 90vw;
-    background-image: url("../images/beispiel-austellung1.png");
+    max-width: 320px;
     background-position: center;
     background-size: contain;
-    justify-self: right;
-    border-radius: 10px;
-}
-.beispiel-austellung2-img {
-    background-image: url("../images/beispiel-austellung2.png");
-    background-position: center;
-    background-size: contain;
-    justify-self: right;
     border-radius: 10px;
 }
 
@@ -133,4 +157,194 @@ a {
     width: 900px;
     height: 450px;
     border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+}
+
+@media (max-width: 600px) {
+    body {
+        font-size: 14px;
+        width: 100vw;
+        max-width: 100vw;
+        overflow-x: hidden;
+    }
+    #wrapper {
+        width: 100vw;
+        max-width: 100vw;
+    }
+    #navigation {
+        width: 100vw;
+        min-width: 0;
+        padding: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .link-container {
+        width: 100vw;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        row-gap: 8px;
+        border-radius: 0;
+        padding: 0 4px;
+    }
+    .links {
+        font-size: 18px;
+        justify-content: center;
+        align-items: center;
+        padding: 6px 0;
+        text-align: center;
+        width: 100%;
+    }
+    #logo {
+        width: 120px;
+        height: 40px;
+        margin: 0 auto 8px auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .container-welcome-inhalt {
+        grid-template-columns: 1fr;
+        width: 100vw;
+        max-width: 100vw;
+        min-height: 0;
+        padding: 8px 0;
+    }
+    .beispiel-austellung1-img, .beispiel-austellung2-img {
+        width: 90vw;
+        max-width: 98vw;
+        height: 120px;
+        margin-bottom: 10px;
+    }
+    .inhalt {
+        width: 100vw;
+        min-width: 0;
+        max-width: 100vw;
+        padding: 0 2vw;
+        box-sizing: border-box;
+        flex-direction: column;
+        align-items: stretch;
+    }
+    #footer {
+        width: 100vw;
+        height: auto;
+        min-height: 120px;
+        padding: 10px 0 10px 0;
+        font-size: 13px;
+    }
+    .container-zahlungsmittel {
+        width: 100vw;
+        text-align: center;
+        padding: 0;
+    }
+    .header-zahlungsarten {
+        font-size: 1.1em;
+        padding-right: 0;
+        text-align: center;
+    }
+    .zahlungsmittel-img {
+        width: 90vw;
+        max-width: 200px;
+        height: 30px;
+        margin: 0 auto;
+    }
+    .line {
+        width: 95vw;
+    }
+    .link-impressum, .link-datenschutz, .link-nutzungsbedingungen {
+        display: block;
+        padding: 2px 0;
+        text-align: center;
+    }
+    .text-bib {
+        display: block;
+        text-align: center;
+        padding: 0;
+    }
+    .desktop-only {
+        display: none !important;
+    }
+    .mobile-only {
+        display: block !important;
+    }
+    .login-container {
+        position: static;
+        width: 95vw;
+        max-width: 400px;
+        height: auto;
+        margin: 24px auto;
+        padding: 16px 8px;
+        box-sizing: border-box;
+    }
+    .login-container h1 {
+        font-size: 1.5em;
+        text-align: center;
+    }
+    .login-container form,
+    .login-container label,
+    .login-container input {
+        width: 100%;
+        max-width: 100%;
+        box-sizing: border-box;
+    }
+    .login-container button,
+    .login-container a {
+        width: 100%;
+        max-width: 100%;
+        margin-top: 8px;
+        text-align: center;
+        box-sizing: border-box;
+    }
+    #nav-toggle-btn {
+        display: block;
+        background: none;
+        border: none;
+        font-size: 2em;
+        cursor: pointer;
+        margin: 0 auto 8px auto;
+        transition: transform 0.2s;
+    }
+    .nav-links {
+        display: none;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+        transition: max-height 0.3s ease;
+        overflow: hidden;
+    }
+    .nav-links.open {
+        display: flex;
+    }
+    #nav-toggle-btn.open {
+        transform: rotate(180deg);
+    }
+}
+
+@media (min-width: 601px) {
+    .mobile-only {
+        display: none !important;
+    }
+    .desktop-only {
+        display: block !important;
+    }
+    #nav-toggle-btn {
+        display: none;
+    }
+    .nav-links {
+        display: flex !important;
+        flex-direction: row;
+        align-items: center;
+        width: auto;
+        gap: 32px;
+    }
+    .nav-links .links {
+        margin: 0 12px;
+    }
 }

Views/Contact/showConfirmation.phtml

@@ -1,12 +1,6 @@
-<?php
+  
-include dirname(__DIR__).'/header.phtml';
-?>    
 
 <div class="msg">
 <p>Ihre Anfrage wurde erfolgreich versendet.</p>
 <a href="?controller=Welcome&do=showWelcome">Weiter</a>
 </div>
-
-
-
-<?php include dirname(__DIR__).'/footer.phtml'; ?>

Views/Login/showLoginPage.phtml

@@ -7,9 +7,6 @@
     <link href="../../CSS/style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
-<?php
-include dirname(__DIR__) . '/header.phtml';
-?>
 <div class="inhalt">
     <div class="login-container">
         <h1>Anmelden</h1>
@@ -29,9 +26,6 @@ include dirname(__DIR__) . '/header.phtml';
 
     </div>
 </div>
-<?php
-include dirname(__DIR__) . '/footer.phtml';
-?>
 <body>
 </html>
 

Views/Register/showRegisterPage.phtml

@@ -7,9 +7,6 @@
     <link href="../../CSS/style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
-<?php
-include dirname(__DIR__) . '/header.phtml';
-?>
 <div class="inhalt">
     <div class="login-container">
         <h1>Registrieren</h1>
@@ -73,9 +70,6 @@ include dirname(__DIR__) . '/header.phtml';
 
     </div>
 </div>
-<?php
-include dirname(__DIR__) . '/footer.phtml';
-?>
 <body>
 </html>
 

Views/Welcome/showWelcome.phtml

@@ -1,7 +1,5 @@
-<!DOCTYPE html>
-<html lang="HTML-5">
 <?php
-include dirname(__DIR__).'/header.phtml';
+// Header is included in index.php
 ?>
 <div class="inhalt">
     <div class="container-welcome-inhalt">
@@ -10,7 +8,6 @@ include dirname(__DIR__).'/header.phtml';
     </div>
 </div>
 <?php
-include dirname(__DIR__).'/footer.phtml';
+// Footer is included in index.php
 ?>
-</html>
 

Views/footer.phtml

@@ -1,19 +1,11 @@
-<head>
+<div id="footer">
-    <title>VR Contact</title>
+    <div class="container-zahlungsmittel">
-    <meta charset="UTF-8" />
+        <h2 class="header-zahlungsarten">Mögliche Zahlungsarten</h2>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <div class="zahlungsmittel-img"></div>
-    <link href="CSS/style.css" rel="stylesheet" type="text/css" />
-</head>
-<body>
-    <div id="footer">
-        <div class="container-zahlungsmittel">
-            <h2 class="header-zahlungsarten">Mögliche Zahlungsarten</h2>
-            <div class="zahlungsmittel-img"></div>
-        </div>
-        <div class="line"></div>
-        <a class="link-impressum">Impressum</a>
-        <a class="link-datenschutz">Datenschutz</a>
-        <a class="link-nutzungsbedingungen">Nutzungsbedingungen</a>
-        <span class="text-bib">© bib arts GmbH</span>
     </div>
-</body>
+    <div class="line"></div>
+    <a class="link-impressum">Impressum</a>
+    <a class="link-datenschutz">Datenschutz</a>
+    <a class="link-nutzungsbedingungen">Nutzungsbedingungen</a>
+    <span class="text-bib">© bib arts GmbH</span>
+</div>

Views/header.phtml

@@ -6,16 +6,29 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link href="CSS/style.css" rel="stylesheet" type="text/css" />
     </head>
-    <body>
+    <nav id="navigation">
-    <div id="wrapper">
+        <div class="link-container">
-        <nav id="navigation">
+            <div id="logo" ><a class="link-logo" href="#"></a></div>
-            <div class="link-container">
+            <button id="nav-toggle-btn" aria-label="Menü ein-/ausklappen">&#9660;</button>
-                <div id="logo" ><a class="link-logo" href="#"></a></div>
+            <div class="nav-links">
                 <a id="link-tickets" class="links" href="#">Tickets</a>
                 <a id="link-infos" class="links" href="?controller=Welcome&do=showWelcome">Infos</a>
                 <a id="link-profil" class="links" href="?controller=Contact&do=showContactForm">Profil</a>
                 <div id="profile-picture"></div>
             </div>
-        </nav>
+        </div>
-    </body>
+    </nav>
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        var btn = document.getElementById('nav-toggle-btn');
+        var links = document.querySelector('.nav-links');
+        if (btn && links) {
+            btn.addEventListener('click', function() {
+                links.classList.toggle('open');
+                btn.classList.toggle('open');
+                btn.innerHTML = links.classList.contains('open') ? '&#9650;' : '&#9660;';
+            });
+        }
+    });
+    </script>
 </html>

index.php

@@ -1,45 +1,56 @@
-<?php 
+<!DOCTYPE html>
-
+<html lang="HTML-5">
-session_start();
+<?php
-
+include 'Views/header.phtml';
-spl_autoload_register(function ($className) {
-    if (substr($className, 0, 5) !== 'Blog\\') {
-            // not our business
-            return;
-    }
-
-    $fileName = __DIR__.'/'.str_replace('\\', DIRECTORY_SEPARATOR, substr($className, 5)).'.php';
-
-    if (file_exists($fileName)) {
-            include $fileName;
-    }
-});    
-    
-    
-$controllerName = "";
-$doMethodName = "";
-if ($_SERVER["REQUEST_METHOD"] == "POST") {
-    $controllerName = isset($_POST['controller']) && $_POST['controller'] ? $_POST['controller'] : "Welcome";
-    $doMethodName = isset($_POST['do']) && $_POST['do'] ? $_POST['do'] : "showWelcome";
-} else {
-    $controllerName = isset($_GET['controller']) && $_GET['controller'] ? $_GET['controller'] : "Welcome";
-    $doMethodName = isset($_GET['do']) && $_GET['do'] ? $_GET['do'] : "showWelcome";
-}
-
-$controllerClassName = 'Blog\\Controller\\'.ucfirst($controllerName).'Controller';
-
-if (method_exists($controllerClassName, $doMethodName)) {
-    $view = new \Blog\Library\View(__DIR__.DIRECTORY_SEPARATOR.'Views'
-                , ucfirst($controllerName), $doMethodName);
-    
-    $controller = new $controllerClassName($view);
-    $controller->$doMethodName();
-
-    $view->render();
-
-} else {
-    new \Blog\Library\ErrorMsg('Page not found: '.$controllerClassName.'::'.$doMethodName); 
-}
-  
 ?>
+<body>
+    <div id="wrapper">
+        <?php
+        session_start();
+
+        spl_autoload_register(function ($className) {
+            if (substr($className, 0, 5) !== 'Blog\\') {
+                    // not our business
+                    return;
+            }
+
+            $fileName = __DIR__.'/'.str_replace('\\', DIRECTORY_SEPARATOR, substr($className, 5)).'.php';
+
+            if (file_exists($fileName)) {
+                    include $fileName;
+            }
+        });    
+        
+        
+        $controllerName = "";
+        $doMethodName = "";
+        if ($_SERVER["REQUEST_METHOD"] == "POST") {
+            $controllerName = isset($_POST['controller']) && $_POST['controller'] ? $_POST['controller'] : "Welcome";
+            $doMethodName = isset($_POST['do']) && $_POST['do'] ? $_POST['do'] : "showWelcome";
+        } else {
+            $controllerName = isset($_GET['controller']) && $_GET['controller'] ? $_GET['controller'] : "Welcome";
+            $doMethodName = isset($_GET['do']) && $_GET['do'] ? $_GET['do'] : "showWelcome";
+        }
+
+        $controllerClassName = 'Blog\\Controller\\'.ucfirst($controllerName).'Controller';
+
+        if (method_exists($controllerClassName, $doMethodName)) {
+            $view = new \Blog\Library\View(__DIR__.DIRECTORY_SEPARATOR.'Views'
+                        , ucfirst($controllerName), $doMethodName);
+            
+            $controller = new $controllerClassName($view);
+            $controller->$doMethodName();
+
+            $view->render();
+
+        } else {
+            new \Blog\Library\ErrorMsg('Page not found: '.$controllerClassName.'::'.$doMethodName); 
+        }
+        ?>
+    </div>
+<?php
+include 'Views/footer.phtml';
+?>
+</body>
+</html>