improvements

2026-01-22 19:46:42 +01:00 · 2026-01-22 19:46:42 +01:00 · 5b63fe53b3
commit 5b63fe53b3
parent c8ef8d692f
12 changed files with 268 additions and 223 deletions
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@ -0,0 +1,10 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Ignored default folder with query files
+/queries/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
+# Editor-based HTTP Client requests
+/httpRequests/
--- a/.idea/Geizkragen.iml
+++ b/.idea/Geizkragen.iml
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
--- a/.idea/copilot.data.migration.agent.xml
+++ b/.idea/copilot.data.migration.agent.xml
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AgentMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>
--- a/.idea/copilot.data.migration.ask.xml
+++ b/.idea/copilot.data.migration.ask.xml
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AskMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>
--- a/.idea/copilot.data.migration.edit.xml
+++ b/.idea/copilot.data.migration.edit.xml
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="EditMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>
--- a/.idea/dataSources.xml
+++ b/.idea/dataSources.xml
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DataSourceManagerImpl" format="xml" multifile-model="true">
+    <data-source source="LOCAL" name="FSST" uuid="f9586db9-d1df-45a2-a60a-9a8716a08fec">
+      <driver-ref>mysql.8</driver-ref>
+      <synchronize>true</synchronize>
+      <jdbc-driver>com.mysql.cj.jdbc.Driver</jdbc-driver>
+      <jdbc-url>jdbc:mysql://localhost:3306/FSST</jdbc-url>
+      <working-dir>$ProjectFileDir$</working-dir>
+    </data-source>
+  </component>
+</project>
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/Geizkragen.iml" filepath="$PROJECT_DIR$/.idea/Geizkragen.iml" />
+    </modules>
+  </component>
+</project>
--- a/.idea/php.xml
+++ b/.idea/php.xml
@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="MessDetectorOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PHPCSFixerOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PHPCodeSnifferOptionsConfiguration">
+    <option name="highlightLevel" value="WARNING" />
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PhpStanOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PsalmOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+</project>
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
--- a/assets/images/logo.png
+++ b/assets/images/logo.png
--- a/header.php
+++ b/header.php
@ -1,5 +1,3 @@
-
-
 <!DOCTYPE html>
 <html lang="en">

@ -17,9 +15,12 @@
 <body>
 <!--==================== HEADER ====================-->
 <header class="header" id="header">
-    <nav class="nav container">
-        <img src="/assets/images/logo.png" alt="Geizhals" width="70" height="70">
+    <nav class="nav" aria-label="Hauptnavigation">
+        <a class="nav__logoLink" href="index.php">
+            <img class="nav__logo" src="/assets/images/logo.png" alt="Geizhals" width="150">
+        </a>

+        <div class="nav__inner container">
            <div class="nav__menu" id="nav-menu">
                <ul class="nav__list">
                    <li class="nav__item">
@ -27,19 +28,7 @@
                    </li>

                    <li class="nav__item">
-                    <a href="footer.php" class="nav__link">Test</a>
-                </li>
-
-                <li class="nav__item">
-                    <a href="#" class="nav__link">Services</a>
-                </li>
-
-                <li class="nav__item">
-                    <a href="#" class="nav__link">Featured</a>
-                </li>
-
-                <li class="nav__item">
-                    <a href="#" class="nav__link">Contact Me</a>
+                        <a href="footer.php" class="nav__link">Wunschliste</a>
                    </li>
                </ul>

@ -61,6 +50,6 @@
                    <i class="ri-menu-line"></i>
                </div>
            </div>
+        </div>
    </nav>
 </header>
