From 57d57a7d749330e3928aaf36508c0f884824d0e5 Mon Sep 17 00:00:00 2001
From: Beluzsar Peter <beluzsarp@gmail.com>
Date: Sat, 26 Sep 2026 01:09:52 +0200
Subject: [PATCH] rework fleurs

---
 resources/css/app.css                         |  5 +-
 resources/js/App.vue                          |  2 +-
 .../{Footer.vue => BottomFleur.vue}           | 10 +---
 resources/js/components/Header.vue            | 21 ++++++++
 resources/js/components/TopFleur.vue          | 13 +++--
 resources/js/components/Wish.vue              |  5 +-
 resources/js/pages/HomeView.vue               | 48 ++++++++++++++++---
 7 files changed, 78 insertions(+), 26 deletions(-)
 rename resources/js/components/{Footer.vue => BottomFleur.vue} (74%)
 create mode 100644 resources/js/components/Header.vue

diff --git a/resources/css/app.css b/resources/css/app.css
index 48c63cd..529bd6f 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -11,8 +11,8 @@
 :root {
     --background-color: rgba(10,10,10,1);
     --color-primary: rgb(250, 250, 250);
-    --color-a-primary: rgb(142, 234, 252);
-    --color-a-visited: rgb(252, 142, 250);
+    --color-a-primary: rgb(221, 221, 221);
+    --color-a-visited: rgb(142, 142, 142);
 }
 
 @font-face {
@@ -41,6 +41,7 @@
 body {
     background-color: var(--background-color);
     width: 100%;
+    height: 100%;
     font-family: Perpetua Regular;
     color: var(--color-primary);
     cursor: url('/skonk/cursor.png');
diff --git a/resources/js/App.vue b/resources/js/App.vue
index badc466..4de4f4e 100644
--- a/resources/js/App.vue
+++ b/resources/js/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Footer from "./components/Footer.vue";
+import Footer from "./components/BottomFleur.vue/index.js";
 </script>
 
 <template>
diff --git a/resources/js/components/Footer.vue b/resources/js/components/BottomFleur.vue
similarity index 74%
rename from resources/js/components/Footer.vue
rename to resources/js/components/BottomFleur.vue
index f0f145c..daaf2e7 100644
--- a/resources/js/components/Footer.vue
+++ b/resources/js/components/BottomFleur.vue
@@ -1,7 +1,5 @@
 <template>
- <footer>
     <img :src="'skonk/board/bottom/Quest_Board_bottom_fleur0005.png'" style="width: 100%;">
- </footer>
 </template>
 
 <script>
@@ -9,14 +7,10 @@
 </script>
 
 <style scoped>
-footer {
-    position: fixed;
-    width: 100%;
-    bottom: 0;
-    z-index: 300;
+img {
+    z-index: 100;
     padding: 0;
     background: var(--background-color);
     background: linear-gradient(0deg, var(--background-color) 0%, var(--background-color) 80%, rgba(255, 255, 255, 0) 100%);
-    padding: 10px;
 }
 </style>
\ No newline at end of file
diff --git a/resources/js/components/Header.vue b/resources/js/components/Header.vue
new file mode 100644
index 0000000..1af94ac
--- /dev/null
+++ b/resources/js/components/Header.vue
@@ -0,0 +1,21 @@
+<template>
+   <div class="header-main">
+        <a href="/">Home</a>
+   </div> 
+
+    <img :src="'/skonk/divider.png'" style="width: 90%; margin: auto;">
+</template>
+
+<style scoped>
+.header-main {
+    height: auto;
+    width: 100%;
+    background-color: var(--background-color);
+    padding: 10px;
+    text-align: left;
+}
+a {
+    font-size: 2vh;
+    margin: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/resources/js/components/TopFleur.vue b/resources/js/components/TopFleur.vue
index 4e9ff10..4b1a90a 100644
--- a/resources/js/components/TopFleur.vue
+++ b/resources/js/components/TopFleur.vue
@@ -13,14 +13,13 @@
     84% {background-image: url(/skonk/board/top/Quest_Board_top_fleur0005.png);}
     100% {background-image: url(/skonk/board/top/Quest_Board_top_fleur0006.png);}
 }
-.animate {
-    animation-duration: 600ms;
-    mask-repeat: no-repeat;
-    animation-name: fleur;
-    height: 100px;
-}
-.image {
+div {
     width: 100%;
     padding: 15px;
+    position: sticky;
+    top: 0;
+    background: var(--background-color);
+    z-index: 100;
+    background: linear-gradient(180deg, var(--background-color) 0%, var(--background-color) 80%, rgba(255, 255, 255, 0) 100%);
 }
 </style>
\ No newline at end of file
diff --git a/resources/js/components/Wish.vue b/resources/js/components/Wish.vue
index 737043b..4d68b27 100644
--- a/resources/js/components/Wish.vue
+++ b/resources/js/components/Wish.vue
@@ -86,7 +86,10 @@ img.cursor{
 .opposite-corner {
     rotate: 180deg;
     right: 10px;
-    bottom: 10px;
+    bottom: 0px;
+}
+.large-container:hover {
+    scale: 1.01;
 }
 .cursor {
     position: absolute;
diff --git a/resources/js/pages/HomeView.vue b/resources/js/pages/HomeView.vue
index 3420c13..65e3e0d 100644
--- a/resources/js/pages/HomeView.vue
+++ b/resources/js/pages/HomeView.vue
@@ -4,7 +4,8 @@ import {ref, onMounted} from 'vue';
 import axios from 'axios';
 import TopFleur from '../components/TopFleur.vue';
 import WishPanel from '../components/WishPanel.vue';
-import Footer from '../components/Footer.vue';
+import BottomFleur from '../components/BottomFleur.vue';
+import Header from '../components/Header.vue';
 
 let interval;
 
@@ -32,11 +33,44 @@ onMounted(() => {
 
 <template>
     <body>
+    <Header></Header>
     <TopFleur/>
-        <template v-for="(wish, i) in wishes">
-            <Wish :wish="wish" :selected="selected==i" :index="i"  @selectedWish="selectedWish" v-if="selected == i || selected == -1"/>
-            <WishPanel :wish="wish" v-if="selected == i" @closeWish="selected = -1"></WishPanel>
-        </template>
-    <Footer/>
+    <div class="wrapper">
+        <Transition>
+            <div v-if="selected==-1">
+                <template v-for="(wish, i) in wishes">
+                    <Wish :wish="wish" :selected="false" :index="i"  @selectedWish="selectedWish"/>
+                </template>
+            </div>
+        </Transition>
+        <Transition>
+            <div v-if="selected!=-1">
+                <Wish :wish="wishes[selected]" selected :index="selected"  @selectedWish="selectedWish"/>
+                <WishPanel :wish="wishes[selected]" @closeWish="selected = -1"></WishPanel>
+            </div>
+        </Transition>
+
+    </div>
+    <div class="push"></div>
+    <BottomFleur/>
     </body>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+.wrapper {
+    min-height: 100%;
+    margin-bottom: -50px;
+}
+.push{
+    height: 50px;
+}
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>
\ No newline at end of file