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
Unified 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"; 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>

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"> <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
View File

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

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

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

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

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

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

62
src/views/NewEditProjectView.vue
View File

@ -4,34 +4,65 @@
<!-- 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>
<!-- Project Details --> <!-- Project Details -->
<form> <form>
<!-- Image - (see design model) Empty --> <!-- Image - (see design model) Empty -->
<!-- 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
View File

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

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

Write Preview
Loading…
Cancel
Save