-
--- a/style.css
+++ b/style.css
@ -33,6 +33,9 @@

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
+
+    /* Gutter des Standard-Containers (für Navbar-Logo-Offset genutzt) */
+    --nav-gutter: 1.5rem;
 }

 body {
@ -43,6 +46,15 @@ body {
    line-height: 1.45;
 }

+/* ==========================================================
+   CONTAINER (Wrapper)
+   ========================================================== */
+.container {
+    max-width: 1400px;
+    margin-inline: auto;
+    padding-inline: var(--nav-gutter);
+}
+
 /* ==========================================================
   HEADER
   ========================================================== */
@ -50,45 +62,172 @@ body {
    position: sticky;
    top: 0;
    z-index: 1000;
-    background: var(--header-bg);
+    background: var(--bg-header);
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
-    padding: 0; /* ← WICHTIG */
+    padding: 0;
 }

+/* Entferne die Padding-Änderung im Header nicht global auf .container.
+   (Das hat die Ausrichtung der rechten Elemente kaputt gemacht.) */
+/* .header .container { padding-inline: 0; } */

-.header-inner {
-    max-width: 1400px;
-    margin: auto;
+/* ==========================================================
+   NAVBAR
+   ========================================================== */
+.nav {
+    min-height: 56px;
+    width: 100%;
    display: flex;
    align-items: center;
+    background: var(--bg-header);
+}
+
+/* Logo wirklich ganz links (ohne Tricks) */
+.nav__logoLink {
+    display: inline-flex;
+    align-items: center;
+    padding-left: 0;
+    margin-left: 0; /* <-- wichtig: kein negatives Margin */
+}
+
+.nav__logo {
+    display: block;
+    margin: 0;
+    max-width: 150px;
+    height: auto;
+}
+
+/* Rechter Bereich: nimmt den restlichen Platz ein und richtet Inhalt rechts aus */
+.nav__inner {
+    margin-right: 0;
+    flex: 1;
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 1.25rem;
+}
+
+/* Damit Menü + Icons wirklich bis ganz rechts können (trotz container max-width) */
+.nav__inner.container {
+    margin-left: auto;
+}
+
+/* Desktop: Menü rechts */
+.nav__menu {
+    display: flex;
+    align-items: center;
+}
+
+.nav__list {
+    display: flex;
+    gap: 2rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.nav__link {
+    color: rgba(255,255,255,0.85);
+    font-size: 0.95rem;
+    font-weight: 500;
+    text-decoration: none;
+    transition: color var(--transition-normal);
+}
+
+.nav__link:hover {
+    color: var(--text-invert);
+}
+
+/* Action Icons rechts */
+.nav__actions {
+    display: flex;
+    align-items: center;
+    gap: 1.2rem;
+}
+
+.nav__search,
+.nav__login,
+.nav__toggle,
+.nav__close {
+    font-size: 1.3rem;
+    color: var(--text-invert);
+    cursor: pointer;
+    transition: color var(--transition-normal);
+}
+
+.nav__search:hover,
+.nav__login:hover {
+    color: var(--color-primary);
+}
+
+/* ==========================================================
+   TOGGLE / CLOSE
+   ========================================================== */
+.nav__toggle {
+    display: none;
+}
+
+.nav__close {
+    display: none;
+}
+
+/* ==========================================================
+   MOBILE NAV
+   ========================================================== */
+@media (max-width: 900px) {
+    /* Logo bleibt links, Container rechts (Toggle) */
+
+    .nav__toggle {
+        display: block;
+    }
+
+    .nav__menu {
+        position: fixed;
+        top: 0;
+        right: -100%;
+        width: 280px;
+        height: 100%;
+        background: #111827;
+        padding: 4rem 2rem;
+        transition: right 300ms ease;
+        flex-direction: column;
+        align-items: flex-start;
        gap: 2rem;
    }

-.logo {
-    font-size: 1.4rem;
-    font-weight: 700;
-    letter-spacing: 0.3px;
+    .nav__menu.show-menu {
+        right: 0;
    }

-.search {
-    flex: 1;
-    position: relative;
+    .nav__list {
+        flex-direction: column;
+        gap: 1.5rem;
    }

-.search input {
-    width: 100%;
-    padding: 0.6rem 1rem;
-    border-radius: var(--radius-sm);
-    border: none;
-    outline: none;
-    font-size: 0.95rem;
+    .nav__link {
+        font-size: 1.05rem;
+        color: #e5e7eb;
+    }
+
+    .nav__close {
+        display: block;
+        position: absolute;
+        top: 1.2rem;
+        right: 1.2rem;
+    }
 }

 /* ==========================================================
   LAYOUT
   ========================================================== */
-.container {
-    max-width: 1400px;
+/*
+   WICHTIG:
+   `.container` ist jetzt nur noch ein Wrapper (max-width/padding).
+   Das Grid-Layout liegt in `.layout`, damit die Navbar (`.nav.container`)
+   nicht versehentlich zu einem Grid wird.
+*/
+.layout {
    margin: 2rem auto;
    padding: 0 2rem;
    display: grid;
@ -248,7 +387,7 @@ body {
   RESPONSIVE
   ========================================================== */
@media (max-width: 900px) {
-    .container {
+    .layout {
        grid-template-columns: 1fr;
    }

@ -256,167 +395,3 @@ body {
        order: 2;
    }
 }
-
-/* ==========================================================
-   NAVBAR
-   ========================================================== */
-
-/* ==========================================================
-   BASIS / VARIABLEN
-   ========================================================== */
-:root {
-    --header-bg: #1f2937;
-    --header-text: #ffffff;
-    --header-muted: #9ca3af;
-    --primary: #2563eb;
-    --primary-hover: #1d4ed8;
-
-    --radius: 8px;
-    --transition: 200ms ease;
-}
-
-/* ==========================================================
-   CONTAINER
-   ========================================================== */
-.container {
-    max-width: 1400px;
-    margin-inline: auto;
-    padding-inline: 1.5rem;
-}
-
-/* ==========================================================
-   HEADER
-   ========================================================== */
-.nav {
-    height: 200px;        /* klassischer Navbar-Wert */
-    padding: 0 1.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-
-
-/* ==========================================================
-   NAV
-   ========================================================== */
-.nav {
-    height: 5px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-/* ==========================================================
-   LOGO
-   ========================================================== */
-.nav__logo {
-    font-size: 1.25rem;
-    font-weight: 700;
-    color: var(--header-text);
-    text-decoration: none;
-}
-
-/* ==========================================================
-   MENU (DESKTOP)
-   ========================================================== */
-.nav__menu {
-    display: flex;
-}
-
-.nav__list {
-    display: flex;
-    gap: 2rem;
-    list-style: none;
-}
-
-.nav__link {
-    color: var(--header-muted);
-    font-size: 0.95rem;
-    font-weight: 500;
-    text-decoration: none;
-    transition: color var(--transition);
-}
-
-.nav__link:hover {
-    color: var(--header-text);
-}
-
-/* ==========================================================
-   ACTION ICONS
-   ========================================================== */
-.nav__actions {
-    display: flex;
-    align-items: center;
-    gap: 1.2rem;
-}
-
-.nav__search,
-.nav__login,
-.nav__toggle,
-.nav__close {
-    font-size: 1.3rem;
-    color: var(--header-text);
-    cursor: pointer;
-    transition: color var(--transition);
-}
-
-.nav__search:hover,
-.nav__login:hover {
-    color: var(--primary);
-}
-
-/* ==========================================================
-   TOGGLE / CLOSE
-   ========================================================== */
-.nav__toggle {
-    display: none;
-}
-
-.nav__close {
-    display: none;
-}
-
-/* ==========================================================
-   MOBILE NAV
-   ========================================================== */
-@media (max-width: 900px) {
-
-    .nav__toggle {
-        display: block;
-    }
-
-    .nav__menu {
-        position: fixed;
-        top: 0;
-        right: -100%;
-        width: 280px;
-        height: 100%;
-        background: #111827;
-        padding: 4rem 2rem;
-        transition: right 300ms ease;
-        flex-direction: column;
-        gap: 2rem;
-    }
-
-    .nav__menu.show-menu {
-        right: 0;
-    }
-
-    .nav__list {
-        flex-direction: column;
-        gap: 1.5rem;
-    }
-
-    .nav__link {
-        font-size: 1.05rem;
-        color: #e5e7eb;
-    }
-
-    .nav__close {
-        display: block;
-        position: absolute;
-        top: 1.2rem;
-        right: 1.2rem;
-    }
-}