Moved all separate scripts into central fetchPackages.js, moved the fonts to be statically hosted, fixed borders not showing correctly, fixed fetchPackages using a CORS proxy, general code cleanup in fetchPackages and fixed the logo stretching on smaller screens

Signed-off-by: Arzumify <jliwin98@danwin1210.de>

JS/mainstream(r1)-script.js

@@ -1,45 +0,0 @@
-function doCORSRequest(options, printResult) {
-    var x = new XMLHttpRequest();
-    var proxy_url = 'https://api.allorigins.win/get?url=';
-    var target_url = encodeURIComponent(options.url);
-    x.open(options.method, proxy_url + target_url);
-    x.onload = x.onerror = function() {
-        var response = JSON.parse(x.responseText);
-        printResult(
-            options.method + ' ' + options.url + '\n' +
-            x.status + ' ' + x.statusText + '\n\n' +
-            (response.contents || '')
-        );
-    };
-
-    x.send(options.data);
-}
-
-doCORSRequest({
-    method: "GET",
-    url: "https://packages.boostyconnect.com/oreonproject/oreon-lime/",
-}, function printResult(res) {
-    console.log('Response:', res);
-    //  https://packages.boostyconnect.com/Oreon-lime-(R1)/gnome-shell-oreon-theming-1-11.fc39.noarch.rpm
-    try {
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(res, "text/html");
-        const links = doc.querySelectorAll("a");
-        links.forEach((link) => {
-            const forbidden_links = ["Name", "Last modified", "Size", "Description", "Parent Directory"];
-            if (!forbidden_links.includes(link.innerHTML.trim())) {
-                const link_e = document.createElement("a");
-                const new_href = link.href.replace("/Oreon-lime-(R1)/", "/oreonproject/oreon-lime/")
-                link_e.href = new_href;
-                link_e.innerHTML = link.innerHTML;
-                link_e.className = "package";
-                link_e.target = "_blank";
-                document.getElementById("packages").appendChild(link_e);
-                console.log('Original URL:', link.href);
-                console.log('Modified URL:', new_href);
-            }
-        });
-    } catch (e) {
-        console.error('Parsing error:', e);
-    }
-});

JS/mainstream(r2)-script.js

@@ -1,45 +0,0 @@
-function doCORSRequest(options, printResult) {
-    var x = new XMLHttpRequest();
-    var proxy_url = 'https://api.allorigins.win/get?url=';
-    var target_url = encodeURIComponent(options.url);
-    x.open(options.method, proxy_url + target_url);
-    x.onload = x.onerror = function() {
-        var response = JSON.parse(x.responseText);
-        printResult(
-            options.method + ' ' + options.url + '\n' +
-            x.status + ' ' + x.statusText + '\n\n' +
-            (response.contents || '')
-        );
-    };
-
-    x.send(options.data);
-}
-
-doCORSRequest({
-    method: "GET",
-    url: "https://packages.boostyconnect.com/oreon-lime-r2/mainstream/",
-}, function printResult(res) {
-    console.log('Response:', res);
-
-    try {
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(res, "text/html");
-        const links = doc.querySelectorAll("a");
-        links.forEach((link) => {
-            const forbidden_links = ["Name", "Last modified", "Size", "Destination", "Description", "Parent Directory"];
-            if (!forbidden_links.includes(link.innerHTML)) {
-                const link_e = document.createElement("a");
-                const new_href = link.href;
-                
-                link_e.href = new_href;
-                link_e.innerHTML = link.innerHTML;
-                link_e.className = "package";
-                link_e.target = "_blank";
-                document.getElementById("packages").appendChild(link_e);
-                console.log(link.href);
-            }
-        });
-    } catch (e) {
-        console.error('Parsing error:', e);
-    }
-});

JS/security-script.js

