trent_larson
/
kickstarter-for-time
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

More homeview design adjustments

master
Jose Olarte III 1 week ago
parent
b7f04dbefb
commit
dabf2cb83c
1 changed files with 89 additions and 49 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 138
      home.html

138
home.html
View File

@ -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>

Write Preview
Loading…
Cancel
Save