From dabf2cb83c8b40fd7e4b45f0ed32a8215dd56cfc Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Mon, 3 Mar 2025 19:36:27 +0800
Subject: [PATCH] More homeview design adjustments

---
 home.html | 138 +++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 89 insertions(+), 49 deletions(-)

diff --git a/home.html b/home.html
index 2f07b8a..e0f22df 100644
--- a/home.html
+++ b/home.html
@@ -89,102 +89,142 @@
 		</div>
 
 		<!-- List -->
-		<div class="hidden overflow-hidden my-6">
+		<div class="overflow-hidden my-6">
 			<div class="flex gap-2 items-center mb-3">
 				<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"><i class="fa-solid fa-filter fa-fw"></i></button>
 				<button class="block text-center text-sm text-white bg-gradient-to-b from-green-500 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md"><i class="fa-solid fa-plus fa-fw"></i></button>
 			</div>
 
-			<ul class="space-y-2">
+			<ul class="space-y-4">
 				<li>
-					<div class="bg-slate-100 rounded-t-md border border-slate-300 px-3 py-2">
-						<div class="relative flex justify-between gap-4 mb-3 pt-1">
-							<a href="" class="w-28 sm:w-40 text-center bg-white drop-shadow-md rounded p-2">
-								<i class="fa-solid fa-circle-question text-slate-300 text-5xl"></i>
-								<div class="text-xs mt-1 line-clamp-2 italic">Anonymous</div>
+					<div class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-6 font-bold text-sm">
+						<span class="block w-fit mx-auto -mb-2.5 bg-white px-2">You've already seen all the following</span>
+					</div>
+
+					<div class="bg-slate-100 rounded-t-md border border-slate-300 p-3 sm:p-4">
+						<div class="flex items-center gap-2 mb-4">
+							<a href=""><img src="https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg" class="size-8 object-cover rounded-full"></a>
+
+							<div>
+								<h3 class="font-semibold"><a href="">Matthew Raymer</a></h3>
+								<p class="ms-auto text-xs text-slate-500 italic">88 minutes ago</p>
+							</div>
+						</div>
+						
+						<div class="relative flex justify-between gap-4 mb-3">
+							<a href="" class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3">
+								<div class="relative w-fit mx-auto">
+									<i class="fa-solid fa-circle-question text-slate-300 text-5xl sm:text-8xl"></i>
+									<span class="absolute -end-3 -bottom-2 bg-slate-400 rounded-full leading-1.25 p-1 sm:px-1.5 -mt-6 border sm:border-2 border-white text-xs sm:text-base"><i class="fa-solid fa-user fa-fw text-white"></i></span>
+								</div>
+								<div class="text-xs mt-2 line-clamp-2">
+									<i class="fa-solid fa-user fa-fw text-slate-400"></i>
+									Anonymous
+								</div>
 							</a>
 
-							<div class="absolute inset-28 sm:inset-x-40 mx-2 top-9 flex items-center">
-								<hr class="grow border-t-[3px] border-slate-400 -me-1" />
-								<i class="shrink-0 fa-solid fa-arrow-right text-slate-400 text-2xl"></i>
+							<div class="absolute inset-28 sm:inset-x-48 mx-4 sm:mx-8 top-1/2 flex items-center">
+								<hr class="grow border-t-[25px] border-slate-300" />
+								<div class="shrink-0 w-0 h-0 border border-slate-300 border-t-[30px] border-t-transparent border-b-[30px] border-b-transparent border-s-[40px] border-e-0"></div>
 							</div>
 
-							<a href="" class="w-28 sm:w-40 text-center bg-white drop-shadow-md rounded p-2">
-								<img src="https://placehold.co/600x400?text=(Project Image)" class="size-12 object-cover mx-auto rounded">
-								<div class="text-xs mt-1 line-clamp-2">iamai-core</div>
+							<a href="" class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3">
+								<div class="relative w-fit mx-auto">
+									<img src="https://placehold.co/600x400?text=(Project Image)" class="size-12 sm:size-24 object-cover rounded">
+									<span class="absolute -end-3 -bottom-2 bg-slate-400 rounded-full leading-1.25 p-1 sm:px-1.5 -mt-6 border sm:border-2 border-white text-xs sm:text-base"><i class="fa-solid fa-hammer fa-fw text-white"></i></span>
+								</div>
+								<div class="text-xs mt-2 line-clamp-2">
+									<i class="fa-solid fa-hammer fa-fw text-slate-400"></i>
+									iamai-core
+								</div>
 							</a>
 						</div>
 
 						<p class="font-medium">60 MIR token staked towards the project!</p>
 						<p class="text-sm">(from Someone Outside Your View to the project "iamai-core")</p>
 					</div>
