From b24daac16b74d8ffb6086d90619135813716e52a Mon Sep 17 00:00:00 2001
From: SrShadowy <43967231+SrShadowy@users.noreply.github.com>
Date: Tue, 17 Sep 2024 01:22:06 -0300
Subject: [PATCH 1/6] Download page

Why not download page using markdown and api of github?
---
 pages/download/index.html            | 81 ++++++++++++++++++++++++++++
 resources/stylesheets/download.css   | 51 ++++++++++++++++++
 resources/templates/generic-nav.html |  2 +-
 3 files changed, 133 insertions(+), 1 deletion(-)
 create mode 100644 pages/download/index.html
 create mode 100644 resources/stylesheets/download.css
diff --git a/pages/download/index.html b/pages/download/index.html
new file mode 100644
index 00000000..a6108b88
--- /dev/null
+++ b/pages/download/index.html
@@ -0,0 +1,81 @@
+<head>
+    <script src="/resources/scripts/htmlimporter.js"></script>
+    <script>
+        HTMLImporter.import("/resources/templates/generic-head.html");
+    </script>
+    <link rel="stylesheet" href="/resources/stylesheets/download.css" />
+</head>
+
+<body>
+    <script>HTMLImporter.import("/resources/templates/generic-nav.html");</script>
+    <h1>Latest Updates on GitHub - Lime3DS</h1>
+    <div id="release" class="release"></div>
+
+    <div class="navigation">
+        <button id="prev" onclick="navigate(-1)" disabled>Previous</button>
+        <button id="next" onclick="navigate(1)" disabled>Next</button>
+    </div>
+
+    <script>
+        const apiURL = "https://api.github.com/repos/Lime3DS/Lime3DS/releases";
+        let releases = [];
+        let currentIndex = 0;
+
+        document.addEventListener('DOMContentLoaded', () => {
+            fetchReleases();
+        });
+
+        async function fetchReleases() {
+            try {
+                const response = await fetch(apiURL);
+                releases = await response.json();
+                if (releases.length) {
+                    showRelease(currentIndex);
+                    updateNavigationButtons();
+                }
+            } catch (error) {
+                console.error("Error fetching releases:", error);
+            }
+        }
+
+        function showRelease(index) {
+            const releaseDiv = document.getElementById("release");
+            const release = releases[index];
+            const classMap = {
+                windows: "windows",
+                linux: "linux",
+                mac: "mac",
+                android: "android"
+            };
+
+            const assetList = release.assets
+                .map(asset => {
+                    const className = Object.keys(classMap).find(key => asset.name.includes(key));
+                    return className ? `<li><a href="${asset.browser_download_url}" class="button ${classMap[className]}">${asset.name}</a></li>` : '';
+                })
+                .join("");
+
+            releaseDiv.innerHTML = `
+                <h4>Download:</h4>
+                <ul>${assetList}</ul>
+                <h3>Changelog: ${release.name}</h3>
+                <div>${marked(release.body || "No release notes available.")}</div>
+            `;
+        }
+
+        function navigate(direction) {
+            currentIndex = Math.min(Math.max(0, currentIndex + direction), releases.length - 1);
+            showRelease(currentIndex);
+            updateNavigationButtons();
+        }
+
+        function updateNavigationButtons() {
+            document.getElementById('prev').disabled = currentIndex === 0;
+            document.getElementById('next').disabled = currentIndex === releases.length - 1;
+        }
+    </script>
+
+    <script async src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.1/marked.min.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/resources/stylesheets/download.css b/resources/stylesheets/download.css
new file mode 100644
index 00000000..c01db4fe
--- /dev/null
+++ b/resources/stylesheets/download.css
@@ -0,0 +1,51 @@
+.button {
+    display: inline-block;
+    padding: 15px 30px;
+    margin: 10px;
+    border-radius: 5px;
+    color: white;
+    text-decoration: none;
+    font-size: 16px;
+    transition: background-color 0.3s;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.windows {
+    background-color: #0078D7;
+}
+
+.linux {
+    background-color: #FCC624;
+    color: #333;
+}
+
+.mac {
+    background-color: #A4C8E1;
+}
+
+.android {
+    background-color: #A4C639;
+}
+
+.button:hover {
+    filter: brightness(90%);
+}
+
+.navigation {
+    margin-top: 20px;
+}
+
+#release {
+    margin-top: 30px;
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+button:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+}
\ No newline at end of file
diff --git a/resources/templates/generic-nav.html b/resources/templates/generic-nav.html
index a031b1e4..0ea5f8b6 100644
--- a/resources/templates/generic-nav.html
+++ b/resources/templates/generic-nav.html
@@ -6,7 +6,7 @@
     </span>
 
     <div id="link_tray">
