add download buttons

Author: underpig1

README.md

@@ -15,6 +15,11 @@ Create live, interactive wallpapers with HTML/CSS/JS for Windows 10 & 11
 
 <img src="docs/img/app.png" width="599px" />
 
+## Quickstart
+Download the latest installer for Windows 10 & 11: [**OctosSetup.exe**](https://github.com/underpig1/octos/releases/latest/download/OctosSetup.exe)
+
+Or download from the Microsoft Store: [**Microsoft Store Page**]()
+
 ## Features
 |||
 |-|-|
@@ -36,7 +41,7 @@ Easily personalize your desktop with this interactive interface. -->
 Elevate your wallpaper with the Octos API. Access music visualization data, synchronize across monitors and displays, add media controls, and so much more right on your desktop in JavaScript via the Octos API.
 
 ## [Octos Docs](https://underpig1.github.io/octos/guides/)
-It's super easy to get started making your own content for Octos. Check out the docs for a quick getting started guide.
+It's super easy to get started making your own wallpapers for Octos. Check out the docs for a quick getting started guide.
 
 ## [Octos Community](https://github.com/underpig1/octos-community/tree/master)
 Join the Octos community to share your wonderful creations with the world! It's easy to make and share HTML wallpapers with Octos.

docs/about/roadmap.md

@@ -6,4 +6,10 @@ Submit feature requests in [GitHub issues](https://github.com/underpig1/octos/is
 
 Octos 1.0 (the first official release) is officially set to release in August 2025.
 
-Stay tuned for future updates to this page after the initial rollout.
+Stay tuned for future updates to this page after the initial rollout.
+
+<hr />
+
+### Proposed feature: Octos Studio
+- A more advanced version of the Layout wallpaper in the Octos Community repo
+- Allows widgets, themes, and other ways to customize the desktop without needed to write any code

docs/guides/mod.md

@@ -9,7 +9,7 @@ MyAwesomeMod/
 ├── index.html
 ├── octos.json
 ```
-In this folder, you can include assets, JS libraries, CSS files, icons, scripts, and basically anything else that your mod needs to run.
+In this folder, you can include assets, JS libraries, CSS files, icons, scripts, and basically anything else that your mod needs to run. When you're done, you can simply zip the whole mod folder and install it from the app.
 
 The `octos.json` file is completely optional but it allows you to specify a lot of details for when you want to distribute your mod. These include fields like name, author, main page, user options, preview images, and a lot more. Your mod will work just fine without it, but it's good practice to add.
 
@@ -107,6 +107,6 @@ Octos mods are distributed as .zip archive files. To distribute your mod, simply
 
 - See some [example mods](https://github.com/underpig1/octos-community/tree/master) for inspiration  
 
-- Learn more about the [Octos CLI](cli.md) for testing and debuugging  
+- Learn more about the [Octos CLI](cli.md) for testing and debugging  
 
 - Learn how to [publish your mod](publish.md) to the Octos community  

docs/overrides/home.html

@@ -450,17 +450,17 @@
         top: -15px;
         text-align: center;
         right: -15px;
-        font-size: 30px;
-        color: white;
+        font-size: 24px;
+        color: #5b5b5b;
         opacity: 1;
         cursor: pointer;
         z-index: 8;
         background-color: #111;
-        border: 1px solid gray;
+        border: 1px solid #5b5b5b;
         border-radius: 999px;
         width: 35px;
         height: 35px;
-        line-height: 26px;
+        line-height: 34px;
     }
 
     .modal-content .modal-info {
@@ -497,6 +497,66 @@
         margin-bottom: 8px;
     }
 
+    #download-modal .modal-content {
+        width: 375px;
+        max-width: 90%;
+        display: flex;
+        padding: 15px;
+        gap: 10px;
+        border-radius: 10px;
+        flex-direction: column;
+        aspect-ratio: unset;
+    }
+
+    .outline-button {
+        border: 1px solid #5b5b5b;
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        height: 65px;
+        width: 100%;
+        border-radius: 5px;
+        float: left;
+        padding: 0 20px;
+        box-sizing: border-box;
+        cursor: pointer;
+        opacity: 1;
+        justify-content: space-between;
+        transition: background-color 0.1s ease;
+    }
+
+    .outline-button h3 {
+        margin: 0;
+        font-weight: 500;
+        font-size: 12pt;
+        color: #adadad !important;
+        margin-bottom: 2px;
+    }
+
+    .outline-button:hover {
+        background-color: #2a2a2a;
+    }
+
+    .outline-button i {
+        color: inherit;
+        float: right;
+        font-size: 24pt;
+        float: right;
+    }
+
+    #download-modal .modal-content p {
+        font-size: 10pt;
+        margin: 0;
+        color: #858585;
+        float: left;
+        margin-bottom: 5px;
+    }
+
+    .outline-button p {
+        font-size: 9pt !important;
+        margin: 0 !important;
+    }
+
     @media screen and (max-width: 800px) {
         .modal-info {
             position: static !important;
@@ -528,8 +588,9 @@ <h1 class="scrollable" style="--damp: -2">Your new desktop awaits. 🚀</h1>
                     <p class="scrollable" style="--damp: -2">The open-source HTML dynamic desktop engine for Windows
                         10 &amp; 11.</p>
                     <a class="scrollable button" style="--damp: -3; background-color: red"
-                        data-umami-event="download-button">Download</a>
-                    <a class="scrollable button" style="--damp: -3" data-umami-event="github-button" href="https://github.com/underpig1/octos" target="_blank">GitHub</a>
+                        data-umami-event="download-button" onclick="openDownloadModal()">Download</a>
+                    <a class="scrollable button" style="--damp: -3" data-umami-event="github-button"
+                        href="https://github.com/underpig1/octos" target="_blank">GitHub</a>
                 </div>
             </div>
         </div>
@@ -579,23 +640,26 @@ <h1 class="centered-header script-dependent">See for yourself:</h1>
             </div> -->
         </div>
         <div class="app-preview-container scroll-container">
-        <!-- <h1 class="scrollable centered-header" style="--damp: -5; position: absolute; top: -20px;">Ready?</h1> -->
+            <!-- <h1 class="scrollable centered-header" style="--damp: -5; position: absolute; top: -20px;">Ready?</h1> -->
             <div class="app-preview"></div>
         </div>
         <div class="footer scroll-container">
             <div class="footer-content">
                 <div style="width: max-content;">
                     <h1 class="reveal revealed" style="--damp: -2">Let's do this!</h1>
-                    <p class="reveal revealed" style="--damp: -2; margin: 10px 0;">Download for free on Windows 10 &amp; 11 today</p>
-                    <a class="reveal revealed button" style="--damp: -3; background-color: white; color: black;" data-umami-event="download-button">Download</a>
-                    <a class="reveal revealed button" style="--damp: -3" data-umami-event="github-button" href="https://github.com/underpig1/octos" target="_blank">GitHub</a>
+                    <p class="reveal revealed" style="--damp: -2; margin: 10px 0;">Download for free on Windows 10 &amp;
+                        11 today</p>
+                    <a class="reveal revealed button" style="--damp: -3; background-color: white; color: black;"
+                        data-umami-event="download-button" onclick="openDownloadModal()">Download</a>
+                    <a class="reveal revealed button" style="--damp: -3" data-umami-event="github-button"
+                        href="https://github.com/underpig1/octos" target="_blank">GitHub</a>
                 </div>
             </div>
         </div>
     </div>
     <div id="modal" class="modal">
         <div class="modal-content">
-            <span class="close" onclick="closeModal()">&times;</span>
+            <i class="close ri-close-line" onclick="closeModals()"></i>
             <img id="modal-video" src="" />
             <div class="modal-info">
                 <h1 id="modal-title">Title</h1>
@@ -604,6 +668,26 @@ <h1 id="modal-title">Title</h1>
             </div>
         </div>
     </div>
+    <div id="download-modal" class="modal">
+        <div class="modal-content">
+            <i class="close ri-close-line" onclick="closeModals()"></i>
+            <p>Choose an installation method:</p>
+            <a href="ms-windows-store://pdp/?productid=9NC4C8N74G02" class="outline-button">
+                <div>
+                    <h3>From the Microsoft Store</h3>
+                    <p>Certified installation from Microsoft.</p>
+                </div>
+                <i class="ri-shopping-bag-fill"></i>
+            </a>
+            <a href="https://github.com/underpig1/octos/releases/latest/download/OctosSetup.exe" target="_blank" class="outline-button">
+                <div>
+                    <h3>Download .EXE</h3>
+                    <p>Download the latest setup executable.</p>
+                </div>
+                <i class="ri-windows-fill"></i>
+            </a>
+        </div>
+    </div>
 </section>
 <script>
     function revealOnScroll() {
@@ -739,17 +823,20 @@ <h1 id="modal-title">Title</h1>
     }
 
     const modal = document.getElementById("modal");
+    const downloadModal = document.getElementById("download-modal");
     const video = document.getElementById("modal-video");
 
     const modalInfo = document.querySelector(".modal-info");
     const modalTitle = document.getElementById("modal-title");
     const modalAuthor = document.getElementById("modal-author");
     const modalDescription = document.getElementById("modal-description");
 
-    function closeModal() {
+    function closeModals() {
         modal.classList.remove("active");
+        downloadModal.classList.remove("active");
         setTimeout(() => {
             modal.style.display = "none";
+            downloadModal.style.display = "none";
         }, 300);
     }
 
@@ -776,8 +863,15 @@ <h1 id="modal-title">Title</h1>
     }
 
     window.onclick = (event) => {
-        if (event.target === modal) closeModal()
+        if (event.target === modal || event.target == downloadModal) closeModals()
     };
+
+    function openDownloadModal() {
+        downloadModal.style.display = "flex";
+        requestAnimationFrame(() => {
+            downloadModal.classList.add("active");
+        });
+    }
 </script>
 {% endblock %}
 {% block content %}{% endblock %}