From a0968973267edae98dde33a732b8ca3e04a7ecd6 Mon Sep 17 00:00:00 2001
From: Alex Sova <alex.sova.jam@gmail.com>
Date: Fri, 22 Mar 2024 14:09:04 -0300
Subject: [PATCH] chore: form WIP

---
 src/css/wp/index.css.js      | 61 ++++++++++++++++++++++++++++++++++--
 src/md/whitepaper-summary.md |  2 +-
 src/whitepaper/index.html.js | 18 ++++++++---
 3 files changed, 73 insertions(+), 8 deletions(-)

diff --git a/src/css/wp/index.css.js b/src/css/wp/index.css.js
index d12d5d9..b85a153 100644
--- a/src/css/wp/index.css.js
+++ b/src/css/wp/index.css.js
@@ -21,6 +21,9 @@ let aBtn = /*css*/ `
 `;
 
 export default /*css*/ `
+* {
+  box-sizing: border-box;
+}
 html, body {
   padding: 0;
   margin: 0;
@@ -103,6 +106,17 @@ a[form] {
   ${aBtn}
   right: 90px;
 }
+a[close] {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: 32px;
+  width: 32px;
+  background-color: #fff;
+  color: #000;
+  border-radius: 100%;
+  text-decoration: none;
+}
 
 ul {
   position: relative;
@@ -162,6 +176,10 @@ details {
       transform: rotate(-180deg);
     }
   }
+
+  a {
+    color: currentColor;
+  }
 }
 
 summary {
@@ -180,17 +198,56 @@ dialog-el {
   display: block;
   position: fixed;
   min-height: 200px;
-  min-width: 200px;
+  min-width: 300px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -40%);
   background-color: #212121;
   box-shadow: 6px 6px 0 rgba(0, 0, 0, .2);
   color: #fff;
-  padding: 20px;
   opacity: 0;
   transition: .4s;
   visibility: hidden;
+
+  toolbar-el {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    padding-left: 20px;
+    gap: 10px;
+  }
+
+  form {
+    padding: 20px;
+
+    label {
+      display: block;
+      margin-top: 10px;
+      margin-bottom: 4px;
+    }
+
+    input {
+      display: block;
+      width: 100%;
+      height: 32px;
+      border: none;
+      border-bottom: 2px solid currentColor;
+      background-color: rgba(255, 255, 255, .1);
+      color: #fff;
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+
+    button {
+      height: 32px;
+      background-color: #fff;
+      color: #000;
+      border: none;
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+  }
 }
 
 dialog-el:target {
diff --git a/src/md/whitepaper-summary.md b/src/md/whitepaper-summary.md
index 81fe71f..9f3e9f7 100644
--- a/src/md/whitepaper-summary.md
+++ b/src/md/whitepaper-summary.md
@@ -8,4 +8,4 @@ This is a list of main elements of our concept:
 - AI tools for the automated web-asset generation
 - Co-ownership of the whole platform with the users
 
-Please, feel free to contact us if you are interested or want to participate.
\ No newline at end of file
+Please, feel free to [contact](#form) us if you are interested or want to participate.
\ No newline at end of file
diff --git a/src/whitepaper/index.html.js b/src/whitepaper/index.html.js
index 02debc6..9e2cc6d 100644
--- a/src/whitepaper/index.html.js
+++ b/src/whitepaper/index.html.js
@@ -57,11 +57,19 @@ export default /*html*/ `
   <footer>&copy; 2024 jam-do.org</footer>
 
   <dialog-el id="form">
-    <a href="#close" close>✕</a>
-
-    <form>
-      <label>Email:</label>
-      <input type="email" required />
+    <toolbar-el> 
+      <div>🙂 Let's stay in touch</div>
+      <a href="#close" close>✕</a>
+    </toolbar-el> 
+    
+    <form 
+      action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSftqP9Nu60pwyaxBOaS9Q7ASsajNp_LmV-c1aREjwx8UsoEPw/formResponse"
+      target="_self"
+      method="POST">
+      <label>Your Email:</label>
+      <input type="email" autocomplete="email" required />
+      <br />
+      <br />
       <button type="submit">Submit</button>
     </form>
   </dialog-el>