diff options
| author | Fuwn <[email protected]> | 2024-06-12 10:22:52 +0000 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-06-12 10:22:52 +0000 |
| commit | 978a22a537e6749e6d2a6aa2d42da28c9a2d48d7 (patch) | |
| tree | a56ef938f869721e1e5fb43b6d8b12abd2bc15fc | |
| parent | docs(readme): development information (diff) | |
| download | mayu-978a22a537e6749e6d2a6aa2d42da28c9a2d48d7.tar.xz mayu-978a22a537e6749e6d2a6aa2d42da28c9a2d48d7.zip | |
feat: simple index page
| -rw-r--r-- | Earthfile | 1 | ||||
| -rw-r--r-- | index.html | 166 | ||||
| -rw-r--r-- | src/request.gleam | 7 |
3 files changed, 174 insertions, 0 deletions
@@ -10,6 +10,7 @@ docker: COPY +build/erlang-shipment/ /mayu/erlang-shipment/ COPY themes/ /mayu/themes/ + COPY index.html /mayu/ WORKDIR /mayu/ diff --git a/index.html b/index.html new file mode 100644 index 0000000..9ebfb03 --- /dev/null +++ b/index.html @@ -0,0 +1,166 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>Mayu</title> + </head> + + <body> + <style> + @import url("https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100..900;1,100..900&display=swap"); + @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); + + body { + background-color: #0b1622; + color: rgb(159, 173, 189); + font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + } + + main { + background-color: #151f2e; + padding: 20px 35.4px; + border-radius: 4px; + display: flex; + gap: 80px; + max-width: 100%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + box-shadow: 0 0 8px -2px rgba(0, 0, 0, 0.1), + 0 6px 20px -3px rgba(0, 0, 0, 0.2); + } + + @media (max-width: 768px) { + main { + flex-direction: column; + } + } + + img { + display: block; + margin: 10px 0; + width: 100%; + border-radius: 3px; + } + + h2 { + font-size: 1rem; + font-weight: 500; + margin-bottom: 15px; + } + + input { + background-color: rgb(11, 22, 34); + color: rgb(159, 173, 189); + border-radius: 4px; + border: 0; + height: 40px; + padding: 0 15px; + line-height: 40px; + display: inline-block; + font-size: 0.9rem; + } + + input:focus { + outline: none; + } + + .label { + margin-top: -10px; + padding-bottom: 0px; + font-size: 0.9rem; + color: rgb(114, 138, 161); + font-weight: normal; + } + + pre { + font-family: monospace; + } + + .copy-codes { + background-color: #0f1926; + padding: 10px; + border-radius: 4px; + color: #9fadbd; + font-size: 0.9rem; + overflow-x: auto; + white-space: pre-wrap; + word-wrap: break-word; + max-width: 100%; + margin-top: 40px; + } + + a { + color: rgb(61, 180, 242); + text-decoration: none; + } + + p { + font-size: 0.9rem; + color: #9fadbd; + line-height: 1.4; + } + + .attribution { + position: absolute; + bottom: 20px; + left: 35.4px; + } + </style> + + <main> + <div> + <h2>Username</h2> + + <p class="label"> + Enter the username you'd like to use as the ID of your counter. + </p> + + <input type="text" id="inputField" placeholder="@demo" /> + + <p class="attribution"> + Written by + <a href="https://anilist.co/user/fuwn/" target="_blank">@Fuwn</a> + + <br /> + + Source code available on + <a href="https://github.com/Fuwn/mayu" target="_blank">GitHub</a> + </p> + </div> + + <div class="counter"> + <img + id="example" + src="https://counter.due.moe/get/@demo" + alt="Example counter" + /> + + <pre id="copy-codes" class="copy-codes">hi</pre> + </div> + </main> + + <script> + let inputTimeout; + const idInput = document.getElementById("inputField"); + const image = document.getElementById("example"); + const copyCodesInput = document.getElementById("copy-codes"); + let inputValue = "demo"; + + copyCodesInput.innerText = `\n\n<img src="https://counter.due.moe/get/@${inputValue}" alt="${inputValue}" />`; + + idInput.addEventListener("input", () => { + clearTimeout(inputTimeout); + + inputTimeout = setTimeout(() => { + inputValue = idInput.value; + image.src = `https://counter.due.moe/get/@${inputValue}`; + copyCodesInput.innerText = `\n\n<img src="https://counter.due.moe/get/@${inputValue}" alt="${inputValue}" />`; + }, 500); + }); + </script> + </body> +</html> diff --git a/src/request.gleam b/src/request.gleam index 5cdc3c4..d9abccf 100644 --- a/src/request.gleam +++ b/src/request.gleam @@ -1,6 +1,7 @@ import database import gleam/json import gleam/string_builder +import simplifile import svg import wisp @@ -18,6 +19,12 @@ pub fn handle(request, connection) { use _ <- middleware(request) case wisp.path_segments(request) { + [] -> + case simplifile.read("index.html") { + Ok(content) -> + wisp.html_response(string_builder.from_string(content), 200) + Error(_) -> wisp.not_found() + } ["heart-beat"] -> wisp.html_response(string_builder.from_string("alive"), 200) ["get", "@" <> name] -> { |