name and more

components/AboutUs.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import { useShare, useElementVisibility, useTransition } from '@vueuse/core'
+
+const props = defineProps({
+  synths: { type: Number, default: 30 }
+})
+
+const counters = ref()
+const players = ref([])
+const count = computed(() => players.value.length)
+const counter = useTransition(count)
+
+onMounted(() => {
+  fetch('https://corsproxy.io/?https://db.chromatone.center/items/players?limit=-1')
+    .then(response => response.json())
+    .then(({ data }) => players.value = data)
+})
+
+const visible = useElementVisibility(counters)
+
+const { share, isSupported } = useShare()
+
+function startShare() {
+  share({
+    title: 'Web synths collection',
+    text: 'Look at this online synthesizer collection. No need to install anything - just your browser and any MIDI controller will do.',
+    url: location.href,
+  })
+}
+</script>
+
+<template lang='pug'>
+.bg-light-300.dark-bg-dark-700.dark-text-light-200.text-center.line-height-loose.text-md.py-16
+  .mx-auto.max-w-75ch.intro.md-text-lg
+    slot
+    .flex.justify-center(ref="counters")
+      .p-2.flex.flex-col.mt-8(v-if="visible")
+        .text-4xl.font-bold {{ synths }}
+        .text-lg web synths
+      .p-2.flex.flex-col.mt-8(v-if="visible&&count>0")
+        .text-4xl.font-bold {{ counter.toFixed() }}+
+        .text-lg web musicians
+    button.text-white.py-2.px-4.mt-6.shadow-lg.rounded-lg.cursor-pointer.bg-green-600.-hover-translate-y-2px.transition(@click="startShare()" v-if="isSupported") Share now to save for later
+</template>

components/SynthList.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import { useForm } from "../composables/useForm.ts";
+import { data } from "../synths.data";
+import SynthCard from "./SynthCard.vue";
+import { SlickList, SlickItem } from "vue-slicksort";
+
+import { version } from '../package.json'
+
+const { isAccessGranted } = useForm()
+
+const list = ref(data)
+
+function isOff(n) {
+  return !isAccessGranted.value && n > 5
+}
+
+
+//https://vue-slicksort.netlify.app/components/slicklist
+</script>
+
+<template lang='pug'>
+SlickList.flex.flex-wrap.items-stretch.gap-4.md-gap-6.m-2.lg-m-8(
+  v-model:list="list", 
+  axis="xy", 
+  use-drag-handle)
+  SlickItem.flex(
+    style="flex: 1 1 240px"
+    v-for="(synth,s) in list" 
+    :key="synth.id"
+    :index="s")
+    SynthCard( 
+      :style="{opacity: isOff(s) ? 0.8 : 1}"
+      :title="synth.title"
+      :description="synth.description"
+      :cover="synth.cover"
+      :url="synth.url"
+      :key="synth.id"
+      :off="isOff(s)")
+</template>
+
+<style lang="postcss">
+.dark a {
+  color: #fff !important;
+}
+
+.intro p {
+  @apply my-4;
+}
+
+.intro a {
+  @apply underline font-bold;
+}
+</style>

components/TheForm.vue

@@ -1,40 +1,75 @@
 <script setup>
 import { useForm } from '../composables/useForm.ts'
 
-const { email, isValidEmail, isFormOpen, grantAccess } = useForm()
+const { name, email, isValidEmail, isFormOpen, grantAccess, storedEmail, storedName, resetEmail, isAccessGranted } = useForm()
+
+function scroll() {
+  window.scrollTo({
+    top: 0,
+    left: 0,
+    behavior: 'smooth'
+  });
+}
 </script>
 
 <template lang='pug'>
 transition(name="slide")