-        <a href="https://github.com/Lime3DS/Lime3DS/releases">Releases</a> |
+        <a href="/pages/download">Download</a> |
         <a href="https://github.com/Lime3DS/Lime3DS">GitHub</a> |
         <span class="desktop-only">
             <a href="https://lime3ds.github.io/pages/compatibility">Compatibility</a> |

From 519cbbcdfd4492e250848f3de759cb9c068f759c Mon Sep 17 00:00:00 2001
From: SrShadowy <43967231+SrShadowy@users.noreply.github.com>
Date: Tue, 17 Sep 2024 02:08:55 -0300
Subject: [PATCH 2/6] Add footer and div content

---
 pages/download/index.html | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/pages/download/index.html b/pages/download/index.html
index a6108b88..1f29e014 100644
--- a/pages/download/index.html
+++ b/pages/download/index.html
@@ -8,12 +8,17 @@
 
 <body>
     <script>HTMLImporter.import("/resources/templates/generic-nav.html");</script>
-    <h1>Latest Updates on GitHub - Lime3DS</h1>
-    <div id="release" class="release"></div>
 
-    <div class="navigation">
-        <button id="prev" onclick="navigate(-1)" disabled>Previous</button>
-        <button id="next" onclick="navigate(1)" disabled>Next</button>
+    <div id="content">
+        <h1>Latest Updates on GitHub - Lime3DS</h1>
+        <div id="release" class="release"></div>
+
+        <div class="navigation">
+            <button id="prev" onclick="navigate(-1)" disabled>Next</button>
+            <button id="next" onclick="navigate(1)" disabled>Previous</button>
+        </div>
+
+        <script>HTMLImporter.import("/resources/templates/generic-footer.html");</script>
     </div>
 
     <script>
@@ -58,7 +63,8 @@ <h1>Latest Updates on GitHub - Lime3DS</h1>
             releaseDiv.innerHTML = `
                 <h4>Download:</h4>
                 <ul>${assetList}</ul>
-                <h3>Changelog: ${release.name}</h3>
+                <h2>Changelog:</h2>
+                <h3>${release.name}</h3>
                 <div>${marked(release.body || "No release notes available.")}</div>
             `;
         }

From 22131049e760f64b0167107808a52175e62af77c Mon Sep 17 00:00:00 2001
From: SrShadowy <43967231+SrShadowy@users.noreply.github.com>
Date: Tue, 17 Sep 2024 18:18:28 -0300
Subject: [PATCH 3/6] add flatpak buttons

---
 pages/download/index.html | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/pages/download/index.html b/pages/download/index.html
index 1f29e014..93f47f76 100644
--- a/pages/download/index.html
+++ b/pages/download/index.html
@@ -12,27 +12,23 @@
     <div id="content">
         <h1>Latest Updates on GitHub - Lime3DS</h1>
         <div id="release" class="release"></div>
-
         <div class="navigation">
             <button id="prev" onclick="navigate(-1)" disabled>Next</button>
             <button id="next" onclick="navigate(1)" disabled>Previous</button>
         </div>
-
+        
         <script>HTMLImporter.import("/resources/templates/generic-footer.html");</script>
     </div>
 
     <script>
