From 28526c52398ec19347c41206817340a75c95c596 Mon Sep 17 00:00:00 2001
From: Philippe Torrel <webmaster@gkontra.de>
Date: Fri, 17 Jul 2026 11:29:24 +0200
Subject: [PATCH] modified table and added css

---
 .../01_product-manager/assets/css/main.css    | 26 +++++++
 .../tag25/01_product-manager/index.html       | 68 ++++++++++++++++++-
 2 files changed, 91 insertions(+), 3 deletions(-)
diff --git a/03_dom/unterricht/tag25/01_product-manager/assets/css/main.css b/03_dom/unterricht/tag25/01_product-manager/assets/css/main.css
index e69de29..dfe022b 100644
--- a/03_dom/unterricht/tag25/01_product-manager/assets/css/main.css
+++ b/03_dom/unterricht/tag25/01_product-manager/assets/css/main.css
@@ -0,0 +1,26 @@
+*,
+html {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+body {
+  background-color: #efefef;
+}
+
+/* Mobile first */
+.product-manager table tfoot .row > * {
+  margin-bottom: 1rem;
+}
+
+@media (min-width: 992px) {
+  .product-manager table tfoot .row > * {
+    margin-bottom: 0;
+  }
+}
diff --git a/03_dom/unterricht/tag25/01_product-manager/index.html b/03_dom/unterricht/tag25/01_product-manager/index.html
index a30f19b..2eeed90 100644
--- a/03_dom/unterricht/tag25/01_product-manager/index.html
+++ b/03_dom/unterricht/tag25/01_product-manager/index.html
@@ -5,14 +5,76 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Product Manager</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
     <link rel="stylesheet" href="assets/css/main.css" />
     <script src="assets/js/main.js" defer></script>
   </head>
   <body>
     <main>
-      <div class="container py-5">
-        <h1>Product Manager!</h1>
-        <table></table>
+      <div class="product-manager my-5">
+        <div class="container">
+          <!-- table.table.table-striped.table-products>(thead.table-dark>tr>th{Name}+th{Price in &euro;})+tbody>tr>td*2 -->
+          <table class="table table-striped table-products">
+            <thead class="table-dark">
+              <tr>
+                <th>Name</th>
+                <th>Price in &euro;</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>3Doodler 3D Printing Pen</td>
+                <td>29.99</td>
+              </tr>
+              <tr>
+                <td>Powerstation 5- E. Maximus Chargus</td>
+                <td>44.95</td>
+              </tr>
+              <tr>
+                <td>8-Bit Legendary Hero Heat-Change Mug</td>
+                <td>6.99</td>
+              </tr>
+            </tbody>
+            <tfoot>
+              <tr>
+                <td colspan="2">
+                  <div class="row">
+                    <div class="col-12 col-md-6 col-lg-6">
+                      <input
+                        type="text"
+                        class="form-control input-product-name"
+                        name="product-name"
+                        placeholder="Insert product name"
+                        aria-label="Product Name" />
+                    </div>
+
+                    <div class="col-12 col-md-6 col-lg-3">
+                      <div class="input-group">
+                        <input
+                          type="number"
+                          name="product-price"
+                          class="form-control input-product-price"
+                          placeholder="00.00"
+                          aria-label="Product Price"
+                          step="0.01"
+                          min="0" />
+                        <span class="input-group-text">€</span>
+                      </div>
+                    </div>
+
+                    <div class="col-12 col-md-6 col-lg">
+                      <button class="btn btn-dark button-product-add">
+                        <i class="fas fa-plus"></i>
+                        Add product
+                      </button>
+                    </div>
+                  </div>
+                  <!-- ▲ /row ▲ -->
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
       </div>
     </main>
   </body>

Name	Price in €
3Doodler 3D Printing Pen	29.99
Powerstation 5- E. Maximus Chargus	44.95
8-Bit Legendary Hero Heat-Change Mug	6.99
+ + + + + + + + + € + + + + + + + + +