Browse Source

Linted views

kb/add-usage-guide
Matthew Aaron Raymer 2 years ago
parent
commit
c1acee63bf
  1. 3
      src/views/AboutView.vue
  2. 132
      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. 60
      src/views/NewEditProjectView.vue
  10. 111
      src/views/ProjectViewView.vue
  11. 19
      src/views/StartView.vue

3
src/views/AboutView.vue

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

132
src/views/AccountViewView.vue

@ -3,27 +3,59 @@
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200"> <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
<ul class="flex text-2xl p-2 gap-2"> <ul class="flex text-2xl p-2 gap-2">
<!-- Home Feed --> <!-- 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 --> <!-- 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 --> <!-- 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 --> <!-- 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 --> <!-- 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> </ul>
</nav> </nav>
<!-- CONTENT --> <!-- CONTENT -->
<section id="Content" class="p-6 pb-24"> <section id="Content" class="p-6 pb-24">
<!-- Heading --> <!-- 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 --> <!-- 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"> <div
<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> 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"
<button id="btnShowQR" class="inline-block text-md uppercase bg-amber-600 text-white px-4 py-2 rounded-md">Share Your ID</button> >
<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> </div>
<!-- Identity Details --> <!-- Identity Details -->
@ -31,44 +63,91 @@
<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-slate-500 text-sm font-bold">ID</div>
<div class="text-sm text-slate-500 flex justify-between items-center mb-1"> <div
<span><code>did:peer:kl45kj41lk451kl3</code> <i class="fa-solid fa-copy text-slate-400 fa-fw"></i></span> class="text-sm text-slate-500 flex justify-between items-center mb-1"
<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> <span
<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> ><code>did:peer:kl45kj41lk451kl3</code>
</span> <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>
<div class="text-slate-500 text-sm font-bold">Public Key</div> <div class="text-slate-500 text-sm font-bold">Public Key</div>
<div class="text-sm text-slate-500 mb-1"> <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>
<div class="text-slate-500 text-sm font-bold">Derivation Path</div> <div class="text-slate-500 text-sm font-bold">Derivation Path</div>
<div class="text-sm text-slate-500 mb-1"> <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>
</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> <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> <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
<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> 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 --> <!-- QR code popup -->
<dialog id="dlgQR" class="backdrop:bg-black/75 rounded-md"> <dialog id="dlgQR" class="backdrop:bg-black/75 rounded-md">
<form method="dialog"> <form method="dialog">
<div class="text-slate-500 text-center"><b>ID:</b> <code>did:peer:kl45kj41lk451kl3</code></div> <div class="text-slate-500 text-center">
<img src="img/sample-qr-code.png" class="w-full mb-3" /> <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
<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> 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> </form>
</dialog> </dialog>
</section> </section>
@ -78,8 +157,7 @@
import { Options, Vue } from "vue-class-component"; import { Options, Vue } from "vue-class-component";
@Options({ @Options({
components: { components: {},
},
}) })
export default class AccountViewView extends Vue {} export default class AccountViewView extends Vue {}
</script> </script>

40
src/views/ConfirmContactView.vue

@ -4,29 +4,44 @@
<!-- Breadcrumb --> <!-- Breadcrumb -->
<div id="ViewBreadcrumb" class="mb-8"> <div id="ViewBreadcrumb" class="mb-8">
<h1 class="text-lg text-center font-light relative px-7"> <h1 class="text-lg text-center font-light relative px-7">
<!-- Cancel --> <!-- 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> <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> </h1>
</div> </div>
<form> <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 --> <!-- Account Details -->
<div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4"> <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-slate-500 text-sm font-bold">ID</div>
<div class="text-sm text-slate-500 mb-1"> <div class="text-sm text-slate-500 mb-1">
<span><code>did:peer:kl45kj41lk451kl3</code></span> <span><code>did:peer:kl45kj41lk451kl3</code></span>
</div> </div>
</div> </div>
<div class="mt-8"> <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" /> <input
<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> 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> </div>
</form> </form>
</section> </section>
@ -36,8 +51,7 @@
import { Options, Vue } from "vue-class-component"; import { Options, Vue } from "vue-class-component";
@Options({ @Options({
components: { components: {},
},
}) })
export default class ConfirmContactView extends Vue {} export default class ConfirmContactView extends Vue {}
</script> </script>