-					<div class="flex items-center gap-2 text-lg bg-slate-300 rounded-b-md px-3 py-1">
-						<a href=""><i class="fa-solid fa-circle-info fa-fw text-blue-500"></i></a>
-						<span><i class="fa-solid fa-user-slash fa-fw text-slate-400"></i></span>
-						<a href=""><i class="fa-solid fa-hammer fa-fw text-blue-500"></i></a>
 
-						<span class="ms-auto text-xs text-slate-500 italic" title="8888-88-88 88:88:88">88 minutes ago</span>
+					<div class="bg-[url(https://a2-west.americancloud.com/images6618:giftsimage/45edd14b84bda755279d909cd900adf08e1994bc589023fec37b983f38d3086e.png)] bg-cover">
+						<div class="bg-slate-100/50 backdrop-blur-md px-6 py-4">
+						<img class="max-w-lg max-h-96 mx-auto rounded-lg drop-shadow-md" src="https://a2-west.americancloud.com/images6618:giftsimage/9bc475e93b602e89e2dc2e7288ab54596f34d6369c0e274da2335ccf3231eee2" />
+						</div>
+					</div>
+
+					<div class="flex items-center gap-2 text-lg bg-slate-300 rounded-b-md px-3 sm:px-4 py-1 sm:py-2">
+						<a href=""><i class="fa-solid fa-circle-info fa-fw text-slate-500"></i></a>
+
+						<button class="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 ms-auto rounded-md">Confirm</button>
 					</div>
 				</li>
 
 				<li>
-					<div class="bg-slate-100 rounded-t-md border border-slate-300 px-3 py-2">
-						<div class="relative flex justify-between gap-4 mb-3 pt-1">
-							<a href="" class="w-28 sm:w-40 text-center bg-white drop-shadow-md rounded p-2">
-								<img src="https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg" class="size-12 object-cover mx-auto rounded-full">
-								<div class="text-xs mt-1 line-clamp-2">Matthew Raymer</div>
+					<div class="bg-slate-100 rounded-t-md border border-slate-300 p-3 sm:p-4">
+						<div class="relative flex justify-between gap-4 mb-3">
+							<a href="" class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3">
+								<div class="relative w-fit mx-auto">
+									<img src="https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg" class="size-12 sm:size-24 object-cover rounded-full">
+									<span class="absolute -end-3 -bottom-2 bg-slate-400 rounded-full leading-1.25 p-1 sm:px-1.5 -mt-6 border sm:border-2 border-white text-xs sm:text-base"><i class="fa-solid fa-user fa-fw text-white"></i></span>
+								</div>
+								<div class="text-xs mt-2 line-clamp-2">Matthew Raymer</div>
 							</a>
 
-							<div class="absolute inset-28 sm:inset-x-40 mx-2 top-9 flex items-center">
-								<hr class="grow border-t-[3px] border-slate-400 -me-1" />
-								<i class="shrink-0 fa-solid fa-arrow-right text-slate-400 text-2xl"></i>
+							<div class="absolute inset-28 sm:inset-x-48 mx-4 sm:mx-8 top-1/2 flex items-center">
+								<hr class="grow border-t-[25px] border-slate-300" />
+								<div class="shrink-0 w-0 h-0 border border-slate-300 border-t-[30px] border-t-transparent border-b-[30px] border-b-transparent border-s-[40px] border-e-0"></div>
 							</div>
 
-							<a href="" class="w-28 sm:w-40 text-center bg-white drop-shadow-md rounded p-2">
-								<img src="https://placehold.co/600x400?text=(Project Image)" class="size-12 object-cover mx-auto rounded">
-								<div class="text-xs mt-1 line-clamp-2">Time Safari MVP</div>
+							<a href="" class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3">
+								<div class="relative w-fit mx-auto">
+									<img src="https://placehold.co/600x400?text=(Project Image)" class="size-12 sm:size-24 object-cover rounded">
+									<span class="absolute -end-3 -bottom-2 bg-slate-400 rounded-full leading-1.25 p-1 sm:px-1.5 -mt-6 border sm:border-2 border-white text-xs sm:text-base"><i class="fa-solid fa-hammer fa-fw text-white"></i></span>
+								</div>
+								<div class="text-xs mt-2 line-clamp-2">Time Safari MVP</div>
 							</a>
 						</div>
 
 						<p class="font-medium">feedback, plus solution brainstorming & researching (and 0.5 hours)</p>
 						<p class="text-sm">(from Matthew Raymer to the project "Time Safari MVP")</p>
 					</div>
