From 6bb0f01353038a44158bac3f773d6aebd4d7848a Mon Sep 17 00:00:00 2001
From: Amanda Sinha <amanda.m.sinha@gmail.com>
Date: Fri, 1 Mar 2024 09:24:38 -0800
Subject: [PATCH 1/4] Basic homepage frontend

---
 frontend/src/routes/Home.svelte | 49 ++++++++++++++++++++++++++++++---
 1 file changed, 45 insertions(+), 4 deletions(-)

diff --git a/frontend/src/routes/Home.svelte b/frontend/src/routes/Home.svelte
index a80cede4..dbf06239 100644
--- a/frontend/src/routes/Home.svelte
+++ b/frontend/src/routes/Home.svelte
@@ -1,13 +1,54 @@
 <script lang="ts">
-	/* Put stuff here */
+	import { Backend, clearToken, type LoginResponse } from "../lib/backend";
+	import { Button, Label, Input } from "flowbite-svelte";
+	import Cookies from "js-cookie";
+	import { onMount } from "svelte";
+	import { navigate } from "svelte-routing";
+	import { user } from "../lib/stores/user"
 </script>
 
 <svelte:head>
 	<title>Venome Home</title>
 </svelte:head>
 
-<div>home</div>
+<div id="title_col_1">
+	<h1>Welcome to the Unknown Venome</h1>
+	<h3>New? Check out our <a href="/tutorials">tutorials</a>!</h3>
+	<h3>Looking for something specific? Start searching now!</h3>
+	<!--search bar-->
+	<form>
+		<input type="text">
+		<!--I'm feeling lucky-->
+		<button>Roll the dice</button>
+	</form>
+</div>
 
 <style>
-	/*  put stuff here */
-</style>
+	h1 {
+		margin-top: 10px;
+		margin-top: 3px;
+		color: rgb(25, 63, 90);
+	}
+
+	h3 {
+		margin: 5px;
+		margin-bottom: 3px;
+		margin-top: 10px;
+	}
+
+	input {
+		padding: 5px;
+		display: inline;
+	}
+
+	button {
+		background-color: rgb(25, 63, 90);
+		border-radius: 3px;
+		color: lightgray;
+		padding: 3px;
+	}
+
+	#title_col_1 {
+		margin-left: 15px;
+	}
+</style>
\ No newline at end of file

From 54f31a37b8d8b6f57766fde1713aef47befe1118 Mon Sep 17 00:00:00 2001
From: Amanda Sinha <amanda.m.sinha@gmail.com>
Date: Thu, 7 Mar 2024 19:05:07 -0800
Subject: [PATCH 2/4] I just need to switch branches

---
 frontend/src/routes/Home.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/routes/Home.svelte b/frontend/src/routes/Home.svelte
index dbf06239..c86914ec 100644
--- a/frontend/src/routes/Home.svelte
+++ b/frontend/src/routes/Home.svelte
@@ -26,7 +26,7 @@
 <style>
 	h1 {
 		margin-top: 10px;
-		margin-top: 3px;
+		margin-bottom: 3px;
 		color: rgb(25, 63, 90);
 	}
 

From 812194e1048d0bf93f740f3866ccf6f000ea2d2b Mon Sep 17 00:00:00 2001
From: Amanda Sinha <amanda.m.sinha@gmail.com>
Date: Fri, 26 Apr 2024 11:59:35 -0700
Subject: [PATCH 3/4] Base layout finished

---
 frontend/src/routes/Home.svelte | 98 +++++++++++++++++++++++++++++----
 1 file changed, 87 insertions(+), 11 deletions(-)

diff --git a/frontend/src/routes/Home.svelte b/frontend/src/routes/Home.svelte
index c86914ec..1d0ad1d5 100644
--- a/frontend/src/routes/Home.svelte
+++ b/frontend/src/routes/Home.svelte
@@ -5,28 +5,67 @@
 	import { onMount } from "svelte";
 	import { navigate } from "svelte-routing";
 	import { user } from "../lib/stores/user"
+	import ProteinVis from "../lib/ProteinVis.svelte";
 </script>
 
 <svelte:head>
 	<title>Venome Home</title>
 </svelte:head>
 
-<div id="title_col_1">
+<div id="title">
 	<h1>Welcome to the Unknown Venome</h1>
