crowd-funder-for-time-pwa/src/views/HelpOnboardingView.vue

<template>
  <!-- Don't include nav buttons since this is shown in a different window. -->

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
    <!-- Breadcrumb -->
    <div class="mb-8">
      <!-- Don't include 'back' button since this is shown in a different window. -->
      <!-- Heading -->
      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
        Time Safari Onboarding Instructions
      </h1>
    </div>

    <p>
      To invite someone, generate a link to send to them from this page:
      <router-link
        :to="{ name: 'invite-one' }"
        class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
      >
        <fa icon="envelope-open-text" class="fa-fw text-xl"
      /></router-link>
    </p>
    <p>That's all it takes.</p>
    <p>Watch that page to see when people accept their invite.</p>
    <p>
      That page is also reachable from the Contacts <fa icon="users" /> page
      though the invitation <fa icon="envelope-open-text" /> icon.
    </p>

    <h1 class="font-bold text-xl">Advanced</h1>
    The following are optional steps for even more functionality:
    <!-- eslint-disable prettier/prettier -->
    <div class="ml-4">
      <h1 class="font-bold text-xl">Install</h1>
      <div>
        <p>
          1) Have them visit TimeSafari.app in a browser, preferably Chrome or Safari.
        </p>
        <p>
          2) Have them "Install" the site to their desktop.
        </p>
      </div>

      <h1 class="font-bold text-xl">Add Contact & Register</h1>
      <p>
        You share even more information such as your picture and name when
        you share with your QR code at these links: <fa icon="qrcode" /> Scanning
        those with your cameras will automatically register people and add them
        to each other's contact lists.
      </p>
      <p>
        The following are more detailed manual steps:
      </p>
      <div>
        <p>
          3) Have them follow their yellow prompts.
        </p>
        <p>
          4) Scan their QR, or have them tap on it to copy their info and send it to you.
          Then you can add them to your Contacts <fa icon="users" />
        </p>
        <p>
          5) You can register them at their info page <fa icon="circle-info" />
          and click on the register button <fa icon="person-circle-question" />
        </p>
        <p>
          6) Add yourself to their Contacts <fa icon="users" />
        </p>
      </div>

      <h1 class="font-bold text-xl">Enable Notifications</h1>
      <div>
        <p>
          7) Enable notifications from the Account page <fa icon="circle-user" />
        </p>
      </div>

      <h1 class="font-bold text-xl">Discuss Backups</h1>
      <div>
        <p>
          8) Exporting backups <fa icon="circle-user" /> are important if they lose their phone
          --- especially for the Identifier Seed!
        </p>
      </div>

    </div>
    <!-- eslint enable -->
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";

import QuickNav from "@/components/QuickNav.vue";

@Component({ components: { QuickNav } })
export default class Help extends Vue {}
</script>