100
src/views/ContactScanView.vue

@ -3,47 +3,84 @@
<!-- Breadcrumb --> <!-- Breadcrumb -->
<div id="ViewBreadcrumb" class="mb-8"> <div id="ViewBreadcrumb" class="mb-8">
<h1 class="text-lg text-center font-light relative px-7"> <h1 class="text-lg text-center font-light relative px-7">
<!-- Cancel --> <!-- 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> <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> </h1>
</div> </div>
<form> <form>
<h3 class="text-sm uppercase font-semibold mb-2">Scan a QR Code</h3> <h3 class="text-sm uppercase font-semibold mb-2">Scan a QR Code</h3>
<div class="bg-black rounded overflow-hidden relative mb-4"> <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 --> <!-- Darken overlay -->
<!-- Top --> <!-- Top -->
<div class="absolute top-0 left-0 right-0 bg-black/50 h-1/4"></div> <div class="absolute top-0 left-0 right-0 bg-black/50 h-1/4"></div>
<!-- Reft --> <!-- Reft -->
<div class="absolute top-1/4 bottom-1/4 left-0 bg-black/50 w-1/4"></div> <div class="absolute top-1/4 bottom-1/4 left-0 bg-black/50 w-1/4"></div>
<!-- Right --> <!-- Right -->
<div class="absolute top-1/4 bottom-1/4 right-0 bg-black/50 w-1/4"></div> <div
<!-- Bottom --> class="absolute top-1/4 bottom-1/4 right-0 bg-black/50 w-1/4"
<div class="absolute bottom-0 left-0 right-0 bg-black/50 h-1/4"></div> ></div>
<!-- Bottom -->
<!-- Reticle overlay --> <div class="absolute bottom-0 left-0 right-0 bg-black/50 h-1/4"></div>
<!-- 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> <!-- Reticle overlay -->
<!-- Top-right --> <!-- Top-left -->
<div class="absolute top-1/4 right-1/4 h-6 w-6 border-white border-t-4 border-r-4 drop-shadow"></div> <div
<!-- Bottom-left --> class="absolute top-1/4 left-1/4 h-6 w-6 border-white border-t-4 border-l-4 drop-shadow"
<div class="absolute bottom-1/4 left-1/4 h-6 w-6 border-white border-b-4 border-l-4 drop-shadow"></div> ></div>
<!-- Bottom-right --> <!-- Top-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
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> </div>
<h3 class="text-sm uppercase font-semibold mb-2">or Enter Contact Data</h3> <h3 class="text-sm uppercase font-semibold mb-2">
<input type="text" placeholder="Name (optional)" class="block w-full rounded border-slate-400 mb-2" /> or Enter Contact Data
<input type="text" placeholder="ID" class="block w-full rounded border-slate-400 mb-2" /> </h3>
<input type="text" placeholder="Public Key (optional)" class="block w-full rounded border-slate-400 mb-4" /> <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"> <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" /> <input
<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> 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> </div>
</form> </form>
</section> </section>
@ -53,8 +90,7 @@
import { Options, Vue } from "vue-class-component"; import { Options, Vue } from "vue-class-component";
@Options({ @Options({
components: { components: {},
},
}) })
export default class ContactScanView extends Vue {} export default class ContactScanView extends Vue {}
</script> </script>

153
src/views/DiscoverView.vue

