From 76ccc3466db08231f7451e2be5b6e7481775e5d3 Mon Sep 17 00:00:00 2001
From: martin emanuel <martin.maldonado01@globant.com>
Date: Thu, 19 Jun 2025 11:14:19 -0300
Subject: [PATCH 1/6] Fix: Improve installation page logic and UX

- Add proper error handling and user feedback
- Fix OS detection logic
- Improve command generation
- Add user guidance messages
- Fix variable declarations and scope issues
- Add better clipboard operation handling
---
 index.html | 508 +++++++++++++++++++++++++++++++----------------------
 1 file changed, 302 insertions(+), 206 deletions(-)
diff --git a/index.html b/index.html
index 06cf195..5d472e3 100644
--- a/index.html
+++ b/index.html
@@ -1,229 +1,325 @@
 <!DOCTYPE html>
-<html><head>
-<title>anyzig</title>
-<style>
-
-* { margin:0; padding:0; }
-body {
-    margin-top:30px;
-    font-family: courier;
-    text-align:center;
-    background:#333;
-    color:#ccc;
-}
-a { color: #eee }
-h1 { color:#eee }
-h2 { color:#eee }
-section {
-    display: grid;
-    justify-items: center;
-    align-items: center;
-}
-code {
-    padding: 0.75em;
-    font-family: courier new;
-    text-align: left;
-    word-wrap: break-word;
-    background: #111;
-}
-
-#InstallDiv {
-    margin:10px;
-}
-
-.CopyButton {
-    padding:5px;
-}
-
-.FilterButton {
-  display:inline-block;
-  width: 60px;
-  height: 15px;
-  line-height: 15px;
-  text-align:center;
-  padding: 10px;
-  border-radius: 2px;
-  border: 0;
-  background:#ccc;
-  font-size: 15px;
-  color: #000;
-  cursor:default;
-  user-select:none;
-  font-weight:bold;
-}
-.FilterButton:hover {
-  background:#aaa;
-}
-.FilterButtonEnabled {
-  background:#4287f5;
-}
-.FilterButtonEnabled:hover {
-  background:#3277e5;
-}
-
-.Commands {
-  display: grid;
-  gap: 1em;
-  grid-auto-rows: 5em;
-}
-.Commands div {
-  display: grid;
-  gap: 3em;
-  grid-template-columns: 10em 45em;
-}
-
-</style>
-<script>
-
-function get(id) { return document.getElementById(id); }
-
-
-function copyToClipboard(text) {
-  navigator.clipboard.writeText(text)
-    .then(() => {
-      console.log('Text copied to clipboard');
-    })
-    .catch(err => {
-      console.error('Could not copy text: ', err);
-    });
-}
-
-  function copyCommand(id) {
-      pre = get('command' + id);
-      copyToClipboard(pre.innerHTML)
-  }
-
-  function generateCommandHtml(ids, cmd) {
-      const id = ids.next_id;
-      ids.next_id++;
-      return (
-          '<div>' +
-              '<button class="CopyButton" onclick="copyCommand(' + id + ')">Copy</button> ' +
-              '<code style="display:inline-block" id="command' + id + '">' + cmd + '</code>' +
-          '</div>'
-      );
-  }
-
-  function updateButton(button, enable) {
-      if (enable) {
+<html>
+  <head>
+    <title>anyzig</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+      }
+      body {
+        margin-top: 30px;
+        font-family: courier;
+        text-align: center;
+        background: #333;
+        color: #ccc;
+      }
+      a {
+        color: #eee;
+      }
+      h1 {
+        color: #eee;
+      }
+      h2 {
+        color: #eee;
+      }
+      section {
+        display: grid;
+        justify-items: center;
+        align-items: center;
+      }
+      code {
+        padding: 0.75em;
+        font-family: courier new;
+        text-align: left;
+        word-wrap: break-word;
+        background: #111;
+      }
+
+      #InstallDiv {
+        margin: 10px;
+      }
+
+      .CopyButton {
+        padding: 5px;
+      }
+
+      .FilterButton {
+        display: inline-block;
+        width: 60px;
+        height: 15px;
+        line-height: 15px;
+        text-align: center;
+        padding: 10px;
+        border-radius: 2px;
+        border: 0;
+        background: #ccc;
+        font-size: 15px;
+        color: #000;
+        cursor: default;
+        user-select: none;
+        font-weight: bold;
+      }
+      .FilterButton:hover {
+        background: #aaa;
+      }
+      .FilterButtonEnabled {
+        background: #4287f5;
+      }
+      .FilterButtonEnabled:hover {
+        background: #3277e5;
+      }
+
+      .Commands {
+        display: grid;
+        gap: 1em;
+        grid-auto-rows: 5em;
+      }
+      .Commands div {
+        display: grid;
+        gap: 3em;
+        grid-template-columns: 10em 45em;
+      }
+    </style>
+    <script>
+      "use strict";
+      
+      const OS_LINUX = 0;
+      const OS_MACOS = 1;
+      const OS_WINDOWS = 2;
+      const ARCH_X86_64 = 0;
+      const ARCH_AARCH64 = 1;
+
+      let current_os = -1;
+      let current_arch = -1;
+      let include_curl = true;
+      let include_wget = true;
+      let include_powershell = false;
+
+      function showNotification(message, isError = false) {
+        const notification = document.createElement('div');
+        notification.textContent = message;
+        notification.style.cssText = `
+          position: fixed;
+          top: 20px;
+          right: 20px;
+          padding: 10px 20px;
+          border-radius: 4px;
+          background-color: ${isError ? '#ff4444' : '#44ff44'};
+          color: white;
+          z-index: 1000;
+        `;
+        document.body.appendChild(notification);
+        setTimeout(() => notification.remove(), 3000);
+      }
+
+      function get(id) {
+        return document.getElementById(id);
+      }
+
+      function copyToClipboard(text) {
+        navigator.clipboard
+          .writeText(text)
+          .then(() => {
+            showNotification("Command copied to clipboard!");
+          })
+          .catch((err) => {
+            showNotification("Failed to copy command: " + err.message, true);
+            console.error("Could not copy text: ", err);
+          });
+      }
+
+      function copyCommand(id) {
+        const pre = get("command" + id);
+        if (pre) {
+          copyToClipboard(pre.innerHTML);
+        } else {
+          showNotification("Command element not found", true);
+        }
+      }
+
+      function generateCommandHtml(ids, cmd) {
+        const id = ids.next_id;
+        ids.next_id++;
+        return (
+          "<div>" +
+          '<button class="CopyButton" onclick="copyCommand(' +
+          id +
+          ')">Copy</button> ' +
+          '<code style="display:inline-block" id="command' +
+          id +
+          '">' +
+          cmd +
+          "</code>" +
+          "</div>"
+        );
+      }
+
+      function updateButton(button, enable) {
+        if (!button) return;
+        if (enable) {
           button.classList.add("FilterButtonEnabled");
-      } else {
+        } else {
           button.classList.remove("FilterButtonEnabled");
+        }
       }
-  }
-
-  function toggleOs(os) {
-      if (current_os == os) {
-          current_os = -1;
-      } else {
-          current_os = os;
-      }
-      updateButton(get("ButtonLinux"), current_os == OS_LINUX);
-      updateButton(get("ButtonMacos"), current_os == OS_MACOS);
-      updateButton(get("ButtonWindows"), current_os == OS_WINDOWS);
-      updateInstallDiv();
-  }
-  function toggleArch(arch) {
-      if (current_arch == arch) {
+
+      function toggleOs(os) {
+        // Reset arch when changing OS to prevent invalid combinations
+        if (current_os !== os) {
           current_arch = -1;
-      } else {
-          current_arch = arch;
-      }
-      updateButton(get("ButtonX86_64"), current_arch == ARCH_X86_64);
-      updateButton(get("ButtonAArch64"), current_arch == ARCH_AARCH64);
-      updateInstallDiv();
-  }
-
-  const OS_LINUX = 0;
-  const OS_MACOS = 1;
-  const OS_WINDOWS = 2;
-  const ARCH_X86_64 = 0;
-  const ARCH_AARCH64 = 1;
-
-  var current_os = -1;
-  var current_arch = -1;
-  var include_curl = true;
-  var include_wget = true;
-  var include_powershell = false;
-
-  function updateInstallDiv() {
-      var arch_os = null;
-      var archive_ext = null;
-      include_powershell = false;
-      if (current_os == OS_LINUX) {
+          updateButton(get("ButtonX86_64"), false);
+          updateButton(get("ButtonAArch64"), false);
+        }
+        
+        current_os = current_os === os ? -1 : os;
+        
+        updateButton(get("ButtonLinux"), current_os === OS_LINUX);
+        updateButton(get("ButtonMacos"), current_os === OS_MACOS);
+        updateButton(get("ButtonWindows"), current_os === OS_WINDOWS);
+        updateInstallDiv();
+      }
+
+      function toggleArch(arch) {
+        current_arch = current_arch === arch ? -1 : arch;
+        updateButton(get("ButtonX86_64"), current_arch === ARCH_X86_64);
+        updateButton(get("ButtonAArch64"), current_arch === ARCH_AARCH64);
+        updateInstallDiv();
+      }
+
+      function getInstallCommand(archive_url, archive_ext) {
+        if (archive_ext === ".zip") {
+          return `Invoke-WebRequest -Uri "${archive_url}" -OutFile "anyzig.zip" && Expand-Archive -Path "anyzig.zip" -DestinationPath "anyzig"`;
+        } else {
+          return `curl -L "${archive_url}" | tar xz`;
+        }
+      }
+
+      function updateInstallDiv() {
+        let arch_os = null;
+        let archive_ext = null;
+        include_powershell = false;
+        
+        if (current_os === OS_LINUX) {
           archive_ext = ".tar.gz";
-          if (current_arch == ARCH_X86_64) {
-              arch_os = "x86_64-linux";
-          } else if (current_arch == ARCH_AARCH64) {
-              arch_os = "aarch64-linux";
+          if (current_arch === ARCH_X86_64) {
+            arch_os = "x86_64-linux";
+          } else if (current_arch === ARCH_AARCH64) {
+            arch_os = "aarch64-linux";
           }
-      } else if (current_os == OS_MACOS) {
+        } else if (current_os === OS_MACOS) {
           archive_ext = ".tar.gz";
-          if (current_arch == ARCH_X86_64) {
-              arch_os = "x86_64-macos";
-          } else if (current_arch == ARCH_AARCH64) {
-              arch_os = "aarch64-macos";
+          if (current_arch === ARCH_X86_64) {
+            arch_os = "x86_64-macos";
+          } else if (current_arch === ARCH_AARCH64) {
+            arch_os = "aarch64-macos";
           }
-      } else if (current_os == OS_WINDOWS) {
+        } else if (current_os === OS_WINDOWS) {
           archive_ext = ".zip";
           include_powershell = true;
-          if (current_arch == ARCH_X86_64) {
-              arch_os = "x86_64-windows";
-          } else if (current_arch == ARCH_AARCH64) {
-              arch_os = "aarch64-windows";
+          if (current_arch === ARCH_X86_64) {
+            arch_os = "x86_64-windows";
+          } else if (current_arch === ARCH_AARCH64) {
+            arch_os = "aarch64-windows";
           }
-      }
+        }
 
-      html = '';
+        let html = "";
 
-      if (arch_os != null) {
-          const basename = 'anyzig-' + arch_os + archive_ext;
-          const archive_url = 'https://github.com/marler8997/anyzig/releases/latest/download/' + basename;
-          html += '<br/><h2 style="margin:15px"><a href="' + archive_url + '">' + basename + '</a></h2>';
+        if (arch_os) {
+          const basename = "anyzig-" + arch_os + archive_ext;
+          const archive_url =
+            "https://github.com/marler8997/anyzig/releases/latest/download/" +
+            basename;
+          html +=
+            '<br/><h2 style="margin:15px"><a href="' +
+            archive_url +
+            '">' +
+            basename +
+            "</a></h2>";
 
-          html += '<br/><h2>Command Line Install:</h2>';
+          html += "<br/><h2>Command Line Install:</h2>";
           html += "<section><div class='Commands'>";
-          var ids = { next_id: 0 };
-          if (include_curl) {
-              html += generateCommandHtml(ids, 'curl -L ' + archive_url + ' | tar xz');
-          }
-          if (include_wget) {
-              html += generateCommandHtml(ids, 'wget -O - ' + archive_url + ' | tar xz');
-          }
-          if (include_powershell) {
-              html += generateCommandHtml(ids, "Invoke-WebRequest -Uri " + archive_url + " -OutFile \"anyzig-"  + arch_os + ".zip\"; Expand-Archive -Path \"anyzig-" + arch_os + ".zip\" -DestinationPath \"anyzig\"");
+          const ids = { next_id: 0 };
+
+          if (archive_ext === ".tar.gz") {
+            if (include_curl) {
+              html += generateCommandHtml(
+                ids,
+                "curl -L " + archive_url + " | tar xz"
+              );
+            }
+            if (include_wget) {
+              html += generateCommandHtml(
+                ids,
+                "wget -O - " + archive_url + " | tar xz"
+              );
+            }
+          } else if (include_powershell) {
+            html += generateCommandHtml(
+              ids,
+              getInstallCommand(archive_url, archive_ext)
+            );
           }
           html += "</div></section>";
-      }
-      get('InstallDiv').innerHTML = html;
-  }
-
-  function bodyOnload() {
-      updateInstallDiv()
-
-      let userAgent = window.navigator.userAgent;
-      console.log("userAgent '" + userAgent + "'");
-      if (userAgent.indexOf("Linux") != -1) toggleOs(OS_LINUX);
-      if (userAgent.indexOf("MacOS") != -1) toggleOs(OS_MACOS);
-      if (userAgent.indexOf("Win") != -1) toggleOs(OS_WINDOWS);
+        } else if (current_os !== -1 && current_arch === -1) {
+          html = "<br/><h2>Please select an architecture</h2>";
+        } else if (current_os === -1) {
+          html = "<br/><h2>Please select an operating system</h2>";
+        }
 
-      if (userAgent.indexOf("x64") != -1) toggleArch(ARCH_X86_64);
-  }
-
-</script>
-</head><body onload="bodyOnload()">
+        const installDiv = get("InstallDiv");
+        if (installDiv) {
+          installDiv.innerHTML = html;
+        }
+      }
 
-<h1>Install anyzig</h1>
-<div style="margin:10px">
-  <span id="ButtonLinux" class="FilterButton" onclick="toggleOs(OS_LINUX)">Linux</span>
-  <span id="ButtonMacos" class="FilterButton" onclick="toggleOs(OS_MACOS)">macOS</span>
-  <span id="ButtonWindows" class="FilterButton" onclick="toggleOs(OS_WINDOWS)">Windows</span>
-</div>
-<div style="margin:10px">
-  <span id="ButtonX86_64" class="FilterButton" onclick="toggleArch(ARCH_X86_64)">x86_64</span>
-  <span id="ButtonAArch64" class="FilterButton" onclick="toggleArch(ARCH_AARCH64)">aarch64</span>
-</div>
-<div id="InstallDiv"></div>
+      function bodyOnload() {
+        updateInstallDiv();
 
+        const userAgent = window.navigator.userAgent.toLowerCase();
+        if (userAgent.includes("linux")) toggleOs(OS_LINUX);
+        if (userAgent.includes("macintosh")) toggleOs(OS_MACOS);
+        if (userAgent.includes("windows")) toggleOs(OS_WINDOWS);
 
+        if (userAgent.includes("x64") || userAgent.includes("x86_64")) {
+          toggleArch(ARCH_X86_64);
+        } else if (userAgent.includes("aarch64") || userAgent.includes("arm64")) {
+          toggleArch(ARCH_AARCH64);
+        }
+      }
+    </script>
+  </head>
+  <body onload="bodyOnload()">
+    <h1>Install anyzig</h1>
+    <div style="margin: 10px">
+      <span id="ButtonLinux" class="FilterButton" onclick="toggleOs(OS_LINUX)"
+        >Linux</span
+      >
+      <span id="ButtonMacos" class="FilterButton" onclick="toggleOs(OS_MACOS)"
+        >macOS</span
+      >
+      <span
+        id="ButtonWindows"
+        class="FilterButton"
+        onclick="toggleOs(OS_WINDOWS)"
+        >Windows</span
+      >
+    </div>
+    <div style="margin: 10px">
+      <span
+        id="ButtonX86_64"
+        class="FilterButton"
+        onclick="toggleArch(ARCH_X86_64)"
+        >x86_64</span
+      >
+      <span
+        id="ButtonAArch64"
+        class="FilterButton"
+        onclick="toggleArch(ARCH_AARCH64)"
+        >aarch64</span
+      >
+    </div>
+    <div id="InstallDiv"></div>
+  </body>
 </html>

From 2c5f51b44324387d30d74d722e5c35d8f498e36b Mon Sep 17 00:00:00 2001
From: martin emanuel <martin.maldonado01@globant.com>
Date: Thu, 19 Jun 2025 16:12:50 -0300
Subject: [PATCH 2/6] Refactor: Improve HTML structure and CSS organization

- Extract styles to separate CSS file for better maintainability
- Add meta tags for better browser compatibility and SEO
  - charset UTF-8
  - viewport for responsive design
  - description meta tag
- Improve code organization by separating concerns
---
 index.html | 120 ++++-------------------------------------------------
 styles.css |  85 +++++++++++++++++++++++++++++++++++++
 2 files changed, 92 insertions(+), 113 deletions(-)
 create mode 100644 styles.css

diff --git a/index.html b/index.html
index 5d472e3..02614c1 100644
--- a/index.html
+++ b/index.html
@@ -1,121 +1,15 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>anyzig</title>
-    <style>
-      * {
-        margin: 0;
-        padding: 0;
-      }
-      body {
-        margin-top: 30px;
-        font-family: courier;
-        text-align: center;
-        background: #333;
-        color: #ccc;
-      }
-      a {
-        color: #eee;
-      }
-      h1 {
-        color: #eee;
-      }
-      h2 {
-        color: #eee;
-      }
-      section {
-        display: grid;
-        justify-items: center;
-        align-items: center;
-      }
-      code {
-        padding: 0.75em;
-        font-family: courier new;
-        text-align: left;
-        word-wrap: break-word;
-        background: #111;
-      }
-
-      #InstallDiv {
-        margin: 10px;
-      }
-
-      .CopyButton {
-        padding: 5px;
-      }
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="description" content="Install anyzig, a Zig package manager.">
+<link rel="stylesheet" href="styles.css">
+<title>anyzig</title>
+<script>
 
-      .FilterButton {
-        display: inline-block;
-        width: 60px;
-        height: 15px;
-        line-height: 15px;
-        text-align: center;
-        padding: 10px;
-        border-radius: 2px;
-        border: 0;
-        background: #ccc;
-        font-size: 15px;
-        color: #000;
-        cursor: default;
-        user-select: none;
-        font-weight: bold;
-      }
-      .FilterButton:hover {
-        background: #aaa;
-      }
-      .FilterButtonEnabled {
-        background: #4287f5;
-      }
-      .FilterButtonEnabled:hover {
-        background: #3277e5;
-      }
+function get(id) { return document.getElementById(id); }
 
-      .Commands {
-        display: grid;
-        gap: 1em;
-        grid-auto-rows: 5em;
-      }
-      .Commands div {
-        display: grid;
-        gap: 3em;
-        grid-template-columns: 10em 45em;
-      }
-    </style>
-    <script>
-      "use strict";
-      
-      const OS_LINUX = 0;
-      const OS_MACOS = 1;
-      const OS_WINDOWS = 2;
-      const ARCH_X86_64 = 0;
-      const ARCH_AARCH64 = 1;
-
-      let current_os = -1;
-      let current_arch = -1;
-      let include_curl = true;
-      let include_wget = true;
-      let include_powershell = false;
-
-      function showNotification(message, isError = false) {
-        const notification = document.createElement('div');
-        notification.textContent = message;
-        notification.style.cssText = `
-          position: fixed;
-          top: 20px;
-          right: 20px;
-          padding: 10px 20px;
-          border-radius: 4px;
-          background-color: ${isError ? '#ff4444' : '#44ff44'};
-          color: white;
-          z-index: 1000;
-        `;
-        document.body.appendChild(notification);
-        setTimeout(() => notification.remove(), 3000);
-      }
-
-      function get(id) {
-        return document.getElementById(id);
-      }
 
       function copyToClipboard(text) {
         navigator.clipboard
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..f503180
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,85 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    margin-top: 30px;
+    font-family: courier;
+    text-align: center;
+    background: #333;
+    color: #ccc;
+}
+
+a {
+    color: #eee
+}
+
+h1 {
+    color: #eee
+}
+
+h2 {
+    color: #eee
+}
+
+section {
+    display: grid;
+    justify-items: center;
+    align-items: center;
+}
+
+code {
+    padding: 0.75em;
+    font-family: courier new;
+    text-align: left;
+    word-wrap: break-word;
+    background: #111;
+}
+
+#InstallDiv {
+    margin: 10px;
+}
+
+.CopyButton {
+    padding: 5px;
+}
+.FilterButton {
+    display: inline-block;
+    width: 60px;
+    height: 15px;
+    line-height: 15px;
+    text-align: center;
+    padding: 10px;
+    border-radius: 2px;
+    border: 0;
+    background: #ccc;
+    font-size: 15px;
+    color: #000;
+    cursor: default;
+    user-select: none;
+    font-weight: bold;
+}
+
+.FilterButton:hover {
+    background: #aaa;
+}
+
+.FilterButtonEnabled {
+    background: #4287f5;
+}
+
+.FilterButtonEnabled:hover {
+    background: #3277e5;
+}
+
+.Commands {
+    display: grid;
+    gap: 1em;
+    grid-auto-rows: 5em;
+}
+
+.Commands div {
+    display: grid;
+    gap: 3em;
+    grid-template-columns: 10em 45em; }
\ No newline at end of file

From 8e33ce758b3764d6cc0f4cf70d925f0657ef9303 Mon Sep 17 00:00:00 2001
From: martin emanuel <martin.maldonado01@globant.com>
Date: Thu, 19 Jun 2025 16:17:16 -0300
Subject: [PATCH 3/6] decouple styles

---
 analisis.txt | 74 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 utils.js     | 16 ++++++++++++
 2 files changed, 90 insertions(+)
 create mode 100644 analisis.txt
 create mode 100644 utils.js

diff --git a/analisis.txt b/analisis.txt
new file mode 100644
index 0000000..8cbe28f
--- /dev/null
+++ b/analisis.txt
@@ -0,0 +1,74 @@
+2. User Agent Detection Issues:
+
+```javascript
+if (userAgent.indexOf("MacOS") != -1) toggleOs(OS_MACOS);
+```
+Variable Declaration Issues:
+html = ""; // Using undeclared variable
+var ids = { next_id: 0 }; // Mixing var with let declarations
+
+The 'html' variable is used without being declared (missing let/const), which could cause issues in strict mode.
+
+4. Command Generation Logic Gap:
+
+```javascript
+if (include_curl) {
+  html += generateCommandHtml(ids, "curl -L " + archive_url + " | tar xz");
+}
+```
+The tar command is always included for both .tar.gz and .zip files, which is incorrect for Windows users. The command should be different based on archive_ext.
+
+5. State Management Issue:
+
+```javascript
+function toggleOs(os) {
+  if (current_os == os) {
+    current_os = -1;
+  } else {
+    current_os = os;
+  }
+  // ...
+}
+```
+
+```javascript
+function copyToClipboard(text) {
+  navigator.clipboard.writeText(text)
+    .then(() => {
+      console.log("Text copied to clipboard");
+    })
+    .catch((err) => {
+      console.error("Could not copy text: ", err);
+    });
+}
+```
+The error is only logged to console - users get no feedback if the copy operation fails.
+
+Pre Variable Scope Issue:
+function copyCommand(id) {
+  pre = get("command" + id); // Undeclared variable
+  copyToClipboard(pre.innerHTML);
+}
+
+The 'pre' variable is used without being declared, which could cause issues in strict mode.
+
+
+- Added proper error handling and user feedback with the new showNotification function
+
+- Fixed OS detection by using proper user agent strings (macintosh instead of MacOS)
+
+- Added strict mode and proper variable declarations
+
+- Improved command generation with separate getInstallCommand function
+
+- Added proper state management for OS/arch selection
+
+- Added user guidance messages when no OS or arch is selected
+
+- Added better error handling for clipboard operations
+
+- Improved ARM64 detection
+
+- Added null checks for DOM elements
+
+- Removed the problematic empty alert
diff --git a/utils.js b/utils.js
new file mode 100644
index 0000000..be93c1f
--- /dev/null
+++ b/utils.js
@@ -0,0 +1,16 @@
+function showNotification(message, isError = false) {
+  const notification = document.createElement("div");
+  notification.textContent = message;
+  notification.style.cssText = `
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      padding: 10px 20px;
+      border-radius: 4px;
+      background-color: ${isError ? "#ff4444" : "#44ff44"};
+      color: white;
+      z-index: 1000;
+    `;
+  document.body.appendChild(notification);
+  setTimeout(() => notification.remove(), 3000);
+}

From be5777e12b6222c658845c4195b8ee09499b5bf8 Mon Sep 17 00:00:00 2001
From: martin emanuel <martin.maldonado01@globant.com>
Date: Thu, 19 Jun 2025 16:24:42 -0300
Subject: [PATCH 4/6] format using default prettier extension

---
 index.html | 29 ++++++++++--------
 styles.css | 87 +++++++++++++++++++++++++++---------------------------
 2 files changed, 60 insertions(+), 56 deletions(-)

diff --git a/index.html b/index.html
index 02614c1..5f3f3fc 100644
--- a/index.html
+++ b/index.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <html>
   <head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<meta name="description" content="Install anyzig, a Zig package manager.">
-<link rel="stylesheet" href="styles.css">
-<title>anyzig</title>
-<script>
-
-function get(id) { return document.getElementById(id); }
-
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Install anyzig, a Zig package manager." />
+    <link rel="stylesheet" href="styles.css" />
+    <title>anyzig</title>
+    <script>
+      function get(id) {
+        return document.getElementById(id);
+      }
 
       function copyToClipboard(text) {
         navigator.clipboard
@@ -65,9 +65,9 @@
           updateButton(get("ButtonX86_64"), false);
           updateButton(get("ButtonAArch64"), false);
         }
-        
+
         current_os = current_os === os ? -1 : os;
-        
+
         updateButton(get("ButtonLinux"), current_os === OS_LINUX);
         updateButton(get("ButtonMacos"), current_os === OS_MACOS);
         updateButton(get("ButtonWindows"), current_os === OS_WINDOWS);
@@ -93,7 +93,7 @@
         let arch_os = null;
         let archive_ext = null;
         include_powershell = false;
-        
+
         if (current_os === OS_LINUX) {
           archive_ext = ".tar.gz";
           if (current_arch === ARCH_X86_64) {
@@ -178,7 +178,10 @@
 
         if (userAgent.includes("x64") || userAgent.includes("x86_64")) {
           toggleArch(ARCH_X86_64);
-        } else if (userAgent.includes("aarch64") || userAgent.includes("arm64")) {
+        } else if (
+          userAgent.includes("aarch64") ||
+          userAgent.includes("arm64")
+        ) {
           toggleArch(ARCH_AARCH64);
         }
       }
diff --git a/styles.css b/styles.css
index f503180..e74e030 100644
--- a/styles.css
+++ b/styles.css
@@ -1,85 +1,86 @@
 * {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 }
 
 body {
-    margin-top: 30px;
-    font-family: courier;
-    text-align: center;
-    background: #333;
-    color: #ccc;
+  margin-top: 30px;
+  font-family: courier;
+  text-align: center;
+  background: #333;
+  color: #ccc;
 }
 
 a {
-    color: #eee
+  color: #eee;
 }
 
 h1 {
-    color: #eee
+  color: #eee;
 }
 
 h2 {
-    color: #eee
+  color: #eee;
 }
 
 section {
-    display: grid;
-    justify-items: center;
-    align-items: center;
+  display: grid;
+  justify-items: center;
+  align-items: center;
 }
 
 code {
-    padding: 0.75em;
-    font-family: courier new;
-    text-align: left;
-    word-wrap: break-word;
-    background: #111;
+  padding: 0.75em;
+  font-family: courier new;
+  text-align: left;
+  word-wrap: break-word;
+  background: #111;
 }
 
 #InstallDiv {
-    margin: 10px;
+  margin: 10px;
 }
 
 .CopyButton {
-    padding: 5px;
+  padding: 5px;
 }
 .FilterButton {
-    display: inline-block;
-    width: 60px;
-    height: 15px;
-    line-height: 15px;
-    text-align: center;
-    padding: 10px;
-    border-radius: 2px;
-    border: 0;
-    background: #ccc;
-    font-size: 15px;
-    color: #000;
-    cursor: default;
-    user-select: none;
-    font-weight: bold;
+  display: inline-block;
+  width: 60px;
+  height: 15px;
+  line-height: 15px;
+  text-align: center;
+  padding: 10px;
+  border-radius: 2px;
+  border: 0;
+  background: #ccc;
+  font-size: 15px;
+  color: #000;
+  cursor: default;
+  user-select: none;
+  font-weight: bold;
 }
 
 .FilterButton:hover {
-    background: #aaa;
+  background: #aaa;
 }
 
 .FilterButtonEnabled {
-    background: #4287f5;
+  background: #4287f5;
 }
 
 .FilterButtonEnabled:hover {
-    background: #3277e5;
+  background: #3277e5;
 }
 
 .Commands {
-    display: grid;
-    gap: 1em;
-    grid-auto-rows: 5em;
+  display: grid;
+  gap: 1em;
+  grid-auto-rows: 5em;
 }
 
 .Commands div {
-    display: grid;
-    gap: 3em;
-    grid-template-columns: 10em 45em; }
\ No newline at end of file
+  display: grid;
+  gap: 3em;
+  grid-template-columns: 10em 45em;
+}

From 7994da4c003cba4753e234fcc1bb86b655d99a2c Mon Sep 17 00:00:00 2001
From: martin emanuel <martin.maldonado01@globant.com>
Date: Thu, 19 Jun 2025 16:50:52 -0300
Subject: [PATCH 5/6] Feat: Add notification system and improve error handling

- Add showNotification function with success/error states
- Add input validation for OS and architecture selection
- Improve error handling in clipboard operations
- Add proper type checking and validation
- Add visual feedback for user actions
---
 index.html | 63 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 62 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 5f3f3fc..6c5e185 100644
--- a/index.html
+++ b/index.html
@@ -7,11 +7,53 @@
     <link rel="stylesheet" href="styles.css" />
     <title>anyzig</title>
     <script>
+      "use strict";
+
+      const OS_LINUX = 0;
+      const OS_MACOS = 1;
+      const OS_WINDOWS = 2;
+      const ARCH_X86_64 = 0;
+      const ARCH_AARCH64 = 1;
+
+      let current_os = -1;
+      let current_arch = -1;
+      let include_curl = true;
+      let include_wget = true;
+      let include_powershell = false;
+
+      function showNotification(message, isError = false) {
+        const notification = document.createElement("div");
+        notification.textContent = message;
+        notification.style.cssText = `
+          position: fixed;
+          top: 20px;
+          right: 20px;
+          padding: 10px 20px;
+          border-radius: 4px;
+          background-color: ${isError ? "#ff4444" : "#ff99bb"};
+          color: white;
+          z-index: 1000;
+          transition: opacity 0.3s ease-in-out;
+          box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+        `;
+        document.body.appendChild(notification);
+
+        setTimeout(() => {
+          notification.style.opacity = "0";
+          setTimeout(() => notification.remove(), 300);
+        }, 2700);
+      }
+
       function get(id) {
         return document.getElementById(id);
       }
 
       function copyToClipboard(text) {
+        if (!text) {
+          showNotification("Nothing to copy", true);
+          return;
+        }
+
         navigator.clipboard
           .writeText(text)
           .then(() => {
@@ -50,7 +92,10 @@
       }
 
       function updateButton(button, enable) {
-        if (!button) return;
+        if (!button) {
+          console.warn("Button element not found");
+          return;
+        }
         if (enable) {
           button.classList.add("FilterButtonEnabled");
         } else {
@@ -59,6 +104,14 @@
       }
 
       function toggleOs(os) {
+        if (
+          typeof os !== "number" ||
+          ![OS_LINUX, OS_MACOS, OS_WINDOWS, -1].includes(os)
+        ) {
+          showNotification("Invalid operating system selected", true);
+          return;
+        }
+
         // Reset arch when changing OS to prevent invalid combinations
         if (current_os !== os) {
           current_arch = -1;
@@ -75,6 +128,14 @@
       }
 
       function toggleArch(arch) {
+        if (
+          typeof arch !== "number" ||
+          ![ARCH_X86_64, ARCH_AARCH64, -1].includes(arch)
+        ) {
+          showNotification("Invalid architecture selected", true);
+          return;
+        }
+
         current_arch = current_arch === arch ? -1 : arch;
         updateButton(get("ButtonX86_64"), current_arch === ARCH_X86_64);
         updateButton(get("ButtonAArch64"), current_arch === ARCH_AARCH64);

From eb86fc1a75a89a4fdf922e994ddf9ac69856be8c Mon Sep 17 00:00:00 2001
From: martin emanuel <martin.maldonado01@globant.com>
Date: Thu, 19 Jun 2025 16:57:32 -0300
Subject: [PATCH 6/6] fix: delete unused draft .text file

---
 analisis.txt | 74 ----------------------------------------------------
 utils.js     | 16 ------------
 2 files changed, 90 deletions(-)
 delete mode 100644 analisis.txt
 delete mode 100644 utils.js

diff --git a/analisis.txt b/analisis.txt
deleted file mode 100644
index 8cbe28f..0000000
--- a/analisis.txt
+++ /dev/null
@@ -1,74 +0,0 @@
-2. User Agent Detection Issues:
-
-```javascript
-if (userAgent.indexOf("MacOS") != -1) toggleOs(OS_MACOS);
-```
-Variable Declaration Issues:
-html = ""; // Using undeclared variable
-var ids = { next_id: 0 }; // Mixing var with let declarations
-
-The 'html' variable is used without being declared (missing let/const), which could cause issues in strict mode.
-
-4. Command Generation Logic Gap:
-
-```javascript
-if (include_curl) {
-  html += generateCommandHtml(ids, "curl -L " + archive_url + " | tar xz");
-}
-```
-The tar command is always included for both .tar.gz and .zip files, which is incorrect for Windows users. The command should be different based on archive_ext.
-
-5. State Management Issue:
-
-```javascript
-function toggleOs(os) {
-  if (current_os == os) {
-    current_os = -1;
-  } else {
-    current_os = os;
-  }
-  // ...
-}
-```
-
-```javascript
-function copyToClipboard(text) {
-  navigator.clipboard.writeText(text)
-    .then(() => {
-      console.log("Text copied to clipboard");
-    })
-    .catch((err) => {
-      console.error("Could not copy text: ", err);
-    });
-}
-```
-The error is only logged to console - users get no feedback if the copy operation fails.
-
-Pre Variable Scope Issue:
-function copyCommand(id) {
-  pre = get("command" + id); // Undeclared variable
-  copyToClipboard(pre.innerHTML);
-}
-
-The 'pre' variable is used without being declared, which could cause issues in strict mode.
-
-
-- Added proper error handling and user feedback with the new showNotification function
-
-- Fixed OS detection by using proper user agent strings (macintosh instead of MacOS)
-
-- Added strict mode and proper variable declarations
-
-- Improved command generation with separate getInstallCommand function
-
-- Added proper state management for OS/arch selection
-
-- Added user guidance messages when no OS or arch is selected
-
-- Added better error handling for clipboard operations
-
-- Improved ARM64 detection
-
-- Added null checks for DOM elements
-
-- Removed the problematic empty alert
diff --git a/utils.js b/utils.js
deleted file mode 100644
index be93c1f..0000000
--- a/utils.js
+++ /dev/null
@@ -1,16 +0,0 @@
-function showNotification(message, isError = false) {
-  const notification = document.createElement("div");
-  notification.textContent = message;
-  notification.style.cssText = `
-      position: fixed;
-      top: 20px;
-      right: 20px;
-      padding: 10px 20px;
-      border-radius: 4px;
-      background-color: ${isError ? "#ff4444" : "#44ff44"};
-      color: white;
-      z-index: 1000;
-    `;
-  document.body.appendChild(notification);
-  setTimeout(() => notification.remove(), 3000);
-}
