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 3 months 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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 186
      home.html

186
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>
<!-- 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>

Write Preview
Loading…
Cancel
Save