upd: web page

author: ilotterytea <iltsu@alright.party> 2025-01-28 21:19:31 +0500
committer: ilotterytea <iltsu@alright.party> 2025-01-28 21:19:31 +0500
commit: 931b3a5514312fc149f241d7ac1156c579dfbf41 (patch)
tree: 167d29465190f73a73cc2b5c8e9b72e26940c273
parent: 71c597fbd5b92006173910a7e396c92375bcc31c (diff)
7 files changed, 204 insertions, 39 deletions
diff --git a/html/webapp/img/bg.png b/html/webapp/img/bg.png
new file mode 100644
index 0000000..b8d096e
--- /dev/null
+++ b/html/webapp/img/bg.png
diff --git a/html/webapp/img/favicon.ico b/html/webapp/img/favicon.ico
new file mode 100644
index 0000000..db84dbd
--- /dev/null
+++ b/html/webapp/img/favicon.ico
diff --git a/html/webapp/img/play_me.png b/html/webapp/img/play_me.png
new file mode 100644
index 0000000..8f230b4
--- /dev/null
+++ b/html/webapp/img/play_me.png
diff --git a/html/webapp/img/screenshot_1.png b/html/webapp/img/screenshot_1.png
new file mode 100644
index 0000000..715cbc9
--- /dev/null
+++ b/html/webapp/img/screenshot_1.png
diff --git a/html/webapp/img/screenshot_2.png b/html/webapp/img/screenshot_2.png
new file mode 100644
index 0000000..6d2eba8
--- /dev/null
+++ b/html/webapp/img/screenshot_2.png
diff --git a/html/webapp/index.html b/html/webapp/index.html
index 01f2f40..1cdd9d2 100644
--- a/html/webapp/index.html
+++ b/html/webapp/index.html
@@ -1,31 +1,67 @@
 <!doctype html>
 <html>
+
 <head>
   <title>Frogartha</title>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <meta id="gameViewport" name="viewport" content="width=device-width initial-scale=1">
   <link href="styles.css" rel="stylesheet" type="text/css">
+  <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
 </head>
 
 <body>
-<a class="superdev" href="javascript:%7B%20window.__gwt_bookmarklet_params%20%3D%20%7B'server_url'%3A'http%3A%2F%2Flocalhost%3A9876%2F'%7D%3B%20var%20s%20%3D%20document.createElement('script')%3B%20s.src%20%3D%20'http%3A%2F%2Flocalhost%3A9876%2Fdev_mode_on.js'%3B%20void(document.getElementsByTagName('head')%5B0%5D.appendChild(s))%3B%7D">&#8635;</a>
-<div align="center" id="embed-html"></div>
-<script type="text/javascript" src="html/html.nocache.js"></script>
+  <div class="background"></div>
+  <div class="background background-gradient"></div>
+  <div class="container">
+    <div class="wrapper">
+      <div class="preview">
+        <div align="center" id="embed-html"></div>
+        <script type="text/javascript" src="html/html.nocache.js"></script>
+        <div class="play-me">
+          <img src="img/play_me.png" alt="Play me!">
+        </div>
+      </div>
+      <div class="description">
+        <h1>A frog game, supplemented by the old-fashioned chat room genre, written in Java. As the King of Frogartha
+          intended.</h1>
+        <div class="screenshots">
+          <a href="img/screenshot_1.png">
+            <img src="img/screenshot_1.png" alt="screenshot 1">
+          </a>
+          <a href="img/screenshot_2.png">
+            <img src="img/screenshot_2.png" alt="screenshot 2">
+          </a>
+        </div>
+        <div class="download">
+          <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>
+        </div>
+        <div class="footer">
+          <a href="https://github.com/ilotterytea/frogartha">Source code</a>
+          <a href="https://ilotterytea.kz">Developer's website</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
 </body>
 
 <script>
-function handleMouseDown(evt) {
-  evt.preventDefault();
-  evt.stopPropagation();
-  window.focus();
-}
+  function handleMouseDown(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    window.focus();
+  }
 
-function handleMouseUp(evt) {
-  evt.preventDefault();
-  evt.stopPropagation();
-}
-document.addEventListener('contextmenu', event => event.preventDefault());
-document.getElementById('embed-html').addEventListener('mousedown', handleMouseDown, false);
-document.getElementById('embed-html').addEventListener('mouseup', handleMouseUp, false);
+  function handleMouseUp(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+  }
+  document.addEventListener('contextmenu', event => event.preventDefault());
+  document.getElementById('embed-html').addEventListener('mousedown', handleMouseDown, false);
+  document.getElementById('embed-html').addEventListener('mouseup', handleMouseUp, false);
 </script>
