Matthew Aaron Raymer
2 years ago
7 changed files with 396 additions and 0 deletions
@ -0,0 +1,75 @@ |
|||||
|
<template> |
||||
|
<!-- QUICK NAV --> |
||||
|
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200"> |
||||
|
<ul class="flex text-2xl p-2 gap-2"> |
||||
|
<!-- Home Feed --> |
||||
|
<li class="basis-1/5 rounded-md text-slate-500"><a href="" class="block text-center py-3 px-1"><i class="fa-solid fa-house-chimney fa-fw"></i></a></li> |
||||
|
<!-- Search --> |
||||
|
<li class="basis-1/5 rounded-md text-slate-500"><a href="search.html" class="block text-center py-3 px-1"><i class="fa-solid fa-magnifying-glass fa-fw"></i></a></li> |
||||
|
<!-- Projects --> |
||||
|
<li class="basis-1/5 rounded-md text-slate-500"><a href="" class="block text-center py-3 px-1"><i class="fa-solid fa-folder-open fa-fw"></i></a></li> |
||||
|
<!-- Commitments --> |
||||
|
<li class="basis-1/5 rounded-md text-slate-500"><a href="" class="block text-center py-3 px-1"><i class="fa-solid fa-hand fa-fw rotate-45"></i></a></li> |
||||
|
<!-- Profile --> |
||||
|
<li class="basis-1/5 rounded-md bg-slate-400 text-white"><a href="account-view.html" class="block text-center py-3 px-1"><i class="fa-solid fa-circle-user fa-fw"></i></a></li> |
||||
|
</ul> |
||||
|
</nav> |
||||
|
|
||||
|
<!-- CONTENT --> |
||||
|
<section id="Content" class="p-6 pb-24"> |
||||
|
<!-- Heading --> |
||||
|
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">Your Identity</h1> |
||||
|
|
||||
|
<!-- Friend referral requirement notice --> |
||||
|
<div class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mb-4"> |
||||
|
<p class="mb-4"><b>Important:</b> before you can create a new project or commit time to one, you need a friend to register you.</p> |
||||
|
<button id="btnShowQR" class="inline-block text-md uppercase bg-amber-600 text-white px-4 py-2 rounded-md">Share Your ID</button> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Identity Details --> |
||||
|
<div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4"> |
||||
|
<h2 class="text-xl font-semibold mb-2">Firstname Lastname</h2> |
||||
|
|
||||
|
<div class="text-slate-500 text-sm font-bold">ID</div> |
||||
|
<div class="text-sm text-slate-500 flex justify-between items-center mb-1"> |
||||
|
<span><code>did:peer:kl45kj41lk451kl3</code> <i class="fa-solid fa-copy text-slate-400 fa-fw"></i></span> |
||||
|
<span> |
||||
|
<button class="text-xs uppercase bg-slate-500 text-white px-1.5 py-1 rounded-md"><i class="fa-solid fa-share-nodes fa-fw"></i></button> |
||||
|
<button class="text-xs uppercase bg-slate-500 text-white px-1.5 py-1 rounded-md"><i class="fa-solid fa-qrcode fa-fw"></i></button> |
||||
|
</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="text-slate-500 text-sm font-bold">Public Key</div> |
||||
|
<div class="text-sm text-slate-500 mb-1"> |
||||
|
<span><code>dyIgKepL19trfrFu5jzkoNhI</code> <i class="fa-solid fa-copy text-slate-400 fa-fw"></i></span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="text-slate-500 text-sm font-bold">Derivation Path</div> |
||||
|
<div class="text-sm text-slate-500 mb-1"> |
||||
|
<span><code>m/44'/0'/0'/0/0</code> <i class="fa-solid fa-copy text-slate-400 fa-fw"></i></span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<a href="account-edit.html" class="block text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-8">Edit Identity</a> |
||||
|
|
||||
|
<h3 class="text-sm uppercase font-semibold mb-3">Contact Actions</h3> |
||||
|
|
||||
|
<a href="contact-scan.html" class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6">Scan New Contact</a> |
||||
|
|
||||
|
<h3 class="text-sm uppercase font-semibold mb-3">Identity Actions</h3> |
||||
|
|
||||
|
<a href="" class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2">Backup Seed</a> |
||||
|
<a href="" class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6">Backup Other Data</a> |
||||
|
|
||||
|
<!-- QR code popup --> |
||||
|
<dialog id="dlgQR" class="backdrop:bg-black/75 rounded-md"> |
||||
|
<form method="dialog"> |
||||
|
<div class="text-slate-500 text-center"><b>ID:</b> <code>did:peer:kl45kj41lk451kl3</code></div> |
||||
|
<img src="img/sample-qr-code.png" class="w-full mb-3" /> |
||||
|
|
||||
|
<button value="cancel" class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2">Copy to Clipboard</button> |
||||
|
<button value="cancel" class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md">Close</button> |
||||
|
</form> |
||||
|
</dialog> |
||||
|
</section> |
||||
|
</template> |
@ -0,0 +1,33 @@ |
|||||
|
<template> |
||||
|
<!-- CONTENT --> |
||||
|
<section id="Content" class="p-6 pb-24"> |
||||
|
<!-- Breadcrumb --> |
||||
|
<div id="ViewBreadcrumb" class="mb-8"> |
||||
|
<h1 class="text-lg text-center font-light relative px-7"> |
||||
|
<!-- Cancel --> |
||||
|
<a href="account-view.html" class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"><i class="fa-solid fa-chevron-left fa-fw"></i></a> |
||||
|
|
||||
|
Confirm Contact |
||||
|
</h1> |
||||
|
</div> |
||||
|
|
||||
|
<form> |
||||
|
<p class="text-center text-xl mb-4 font-light">Would you like to add <i>Firstname</i> to your network?</p> |
||||
|
|
||||
|
<!-- Account Details --> |
||||
|
<div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4"> |
||||
|
<h2 class="text-xl font-semibold mb-2">Firstname Lastname</h2> |
||||
|
|
||||
|
<div class="text-slate-500 text-sm font-bold">ID</div> |
||||
|
<div class="text-sm text-slate-500 mb-1"> |
||||
|
<span><code>did:peer:kl45kj41lk451kl3</code></span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="mt-8"> |
||||
|
<input type="submit" class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2" value="Add Contact" /> |
||||
|
<button type="button" class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md">Cancel</button> |
||||
|
</div> |
||||
|
</form> |
||||
|
</section> |
||||
|
</template> |
@ -0,0 +1,50 @@ |
|||||
|
<template> |
||||
|
<section id="Content" class="p-6 pb-24"> |
||||
|
<!-- Breadcrumb --> |
||||
|
<div id="ViewBreadcrumb" class="mb-8"> |
||||
|
<h1 class="text-lg text-center font-light relative px-7"> |
||||
|
<!-- Cancel --> |
||||
|
<a href="account-view.html" class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"><i class="fa-solid fa-chevron-left fa-fw"></i></a> |
||||
|
|
||||
|
Scan Contact |
||||
|
</h1> |
||||
|
</div> |
||||
|
|
||||
|
<form> |
||||
|
<h3 class="text-sm uppercase font-semibold mb-2">Scan a QR Code…</h3> |
||||
|
<div class="bg-black rounded overflow-hidden relative mb-4"> |
||||
|
<img src="https://picsum.photos/400/400?random=1" class="w-full" /> |
||||
|
|
||||
|
<!-- Darken overlay --> |
||||
|
<!-- Top --> |
||||
|
<div class="absolute top-0 left-0 right-0 bg-black/50 h-1/4"></div> |
||||
|
<!-- Reft --> |
||||
|
<div class="absolute top-1/4 bottom-1/4 left-0 bg-black/50 w-1/4"></div> |
||||
|
<!-- Right --> |
||||
|
<div class="absolute top-1/4 bottom-1/4 right-0 bg-black/50 w-1/4"></div> |
||||
|
<!-- Bottom --> |
||||
|
<div class="absolute bottom-0 left-0 right-0 bg-black/50 h-1/4"></div> |
||||
|
|
||||
|
<!-- Reticle overlay --> |
||||
|
<!-- Top-left --> |
||||
|
<div class="absolute top-1/4 left-1/4 h-6 w-6 border-white border-t-4 border-l-4 drop-shadow"></div> |
||||
|
<!-- Top-right --> |
||||
|
<div class="absolute top-1/4 right-1/4 h-6 w-6 border-white border-t-4 border-r-4 drop-shadow"></div> |
||||
|
<!-- Bottom-left --> |
||||
|
<div class="absolute bottom-1/4 left-1/4 h-6 w-6 border-white border-b-4 border-l-4 drop-shadow"></div> |
||||
|
<!-- Bottom-right --> |
||||
|
<div class="absolute bottom-1/4 right-1/4 h-6 w-6 border-white border-b-4 border-r-4 drop-shadow"></div> |
||||
|
</div> |
||||
|
|
||||
|
<h3 class="text-sm uppercase font-semibold mb-2">…or Enter Contact Data</h3> |
||||
|
<input type="text" placeholder="Name (optional)" class="block w-full rounded border-slate-400 mb-2" /> |
||||
|
<input type="text" placeholder="ID" class="block w-full rounded border-slate-400 mb-2" /> |
||||
|
<input type="text" placeholder="Public Key (optional)" class="block w-full rounded border-slate-400 mb-4" /> |
||||
|
|
||||
|
<div class="mt-8"> |
||||
|
<input type="submit" class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2" value="Look Up Contact" /> |
||||
|
<button type="button" class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md">Cancel</button> |
||||
|
</div> |
||||
|
</form> |
||||
|
</section> |
||||
|
</template> |
@ -0,0 +1,86 @@ |
|||||
|
<template> |
||||
|
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200"> |
||||
|
<ul class="flex text-2xl p-2 gap-2"> |
||||
|
<!-- Home Feed --> |
||||
|
<li class="basis-1/5 rounded-md text-slate-500"><a href="" class="block text-center py-3 px-1"><i class="fa-solid fa-house-chimney fa-fw"></i></a></li> |
||||
|
<!-- Search --> |
||||
|
<li class="basis-1/5 rounded-md bg-slate-400 text-white"><a href="search.html" class="block text-center py-3 px-1"><i class="fa-solid fa-magnifying-glass fa-fw"></i></a></li> |
||||
|
<!-- Projects --> |
||||
|
<li class="basis-1/5 rounded-md text-slate-500"><a href="" class="block text-center py-3 px-1"><i class="fa-solid fa-folder-open fa-fw"></i></a></li> |
||||
|
<!-- Commitments --> |
||||
|
<li class="basis-1/5 rounded-md text-slate-500"><a href="" class="block text-center py-3 px-1"><i class="fa-solid fa-hand fa-fw rotate-45"></i></a></li> |
||||
|
<!-- Profile --> |
||||
|
<li class="basis-1/5 rounded-md text-slate-500"><a href="account-view.html" class="block text-center py-3 px-1"><i class="fa-solid fa-circle-user fa-fw"></i></a></li> |
||||
|
</ul> |
||||
|
</nav> |
||||
|
|
||||
|
<!-- CONTENT --> |
||||
|
<section id="Content" class="p-6 pb-24"> |
||||
|
<!-- Heading --> |
||||
|
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">Discover</h1> |
||||
|
|
||||
|
<!-- Quick Search --> |
||||
|
<form id="QuickSearch" class="mb-4 flex"> |
||||
|
<input type="text" placeholder="Search…" class="block w-full rounded-l border-r-0 border-slate-400" /> |
||||
|
<button class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400"><i class="fa-solid fa-magnifying-glass fa-fw"></i></button> |
||||
|
</form> |
||||
|
|
||||
|
<!-- Result Tabs --> |
||||
|
<div class="text-center text-slate-500 border-b border-slate-300"> |
||||
|
<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"> |
||||
|
Nearby <span class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md">20+</span> |
||||
|
</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"> |
||||
|
Remote <span class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md">13</span> |
||||
|
</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Results List --> |
||||
|
<ul class=""> |
||||
|
<li class="border-b border-slate-300"> |
||||
|
<a href="project-view.html" class="block py-4 flex gap-4"> |
||||
|
<div class="w-12"> |
||||
|
<img src="https://picsum.photos/200/200?random=1" class="w-full rounded" /> |
||||
|
</div> |
||||
|
|
||||
|
<div class="grow"> |
||||
|
<h2 class="text-base font-semibold">Canyon cleanup</h2> |
||||
|
<div class="text-sm"><i class="fa-solid fa-user fa-fw text-slate-400"></i> Rotary</div> |
||||
|
</div> |
||||
|
</a> |
||||
|
</li> |
||||
|
|
||||
|
<li class="border-b border-slate-300"> |
||||
|
<a href="project-view.html" class="block py-4 flex gap-4"> |
||||
|
<div class="w-12"> |
||||
|
<img src="https://picsum.photos/200/200?random=2" class="w-full rounded" /> |
||||
|
</div> |
||||
|
|
||||
|
<div class="grow"> |
||||
|
<h2 class="text-base font-semibold">Potluck with neighbors</h2> |
||||
|
<div class="text-sm"><i class="fa-solid fa-user fa-fw text-slate-400"></i> Andrew A.</div> |
||||
|
</div> |
||||
|
</a> |
||||
|
</li> |
||||
|
|
||||
|
<li class="border-b border-slate-300"> |
||||
|
<a href="project-view.html" class="block py-4 flex gap-4"> |
||||
|
<div class="w-12"> |
||||
|
<img src="https://picsum.photos/200/200?random=3" class="w-full rounded" /> |
||||
|
</div> |
||||
|
|
||||
|
<div class="grow"> |
||||
|
<h2 class="text-base font-semibold">Historical site</h2> |
||||
|
<div class="text-sm"><i class="fa-solid fa-user fa-fw text-slate-400"></i> <em>Unknown</em></div> |
||||
|
</div> |
||||
|
</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</section> |
||||
|
</template> |
@ -0,0 +1,39 @@ |
|||||
|
<template> |
||||
|
<!-- CONTENT --> |
||||
|
<section id="Content" class="p-6 pb-24"> |
||||
|
<!-- Breadcrumb --> |
||||
|
<div id="ViewBreadcrumb" class="mb-8"> |
||||
|
<h1 class="text-lg text-center font-light relative px-7"> |
||||
|
<!-- Cancel --> |
||||
|
<a href="project-view.html" class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"><i class="fa-solid fa-chevron-left fa-fw"></i></a> |
||||
|
|
||||
|
Make Commitment |
||||
|
</h1> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Project Details --> |
||||
|
<form> |
||||
|
<select class="block w-full rounded border-slate-400 mb-4"> |
||||
|
<option disabled>Choose a commitment type…</option> |
||||
|
<option selected>Time</option> |
||||
|
<option>Cryptocurrency</option> |
||||
|
<option>Money</option> |
||||
|
</select> |
||||
|
|
||||
|
<!-- Time amount --> |
||||
|
<div class="mb-4 flex items-stretch"> |
||||
|
<input type="number" placeholder="0.0" class="block w-full rounded-l border-slate-400" /> |
||||
|
<span class="px-4 py-2 rounded-r bg-slate-200 border border-l-0 border-slate-400">hours</span> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Crypto amount --> |
||||
|
|
||||
|
<!-- Money amount --> |
||||
|
|
||||
|
<div class="mt-8"> |
||||
|
<input type="submit" class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2" value="Commit" /> |
||||
|
<button type="button" class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md">Maybe Later</button> |
||||
|
</div> |
||||
|
</form> |
||||
|
</section> |
||||
|
</template> |
@ -0,0 +1,38 @@ |
|||||
|
<template> |
||||
|
<!-- CONTENT --> |
||||
|
<section id="Content" class="p-6 pb-24"> |
||||
|
<!-- Breadcrumb --> |
||||
|
<div id="ViewBreadcrumb" class="mb-8"> |
||||
|
<h1 class="text-lg text-center font-light relative px-7"> |
||||
|
<!-- Cancel --> |
||||
|
<a href="project-view.html" class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"><i class="fa-solid fa-chevron-left fa-fw"></i></a> |
||||
|
|
||||
|
[New/Edit] Project |
||||
|
</h1> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Project Details --> |
||||
|
<form> |
||||
|
<!-- Image - (see design model) Empty --> |
||||
|
|
||||
|
<!-- Image - Populated --> |
||||
|
<div class="relative mb-4 rounded-md overflow-hidden"> |
||||
|
<div class="absolute top-3 right-3 flex gap-2"> |
||||
|
<button class="text-md font-bold uppercase bg-blue-600 text-white px-3 py-2 rounded"><i class="fa-solid fa-pen fa-fw"></i></button> |
||||
|
<button class="text-md font-bold uppercase bg-red-600 text-white px-3 py-2 rounded"><i class="fa-solid fa-trash-can fa-fw"></i></button> |
||||
|
</div> |
||||
|
<img src="https://picsum.photos/800/400" class="w-full" /> |
||||
|
</div> |
||||
|
|
||||
|
<input type="text" placeholder="Project Name" class="block w-full rounded border-slate-400 mb-4" /> |
||||
|
|
||||
|
<textarea placeholder="Description" class="block w-full rounded border-slate-400 mb-4" rows="5"></textarea> |
||||
|
<div class="text-xs text-slate-500 italic -mt-3 mb-4">88/500 max. characters</div> |
||||
|
|
||||
|
<div class="mt-8"> |
||||
|
<input type="submit" class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2" value="Save Project" /> |
||||
|
<button type="button" class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md">Cancel</button> |
||||
|
</div> |
||||
|
</form> |
||||
|
</section> |
||||
|
</template> |
@ -0,0 +1,75 @@ |
|||||
|
<template> |
||||
|
<!-- QUICK NAV --> |
||||
|
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200"> |
||||
|
<ul class="flex text-2xl p-2 gap-2"> |
||||
|
<!-- Home Feed --> |
||||
|
<li class="basis-1/5 rounded-md text-slate-500"><a href="" class="block text-center py-3 px-1"><i class="fa-solid fa-house-chimney fa-fw"></i></a></li> |
||||
|
<!-- Search --> |
||||
|
<li class="basis-1/5 rounded-md text-slate-500"><a href="search.html" class="block text-center py-3 px-1"><i class="fa-solid fa-magnifying-glass fa-fw"></i></a></li> |
||||
|
<!-- Projects --> |
||||
|
<li class="basis-1/5 rounded-md bg-slate-400 text-white"><a href="" class="block text-center py-3 px-1"><i class="fa-solid fa-folder-open fa-fw"></i></a></li> |
||||
|
<!-- Commitments --> |
||||
|
<li class="basis-1/5 rounded-md text-slate-500"><a href="" class="block text-center py-3 px-1"><i class="fa-solid fa-hand fa-fw rotate-45"></i></a></li> |
||||
|
<!-- Profile --> |
||||
|
<li class="basis-1/5 rounded-md text-slate-500"><a href="account-view.html" class="block text-center py-3 px-1"><i class="fa-solid fa-circle-user fa-fw"></i></a></li> |
||||
|
</ul> |
||||
|
</nav> |
||||
|
|
||||
|
<!-- CONTENT --> |
||||
|
<section id="Content" class="p-6 pb-24"> |
||||
|
<!-- Breadcrumb --> |
||||
|
<div id="ViewBreadcrumb" class="mb-8"> |
||||
|
<h1 class="text-lg text-center font-light relative px-7"> |
||||
|
<!-- Back --> |
||||
|
<a href="" class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"><i class="fa-solid fa-chevron-left fa-fw"></i></a> |
||||
|
<!-- Context Menu --> |
||||
|
<a href="" class="text-lg text-center px-2 py-1 absolute -right-2 -top-1"><i class="fa-solid fa-ellipsis-vertical fa-fw"></i></a> |
||||
|
|
||||
|
View Project |
||||
|
</h1> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Project Details --> |
||||
|
<div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4"> |
||||
|
<!-- Image --> |
||||
|
<div class="-mx-4 -mt-3 mb-3"> |
||||
|
<img src="https://picsum.photos/800/400" class="w-full" /> |
||||
|
</div> |
||||
|
|
||||
|
<div> |
||||
|
<h2 class="text-xl font-semibold">Canyon cleanup</h2> |
||||
|
<div class="flex justify-between gap-4 text-sm mb-3"> |
||||
|
<span><i class="fa-solid fa-user fa-fw text-slate-400"></i> Rotary</span> |
||||
|
<span><i class="fa-solid fa-calendar fa-fw text-slate-400"></i> 8 days ago</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="text-sm text-slate-500">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium… <a href="" class="uppercase text-xs font-semibold text-slate-700">Read More</a></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Commit --> |
||||
|
<a href="commitment-edit.html" class="block text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-8">Make Commitment</a> |
||||
|
|
||||
|
<!-- Commitments --> |
||||
|
<div class="bg-slate-100 px-4 py-3 rounded-md"> |
||||
|
<h3 class="text-sm uppercase font-semibold mb-3">Commitments</h3> |
||||
|
|
||||
|
<ul class="text-sm border-t border-slate-300"> |
||||
|
<li class="flex justify-between gap-4 py-1.5 border-b border-slate-300"> |
||||
|
<span>[Username]</span> |
||||
|
<span>5 hours <i class="fa-solid fa-spinner fa-fw text-slate-400"></i></span> |
||||
|
</li> |
||||
|
|
||||
|
<li class="flex justify-between gap-4 py-1.5 border-b border-slate-300"> |
||||
|
<span>[Username]</span> |
||||
|
<span>US$ 20.00 <i class="fa-solid fa-circle-check fa-fw text-lime-500"></i></span> |
||||
|
</li> |
||||
|
|
||||
|
<li class="flex justify-between gap-4 py-1.5 border-b border-slate-300"> |
||||
|
<span>[Username]</span> |
||||
|
<span>0.1 BTC <i class="fa-solid fa-spinner fa-fw text-slate-400"></i></span> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</section> |
||||
|
</template> |
Loading…
Reference in new issue