💄 Improved interactive form in layout

web/template/template.qtpl

@@ -50,46 +50,59 @@ func NewContext(processors domain.ConfigProcessors, lang language.Tag, amount ui
 {% endfunc %}
 
 {% func (ctx Context) body() %}
-  <h1>{%= ctx.title() %}</h1>
+  <noscript>
+    <h1>{%= ctx.t(`Donate $%.2f to %s`, ctx.amount/100, "toby3d") %}</h1>
+  </noscript>
+  <span class="js-enabled" hidden>
+    <h1>{%= ctx.title() %}</h1>
+  </span>
 
-  <p class="js-enabled" hidden>
-    {%= ctx.t(`I want to donate`) %}
+  <p class="[ cluster ][ form ][ js-enabled ]" hidden>
+    <span>{%= ctx.t(`Donate`) %}</span>
 
-    <label>
-      <span aria-label="{%= ctx.t(`dollar amount`) %}">$</span>
-      <input type="number" value="{%f.2 ctx.amount/100 %}" min="0.00" step="0.01">
+    <label class="with-icon">
+      <span class="icon"{% space %}
+            role="img"{% space %}
+            aria-label="{%= ctx.t(`dollar amount`) %}">
+
+        💲
+      </span>
+      <input class="form__amount"{% space %}
+             type="number"{% space %}
+             name="amount"{% space %}
+             value="{%f.2 ctx.amount/100 %}"{% space %}
+             min="0.00"{% space %}
+             step="0.01"{% space %}
+             inputmode="decimal"{% space %}
+             required />
     </label>
 
     <label>
       <span class="visually-hidden">{%= ctx.t(`contribution frequency`) %}</span>
       <select name="period">
-        <option value="onetime" selected>{%= ctx.t(`one time`) %}</option>
-        <option value="week">{%= ctx.t(`weekly`) %}</option>
-        <option value="month">{%= ctx.t(`monthly`) %}</option>
-        <option value="year">{%= ctx.t(`annually`) %}</option>
+        <option value="0" selected>{%= ctx.t(`one time`) %}</option>
+        <option value="7">{%= ctx.t(`weekly`) %}</option>
+        <option value="30">{%= ctx.t(`monthly`) %}</option>
+        <option value="365">{%= ctx.t(`annually`) %}</option>
       </select>
     </label>
 
-    <span>
-      <span>
-        <label>
-          <input type="radio" name="location" value="russia">
-          {%= ctx.t(`from Russia`) %}
-        </label>
-      </span>
-      <span>
-        <label>
-          <input type="radio" name="location" value="outside" checked>
-          {%= ctx.t(`Europe`) %}
-        </label>
-      </span>
-    </span>
+    <label>
+      <input type="checkbox"{% space %}
+             name="inRussia"{% space %}
+             value="true" />
+
+      {%= ctx.t(`from Russia`) %}
+    </label>
   </p>
 
   <ul class="[ cluster ][ list-style-type:none padding-inline-start:unset ]">
     {% if ctx.processors.Liberapay != "" %}
       <li>
-          <a class="button"{% space %}
+          <a class="[ button ][ js-button ]"{% space %}
+             data-period-min="1"{% space %}
+             data-period-max="365"{% space %}
+             data-pattern="https://liberapay.com/{%s ctx.processors.Liberapay %}/donate?amount=%f&currency=USD&period=%p"{% space %}
              rel="noopener noreferrer payment"{% space %}
              href="https://liberapay.com/{%s ctx.processors.Liberapay %}/donate{% if ctx.amount > 0 %}?amount={%f.2 ctx.amount/100 %}&currency=USD&period=monthly{% endif %}">
 
@@ -100,7 +113,9 @@ func NewContext(processors domain.ConfigProcessors, lang language.Tag, amount ui
     {% endif %}
     {% if ctx.processors.PayPal != "" %}
       <li>
-        <a class="button"{% space %}
+        <a class="[ button ][ js-button ]"{% space %}
+           data-period-max="1"{% space %}
+           data-pattern="https://www.paypal.me/{%s ctx.processors.PayPal %}/%fUSD"{% space %}
            rel="noopener noreferrer payment"{% space %}
            href="https://www.paypal.me/{%s ctx.processors.PayPal %}{% if ctx.amount > 0 %}/{%f.2 ctx.amount/100 %}USD{% endif %}">
 
@@ -111,7 +126,12 @@ func NewContext(processors domain.ConfigProcessors, lang language.Tag, amount ui
     {% endif %}
     {% if ctx.processors.YooMoney != "" %}
       <li>
-        <a class="button"{% space %}
+        <a class="[ button ][ js-button ]"{% space %}
+           data-amount-min="2"{% space %}
+           data-amount-max="15000"{% space %}
+           data-period-max="1"{% space %}
+           data-in-russia="true"{% space %}
+           data-pattern="https://yoomoney.ru/to/{%s ctx.processors.YooMoney %}/%d"{% space %}
            rel="noopener noreferrer payment"{% space %}
            href="https://yoomoney.ru/to/{%s ctx.processors.YooMoney %}{% if ctx.amount > 0 %}/{%dul uint64(ctx.amount) %}{% endif %}">
 
@@ -142,24 +162,29 @@ func NewContext(processors domain.ConfigProcessors, lang language.Tag, amount ui
 {% endfunc %}
 
 {% func (ctx Context) title() %}
-  {%= ctx.t(`Donate $%.2f to %s`, ctx.amount/100, "toby3d") %}
+  NotDotPay
 {% endfunc %}
 
 {% func Template(p Page) %}
   <!DOCTYPE html>
-  <html lang="{%= p.lang() %}" dir="{%= p.dir() %}">
+  <html lang="{%= p.lang() %}"{% space %}
+        dir="{%= p.dir() %}">
+
     <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <title>{%= p.title() %}</title>
+      <meta name="color-scheme" content="light">
+      <title>NotDotPay</title>
       {%= p.head() %}
     </head>
+
     <body>
       {%= p.body() %}
-
       <script async>
         document.querySelectorAll('.js-enabled').forEach(el => el.hidden = false);
+        document.querySelectorAll('noscript').forEach(el => el.remove());
       </script>
+      <script src="/scripts.js" async defer></script>
     </body>
   </html>
 {% endfunc %}