As a potential future user, I’d like to leave my email address so tha…

…t I can be notified when the app is ready. #27
mariha · Aug 23, 2020 · c3ebea5 · c3ebea5
1 parent e8cf345
commit c3ebea5
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 0 deletions.
diff --git a/src/main/resources/assets/index.html b/src/main/resources/assets/index.html
@@ -3,6 +3,8 @@
 <head>
  <title>Be Neutral</title>
 
+ <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
+
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, minimum-scale=1, width=device-width, user-scalable=0">
  <meta name="description"
@@ -116,5 +118,50 @@ <h3>Share with the community</h3>
  <p style="color:grey;">TODO: maybe include water consumption - as a matter of running out of resources rather than global warming.</p>
 </section>
 
+ <form action="https://hooks.slack.com/services/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" id="subscribeForm">
+ <div class="container">
+ <h2>Subscribe, dear future user</h2>
+ <p>We are in progress, if you'd like to be one of the first users to test our platform, please let us know by leaving your email address: e-mail@somewhere.com.</p>
+ </div>
+
+ <div class="container" style="background-color:white">
+ <input type="text" placeholder="Email address" name="email_address" required>
+ </div>
+
+ <div class="container">
+ <input type="submit" value="Subscribe">
+ </div>
+ </form>
+ <!-- the result of the search will be rendered inside this div -->
+ <div id="result">
+
+ </div>
+
+
 </body>
+
+<script>
+// Attach a submit handler to the form
+$( "#subscribeForm" ).submit(function( event ) {
+
+ // Stop form from submitting normally
+ event.preventDefault();
+
+ // Get some values from elements on the page:
+ var $form = $( this ), email = $form.find( "input[name='email_address']" ).val(), url = $form.attr( "action" );
+
+ $.ajax({
+ url: url,
+ data: '{"text": "' + email + '"}',
+ type: "POST"
+ })
+ .done(function (reply) {
+ $( "#result" ).empty().append( "Thank you for your subscription!");
+ })
+ .fail(function (xhr, status, errorThrown) {
+ $( "#result" ).empty().append("Failed to subscribe. Try again later, please.");
+ })
+});
+</script>
+
 </html>
diff --git a/src/main/resources/assets/styles.css b/src/main/resources/assets/styles.css
@@ -16,3 +16,34 @@ p {
  text-align: center;
  width: 100%;
 }
+
+
+form {
+ border: 3px solid #f1f1f1;
+ font-family: Arial;
+}
+
+.container {
+ padding: 5px;
+ background-color: #f1f1f1;
+}
+
+input[type=text], input[type=submit] {
+ width: 100%;
+ padding: 12px;
+ margin: 8px 0;
+ display: inline-block;
+ border: 1px solid #ccc;
+ box-sizing: border-box;
+}
+
+
+input[type=submit] {
+ background-color: #4CAF50;
+ color: white;
+ border: none;
+}
+
+input[type=submit]:hover {
+ opacity: 0.8;
+}