From 33006515770d342d082693d0218342e55d7278ce Mon Sep 17 00:00:00 2001
From: Sangelo <contact@sangelo.space>
Date: Sun, 10 Dec 2023 16:24:51 +0100
Subject: [PATCH] Progress on modals

---
 src/routes/Modal.svelte                |   2 +-
 src/routes/Projects.svelte             |  11 +--
 src/routes/modals/dashinit.svelte      |   3 +-
 src/routes/modals/explorecraft.svelte  |   5 +-
 src/routes/modals/more.svelte          | 127 +++++++++++++++++++++++++
 src/routes/modals/sangefault.svelte    |   3 +-
 src/routes/modals/sangelospace.svelte  |   3 +-
 src/routes/modals/utilityclient.svelte |   7 +-
 src/styles/mobile/modal-mobile.scss    |  16 +++-
 src/styles/modal-more.scss             | 127 +++++++++++++++++++++++++
 src/styles/modal.scss                  |   5 +-
 static/assets/logos/runestudios.svg    |  21 ++++
 static/assets/logos/spacebot.svg       | 121 +++++++++++++++++++++++
 static/assets/logos/spectrumgalaxy.svg |  18 ++++
 14 files changed, 450 insertions(+), 19 deletions(-)
 create mode 100644 src/routes/modals/more.svelte
 create mode 100644 src/styles/modal-more.scss
 create mode 100644 static/assets/logos/runestudios.svg
 create mode 100644 static/assets/logos/spacebot.svg
 create mode 100644 static/assets/logos/spectrumgalaxy.svg

diff --git a/src/routes/Modal.svelte b/src/routes/Modal.svelte
index 8348b7d..3613230 100644
--- a/src/routes/Modal.svelte
+++ b/src/routes/Modal.svelte
@@ -82,7 +82,7 @@
 			padding: 1em;
 			box-shadow: 0px 2px 10px $space-black-modal;
 			z-index: 1001;
-            overflow: scroll;
+            overflow: auto;
 		}
 
 		.close-button {
diff --git a/src/routes/Projects.svelte b/src/routes/Projects.svelte
index 3810cf8..0ea7757 100644
--- a/src/routes/Projects.svelte
+++ b/src/routes/Projects.svelte
@@ -6,6 +6,7 @@
 	import ExploreCraftModal from './modals/explorecraft.svelte';
 	import UtilityClientModal from './modals/utilityclient.svelte';
 	import SangeloSpaceModal from './modals/sangelospace.svelte'
+	import MoreProjectsModal from './modals/more.svelte';
 	// import type { SvelteComponent } from 'svelte';
 
 	let showModal = false;
@@ -41,10 +42,6 @@
 			redirectToHome();
 		}
 	}
-
-	function openWebsite(url: string) {
-		goto(url);
-	}
 </script>
 
 <div id="projects" class="section">
@@ -91,10 +88,10 @@
 					<button class="button inactive" />
 					<button class="button inactive" />
 					<button class="button sangelo" on:click={() => openModalWith(SangeloSpaceModal)} />
-					<a href="https://lunivity.com" rel="noopener noreferrer" target="_blank"><button class="button lunivity" /></a>
+					<a href="https://lunivity.com" rel="noopener noreferrer" target="_blank" tabindex="-1"><button class="button lunivity" /></a>
 				</div>
 				<div class="two">
-					<a href="https://gitpot.dev" rel="noopener noreferrer" target="_blank"><button class="button gitpot" /></a>
+					<a href="https://gitpot.dev" rel="noopener noreferrer" target="_blank" tabindex="-1"><button class="button gitpot" /></a>
 					<button class="button utility" on:click={() => openModalWith(UtilityClientModal)} />
 					<button class="button explorecraft" on:click={() => openModalWith(ExploreCraftModal)} />
 					<button class="button dashinit" on:click={() => openModalWith(DashinitModal)} />
@@ -102,7 +99,7 @@
 				<div class="thr">
 					<button class="button inactive" />
 					<button class="button sangefault" on:click={() => openModalWith(SangeFaultModal)} />
-					<button class="button next" />
+					<button class="button next" on:click={() => openModalWith(MoreProjectsModal)} />
 					<button class="button inactive" />
 				</div>
 			</div>
diff --git a/src/routes/modals/dashinit.svelte b/src/routes/modals/dashinit.svelte
index 4387458..136aed3 100644
--- a/src/routes/modals/dashinit.svelte
+++ b/src/routes/modals/dashinit.svelte
@@ -15,7 +15,7 @@
 				<template>
                     <link
                         rel="stylesheet"
-                        href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.4.0/github-markdown.css"
+                        href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.4.0/github-markdown-dark.min.css"
                     />
 					<link
 						rel="stylesheet"
@@ -35,6 +35,7 @@
 			target="_blank"
 			rel="noopener noreferrer"
 			href="{projectSite}"
+			tabindex="-1"
 			><button>
 				<IconOpenInNew size="1.2em" />
 				<p>Visit Project</p>
diff --git a/src/routes/modals/explorecraft.svelte b/src/routes/modals/explorecraft.svelte
index ba2cca6..cebedd9 100644
--- a/src/routes/modals/explorecraft.svelte
+++ b/src/routes/modals/explorecraft.svelte
@@ -15,11 +15,11 @@
 				<template>
                     <link
                         rel="stylesheet"
-                        href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.4.0/github-markdown.css?123456789"
+                        href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.4.0/github-markdown-dark.min.css"
                     />
 					<link
 						rel="stylesheet"
