140/modal-and-fixes (#143)

* add img for better ui * Add modal, styles, and its logic to be shown * refactor: delete excesive list-style:none * delete weird tabs * fixed menu dropdown color on section about * add smaller background for key_features section * update: dialog * Update index.liquid * Update index.liquid * Update index.liquid * Update index.liquid --------- Co-authored-by: Daniel Olano <[email protected]>
virto-network · Jun 17, 2024 · 4de46f0 · 4de46f0
1 parent b592879
commit 4de46f0
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 19 deletions.
diff --git a/about.liquid b/about.liquid
@@ -10,13 +10,13 @@ data:
 body {
 	overflow-x: hidden !important;
 }
-	/*Dark Nav*/
-	#nav { background-color: var(--clr-blue-light); }
-	#nav a:not(#about-link) { color: var(--clr-olive-darker); }
-	#menu-icon svg line { stroke: var(--clr-olive-darker); }
-	#virto-logo svg path { fill: var(--clr-olive-darker); }
+/*Dark Nav*/
+#nav { background-color: var(--clr-blue-light); }
+#nav a:not(#about-link) { color: var(--clr-olive-darker); }
+#menu-icon svg line { stroke: var(--clr-olive-darker); }
+#virto-logo svg path { fill: var(--clr-olive-darker); }
 
-	section { padding: 2em;}
+section { padding: 2em;}
 #hero {
 	background-image: url('/img/about_bg.svg');
 	background-position: center center;
@@ -96,7 +96,6 @@ section >  article {
 }
 
 #action-plan ul.step-list li.step-card {
-    list-style: none;
     border-radius: 15px;
     padding: 2em;
     flex: 1 1 300px;
@@ -118,7 +117,6 @@ section >  article {
 	margin: 0;
 }
 #core-team {
-	list-style: none;
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
 	padding: 1em;

diff --git a/css/index.css b/css/index.css
@@ -210,10 +210,6 @@ figure.logo svg {
 }
 
 /*QA*/
-.faq-list {
-    list-style: none;
-}
-
 .question-button {
     background: none;
     width: 100%;
@@ -234,7 +230,6 @@ figure.logo svg {
 }
 
 .supporters-list {
-    list-style: none;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -289,4 +284,43 @@ figure.logo svg {
     }
   }
 
+dialog::backdrop {
+    background-color: hsla(163, 49%, 14%, 0.97);
+}
+
+dialog {
+    padding: 20px;
+    background: none;
+    border-radius: 35px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
+    max-width: 700px;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+dialog img {
+    width: 120px;
+}
+
+#modal-message * {
+    padding: .5em;
+}
 
+.close-button {
+    color: var(--clr-olive-darker);
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    font-size: 24px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.close-button:hover,
+.close-button:focus {
+    color: var(--clr-green-darker);
+    text-decoration: none;
+    cursor: pointer;
+}
diff --git a/css/layout.css b/css/layout.css
@@ -133,7 +133,6 @@ footer .nav-links {
   gap: 3.5rem;
   flex-direction: row;
   align-items: center;
-  list-style: none;
   width: 100%;
   flex-wrap: wrap;
   row-gap: 1rem;
@@ -200,7 +199,7 @@ footer nav a {
 #menu-dropdown a {
   display: flex;
   position: relative;
-  color: var(--clr-green-darker);
+  color: var(--clr-green-darker) !important;
 }
 
 #menu-dropdown a.close-menu {

diff --git a/img/error.svg b/img/error.svg
diff --git a/img/success.svg b/img/success.svg
diff --git a/index.liquid b/index.liquid
@@ -5,6 +5,11 @@ data:
   route: home
 ---
 
+<dialog data-modal class="light-green-bg">
+        <span class="close-button boldest">X</span>
+        <div id="modal-message" class="center"></div>
+</dialog>
+
 {% for home_section in site.data.index.home_sections %}
 <section {% if home_section.id == "home" %} id="home">
 	<article class="max animated">
@@ -212,7 +217,19 @@ const baseId = '{{ env.AIRTABLE_BASE_ID }}';
 const table = '{{ env.AIRTABLE_TABLE_ID }}';
 
 const mailForm = document.getElementById('mail-form');
+const modal = document.querySelector('[data-modal]')
 const mailButton = document.getElementById('mail-button');
+const closeButton = document.querySelector('.close-button');
+const modalMessage = document.getElementById('modal-message');
+
+function openModal(message) {
+    modalMessage.innerHTML = message;
+    modal.showModal();
+}
+
+closeButton.addEventListener('click', () => {
+    modal.close()
+});
 
 mailForm.addEventListener('submit', async (event) => {
   event.preventDefault();
@@ -230,7 +247,7 @@ mailForm.addEventListener('submit', async (event) => {
 		}
 	};
 
-    const response = await fetch(`https://api.airtable.com/v0/${baseId}/${table}`, {
+    const response = await fetch(`https://api.airtable.com/${baseId}/${table}`, {
       method: 'POST',
       headers: {
         'Authorization': `Bearer ${apiKeyAirtable}`,
@@ -246,9 +263,11 @@ mailForm.addEventListener('submit', async (event) => {
     }
 
     const result = await response.json();
+    openModal(`<img src="/img/success.svg" alt="success" /><h2>¡Gracias!</h2><h3>Su mail ha sido registrado exitosamente.</h3>`);
     console.log('Datos enviados exitosamente a Airtable:', result);
 
   	} catch (error) {
+        openModal('<img src="/img/error.svg" alt="error" /><h2>Error</h2><h3>Hubo un problema al registrar su mail.</h3><h3 class="bolder">Por favor, intente nuevamente.</h3>');
     	console.error("Error al enviar datos a Airtable:", error);
   }
 });

diff --git a/services.liquid b/services.liquid
@@ -87,7 +87,6 @@ section {
 }
 
 .key_features--list li {
-    list-style: none;
     width: 40%;
     display: grid;
     gap: .5em;
@@ -123,7 +122,6 @@ section {
 }
 
 .optimize_resources--grid li {
-  list-style: none;
   display: flex;
   flex-direction: column;
   gap: 1em;
@@ -196,6 +194,11 @@ section {
   #cta_services article:nth-child(2) {
     flex-wrap: wrap;
   }
+  #key_features {
+    background-image: url('/img/features_bg_sm.svg');
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
   .allies--container {
     flex-direction: column;
     max-width: 320px;

diff --git a/usecases.liquid b/usecases.liquid
@@ -31,7 +31,7 @@ data:
 	}
 
 	#cubo-benefits { max-height: fit-content; flex-direction: column; }
-	#cubo-benefits ul { list-style: none; display: flex; gap: 2em; justify-content: center; flex-wrap: wrap; align-items: center; margin-top: 2em; }
+	#cubo-benefits ul { display: flex; gap: 2em; justify-content: center; flex-wrap: wrap; align-items: center; margin-top: 2em; }
 	#cubo-benefits ul li { display: flex; flex-direction: column; flex: 30%; height: 300px; padding: 1.5em; text-align: center; align-content: center; gap: 1em; border-radius: 5px; }
 	i { font-style: normal; font-size: 2em; }