-  .fixed.z-200.min-h-50dvh.bottom-0.right-0.left-0.bg-light-800.bg-opacity-80.backdrop-blur.flex.flex-col.items-center.gap-4.justify-start.dark-bg-dark-200.dark-bg-opacity-80.p-8.shadow(v-show="isFormOpen")
+  .z-10.min-h-40dvh.bottom-0.right-0.left-0.bg-light-800.bg-opacity-80.backdrop-blur.flex.flex-col.items-center.gap-4.justify-center.dark-bg-dark-200.dark-bg-opacity-80.p-8.shadow(
+    :class="{sticky:isFormOpen}"
+    )
 
     svg.absolute.top-4.right-4.text-4xl.cursor-pointer(
+      v-show="isFormOpen"
       @click="isFormOpen=false"
       xmlns="http://www.w3.org/2000/svg", width="1em", height="1em", viewBox="0 0 32 32")
       path(d="M7.219 5.781L5.78 7.22L14.563 16L5.78 24.781L7.22 26.22L16 17.437l8.781 8.782l1.438-1.438L17.437 16l8.782-8.781L24.78 5.78L16 14.563z", fill="#888888")
 
-    .flex.flex-col.gap-8.relative.pt-8 
+    .flex.flex-col.gap-4.max-w-45ch.text-center(v-if="isAccessGranted")
+      .text-3xl.font-bold Hello, {{ storedName }}!
+      .text-sm.flex.gap-2.justify-center {{ storedEmail }}
+        span.opacity-20.hover-opacity-50.transition.cursor-pointer(@click="resetEmail") Log out
+      .text-xl Enjoy your web-synthesizers hub
+      .flex.justify-center.cursor-pointer.p-2.opacity-50.hover-opacity-100.transition(
+        @click="scroll()"
+        )
+        svg.translate-y-3(xmlns="http://www.w3.org/2000/svg", width="32", height="32", viewBox="0 0 32 32")
+          path(d="M16 4.688L3.781 16.905l1.438 1.407L16 7.53l10.781 10.782l1.438-1.407zm0 7L3.781 23.905l1.438 1.407L16 14.53l10.781 10.781l1.438-1.406z", fill="#888888")
+
+    .flex.flex-col.gap-8.relative.pt-8.items-center(v-else)
 
       label.text-center.max-w-45ch(for="email")
         slot
 
-      .flex.gap-4.flex-wrap.md-flex-nowrap
-        input.flex-1.p-2.md-p-4.rounded-xl.bg-light-200.shadow-md.dark-bg-dark-400.flex-1(
-          ref="target"
-          style="flex: 10 1 200px"
-          v-model="email" 
-          id="email"
-          name="email"
-          type="email"
-          @keydown.enter="grantAccess()"
-          placeholder="[email protected]")
-
-        button.text-sm.md-text-md.p-2.font-bold.md-p-4.rounded-xl.shadow-xl.hover-shadow-2xl.transition.-hover-translate-y-2px.active-translate-y-0.active-shadow-md.bg-green-400.dark-bg-green-700(
+      .flex.gap-4.flex-col.w-full
+        label.flex.items-center.gap-2
+          .p-2.w-20.font-bold.text-right E-mail*
+          input.flex-1.p-4.md-p-4.rounded-xl.bg-light-200.shadow-md.dark-bg-dark-400.flex-1(
+            ref="target"
+
+            v-model="email" 
+            id="email"
+            name="email"
+            type="email"
+            @keydown.enter="grantAccess()"
+            placeholder="[email protected]")
+        label.flex.items-center.gap-2
+          .p-2.w-20.font-bold.text-right Name
+          input.flex-1.p-4.md-p-4.rounded-xl.bg-light-200.shadow-md.dark-bg-dark-400(
+
+            v-model="name" 
+            id="name"
+            name="name"
+            type="text"
+            placeholder="optional")
+
+
+
+        button.text-sm.md-text-md.p-4.font-bold.md-p-4.rounded-xl.shadow-xl.hover-shadow-2xl.transition.-hover-translate-y-2px.active-translate-y-0.active-shadow-md.bg-green-400.dark-bg-green-700(
           @click="grantAccess()"
           :disabled="!isValidEmail"
           :class="{'grayscale-50':!isValidEmail}"
-          style="flex: 1 1 400px"
-        )
+
+          )
           slot(name="button") GET ACCESS
       .text-xs.opacity-60.text-center.max-w-45ch.mx-auto 
         slot(name="notice") Your access status will be saved per device and you won't need to enter your e-mail again.

