card Tabs

(cherry picked from commit 5c0a2b588644b4d8ad6148c2582a551d770f4261)

templates/index.html

@@ -10,6 +10,8 @@
         display: grid;
         grid-template-columns: repeat(7, 0fr); /* 7 Tage in einer Woche */
         gap: 5px;
+        width: 100%;
+        table-layout: fixed;
     }
 
     .day {
@@ -19,12 +21,13 @@
         display: flex;
         align-items: center;
         justify-content: center;
+        table-layout: fixed;
     }
 </style>
 
 <div class="d-flex flex-column gap-5">
     <div class="d-flex gap-3">
-        <div class="flex-fill col-5 card bg-light mb-6">
+        <div class="flex-md-fill col-md-4 col-12 card bg-light mb-6">
             <div class="card-body">
                 <h5 class="card-title">Heatmap</h5>
                 <div id="heatmap"></div>
@@ -34,7 +37,7 @@
         <script>
 
             // Simulierte Aktivitätsdaten (ersetze dies durch deine echten Daten)
-            const activityData = {{heatmap_values}};
+            const activityData = {{ heatmap_values }};
 
             // Funktion zum Erstellen der Heatmap
             function createHeatmap(data) {
@@ -80,12 +83,38 @@
         </script>
 
 
-        <div class="flex-fill col-7 card bg-light p-6 mb-6">
+        <div class="flex-fill col-md-8 col-12 card bg-light p-6 mb-6">
-            <div class="row mb-3 ">
+            <div class="row mb-3">
                 <h2 class="col-9">Gewohnheiten</h2>
                 <a class="col-3 btn btn-primary p" role="button" href="/habit-list">Neue Liste erstellen</a>
             </div>
 
+
+            <div class="card-header">
+                <ul class="nav nav-tabs card-header-tabs">
+
+                    {% for habit_list in habit_lists %}
+                    <li class="nav-item">
+                        {% if habit_list == habit_lists[0] %}
+                        <a class="nav-link active" aria-current="true">{{ habit_list.name }}</a>
+                        {% else %}
+                        <a class="nav-link">{{ habit_list.name }}</a>
+                        {% endif %}
+
+                    </li>
+                    {% endfor %}
+
+                </ul>
+            </div>
+
+            <div class="card-body text-center">
+                <h5 class="card-title">Special title treatment</h5>
+                <p class="card-text">
+                    With supporting text below as a natural lead-in to additional content.
+                </p>
+            </div>
+
+
             {% for habit_list in habit_lists %}
 
             <div class="row mb-3">
@@ -268,4 +297,6 @@
         });
     });
 </script>
+
+
 {% endblock %}