diff --git a/header.php b/header.php deleted file mode 100644 index ba8d448..0000000 --- a/header.php +++ /dev/null @@ -1,4 +0,0 @@ -
- awdasd - - vfffbgfbgf \ No newline at end of file diff --git a/index.php b/index.php index 03e1405..473b2cd 100644 --- a/index.php +++ b/index.php @@ -1,2 +1,9 @@ - + + + + + + + + + + + + + + Responsive navbar with search and login - Bedimcode + + + + diff --git a/style.css b/style.css index 965875f..e69de29 100755 --- a/style.css +++ b/style.css @@ -1,258 +0,0 @@ -/* ================================ - Modernes Preisvergleich-Stylesheet - ================================ */ - -/* --- CSS Reset (leichtgewichtig) --- */ -*, -*::before, -*::after { - box-sizing: border-box; -} - -/* --- Root-Variablen --- */ -:root { - --bg-main: #f4f6f8; - --bg-card: #ffffff; - --color-primary: #2563eb; - --color-secondary: #64748b; - --color-text: #0f172a; - --color-muted: #475569; - --border-radius: 10px; - --shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.08); -} - -/* --- Grundlayout --- */ -body { - margin: 0; - padding: 32px; - font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif; - background-color: var(--bg-main); - color: var(--color-text); - line-height: 1.6; -} - -/* --- Überschrift --- */ -h1 { - margin-top: 0; - margin-bottom: 24px; - font-size: 1.8rem; - font-weight: 600; -} - -/* --- Formular --- */ -form { - background: var(--bg-card); - padding: 16px 20px; - margin-bottom: 28px; - border-radius: var(--border-radius); - box-shadow: var(--shadow-soft); - display: flex; - flex-wrap: wrap; - gap: 12px; - align-items: center; -} - -form label { - font-size: 0.9rem; - color: var(--color-muted); -} - -select, -input[type="number"] { - padding: 8px 10px; - border-radius: 6px; - border: 1px solid #cbd5f5; - font-size: 0.95rem; - background: #fff; -} - -select:focus, -input:focus { - outline: none; - border-color: var(--color-primary); -} - -/* --- Button --- */ -button { - padding: 9px 16px; - border-radius: 6px; - border: none; - background-color: var(--color-primary); - color: #fff; - font-size: 0.95rem; - cursor: pointer; - transition: background-color 0.2s ease; -} - -button:hover { - background-color: #1d4ed8; -} - -/* --- Produktkarte --- */ -.product { - background: var(--bg-card); - padding: 18px 22px; - margin-bottom: 20px; - border-radius: var(--border-radius); - box-shadow: var(--shadow-soft); -} - -/* Produkt-Titel */ -.product > strong { - font-size: 1.05rem; -} - -/* --- Preis --- */ -.product .price { - font-size: 1.1rem; - font-weight: 600; - color: var(--color-primary); -} - -/* --- Specs --- */ -.spec { - margin-top: 12px; - padding-top: 10px; - border-top: 1px solid #e5e7eb; - font-size: 0.9rem; - color: var(--color-muted); -} - -/* --- Angebote --- */ -.offer { - margin-top: 12px; - padding-top: 10px; - border-top: 1px dashed #e5e7eb; - font-size: 0.9rem; -} - -/* --- Responsive Feinschliff --- */ -@media (max-width: 600px) { - body { - padding: 16px; - } - - form { - flex-direction: column; - align-items: stretch; - } - - button { - width: 100%; - } -} - -/* ====================================== - Elegant Dark Mode – refined UI - ====================================== */ - -@media (prefers-color-scheme: dark) { - :root { - /* Background Layers */ - --bg-main: #0b0f19; /* App-Hintergrund */ - --bg-card: #111827; /* Cards */ - --bg-input: #020617; /* Inputs */ - - /* Text */ - --color-text: #e5e7eb; - --color-muted: #9ca3af; - - /* Accent */ - --color-primary: #60a5fa; /* sanfteres Blau */ - - /* Borders & Shadow */ - --border-soft: #1e293b; - --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.65); - } - - body { - background: - radial-gradient(1200px at top, #111827 0%, var(--bg-main) 60%); - color: var(--color-text); - } - - /* Cards */ - form, - .product { - background: - linear-gradient( - 180deg, - rgba(255,255,255,0.02), - rgba(0,0,0,0.15) - ), - var(--bg-card); - box-shadow: var(--shadow-soft); - border: 1px solid var(--border-soft); - } - - /* Inputs */ - select, - input[type="number"] { - background: var(--bg-input); - color: var(--color-text); - border: 1px solid var(--border-soft); - } - - select:focus, - input:focus { - border-color: var(--color-primary); - box-shadow: 0 0 0 1px var(--color-primary); - } - - /* Button */ - button { - background: linear-gradient( - 180deg, - #60a5fa, - #3b82f6 - ); - color: #020617; - box-shadow: 0 4px 12px rgba(96, 165, 250, 0.35); - } - - button:hover { - filter: brightness(1.08); - } - - /* Produkttext */ - .product > strong { - color: #f8fafc; - } - - /* Specs / Offers */ - .spec, - .offer { - border-top: 1px solid var(--border-soft); - color: var(--color-muted); - } -} - - - -/*-----------------------NAV-BAR-----------------------*/ - -.navbar { - background: #1e1e1e; - padding: 12px 24px; -} - -.navbar ul { - list-style: none; - display: flex; - gap: 24px; - margin: 0; - padding: 0; -} - -.navbar a { - color: #ddd; - text-decoration: none; - font-weight: 500; -} - -.navbar li.active a { - color: #4fc3f7; - border-bottom: 2px solid #4fc3f7; -} - -/*-----------------------------------------------------*/