email collector

serve a webpage to collect emails.

for a waitlist perhaps.

paste this code into a hawk file

mime: /text/hawk-500

::  email collector  (hawk-500)
::
::  to publish this page,
::  set both peek and poke to "yes"
::  in the auth tab.
::
|^
  ;div.page.fc.g6
    ;+  header
    ;+  description
    ;+  form
    ;+  thanks
    ;+  entries
    ;+  script
    ;+  style
  ==
++  description  ::  write markdown here
  ;div.tc.prose.p3
  
    # Super Secret Waitlist

sign up to get notified
      
  ==
++  thanks  ::  write markdown here
  ;div#thanks.prose.tc.p3.hidden.o6
    ## Thanks!
    
    You're on the list.

Get ready for pictures of birds.
  ==
++  header
  ;header.tr
    ;a.f-4/"/~~": homepage
  ==
++  form
  ;form#email-form.fc.g2.p3
    =method  "post"
    =hx-swap  "none"
    =hx-on-htmx-before-request  "showThanks()"
    ;input.hidden(name "/", value "add");
    ;input.s1.br1.bd1.p-2
      =type  "email"
      =name  "/email"
      =placeholder  "will@hawk.computer"
      =required  ""
      ;
    ==
    ;button.p2.s1.hover.b1.loader.br1.bd1
      ;span.loaded: Submit
      ;span.loading: ====
    ==
  ==
++  entries
  =,  mq
  ;details.need-admin.bd1.bc-2.br1
    ;summary.p1.b-2.hover.br1: subscribers
    ;div#entries.fc.g1.p2
      ;div.f4
        ; only admins can see this list.
        ; open in incognito to see what others see.
      ==
      ;*
      =;  =marl
        ?:  =((pib:c /) "reset")  ~
        ?.  =((pib:c /) "add")  marl
        :_  marl
        ;div.email
          ; {(pib:c /email)}
        ==
      %+  find-class  "email"
      (get-id "entries" dat:f)
      ::
      ;form.need-admin.mt1(method "post")
        =hx-confirm  "clear all?"
        ;input.hidden(name "/", value "reset");
        ;button.br1.bd1.bc-1.p2.f-1.b-1.hover.loader
          ;span.loaded: clear all
          ;span.loading: =====
        ==
      ==
    ==
  ==
++  script
  ;script
    ;+  ;/  %-  trip
    '''
    function showThanks() {
      $('#email-form').addClass('hidden');
      $('#thanks').removeClass('hidden');
    }
    '''
  ==
++  style
  ;style
    ;+  ;/  %-  trip
    '''
    /* hide the eauth login bar */
    #nav-bar-non-admin {
      display: none;
    }
    '''
  ==
--