Add card.html support to embedded resources

This commit includes `card.html` in the embedded files by updating the `all.hpp` file. It modifies the function to map and include the `card.html` resource. Additionally, `index.html` was updated to ensure the latest content is embedded.

res/html/card.html

@@ -0,0 +1,10 @@
+<a href="#" class="tool-card">
+  <img src="{{imgSrc}}" alt="{{toolName}}">
+  <div class="tool-info">
+    <h3>{{toolName}}</h3>
+    <p>{{toolDescription}}</p>
+  </div>
+  <div class="tool-action">
+    <button>{{buttonText}}</button>
+  </div>
+</a>

res/html/index.html

@@ -31,7 +31,7 @@
             padding: 15px;
             overflow-y: auto;
             scrollbar-width: thin; /* Firefox */
-            scrollbar-color: #ff79c6 #2b2c3b; /* Thumb and track color */
+            scrollbar-color: #ff79c6 #2b2c3b;
         }
         .main::-webkit-scrollbar {
             width: 8px;
@@ -43,45 +43,54 @@
         .main::-webkit-scrollbar-thumb {
             background-color: #ff79c6;
             border-radius: 4px;
-            border: 2px solid #2b2c3b; /* Adds some padding around the thumb */
+            border: 2px solid #2b2c3b;
         }
         .tool-card {
             display: flex;
             align-items: center;
             background: #2b2c3b;
-            padding: 15px;
+            padding: 10px;
             border-radius: 8px;
-            margin-bottom: 15px;
+            margin-bottom: 10px;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
             transition: transform 0.2s;
-            flex-direction: column; /* Vertikale Ausrichtung */
-            text-align: center;
+            color: inherit; /* Vererbt die Textfarbe */
+            text-decoration: none; /* Entfernt die Unterstreichung */
         }
+
         .tool-card:hover {
             transform: scale(1.02);
+            background-color: #32334a;
         }
+
         .tool-card img {
             width: 60px;
             height: 60px;
-            margin-bottom: 10px;
+            margin-right: 10px;
             border-radius: 5px;
         }
+
         .tool-info {
-            flex: 1;
-        }
-        .tool-info h3 {
-            margin: 5px 0 5px;
-            font-size: 16px;
+            flex-grow: 1;
             color: #ff79c6;
+            text-align: left;
         }
-        .tool-info p {
+
+        .tool-info h3 {
             margin: 0;
+            font-size: 16px;
+        }
+
+        .tool-info p {
+            margin: 5px 0 0;
             font-size: 14px;
             color: #bbb;
         }
+
         .tool-action {
-            margin-top: 10px;
+            margin-left: auto;
         }
+
         .tool-action button {
             background: #ff79c6;
             border: none;
@@ -91,6 +100,7 @@
             cursor: pointer;
             transition: background 0.3s;
         }
+
         .tool-action button:hover {
             background: #ff47b4;
         }
@@ -107,41 +117,40 @@
 <div class="header">
     <h1>Toolbox</h1>
 </div>
-<div class="main">
-    <div class="tool-card">
-        <img src="https://via.placeholder.com/60" alt="ReSharper Tools">
-        <div class="tool-info">
-            <h3>ReSharper Tools</h3>
-            <p>Version: 2024.3</p>
-        </div>
-        <div class="tool-action">
-            <button>Update</button>
-        </div>
-    </div>
-    <div class="tool-card">
-        <img src="https://via.placeholder.com/60" alt="Visual Studio 2022">
-        <div class="tool-info">
-            <h3>Visual Studio 2022</h3>
-            <p>Professional Edition</p>
-        </div>
-        <div class="tool-action">
-            <button>Open</button>
-        </div>
-    </div>
-    <div class="tool-card">
-        <img src="https://via.placeholder.com/60" alt="CLion">
-        <div class="tool-info">
-            <h3>CLion</h3>
-            <p>Version: 2024.3</p>
-        </div>
-        <div class="tool-action">
-            <button>Update</button>
-        </div>
-    </div>
-    <!-- Add more tool cards as needed -->
+<div class="main" id="toolbox">
+    <!-- Tool Cards werden hier dynamisch geladen -->
 </div>
 <div class="footer">
     <!--Schmidti.Digital &copy; 2024-->
 </div>
+
+<script>
+    const tools = [
+        { imgSrc: 'https://via.placeholder.com/60', toolName: 'ReSharper Tools', toolDescription: 'Version: 2024.3', buttonText: 'Einst' },
+        { imgSrc: 'https://via.placeholder.com/60', toolName: 'Visual Studio 2022', toolDescription: 'Professional Edition', buttonText: 'Einst' },
+        { imgSrc: 'https://via.placeholder.com/60', toolName: 'CLion', toolDescription: 'Version: 2024.3', buttonText: 'Einst' },
+        { imgSrc: 'https://via.placeholder.com/60', toolName: 'IntelliJ IDEA', toolDescription: 'Ultimate Edition 2024', buttonText: 'Einst' },
+        { imgSrc: 'https://via.placeholder.com/60', toolName: 'PyCharm', toolDescription: 'Community Edition 2024', buttonText: 'Einst' },
+        { imgSrc: 'https://via.placeholder.com/60', toolName: 'Rider', toolDescription: 'For .NET Development', buttonText: 'Einst' }
+    ];
+
+    document.addEventListener('DOMContentLoaded', () => {
+        const toolbox = document.getElementById('toolbox');
+        tools.forEach(tool => {
+            fetch('card.html')
+                .then(response => response.text())
+                .then(template => {
+                    const cardHTML = template
+                        .replace(/{{imgSrc}}/g, tool.imgSrc)
+                        .replace(/{{toolName}}/g, tool.toolName)
+                        .replace(/{{toolDescription}}/g, tool.toolDescription)
+                        .replace(/{{buttonText}}/g, tool.buttonText);
+
+                    toolbox.innerHTML += cardHTML;
+                })
+                .catch(error => console.error('Error fetching card template:', error));
+        });
+    });
+</script>
 </body>
-</html>
+</html>