-        const apiURL = "https://api.github.com/repos/Lime3DS/Lime3DS/releases";
         let releases = [];
         let currentIndex = 0;
-
         document.addEventListener('DOMContentLoaded', () => {
             fetchReleases();
         });
-
         async function fetchReleases() {
             try {
-                const response = await fetch(apiURL);
+                const response = await fetch("https://api.github.com/repos/Lime3DS/Lime3DS/releases");
                 releases = await response.json();
                 if (releases.length) {
                     showRelease(currentIndex);
@@ -62,10 +58,20 @@ <h1>Latest Updates on GitHub - Lime3DS</h1>
 
             releaseDiv.innerHTML = `
                 <h4>Download:</h4>
-                <ul>${assetList}</ul>
+                <ul>
+                    ${assetList}
+                    <li>
+                        <p>We are also on Flathub:</p>
+                        <a href="https://flathub.org/apps/io.github.lime3ds.Lime3DS" rel="nofollow">
+                            <img width="180" alt="Download on Flathub" src="https://camo.githubusercontent.com/5e88d7b1628407d9c67f8d85ab66e676a61f6c7e0f6d6c35418bbe0ef13d8ec0/68747470733a2f2f646c2e666c61746875622e6f72672f6173736574732f6261646765732f666c61746875622d62616467652d656e2e706e67" data-canonical-src="https://dl.flathub.org/assets/badges/flathub-badge-en.png" style="max-width: 100%;">
+                        </a>
+                    </li>
+                </ul>
                 <h2>Changelog:</h2>
                 <h3>${release.name}</h3>
-                <div>${marked(release.body || "No release notes available.")}</div>
+                <div>
+                    ${marked(release.body || "No release notes available.")}
+                </div>
             `;
         }
 

From a0473590619e029a4b9398f49a08fa0ec82ae66c Mon Sep 17 00:00:00 2001
From: SrShadowy <43967231+SrShadowy@users.noreply.github.com>
Date: Mon, 23 Sep 2024 20:31:27 -0300
Subject: [PATCH 4/6] Update pages/download/index.html

Co-authored-by: OpenSauce <opensauce04@gmail.com>
---
 pages/download/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/download/index.html b/pages/download/index.html
index 93f47f76..a70bd955 100644
--- a/pages/download/index.html
+++ b/pages/download/index.html
@@ -10,7 +10,7 @@
     <script>HTMLImporter.import("/resources/templates/generic-nav.html");</script>
 
     <div id="content">
-        <h1>Latest Updates on GitHub - Lime3DS</h1>
+        <h1>Latest Lime3DS Downloads</h1>
         <div id="release" class="release"></div>
         <div class="navigation">
             <button id="prev" onclick="navigate(-1)" disabled>Next</button>

From b22f544d027d2285e9cab19a709d66e6970bcc5a Mon Sep 17 00:00:00 2001
From: SrShadowy <43967231+SrShadowy@users.noreply.github.com>
Date: Mon, 23 Sep 2024 20:31:43 -0300
Subject: [PATCH 5/6] Update pages/download/index.html

Co-authored-by: OpenSauce <opensauce04@gmail.com>
---
 pages/download/index.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pages/download/index.html b/pages/download/index.html
index a70bd955..71db4cde 100644
--- a/pages/download/index.html
+++ b/pages/download/index.html
@@ -61,7 +61,6 @@ <h4>Download:</h4>
                 <ul>
                     ${assetList}
                     <li>
-                        <p>We are also on Flathub:</p>
                         <a href="https://flathub.org/apps/io.github.lime3ds.Lime3DS" rel="nofollow">
                             <img width="180" alt="Download on Flathub" src="https://camo.githubusercontent.com/5e88d7b1628407d9c67f8d85ab66e676a61f6c7e0f6d6c35418bbe0ef13d8ec0/68747470733a2f2f646c2e666c61746875622e6f72672f6173736574732f6261646765732f666c61746875622d62616467652d656e2e706e67" data-canonical-src="https://dl.flathub.org/assets/badges/flathub-badge-en.png" style="max-width: 100%;">
                         </a>

From dc0523037c818bcae19b0495f0d95f489bb00709 Mon Sep 17 00:00:00 2001
From: SrShadowy <43967231+SrShadowy@users.noreply.github.com>
Date: Wed, 25 Sep 2024 16:27:21 -0300
Subject: [PATCH 6/6] Buttons and layout

This code is not CLEAR! please read with attention

on const testing for design test with block and image for icons system

if u turn to false, back to original wihout greater changes on buttons.
---
 pages/download/index.html          | 164 ++++++++++++++++++++++++-----
 resources/stylesheets/download.css |  82 +++++++++++++--
 2 files changed, 213 insertions(+), 33 deletions(-)

diff --git a/pages/download/index.html b/pages/download/index.html
index 71db4cde..e775d1cc 100644
--- a/pages/download/index.html
+++ b/pages/download/index.html
@@ -11,21 +11,34 @@
 
     <div id="content">
         <h1>Latest Lime3DS Downloads</h1>
-        <div id="release" class="release"></div>
+        <div id="release" class="release">
+
+        </div>
+        <div id="others" class="">
+
+        </div>
+
+        <div id="changelog">
+
+        </div>
+
         <div class="navigation">
             <button id="prev" onclick="navigate(-1)" disabled>Next</button>
             <button id="next" onclick="navigate(1)" disabled>Previous</button>
         </div>
-        
+
         <script>HTMLImporter.import("/resources/templates/generic-footer.html");</script>
     </div>
 
     <script>
+        const testing = false; // change to change for buttons block
+
         let releases = [];
         let currentIndex = 0;
         document.addEventListener('DOMContentLoaded', () => {
             fetchReleases();
         });
+
         async function fetchReleases() {
             try {
                 const response = await fetch("https://api.github.com/repos/Lime3DS/Lime3DS/releases");
@@ -39,38 +52,130 @@ <h1>Latest Lime3DS Downloads</h1>
             }
         }
 
+        function detectSystem() {
+            const userAgent = navigator.userAgent;
+            if (userAgent.includes('Android')) return 'android';
+            if (userAgent.includes('Windows')) return 'windows';
+            if (userAgent.includes('Linux x86_64')) return 'linux'; // only linux can be android too, x11 catch all desktop but wayland back in firefox? add arm version too?
+            if (userAgent.includes('Macintosh')) return 'mac';
+
+            return 'all';
+        }
+
         function showRelease(index) {
             const releaseDiv = document.getElementById("release");
+            const othersDiv = document.getElementById("others");
+            const changelogDiv = document.getElementById("changelog");
             const release = releases[index];
+            const system = detectSystem();
             const classMap = {
-                windows: "windows",
-                linux: "linux",
-                mac: "mac",
-                android: "android"
+                windows: ["windows", "https://img.icons8.com/color/96/windows-11.png"],
+                linux: ["linux", "https://img.icons8.com/color/96/linux--v1.png"],
+                mac: ["mac", "https://img.icons8.com/color/96/mac-os-logo.png"],
+                android: ["android", "https://img.icons8.com/color/96/android-os.png"]
             };
 
-            const assetList = release.assets
-                .map(asset => {
-                    const className = Object.keys(classMap).find(key => asset.name.includes(key));
-                    return className ? `<li><a href="${asset.browser_download_url}" class="button ${classMap[className]}">${asset.name}</a></li>` : '';
-                })
-                .join("");
-
-            releaseDiv.innerHTML = `
-                <h4>Download:</h4>
-                <ul>
-                    ${assetList}
+            releaseDiv.innerHTML = '';
+            let others = '';
+
+
+            release.assets.forEach(asset => {
+                const className = Object.keys(classMap).find(key => asset.name.toLowerCase().includes(key));
+                if (className) {
+                    let assetHTML = '';
+
+                    let splited = asset.name.split('-');
+                    let btnName = '';
+
+                    if (splited.length > 3) {
+                        let part1 = splited[2] || '';
+                        let part2 = splited[3] ? splited[3].split('.')[0] : '';
+                        btnName = `${part1} ${part2}`;
+                    }
+
+                    if (testing) {
+                        assetHTML = `
+                        <button class="${classMap[className][0]}_ btn">
+                            <a href="https://flathub.org/apps/io.github.lime3ds.Lime3DS" rel="nofollow">
+                                <img width="96" src=${classMap[className][1]} >
+                                <p>${btnName}</p>
+                            </a>
+                        </button>       
+                    `
+                    } else {
+                        assetHTML = `<li><a href="${asset.browser_download_url}" class="button ${classMap[className][0]}">${btnName}</a></li>`;
+                    }
+
+                    if (className === system && (asset.name.toLowerCase().includes('-msvc.') || asset.name.toLowerCase().includes('.apk'))) {
+                        releaseDiv.innerHTML += assetHTML;
+                    } else {
+                        others += assetHTML;
+                    }
+                }
+            });
+
+
+            if (system === 'linux') {
+
+                if (testing) {
+                    releaseDiv.innerHTML += `
+                    <button class="linux_ btn">
+                    <a href="https://flathub.org/apps/io.github.lime3ds.Lime3DS" rel="nofollow">
+                        <img width="96" alt="Download on Flathub"
+                            src="https://camo.githubusercontent.com/5e88d7b1628407d9c67f8d85ab66e676a61f6c7e0f6d6c35418bbe0ef13d8ec0/68747470733a2f2f646c2e666c61746875622e6f72672f6173736574732f6261646765732f666c61746875622d62616467652d656e2e706e67"
+                            style="max-width: 100%;">
+                    </a>
+                </button>`;
+
+                } else {
+                    // the old way
+                    releaseDiv.innerHTML += `
+                        <li>
+                        <a href="https://flathub.org/apps/io.github.lime3ds.Lime3DS" rel="nofollow">
+                            <img width="180" alt="Download on Flathub" src="https://camo.githubusercontent.com/5e88d7b1628407d9c67f8d85ab66e676a61f6c7e0f6d6c35418bbe0ef13d8ec0/68747470733a2f2f646c2e666c61746875622e6f72672f6173736574732f6261646765732f666c61746875622d62616467652d656e2e706e67" style="max-width: 100%;">
+                        </a>
+                        </li> `;
+                }
+
+
+            } else {
+
+                /*wtf hahahaha break the line */
+                if (testing) {
+                    others += `
+                <button id="" class="linux_ btn">
+                    <a href="https://flathub.org/apps/io.github.lime3ds.Lime3DS" rel="nofollow">
+                        <img width="96" alt="Download on Flathub"
+                            src="https://camo.githubusercontent.com/5e88d7b1628407d9c67f8d85ab66e676a61f6c7e0f6d6c35418bbe0ef13d8ec0/68747470733a2f2f646c2e666c61746875622e6f72672f6173736574732f6261646765732f666c61746875622d62616467652d656e2e706e67"
+                            style="max-width: 100%;">
+                    </a>
+                </button>`;
+                } else {
+                    others += `
                     <li>
                         <a href="https://flathub.org/apps/io.github.lime3ds.Lime3DS" rel="nofollow">
-                            <img width="180" alt="Download on Flathub" src="https://camo.githubusercontent.com/5e88d7b1628407d9c67f8d85ab66e676a61f6c7e0f6d6c35418bbe0ef13d8ec0/68747470733a2f2f646c2e666c61746875622e6f72672f6173736574732f6261646765732f666c61746875622d62616467652d656e2e706e67" data-canonical-src="https://dl.flathub.org/assets/badges/flathub-badge-en.png" style="max-width: 100%;">
+                            <img width="180" alt="Download on Flathub" src="https://camo.githubusercontent.com/5e88d7b1628407d9c67f8d85ab66e676a61f6c7e0f6d6c35418bbe0ef13d8ec0/68747470733a2f2f646c2e666c61746875622e6f72672f6173736574732f6261646765732f666c61746875622d62616467652d656e2e706e67" style="max-width: 100%;">
                         </a>
                     </li>
-                </ul>
-                <h2>Changelog:</h2>
-                <h3>${release.name}</h3>
-                <div>
-                    ${marked(release.body || "No release notes available.")}
-                </div>
+              
+                `;
+                }
+
+
+            }
+
+
+            othersDiv.innerHTML = `<h2 onclick="topicRelease(this)" class="mark hide">Other options:</h2><summary id="topic" style="display:none">${others}</summary>`;
+
+
+            // make a separator better
+            changelogDiv.innerHTML = `
+                <h2 onclick="topicRelease(this)" class='hide mark'>Changelog: ${release.name}</h2>
+                <summary id="topic" style='display:none'>
+                    <div>
+                        ${marked(release.body || "No release notes available.")}
+                    </div>
+                </summary>
             `;
         }
 
@@ -84,9 +189,14 @@ <h3>${release.name}</h3>
             document.getElementById('prev').disabled = currentIndex === 0;
             document.getElementById('next').disabled = currentIndex === releases.length - 1;
         }
+
+        function topicRelease(element) {
+            element.classList.toggle('hide');
+            const felement = element.parentElement
+            document.querySelector(`#${felement.id} #topic`).style.display = element.classList.contains('hide') ? 'none' : 'block';
+
+        }
     </script>
 
     <script async src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.1/marked.min.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+</body>
\ No newline at end of file
diff --git a/resources/stylesheets/download.css b/resources/stylesheets/download.css
index c01db4fe..f15377e5 100644
--- a/resources/stylesheets/download.css
+++ b/resources/stylesheets/download.css
@@ -8,23 +8,63 @@
     font-size: 16px;
     transition: background-color 0.3s;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    width: 140px;
 }
 
 .windows {
     background-color: #0078D7;
 }
 
+.btn{
+    width: 200px;
+    height: 150px;
+    margin: 40px;
+    border-radius: 5px;
+    border: 1px solid black;
+}
+
+.btn:hover{
+    scale: 105%;
+}
+
+
+a{
+    text-decoration: none;
+}
+
+.android_{
+    background-color: rgb(23 57 35);
+}
+
+.windows_{
+    background-color: #38384B;
+}
+
+.linux_{
+    background-color: rgb(90 60 25);
+}
+
+.mac__
+{
+    background-color: #363940;
+}
+
+.windows_:hover{
+
+    background-color: #28283B;
+}
+
 .linux {
-    background-color: #FCC624;
-    color: #333;
+    background-color: rgb(90 60 25);
 }
 
 .mac {
-    background-color: #A4C8E1;
+    background-color: #363940;
 }
 
 .android {
-    background-color: #A4C639;
+    background-color: rgb(25, 85, 40);
 }
 
 .button:hover {
@@ -40,12 +80,42 @@
 }
 
 button {
+
     padding: 10px 20px;
     font-size: 14px;
     cursor: pointer;
 }
 
 button:disabled {
-    background-color: #ccc;
+    background-color: #969696;
     cursor: not-allowed;
-}
\ No newline at end of file
+}
+
+
+/*
+if u know batter form to do this :D make it pls
+*/
+.mark{
+    position: relative;
+    user-select: none;
+    cursor: pointer;
+    margin-left: 30px;
+}
+
+.mark::before {
+    content: "";
+    position: absolute;
+    margin-top: 10px;
+    margin-left: -30px;
+    border-style: solid;
+    border-width: 10px 0 10px 15px;
+    border-color: transparent transparent transparent white;
+    transition: 200ms; /* animation XD */
+}
+
+.hide.mark::before{
+    transform: rotatez(0deg);
+}
+.mark::before{
+    transform: rotatez(60deg);
+}
