From f7253e8497a265535f089530ef44c0dfb8f0fab0 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Thu, 5 Sep 2024 14:27:58 +0800
Subject: [PATCH] Homepage stats and tab organization

---
 home.html | 186 +++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 120 insertions(+), 66 deletions(-)

diff --git a/home.html b/home.html
index 446e53e..1c8d0b8 100644
--- a/home.html
+++ b/home.html
@@ -37,57 +37,143 @@
 	<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">Time Safari</h1>
 
 	<!-- Tabs -->
-	<!-- div class="text-center text-slate-500 border-b border-slate-300 mb-8">
+	<div class="text-center text-slate-500 border-b border-slate-300 mb-8">
 		<ul class="flex flex-wrap justify-center gap-4 -mb-px">
-			<li>
-				<a href="#" class="inline-block py-3 rounded-t-lg border-b-2 active text-blue-600 border-blue-600 font-semibold">
-					Dashboard
-				</a>
-			</li>
 			<li>
 				<a href="#" class="inline-block py-3 rounded-t-lg border-b-2 border-transparent hover:text-slate-600 hover:border-slate-300">
-					Gives
+					Dashboard
 				</a>
 			</li>
 			<li>
 				<a href="#" class="inline-block py-3 rounded-t-lg border-b-2 border-transparent hover:text-slate-600 hover:border-slate-300">
-					Offers
+					Updates
 				</a>
 			</li>
 			<li>
-				<a href="#" class="inline-block py-3 rounded-t-lg border-b-2 border-transparent hover:text-slate-600 hover:border-slate-300">
-					Projects
+				<a href="#" class="inline-block py-3 rounded-t-lg border-b-2 active text-blue-600 border-blue-600 font-semibold">
+					Record
 				</a>
 			</li>
 		</ul>
-	</div -->
+	</div>
 
-	<!-- Dashboard Widgets -->
-	<div class="mb-8">
-		<div class="grid grid-cols-3 gap-2">
-			<a href="" class="bg-slate-100 rounded-md overflow-hidden px-2 md:px-4 py-3">
-				<div class="text-3xl md:text-4xl font-light">888</div>
-				<h4 class="text-xs font-bold uppercase">New Gives</h4>
-				<!-- div class="bg-slate-300 rounded-full overflow-hidden mt-2">
-					<div class="bg-slate-500 h-2 w-[76%]"></div>
-				</div -->
-				<p class="text-xs text-slate-500 leading-tight mt-0.5"><b>76%</b> from contacts</p>
-			</a>
-
-			<a href="" class="bg-slate-100 rounded-md overflow-hidden px-2 md:px-4 py-3">
-				<div class="text-3xl md:text-4xl font-light">8,888</div>
-				<h4 class="text-xs font-bold uppercase">New Offers</h4>
-			</a>
-
-			<a class="bg-slate-100 rounded-md overflow-hidden px-2 md:px-4 py-3">
-				<div class="text-3xl md:text-4xl font-light">88</div>
-				<h4 class="text-xs font-bold uppercase">New Projects</h4>
-				<p class="text-xs text-slate-500 leading-tight mt-0.5">for you</p>
-			</a>
+	<!-- Dashboard Tab Body -->
+	<div class="hidden mb-8">
+		<!-- Record Quick-Action -->
+		<div class="mb-6">
+			<h2 class="text-xl font-bold mb-2">Record something given by:</h2>
+			<div class="grid grid-cols-5 gap-2">
+				<button type="button" class="col-span-3 text-center text-base uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2">Unnamed / Unknown</button>
+				<button type="button" class="col-span-2 text-center text-base uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2">Contact</button>
+			</div>
+		</div>
+
+		<!-- Dashboard Widgets -->
+		<div class="mb-6">
+			<div class="grid grid-flow-col auto-cols-fr gap-2">
+				<a href="" class="md:flex md:gap-1 md:items-baseline bg-slate-100 rounded-md overflow-hidden px-2 md:px-4 py-3">
+					<div class="text-3xl md:text-4xl font-light leading-none"><i class="fa-solid fa-hand text-sm md:text-xl text-slate-400/80 align-middle me-0.5 md:me-1"></i>8</div>
+					<h4 class="text-xs md:text-sm font-semibold uppercase">New Offers</h4>
+				</a>
+
+				<a href="" class="md:flex md:gap-1 md:items-baseline bg-slate-100 rounded-md overflow-hidden px-2 md:px-4 py-3">
+					<div class="text-3xl md:text-4xl font-light leading-none"><i class="fa-solid fa-gift text-sm md:text-xl text-slate-400/80 align-middle me-0.5 md:me-1"></i>99<small>+</small></div>
+					<h4 class="text-xs md:text-sm font-semibold uppercase">New Gives</h4>
+				</a>
+
+				<a href="" class="md:flex md:gap-1 md:items-baseline bg-slate-100 rounded-md overflow-hidden px-2 md:px-4 py-3">
+					<div class="text-3xl md:text-4xl font-light leading-none"><i class="fa-solid fa-folder-open text-sm md:text-xl text-slate-400/80 align-middle me-0.5 md:me-1"></i>88</div>
+					<h4 class="text-xs md:text-sm font-semibold uppercase">New Projects</h4>
+				</a>
+			</div>
+		</div>
+
+		<div class="overflow-hidden mb-4">
+			<div class="flex items-center mb-4">
+				<h2 class="text-xl font-bold">Latest Activity</h2>
+				<button class="block text-center ml-auto text-sm text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md">Unfiltered</button>
+			</div>
+
+			<ul class="border-t border-slate-300">
+				<li class="border-b border-slate-300 py-2">
+					<div class="flex">
+						<i class="fa-solid fa-gift pt-1 pr-2 text-slate-500"></i>
+						<span class="">[Sender] gave [amount] to [recipient]</span>
+					</div>
+				</li>
+
+				<li class="border-b border-slate-300 py-2">
+					<div class="flex">
+						<i class="fa-solid fa-gift pt-1 pr-2 text-slate-500"></i>
+						<span class="">[Sender] gave [amount] to [recipient]</span>
+					</div>
+				</li>
+
+				<li class="border-b border-slate-300 py-2">
+					<div class="border-b border-dashed border-slate-400 text-orange-400 py-2 mb-2 font-bold uppercase text-sm">Previous Activity:</div>
+					
+					<div class="flex">
+						<i class="fa-solid fa-gift pt-1 pr-2 text-slate-500"></i>
+						<span class="">[Sender] gave [amount] to [recipient]</span>
+					</div>
+				</li>
+			</ul>
 		</div>
 	</div>
 