-						href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-atom-dark.min.css?123456789"
+						href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-atom-dark.min.css"
 					/>
                     <link
                         rel="stylesheet"
@@ -35,6 +35,7 @@
 			target="_blank"
 			rel="noopener noreferrer"
 			href="{projectSite}"
+			tabindex="-1"
 			><button>
 				<IconOpenInNew size="1.2em" />
 				<p>Visit Project</p>
diff --git a/src/routes/modals/more.svelte b/src/routes/modals/more.svelte
new file mode 100644
index 0000000..5acd37d
--- /dev/null
+++ b/src/routes/modals/more.svelte
@@ -0,0 +1,127 @@
+<script lang="ts">
+	import Modal from '../Modal.svelte';
+	import DashinitModal from './dashinit.svelte';
+	import SangeFaultModal from './sangefault.svelte';
+	import ExploreCraftModal from './explorecraft.svelte';
+	import UtilityClientModal from './utilityclient.svelte';
+	import SangeloSpaceModal from './sangelospace.svelte'
+
+	import IconCobweb from 'svelte-material-icons/SpiderWeb.svelte';
+	import IconArchive from 'svelte-material-icons/ArchiveOutline.svelte';
+
+	let showModal = false;
+	let selectedModule: any = null;
+
+	function openModalWith(module: any) {
+		selectedModule = module;
+		showModal = true;
+	}
+
+	function handleModalClose() {
+		showModal = false;
+	}
+</script>
+
+<content>
+	<div class="parent">
+		<div class="gallery">
+			<div class="next-icon" />
+		</div>
+		<div>
+			<h1 class="modal-title no-select">All Projects</h1>
+			<p class="modal-title">These are all of my projects, including the ones that didn't fit in the homepage. Take a look!</p>
+			<ul class="item-list">
+				<a class="item" href="https://gitpot.dev/sangelo/website" rel="noopener noreferrer" target="_blank" tabindex="0">
+					<div class="thumbnail"><img src="assets/logos/sangelo.svg" alt="Sangelo's Logo" /></div>
+					<div class="item-details">
+						<h2>Sangelo's Space</h2>
+						<p class="item-description">This website's repository and source code.</p>
+					</div>
+				</a>
+				<a class="item" href="https://lunivity.com" rel="noopener noreferrer" target="_blank" tabindex="0">
+					<div class="thumbnail"><img src="assets/logos/lunivity.svg" alt="Lunivity Logo" /></div>
+					<div class="item-details">
+						<h2>Lunivity</h2>
+						<p class="item-description">Open-source by nature, self-hosted by choice. Self-hosted cloud services.</p>
+					</div>
+				</a>
+				<a class="item" href="https://gitpot.dev" rel="noopener noreferrer" target="_blank" tabindex="0">
+					<div class="thumbnail"><img src="assets/logos/gitpot.svg" alt="Gitpot Logo" /></div>
+					<div class="item-details">
+						<h2>Gitpot</h2>
+						<p class="item-description">Code so sweet, bugs can't compete! A Forgejo-powered git forge which is part of the Lunivity Circle.</p>
+					</div>
+				</a>
+				<a class="item" href="https://uc.gamingcraft.de" rel="noopener noreferrer" target="_blank" tabindex="0">
+					<div class="thumbnail"><img src="assets/logos/utilityclient.svg" alt="UtilityClient Logo" /></div>
+					<div class="item-details">
+						<h2>UtilityClient</h2>
+						<p class="item-description">Performance oriented 1.8.9 Minecraft Client. I'm responsible for UI/UX.</p>
+					</div>
+				</a>
+				<a class="item" href="https://explorecraft.net" rel="noopener noreferrer" target="_blank" tabindex="0">
+					<div class="thumbnail"><img src="assets/logos/explorecraft.svg" alt="ExploreCraft Logo" /></div>
+					<div class="item-details">
+						<h2>ExploreCraft</h2>
+						<p class="item-description">Minecraft 1.19.2 Quilt modpack oriented towards exploration. Powered by packwiz!</p>
+					</div>
+				</a>
+				<a class="item" href="https://gitpot.dev/dashinit/cli" rel="noopener noreferrer" target="_blank" tabindex="0">
+					<div class="thumbnail"><img src="assets/logos/dashinit.svg" alt="dashinit Logo" /></div>
+					<div class="item-details">
+						<h2>dashinit</h2>
+						<p class="item-description">A nim-powered initializer that's fast, fully configurable, and effortlessly sets up your projects.</p>
+					</div>
+				</a>
+				<a class="item" href="https://github.com/SangeloDev/SangeFault" rel="noopener noreferrer" target="_blank" tabindex="0">
+					<div class="thumbnail"><img src="assets/logos/sangefault.svg" alt="SangeFault Logo" /></div>
+					<div class="item-details">
+						<h2>SangeFault</h2>
+						<p class="item-description">Open-source Minecraft resourcepack for 1.8.9 </p>
+					</div>
+				</a>
+			</ul>
+
+			<h2 class="modal-title no-select"><IconArchive /> Archive</h2>
+			<p class="modal-title">These are projects that have either been archived or don't see a lot of work anymore.</p>
+
+			<ul class="item-list">
+				<a class="item inactive" href="https://github.com/runestudios" rel="noopener noreferrer" target="_blank" tabindex="0">
+					<div class="thumbnail"><img src="assets/logos/runestudios.svg" alt="Sangelo's Logo" /></div>
+					<div class="item-details">
+						<h2>RuneStudios</h2>
+						<p class="item-description">Small group of passionate devs and designers.</p>
+					</div>
+				</a>
+				<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+				<div class="item inactive" tabindex="0">
+					<div class="thumbnail"><img src="assets/logos/spectrumgalaxy.svg" alt="Sangelo's Logo" /></div>
+					<div class="item-details">
+						<h2>SpectrumGalaxy</h2>
+						<p class="item-description">Was-to-be a Minecraft minigame server network with original minigames.</p>
+					</div>
+				</div>
+				<a class="item inactive" href="https://github.com/SangeloDev/SpaceBot" rel="noopener noreferrer" target="_blank" tabindex="0">
+					<div class="thumbnail"><img src="assets/logos/spacebot.svg" alt="Sangelo's Logo" /></div>
+					<div class="item-details">
+						<h2>Spacebot</h2>
+						<p class="item-description">A Discord bot made to do general moderation and management tasks.</p>
+					</div>
+				</a>
+			</ul>
+
+			<p class="end-text">
+				<IconCobweb size="2em"/><br>
+				You've reached the end! There might be more projects coming soon 🤔...
+			</p>
+		</div>
+		<!-- Show modals -->
+		<Modal show={showModal} on:close={handleModalClose} contentComponent={selectedModule} />
+	</div>
+</content>
+
+<style lang="scss">
+	@import '../../styles/modal.scss';
+	@import '../../styles/mobile/modal-mobile.scss';
+	@import '../../styles/modal-more.scss';
+</style>
diff --git a/src/routes/modals/sangefault.svelte b/src/routes/modals/sangefault.svelte
index 3075a86..3f8ab39 100644
--- a/src/routes/modals/sangefault.svelte
+++ b/src/routes/modals/sangefault.svelte
@@ -15,7 +15,7 @@
 				<template>
                     <link
                         rel="stylesheet"