@@ -1,45 +0,0 @@
-function doCORSRequest(options, printResult) {
-    var x = new XMLHttpRequest();
-    var proxy_url = 'https://api.allorigins.win/get?url=';
-    var target_url = encodeURIComponent(options.url);
-    x.open(options.method, proxy_url + target_url);
-    x.onload = x.onerror = function() {
-        var response = JSON.parse(x.responseText);
-        printResult(
-            options.method + ' ' + options.url + '\n' +
-            x.status + ' ' + x.statusText + '\n\n' +
-            (response.contents || '')
-        );
-    };
-
-    x.send(options.data);
-}
-
-doCORSRequest({
-    method: "GET",
-    url: "https://packages.boostyconnect.com/oreonproject/oreon-security/",
-}, function printResult(res) {
-    console.log('Response:', res);
-
-    try {
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(res, "text/html");
-        const links = doc.querySelectorAll("a");
-        links.forEach((link) => {
-            const forbidden_links = ["Name", "Last modified", "Size", "Destination", "Description", "Parent Directory"];
-            if (!forbidden_links.includes(link.innerHTML)) {
-                const link_e = document.createElement("a");
-                const new_href = link.href;
-                
-                link_e.href = new_href;
-                link_e.innerHTML = link.innerHTML;
-                link_e.className = "package";
-                link_e.target = "_blank";
-                document.getElementById("packages").appendChild(link_e);
-                console.log(link.href);
-            }
-        });
-    } catch (e) {
-        console.error('Parsing error:', e);
-    }
-});

JS/source-script.js

@@ -1,44 +0,0 @@
-function doCORSRequest(options, printResult) {
-    var x = new XMLHttpRequest();
-    var proxy_url = 'https://api.allorigins.win/get?url=';
-    var target_url = encodeURIComponent(options.url);
-    x.open(options.method, proxy_url + target_url);
-    x.onload = x.onerror = function() {
-        var response = JSON.parse(x.responseText);
-        printResult(
-            options.method + ' ' + options.url + '\n' +
-            x.status + ' ' + x.statusText + '\n\n' +
-            (response.contents || '')
-        );
-    };
-
-    x.send(options.data);
-}
-
-doCORSRequest({
-    method: "GET",
-    url: " https://packages.boostyconnect.com/oreon-lime-r2/mainstream/src/",
-}, function printResult(res) {
-    console.log('Response:', res);
-
-    try {
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(res, "text/html");
-        const links = doc.querySelectorAll("a");
-        links.forEach((link) => {
-            const forbidden_links = ["Name", "Last modified", "Size", "Destination", "Description", "Parent Directory"];
-            if (!forbidden_links.includes(link.innerHTML)) {
-                const link_e = document.createElement("a");
-                const new_href = link.href;
-                link_e.href = new_href;
-                link_e.innerHTML = link.innerHTML;
-                link_e.className = "package";
-                link_e.target = "_blank";
-                document.getElementById("packages").appendChild(link_e);
-                console.log(link.href);
-            }
-        });
-    } catch (e) {
-        console.error('Parsing error:', e);
-    }
-});

assets/css/style.css

@@ -13,7 +13,7 @@ h1, h2, a, p {
     flex-direction: row;
     align-items: center;
 }