-					<div class="flex items-center gap-2 text-lg bg-slate-300 rounded-b-md px-3 py-1">
-						<a href=""><i class="fa-solid fa-circle-info fa-fw text-blue-500"></i></a>
-						<a href=""><i class="fa-solid fa-user fa-fw text-blue-500"></i></a>
-						<a href=""><i class="fa-solid fa-hammer fa-fw text-blue-500"></i></a>
+
+					<div class="flex items-center gap-2 text-lg bg-slate-300 rounded-b-md px-3 sm:px-4 py-1 sm:py-2">
+						<a href=""><i class="fa-solid fa-circle-info fa-fw text-slate-500"></i></a>
 
 						<span class="ms-auto text-xs text-slate-500 italic" title="8888-88-88 88:88:88">8 days ago</span>
 					</div>
 				</li>
 
 				<li>
-					<div class="bg-slate-100 rounded-t-md border border-slate-300 px-3 py-2">
-						<div class="relative flex justify-between gap-4 mb-3 pt-1">
-							<a href="" class="w-28 sm:w-40 text-center bg-white drop-shadow-md rounded p-2">
-								<i class="fa-solid fa-circle-question text-slate-300 text-5xl"></i>
-								<div class="text-xs mt-1 line-clamp-2 italic">Anonymous</div>
+					<div class="bg-slate-100 rounded-t-md border border-slate-300 p-3 sm:p-4">
+						<div class="relative flex justify-between gap-4 mb-3">
+							<a href="" class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3">
+								<div class="relative w-fit mx-auto">
+									<i class="fa-solid fa-circle-question text-slate-300 text-5xl sm:text-8xl"></i>
+									<span class="absolute -end-3 -bottom-2 bg-slate-400 rounded-full leading-1.25 p-1 sm:px-1.5 -mt-6 border sm:border-2 border-white text-xs sm:text-base"><i class="fa-solid fa-user fa-fw text-white"></i></span>
+								</div>
+								<div class="text-xs mt-2 line-clamp-2">Anonymous</div>
 							</a>
 
-							<div class="absolute inset-28 sm:inset-x-40 mx-2 top-9 flex items-center">
-								<hr class="grow border-t-[3px] border-slate-400 -me-1" />
-								<i class="shrink-0 fa-solid fa-arrow-right text-slate-400 text-2xl"></i>
+							<div class="absolute inset-28 sm:inset-x-48 mx-4 sm:mx-8 top-1/2 flex items-center">
+								<hr class="grow border-t-[25px] border-slate-300" />
+								<div class="shrink-0 w-0 h-0 border border-slate-300 border-t-[30px] border-t-transparent border-b-[30px] border-b-transparent border-s-[40px] border-e-0"></div>
 							</div>
 
-							<a href="" class="w-28 sm:w-40 text-center bg-white drop-shadow-md rounded p-2">
-								<img src="https://placehold.co/600x400?text=(Project Image)" class="size-12 object-cover mx-auto rounded">
-								<div class="text-xs mt-1 line-clamp-2">iamai-core</div>
+							<a href="" class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3">
+								<div class="relative w-fit mx-auto">
+									<img src="https://placehold.co/600x400?text=(Project Image)" class="size-12 sm:size-24 object-cover rounded">
+									<span class="absolute -end-3 -bottom-2 bg-slate-400 rounded-full leading-1.25 p-1 sm:px-1.5 -mt-6 border sm:border-2 border-white text-xs sm:text-base"><i class="fa-solid fa-hammer fa-fw text-white"></i></span>
+								</div>
+								<div class="text-xs mt-2 line-clamp-2">iamai-core</div>
 							</a>
 						</div>
 
 						<p class="font-medium">Expenses for trip to the conference "Decentralized AI Day: Dawn of the Agents" in Denver, Colorado (and 300 USD)</p>
 						<p class="text-sm">(from Someone Unnamed/Unknown to the project "iamai-core")</p>
 					</div>
-					<div class="flex items-center gap-2 text-lg bg-slate-300 rounded-b-md px-3 py-1">
-						<a href=""><i class="fa-solid fa-circle-info fa-fw text-blue-500"></i></a>
-						<span><i class="fa-solid fa-user-slash fa-fw text-slate-400"></i></span>
-						<a href=""><i class="fa-solid fa-hammer fa-fw text-blue-500"></i></a>
+
+					<div class="flex items-center gap-2 text-lg bg-slate-300 rounded-b-md px-3 sm:px-4 py-1 sm:py-2">
+						<a href=""><i class="fa-solid fa-circle-info fa-fw text-slate-500"></i></a>
 
 						<span class="ms-auto text-xs text-slate-500 italic" title="8888-88-88 88:88:88">January 8</span>
 					</div>
@@ -193,7 +233,7 @@
 		</div>
 
 		<!-- List - Alt -->
-		<div class="overflow-hidden my-6">
+		<div class="hidden overflow-hidden my-6">
 			<div class="flex gap-2 items-center mb-3">
 				<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"><i class="fa-solid fa-filter fa-fw"></i></button>