-                        href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.4.0/github-markdown.css"
+                        href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.4.0/github-markdown-dark.min.css"
                     />
 					<link
 						rel="stylesheet"
@@ -35,6 +35,7 @@
 			target="_blank"
 			rel="noopener noreferrer"
 			href="{projectSite}"
+			tabindex="-1"
 			><button>
 				<IconOpenInNew size="1.2em" />
 				<p>Visit Project</p>
diff --git a/src/routes/modals/sangelospace.svelte b/src/routes/modals/sangelospace.svelte
index e785744..724c1e1 100644
--- a/src/routes/modals/sangelospace.svelte
+++ b/src/routes/modals/sangelospace.svelte
@@ -15,7 +15,7 @@
 				<template>
                     <link
                         rel="stylesheet"
-                        href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.4.0/github-markdown.css"
+                        href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.4.0/github-markdown-dark.min.css"
                     />
 					<link
 						rel="stylesheet"
@@ -35,6 +35,7 @@
 			target="_blank"
 			rel="noopener noreferrer"
 			href="{projectSite}"
+			tabindex="-1"
 			><button>
 				<IconOpenInNew size="1.2em" />
 				<p>Visit Project</p>
diff --git a/src/routes/modals/utilityclient.svelte b/src/routes/modals/utilityclient.svelte
index 2209e8c..ce904f2 100644
--- a/src/routes/modals/utilityclient.svelte
+++ b/src/routes/modals/utilityclient.svelte
@@ -1,7 +1,7 @@
 <script>
 	import IconOpenInNew from 'svelte-material-icons/OpenInNew.svelte';
     let projectLogo = "assets/logos/utilityclient.svg";
-    let projectReadme = "https://raw.githubusercontent.com/Utility-Client/UtilityClient/main/README.md";
+    let projectReadme = "https://raw.githubusercontent.com/Utility-Client/UtilityClient/development/README.md";
     let projectSite = "https://uc.gamingcraft.de";
 </script>
 
@@ -15,11 +15,11 @@
 				<template>
                     <link
                         rel="stylesheet"
-                        href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.4.0/github-markdown.css?123456789"
+                        href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.4.0/github-markdown-dark.min.css"
                     />
 					<link
 						rel="stylesheet"
-						href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-atom-dark.min.css?123456789"
+						href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-atom-dark.min.css"
 					/>
                     <link
                         rel="stylesheet"
@@ -35,6 +35,7 @@
 			target="_blank"
 			rel="noopener noreferrer"
 			href="{projectSite}"
+			tabindex="-1"
 			><button>
 				<IconOpenInNew size="1.2em" />
 				<p>Visit Project</p>
diff --git a/src/styles/mobile/modal-mobile.scss b/src/styles/mobile/modal-mobile.scss
index c914b26..c7be02a 100644
--- a/src/styles/mobile/modal-mobile.scss
+++ b/src/styles/mobile/modal-mobile.scss
@@ -13,10 +13,17 @@
                 display: grid;
                 justify-items: center;
 
-                img.project-logo {
+                img.project-logo,
+                .next-icon {
                     height: 5em;
+                    width: 5em;
                     margin-right: 0;
                 }
+
+                .next-icon {
+                    background-size: 2em;
+                    margin-bottom: 1em;
+                }
             }
         }
 
@@ -32,5 +39,12 @@
                 font-size: 20px;
             }
         }
