From 30b53f64f3bba30d259f04dcb6669a56203f94c6 Mon Sep 17 00:00:00 2001 From: curly Date: Mon, 15 Jul 2024 17:08:30 -0600 Subject: styled --- src/index.html | 23 +++++++--- src/login.html | 35 +++++++++++---- src/main.css | 128 ++++++++++++++++++++++++++++++++++++++++++++++++------ src/main.js | 85 +++++++++++++++++++++--------------- src/register.html | 39 ++++++++++++----- src/transfer.html | 48 ++++++++++++++++++++ src/user.html | 44 +++++++++++++++++++ 7 files changed, 327 insertions(+), 75 deletions(-) create mode 100644 src/transfer.html create mode 100644 src/user.html diff --git a/src/index.html b/src/index.html index f9b952b..48f5123 100644 --- a/src/index.html +++ b/src/index.html @@ -5,17 +5,28 @@ -
- - +
+ +
HOME
 - - + +
LOGIN
 + +
REGISTER
+ +
+
+
+

POKO

+
+
+
+
diff --git a/src/login.html b/src/login.html index 0b77009..30119c1 100644 --- a/src/login.html +++ b/src/login.html @@ -5,18 +5,35 @@ -
-
- - - - - -
+
+ +
HOME
+ + +
LOGIN
+ + +
REGISTER
+ +
+
+
+

LOGIN

