From 303f22b60dc354a8cbf2fdd85c965acc42208617 Mon Sep 17 00:00:00 2001
From: Matthew Aaron Raymer <matthew.raymer@anomalistdesign.com>
Date: Sun, 27 Nov 2022 11:58:01 +0800
Subject: [PATCH] Raw templates for all current designs

---
 src/views/AccountViewView.vue       | 75 +++++++++++++++++++++++++
 src/views/ConfirmContactView.vue    | 33 +++++++++++
 src/views/ContactScanView.vue       | 50 +++++++++++++++++
 src/views/DiscoverView.vue          | 86 +++++++++++++++++++++++++++++
 src/views/NewEditCommitmentView.vue | 39 +++++++++++++
 src/views/NewEditProjectView.vue    | 38 +++++++++++++
 src/views/ProjectViewView.vue       | 75 +++++++++++++++++++++++++
 7 files changed, 396 insertions(+)
 create mode 100644 src/views/AccountViewView.vue
 create mode 100644 src/views/ConfirmContactView.vue
 create mode 100644 src/views/ContactScanView.vue
 create mode 100644 src/views/DiscoverView.vue
 create mode 100644 src/views/NewEditCommitmentView.vue
 create mode 100644 src/views/NewEditProjectView.vue
 create mode 100644 src/views/ProjectViewView.vue

diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
new file mode 100644
index 000000000..19b7dbbce
--- /dev/null
+++ b/src/views/AccountViewView.vue
@@ -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>
diff --git a/src/views/ConfirmContactView.vue b/src/views/ConfirmContactView.vue
new file mode 100644
index 000000000..1665779ce
--- /dev/null
+++ b/src/views/ConfirmContactView.vue
@@ -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>
diff --git a/src/views/ContactScanView.vue b/src/views/ContactScanView.vue
new file mode 100644
index 000000000..65be04ac6
--- /dev/null
+++ b/src/views/ContactScanView.vue
@@ -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>
diff --git a/src/views/DiscoverView.vue b/src/views/DiscoverView.vue
new file mode 100644
index 000000000..3c29c7089
--- /dev/null
+++ b/src/views/DiscoverView.vue
@@ -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>
diff --git a/src/views/NewEditCommitmentView.vue b/src/views/NewEditCommitmentView.vue
new file mode 100644
index 000000000..ef627ac8b
--- /dev/null
+++ b/src/views/NewEditCommitmentView.vue
@@ -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>
diff --git a/src/views/NewEditProjectView.vue b/src/views/NewEditProjectView.vue
new file mode 100644
index 000000000..f286e9834
--- /dev/null
+++ b/src/views/NewEditProjectView.vue
@@ -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>
diff --git a/src/views/ProjectViewView.vue b/src/views/ProjectViewView.vue
new file mode 100644
index 000000000..e788da303
--- /dev/null
+++ b/src/views/ProjectViewView.vue
@@ -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>