From 931b3a5514312fc149f241d7ac1156c579dfbf41 Mon Sep 17 00:00:00 2001 From: ilotterytea Date: Tue, 28 Jan 2025 21:19:31 +0500 Subject: upd: web page --- html/webapp/img/bg.png | Bin 0 -> 961103 bytes html/webapp/img/favicon.ico | Bin 0 -> 1150 bytes html/webapp/img/play_me.png | Bin 0 -> 2276 bytes html/webapp/img/screenshot_1.png | Bin 0 -> 80158 bytes html/webapp/img/screenshot_2.png | Bin 0 -> 80744 bytes html/webapp/index.html | 68 +++++++++++---- html/webapp/styles.css | 175 ++++++++++++++++++++++++++++++++++----- 7 files changed, 204 insertions(+), 39 deletions(-) create mode 100644 html/webapp/img/bg.png create mode 100644 html/webapp/img/favicon.ico create mode 100644 html/webapp/img/play_me.png create mode 100644 html/webapp/img/screenshot_1.png create mode 100644 html/webapp/img/screenshot_2.png diff --git a/html/webapp/img/bg.png b/html/webapp/img/bg.png new file mode 100644 index 0000000..b8d096e Binary files /dev/null and b/html/webapp/img/bg.png differ diff --git a/html/webapp/img/favicon.ico b/html/webapp/img/favicon.ico new file mode 100644 index 0000000..db84dbd Binary files /dev/null and b/html/webapp/img/favicon.ico differ diff --git a/html/webapp/img/play_me.png b/html/webapp/img/play_me.png new file mode 100644 index 0000000..8f230b4 Binary files /dev/null and b/html/webapp/img/play_me.png differ diff --git a/html/webapp/img/screenshot_1.png b/html/webapp/img/screenshot_1.png new file mode 100644 index 0000000..715cbc9 Binary files /dev/null and b/html/webapp/img/screenshot_1.png differ diff --git a/html/webapp/img/screenshot_2.png b/html/webapp/img/screenshot_2.png new file mode 100644 index 0000000..6d2eba8 Binary files /dev/null and b/html/webapp/img/screenshot_2.png differ 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 @@ + Frogartha + -↻ -
- +
+
+
+
+
+
+ +
+ Play me! +
+
+
+

A frog game, supplemented by the old-fashioned chat room genre, written in Java. As the King of Frogartha + intended.

+
+ + screenshot 1 + + + screenshot 2 + +
+
+ +
+
+ Source code + Developer's website +
+
+
+
+ - + + \ 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 -- cgit v1.2.3