@ -2,84 +2,144 @@
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200"> <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
<ul class="flex text-2xl p-2 gap-2"> <ul class="flex text-2xl p-2 gap-2">
<!-- Home Feed --> <!-- 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 --> <!-- 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 --> <!-- 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 --> <!-- 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 --> <!-- 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> </ul>
</nav> </nav>
<!-- CONTENT --> <!-- CONTENT -->
<section id="Content" class="p-6 pb-24"> <section id="Content" class="p-6 pb-24">
<!-- Heading --> <!-- 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 --> <!-- Quick Search -->
<form id="QuickSearch" class="mb-4 flex"> <form id="QuickSearch" class="mb-4 flex">
<input type="text" placeholder="Search…" class="block w-full rounded-l border-r-0 border-slate-400" /> <input
<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> 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> </form>
<!-- Result Tabs --> <!-- Result Tabs -->
<div class="text-center text-slate-500 border-b border-slate-300"> <div class="text-center text-slate-500 border-b border-slate-300">
<ul class="flex flex-wrap justify-center gap-4 -mb-px"> <ul class="flex flex-wrap justify-center gap-4 -mb-px">
<li> <li>
<a href="#" class="inline-block py-3 rounded-t-lg border-b-2 active text-blue-600 border-blue-600 font-semibold"> <a
Nearby <span class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md">20+</span> href="#"
</a> class="inline-block py-3 rounded-t-lg border-b-2 active text-blue-600 border-blue-600 font-semibold"
</li> >
<li> Nearby
<a href="#" class="inline-block py-3 rounded-t-lg border-b-2 border-transparent hover:text-slate-600 hover:border-slate-300"> <span
Remote <span class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md">13</span> class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md"
</a> >20+</span
</li> >
</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> </ul>
</div> </div>
<!-- Results List --> <!-- Results List -->
<ul class=""> <ul class="">
<li class="border-b border-slate-300"> <li class="border-b border-slate-300">
<a href="project-view.html" class="block py-4 flex gap-4"> <a href="project-view.html" class="block py-4 flex gap-4">
<div class="w-12"> <div class="w-12">
<img src="https://picsum.photos/200/200?random=1" class="w-full rounded" /> <img
</div> src="https://picsum.photos/200/200?random=1"
class="w-full rounded"
/>
</div>
<div class="grow"> <div class="grow">
<h2 class="text-base font-semibold">Canyon cleanup</h2> <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 class="text-sm">
</div> <i class="fa-solid fa-user fa-fw text-slate-400"></i> Rotary
</a> </div>
</div>
</a>
</li> </li>
<li class="border-b border-slate-300"> <li class="border-b border-slate-300">
<a href="project-view.html" class="block py-4 flex gap-4"> <a href="project-view.html" class="block py-4 flex gap-4">
<div class="w-12"> <div class="w-12">
<img src="https://picsum.photos/200/200?random=2" class="w-full rounded" /> <img
</div> src="https://picsum.photos/200/200?random=2"
class="w-full rounded"
/>
</div>
<div class="grow"> <div class="grow">
<h2 class="text-base font-semibold">Potluck with neighbors</h2> <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 class="text-sm">
</div> <i class="fa-solid fa-user fa-fw text-slate-400"></i> Andrew A.
</a> </div>
</div>
</a>
</li> </li>
<li class="border-b border-slate-300"> <li class="border-b border-slate-300">
<a href="project-view.html" class="block py-4 flex gap-4"> <a href="project-view.html" class="block py-4 flex gap-4">
<div class="w-12"> <div class="w-12">
<img src="https://picsum.photos/200/200?random=3" class="w-full rounded" /> <img
</div> src="https://picsum.photos/200/200?random=3"
class="w-full rounded"
/>
</div>
<div class="grow"> <div class="grow">
<h2 class="text-base font-semibold">Historical site</h2> <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 class="text-sm">
</div> <i class="fa-solid fa-user fa-fw text-slate-400"></i>
</a> <em>Unknown</em>
</div>
</div>
</a>
</li> </li>
</ul> </ul>
</section> </section>
@ -89,8 +149,7 @@
import { Options, Vue } from "vue-class-component"; import { Options, Vue } from "vue-class-component";
@Options({ @Options({
components: { components: {},
},
}) })
export default class DiscoverView extends Vue {} export default class DiscoverView extends Vue {}
</script> </script>

32
src/views/ImportAccountView.vue

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

39
src/views/NewEditAccountView.vue

