diff options
| author | ilotterytea <iltsu@alright.party> | 2025-12-08 01:03:25 +0500 |
|---|---|---|
| committer | ilotterytea <iltsu@alright.party> | 2025-12-08 01:03:25 +0500 |
| commit | 31fd3d5a80d4f8fc3e77640cb503cf13fc0a5410 (patch) | |
| tree | a6211122836a22eb203a3608a47ea0c72cbfc68f | |
| parent | 880776528c0acf361ee06b8a5ec6c4071c329d7f (diff) | |
| -rw-r--r-- | favicon.ico | bin | 0 -> 1406 bytes | |||
| -rw-r--r-- | index.php | 15 | ||||
| -rw-r--r-- | lib/partials.php | 17 | ||||
| -rw-r--r-- | static/style.css | 83 |
4 files changed, 87 insertions, 28 deletions
diff --git a/favicon.ico b/favicon.ico Binary files differnew file mode 100644 index 0000000..0e8be48 --- /dev/null +++ b/favicon.ico @@ -12,11 +12,16 @@ include_once $_SERVER['DOCUMENT_ROOT'] . '/lib/config.php'; </head> <body> - <?php render_header(); ?> - <main> - <marquee>!!! Under construction !!!</marquee> - <p><a href="/emotes.php">Looking for TinyEmotes instance?</a></p> - </main> + <window> + <?php render_header(); ?> + <marquee behavior="scroll" direction="left"> + <a href="/emotes.php">/// Looking for that TinyEmotes instance? Click here! ///</a> + </marquee> + <?php render_tabs(); ?> + <main> + <p>Please stand by.</p> + </main> + </window> </body> </html>
\ No newline at end of file diff --git a/lib/partials.php b/lib/partials.php index 493b469..1e0fd96 100644 --- a/lib/partials.php +++ b/lib/partials.php @@ -5,12 +5,17 @@ function render_header() { echo '' ?> <header> - <div class="banner"> - <h1><?= INSTANCE_NAME ?></h1> - </div> - <div class="links"> - <a href="/">Home</a> - </div> + <img src="/favicon.ico" width="20" height="20" /> + <p><?= INSTANCE_NAME ?></p> </header> <?php ; +} + +function render_tabs() +{ + echo '' ?> + <tabs> + <a href="/">Home</a> + </tabs> + <?php ; }
\ No newline at end of file diff --git a/static/style.css b/static/style.css index 6ec0668..782f6cc 100644 --- a/static/style.css +++ b/static/style.css @@ -1,33 +1,82 @@ +:root { + --bg: #fff; + --header-bg: linear-gradient(270deg, #99dbaf, #baf3cd); + --window-bg: #ffffff; + --window-border: #6b9478; + --window-shadow: #c7c7c7; + --tabs-bg: #f1f1f1; + --tabs-bg-2: #dadada; + --tabs-border: #cfcfcf; + --tabs-color: #757575; +} + +@media (prefers-color-scheme: dark) { + :root { + --bg: #1e1e20; + --window-shadow: #2e2b31; + } +} + * { margin: 0; padding: 0; } body { - width: 50em; - margin: 0 auto; - font-family: 'Times New Roman', Times, serif; + width: 100%; + min-height: 100vh; + background-color: var(--bg); + display: flex; + justify-content: center; + align-items: center; + font-family: Arial, Helvetica, sans-serif; } -header { - border: 1px solid black; - margin: 8px 0; - display: flex; - flex-direction: column; +marquee { + background: black; + color: yellow; } -header .banner { - background-color: seagreen; - min-height: 10vh; +marquee a { + color: yellow; +} + +window { + background-color: var(--window-bg); + border: 1px solid var(--window-border); + box-shadow: 0 0 8px var(--window-shadow); +} + +header { + background: var(--header-bg); + border-bottom: 1px solid var(--window-border); + padding: 8px; display: flex; - align-items: end; - justify-content: end; + flex-direction: row; + align-items: center; + gap: 8px; + font-size: 18px; } -header .links { - padding: 4px; - border-top: 1px solid black; +tabs { + background: var(--tabs-bg); + border-bottom: 1px solid var(--tabs-border); display: flex; flex-direction: row; - justify-content: space-around; + font-size: 14px; +} + +tabs>a { + background-color: var(--tabs-bg); + color: var(--tabs-color); + padding: 2px 4px; + text-decoration: none; +} + +tabs>a:hover { + background-color: var(--tabs-bg-2); +} + +main { + padding: 8px; }
\ No newline at end of file |