pushed with daily script

content_settings.html

@@ -0,0 +1 @@
+<h3 class="text-lg font-semibold mb-4">Content Settings</h3>

index.html

@@ -14,28 +14,31 @@ <h1 class="text-3xl font-bold mb-8 text-center">Card Generator</h1>
         <!----------------------------->
         <!-- Left Column -->
         <!----------------------------->
-        <div class="bg-red-500 h-64">
-          <div id="contentSettings"></div>
-          <div id="textSettings"></div>
+        <div id="leftColumn" class="flex flex-col space-y-4">
+          <div id="contentSettings" class="bg-red-500 min-h-28 p-4 rounded-lg shadow-sm"></div>
+          <div id="textSettings" class="bg-red-600 min-h-28 p-4 rounded-lg shadow-sm"></div>
         </div>
         <!-- end left -->
 
         <!----------------------------->
         <!-- Middle Column -->
         <!----------------------------->
 
-        <div class="md:col-span-2 bg-green-500 h-64">
-          <div id="cardSettings"></div>
-          <div id="previewSettings"></div>
-          <div id="htmlOutputSettings"></div>
+        <div id="middleColumn" class="md:col-span-2 flex flex-col space-y-4">
+          <div id="cardSettings" class="bg-green-500 min-h-28 p-4 rounded-lg shadow-sm"></div>
+          <div id="previewSettings" class="bg-green-600 min-h-28 p-4 rounded-lg shadow-sm"></div>
+          <div id="htmlOutputSettings" class="bg-green-600 min-h-28 p-4 rounded-lg shadow-sm"></div>
         </div>
         <!-- end middle -->
 
         <!----------------------------->
         <!-- Right Column -->
         <!----------------------------->
 
-        <div class="bg-blue-500 h-64"></div>
+        <div id="rightColumn" class="flex flex-col space-y-4">
+          <div id="borderSettings" class="bg-blue-500 min-h-28 p-4 rounded-lg shadow-sm"></div>
+          <div id="helpSection" class="bg-blue-600 min-h-28 p-4 rounded-lg shadow-sm"></div>
+        </div>
         <!-- end right -->
       </div>
       <!-- end grid -->
@@ -103,15 +106,36 @@ <h1 class="text-3xl font-bold mb-8 text-center">Card Generator</h1>
       <div id="preview"></div>
     </div>
 
-    <script></script>
+    <script>
+      async function fetchComponent(url, targetId) {
+        try {
+          const response = await fetch(url);
+          const html = await response.text();
+          document.getElementById(targetId).innerHTML = html;
+        } catch (error) {
+          console.error('Error fetching component:', error);
+        }
+      }
+
+      fetchComponent('border_settings.html', 'borderSettings');
+      fetchComponent('card_settings.html', 'cardSettings');
+      fetchComponent('content_settings.html', 'contentSettings');
+      fetchComponent('help.html', 'helpSection');
+      fetchComponent('preview_settings.html', 'previewSettings');
+      fetchComponent('text_settings.html', 'textSettings');
+    </script>
+
+    <script type="module" src="js/main.js"></script>
   </body>
 </html>
 
 <!-- 
 state update
   => main.js - initialize - eventlistener
 html value update
-  => main.js - updateUIElements
+  => per eventListener wird - main.js - updateUIElements aufgerufen
+html label update after section Change
+  => per eventListener wird - main.js - updateUIElements aufgerufen
 htmlOutput + preview
   => generateHTML.js - generateHTML 
 -->