Merge pull request #3 from dygufa/master

diegocoxta · web-flow · commit 0c37f4423c1f · 2018-08-31T13:49:37.000-03:00
Adding email form
diff --git a/assets/style.css b/assets/style.css
@@ -4,6 +4,7 @@ body {
     Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
     margin: 0;
 }
+
 .container {
     display: flex;
     justify-content: center;
@@ -12,6 +13,11 @@ body {
     width: 100vw;
     height: 100vh;
 }
+
+#logo-image {
+    margin-bottom: 30px;
+}
+
 .github-link {
     display: block;
     background: url(github.svg) no-repeat;
@@ -20,40 +26,30 @@ body {
     height: 30px;
     overflow: hidden;
     line-height: 200px;
-    margin-top: 60px;
+    margin-top: 20px;
 }
-@keyframes rotating {
-	from {
-        transform: rotate(0deg);
-        -o-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-        -moz-transform: rotate(0deg);
-        -webkit-transform: rotate(0deg);
-    }
-    
-    to {
-		transform: rotate(360deg);
-		-o-transform: rotate(360deg);
-		-ms-transform: rotate(360deg);
-		-moz-transform: rotate(360deg); 
-		-webkit-transform: rotate(360deg);
-    }
+
+#meetup-notification-form {
+    color: #fff;
+    margin: 20px 0;
+    text-align: center;
 }
-@-webkit-keyframes rotating {
-	from {
-		transform: rotate(0deg);
-		-webkit-transform: rotate(0deg);
+
+#meetup-notification-form input {
+    border-radius: 5px;
+    padding: 10px;
+    font-size: 20px;
+    width: 400px;
+    text-align: center;
+}
+
+@media screen and (max-width: 500px) {
+    #logo-image, #logo-text, #meetup-notification-form {
+        width: 80%;
     }
-	to {
-		transform: rotate(360deg);
-		-webkit-transform: rotate(360deg);
+
+    #meetup-notification-form input {
+        width: calc(100% - 20px);
+        font-size: 15px;
     }
-}
-.rotating {
-    margin-bottom: 2rem;
-	-webkit-animation: rotating 10s linear infinite;
-	-moz-animation: rotating 10s linear infinite;
-	-ms-animation: rotating 10s linear infinite;
-	-o-animation: rotating 10s linear infinite;
-	animation: rotating 10s linear infinite;
-}
+}
diff --git a/index.html b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -9,11 +10,51 @@
     <link rel="stylesheet" href="assets/style.css">
     <link rel="icon" sizes="192x192" href="assets/reactssa.png">
 </head>
+
 <body>
     <div class="container">
-        <img src="assets/react-logo-fitas.png" alt="Logo do React Salvador composto por fitas do Senhor do Bomfim" class="rotating">
-        <img src="assets/react-ssa-text.png" alt="Logo do React Salvador composto por fitas do Senhor do Bomfim">
+        <img id="logo-image" src="assets/react-logo-fitas.png" alt="Logo do React Salvador composto por fitas do Senhor do Bomfim">
+        <img id="logo-text" src="assets/react-ssa-text.png" alt="Logo do React Salvador composto por fitas do Senhor do Bomfim">
+
+        <form id="meetup-notification-form">
+            <h2>Quer ser avisado sobre os próximos encontros?</h2>
+            <input type="email" id="email" placeholder="Digite seu email e pressione enter" />
+        </form>
+
         <a href="https://github.com/ReactSSA" class="github-link">ReactSSA</a>
     </div>
+
+    <script src="https://www.gstatic.com/firebasejs/5.4.2/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/5.4.2/firebase-database.js"></script>
+    
+    <script>
+        var config = {
+            apiKey: "AIzaSyDthLRn1-FtkR9duSYmGO5vcxv27Mw6zfY",
+            authDomain: "reactssa-d6ce0.firebaseapp.com",
+            databaseURL: "https://reactssa-d6ce0.firebaseio.com",
+            projectId: "reactssa-d6ce0",
+            storageBucket: "reactssa-d6ce0.appspot.com",
+            messagingSenderId: "146802970530"
+        };
+        firebase.initializeApp(config);
+
+        var emailsStore = firebase.database().ref("emails");
+
+        document.getElementById("meetup-notification-form").addEventListener("submit", function(e) {
+            e.preventDefault();
+            
+            var emailInputEl = document.getElementById("email");
+            emailsStore.push({
+                email: emailInputEl.value
+            }).then(function() {
+                emailInputEl.value = "Pronto, anotado!";
+                emailInputEl.disabled = true;
+                emailInputEl.style.color = "#229400";
+            }).catch(function() {
+                emailInputEl.value = "Erro, nos avise lá no github!";
+            });
+        })
+    </script>
 </body>
-</html>
+
+</html>