+
+
+
+
+ + + + + +
+
diff --git a/src/main.css b/src/main.css index 2c53965..45911ed 100644 --- a/src/main.css +++ b/src/main.css @@ -2,11 +2,15 @@ html, body { margin: 0; padding: 0; border: 0; - background-color: grey; + background-color: var(--background-tertiary); } footer { - border-top: 2px solid black; + border-top: 2px solid var(--text-primary); font-weight: bold; + background-color: var(--background); + position: sticky; + bottom: 0; + width: 100%; } footer > center > p { margin: 0; @@ -17,17 +21,33 @@ body { height: 100vh; width: 100vw; } -#content { +#page { flex-grow: 1; - max-width: 70vw; + max-width: 65vw; + min-width: 45vw; margin: auto; + padding: 20px; display: flex; flex-direction: column; + background-color: var(--background); + margin-top: 8px; + margin-bottom: 8px; +} +hr { + color: var(--text-primary); + width: 100%; +} +#content { + flex-grow: 1; + display: flex; + flex-direction: row; + flex-wrap: wrap; + background-color: var(--background); + padding: 20px; } form { display: flex; flex-direction: column; - max-width: 40vw; align-self: center; } form > label { @@ -35,29 +55,109 @@ form > label { } input:invalid { - border: 2px dotted red; + border: 4px dotted var(--text-warning); } bold { font-weight: bold; - color: red; - background-color: black; + color: var(--text-warning); + background-color: var(--background); } +header { + display: flex; + justify-content: center; + flex-wrap: wrap; + position: sticky; + top: 0; + width: 100%; +} +a:last-child > .navbutton { + border-right: none; +} +.button { + padding: 2px 10px 2px 10px; + border-right: 2px solid var(--text-primary); + font-family: inherit; + font-size: inherit; + background-color: var(--background); + border: 2px solid var(--text-primary); +} +.formbutton { + box-shadow: none; + border-radius: 0; + margin-top: 6px; +} +.navbutton { + border: none; + border-right: 2px solid var(--text-primary); + border-bottom: 2px solid var(--text-primary); +} +.button:hover { + background-color: var(--secondary); +} + +input { + font-family: inherit; + font-size: inherit; + border: 4px dotted var(--text-primary); + background-color: var(--background-seconday); +} +form > select.button { + background-color: var(--background-seconday); + border: 4px dotted var(--text-primary); +} + +.halfbox { + width: 50%; + display: grid; + flex-grow: 1; + align-content: start; +} +.formbox { + display: grid; + flex-grow: 1; + align-content: start; + align-self: start; +} + +#page > center > h2 { + margin-top: 12px; + margin-bottom: 12px; +} + +header > a, header > a:visited, header > a:link { + text-decoration: none; + color: var(--text-primary); + font-weight: bold; + justify-content: center; + flex-grow: 1;} + :root { - --primary: #efefef; - --text-primary: #222; + --background: #fbf9f4; + --background-seconday: #fbfaca; + --background-tertiary: #e0e0e0; + --primary: #222; + --secondary: #ccc; + --text-primary: #4f474a; + --text-warning: red; + font-family: monospace; + font-size: 2em; + color: var(--text-primary) } @media (prefers-color-scheme: dark) { :root { - --primary: #222; - --text-primary: #eee; } } -@media screen and (max-width: 500px) { - #content { +@media screen and (max-width: 800px) { + #page { + max-width: 100vw; + min-width: 90vw; + } + #content > div { + width: 100%; max-width: unset; } } \ No newline at end of file diff --git a/src/main.js b/src/main.js index 2b880a2..3060767 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,3 @@ -// const host = window.location.protocol + "//" + window.location.host; const server = window.location.protocol + "//" + window.location.hostname + ":8000"; const host = window.location.protocol + "//" + window.location.host; const client_id = "POKO Web 0.0" @@ -64,7 +63,7 @@ async function register() { if (req.status == 201) { await login(req.body.id, password) - window.location.href = host + window.location.href = host + "/user.html" } else { alert(req.status + ": " + req.body) } @@ -89,7 +88,7 @@ async function login(id, password) { if (req.status == 200) { // Set session cookie set_session(req.body, id) - window.location.href = host; + window.location.href = host + "/user.html"; } else { alert(req.status + ": " + req.body) } @@ -142,56 +141,64 @@ async function logout() { } } -async function has_session() { +async function is_logged_in() { const session = get_session(); const id = get_id(); - const users = await userlist(); - const content = document.getElementById("content"); - - // If session exists if (session != "") { - // If ID exists if (id != "") { const url = server + "/user/get" const body = {"id": id, "session": session} const req = await xhttp_post(url, body); if (req.status == 200) { - - const tokens = format_tokovec(req.body.tokovec); - - content.innerHTML = ` -
-

User Info

-

Username: ${req.body.name}

-

ID: ${id}

-
-
-

Tokens Balance

- ${tokens} -
-
-

Actions

- - - -
-
-

Users

- ${users} -
- `; + return true } else if (req.status == 404) { if (req.body == "Not Authenticated") { del_session() + return false } } } else { del_session() } - } else { - content.innerHTML += users; + } + + return false +} + +async function user() { + const session = get_session(); + const id = get_id(); + + const user_name = document.getElementById("user.name"); + const user_id = document.getElementById("user.id"); + const users = document.getElementById("users"); + const balance = document.getElementById("balance"); + + + if (is_logged_in()) { + + + const url = server + "/user/get" + const body = {"id": id, "session": session} + const req = await xhttp_post(url, body); + + if (req.status == 200) { + + const tokens = format_tokovec(req.body.tokovec); + const user_list = await userlist(); + + user_name.innerHTML = `Name: ${req.body.name}`; + user_id.innerHTML = `ID: ${id}`; + users.innerHTML += user_list; + balance.innerHTML += tokens; + + } else if (req.status == 404) { + if (req.body == "Not Authenticated") { + del_session() + } + } } } @@ -226,4 +233,12 @@ async function userlist() { } catch {} return out +} + +function transfer() {} + +function transfer_form() { + const to_id = document.getElementById("to_id").value; + const color = document.getElementById("color").value; + const amount = document.getElementById("amount").value; } \ No newline at end of file diff --git a/src/register.html b/src/register.html index 34deb49..b80bab6 100644 --- a/src/register.html +++ b/src/register.html @@ -5,20 +5,37 @@ -
-
- - - - - - - -
+
+ +
HOME
+ + +
LOGIN
+ + +
REGISTER
+ +
+
+
+

REGISTER

+
+
+
+
+ + + + + + + +
+
diff --git a/src/transfer.html b/src/transfer.html new file mode 100644 index 0000000..920c779 --- /dev/null +++ b/src/transfer.html @@ -0,0 +1,48 @@ + + + + + + + +
+ +
USER
+ + +
TRANSFER
+ + +
LOGOUT
+ +
+
+
+

TRANSFER

+
+
+
+
+ + + + + + + +
+
+
+
+
+

POKO

+
+
+ + \ No newline at end of file diff --git a/src/user.html b/src/user.html new file mode 100644 index 0000000..00bfad6 --- /dev/null +++ b/src/user.html @@ -0,0 +1,44 @@ + + + + + + + +
+ +
USER
+ + +
TRANSFER
+ + +
LOGOUT
+ +
+
+
+

USER

+
+
+
+
+

User Info

+

+

+
+
+

Tokens Balance

+
+
+

Users

+
+
+
+ + + \ No newline at end of file -- cgit v1.2.3