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>
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
<html lang="de" data-theme="autumn">
|
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>X-CPQ by Simply CPQ</title>
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<link rel="icon" type="image/x-icon" href="/static/images/SimplyCPQ_Logo.svg" />
|
<link rel="icon" type="image/x-icon" href="/static/images/SimplyCPQ_Logo.svg" />
|
||||||
|
|
||||||
<link href="/static/css/daisyui.css" rel="stylesheet" type="text/css" />
|
<title>X-CPQ by Simply CPQ</title>
|
||||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
|
<link rel="stylesheet" href="/static/css/simplycpq.css">
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
|
||||||
<script src="/static/js/index.global.js"></script>
|
|
||||||
<script src="/static/js/htmx.js"></script>
|
<script src="/static/js/htmx.js"></script>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="max-w-10xl min-h-screen">
|
<header>
|
||||||
<header>
|
<h1>X-CPQ by Simply CPQ</h1>
|
||||||
<nav>
|
</header>
|
||||||
<div class="navbar bg-base-300 shadow-sm rounded-box">
|
<nav class="box">
|
||||||
<div class="navbar-start">
|
<!-- Navigation links can be added here -->
|
||||||
<div class="flex-none">
|
<ul>
|
||||||
<img src="/static/images/SimplyCPQ_Logo.svg" class="w-10 rounded-30" />
|
<li><a href="#">Eigenschaften</a></li>
|
||||||
</div>
|
<li><a href="#">Produkte</a></li>
|
||||||
<div class="flex-1">
|
<li><a href="#">Konditionen</a></li>
|
||||||
<a class="btn btn-ghost text-xl">X-CPQ by Simply CPQ 2026 Material Editor</a>
|
<li><a href="#">Übersetzungen</a></li>
|
||||||
</div>
|
<li><a href="#">Datenimporte</a></li>
|
||||||
</div>
|
</ul>
|
||||||
<div class="navbar-center">
|
</nav>
|
||||||
<ul class="menu menu-horizontal px-1">
|
<main>
|
||||||
<li><a class="link link-hover">Eigenschaften</a></li>
|
<section id="main-content">
|
||||||
<li><a class="link link-hover">Produkte</a></li>
|
<h2>Willkommen bei X-CPQ Material Editor</h2>
|
||||||
<li><a class="link link-hover">Preiskonditionen</a></li>
|
<!-- Main content can be added here -->
|
||||||
<li><a class="link link-hover">Übersetzungen</a></li>
|
<p>Der Software, die Dir hilft, Deine variantenreichen und ggf. erklärungsbedürftigen Produkte effizient zu verwalten.</p>
|
||||||
<li><a class="link link-hover">Importe</a></li>
|
</section>
|
||||||
</ul>
|
<aside>
|
||||||
</div>
|
<!-- Additional content can be added here -->
|
||||||
<div class="navbar-end">
|
<p>Randnotiz</p>
|
||||||
<div class="avatar">
|
</aside>
|
||||||
<div class="w-10 rounded-full">
|
</main>
|
||||||
<img alt="angemeldeter User" src="/static/images/users/tsindt.png" />
|
<footer>
|
||||||
</div>
|
<!-- Footer content can be added here -->
|
||||||
</div>
|
<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>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user