hibiscus/pages/index.html

100 lines
No EOL
3.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <link rel="stylesheet" href="/public/css/main.css">-->
<link rel="stylesheet" href="/public/css/pico.red.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hibiscus.txt</title>
</head>
<body>
<header class="container">
<h1 style="margin-bottom:0;">🌺 Hibiscus.txt</h1>
<p id="status" style="margin-top:0;">Today is <span id="today-date">14/03/2024</span></p>
</header>
<main class="container">
<h2 style="margin-bottom:0;"><label for="day">Your day so far:</label></h2>
<textarea id="day" name="Day entry" cols="40" rows="10" style="max-width: 640px; width: 100%"></textarea>
<div class="grid"><button onclick="saveToday()">Save</button></div>
<h2><label for="log">Log</label></h2>
<input type="text" id="log" name="log" style="max-width: 640px; width: 100%"/>
<div class="grid"><button onclick="saveLog()">Save</button></div>
</main>
<footer class="container">
<p><a href="/page/sitemap" class="no-accent"></a> v0.0.1 | PoC using <a href="https://picocss.com">PicoCSS</a></p>
</footer>
</body>
<script defer>
function updateTime() {
let todayDate = new Date()
let timeField = document.getElementById("today-date")
timeField.innerText = todayDate.toISOString().split('T')[0]
}
updateTime()
async function postData(url = "", data = "") {
const response = await fetch(url, {
method: "POST",
credentials: "same-origin",
headers: {
"Content-Type": "text/plain",
},
redirect: "follow",
referrerPolicy: "no-referrer",
body: data,
});
if (response.ok) {
return response.text();
} else {
return response.status
}
}
async function getData(url = "", data = "") {
const response = await fetch(url, {
method: "GET",
credentials: "same-origin",
redirect: "follow",
referrerPolicy: "no-referrer"
});
if (response.ok) {
return response.text();
} else {
console.log(response.text())
return response.status
// return "Error"
}
}
function saveLog() {
let logField = document.getElementById("log")
postData("/api/log", logField.value).then((data) => {
if (data !== 500) {
logField.value = ""
}
});
}
function saveToday() {
let logField = document.getElementById("day")
postData("/api/today", logField.value).then((data) => {
console.log(data);
});
}
function loadToday() {
let dayField = document.getElementById("day")
getData("/api/today", dayField.value).then((data) => {
if (data !== 404) {
dayField.value = data
} else {
dayField.value = ""
}
});
}
loadToday()
</script>
</html>