PBBFA23CSE/Bib-Arts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dingdagabum

Browse Source
This commit is contained in:
Viktor Sergeev 2025-06-30 14:57:32 +02:00
parent 3be7e1ecfd
commit 16a91cc028
8 changed files with 326 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

264
CSS/style.css
View File

@ -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%;
height: 240px;
width: 100vw;
height: 180px;
background-color: #BAC8D4;
display: grid;
grid-template-columns: 6% 5% 43% 32% 14%;
grid-template-rows: 45% 10% 45%;
display: flex;
flex-direction: column;
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;
min-height: 80%;
grid-template-columns: 1fr 1fr;
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 {
height: 480px;
width: 670px;
background-image: url("../images/beispiel-austellung1.png");
.beispiel-austellung1-img, .beispiel-austellung2-img {
height: 200px;
width: 90vw;
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;
}
}

8
Views/Contact/showConfirmation.phtml
View File

@ -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'; ?>

6
Views/Login/showLoginPage.phtml
View File

@ -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>

6
Views/Register/showRegisterPage.phtml
View File

@ -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>

7
Views/Welcome/showWelcome.phtml
View File

@ -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>

12
Views/footer.phtml
View File

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

19
Views/header.phtml
View File

@ -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>
<div id="wrapper">
<nav id="navigation">
<div class="link-container">
<div id="logo" ><a class="link-logo" href="#"></a></div>
<button id="nav-toggle-btn" aria-label="Menü ein-/ausklappen">&#9660;</button>
<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>
</div>
</nav>
</body>
<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>

39
index.php
View File

@ -1,8 +1,14 @@
<!DOCTYPE html>
<html lang="HTML-5">
<?php
include 'Views/header.phtml';
?>
<body>
<div id="wrapper">
<?php
session_start();
session_start();
spl_autoload_register(function ($className) {
spl_autoload_register(function ($className) {
if (substr($className, 0, 5) !== 'Blog\\') {
// not our business
return;
@ -13,22 +19,22 @@ spl_autoload_register(function ($className) {
if (file_exists($fileName)) {
include $fileName;
}
});
});
$controllerName = "";
$doMethodName = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$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 {
} 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';
$controllerClassName = 'Blog\\Controller\\'.ucfirst($controllerName).'Controller';
if (method_exists($controllerClassName, $doMethodName)) {
if (method_exists($controllerClassName, $doMethodName)) {
$view = new \Blog\Library\View(__DIR__.DIRECTORY_SEPARATOR.'Views'
, ucfirst($controllerName), $doMethodName);
@ -37,9 +43,14 @@ if (method_exists($controllerClassName, $doMethodName)) {
$view->render();
} else {
} else {
new \Blog\Library\ErrorMsg('Page not found: '.$controllerClassName.'::'.$doMethodName);
}
}
?>
</div>
<?php
include 'Views/footer.phtml';
?>
</body>
</html>