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

Homepage stats and tab organization

master
Jose Olarte III 2 weeks ago
parent
9b0fa39f5f
commit
f7253e8497
1 changed files with 120 additions and 66 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 174
      home.html

174
home.html
View File

@ -37,57 +37,143 @@
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">Time Safari</h1> <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">Time Safari</h1>
<!-- Tabs --> <!-- 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"> <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> <li>
<a href="#" class="inline-block py-3 rounded-t-lg border-b-2 border-transparent hover:text-slate-600 hover:border-slate-300"> <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> </a>
</li> </li>
<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"> <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> </a>
</li> </li>
<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"> <a href="#" class="inline-block py-3 rounded-t-lg border-b-2 active text-blue-600 border-blue-600 font-semibold">
Projects Record
</a> </a>
</li> </li>
</ul> </ul>
</div --> </div>
<!-- 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 --> <!-- Dashboard Widgets -->
<div class="mb-8"> <div class="mb-6">
<div class="grid grid-cols-3 gap-2"> <div class="grid grid-flow-col auto-cols-fr gap-2">
<a href="" class="bg-slate-100 rounded-md overflow-hidden px-2 md:px-4 py-3"> <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">888</div> <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 font-bold uppercase">New Gives</h4> <h4 class="text-xs md:text-sm font-semibold uppercase">New Offers</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>
<a href="" class="bg-slate-100 rounded-md overflow-hidden px-2 md:px-4 py-3"> <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">8,888</div> <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 font-bold uppercase">New Offers</h4> <h4 class="text-xs md:text-sm font-semibold uppercase">New Gives</h4>
</a> </a>
<a class="bg-slate-100 rounded-md overflow-hidden px-2 md:px-4 py-3"> <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">88</div> <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 font-bold uppercase">New Projects</h4> <h4 class="text-xs md:text-sm font-semibold uppercase">New Projects</h4>
<p class="text-xs text-slate-500 leading-tight mt-0.5">for you</p>
</a> </a>
</div> </div>
</div> </div>
<!-- Record Something --> <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>
<!-- 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="mb-8">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<h2 class="text-xl font-bold">Record Something Given By:</h2> <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 --> <!-- 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>
<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> </section>
</body> </body>

Write Preview
Loading…
Cancel
Save