-.dropbtn {
+.dropButton {
     background-color: rgb(63, 173, 63);
     color: white;
     padding: 16px;
@@ -21,7 +21,7 @@ h1, h2, a, p {
     border: none;
     display: none;
 }
-.dropbtn i {
+.dropButton i {
     color: black;
 }
 .dropdown {
@@ -34,7 +34,7 @@ h1, h2, a, p {
     position: absolute;
     background-color: black;
     min-width: 160px;
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
     z-index: 1;
 }
   
@@ -53,7 +53,7 @@ h1, h2, a, p {
     padding-right: 20px;
 }
   
-.dropdown:hover .dropbtn {
+.dropdown:hover .dropButton {
     background-color: grey;
 }
 .hdr a {
@@ -75,8 +75,8 @@ h1, h2, a, p {
     margin-top: 200px;
 }
 .logo {
-    width: 550px;
+    min-width: 550px;
-    height: 150px;
+    min-height: 150px;
 }
 
 .edit-cont {
@@ -92,7 +92,7 @@ h1, h2, a, p {
     flex-direction: column;
     gap: 10px;
     align-items: center;
-    border: 1.7px, solid black;
+    border: 2px solid black;
 }
 .edit-btn {
     height: 60px;
@@ -112,7 +112,7 @@ h1, h2, a, p {
     background-color: darkblue;
 }
 .package {
-    border: 1.7px solid black;
+    border: 2px solid black;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -137,7 +137,7 @@ h1, h2, a, p {
         width: 350px;
         margin-left: 20px;
     }
-    .dropbtn {
+    .dropButton {
         display: block;
     }
     .edit-cont {

assets/fonts/montserrat.css

@@ -0,0 +1,90 @@
+/* cyrillic-ext */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(montserrat-cyrillic-ext-italic.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(montserrat-cyrillic-italic.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* vietnamese */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(montserrat-vietnamese-italic.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(montserrat-latin-ext-italic.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(montserrat-latin-italic.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(montserrat-cyrillic-ext.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(montserrat-cyrillic.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* vietnamese */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(montserrat-vietnamese.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(montserrat-latin-ext.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(montserrat-latin.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

assets/js/fetchPackages.js

@@ -0,0 +1,32 @@
+async function fetchPackages(uri) {
+    let statusText = document.getElementById("statusText");
+    statusText.innerHTML = "Fetching packages, please wait...";
+    let response = await fetch(uri, {
+        method: "GET"
+    })
+    let responseText = await response.text()
+    console.log('Response:', responseText);
+    try {
+        const parsedDocument = new DOMParser().parseFromString(responseText, "text/html");
+        const linksNodeList = parsedDocument.querySelectorAll("a");
+        statusText.remove()
+        linksNodeList.forEach((link) => {
+            const linkText = link.innerHTML.trim();
+            const forbiddenLinks = ["Name", "Last modified", "Size", "Description", "Parent Directory"];
+            if (!forbiddenLinks.includes(linkText)) {
+                const packageLink = document.createElement("a");
+                const newRedirect = uri + "/" + link.href.split("/").pop();
+                packageLink.href = newRedirect;
+                packageLink.innerHTML = linkText;
+                packageLink.className = "package";
+                packageLink.target = "_blank";
+                document.getElementById("packages").appendChild(packageLink);
+                console.log('Original URL:', link.href);
+                console.log('Modified URL:', newRedirect);
+            }
+        });
+    } catch (e) {
+        console.error('Parsing error:', e);
+        statusText.innerHTML = "Failed to fetch packages. Please try again later.";
+    }
+}

index.html

@@ -3,26 +3,22 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Oreon Package Manager</title>
     <!-- CSS -->
-    <link rel="stylesheet" href="CSS/style.css">
+    <link rel="stylesheet" href="/assets/css/style.css">
-    <!-- Google fonts -->
+    <!-- Fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="stylesheet" href="/assets/fonts/montserrat.css">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <!-- font awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-
 </head>
 <body>
     <header class="hdr">
         <div class="dropdown">
-            <button class="dropbtn"><i class="fa-solid fa-caret-down"></i></button>
+            <button class="dropButton"><i class="fa-solid fa-caret-down"></i></button>
             <div class="dropdown-content">
                 <a href="https://oreonproject.org">Oreon</a>
                 <a href="https://oreonproject.org/help">Help</a>
                 <a href="https://forums.oreonproject.org/">Forum</a>
-            </nav>
             </div>
         </div> 
         <h2>BCPackage</h2>
@@ -33,24 +29,24 @@
         </nav>
     </header>
     <div class="main">
-        <center>
+        <div style="text-align: center;">
-            <img src="Assets/logo.png" alt="Oreon's logo" class="logo">
+            <img src="assets/img/logo.png" alt="Oreon's logo" class="logo">
             <h2>Oreon's package manager</h2>
             <p>BCPackage is our offical package manager and here you can <br>
             find references to all oreon packages.</p>
             <div class="edit-cont">
                 <div class="edition">
                     <h2>Oreon lime (R2)</h2>
-                    <a class="edit-btn" target="_blank" href="./oreon-lime-r2/mainstream/mainstream.html">Mainstream packages</a>
+                    <a class="edit-btn" target="_blank" href="oreonproject/oreon-lime-r2/mainstream">Mainstream packages</a>
-                    <a class="edit-btn" target="_blank" href="./oreon-lime-r2/mainstream/src/source.html">Mainstream source</a>
+                    <a class="edit-btn" target="_blank" href="oreonproject/oreon-lime-r2/src">Mainstream source</a>
                 </div>
                 <div class="edition">
                     <h2>Oreon lime (R1/R1.1)</h2>
-                    <a class="edit-btn" target="_blank" href="./oreonproject/oreon-lime/mainstream.html">Mainstream packages</a>
+                    <a class="edit-btn" target="_blank" href="oreonproject/oreon-lime/mainstream">Mainstream packages</a>
-                    <a class="edit-btn" target="_blank" href="./oreonproject/oreon-security/security.html   ">Security</a>
+                    <a class="edit-btn" target="_blank" href="oreonproject/oreon-lime/security">Security packages</a>
+                </div>
             </div>
         </div>
-        </center>
     </div>
 </body>
 </html>

oreonproject/oreon-lime-r2/mainstream/index.html

@@ -5,26 +5,22 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <!-- CSS -->
-    <link rel="stylesheet" href="../../CSS/style.css">
+    <link rel="stylesheet" href="../../../assets/css/style.css">
-    <!-- Google fonts -->
+    <!-- Fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="stylesheet" href="../../../assets/fonts/montserrat.css">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <!-- JS -->
-     <script src="../../JS/mainstream(r2)-script.js"></script>
+    <script src="../../../assets/js/fetchPackages.js"></script>
     <!-- font awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
-
 </head>
 <body>
     <header class="hdr">
         <div class="dropdown">
-            <button class="dropbtn"><i class="fa-solid fa-caret-down"></i></button>
+            <button class="dropButton"><i class="fa-solid fa-caret-down"></i></button>
             <div class="dropdown-content">
                 <a href="https://oreonproject.org">Oreon</a>
                 <a href="https://oreonproject.org/help">Help</a>
                 <a href="https://forums.oreonproject.org/">Forum</a>
-            </nav>
             </div>
         </div>
         <h2>BCPackage</h2>
@@ -35,11 +31,18 @@
         </nav>
     </header>
     <div class="main">
-        <center>
+        <div style="text-align: center;">
             <h1>Oreon lime (R2)</h1>
             <h2>Mainstream packages</h2>
+            <p id="statusText"></p>
             <div id="packages" class="packages"></div>
-        </center>
         </div>
+    </div>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            fetchPackages("https://packages.boostyconnect.com/oreon-lime-r2/mainstream")
+        });
+    </script>
 </body>
 </html>

oreonproject/oreon-lime-r2/src/index.html

@@ -5,26 +5,22 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <!-- CSS -->
-    <link rel="stylesheet" href="../../../CSS/style.css">
+    <link rel="stylesheet" href="../../../assets/css/style.css">
-    <!-- Google fonts -->
+    <!-- Fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="stylesheet" href="../../../assets/fonts/montserrat.css">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <!-- JS -->
-    <script src="../../../JS/source-script.js"></script>
+    <script src="../../../assets/js/fetchPackages.js"></script>
     <!-- font awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
-
 </head>
 <body>
     <header class="hdr">
         <div class="dropdown">
-            <button class="dropbtn"><i class="fa-solid fa-caret-down"></i></button>
+            <button class="dropButton"><i class="fa-solid fa-caret-down"></i></button>
             <div class="dropdown-content">
                 <a href="https://oreonproject.org">Oreon</a>
                 <a href="https://oreonproject.org/help">Help</a>
                 <a href="https://forums.oreonproject.org/">Forum</a>
-            </nav>
             </div>
         </div>
         <h2>BCPackage</h2>
@@ -35,10 +31,18 @@
         </nav>
     </header>
     <div class="main">
-        <center>
+        <div style="text-align: center;">
             <h1>Oreon lime (R2)</h1>
             <h2>Mainstream source packages</h2>
+            <p id="statusText"></p>
             <div id="packages" class="packages"></div>
-        </center>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            fetchPackages("https://packages.boostyconnect.com/oreon-lime-r2/mainstream/src")
+        });
+    </script>
 </body>
 </html>

oreonproject/oreon-lime/mainstream/index.html

@@ -5,26 +5,22 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <!-- CSS -->
-    <link rel="stylesheet" href="../../CSS/style.css">
+    <link rel="stylesheet" href="../../../assets/css/style.css">
-    <!-- Google fonts -->
+    <!-- Fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="stylesheet" href="../../../assets/fonts/montserrat.css">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <!-- JS -->
-     <script src="../../JS/mainstream(r1)-script.js"></script>
+    <script src="../../../assets/js/fetchPackages.js"></script>
     <!-- font awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
-
 </head>
 <body>
     <header class="hdr">
         <div class="dropdown">
-            <button class="dropbtn"><i class="fa-solid fa-caret-down"></i></button>
+            <button class="dropButton"><i class="fa-solid fa-caret-down"></i></button>
             <div class="dropdown-content">
                 <a href="https://oreonproject.org">Oreon</a>
                 <a href="https://oreonproject.org/help">Help</a>
                 <a href="https://forums.oreonproject.org/">Forum</a>
-            </nav>
             </div>
         </div>
         <h2>BCPackage</h2>
@@ -36,11 +32,18 @@
     </header>
  
     <div class="main">
-        <center>
+        <div style="text-align: center;">
             <h1>Oreon lime (R1)</h1>
             <h2>Mainstream packages</h2>
+            <p id="statusText"></p>
             <div id="packages" class="packages"></div>
-        </center>
         </div>
+    </div>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            fetchPackages("https://packages.boostyconnect.com/oreonproject/oreon-lime")
+        });
+    </script>
 </body>
 </html>

oreonproject/oreon-lime/security/index.html

@@ -5,26 +5,22 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <!-- CSS -->
-    <link rel="stylesheet" href="../../CSS/style.css">
+    <link rel="stylesheet" href="../../../assets/css/style.css">
-    <!-- Google fonts -->
+    <!-- Fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="stylesheet" href="../../../assets/fonts/montserrat.css">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <!-- JS -->
-     <script src="../../JS/security-script.js"></script>
+    <script src="../../../assets/js/fetchPackages.js"></script>
     <!-- font awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
-
 </head>
 <body>
     <header class="hdr">
         <div class="dropdown">
-            <button class="dropbtn"><i class="fa-solid fa-caret-down"></i></button>
+            <button class="dropButton"><i class="fa-solid fa-caret-down"></i></button>
             <div class="dropdown-content">
                 <a href="https://oreonproject.org">Oreon</a>
                 <a href="https://oreonproject.org/help">Help</a>
                 <a href="https://forums.oreonproject.org/">Forum</a>
-            </nav>
             </div>
         </div> 
         <h2>BCPackage</h2>
@@ -35,11 +31,18 @@
         </nav>
     </header>
     <div class="main">
-        <center>
+        <div style="text-align: center;">
             <h1>Oreon lime (R1)</h1>
             <h2>Security packages</h2>
+            <p id="statusText"></p>
             <div id="packages" class="packages"></div>
-        </center>
         </div>
+    </div>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            fetchPackages("https://packages.boostyconnect.com/oreonproject/oreon-security")
+        });
+    </script>
 </body>
 </html>