summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorcurly <curly@infernal.garden>2024-07-15 17:08:30 -0600
committercurly <curly@infernal.garden>2024-07-15 17:08:30 -0600
commit30b53f64f3bba30d259f04dcb6669a56203f94c6 (patch)
tree2c6e67a12844ebb9daf63077e73b25f9c58eeaa8
parente6150a01fef7cb8614f1337abbc9630be373aac5 (diff)
downloadpoko_web-30b53f64f3bba30d259f04dcb6669a56203f94c6.tar.gz
poko_web-30b53f64f3bba30d259f04dcb6669a56203f94c6.tar.bz2
poko_web-30b53f64f3bba30d259f04dcb6669a56203f94c6.zip
styled
Diffstat
-rw-r--r--src/index.html23
-rw-r--r--src/login.html35
-rw-r--r--src/main.css128
-rw-r--r--src/main.js85
-rw-r--r--src/register.html39
-rw-r--r--src/transfer.html48
-rw-r--r--src/user.html44
7 files changed, 327 insertions, 75 deletions
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 @@
<script src="main.js" defer></script>
</head>
<body onload="has_session()">
- <div id="content">
- <a href="login.html">
- <button>Login</button>
+ <header>
+ <a href="/">
+ <center class="button navbutton">HOME</center>
</a>
- <a href="register.html">
- <button>Register</button>
+ <a href="/login.html">
+ <center class="button navbutton">LOGIN</center>
</a>
+ <a href="/register.html">
+ <center class="button navbutton">REGISTER</center>
+ </a>
+ </header>
+ <div id="page">
+ <center>
+ <h2>POKO</h2>
+ </center>
+ <hr>
+ <div id="content">
+ </div>
</div>
<footer>
<center>
- <a href="/">POKO</a>
+ <p>POKO</p>
</center>
</footer>
</body>
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 @@
<script src="main.js" defer></script>
</head>
<body>
- <div id="content">
- <form action="javascript:login_form()">
- <label for="id">ID</label>
- <input type="text" id="id" minlength="4" maxlength="4" pattern="[0123456789abcedfABCDEF]{4}" required>
- <label for="password">Password</label>
- <input type="password" id="password" minlength="4" required>
- <input type="submit" value="Login">
- </form>
+ <header>
+ <a href="/">
+ <center class="button navbutton">HOME</center>
+ </a>
+ <a href="/login.html">
+ <center class="button navbutton">LOGIN</center>
+ </a>
+ <a href="/register.html">
+ <center class="button navbutton">REGISTER</center>
+ </a>
+ </header>
+ <div id="page">
+ <center>
+ <h2>LOGIN</h2>
+ </center>
+ <hr>
+ <div id="content">
+ <form action="javascript:login_form()" class="formbox">
+ <label for="id">ID</label>
+ <input type="text" id="id" minlength="4" maxlength="4" pattern="[0123456789abcedfABCDEF]{4}" required>
+ <label for="password">PASSWORD</label>
+ <input type="password" id="password" minlength="4" required>
+ <input type="submit" class="button formbutton" value="LOGIN">
+ </form>
+ </div>
</div>
<footer>
<center>
- <a href="/">POKO</a>
+ <p>POKO</p>
</center>
</footer>
</body>
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 = `
- <div id="userinfo">
- <h3>User Info</h3>
- <p>Username: ${req.body.name}</p>
- <p>ID: ${id}</p>
- </div>
- <div id="balance">
- <h3>Tokens Balance</h3>
- ${tokens}
- </div>
- <div id="actions">
- <h3>Actions</h3>
- <a href="/transfer.html"><button>Transfer</button></a>
- <button onclick="logout()">Logout</button>
- <button onclick="logout_all()">Logout All //TODO</button>
- </div>
- <div id="users">
- <h3>Users</h3>
- ${users}
- </div>
- `;
+ 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 @@
<script src="main.js" defer></script>
</head>
<body>
- <div id="content">
- <form action="javascript:register()">
- <label for="username">Username</label>
- <input type="text" id="username" minlength="1" required>
- <label for="password">Password<br><bold>DO NOT REUSE A PASSWORD. THIS APPLICATION IS NOT SECURE</bold></label>
- <input type="password" id="password" minlength="4" required>
- <label for="id">ID (optional)<br>This is what you use to login. Do not lose it. One will be generated if not specified</label>
- <input type="text" id="id" minlength="4" maxlength="4" pattern="[0123456789abcedfABCDEF]{4}">
- <input type="submit" value="Register">
- </form>
+ <header>
+ <a href="/">
+ <center class="button navbutton">HOME</center>
+ </a>
+ <a href="/login.html">
+ <center class="button navbutton">LOGIN</center>
+ </a>
+ <a href="/register.html">
+ <center class="button navbutton">REGISTER</center>
+ </a>
+ </header>
+ <div id="page">
+ <center>
+ <h2>REGISTER</h2>
+ </center>
+ <hr>
+ <div id="content">
+ <form action="javascript:register()" class="formbox">
+ <label for="username">USERNAME</label>
+ <input type="text" id="username" minlength="1" required>
+ <label for="password">PASSWORD<br><bold>DO NOT REUSE A PASSWORD! THIS APPLICATION IS NOT SECURE!</bold></label>
+ <input type="password" id="password" minlength="4" required>
+ <label for="id">ID (OPTIONAL)<br>THIS IS WHAT YOU USE TO LOGIN. <bold>DO NOT LOSE IT!</bold> ONE WILL BE GENERATED IF NOT SPECIFIED.</label>
+ <input type="text" id="id" minlength="4" maxlength="4" pattern="[0123456789abcedfABCDEF]{4}">
+ <input type="submit" class="button formbutton" value="REGISTER">
+ </form>
+ </div>
</div>
<footer>
<center>
- <a href="/">POKO</a>
+ <p>POKO</p>
</center>
</footer>
</body>
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 @@
+<!DOCTYPE html>
+ <head>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="main.css">
+ <script src="main.js" defer></script>
+ </head>
+ <body>
+ <header>
+ <a href="/user.html">
+ <center class="button navbutton">USER</center>
+ </a>
+ <a href="/transfer.html">
+ <center class="button navbutton">TRANSFER</center>
+ </a>
+ <a href="#" onclick="logout()">
+ <center class="button navbutton">LOGOUT</center>
+ </a>
+ </header>
+ <div id="page">
+ <center>
+ <h2>TRANSFER</h2>
+ </center>
+ <hr>
+ <div id="content">
+ <form action="javascript:transfer_form()" class="formbox">
+ <label for="to_id">RECIPIENT ID</label>
+ <input type="text" id="to_id" minlength="4" maxlength="4" pattern="[0123456789abcedfABCDEF]{4}" required>
+ <label for="color">COLOR</label>
+ <select class="button" required>
+ <option>WHITE</option>
+ <option>RED</option>
+ <option>GREEN</option>
+ <option>BLUE</option>
+ <option>YELLOW</option>
+ </select>
+ <label for="amount">AMOUNT</label>
+ <input type="number" id="amount" required>
+ <input type="submit" class="button formbutton" value="SEND">
+ </form>
+ </div>
+ </div>
+ <footer>
+ <center>
+ <p>POKO</p>
+ </center>
+ </footer>
+ </body>
+</html> \ 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 @@
+<!DOCTYPE html>
+ <head>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="main.css">
+ <script src="main.js" defer></script>
+ </head>
+ <body onload="user()">
+ <header>
+ <a href="/user.html">
+ <center class="button navbutton">USER</center>
+ </a>
+ <a href="/transfer.html">
+ <center class="button navbutton">TRANSFER</center>
+ </a>
+ <a href="#" onclick="logout()">
+ <center class="button navbutton">LOGOUT</center>
+ </a>
+ </header>
+ <div id="page">
+ <center>
+ <h2>USER</h2>
+ </center>
+ <hr>
+ <div id="content">
+ <div id="userinfo" class="halfbox">
+ <h3>User Info</h3>
+ <p id="user.name"></p>
+ <p id="user.id"></p>
+ </div>
+ <div id="balance" class="halfbox">
+ <h3>Tokens Balance</h3>
+ </div>
+ <div id="users" class="halfbox">
+ <h3>Users</h3>
+ </div>
+ </div>
+ </div>
+ <footer>
+ <center>
+ <p>POKO</p>
+ </center>
+ </footer>
+ </body>
+</html> \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-07-26 23:32:51 +0000