-</html>
+
+</html>
+\ No newline at end of file
diff --git a/html/webapp/styles.css b/html/webapp/styles.css
index e768a39..a879a6f 100644
--- a/html/webapp/styles.css
+++ b/html/webapp/styles.css
@@ -1,34 +1,163 @@
-canvas {
-    cursor: default;
-    outline: none;
+* {
+    padding: 0;
+    margin: 0;
 }
 
 body {
-    background-color: #222222;
+    font-family: 'Times New Roman', Times, serif;
+    background-color: #000a03;
 }
 
-p {
-    text-align: center;
-    color: #eeeeee;
+h1,
+h2 {
+    font-size: 32px;
 }
 
 a {
+    color: #6b8e78;
+    font-size: 20px;
+    padding: 0 6px;
+}
+
+a:hover {
+    color: #011702;
+    background-color: #6b8e73;
+    text-decoration: line-through;
+}
+
+.container {
+    width: 100%;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/** Wrapper */
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.background {
+    position: absolute;
+    background: no-repeat center url('img/bg.png');
+    background-size: cover;
+    width: 100%;
+    height: 100%;
+    z-index: -2;
+    filter: brightness(0.25);
+}
+
+.background-gradient {
+    background: linear-gradient(0deg, #000a03, #00000000, #00000000);
+    z-index: -1;
+    filter: brightness(1);
+}
+
+.preview {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: 100vh;
+}
+
+.play-me {
+    display: flex;
+    width: 100%;
+    justify-content: right;
+    align-items: center;
+    margin-top: 12px;
+}
+
+.play-me img {
+    height: 50px;
+    width: auto;
+}
+
+/** Under main */
+.description {
+    width: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: rgb(212, 236, 214);
+
+    margin-top: 64px;
+
+    gap: 64px;
+}
+
+.description h1 {
     text-align: center;
-    color: #bbbbff;
+}
+
+.screenshots {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.screenshots a {
+    padding: 0;
+}
+
+.screenshots a:hover {
+    background-color: transparent;
+}
+
+.screenshots img {
+    width: 256px;
+}
+
+/** Footer */
+.footer {
+    width: 100%;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+
+    margin-bottom: 32px;
+}
+
+/** Media screen */
+@media only screen and (min-width: 700px) {
+    .wrapper {
+        width: 50%;
+    }
+
+    .screenshots {
+        display: grid;
+        grid-template-columns: auto auto;
+        gap: 20px;
+    }
+}
+
+canvas {
+    cursor: default;
+    outline: none;
+    box-shadow: black 0px 0px 32px 16px;
+    border-radius: 4px;
 }
 
 .superdev {
-    color: rgb(37,37,37);
-    text-shadow: 0px 1px 1px rgba(250,250,250,0.1);
+    color: rgb(37, 37, 37);
+    text-shadow: 0px 1px 1px rgba(250, 250, 250, 0.1);
     font-size: 50pt;
     display: block;
     position: relative;
     text-decoration: none;
-    background-color: rgb(83,87,93);
-    box-shadow: 0px 3px 0px 0px rgb(34,34,34),
-                0px 7px 10px 0px rgb(17,17,17),
-                inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
-                inset 0px -12px 35px 0px rgba(0, 0, 0, .5);
+    background-color: rgb(83, 87, 93);
+    box-shadow: 0px 3px 0px 0px rgb(34, 34, 34),
+        0px 7px 10px 0px rgb(17, 17, 17),
+        inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
+        inset 0px -12px 35px 0px rgba(0, 0, 0, .5);
     width: 70px;
     height: 70px;
     border: 0;
@@ -38,16 +167,16 @@ a {
 }
 
 .superdev:active {
-    box-shadow: 0px 0px 0px 0px rgb(34,34,34),
-                0px 3px 7px 0px rgb(17,17,17),
-                inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
-                inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
-    background-color: rgb(83,87,93);
+    box-shadow: 0px 0px 0px 0px rgb(34, 34, 34),
+        0px 3px 7px 0px rgb(17, 17, 17),
+        inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
+        inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
+    background-color: rgb(83, 87, 93);
     top: 3px;
     color: #fff;
-    text-shadow: 0px 0px 3px rgb(250,250,250);
+    text-shadow: 0px 0px 3px rgb(250, 250, 250);
 }
 
 .superdev:hover {
-    background-color: rgb(100,100,100);
-}
+    background-color: rgb(100, 100, 100);
+}
+\ No newline at end of file
author	ilotterytea <iltsu@alright.party>	2025-01-28 21:19:31 +0500
committer	ilotterytea <iltsu@alright.party>	2025-01-28 21:19:31 +0500
commit	931b3a5514312fc149f241d7ac1156c579dfbf41 (patch)
tree	167d29465190f73a73cc2b5c8e9b72e26940c273
parent	71c597fbd5b92006173910a7e396c92375bcc31c (diff)