Styles

xcpq/buildtime/xcpq_editor/static/css/simplycpq.css

@@ -6,11 +6,12 @@
     --primary-color: #1976D2;
     --secondary-color: #d27519;
     --font-color: #333333;
+    --secondary-font-color: #f3f5f4;
     --background-color: #f3f5f4;
 
     /* Dimensions */
-    --header-height: 60px;
+    --header-height: 32px;
-    --footer-height: 40px;
+    --footer-height: 32px;
     --main-content-padding: 20px;
     --box-border-radius: 10px;
 }
@@ -24,11 +25,14 @@
     font-style: normal;
 }
 
+* {
+    margin: 0;
+    padding: 0;
+}
+
 /* 2. Schriftart anwenden und Ränder entfernen*/
 body {
     font-family: 'Inter', Arial, sans-serif;
-    margin: 0;
-    padding: 0;
     background-color: var(--background-color);
     color: var(--font-color);
 }
@@ -40,4 +44,55 @@ body {
 }
 
 /* Style für Header, Navigation, Main Content, Aside und Footer */
+header {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
 
+    height: var(--header-height);
+    background-color: var(--primary-color);
+    border: 1px solid var(--secondary-color);
+    border-radius: var(--box-border-radius);
+    color: var(--secondary-font-color);
+    margin: 16px;
+    padding: 10px;  
+}
+
+nav {
+    height: var(--header-height);
+    background-color: var(--primary-color);
+    color: var(--secondary-font-color);
+    margin: 16px;
+    padding: 10px;  
+}
+
+nav ul {
+    list-style-type: none; /* Entfernt die Standard-Aufzählungszeichen */
+    display: flex; /* Macht die Liste horizontal */
+    gap: 20px; /* Abstand zwischen den Listenelementen */
+}
+
+nav ul li a {
+    text-decoration: none; /* Entfernt die Unterstreichung */
+    color: var(--secondary-font-color); /* Setzt die Schriftfarbe */
+    font-weight: bold; /* Macht den Text fett */
+}
+
+main {
+    padding: var(--main-content-padding);
+    margin: 16px;
+    height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 64px); /* 32px für die Margen */
+    overflow-y: auto; /* Scrollbar, wenn der Inhalt zu groß ist */
+    border: 1px solid var(--secondary-color);
+    border-radius: var(--box-border-radius);
+}
+
+footer {
+    height: var(--footer-height);
+    background-color: var(--primary-color);
+    border: 1px solid var(--secondary-color);
+    border-radius: var(--box-border-radius);
+    color: var(--secondary-font-color);
+    margin: 16px;
+    padding: 10px;  
+}

xcpq/buildtime/xcpq_editor/static/index.html

@@ -11,25 +11,27 @@
     <script src="/static/js/htmx.js"></script>
 
 </head>
+
 <body>
     <header>
         <h1>X-CPQ by Simply CPQ</h1>
+        <nav>
+            <!-- Navigation links can be added here -->
+            <ul>
+                <li><a href="#">Eigenschaften</a></li>
+                <li><a href="#">Produkte</a></li>
+                <li><a href="#">Konditionen</a></li>
+                <li><a href="#">Übersetzungen</a></li>
+                <li><a href="#">Datenimporte</a></li>
+            </ul>
+        </nav>
     </header>
-    <nav class="box">
-        <!-- Navigation links can be added here -->
-         <ul>
-             <li><a href="#">Eigenschaften</a></li>
-             <li><a href="#">Produkte</a></li>
-             <li><a href="#">Konditionen</a></li>
-             <li><a href="#">Übersetzungen</a></li>
-             <li><a href="#">Datenimporte</a></li>
-         </ul>
-    </nav>
     <main>
         <section id="main-content">
             <h2>Willkommen bei X-CPQ Material Editor</h2>
             <!-- Main content can be added here -->
-            <p>Der Software, die Dir hilft, Deine variantenreichen und ggf. erklärungsbedürftigen Produkte effizient zu verwalten.</p>
+            <p>Der Software, die Dir hilft, Deine variantenreichen und ggf. erklärungsbedürftigen Produkte effizient zu
+                verwalten.</p>
         </section>
         <aside>
             <!-- Additional content can be added here -->
@@ -38,8 +40,9 @@
     </main>
     <footer>
         <!-- Footer content can be added here -->
-         <p>&copy; 2026 Simply CPQ</p>
+        <p>&copy; 2026 Simply CPQ</p>
     </footer>
 
 </body>
+
 </html>