upd: download from github releases (temporary)

2 files changed, 50 insertions, 3 deletions

diff --git a/html/webapp/index.html b/html/webapp/index.html
index 1cdd9d2..d0e0754 100644
--- a/html/webapp/index.html
+++ b/html/webapp/index.html
@@ -33,10 +33,15 @@
           </a>
         </div>
         <div class="download">
-          <iframe frameborder="0"
+          <!-- TODO: Uncomment after release on itch.io -->
+          <!--<iframe frameborder="0"
             src="https://itch.io/embed/3262997?border_width=0&amp;bg_color=1b211a&amp;fg_color=b3e9b0&amp;link_color=5bfa86&amp;border_color=17400f"
             width="550" height="165"><a href="https://ilotterytea.itch.io/frogartha">Frogartha by
-              ilotterytea</a></iframe>
+              ilotterytea</a></iframe>-->
+
+          <a href="https://github.com/ilotterytea/frogartha/releases" target="_blank" class="link-button download">
+            <i class="fa-solid fa-download"></i>DOWNLOAD FROM GITHUB RELEASES
+          </a>
         </div>
         <div class="footer">
           <a href="https://github.com/ilotterytea/frogartha">Source code</a>
diff --git a/html/webapp/styles.css b/html/webapp/styles.css
index a879a6f..6e30ddc 100644
--- a/html/webapp/styles.css
+++ b/html/webapp/styles.css
@@ -1,10 +1,12 @@
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');
+
 * {
     padding: 0;
     margin: 0;
 }
 
 body {
-    font-family: 'Times New Roman', Times, serif;
+    font-family: Arial, Helvetica, sans-serif;
     background-color: #000a03;
 }
 
@@ -115,6 +117,46 @@ a:hover {
     width: 256px;
 }
 
+/** Download */
+.download {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    margin: 32px 0;
+}
+
+/** Buttons */
+.link-button {
+    border-radius: 4px;
+    border-width: 2px;
+
+    padding: 32px;
+
+    text-align: center;
+    font-weight: bold;
+
+    font-size: 32px;
+}
+
+.link-button i {
+    font-size: 64px;
+    margin-right: 32px;
+}
+
+.link-button.download {
+    background: linear-gradient(180deg, #58bd58, #3b963b);
+    border-color: #264d26;
+    color: white;
+    text-decoration: none;
+    text-shadow: #316e31 0px 1px;
+}
+
+.link-button.download:hover {
+    background: linear-gradient(0deg, #58bd58, #3b963b);
+}
+
 /** Footer */
 .footer {
     width: 100%;