simply_cpq/xcpq/buildtime/xcpq_editor/static/index.html

<!DOCTYPE html>

<html lang="de" data-theme="autumn">

<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">
    <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>
    <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>

                        <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>
                                <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>