From 3a8948c60c6dc8761c87c2837e75ddf777953d05 Mon Sep 17 00:00:00 2001 From: fabian Date: Fri, 9 Jan 2026 18:30:41 +0000 Subject: [PATCH] Initial commit: Website --- .gitignore | 5 + .htaccess | 9 ++ .htpasswd | 1 + account.php | 0 footer.php | 0 index.php | 169 ++++++++++++++++++++++++++++++++++ navbar.php | 19 ++++ style.css | 258 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 8 files changed, 461 insertions(+) create mode 100755 .gitignore create mode 100755 .htaccess create mode 100755 .htpasswd create mode 100755 account.php create mode 100755 footer.php create mode 100755 index.php create mode 100755 navbar.php create mode 100755 style.css diff --git a/.gitignore b/.gitignore new file mode 100755 index 0000000..e3714ac --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +/vendor/ +/node_modules/ +.env +*.log +.cache/ diff --git a/.htaccess b/.htaccess new file mode 100755 index 0000000..4ad5bb2 --- /dev/null +++ b/.htaccess @@ -0,0 +1,9 @@ +AuthType Basic +AuthName "Geschützter Bereich" +AuthUserFile /FSST/Website/.htpasswd +Require valid-user + +# .htpasswd vor Auslieferung schützen + + Require all denied + diff --git a/.htpasswd b/.htpasswd new file mode 100755 index 0000000..d9889a8 --- /dev/null +++ b/.htpasswd @@ -0,0 +1 @@ +FSST:$apr1$HhgwKWOh$AtczxeE9BzXsBLaQLDKB20 diff --git a/account.php b/account.php new file mode 100755 index 0000000..e69de29 diff --git a/footer.php b/footer.php new file mode 100755 index 0000000..e69de29 diff --git a/index.php b/index.php new file mode 100755 index 0000000..4742aaf --- /dev/null +++ b/index.php @@ -0,0 +1,169 @@ + + + + + +Preisvergleich – Demo + + + + + + + + + + + + + + + +

💻 Preisvergleich – Beispielanwendung

+ + + +
+Kategorie: + + +Max Preis (€): + + + +
+ + 0) { + $sql .= " AND p.categoryID = ?"; + $params[] = $categoryID; + $types .= "i"; +} + +if ($maxPrice > 0) { + $sql .= " AND (o.price + o.shippingCost) <= ?"; + $params[] = $maxPrice; + $types .= "d"; +} + +$sql .= " GROUP BY p.productID ORDER BY bestPrice ASC"; + +$stmt = mysqli_prepare($con, $sql); +if ($params) { + mysqli_stmt_bind_param($stmt, $types, ...$params); +} +mysqli_stmt_execute($stmt); +$result = mysqli_stmt_get_result($stmt); + +// ====================================== +// Ausgabe +while ($p = mysqli_fetch_assoc($result)): +?> +
+
+ Kategorie:
+ 💰 Ab € + +
+ Specs:
+ "; + } + ?> +
+ +
+ Angebote:
+ "; + } + ?> +
+
+ + + + + + diff --git a/navbar.php b/navbar.php new file mode 100755 index 0000000..a3c3b29 --- /dev/null +++ b/navbar.php @@ -0,0 +1,19 @@ + + + diff --git a/style.css b/style.css new file mode 100755 index 0000000..965875f --- /dev/null +++ b/style.css @@ -0,0 +1,258 @@ +/* ================================ + 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; +} + +/*-----------------------------------------------------*/