@ -3,19 +3,41 @@
<!-- Breadcrumb --> <!-- Breadcrumb -->
<div id="ViewBreadcrumb" class="mb-8"> <div id="ViewBreadcrumb" class="mb-8">
<h1 class="text-lg text-center font-light relative px-7"> <h1 class="text-lg text-center font-light relative px-7">
<!-- Cancel --> <!-- 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> <a
[New/Edit] Identity 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> </h1>
</div> </div>
<form> <form>
<input type="text" placeholder="First Name" class="block w-full rounded border-slate-400 mb-4" /> <input
<input type="text" placeholder="Last Name" class="block w-full rounded border-slate-400 mb-4" /> 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"> <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 --> <!-- 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> </div>
</form> </form>
</section> </section>
@ -25,8 +47,7 @@
import { Options, Vue } from "vue-class-component"; import { Options, Vue } from "vue-class-component";
@Options({ @Options({
components: { components: {},
},
}) })
export default class NewEditAccountView extends Vue {} export default class NewEditAccountView extends Vue {}
</script> </script>

45
src/views/NewEditCommitmentView.vue

@ -4,26 +4,37 @@
<!-- Breadcrumb --> <!-- Breadcrumb -->
<div id="ViewBreadcrumb" class="mb-8"> <div id="ViewBreadcrumb" class="mb-8">
<h1 class="text-lg text-center font-light relative px-7"> <h1 class="text-lg text-center font-light relative px-7">
<!-- Cancel --> <!-- 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> <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> </h1>
</div> </div>
<!-- Project Details --> <!-- Project Details -->
<form> <form>
<select class="block w-full rounded border-slate-400 mb-4"> <select class="block w-full rounded border-slate-400 mb-4">
<option disabled>Choose a commitment type</option> <option disabled>Choose a commitment type</option>
<option selected>Time</option> <option selected>Time</option>
<option>Cryptocurrency</option> <option>Cryptocurrency</option>
<option>Money</option> <option>Money</option>
</select> </select>
<!-- Time amount --> <!-- Time amount -->
<div class="mb-4 flex items-stretch"> <div class="mb-4 flex items-stretch">
<input type="number" placeholder="0.0" class="block w-full rounded-l border-slate-400" /> <input
<span class="px-4 py-2 rounded-r bg-slate-200 border border-l-0 border-slate-400">hours</span> 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> </div>
<!-- Crypto amount --> <!-- Crypto amount -->
@ -31,8 +42,17 @@
<!-- Money amount --> <!-- Money amount -->
<div class="mt-8"> <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" /> <input
<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> 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> </div>
</form> </form>
</section> </section>
@ -42,8 +62,7 @@
import { Options, Vue } from "vue-class-component"; import { Options, Vue } from "vue-class-component";
@Options({ @Options({
components: { components: {},
},
}) })
export default class NewEditCommitmentView extends Vue {} export default class NewEditCommitmentView extends Vue {}
</script> </script>

60
src/views/NewEditProjectView.vue

@ -4,10 +4,14 @@
<!-- Breadcrumb --> <!-- Breadcrumb -->
<div id="ViewBreadcrumb" class="mb-8"> <div id="ViewBreadcrumb" class="mb-8">
<h1 class="text-lg text-center font-light relative px-7"> <h1 class="text-lg text-center font-light relative px-7">
<!-- Cancel --> <!-- 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> <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> </h1>
</div> </div>
@ -17,21 +21,48 @@
<!-- Image - Populated --> <!-- Image - Populated -->
<div class="relative mb-4 rounded-md overflow-hidden"> <div class="relative mb-4 rounded-md overflow-hidden">
<div class="absolute top-3 right-3 flex gap-2"> <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
<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> class="text-md font-bold uppercase bg-blue-600 text-white px-3 py-2 rounded"
</div> >
<img src="https://picsum.photos/800/400" class="w-full" /> <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> </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> <textarea
<div class="text-xs text-slate-500 italic -mt-3 mb-4">88/500 max. characters</div> 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"> <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" /> <input
<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> 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> </div>
</form> </form>
</section> </section>
@ -41,8 +72,7 @@
import { Options, Vue } from "vue-class-component"; import { Options, Vue } from "vue-class-component";
@Options({ @Options({
components: { components: {},
},
}) })
export default class NewEditProjectView extends Vue {} export default class NewEditProjectView extends Vue {}
</script> </script>

