Website: Added features

Author: Beelink

docs/imgs/icons/file.png

@@ -11,7 +11,7 @@
 
 body {
     margin: 0;
-    background: #f1f1f1;
+    background: #f1f1f1;  
 }
 
 /* HEADER */
@@ -150,6 +150,12 @@ header .navbar .link:hover {
     margin-left: 0;
 }
 
+.hero .size {
+    opacity: 0.5;
+    font: 14px "Inter";
+    margin: 12px;
+}
+
 /* MAIN */
 
 main {
@@ -160,7 +166,7 @@ main {
 main .screenshot {
     filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5));
     border-radius: 8px;
-    margin-top: -20vw;
+    margin-top: -21vw;
     background: #333;
     border: 2px solid rgba(0, 0, 0, 0.25);
     max-width: 100%;
@@ -171,6 +177,30 @@ main h2 {
     margin-top: 96px;
 }
 
+main .features {
+    display: flex;
+    gap: 28px;
+    margin: 16px auto 0 auto;
+    justify-content: center;
+    font: 16px "Inter";
+    flex-wrap: wrap;
+}
+
+main .features h4 {
+    margin: 16px 0;
+    color: #7a36b1;
+    font: 20px "Inter";
+}
+
+main .features .feature {
+    padding: 32px;
+    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
+    background: #fff;
+    border-radius: 8px;
+    border: 2px solid rgba(0, 0, 0, 0.25);
+    width: 192px;
+}
+
 main .whats-new {
     font: 16px "Inter";
 }
@@ -312,11 +342,19 @@ footer a:hover {
         display: none;
     }
 
-    main .screenshot {
-        border-radius: 0;
-        margin-left: -16px;
-        margin-right: -16px;
-        max-width: calc(100% + 28px);
+    .hero .buttons {
+        display: block;
+        padding: 16px;
+    }
+    
+    .hero .buttons .button {
+        width: 100%;
+        box-sizing: border-box;
+        margin: 8px 0;
+    }
+
+    main .features .feature {
+        width: 100%;
     }
 
     footer {

docs/imgs/icons/keyboard.png

@@ -38,6 +38,7 @@ <h3>Lightweight, versatile desktop image viewer for Windows</h3>
                     <span>Download</span>
                     <span class="version"></span>
                 </div>
+                <div class="size">3.8 MB</div>
             </a>
             <a href="https://github.com/ModuleArt/quick-picture-viewer">
                 <div class="button">
@@ -59,6 +60,29 @@ <h3>Lightweight, versatile desktop image viewer for Windows</h3>
     </div>
     <main>
         <img class="screenshot" src="imgs/screenshots/main.png" />
+        <h2>Features:</h2>
+        <div class="features">
+            <div class="feature">
+                <img src="imgs/icons/rocket.png" />
+                <h4>Lightweight</h4>
+                <span>Small and fast but still have a bunch of features</span>
+            </div>
+            <div class="feature">
+                <img src="imgs/icons/file.png" />
+                <h4>20+ formats supported</h4>
+                <span>Works great with GIF, SVG, WEBP, .ICO, BMP, DDS, TGA etc.</span>
+            </div>
+            <div class="feature">
+                <img src="imgs/icons/puzzle.png" />
+                <h4>Plugins ready</h4>
+                <span>You can extend the functionality of the app using the built-in plugin manager</span>
+            </div>
+            <div class="feature">
+                <img src="imgs/icons/keyboard.png" />
+                <h4>Shortcuts</h4>
+                <span>You will find a hotkey for any action</span>
+            </div>
+        </div>
         <h2>What's new:</h2>
         <div id="whats-new" class="whats-new">
             <a href="#" class="release-title"></a>

docs/imgs/icons/puzzle.png

@@ -1,12 +1,15 @@
 $(document).ready(function () {
     let converter = new showdown.Converter();
 
-    $.getJSON("https://api.github.com/repos/ModuleArt/quick-picture-viewer/releases/latest").done(function (json) {
+    $.getJSON("https://api.github.com/repos/ModuleArt/quick-picture-viewer/releases/latest").done(function(json) {
+
+        console.log(json);
 
         // download link
         let downloadLink = document.getElementById("download-link");
         downloadLink.href = "https://github.com/ModuleArt/quick-picture-viewer/releases/download/" + json.tag_name + "/QuickPictureViewer-Setup.exe";
         downloadLink.getElementsByClassName("version")[0].innerHTML = json.tag_name;
+        downloadLink.getElementsByClassName("size")[0].innerHTML = "Win 7-10, " + formatBytes(json.assets[0].size);
 
         // what's new
         let whatsNewLink = document.getElementById("whats-new").getElementsByClassName("release-title")[0];
@@ -16,10 +19,22 @@ $(document).ready(function () {
             day: '2-digit',
             month: '2-digit',
             year: 'numeric',
-          })
+        });
         document.getElementById("whats-new").getElementsByClassName("release-markdown")[0].innerHTML = converter.makeHtml(json.body);
 
         // copyright year
         document.getElementById("copyright").innerHTML = "Copyright © " + new Date().getFullYear() + " Module Art";
     });
-});
+});
+
+function formatBytes(bytes, decimals = 1) {
+    if (bytes === 0) return '0 Bytes';
+
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}