diff options
| -rw-r--r-- | html/webapp/index.html | 9 | ||||
| -rw-r--r-- | html/webapp/styles.css | 44 |
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&bg_color=1b211a&fg_color=b3e9b0&link_color=5bfa86&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%; |