From b907ce3d818617114491054f53341c97e70dfe55 Mon Sep 17 00:00:00 2001
From: Fabian Schieder <fabian.schieder.1010@gmail.com>
Date: Mon, 6 Apr 2026 21:08:03 +0200
Subject: [PATCH] Refactor offerAdder layout for improved UI and accessibility

---
 offerAdder.php | 123 +++++++++++++++++++++++++------------------------
 1 file changed, 64 insertions(+), 59 deletions(-)

diff --git a/offerAdder.php b/offerAdder.php
index 805e9e1..c961c74 100644
--- a/offerAdder.php
+++ b/offerAdder.php
@@ -67,67 +67,72 @@ if ($shopsResult) {
 
 include 'header.php';
 ?>
-<main class="page-main" style="padding: 2rem;">
-    <div class="container" style="max-width: 800px; margin: 0 auto; background: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
-        <h1 style="margin-bottom: 1.5rem;">Angebot hinzufügen</h1>
-        
-        <?php if ($message): ?>
-            <div class="alert alert-<?php echo htmlspecialchars($messageType); ?>" style="padding:15px; margin-bottom: 20px; border-radius: 4px; background-color: <?php echo $messageType === 'success' ? '#d4edda' : '#f8d7da'; ?>; color: <?php echo $messageType === 'success' ? '#155724' : '#721c24'; ?>; border: 1px solid <?php echo $messageType === 'success' ? '#c3e6cb' : '#f5c6cb'; ?>;">
-                <?php echo htmlspecialchars($message); ?>
-            </div>
-        <?php endif; ?>
+<main class="auth">
+    <section class="auth__grid" style="grid-template-columns: 1fr;">
+        <div class="auth__card">
+            <header class="auth__header">
+                <h2 class="auth__title">Angebot hinzufügen</h2>
+            </header>
 
-        <form method="POST" action="offerAdder.php" style="display: flex; flex-direction: column; gap: 1.5rem;">
-            <input type="hidden" name="action" value="add_offer">
-            
-            <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-                <label for="product_id" style="font-weight: 600;">Produkt auswählen *</label>
-                <select id="product_id" name="product_id" required style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">
-                    <option value="">-- Bitte wählen --</option>
-                    <?php foreach ($products as $product): ?>
-                        <option value="<?php echo htmlspecialchars($product['productID']); ?>" <?php echo (isset($_GET['productID']) && $_GET['productID'] == $product['productID']) ? 'selected' : ''; ?>>
-                            <?php echo htmlspecialchars($product['model']); ?>
-                        </option>
-                    <?php endforeach; ?>
-                </select>
-            </div>
-            
-            <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-                <label for="shop_id" style="font-weight: 600;">Shop auswählen *</label>
-                <select id="shop_id" name="shop_id" required style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">
-                    <option value="">-- Bitte wählen --</option>
-                    <?php foreach ($shops as $shop): ?>
-                        <option value="<?php echo htmlspecialchars($shop['shopID']); ?>">
-                            <?php echo htmlspecialchars($shop['name']); ?>
-                        </option>
-                    <?php endforeach; ?>
-                </select>
-            </div>
-            
-            <div style="display: flex; gap: 1rem;">
-                <div style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem;">
-                    <label for="price" style="font-weight: 600;">Preis (€) *</label>
-                    <input type="number" id="price" name="price" step="0.01" min="0" required style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">
+            <?php if ($message): ?>
+                <p class="<?php echo $messageType === 'success' ? 'auth__alert__sucess' : 'auth__alert__error'; ?>" style="margin-bottom: 1rem;">
+                    <?php echo htmlspecialchars($message); ?>
+                </p>
+            <?php endif; ?>
+
+            <form method="POST" action="offerAdder.php" class="auth__form">
+                <input type="hidden" name="action" value="add_offer">
+
+                <div class="auth__select__wrap">
+                    <label class="auth__select__label" for="product_id">Produkt auswählen *</label>
+                    <select id="product_id" name="product_id" class="auth__select" required>
+                        <option value="">-- Bitte wählen --</option>
+                        <?php foreach ($products as $product): ?>
+                            <option value="<?php echo htmlspecialchars($product['productID']); ?>" <?php echo (isset($_GET['productID']) && $_GET['productID'] == $product['productID']) ? 'selected' : ''; ?>>
+                                <?php echo htmlspecialchars($product['model']); ?>
+                            </option>
+                        <?php endforeach; ?>
+                    </select>
                 </div>
-                
-                <div style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem;">
-                    <label for="shipping_cost" style="font-weight: 600;">Versandkosten (€)</label>
-                    <input type="number" id="shipping_cost" name="shipping_cost" step="0.01" min="0" value="0.00" style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">
+
+                <div class="auth__select__wrap" style="margin-top: 1rem;">
+                    <label class="auth__select__label" for="shop_id">Shop auswählen *</label>
+                    <select id="shop_id" name="shop_id" class="auth__select" required>
+                        <option value="">-- Bitte wählen --</option>
+                        <?php foreach ($shops as $shop): ?>
+                            <option value="<?php echo htmlspecialchars($shop['shopID']); ?>">
+                                <?php echo htmlspecialchars($shop['name']); ?>
+                            </option>
+                        <?php endforeach; ?>
+                    </select>
                 </div>
-            </div>
-            
-            <div style="display: flex; align-items: center; gap: 0.5rem;">
-                <input type="checkbox" id="in_stock" name="in_stock" value="1" checked style="width: 18px; height: 18px;">
-                <label for="in_stock" style="font-weight: 600; cursor: pointer;">Auf Lager</label>
-            </div>
-            
-            <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-                <label for="offer_url" style="font-weight: 600;">Angebots-URL</label>
-                <input type="url" id="offer_url" name="offer_url" placeholder="https://" style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">
-            </div>
-            
-            <button type="submit" style="padding: 12px 20px; background: #007bff; color: white; font-weight: bold; border: none; border-radius: 4px; cursor: pointer; align-self: flex-start; text-transform: uppercase; font-size: 0.9rem;">Angebot hinzufügen</button>
-        </form>
-    </div>
+
+                <div style="display: flex; gap: 1rem; margin-top: 1rem;">
+                    <div style="flex: 1;">
+                        <label for="price" style="display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--text-muted);">Preis (€) *</label>
+                        <input type="number" id="price" name="price" class="auth__input" step="0.01" min="0" required>
+                    </div>
+                    <div style="flex: 1;">
+                        <label for="shipping_cost" style="display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--text-muted);">Versandkosten (€)</label>
+                        <input type="number" id="shipping_cost" name="shipping_cost" class="auth__input" step="0.01" min="0" value="0.00">
+                    </div>
+                </div>
+
+                <div style="margin-top: 1rem; display: flex; align-items: center; gap: 0.5rem;">
+                    <input type="checkbox" id="in_stock" name="in_stock" value="1" checked style="width: 18px; height: 18px; accent-color: var(--primary-color);">
+                    <label for="in_stock" style="font-weight: 500; color: var(--text-muted); cursor: pointer;">Auf Lager</label>
+                </div>
+
+                <div style="margin-top: 1rem;">
+                    <label for="offer_url" style="display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--text-muted);">Angebots-URL</label>
+                    <input type="url" id="offer_url" name="offer_url" class="auth__input" placeholder="https://">
+                </div>
+
+                <div class="auth__actions" style="margin-top: 1.5rem;">
+                    <button type="submit" class="auth__submit">Angebot hinzufügen</button>
+                </div>
+            </form>
+        </div>
+    </section>
 </main>
 <?php include 'footer.php'; ?>