niklas.ortmann/webprogrammierung
0
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge pull request 'Home, sowie Login und Register Website haben nun CSS implementiert' (#5) from responsiveCSS into dev

Browse Source 
Reviewed-on: #5
This commit was merged in pull request #5.
This commit is contained in:
viratex
2026-05-13 15:14:37 +02:00
parent 6198d7b9ae 503df76d6b
commit bf06df461d
4 changed files with 207 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
auth/login.php
+28 -20
View File
@@ -41,30 +41,38 @@
</div> </div>
</nav> </nav>
<main> <main class="login-page">
<div style="width: 50%"> <div class="login-container">
<div style="width: 130px;"> <div class="logo-wrapper">
<img src="../images/logo.png" alt="" width="120" height="72"> <img src="../images/logo.png" alt="Logo" class="login-logo">
</div> </div>
<h1 style="width: 60%; text-align: center">Bitte anmelden</h1><br> <h1>Bitte anmelden</h1>
<label id="inputEmail" >E-Mail-Adresse / </label> <form>
<p style="width: 80%;">Benutzername/E-Mail-Adresse:</p> <label id ="inputEmail" class="screenreader-only">E-Mail Adresse / </label>
<input type="email" name="email" style="width: 80%;" placeholder="E-Mail-Adresse" required autofocus>
<p style="width: 80%;">Passwort:</p> <p class="input-label">Benutzername/E-Mail-Adresse:</p>
<input type="password" name="password" style="width: 80%;" placeholder="Passwort" required> <input type="email" name="email" class="login-input" placeholder="E-Mail-Adresse" required autofocus>
<div style="width: 80%;">
<label> <p class="input-label">Passwort:</p>
<input type="checkbox" name="remember-me" value="1"> angemeldet bleiben <input type="password" name="password" class="login-input" placeholder="Passwort" required>
</label>
<div class="checkbox-wrapper">
<label>
<input type="checkbox" name="remember-me" value="1"> angemeldet bleiben
</label>
</div>
<button type="submit" value="anmelden" name="loginSubmit" class="login-button">anmelden</button>
<div class="register-link">
<a href="register.php">Noch keinen Account? Jetzt hier registrieren!</a>
</div>
</form>
</div> </div>
<button type="submit" value="anmelden" name="loginSubmit" style="width: 80%;">anmelden</button><br>
<div style="width: 70%; text-align: center">
<a href="register.php" style="text-align: center;"> Noch keinen Account? Jetzt hier registrieren! </a>
</div>
</div>
</main> </main>
<footer style="position:fixed;bottom:0;width:100%;background:#fff;text-align:center;"> <footer style="position:fixed;bottom:0;width:100%;background:#fff;text-align:center;">
<a href="../legal/impressum.php">Impressum</a> <a href="../legal/impressum.php">Impressum</a>
<a href="../legal/datenschutz.php">Datenschutz</a> <a href="../legal/datenschutz.php">Datenschutz</a>
auth/register.php
+30 -23
View File
@@ -41,31 +41,38 @@
</div> </div>
</nav> </nav>
<main> <main class="login-page">
<div style="width: 50%"> <div class="login-container">
<div style="width: 130px;"> <div class="logo-wrapper">
<img src="../images/logo.png" alt="" width="120" height="72"> <img src="../images/logo.png" alt="Logo" class="login-logo">
</div>
<h1>Jetzt Registrieren!</h1>
<form>
<p class="input-label">Email:</p>
<input type="email" name="email" class="login-input" placeholder="mustermann@web.de" required>
<p class="input-label">Vorname:</p>
<input type="text" name="vorname" class="login-input" placeholder="Max" required>
<p class="input-label">Nachname:</p>
<input type="text" name="nachname" class="login-input" placeholder="Mustermann" required>
<p class="input-label">Passwort:</p>
<input type="password" name="password" class="login-input" placeholder="Passwort" required>
<div class="checkbox-wrapper">
<label>
<input type="checkbox" value="remember-me"> angemeldet bleiben
</label>
</div>
<button type="submit" value="anmelden" name="loginSubmit" class="login-button">kostenlos registrieren</button>
</form>
</div> </div>
<h1 style="width: 50%; text-align: center">Jetzt Registrieren!</h1><br>
<p style="width: 80%;"> Email:</p>
<input type="email" name="email" style="width: 80%;" placeholder="mustermann@web.de" required>
<p style="width: 80%;"> Vorname:</p>
<input type="text" name="vorname" style="width: 80%;" placeholder="Max" required>
<p style="width: 80%;"> Nachname:</p>
<input type="text" name="nachname" style="width: 80%;" placeholder="Mustermann" required>
<p style="width: 80%;"> Passwort:</p>
<input type="password" name="password" style="width: 80%;" placeholder="Passwort" required>
<div style="width: 80%;">
<label>
<input type="checkbox" value="remember-me"> angemeldet bleiben
</label>
</div>
<button type="submit" value="anmelden" name="loginSubmit" style="width: 80%;">kostenlos registrieren</button>
</div>
</main> </main>
<footer style="position:fixed;bottom:0;width:100%;background:#fff;text-align:center;"> <footer style="position:fixed;bottom:0;width:100%;background:#fff;text-align:center;">
<a href="../legal/impressum.php">Impressum</a> <a href="../legal/impressum.php">Impressum</a>
<a href="../legal/datenschutz.php">Datenschutz</a> <a href="../legal/datenschutz.php">Datenschutz</a>
content/home.php
+23 -17
View File
@@ -13,22 +13,28 @@
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. sea takimata sanctus est Lorem ipsum dolor sit amet.
</p> </p>
<div>
<a href = "content/informatik.php" style = "padding: 5px; text-align: center; text-decoration: none; display: inline-block;"><b>Informatik</b></a> <br> <!-- Flexbox -->
<div> <div class="flexbox">
<a href="articles/datenschutz.php">Datenschutz vs. Datensicherheit</a> <div class="container">
</div> <a href="content/informatik.php" class="category-link">Informatik</a>
</div> <div class="article-link">
<div> <a href="articles/datenschutz.php">Datenschutz vs. Datensicherheit</a>
<a href = "content/mathe.php" style = "padding: 5px; text-align: center; text-decoration: none; display: inline-block;"><b>Mathe</b></a> <br> </div>
<div> </div>
<a href="articles/pythagoras.php">Satz des Pythagoras</a>
</div> <div class="container">
</div> <a href="content/mathe.php" class="category-link">Mathe</a>
<div> <div class="article-link">
<a href = "content/physik.php" style = "padding: 5px; text-align: center; text-decoration: none; display: inline-block;"><b>Physik</b></a> <a href="articles/pythagoras.php">Satz des Pythagoras</a>
<div> </div>
<a href="articles/tunneleffekt.php">Der Tunneleffekt</a> </div>
</div>
<div class="container">
<a href="content/physik.php" class="category-link">Physik</a>
<div class="article-link">
<a href="articles/tunneleffekt.php">Der Tunneleffekt</a>
</div>
</div>
</div> </div>
</main> </main>
css/main.css
+126
View File
@@ -1,3 +1,129 @@
main {
max-width:1200px;
margin: 0 auto;
padding: 20px;
font-family: Arial;
}
.flexbox {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 30px;
}
.container {
border: 1px solid white;
padding: 15px;
border-radius: 8px;
background-color: coral;
transition: transform 0.2s;
}
.category-link {
display: block;
text-align: left;
text-decoration: none;
font-weight: bold;
padding: 10px;
background-color: blue;
color: white;
border-radius: 4px;
margin-bottom: 10px;
}
.article-link a {
color: blue;
text-decoration: none;
}
@media (min-width: 1024px) {
.container {
padding: 25px;
}
}
/* Seite wird horizontal und vertikal zentriert */
.login-page {
display: flex;
justify-content: center;
align-items: center;
min-height: 80vh;
}
.login-container {
width: 90%;
max-width: 450px;
padding: 30px;
border: 1px solid white;
border-radius: 10px;
background-color: white;
}
.logo-wrapper {
text-align: center;
margin-bottom: 20px;
}
.login-logo {
width: 120px;
height: auto;
}
.login-container h1 {
text-align: center;
margin-bottom: 25px;
font-size: 1.5rem;
}
.input-label {
margin-bottom: 5px;
font-weight: bold;
width: 100%;
}
.login-input {
width: 100%;
padding: 12px;
margin-bottom: 20px;
border: 1px solid white;
border-radius: 4px;
box-sizing: border-box;
}
.checkbox-wrapper {
margin-bottom: 20px;
}
.login-button {
width: 100%;
padding: 12px;
background-color: blue;
color: white;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
}
.login-button:hover {
background-color: blue;
}
.register-link {
margin-top: 20px;
text-align: center;
font-size: 0.9rem;
}
/* Versteckt das doppelte Label fuer Screenreader/Accessibility */
.screenreader-only {
display: none;
}
body { body {
background-color: coral; background-color: coral;
} }