kentbull
/
crowd-funder-for-time-pwa
forked from trent_larson/crowd-funder-for-time-pwa
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Raw templates for all current designs

kb/add-usage-guide
Matthew Aaron Raymer 2 years ago
parent
ff826a81f3
commit
303f22b60d
7 changed files with 396 additions and 0 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. 75
      src/views/AccountViewView.vue
  2. 33
      src/views/ConfirmContactView.vue
  3. 50
      src/views/ContactScanView.vue
  4. 86
      src/views/DiscoverView.vue
  5. 39
      src/views/NewEditCommitmentView.vue
  6. 38
      src/views/NewEditProjectView.vue
  7. 75
      src/views/ProjectViewView.vue

75
src/views/AccountViewView.vue
View File

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

33
src/views/ConfirmContactView.vue
View File

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

50
src/views/ContactScanView.vue
View File

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

86
src/views/DiscoverView.vue
View File

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

39
src/views/NewEditCommitmentView.vue
View File

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

38
src/views/NewEditProjectView.vue
View File

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

75
src/views/ProjectViewView.vue
View File

@ -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>
Write Preview
Loading…
Cancel
Save