Lowered main buttons

Added titles in footer containers

index.html

@@ -25,11 +25,9 @@
 			<p id="intro_1">Los modelos de lenguaje y las representaciones de palabras obtenidas con aprendizaje automatizado han demostrado contener estereotipos discriminatorios. Aquí presentamos un conjunto de herramientas de inspección: EDIA (Estereotipos y Discriminación en Inteligencia Artificial). El objetivo de este proyecto es diseñar y evaluar una metodología que permita a comunidades de ciencias sociales y personas expertas de dominio en Latinoamérica, explorar sesgos y estereotipos discriminatorios presentes en word embeddings y modelos de lenguaje. También les permite definir el tipo de sesgo a explorar y acercarse a un enfoque interseccional desde dos dimensiones binarias de análisis (por ejemplo, <i>mujer-hombre</i> vs <i>gordo-flaco</i>).</p>
 			<p id="intro_2">EDIA contiene diversas herramientas que sirven para detectar e inspeccionar sesgos en sistemas de procesamiento de lenguaje natural basados en modelos de lenguaje o word embeddings. Contamos con modelos en español e inglés para trabajar y explorar los sesgos en diferentes idiomas a requerimiento de las personas usuarias. Cada una de las siguientes herramientas son funciones distintas que nos acercan a un aspecto particular de la problemática del sesgo y a la vez, nos permiten entender partes diferentes pero complementarias del mismo.</p>
 		</div>
-		<div id="main-buttons-flex-container">
-			<a class="button" id="hf" target="_blank" href="https://huggingface.co/spaces/vialibre/edia_full_es">Pruebalo en HuggingFace🤗!</a>
-			<a class="button" id="ccad" target="_blank" href="#">Pruebalo en CCAD!</a>
-			<a class="button" id="tutorial" target="_blank" href="#">Tutorial de la herramienta</a>
-		</div>
+
+		<a class="button" id="tutorial" target="_blank" href="https://screencast-o-matic.com/watch/c3XlIKVUeMN">Video presentación de EDIA</a>
+		
 		<div id="cards-container">
 
 			<div class="card" id="word-bias-card">
@@ -79,10 +77,21 @@
 		</div>
 
 		<footer>
+
 			<div id="image-flex-container">
-				<a target="_blank" href="https://www.vialibre.org.ar/">
-					<img id="viaLibre-logo" src="images/viaLibre.jpg" alt="Banner Fundación ViaLibre">
-				</a>
+
+				<div id="main-buttons-flex-container">
+					<h4 id="backup-title">Backups de EDIA:</h4>
+					<a class="button" id="hf" target="_blank" href="https://huggingface.co/spaces/vialibre/edia_full_es">Pruébalo en HuggingFace🤗!</a>
+					<a class="button disabled" id="ccad" target="_blank" href="#">Pruébalo en nuestra universidad!</a>
+				</div>
+
+				<div id="organization-container">
+					<h4 id="organization-title">Desarollado por:</h4>
+					<a target="_blank" href="https://www.vialibre.org.ar/">
+						<img id="viaLibre-logo" src="images/viaLibre.jpg" alt="Banner Fundación ViaLibre">
+					</a>
+				</div>
 
 				<div id="our-pages-flex-container">
 					<h4 id="our-pages-title">Puedes encontrar a EDIA en:</h4>

javascript/index.js

@@ -24,16 +24,6 @@ function translatePage() {
     document.getElementById("intro_1").innerHTML = data['introduction_1']
     document.getElementById("intro_2").innerHTML = data['introduction_2']
 
-    // Main buttons
-
-        // Labels
-    document.getElementById("hf").innerHTML = data['hf_btn']
-    document.getElementById("ccad").innerHTML = data['ccad_btn']
-    document.getElementById("tutorial").innerHTML = data['tutorial_btn']
-
-        // Buttons href
-    document.getElementById("hf").href = links['hf_stable']
-
     // Cards
 
         // Word bias
@@ -81,7 +71,25 @@ function translatePage() {
     document.getElementById("data-bias-manual").href = links['dataBias']['manual']
 
     // Footer
+
+        // h4 container's title
+    document.getElementById("backup-title").innerHTML = data['backup-title']
+    document.getElementById("organization-title").innerHTML = data['organization-title']
     document.getElementById("our-pages-title").innerHTML = data['our-pages-title']
+    
+
+        // Main buttons
+
+            // Labels
+    document.getElementById("hf").innerHTML = data['hf_btn']
+    document.getElementById("ccad").innerHTML = data['ccad_btn']
+    document.getElementById("tutorial").innerHTML = data['tutorial_btn']
+    
+            // Buttons href
+    document.getElementById("hf").href = links['hf_stable']
+    document.getElementById("ccad").href = links['ccad_stable']
+
+        // Cookies info
     document.getElementById("footer-description").innerHTML = data['footer']
 }
 

languages/en.js

@@ -24,9 +24,11 @@ const english_data = {
             "tutorial": "Tutorial: Words data",
             "manual": "Handbook"
         },
+        "backup-title": "EDIA backups:",
+        "organization-title": "Developed by:",
         "our-pages-title": "Where you can find EDIA:",
         "footer": "IMPORTANT CLARIFICATIONS: Queries made when using this software are automatically registered in our system. We declare that the information collected is anonymous, confidential and that it will only be used for research purposes. <i>To perform the explorations of the dimensions of analysis, such as gender, we need to simplify it to a binary phenomenon; We understand that it is an oversimplification, it is a first approximation and we are aware of this limitation while representing complex phenomena within social constructs.</i>",
         "hf_btn": "Try it out in HuggingFace🤗!",
-        "ccad_btn": "Try it out in CCAD!",
+        "ccad_btn": "Try it out in our University!",
         "tutorial_btn": "EDIA video presentation"
     }

