Initial commit

2025-10-02 08:54:03 +02:00
commit ea54638227
1642 changed files with 53677 additions and 0 deletions
--- a/frontend/src/lib/components/CrinkledSection.svelte
+++ b/frontend/src/lib/components/CrinkledSection.svelte
@@ -0,0 +1,69 @@
+<script>
+    import TopRightCrinkle from "./widgets/TopRightCrinkle.svelte"
+    export let brightBackground = true
+    export let border = true
+    export let activated = true
+    export let icon = ""
+    export let bigVersion = false
+</script>
+
+{#if activated}
+    <section
+        id="crinkled-section"
+        class="{brightBackground ? 'bright' : 'dark'}"
+    >
+        <div class="upper-row">
+            <div
+                class="bar"
+                class:border="{border}"
+            ></div>
+            <TopRightCrinkle
+                edges="{border}"
+                brightColor="{!brightBackground}"
+                icon="{icon}"
+                bigVersion="{bigVersion}"
+            />
+        </div>
+        <slot />
+    </section>
+{:else}
+    <slot />
+{/if}
+
+<style lang="less">
+    #crinkled-section {
+        width: 100%;
+        display: flex;
+        z-index: 2000;
+        margin-top: -3rem;
+        align-items: center;
+        flex-direction: column;
+
+        .upper-row {
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            align-items: flex-end;
+            justify-content: flex-start;
+            height: 3rem;
+            position: relative;
+            overflow: hidden;
+            .bar {
+                flex: 1;
+                height: 100%;
+                background: var(--neutral-white);
+                &.border {
+                    border-top: 2px solid black;
+                }
+            }
+        }
+        &.dark {
+            .bar {
+                background: var(--bg-100);
+                &.border {
+                    border-top: 2px solid var(--neutral-white);
+                }
+            }
+        }
+    }
+</style>