-	<!-- Record Something -->
+	<!-- Updates Tab Body -->
+	 <div class="hidden mb-8">
+		<div class="mb-8">
+			<h3 class="text-sm uppercase font-semibold mb-3"><i class="fa-solid fa-hand text-slate-500"></i> Offers</h3>
+			
+			<ul class="border-t border-slate-300">
+				<li class="flex gap-4 justify-between items-center border-b border-slate-300 py-3">
+					<span><b>88</b> to <i>projects of interest</i></span>
+					<span class="bg-rose-500 text-white font-medium text-xs px-2 py-1 uppercase rounded-full">8 new</span>
+				</li>
+			</ul>
+		</div>
+
+		<div class="mb-8">
+			<h3 class="text-sm uppercase font-semibold mb-3"><i class="fa-solid fa-gift text-slate-500"></i> Gives</h3>
+			
+			<ul class="border-t border-slate-300">
+				<li class="flex gap-4 justify-between items-center border-b border-slate-300 py-3">
+					<span><b>88</b> from <i>friends</i></span>
+					<span class="bg-rose-500 text-white font-medium text-xs px-2 py-1 uppercase rounded-full">8 new</span>
+				</li>
+				<li class="flex gap-4 justify-between items-center border-b border-slate-300 py-3">
+					<span><b>88</b> to <i>projects of interest</i></span>
+					<span class="bg-rose-500 text-white font-medium text-xs px-2 py-1 uppercase rounded-full">8 new</span>
+				</li>
+				<li class="flex gap-4 justify-between items-center border-b border-slate-300 py-3">
+					<span><b>88</b> by <i>your network</i></span>
+					<span class="bg-rose-500 text-white font-medium text-xs px-2 py-1 uppercase rounded-full">8 new</span>
+				</li>
+				<li class="flex gap-4 justify-between items-center border-b border-slate-300 py-3">
+					<span><b>88</b> in <i>your area</i></span>
+					<span class="bg-rose-500 text-white font-medium text-xs px-2 py-1 uppercase rounded-full">8 new</span>
+				</li>
+			</ul>
+		</div>
+
+		<div class="mb-8">
+			<h3 class="text-sm uppercase font-semibold mb-3"><i class="fa-solid fa-folder-open text-slate-500"></i> Projects</h3>
+			
+			<ul class="border-t border-slate-300">
+				<li class="flex gap-4 justify-between items-center border-b border-slate-300 py-3">
+					<span><b>88</b> in <i>your area</i></span>
+					<span class="bg-rose-500 text-white font-medium text-xs px-2 py-1 uppercase rounded-full">8 new</span>
+				</li>
+				<li class="flex gap-4 justify-between items-center border-b border-slate-300 py-3">
+					<span><b>88</b> you've helped <i>with new activity</i></span>
+					<span class="bg-rose-500 text-white font-medium text-xs px-2 py-1 uppercase rounded-full">8 new</span>
+				</li>
+			</ul>
+		</div>
+	 </div>
+
+	<!-- Record Tab Body -->
 	<div class="mb-8">
 		<div class="flex justify-between items-center">
 			<h2 class="text-xl font-bold">Record Something Given By:</h2>
@@ -171,38 +257,6 @@
 
 		<!-- a href="contact-list-give.html" class="block text-center text-md font-bold uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md">Show More Contacts&hellip;</a -->
 	</div>
-
-	<div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
-		<div class="flex items-center mb-4">
-			<h2 class="text-xl font-bold">Latest Activity</h2>
-			<button class="block text-center ml-auto text-sm text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md">Unfiltered</button>
-		</div>
-
-		<ul class="border-t border-slate-300">
-			<li class="border-b border-slate-300 py-2">
-				<div class="flex">
-					<i class="fa-solid fa-gift pt-1 pr-2 text-slate-500"></i>
-					<span class="">[Sender] gave [amount] to [recipient]</span>
-				</div>
-			</li>
-
-			<li class="border-b border-slate-300 py-2">
-				<div class="flex">
-					<i class="fa-solid fa-gift pt-1 pr-2 text-slate-500"></i>
-					<span class="">[Sender] gave [amount] to [recipient]</span>
-				</div>
-			</li>
-
-			<li class="border-b border-slate-300 py-2">
-				<div class="border-b border-dashed border-slate-400 text-orange-400 py-2 mb-2 font-bold uppercase text-sm">Previous Activity:</div>
-				
-				<div class="flex">
-					<i class="fa-solid fa-gift pt-1 pr-2 text-slate-500"></i>
-					<span class="">[Sender] gave [amount] to [recipient]</span>
-				</div>
-			</li>
-		</ul>
-	</div>
 </section>
 </body>