111
src/views/ProjectViewView.vue

@ -3,15 +3,35 @@
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200"> <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
<ul class="flex text-2xl p-2 gap-2"> <ul class="flex text-2xl p-2 gap-2">
<!-- Home Feed --> <!-- 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 --> <!-- 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 --> <!-- 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 --> <!-- 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 --> <!-- 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> </ul>
</nav> </nav>
@ -20,12 +40,18 @@
<!-- Breadcrumb --> <!-- Breadcrumb -->
<div id="ViewBreadcrumb" class="mb-8"> <div id="ViewBreadcrumb" class="mb-8">
<h1 class="text-lg text-center font-light relative px-7"> <h1 class="text-lg text-center font-light relative px-7">
<!-- Back --> <!-- 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> <a href="" class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
<!-- Context Menu --> ><i class="fa-solid fa-chevron-left fa-fw"></i
<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> ></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> </h1>
</div> </div>
@ -33,42 +59,64 @@
<div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4"> <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
<!-- Image --> <!-- Image -->
<div class="-mx-4 -mt-3 mb-3"> <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>
<div> <div>
<h2 class="text-xl font-semibold">Canyon cleanup</h2> <h2 class="text-xl font-semibold">Canyon cleanup</h2>
<div class="flex justify-between gap-4 text-sm mb-3"> <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
<span><i class="fa-solid fa-calendar fa-fw text-slate-400"></i> 8 days ago</span> ><i class="fa-solid fa-user fa-fw text-slate-400"></i> Rotary</span
</div> >
<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>
</div> </div>
<!-- Commit --> <!-- 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 --> <!-- Commitments -->
<div class="bg-slate-100 px-4 py-3 rounded-md"> <div class="bg-slate-100 px-4 py-3 rounded-md">
<h3 class="text-sm uppercase font-semibold mb-3">Commitments</h3> <h3 class="text-sm uppercase font-semibold mb-3">Commitments</h3>
<ul class="text-sm border-t border-slate-300"> <ul class="text-sm border-t border-slate-300">
<li class="flex justify-between gap-4 py-1.5 border-b border-slate-300"> <li class="flex justify-between gap-4 py-1.5 border-b border-slate-300">
<span>[Username]</span> <span>[Username]</span>
<span>5 hours <i class="fa-solid fa-spinner fa-fw text-slate-400"></i></span> <span
</li> >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"> <li class="flex justify-between gap-4 py-1.5 border-b border-slate-300">
<span>[Username]</span> <span>[Username]</span>
<span>US$ 20.00 <i class="fa-solid fa-circle-check fa-fw text-lime-500"></i></span> <span
</li> >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"> <li class="flex justify-between gap-4 py-1.5 border-b border-slate-300">
<span>[Username]</span> <span>[Username]</span>
<span>0.1 BTC <i class="fa-solid fa-spinner fa-fw text-slate-400"></i></span> <span
</li> >0.1 BTC <i class="fa-solid fa-spinner fa-fw text-slate-400"></i
></span>
</li>
</ul> </ul>
</div> </div>
</section> </section>
@ -78,8 +126,7 @@
import { Options, Vue } from "vue-class-component"; import { Options, Vue } from "vue-class-component";
@Options({ @Options({
components: { components: {},
},
}) })
export default class ProjectViewView extends Vue {} export default class ProjectViewView extends Vue {}
</script> </script>

19
src/views/StartView.vue

@ -1,5 +1,8 @@
<template> <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 --> <!-- Heading -->
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8"> <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
Start Here Start Here
@ -9,8 +12,15 @@
<p class="text-center text-xl mb-4 font-light"> <p class="text-center text-xl mb-4 font-light">
Do you already have an identity to import? Do you already have an identity to import?
</p> </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
<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 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> </div>
</section> </section>
@ -20,8 +30,7 @@
import { Options, Vue } from "vue-class-component"; import { Options, Vue } from "vue-class-component";
@Options({ @Options({
components: { components: {},
},
}) })
export default class StartView extends Vue {} export default class StartView extends Vue {}
</script> </script>

Loading…
Cancel
Save