languages/es.js

@@ -24,9 +24,11 @@ const spanish_data = {
             "tutorial": "Tutorial: Datos de las palabras",
             "manual": "Manual"
         },
+        "backup-title": "Backups de EDIA:",
+        "organization-title": "Desarollado por:",
         "our-pages-title": "Puedes encontrar a EDIA en:",
         "footer": "ACLARACIONES IMPORTANTES: Las consultas realizadas al usar este software quedan registradas automáticamente en nuestro sistema. Declaramos que la información recabada es anónima, confidencial y que el uso de la misma sólo será para fines de investigación. <i>Para realizar las exploraciones de las dimensiones de análisis, como género, necesitamos simplificarlo a un fenómeno binario; entendemos que es una sobresimplificación, se trata de una primera aproximación a la familia de soluciones de mitigación que sabemos requiere de una mayor complejidad para tratar los fenómenos de sesgo dentro de los constructos sociales.</i>",
-        "hf_btn": "Pruebalo en HuggingFace🤗!",
-        "ccad_btn": "Pruebalo en CCAD!",
+        "hf_btn": "Pruébalo en HuggingFace🤗!",
+        "ccad_btn": "Pruébalo en nuestra universidad!",
         "tutorial_btn": "Video presentación de EDIA"
     }

links/en.js

@@ -1,7 +1,7 @@
 const english_links = {
         "hf_stable": "https://huggingface.co/spaces/vialibre/edia_full_en",
         "ccad_stable": "#",
-        "main_tutorial": "#",
+        "main_tutorial": "https://screencast-o-matic.com/watch/c3XlIKVUeMN",
         "wordBias": {
             "demo": "https://huggingface.co/spaces/vialibre/edia_we_en",
             "tutorial": "#",

links/es.js

@@ -1,7 +1,7 @@
 const spanish_links = {
         "hf_stable": "https://huggingface.co/spaces/vialibre/edia_full_es",
         "ccad_stable": "#",
-        "main_tutorial": "#",
+        "main_tutorial": "https://screencast-o-matic.com/watch/c3XlIKVUeMN",
         "wordBias": {
             "demo": "https://huggingface.co/spaces/vialibre/edia_we_es",
             "tutorial": "#",

style.css

@@ -68,19 +68,10 @@ a.button {
 	font-size: 18px;
 }
 
-#main-buttons-flex-container {
-	margin-top: 1.5rem;
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: space-evenly;
-	align-items: baseline;
-}
-
-#main-buttons-flex-container > .button {
-	flex: 1;
-	white-space: nowrap;
-	min-width: 230px;
+a.button#tutorial {
+	max-width: 230px;
+	margin: 1rem auto;
+	align-items: center;
 }
 
 #cards-container {
@@ -159,15 +150,47 @@ footer > p {
 footer > #image-flex-container {
 	display: flex;
 	flex-direction: row;
-	flex-wrap: wrap-reverse;
+	flex-wrap: wrap;
 	justify-content: center;
-	align-items: center;
+	align-items: flex-start;
 	gap: 20px 5rem;
 	margin-bottom: 2rem;
 }
 
-#our-pages-flex-container {
+#main-buttons-flex-container {
+	order: 1;
+	min-width: 260px;
+	padding-top: 3px;
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	gap: 0.7rem;
+}
+
+#main-buttons-flex-container h4 {
+	color: rgb(24, 24, 24);
+	margin: 10px 0 0 0;
+}
+
+#main-buttons-flex-container > .button {
 	min-width: 230px;
+	margin: 0;
+}
+
+#organization-container { 
+	order: 2;
+	display: flex;
+	flex-direction: column;
+}
+
+#organization-container h4 {
+	color: rgb(24, 24, 24);
+	margin: 10px 0 12px 0;
+}
+
+#our-pages-flex-container {
+	order: 3;
+	min-width: 260px;
 	display: flex;
 	flex-direction: column;
 	flex-wrap: nowrap;
@@ -214,6 +237,11 @@ footer img#hf-logo {
 
 /* Buttons Styling */
 
+.disabled {
+	pointer-events: none;
+	cursor: default;
+}
+
 button#translate {
 	padding: 0.5rem 0.75rem;
 	margin: 5px 0 0 0;
@@ -235,13 +263,15 @@ button#translate > img {
 	padding: 0.5rem 0.75rem;
 }
 
-#main-buttons-flex-container > .button:hover {
+#main-buttons-flex-container > .button:hover, 
+a.button#tutorial:hover {
 	box-shadow: -7px -7px 20px 0px #fff9,
 				-4px -4px 5px 0px #fff9,
 				7px 7px 20px 0px #0002,
 				4px 4px 5px 0px #0001;
 }
 
+
 #main-buttons-flex-container > .button#hf {
 	border-radius: 0;
 	background-color: var(--main-btn-primary);
@@ -265,7 +295,7 @@ button#translate > img {
 	border: none;
 }
 
-#main-buttons-flex-container > .button#tutorial {
+a.button#tutorial {
 	border-radius: 0;
 	background-color: var(--main-btn-secundary);
 	border: 1px solid var(--main-btn-primary);
@@ -315,10 +345,22 @@ button#translate > img {
 
 @media only screen and (max-width: 769px) {
 	footer img#viaLibre-logo {
-		max-width: 20rem;
+		max-width: 260px;
 	}
 
     button#translate  {
         width: 100%;
     }
+	
+	#main-buttons-flex-container {
+		order: 1;
+	}
+
+	#organization-container { 
+		order: 3;
+	}
+
+	#our-pages-flex-container {
+		order: 2;
+	}
 }