composables/useForm.ts

@@ -1,18 +1,28 @@
 import { ref, computed, watch, Ref, onMounted } from 'vue'
-import { Directus } from '@directus/sdk';
 import { RemovableRef, useStorage } from '@vueuse/core';
 
-const directus = new Directus('https://db.chromatone.center');
-
 const isAccessGranted = ref(false)
 const isFormOpen = ref(false)
 const checkAvailability = ref(false)
 const storedEmail = useStorage('storedEmail', '')
+const storedName = useStorage('storedName', '')
 const isSent = ref(false)
 const email = ref('')
-const isValidEmail = computed(() => /^[^@]+@\w+(\.\w+)+\w$/.test(email.value))
+const name = ref('')
+const isValidEmail = computed(() => validateEmail(email.value))
 const started = ref(false)
 
+function validateEmail(mail) {
+  return /^[^@]+@\w+(\.\w+)+\w$/.test(mail)
+}
+
+function resetEmail() {
+  storedEmail.value = ''
+  storedName.value = ''
+  isSent.value = false
+  isAccessGranted.value = false
+}
+
 export function useForm() {
 
   if (!started.value) {
@@ -32,21 +42,45 @@ export function useForm() {
     isAccessGranted,
     isValidEmail,
     email,
+    name,
     grantAccess,
     isSent,
     isFormOpen,
     checkAvailability,
+    storedEmail,
+    storedName,
+    resetEmail
   }
 }
 
+const url = 'https://db.chromatone.center/flows/trigger/f36a3461-c476-4ce5-88c9-eba2216083b0'
+
 export async function grantAccess() {
-  if (!email.value && !isValidEmail.value) return
+  if (!email.value && !validateEmail(email.value)) return
   isAccessGranted.value = true
   if (!isSent.value) {
     isSent.value = true
     try {
-      await directus.items('players').createOne({ email: email.value })
+      const data = { email: email.value, name: name.value }
       storedEmail.value = email.value
+      storedName.value = name.value
+      const response = await fetch(url, {
+        method: "POST", // *GET, POST, PUT, DELETE, etc.
+        mode: "cors", // no-cors, *cors, same-origin
+        cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
+        credentials: "same-origin", // include, *same-origin, omit
+        headers: {
+          "Content-Type": "application/json"
+        },
+        redirect: "follow", // manual, *follow, error
+        referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+        body: JSON.stringify(data), // body data type must match "Content-Type" header
+      });
+
+
+
+      console.log(response?.json())
+
     } catch (e) {
       console.error(e)
     }

index.md

@@ -6,18 +6,23 @@ layout: home
 ---
 
 <script setup>
-import MainPage from './components/MainPage.vue'
+import SynthList from './components/SynthList.vue'
 import TheForm from './components/TheForm.vue'
+import AboutUs from './components/AboutUs.vue'
 </script>
 
-<MainPage>
+<SynthList>
+
+</SynthList>
+
+<AboutUs>
 <h2 class="text-lg font-bold">Welcome to our free web synth collection!</h2>
 
 <a href='https://playtronica.com' target='_blank' rel='noopener'>Playtronica</a> is a digital playground that explores the possibilities of the material world through technology, creating gadgets that make the world musical. <a href='https://chromatone.center' target='_blank' rel='noopener'>Chromatone</a> is a visual language for music education, research, and performance. We share our passion for web-based music instruments. Welcome to the community!
-</MainPage>
+</AboutUs>
 
 <TheForm>
 We are building a community of web-based musicians. Type in your e-mail to instantly get full access to the collection and occasionally receive community updates.
-<template #button>GET FULL ACCESS</template>
+<template #button>JOIN THE COMMUNITY</template>
 <template #notice>Your access status will be saved per device and you won't need to enter your e-mail again.</template>
 </TheForm>