redesign from scratch
This commit is contained in:
@@ -0,0 +1,43 @@
|
||||
/** global styles */
|
||||
|
||||
/* globale Variablen */
|
||||
:root {
|
||||
/* colors */
|
||||
--primary-color: #1976D2;
|
||||
--secondary-color: #d27519;
|
||||
--font-color: #333333;
|
||||
--background-color: #f3f5f4;
|
||||
|
||||
/* Dimensions */
|
||||
--header-height: 60px;
|
||||
--footer-height: 40px;
|
||||
--main-content-padding: 20px;
|
||||
--box-border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* 1. Schriftart definieren */
|
||||
@font-face {
|
||||
font-family: 'Inter'; /* Name, den du später im CSS verwendest */
|
||||
src: url('/static/fonts/Inter.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
||||
/* Style für allgemeine Elemente */
|
||||
.box {
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: var(--box-border-radius);
|
||||
}
|
||||
|
||||
/* Style für Header, Navigation, Main Content, Aside und Footer */
|
||||
|
||||
|
||||
Binary file not shown.
@@ -1,259 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="de" data-theme="autumn">
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>X-CPQ by Simply CPQ</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/x-icon" href="/static/images/SimplyCPQ_Logo.svg" />
|
||||
|
||||
<link href="/static/css/daisyui.css" rel="stylesheet" type="text/css" />
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||||
<script src="/static/js/index.global.js"></script>
|
||||
<title>X-CPQ by Simply CPQ</title>
|
||||
<link rel="stylesheet" href="/static/css/simplycpq.css">
|
||||
<script src="/static/js/htmx.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="max-w-10xl min-h-screen">
|
||||
<header>
|
||||
<nav>
|
||||
<div class="navbar bg-base-300 shadow-sm rounded-box">
|
||||
<div class="navbar-start">
|
||||
<div class="flex-none">
|
||||
<img src="/static/images/SimplyCPQ_Logo.svg" class="w-10 rounded-30" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<a class="btn btn-ghost text-xl">X-CPQ by Simply CPQ 2026 Material Editor</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-center">
|
||||
<ul class="menu menu-horizontal px-1">
|
||||
<li><a class="link link-hover">Eigenschaften</a></li>
|
||||
<li><a class="link link-hover">Produkte</a></li>
|
||||
<li><a class="link link-hover">Preiskonditionen</a></li>
|
||||
<li><a class="link link-hover">Übersetzungen</a></li>
|
||||
<li><a class="link link-hover">Importe</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="navbar-end">
|
||||
<div class="avatar">
|
||||
<div class="w-10 rounded-full">
|
||||
<img alt="angemeldeter User" src="/static/images/users/tsindt.png" />
|
||||
</div>
|
||||
</div>
|
||||
<header>
|
||||
<h1>X-CPQ by Simply CPQ</h1>
|
||||
</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>
|
||||
</section>
|
||||
<aside>
|
||||
<!-- Additional content can be added here -->
|
||||
<p>Randnotiz</p>
|
||||
</aside>
|
||||
</main>
|
||||
<footer>
|
||||
<!-- Footer content can be added here -->
|
||||
<p>© 2026 Simply CPQ</p>
|
||||
</footer>
|
||||
|
||||
<label class="swap swap-rotate ml-4">
|
||||
<!-- this hidden checkbox controls the state -->
|
||||
<input type="checkbox" class="theme-controller" value="business" />
|
||||
|
||||
<!-- sun icon -->
|
||||
<svg class="swap-off h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
|
||||
</svg>
|
||||
|
||||
<!-- moon icon -->
|
||||
<svg class="swap-on h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
|
||||
</svg>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="gap-2 p-2 bg-base-200 shadow-sm rounded-box mt-5">
|
||||
<div id="main-content">
|
||||
<div class="flex flex-col md:flex-row">
|
||||
<aside>
|
||||
<div>
|
||||
<img src="/static/images/SimplyCPQ_Logo.svg" class="w-10 rounded-30" />
|
||||
</div>
|
||||
</aside>
|
||||
<article>
|
||||
<div class="ml-4">
|
||||
<div id="content">
|
||||
<h1 class="text-2xl font-bold mb-4">Willkommen zum X-CPQ Material Editor</h1>
|
||||
<p>Hier können Sie Ihre Materialien und Produkte konfigurieren und verwalten.</p>
|
||||
|
||||
<div class="mt-6">
|
||||
<h2 class="text-xl font-semibold mb-3">Beispiel Treeview (DaisyUI)</h2>
|
||||
<ul class="tree bg-base-100 rounded-box p-4 w-full max-w-xl border border-base-300">
|
||||
<li>
|
||||
<details open>
|
||||
<summary class="font-medium">Root</summary>
|
||||
<ul class="pl-4">
|
||||
<li>
|
||||
<details open>
|
||||
<summary>Child 1</summary>
|
||||
<ul class="pl-4">
|
||||
<li>
|
||||
<details open>
|
||||
<summary>Child 1.1</summary>
|
||||
<ul class="pl-4">
|
||||
<li>Child 1.1.1</li>
|
||||
<li>Child 1.1.2</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li>
|
||||
<details open>
|
||||
<summary>Child 1.2</summary>
|
||||
<ul class="pl-4">
|
||||
<li>Child 1.2.1</li>
|
||||
<li>Child 1.2.2</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li>
|
||||
<details open>
|
||||
<summary>Child 1.3</summary>
|
||||
<ul class="pl-4">
|
||||
<li>Child 1.3.1</li>
|
||||
<li>Child 1.3.2</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li>
|
||||
<details open>
|
||||
<summary>Child 2</summary>
|
||||
<ul class="pl-4">
|
||||
<li>
|
||||
<details open>
|
||||
<summary>Child 2.1</summary>
|
||||
<ul class="pl-4">
|
||||
<li>Child 2.1.1</li>
|
||||
<li>Child 2.1.2</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li>
|
||||
<details open>
|
||||
<summary>Child 2.2</summary>
|
||||
<ul class="pl-4">
|
||||
<li>Child 2.2.1</li>
|
||||
<li>Child 2.2.2</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li>
|
||||
<details open>
|
||||
<summary>Child 2.3</summary>
|
||||
<ul class="pl-4">
|
||||
<li>Child 2.3.1</li>
|
||||
<li>Child 2.3.2</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li>
|
||||
<details open>
|
||||
<summary>Child 3</summary>
|
||||
<ul class="pl-4">
|
||||
<li>
|
||||
<details open>
|
||||
<summary>Child 3.1</summary>
|
||||
<ul class="pl-4">
|
||||
<li>Child 3.1.1</li>
|
||||
<li>Child 3.1.2</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li>
|
||||
<details open>
|
||||
<summary>Child 3.2</summary>
|
||||
<ul class="pl-4">
|
||||
<li>Child 3.2.1</li>
|
||||
<li>Child 3.2.2</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li>
|
||||
<details open>
|
||||
<summary>Child 3.3</summary>
|
||||
<ul class="pl-4">
|
||||
<li>Child 3.3.1</li>
|
||||
<li>Child 3.3.2</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li>
|
||||
<details open>
|
||||
<summary>Child 4</summary>
|
||||
<ul class="pl-4">
|
||||
<li>
|
||||
<details open>
|
||||
<summary>Child 4.1</summary>
|
||||
<ul class="pl-4">
|
||||
<li>Child 4.1.1</li>
|
||||
<li>Child 4.1.2</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li>
|
||||
<details open>
|
||||
<summary>Child 4.2</summary>
|
||||
<ul class="pl-4">
|
||||
<li>Child 4.2.1</li>
|
||||
<li>Child 4.2.2</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li>
|
||||
<details open>
|
||||
<summary>Child 4.3</summary>
|
||||
<ul class="pl-4">
|
||||
<li>Child 4.3.1</li>
|
||||
<li>Child 4.3.2</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="content">
|
||||
<h3 class="text-2xl font-bold mb-4">Eigenschaften</h3>
|
||||
<p>Damit in allen Produkten bei der Pflege von Eigenschaften keine Missverständnisse entstehen, gibt es bei X-CPQ einen Eigenschaften-Pool. In diesem Pool werden alle zu verwendenen Eigenschaften und deren Wertebereiche in Form von Properties und deren mögliche Werte in Form von Listen spezifiziert. Diese Properties können fachlich noch in sog. Property-Groups eingeordnet werden. Z.B. kann ich eine Eigenschaft "Farbe" definieren, die die Werte "Rot, Grün und Blau" annehmen kann. Jedem Produkt, bei welchem ich eine Eigenschaft "Farbe" habe, weise ich dann dieses Property zu nud schrenke bei Bedarf den Wertebereich ein, z.B. bei einem blauen Produkt auf "Blau". Damit verhinde ich, dass es für gleichartige Eigenschaften unterschiedliche Begriffe verwendet werden, z.B. "Farbe", "Farbton" und "Ton" bedeuten eigentlich das gleiche.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer sm:footer-horizontal footer-center bg-base-300 text-base-content p-4 mt-5 shadow-sm rounded-box">
|
||||
<aside>
|
||||
<p>Copyright © 2026 - All right reserved by Simply CPQ</p>
|
||||
</aside>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user