Tree view und CSS refinement

This commit is contained in:
2026-09-03 21:37:28 +02:00
parent 88e89307c4
commit 30b1f09cdf
8 changed files with 199 additions and 97 deletions
+58 -2
View File
@@ -7,14 +7,18 @@
<link rel="icon" type="image/x-icon" href="/static/images/SimplyCPQ_Logo.svg" />
<title>X-CPQ by Simply CPQ</title>
<link rel="stylesheet" href="/static/css/simplycpq.css">
<link rel="stylesheet" href="/static/css/scpq_header.css">
<link rel="stylesheet" href="/static/css/scpq_global.css">
<link rel="stylesheet" href="/static/css/scpq_content.css">
<link rel="stylesheet" href="/static/css/scpq_footer.css">
<script src="/static/js/htmx.js"></script>
</head>
<body>
<header>
<h1>X-CPQ by Simply CPQ</h1>
<img src="/static/images/SimplyCPQ_Logo.svg" alt="Simply CPQ Logo"/>
<h1>X-CPQ Material Editor</h1> <p>by Simply CPQ</p>
<nav>
<!-- Navigation links can be added here -->
<ul>
@@ -32,6 +36,58 @@
<!-- 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 class="tree-view">
<h3>Property Type Groups</h3>
<ul class="node mt-16">
<details open>
<summary>
<img src="/static/images/property_type_group.svg" alt="group"/>
Produktgruppe Root Details
</summary>
<ul class="node">
<details open>
<summary>
<img src="/static/images/property_type_group.svg" alt="group"/>
Produktgruppe 2 Details</summary>
<ul class="node">
<li class="leaf">
<img src="/static/images/property_type.svg" alt="property"/>
Eigenschaft 1
</li>
<li class="leaf">
<img src="/static/images/property_type.svg" alt="property"/>
Eigenschaft 2
</li>
</ul>
</details>
<details open>
<summary>
<img src="/static/images/property_type_group.svg" alt="group"/>
Produktgruppe 3 Details</summary>
<ul class="node">
<li class="leaf">
<img src="/static/images/property_type.svg" alt="property"/>
Eigenschaft 1
</li>
<li class="leaf">
<img src="/static/images/property_type.svg" alt="property"/>
Eigenschaft 2
</li>
</ul>
</details>
<li class="leaf">
<img src="/static/images/property_type.svg" alt="property"/>
Eigenschaft 1
</li>
<li class="leaf">
<img src="/static/images/property_type.svg" alt="property"/>
Eigenschaft 2
</li>
</ul>
</details>
</ul>
</section>
</section>
<aside>
<!-- Additional content can be added here -->