Merge pull request #1 from proyectosingenieriauninorte/UX-change

Ux change

Author: augustosalazar

app/index.html

@@ -21,20 +21,16 @@
   <header>
     <div class="header-container">
       <h1><a href="index.html">BixCalculator</a></h1> <!--Direcciona a la pagina Principal-->
-      <nav>
-        <ul> <!--Main menu-->
-          <li><a href="#aboutus">Sobre nosotros</a></li>
-        </ul>
-      </nav>
+    
     </div>
   </header>
   <!--Web main presentation-->
   <section class="presentation" id="presentation">
     <div class="presentation-paragraph">
       <h2>Calculadora de Binarios</h2>
+      <h3>Ingresa solo números binarios (1s y 0s) en los campos</h3>
     </div>
     <div class="input-container">
-      <div id="alertaBinaria" class="alerta-binaria">Ingresa solo números binarios (1s y 0s) en este campo.</div>
       <!-- Primera línea -->
       <label for="linea1">Primer Numero</label>
       <input type="text" id="linea1" placeholder="Escribe algo..." oninput="validarBinario(this)">
@@ -61,10 +57,10 @@ <h2>Calculadora de Binarios</h2>
         <div id="pasosDiv">
         </div>
         <!-- Botón Anterior -->
-        <button onclick="mostrarAnterior()">Anterior</button>
+        <button id="calcularButton" onclick="mostrarAnterior()">Anterior</button>
 
         <!-- Botón Siguiente -->
-        <button onclick="mostrarSiguiente()">Siguiente</button>
+        <button id="calcularButton" onclick="mostrarSiguiente()">Siguiente</button>
       </div>
 
       <script>
@@ -135,69 +131,19 @@ <h2>Calculadora de Binarios</h2>
       </script>
     </div>
 
-  </section>
-
-
-
-  <!--About us section-->
-  <section class="aboutus" id="aboutus">
-    <h2>Sobre Nosotros</h2>
-    <br>
-    <h3>BixCalculator</h3>
-    <br>
-    <br>
-    <br>
-    <p>En BixCalculator, visualizamos un mundo donde la comprensión de los fundamentos de la informática es accesible y
-      emocionante para todos. Nos esforzamos por ser líderes en la revolución educativa digital
-      ,proporcionando una calculadora de binarios innovadora que no solo simplifica los conceptos complejos, sino que
-      también inspira la curiosidad y el descubrimiento. Nuestra visión es empoderar a las mentes del futuro,
-      transformando la educación en una experiencia interactiva y cautivadora, donde cada usuario pueda dominar los
-      secretos del lenguaje binario y desbloquear un mundo de posibilidades tecnológicas.
-    </p>
-    <br>
-    <br>
-    <p>
-    </p>
-    <br>
-    <br>
-    <br>
-    <h2>Nuestro equipo</h2>
-    <br>
-    <br>
     <footer>
-      <div class="footer-container">
-        <div class="footer-content">
-          <h3>Contacto</h3>
-          <p>Dirección: 123 Calle Principal, Ciudad</p>
-          <p>Email: info@bixcalculator.com</p>
-          <p>Teléfono: (123) 456-7890</p>
-          <ul>
-            <li><a href="https://github.com/proyectosuninorte/BIXA.git" target="_blank">Respositorio Github</a></li>
-
-          </ul>
-        </div>
+      <p>
+          This is an open-source project by
+          <a id="repo-link" href="#" target="_blank">Proyectos Ingenieria Uninorte</a>.
+      </p>
+      <p>Developed by:</p>
+      <div id="contributors"></div>
+  </footer>
 
-        <div class="footer-content">
-          <h3>Enlaces</h3>
-          <ul>
-
-            <li><a href="#">Sobre nosotros</a></li>
-            <li><a href="#">Contacto</a></li>
-          </ul>
-        </div>
+  </section>
 