+
+        .item-list {
+            &::before {
+                bottom: 5.9%;
+                width: 80%;
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/src/styles/modal-more.scss b/src/styles/modal-more.scss
new file mode 100644
index 0000000..7121d5a
--- /dev/null
+++ b/src/styles/modal-more.scss
@@ -0,0 +1,127 @@
+.parent {
+	h1.modal-title,
+    h2.modal-title {
+		margin: 0 auto 0.2em auto;
+	}
+
+    h2.modal-title {
+        margin-top: 1em;
+    }
+
+    p.modal-title {
+        margin: 0 auto 2em auto;
+    }
+
+	.gallery {
+		.next-icon {
+			background: url('/assets/icons/next.svg');
+			background-color: $space-cadet;
+			background-repeat: no-repeat;
+			background-size: 5em;
+			background-position: center;
+			margin-right: 2em;
+			border-radius: 0.8em;
+			height: 15em;
+			width: 15em;
+			transition: ease-in-out 0.3s;
+		}
+
+		.next-icon:hover {
+			box-shadow: 10px 10px 69px -32px rgba(0, 0, 0, 0.5);
+			-webkit-box-shadow: 10px 10px 69px -32px rgba(0, 0, 0, 0.5);
+		}
+	}
+}
+
+/* Style for the item list */
+.item-list {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	&::before {
+        content: '';
+		position: fixed;
+		left: 9%;
+		bottom: calc(10% - 0.96em);
+		height: calc(100% + 1em); // 1em higher than the button
+		height: 15%;
+		width: 82%;
+		pointer-events: none;
+		background: linear-gradient(to top, $space-gray, transparent);
+		background: -webkit-linear-gradient(to top, $space-gray, transparent);
+		z-index: 1001; // Place it behind the button
+	}
+
+	.item {
+		border-radius: 8px;
+		display: flex;
+		align-items: center;
+		margin-bottom: 1em;
+		width: 100%;
+		cursor: pointer;
+		transition: ease-in-out 0.03s;
+        color: white;
+        text-decoration: none;
+
+		&::after {
+			content: '>';
+			margin-right: 1.5em;
+		}
+
+		.thumbnail {
+			img {
+				border-radius: 8px;
+				max-width: 4em;
+				max-height: 4em;
+				margin: 10% 2em 3.5% 10%;
+			}
+		}
+
+		.item-details {
+			flex-grow: 1;
+
+			h2 {
+				margin: 0 auto 0 auto;
+			}
+
+			.item-description {
+				margin: 0 auto 0.5em auto;
+			}
+		}
+	}
+
+	.item:hover {
+		opacity: 0.9;
+	}
+
+	.item:active {
+		opacity: 0.8;
+		transform: scale(0.995);
+	}
+
+    .item.inactive,
+    .item.inactive:hover,
+    .item.inactive:active {
+        opacity: 0.5;
+        transform: none;
+    }
+
+	/* Add background color to every other item */
+	.item:nth-child(even) {
+		background-color: $space-black-modal;
+	}
+
+	.no-select {
+		user-select: none;
+	}
+}
+
+.end-text {
+    margin: 4% auto 0 auto;
+    color: $star-gray;
+    text-align: center;
+}
diff --git a/src/styles/modal.scss b/src/styles/modal.scss
index 8550b30..b39169c 100644
--- a/src/styles/modal.scss
+++ b/src/styles/modal.scss
@@ -22,8 +22,8 @@ content {
 
 
         img.project-logo:hover {
-            box-shadow: 10px 10px 71px -32px rgba(0, 0, 0, 0.5);
-            -webkit-box-shadow: 10px 10px 71px -32px rgba(0,0,0,0.5);
+            box-shadow: 10px 10px 69px -32px rgba(0, 0, 0, 0.5);
+            -webkit-box-shadow: 10px 10px 69px -32px rgba(0,0,0,0.5);
         }
 	}
 
@@ -47,6 +47,7 @@ content {
 			width: 82%;
 			pointer-events: none;
 			background: linear-gradient(to top, $space-gray, transparent);
+			background: -webkit-linear-gradient(to top, $space-gray, transparent);
 			z-index: 1001; // Place it behind the button
 		}
 
diff --git a/static/assets/logos/runestudios.svg b/static/assets/logos/runestudios.svg
new file mode 100644
index 0000000..fbc2b08
--- /dev/null
+++ b/static/assets/logos/runestudios.svg
@@ -0,0 +1,21 @@
+<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_112_2)">
+<rect width="500" height="500" fill="black"/>
+<rect x="-150.08" y="475.523" width="549.915" height="361.858" transform="rotate(-80 -150.08 475.523)" fill="url(#paint0_linear_112_2)"/>
+<path d="M164.944 349L124.624 274.12H118.576V349H62.128V145.96H151.12C167.44 145.96 181.264 148.84 192.592 154.6C203.92 160.168 212.464 167.944 218.224 177.928C223.984 187.72 226.864 198.76 226.864 211.048C226.864 224.872 223.024 237.064 215.344 247.624C207.856 257.992 196.816 265.384 182.224 269.8L228.016 349H164.944ZM118.576 235.528H146.512C154.192 235.528 159.952 233.704 163.792 230.056C167.632 226.408 169.552 221.128 169.552 214.216C169.552 207.688 167.536 202.6 163.504 198.952C159.664 195.112 154 193.192 146.512 193.192H118.576V235.528Z" fill="black"/>
+<path d="M358.736 351.016C335.12 351.016 315.728 345.448 300.56 334.312C285.392 322.984 277.232 306.856 276.08 285.928H336.272C336.848 293.032 338.96 298.216 342.608 301.48C346.256 304.744 350.96 306.376 356.72 306.376C361.904 306.376 366.128 305.128 369.392 302.632C372.848 299.944 374.576 296.296 374.576 291.688C374.576 285.736 371.792 281.128 366.224 277.864C360.656 274.6 351.632 270.952 339.152 266.92C325.904 262.504 315.152 258.28 306.896 254.248C298.832 250.024 291.728 243.976 285.584 236.104C279.632 228.04 276.656 217.576 276.656 204.712C276.656 191.656 279.92 180.52 286.448 171.304C292.976 161.896 302 154.792 313.52 149.992C325.04 145.192 338.096 142.792 352.688 142.792C376.304 142.792 395.12 148.36 409.136 159.496C423.344 170.44 430.928 185.896 431.888 205.864H370.544C370.352 199.72 368.432 195.112 364.784 192.04C361.328 188.968 356.816 187.432 351.248 187.432C347.024 187.432 343.568 188.68 340.88 191.176C338.192 193.672 336.848 197.224 336.848 201.832C336.848 205.672 338.288 209.032 341.168 211.912C344.24 214.6 347.984 217 352.4 219.112C356.816 221.032 363.344 223.528 371.984 226.6C384.848 231.016 395.408 235.432 403.664 239.848C412.112 244.072 419.312 250.12 425.264 257.992C431.408 265.672 434.48 275.464 434.48 287.368C434.48 299.464 431.408 310.312 425.264 319.912C419.312 329.512 410.576 337.096 399.056 342.664C387.728 348.232 374.288 351.016 358.736 351.016Z" fill="url(#paint1_linear_112_2)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_112_2" x1="124.877" y1="475.523" x2="64.7448" y2="965.239" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00FDDC"/>
+<stop offset="1" stop-color="#0E79B2"/>
+</linearGradient>
+<linearGradient id="paint1_linear_112_2" x1="-29" y1="15.5" x2="476.5" y2="460.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00FDDC"/>
+<stop offset="1" stop-color="#0E79B2"/>
+</linearGradient>
+<clipPath id="clip0_112_2">
+<rect width="500" height="500" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/assets/logos/spacebot.svg b/static/assets/logos/spacebot.svg
new file mode 100644
index 0000000..6f2a222
--- /dev/null
+++ b/static/assets/logos/spacebot.svg
@@ -0,0 +1,121 @@
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_0_2)">
+<rect width="1024" height="1024" fill="white"/>
+<rect x="-41" y="-35" width="1135" height="1106" fill="#000811"/>
+<circle cx="34.669" cy="158.618" r="3.59437" transform="rotate(-12.7856 34.669 158.618)" fill="white"/>
+<circle cx="93.0899" cy="145.36" r="3.59437" transform="rotate(-12.7856 93.0899 145.36)" fill="white"/>
+<circle cx="101.044" cy="180.413" r="3.59437" transform="rotate(-12.7856 101.044 180.413)" fill="white"/>
+<circle cx="82.979" cy="209.084" r="3.59437" transform="rotate(-12.7856 82.979 209.084)" fill="white"/>
+<circle cx="168.993" cy="263.28" r="3.59437" transform="rotate(-12.7856 168.993 263.28)" fill="white"/>
+<circle cx="97.8098" cy="328.577" r="3.59437" transform="rotate(-12.7856 97.8098 328.577)" fill="white"/>
+<circle cx="37.8157" cy="280.763" r="3.59437" transform="rotate(-12.7856 37.8157 280.763)" fill="white"/>
+<circle cx="199.821" cy="182.569" r="3.59437" transform="rotate(-12.7856 199.821 182.569)" fill="white"/>
+<circle cx="274.15" cy="239.417" r="3.59437" transform="rotate(-12.7856 274.15 239.417)" fill="white"/>
+<circle cx="358.096" cy="122.08" r="3.59437" transform="rotate(-12.7856 358.096 122.08)" fill="white"/>
+<circle cx="416.517" cy="108.823" r="3.59437" transform="rotate(-12.7856 416.517 108.823)" fill="white"/>
+<circle cx="424.471" cy="143.875" r="3.59437" transform="rotate(-12.7856 424.471 143.875)" fill="white"/>
+<circle cx="406.406" cy="172.546" r="3.59437" transform="rotate(-12.7856 406.406 172.546)" fill="white"/>
+<circle cx="492.42" cy="226.742" r="3.59437" transform="rotate(-12.7856 492.42 226.742)" fill="white"/>
+<circle cx="421.237" cy="292.04" r="3.59437" transform="rotate(-12.7856 421.237 292.04)" fill="white"/>
+<circle cx="361.243" cy="244.225" r="3.59437" transform="rotate(-12.7856 361.243 244.225)" fill="white"/>
+<circle cx="523.248" cy="146.031" r="3.59437" transform="rotate(-12.7856 523.248 146.031)" fill="white"/>
+<circle cx="597.577" cy="202.879" r="3.59437" transform="rotate(-12.7856 597.577 202.879)" fill="white"/>
+<circle cx="517.928" cy="791.983" r="3.59437" transform="rotate(-38 517.928 791.983)" fill="white"/>
+<circle cx="565.135" cy="755.101" r="3.59437" transform="rotate(-38 565.135 755.101)" fill="white"/>
+<circle cx="587.264" cy="783.425" r="3.59437" transform="rotate(-38 587.264 783.425)" fill="white"/>
+<circle cx="583.134" cy="817.06" r="3.59437" transform="rotate(-38 583.134 817.06)" fill="white"/>
+<circle cx="684.04" cy="829.45" r="3.59437" transform="rotate(-38 684.04 829.45)" fill="white"/>
+<circle cx="647.456" cy="918.85" r="3.59437" transform="rotate(-38 647.456 918.85)" fill="white"/>
+<circle cx="572.809" cy="901.149" r="3.59437" transform="rotate(-38 572.809 901.149)" fill="white"/>
+<circle cx="677.548" cy="743.297" r="3.59437" transform="rotate(-38 677.548 743.297)" fill="white"/>
+<circle cx="769.013" cy="763.063" r="3.59437" transform="rotate(-38 769.013 763.063)" fill="white"/>
+<circle cx="794.973" cy="621.144" r="3.59437" transform="rotate(-38 794.973 621.144)" fill="white"/>
+<circle cx="842.18" cy="584.262" r="3.59437" transform="rotate(-38 842.18 584.262)" fill="white"/>
+<circle cx="864.31" cy="612.586" r="3.59437" transform="rotate(-38 864.31 612.586)" fill="white"/>
+<circle cx="860.18" cy="646.222" r="3.59437" transform="rotate(-38 860.18 646.222)" fill="white"/>
+<circle cx="961.086" cy="658.612" r="3.59437" transform="rotate(-38 961.086 658.612)" fill="white"/>
+<circle cx="924.502" cy="748.012" r="3.59437" transform="rotate(-38 924.502 748.012)" fill="white"/>
+<circle cx="849.855" cy="730.311" r="3.59437" transform="rotate(-38 849.855 730.311)" fill="white"/>
+<circle cx="954.593" cy="572.458" r="3.59437" transform="rotate(-38 954.593 572.458)" fill="white"/>
+<circle cx="590.266" cy="25.1108" r="3.59437" transform="rotate(28 590.266 25.1108)" fill="white"/>
+<circle cx="643.16" cy="53.235" r="3.59437" transform="rotate(28 643.16 53.235)" fill="white"/>
+<circle cx="626.286" cy="84.9715" r="3.59437" transform="rotate(28 626.286 84.9715)" fill="white"/>
+<circle cx="593.878" cy="94.8794" r="3.59437" transform="rotate(28 593.878 94.8794)" fill="white"/>
+<circle cx="623.602" cy="192.101" r="3.59437" transform="rotate(28 623.602 192.101)" fill="white"/>
+<circle cx="527.051" cy="195.043" r="3.59437" transform="rotate(28 527.051 195.043)" fill="white"/>
+<circle cx="512.86" cy="119.649" r="3.59437" transform="rotate(28 512.86 119.649)" fill="white"/>
+<circle cx="699.666" cy="151.128" r="3.59437" transform="rotate(28 699.666 151.128)" fill="white"/>
+<circle cx="718.811" cy="242.725" r="3.59437" transform="rotate(28 718.811 242.725)" fill="white"/>
+<circle cx="859.019" cy="208.718" r="3.59437" transform="rotate(28 859.019 208.718)" fill="white"/>
+<circle cx="911.913" cy="236.842" r="3.59437" transform="rotate(28 911.913 236.842)" fill="white"/>
+<circle cx="895.039" cy="268.579" r="3.59437" transform="rotate(28 895.039 268.579)" fill="white"/>
+<circle cx="862.631" cy="278.487" r="3.59437" transform="rotate(28 862.631 278.487)" fill="white"/>
+<circle cx="892.355" cy="375.709" r="3.59437" transform="rotate(28 892.355 375.709)" fill="white"/>
+<circle cx="795.804" cy="378.65" r="3.59437" transform="rotate(28 795.804 378.65)" fill="white"/>
+<circle cx="781.613" cy="303.257" r="3.59437" transform="rotate(28 781.613 303.257)" fill="white"/>
+<circle cx="968.42" cy="334.735" r="3.59437" transform="rotate(28 968.42 334.735)" fill="white"/>
+<circle cx="987.564" cy="426.332" r="3.59437" transform="rotate(28 987.564 426.332)" fill="white"/>
+<circle cx="161.96" cy="550.455" r="3.59437" transform="rotate(37 161.96 550.455)" fill="white"/>
+<circle cx="209.803" cy="586.507" r="3.59437" transform="rotate(37 209.803 586.507)" fill="white"/>
+<circle cx="188.172" cy="615.213" r="3.59437" transform="rotate(37 188.172 615.213)" fill="white"/>
+<circle cx="154.613" cy="619.929" r="3.59437" transform="rotate(37 154.613 619.929)" fill="white"/>
+<circle cx="168.762" cy="720.604" r="3.59437" transform="rotate(37 168.762 720.604)" fill="white"/>
+<circle cx="72.9397" cy="708.405" r="3.59437" transform="rotate(37 72.9397 708.405)" fill="white"/>
+<circle cx="70.7176" cy="631.72" r="3.59437" transform="rotate(37 70.7176 631.72)" fill="white"/>
+<circle cx="250.3" cy="692.034" r="3.59437" transform="rotate(37 250.3 692.034)" fill="white"/>
+<circle cx="254.88" cy="785.499" r="3.59437" transform="rotate(37 254.88 785.499)" fill="white"/>
+<circle cx="398.682" cy="773.844" r="3.59437" transform="rotate(37 398.682 773.844)" fill="white"/>
+<circle cx="446.525" cy="809.896" r="3.59437" transform="rotate(37 446.525 809.896)" fill="white"/>
+<circle cx="424.893" cy="838.602" r="3.59437" transform="rotate(37 424.893 838.602)" fill="white"/>
+<circle cx="391.335" cy="843.319" r="3.59437" transform="rotate(37 391.335 843.319)" fill="white"/>
+<circle cx="405.484" cy="943.993" r="3.59437" transform="rotate(37 405.484 943.993)" fill="white"/>
+<circle cx="309.662" cy="931.794" r="3.59437" transform="rotate(37 309.662 931.794)" fill="white"/>
+<circle cx="307.44" cy="855.109" r="3.59437" transform="rotate(37 307.44 855.109)" fill="white"/>
+<circle cx="487.022" cy="915.423" r="3.59437" transform="rotate(37 487.022 915.423)" fill="white"/>
+<circle cx="491.602" cy="1008.89" r="3.59437" transform="rotate(37 491.602 1008.89)" fill="white"/>
+<path d="M843.209 555.339C841.886 566.114 834.461 577.852 817.267 589.425C800.122 600.965 775.11 610.983 743.281 618.419C679.769 633.258 592.92 636.944 498.061 625.297C403.203 613.65 319.825 589.062 261.789 559.299C232.705 544.384 210.859 528.612 197.016 513.268C183.132 497.879 178.768 484.694 180.091 473.918C181.414 463.143 188.838 451.405 206.033 439.832C223.177 428.292 248.189 418.274 280.018 410.838C343.53 395.999 430.38 392.312 525.238 403.96C620.097 415.607 703.474 440.195 761.51 469.958C790.594 484.873 812.44 500.644 826.284 515.989C840.167 531.378 844.532 544.563 843.209 555.339Z" stroke="#454B54" stroke-width="35"/>
+<circle cx="513.676" cy="512" r="232.5" fill="#C7D7E2" stroke="#979797"/>
+<circle cx="472.176" cy="511.5" r="220" fill="white"/>
+<circle cx="514.176" cy="512" r="249.5" stroke="#454B54" stroke-width="35"/>
+<circle cx="463.176" cy="596" r="48" fill="#C7D7E2"/>
+<circle cx="673.176" cy="526" r="37" fill="#C7D7E2"/>
+<circle cx="501.176" cy="386" r="24" fill="#C7D7E2"/>
+<path d="M233.176 542C233.176 542 277.062 570.005 344.223 596C361.647 602.744 370.875 606.514 432.295 621.549C445.476 624.775 450.984 626.358 466.147 628.473C476.129 629.865 490.24 631.642 513.676 633.729C572.709 638.984 579.983 637.467 598.111 637.467C634.184 637.467 666.623 634.421 700.563 628.473C722.884 624.561 746.176 618.638 746.176 618.638L781.176 606.629" stroke="#454B54" stroke-width="35" stroke-linecap="square"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M218.031 433.488L261.082 414.74L288.664 403.965L218.031 433.488Z" stroke="#454B54" stroke-width="35" stroke-linecap="square"/>
+<circle cx="62.1504" cy="32.4168" r="3.59437" transform="rotate(-12.7856 62.1504 32.4168)" fill="white"/>
+<circle cx="280.42" cy="19.7425" r="3.59437" transform="rotate(-12.7856 280.42 19.7425)" fill="white"/>
+<circle cx="209.237" cy="85.0395" r="3.59437" transform="rotate(-12.7856 209.237 85.0395)" fill="white"/>
+<circle cx="149.243" cy="37.2248" r="3.59437" transform="rotate(-12.7856 149.243 37.2248)" fill="white"/>
+<circle cx="385.577" cy="-4.12104" r="3.59437" transform="rotate(-12.7856 385.577 -4.12104)" fill="white"/>
+<circle cx="856.979" cy="2.0843" r="3.59437" transform="rotate(-12.7856 856.979 2.0843)" fill="white"/>
+<circle cx="942.993" cy="56.2803" r="3.59437" transform="rotate(-12.7856 942.993 56.2803)" fill="white"/>
+<circle cx="871.81" cy="121.577" r="3.59437" transform="rotate(-12.7856 871.81 121.577)" fill="white"/>
+<circle cx="811.816" cy="73.7626" r="3.59437" transform="rotate(-12.7856 811.816 73.7626)" fill="white"/>
+<circle cx="808.669" cy="858.618" r="3.59437" transform="rotate(-12.7856 808.669 858.618)" fill="white"/>
+<circle cx="867.09" cy="845.361" r="3.59437" transform="rotate(-12.7856 867.09 845.361)" fill="white"/>
+<circle cx="875.044" cy="880.413" r="3.59437" transform="rotate(-12.7856 875.044 880.413)" fill="white"/>
+<circle cx="856.979" cy="909.084" r="3.59437" transform="rotate(-12.7856 856.979 909.084)" fill="white"/>
+<circle cx="942.993" cy="963.28" r="3.59437" transform="rotate(-12.7856 942.993 963.28)" fill="white"/>
+<circle cx="811.816" cy="980.763" r="3.59437" transform="rotate(-12.7856 811.816 980.763)" fill="white"/>
+<circle cx="973.821" cy="882.569" r="3.59437" transform="rotate(-12.7856 973.821 882.569)" fill="white"/>
+<circle cx="51.5163" cy="808.823" r="3.59437" transform="rotate(-12.7856 51.5163 808.823)" fill="white"/>
+<circle cx="59.4707" cy="843.875" r="3.59437" transform="rotate(-12.7856 59.4707 843.875)" fill="white"/>
+<circle cx="41.4054" cy="872.546" r="3.59437" transform="rotate(-12.7856 41.4054 872.546)" fill="white"/>
+<circle cx="127.419" cy="926.742" r="3.59437" transform="rotate(-12.7856 127.419 926.742)" fill="white"/>
+<circle cx="56.2362" cy="992.04" r="3.59437" transform="rotate(-12.7856 56.2362 992.04)" fill="white"/>
+<circle cx="-3.75793" cy="944.225" r="3.59437" transform="rotate(-12.7856 -3.75793 944.225)" fill="white"/>
+<circle cx="158.247" cy="846.032" r="3.59437" transform="rotate(-12.7856 158.247 846.032)" fill="white"/>
+<circle cx="36.5164" cy="407.822" r="3.59437" transform="rotate(-12.7856 36.5164 407.822)" fill="white"/>
+<circle cx="26.4056" cy="471.547" r="3.59437" transform="rotate(-12.7856 26.4056 471.547)" fill="white"/>
+<circle cx="112.419" cy="525.743" r="3.59437" transform="rotate(-12.7856 112.419 525.743)" fill="white"/>
+<circle cx="143.247" cy="445.031" r="3.59437" transform="rotate(-12.7856 143.247 445.031)" fill="white"/>
+<circle cx="223.517" cy="311.822" r="3.59437" transform="rotate(-12.7856 223.517 311.822)" fill="white"/>
+<circle cx="213.406" cy="375.547" r="3.59437" transform="rotate(-12.7856 213.406 375.547)" fill="white"/>
+<circle cx="232.577" cy="902.879" r="3.59437" transform="rotate(-12.7856 232.577 902.879)" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_0_2">
+<rect width="1024" height="1024" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/assets/logos/spectrumgalaxy.svg b/static/assets/logos/spectrumgalaxy.svg
new file mode 100644
index 0000000..5281ec5
--- /dev/null
+++ b/static/assets/logos/spectrumgalaxy.svg
@@ -0,0 +1,18 @@
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_22)">
+<rect width="1024" height="1024" fill="white"/>
+<rect x="-41" y="-35" width="1135" height="1106" fill="url(#paint0_linear_1_22)"/>
+<path d="M283.223 632.375C287.437 634.519 291.793 636.619 296.082 638.511C298.284 639.482 300.682 640.624 303.304 641.871C310.406 645.25 319.148 649.41 330.06 653.085C336.562 655.274 344.845 657.635 351.436 659.45C354.69 660.346 357.624 661.134 359.828 661.727L360.002 661.773C360.964 662.032 361.67 662.223 362.167 662.358C363.071 662.602 363.289 662.661 363.113 662.603C365.554 663.416 440.668 683.698 492.933 690.36C533.67 695.552 546.882 696.061 558.756 696.518C561.968 696.642 565.083 696.762 568.618 696.97C589.476 698.197 608.323 697.617 621.491 696.98C653.519 695.43 667.044 693.289 692.054 687.558C696.198 686.608 700.183 685.583 703.998 684.511C659.565 740.209 591.841 773.5 514.002 773.5C413.906 773.5 322.899 717.076 283.223 632.375ZM260.645 599.5C258.355 603.134 256.628 605.876 255.324 607.946C255.28 608.016 255.236 608.086 255.192 608.155C255.192 608.154 255.192 608.154 255.192 608.154L255.324 607.946L260.645 599.5Z" fill="#F0F0F0" stroke="white" stroke-width="35"/>
+<path d="M858.739 553.63C857.861 560.783 852.213 570.608 834.49 581.252C817.062 591.719 791.199 600.861 757.832 607.515C691.34 620.776 600.031 623.191 500 610.909C399.969 598.627 311.957 574.194 250.648 545.241C219.881 530.712 196.999 515.584 182.62 501.212C167.999 486.597 164.895 475.697 165.774 468.545C166.652 461.392 172.3 451.567 190.023 440.923C207.451 430.457 233.314 421.314 266.681 414.66C333.173 401.399 424.482 398.984 524.513 411.266C624.544 423.548 712.556 447.982 773.865 476.934C804.632 491.463 827.514 506.591 841.892 520.963C856.514 535.578 859.617 546.478 858.739 553.63Z" stroke="white" stroke-width="44"/>
+<path d="M266.321 500C266.321 362.205 378.026 250.5 515.821 250.5C653.616 250.5 765.321 362.205 765.321 500C765.321 537.742 756.952 573.486 741.982 605.515C738.063 606.268 732.962 607.225 727.081 608.27C713.187 610.74 695.147 613.672 678.158 615.613C643.893 619.529 601.232 622.242 552.111 619.527C506.817 617.023 481.753 612.784 436.544 603.833C405.432 597.673 370.163 588.336 357.491 584.684C352.923 583.368 348.814 582.215 345.001 581.144C329.85 576.89 319.362 573.946 303.324 567.324C295.919 564.267 286.382 559.642 278.441 555.635C275.995 554.4 273.739 553.244 271.795 552.239C268.21 535.406 266.321 517.933 266.321 500Z" fill="#F0F0F0" stroke="white" stroke-width="35"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1_22" x1="-1.99998" y1="2.49998" x2="1014.5" y2="1026.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A808FE"/>
+<stop offset="1" stop-color="#5000FF"/>
+</linearGradient>
+<clipPath id="clip0_1_22">
+<rect width="1024" height="1024" fill="white"/>
+</clipPath>
+</defs>
+</svg>