trentlarson/crowd-funder-from-jason
1
0
Fork 0
forked from jsnbuchanan/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

Linted views

Browse Source
This commit is contained in:
Matthew Aaron Raymer
2022-11-27 12:11:07 +08:00
parent acbf1b062b
commit c1acee63bf
11 changed files with 532 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/views/AboutView.vue
View File

@@ -8,8 +8,7 @@
import { Options, Vue } from "vue-class-component";
@Options({
components: {
},
components: {},
})
export default class AboutView extends Vue {}
</script>

134
src/views/AccountViewView.vue
View File

@@ -3,27 +3,59 @@
<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>
<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>
<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>
<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>
<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>
<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>
<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
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 -->
@@ -31,44 +63,91 @@
<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
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>
<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>
<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>
<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>
<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>
<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" />
<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>
<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>
@@ -78,8 +157,7 @@
import { Options, Vue } from "vue-class-component";
@Options({
components: {
},
components: {},
})
export default class AccountViewView extends Vue {}
</script>

40
src/views/ConfirmContactView.vue
View File

@@ -4,29 +4,44 @@
<!-- 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>
<!-- 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
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>
<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>
<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 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>
<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>
@@ -36,8 +51,7 @@
import { Options, Vue } from "vue-class-component";
@Options({
components: {
},
components: {},
})
export default class ConfirmContactView extends Vue {}
</script>

96
src/views/ContactScanView.vue
View File

@@ -3,47 +3,84 @@
<!-- 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>
<!-- 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
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" />
<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>
<!-- 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>
<!-- 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" />
<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>
<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>
@@ -53,8 +90,7 @@
import { Options, Vue } from "vue-class-component";
@Options({
components: {
},
components: {},
})
export default class ContactScanView extends Vue {}
</script>

153
src/views/DiscoverView.vue
View File

@@ -2,84 +2,144 @@
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
@@ -89,8 +149,7 @@
import { Options, Vue } from "vue-class-component";
@Options({
components: {
},
components: {},
})
export default class DiscoverView extends Vue {}
</script>

32
src/views/ImportAccountView.vue
View File

@@ -4,17 +4,36 @@
<div id="ViewBreadcrumb" class="mb-8">
<h1 class="text-lg text-center font-light relative px-7">
<!-- Cancel -->
<a href="start.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>
<a
href="start.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>
Import Existing Identity
</h1>
</div>
<!-- Import Account Form -->
<form>
<p class="text-center text-xl mb-4 font-light">Enter your seed phrase below to import your identity on this device.</p>
<input type="text" placeholder="Seed Phrase" class="block w-full rounded border-slate-400 mb-4" />
<p class="text-center text-xl mb-4 font-light">
Enter your seed phrase below to import your identity on this device.
</p>
<input
type="text"
placeholder="Seed Phrase"
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="Import Identity" />
<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>
<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="Import Identity"
/>
<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>
@@ -24,8 +43,7 @@
import { Options, Vue } from "vue-class-component";
@Options({
components: {
},
components: {},
})
export default class ImportAccountView extends Vue {}
</script>

39
src/views/NewEditAccountView.vue
View File

@@ -3,19 +3,41 @@
<!-- 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>
[New/Edit] Identity
<!-- 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>
[New/Edit] Identity
</h1>
</div>
<form>
<input type="text" placeholder="First Name" class="block w-full rounded border-slate-400 mb-4" />
<input type="text" placeholder="Last Name" class="block w-full rounded border-slate-400 mb-4" />
<input
type="text"
placeholder="First Name"
class="block w-full rounded border-slate-400 mb-4"
/>
<input
type="text"
placeholder="Last Name"
class="block w-full rounded border-slate-400 mb-4"
/>
<div class="mt-8">
<button type="button" class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2">Save Changes</button>
<button
type="button"
class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
>
Save Changes
</button>
<!-- SHOW ME instead while processing saving changes -->
<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>
<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>
@@ -25,8 +47,7 @@
import { Options, Vue } from "vue-class-component";
@Options({
components: {
},
components: {},
})
export default class NewEditAccountView extends Vue {}
</script>

45
src/views/NewEditCommitmentView.vue
View File

@@ -4,26 +4,37 @@
<!-- 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>
<!-- 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
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>
<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>
<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 -->
@@ -31,8 +42,17 @@
<!-- 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>
<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>
@@ -42,8 +62,7 @@
import { Options, Vue } from "vue-class-component";
@Options({
components: {
},
components: {},
})
export default class NewEditCommitmentView extends Vue {}
</script>

62
src/views/NewEditProjectView.vue
View File

@@ -4,34 +4,65 @@
<!-- 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>
<!-- 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
[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 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" />
<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>
<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>
<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>
@@ -41,8 +72,7 @@
import { Options, Vue } from "vue-class-component";
@Options({
components: {
},
components: {},
})
export default class NewEditProjectView extends Vue {}
</script>

111
src/views/ProjectViewView.vue
View File

@@ -3,15 +3,35 @@
<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>
<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>
<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>
<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>
<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>
<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>
@@ -20,12 +40,18 @@
<!-- 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>
<!-- 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
View Project
</h1>
</div>
@@ -33,42 +59,64 @@
<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" />
<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>
<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 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>
<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
>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
>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>
<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>
@@ -78,8 +126,7 @@
import { Options, Vue } from "vue-class-component";
@Options({
components: {
},
components: {},
})
export default class ProjectViewView extends Vue {}
</script>

19
src/views/StartView.vue
View File

@@ -1,5 +1,8 @@
<template>
<section id="Content" class="p-6 pb-24 min-h-screen flex flex-col justify-center">
<section
id="Content"
class="p-6 pb-24 min-h-screen flex flex-col justify-center"
>
<!-- Heading -->
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
Start Here
@@ -9,8 +12,15 @@
<p class="text-center text-xl mb-4 font-light">
Do you already have an identity to import?
</p>
<a href="account-edit.html" class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2">No</a>
<a href="account-import.html" class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md">Yes</a
<a
href="account-edit.html"
class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
>No</a
>
<a
href="account-import.html"
class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
>Yes</a
>
</div>
</section>
@@ -20,8 +30,7 @@
import { Options, Vue } from "vue-class-component";
@Options({
components: {
},
components: {},
})
export default class StartView extends Vue {}
</script>