From a119cbd4873b34bd2ad824cba129a61c7e448a5f Mon Sep 17 00:00:00 2001
From: MotorTruck1221 <motortruck1221@protonmail.com>
Date: Sat, 22 Mar 2025 01:15:24 -0600
Subject: [PATCH] Front page UI done

---
 src/assets/splash.json              | 107 ++++++++++++++++++++++++++++
 src/components/SettingsLoader.astro |   2 +-
 src/pages/index.astro               |  28 +++++---
 3 files changed, 128 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/splash.json

diff --git a/src/assets/splash.json b/src/assets/splash.json
new file mode 100644
index 0000000..701a77b
--- /dev/null
+++ b/src/assets/splash.json
@@ -0,0 +1,107 @@
+[
+  {
+    "splash": "Join to our community! https://discord.gg/qsXnhSPtAK"
+  },
+  {
+    "splash": "Browse safely!"
+  },
+  {
+    "splash": "Hello World!"
+  },
+  {
+    "splash": "Access with ease!"
+  },
+  {
+    "splash": "Stay secure online!"
+  },
+  {
+    "splash": "New updates available!"
+  },
+  {
+    "splash": "Surf anonymously!"
+  },
+  {
+    "splash": "Unlock the web!"
+  },
+  {
+    "splash": "Don't miss out!"
+  },
+  {
+    "splash": "Fast and reliable!"
+  },
+  {
+    "splash": "Enjoy your privacy!"
+  },
+  {
+    "splash": "Let's get started!"
+  },
+  {
+    "splash": "Protect your data!"
+  },
+  {
+    "splash": "Freedom online!"
+  },
+  {
+    "splash": "Navigate freely!"
+  },
+  {
+    "splash": "Your web, your rules!"
+  },
+  {
+    "splash": "Stay anonymous!"
+  },
+  {
+    "splash": "Access anything!"
+  },
+  {
+    "splash": "Fast and secure!"
+  },
+  {
+    "splash": "Browse without limits!"
+  },
+  {
+    "splash": "Private and secure!"
+  },
+  {
+    "splash": "Keep your data safe!"
+  },
+  {
+    "splash": "Connect globally!"
+  },
+  {
+    "splash": "No boundaries!"
+  },
+  {
+    "splash": "Web freedom!"
+  },
+  {
+    "splash": "Stay private!"
+  },
+  {
+    "splash": "Anonymous browsing!"
+  },
+  {
+    "splash": "Secure access!"
+  },
+  {
+    "splash": "Fast connections!"
+  },
+  {
+    "splash": "Unrestricted access!"
+  },
+  {
+    "splash": "Surf the web freely!"
+  },
+  {
+    "splash": "Your privacy matters!"
+  },
+  {
+    "splash": "Always connected!"
+  },
+  {
+    "splash": "Web without limits!"
+  },
+  {
+    "splash": "Explore the internet!"
+  }
+]
diff --git a/src/components/SettingsLoader.astro b/src/components/SettingsLoader.astro
index 80d2c30..0c67cd4 100644
--- a/src/components/SettingsLoader.astro
+++ b/src/components/SettingsLoader.astro
@@ -1,7 +1,7 @@
 <script>
     import { Settings } from "@utils/settings.ts";
     const settings = new Settings();
-    
+
     document.addEventListener('astro:after-swap', async () => {
         settings.theme();
     });
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 28021e9..2030e4b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,17 +1,29 @@
 ---
 import Layout from '@layouts/Layout.astro';
-import { Icon } from 'astro-icon/components';
+import { Icon } from 'astro-icon/components'
+
+import splash from "@assets/splash.json";
+
+const genSplash = (): String => {
+    const idx = Math.floor(Math.random() * splash.length);
+    return splash[idx].splash;
+}
+
+const randomSplash = genSplash();
 ---
 
 <Layout>
     <div class="h-full flex items-center justify-center">
-        <div class="flex items-center gap-2">
-            <Icon name="lucide:radius" class="h-16 w-16 rotate-180 text-(--foreground)" />
-            <h1 class="text-6xl font-semibold">Radius</h1>
-        </div>
-        <div>
-            <!-- text input here from shadcn (soon) -->
-            <p>more coming soon (trust)</p>
+        <div class="flex flex-col items-center gap-6">
+            <div class="flex items-center gap-2">
+                <Icon name="lucide:radius" class="h-16 w-16 rotate-180 text-(--foreground)" />
+                <h1 class="text-6xl font-semibold">Radius</h1>
+            </div>
+            <div class="flex flex-row items-center gap-2 w-[26rem] border border-(--input) rounded-lg h-12 p-2">
+                <Icon name="lucide:search" />
+                <input type="text" name="Search" class="text-sm focus-visible:outline-none w-full h-full placeholder:text-(--muted-foreground)" id="search" placeholder="Search the web">
+            </div>
+            <p class="text-base"> { randomSplash } </p>
         </div>
     </div>
 </Layout>