-        <div class="footer-content">
-          <h3>Redes Sociales</h3>
-          <ul>
-            <li><a href="#" target="_blank">Facebook</a></li>
-            <li><a href="#" target="_blank">Twitter</a></li>
-            <li><a href="#" target="_blank">Instagram</a></li>
-          </ul>
-        </div>
-      </div>
+ 
 
-      <p class="copyright">BixCalculator &copy; Todos los derechos reservados</p>
-    </footer>
 
 </body>
 

app/main.css

@@ -164,29 +164,35 @@ select {
 }
 
 
+/* Contributors section */
+#contributors img {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin: 5px;
+    cursor: pointer;
+  }
 
 
-/*Footer*/
-
-footer {
-    background-color: #1eae42;
-    color: white;
-    padding: 20px 0;
-}
-
-.footer-container {
-    display: flex;
-    justify-content: space-around;
-}
-
-.footer-content {
-    margin-bottom: 20px;
-}
-
-.footer-content h3 {
-    font-size: 1.2em;
-    margin-bottom: 10px;
-}
+  * Top Right Link */
+  .top-link {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    text-decoration: none;
+    color: #007bff;
+    font-weight: bold;
+    background: #fff;
+    padding: 5px 10px;
+    border: 1px solid #007bff;
+    border-radius: 3px;
+    transition: background-color 0.3s;
+  }
+  
+  .top-link:hover {
+    background-color: #007bff;
+    color: #fff;
+  }
 
 ul {
     list-style: none;
@@ -206,11 +212,6 @@ a:hover {
     text-decoration: underline;
 }
 
-.copyright {
-    margin-top: 20px;
-    text-align: center;
-}
-
 
 @media screen and (max-width: 768px) {
     #linea1, #linea2, #opciones {

app/main.js

@@ -1171,3 +1171,61 @@ function validarBinario(input) {
     }
 }
 
+///////////////////////
+// Contributor Loader
+///////////////////////
+document.addEventListener("DOMContentLoaded", async function () {
+    // Use the UnCodeGenerator repository for the footer
+    const repoName = "proyectosingenieriauninorte/bixa";
+    const repoUrl = `https://github.com/${repoName}`;
+    const contributorsUrl = `https://api.github.com/repos/${repoName}/contributors`;
+  
+    // Set the repository link in the footer
+    document.getElementById("repo-link").href = repoUrl;
+    document.getElementById("repo-link").textContent = repoUrl.replace("https://github.com/", "");
+  
+    try {
+      const response = await fetch(contributorsUrl);
+      if (!response.ok) throw new Error("Failed to fetch contributors");
+  
+      const contributors = await response.json();
+      const contributorsDiv = document.getElementById("contributors");
+  
+      if (contributors.length === 0) {
+        contributorsDiv.innerHTML = "<p>No contributors found.</p>";
+        return;
+      }
+  
+      contributors.forEach(user => {
+        const contributorElement = document.createElement("div");
+        contributorElement.style.display = "inline-block";
+        contributorElement.style.margin = "5px";
+        contributorElement.style.textAlign = "center";
+  
+        // Create contributor avatar image
+        const img = document.createElement("img");
+        img.src = user.avatar_url;
+        img.alt = user.login;
+        img.title = user.login;
+        img.width = 40;
+        img.height = 40;
+        img.style.borderRadius = "50%";
+        img.style.cursor = "pointer";
+        img.onclick = () => window.open(user.html_url, "_blank");
+  
+        // Contributor username
+        const name = document.createElement("p");
+        name.textContent = user.login;
+        name.style.fontSize = "12px";
+  
+        contributorElement.appendChild(img);
+        contributorElement.appendChild(name);
+        contributorsDiv.appendChild(contributorElement);
+      });
+    } catch (error) {
+      console.error("Error fetching contributors:", error);
+      document.getElementById("contributors").innerHTML =
+        "<p style='color: red;'>❌ Failed to load contributors.</p>";
+    }
+  });
+