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

Linted views

kb/add-usage-guide
Matthew Aaron Raymer 2 years ago
parent
acbf1b062b
commit
c1acee63bf
11 changed files with 534 additions and 204 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. 3
      src/views/AboutView.vue
  2. 134
      src/views/AccountViewView.vue
  3. 40
      src/views/ConfirmContactView.vue
  4. 100
      src/views/ContactScanView.vue
  5. 153
      src/views/DiscoverView.vue
  6. 32
      src/views/ImportAccountView.vue
  7. 39
      src/views/NewEditAccountView.vue
  8. 45
      src/views/NewEditCommitmentView.vue
  9. 62
      src/views/NewEditProjectView.vue
  10. 111
      src/views/ProjectViewView.vue
  11. 19
      src/views/StartView.vue

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>

100
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" />
<!-- 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>
<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" />
<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>

Write Preview
Loading…
Cancel
Save