-	<h3>New? Check out our <a href="/tutorials">tutorials</a>!</h3>
-	<h3>Looking for something specific? Start searching now!</h3>
-	<!--search bar-->
-	<form>
-		<input type="text">
-		<!--I'm feeling lucky-->
-		<button>Roll the dice</button>
-	</form>
+</div>
+<div id="title_page">
+	<div id="side_col" class="col">
+		<h3>Get to know the <a href="https://venombiochemistrylab.weebly.com/">Venome Lab!</a></h3>
+		<p>The Venome Lab is based out of OSU and studies three species of parasitic wasps and their proteins</p>
+		<h3>There are so many wasps in there</h3>
+		<!--search bar-->
+		<img src="https://biochem.oregonstate.edu/sites/biochem.oregonstate.edu/files/styles/600_x_var/public/2023-02/Nate.jpg?itok=eoH8WcNU" alt="A picture of Nate Mortimer in lab gear doing some scientific stuff." id="DeadInTheWater">
+	</div>
+	<div id="middle_col" class="col">
+		<h3>Looking for something specific? Start searching now!</h3>
+		<!--search bar-->
+		<form>
+			<input type="text">
+			<!--I'm feeling lucky-->
+			<button>Roll the dice</button>
+		</form>
+
+		<ProteinVis
+			format="pdb"
+			width={400}
+			height={400}
+		/>
+		<div class="protein_about">
+			<p>lorem ipsum dolor sit something about the proteins</p>
+		</div>
+	</div>
+	<div id="side_col" class="col">
+		<h3>New? Check out our <a href="/tutorials">tutorials</a>!</h3>
+		<p>Whether you're a protein expert looking to analyze some proteins or a new student with a budding interest in biochemistry, this is the place for you.</p>
+		<h3>See <em>all</em> of our proteins, <a href="/search">listed here</a>!</h3>
+		<p>Filter down the Venome lab's catalog of proteins and see all the features within.</p>
+		<!--search bar-->
+		<div id="GettingStarted">
+			<h3>Get started with these helpful tutorials!</h3>
+			<ul>
+				<li>using the site</li>
+				<li>biochem basics</li>
+			</ul>
+		</div>
+	</div>
 </div>
 
 <style>
+	#title {
+		width: 100%;
+	}
+
 	h1 {
 		margin-top: 10px;
 		margin-bottom: 3px;
+		text-align: center;
 		color: rgb(25, 63, 90);
 	}
 
@@ -48,7 +87,44 @@
 		padding: 3px;
 	}
 
-	#title_col_1 {
-		margin-left: 15px;
+	#title_page {
+		margin: 0% 2%;
+		display: flex;
+	}
+
+	.col {
+		margin: 0% 0.5%;
+		padding: 1%;
+		background-color:aliceblue;
+	}
+
+	#side_col {
+		width: 27%
+	}
+
+	#middle_col {
+		width: 42%;
 	}
+
+	ProteinVis {
+		margin: 1%;
+		max-width: 30%;
+		max-height: 30%;
+		display: block;
+	}
+
+	.protein_about {
+		margin-left: 20px;
+		display: block;
+	}
+
+	ul li {
+		margin-left: 3%;
+		list-style-type: circle;
+	}
+
+	input {
+		margin-bottom: 15px;
+	}
+
 </style>
\ No newline at end of file

From dfb3fdefd9a41a6ca2fcc5a77b614848f99a23cd Mon Sep 17 00:00:00 2001
From: Amanda Sinha <amanda.m.sinha@gmail.com>
Date: Fri, 26 Apr 2024 12:15:57 -0700
Subject: [PATCH 4/4] Minor styling changes

---
 frontend/src/routes/Home.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/routes/Home.svelte b/frontend/src/routes/Home.svelte
index 1d0ad1d5..6e12e746 100644
--- a/frontend/src/routes/Home.svelte
+++ b/frontend/src/routes/Home.svelte
@@ -17,7 +17,7 @@
 </div>
 <div id="title_page">
 	<div id="side_col" class="col">
-		<h3>Get to know the <a href="https://venombiochemistrylab.weebly.com/">Venome Lab!</a></h3>
+		<h3>Get to know the <a href="https://venombiochemistrylab.weebly.com/">Venome Lab</a>!</h3>
 		<p>The Venome Lab is based out of OSU and studies three species of parasitic wasps and their proteins</p>
 		<h3>There are so many wasps in there</h3>
 		<!--search bar-->
@@ -70,7 +70,6 @@
 	}
 
 	h3 {
-		margin: 5px;
 		margin-bottom: 3px;
 		margin-top: 10px;
 	}
@@ -94,7 +93,7 @@
 
 	.col {
 		margin: 0% 0.5%;
-		padding: 1%;
+		padding: 2%;
 		background-color:aliceblue;
 	}
 
@@ -119,12 +118,13 @@
 	}
 
 	ul li {
-		margin-left: 3%;
+		margin-left: 7%;
 		list-style-type: circle;
 	}
 
 	input {
 		margin-bottom: 15px;
 	}
+	
 
 </style>
\ No newline at end of file