From b8b4ae24804a45840d7a98de3856dff4d2727f10 Mon Sep 17 00:00:00 2001
From: Simone Tesini <simozilla006@gmail.com>
Date: Sat, 2 Aug 2025 06:44:11 +0200
Subject: [PATCH] add standard rosepines

---
 frontend/src/app.css               | 36 +++++++++++++++++++++++++++
 frontend/src/routes/+layout.svelte |  5 +++-
 frontend/src/routes/+page.svelte   | 40 +++++++++++++++---------------
 3 files changed, 60 insertions(+), 21 deletions(-)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index 90d8258..9f0c24a 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -13,3 +13,39 @@
 .spin-slower {
     animation: spin-slower 15s linear infinite;
 }
+
+@theme {
+    --color-dark-pine-base: hsl(249deg, 22%, 12%);
+    --color-dark-pine-surface: hsl(247deg, 23%, 15%);
+    --color-dark-pine-overlay: hsl(248deg, 25%, 18%);
+    --color-dark-pine-muted: hsl(249deg, 12%, 47%);
+    --color-dark-pine-subtle: hsl(248deg, 15%, 61%);
+    --color-dark-pine-text: hsl(245deg, 50%, 91%);
+    --color-dark-pine-red: hsl(343deg, 76%, 68%);
+    --color-dark-pine-yellow: hsl(35deg, 88%, 72%);
+    --color-dark-pine-pink: hsl(2deg, 55%, 83%);
+    --color-dark-pine-blue: hsl(197deg, 49%, 38%);
+    --color-dark-pine-green: hsl(189deg, 43%, 73%);
+    --color-dark-pine-purple: hsl(267deg, 57%, 78%);
+    --color-dark-pine-highlight-low: hsl(244deg, 18%, 15%);
+    --color-dark-pine-highlight-med: hsl(249deg, 15%, 28%);
+    --color-dark-pine-highlight-high: hsl(248deg, 13%, 36%);
+}
+
+@theme {
+    --color-light-pine-base: hsl(32deg, 57%, 95%);
+    --color-light-pine-surface: hsl(35deg, 100%, 98%);
+    --color-light-pine-overlay: hsl(33deg, 43%, 91%);
+    --color-light-pine-muted: hsl(257deg, 9%, 61%);
+    --color-light-pine-subtle: hsl(248deg, 12%, 52%);
+    --color-light-pine-text: hsl(248deg, 19%, 40%);
+    --color-light-pine-red: hsl(343deg, 35%, 55%);
+    --color-light-pine-yellow: hsl(35deg, 81%, 56%);
+    --color-light-pine-pink: hsl(3deg, 53%, 67%);
+    --color-light-pine-blue: hsl(197deg, 53%, 34%);
+    --color-light-pine-green: hsl(189deg, 30%, 48%);
+    --color-light-pine-purple: hsl(268deg, 21%, 57%);
+    --color-light-pine-highlight-low: hsl(25deg, 35%, 93%);
+    --color-light-pine-highlight-med: hsl(10deg, 9%, 86%);
+    --color-light-pine-highlight-high: hsl(315deg, 4%, 80%);
+}
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 79a3f7e..9c1ecf1 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -4,4 +4,7 @@
     let { children } = $props()
 </script>
 
-{@render children()}
+<div class="min-h-screen w-full bg-light-pine-base px-6 text-light-pine-text sm:px-20 md:px-40 lg:px-80 dark:bg-dark-pine-base dark:text-dark-pine-text">
+    iweojoijf
+    {@render children()}
+</div>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index e5c870a..75d43d8 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -5,23 +5,23 @@
     let room: Room = { id: "asd", coords: [0.123, 0.456], name: "scatolame party", private: true, range: 124 }
 </script>
 
-<div class="h-full w-full flex-row justify-center p-4">
-    <div class="relative min-h-screen justify-center justify-items-center">
-        <h1>Scan your nearby rooms</h1>
-        <img src="/smerdoradar.gif" alt="radar" class="h-64 w-64" />
-        <div class="max-h-50 w-full overflow-y-auto">
-            <RoomComponent {room} />
-            <RoomComponent {room} />
-            <RoomComponent {room} />
-            <RoomComponent {room} />
-            <RoomComponent {room} />
-            <RoomComponent {room} />
-            <RoomComponent {room} />
-            <RoomComponent {room} />
-            <RoomComponent {room} />
-        </div>
-        <div class="fixed right-0 bottom-0">
-            <button class="mt-4 justify-end rounded bg-blue-500 px-6 py-2 text-white transition-colors hover:bg-blue-600 active:bg-blue-700"> + </button>
-        </div>
-    </div>
-</div>
+<!-- <div class="h-full w-full flex-row justify-center p-4"> -->
+<!--     <div class="relative min-h-screen justify-center justify-items-center"> -->
+<!--         <h1>Scan your nearby rooms</h1> -->
+<!--         <img src="/smerdoradar.gif" alt="radar" class="h-64 w-64" /> -->
+<!--         <div class="max-h-50 w-full overflow-y-auto"> -->
+<!--             <RoomComponent {room} /> -->
+<!--             <RoomComponent {room} /> -->
+<!--             <RoomComponent {room} /> -->
+<!--             <RoomComponent {room} /> -->
+<!--             <RoomComponent {room} /> -->
+<!--             <RoomComponent {room} /> -->
+<!--             <RoomComponent {room} /> -->
+<!--             <RoomComponent {room} /> -->
+<!--             <RoomComponent {room} /> -->
+<!--         </div> -->
+<!--         <div class="fixed right-0 bottom-0"> -->
+<!--             <button class="mt-4 justify-end rounded bg-blue-500 px-6 py-2 text-white transition-colors hover:bg-blue-600 active:bg-blue-700"> + </button> -->
+<!--         </div> -->
+<!--     </div> -->
+<!-- </div> -->