FreePad/templates/pages/page.html

127 lines
5.5 KiB
HTML
Raw Normal View History

2022-05-15 20:40:22 +03:00
{{ template "inc/header.html" .}}
2022-05-18 01:36:18 +03:00
<style>
#pad-content {
height: 16rem;
}
2022-05-18 01:36:18 +03:00
</style>
2022-05-15 20:40:22 +03:00
<body>
2022-05-19 01:43:18 +03:00
<main id="main-card" class="container rounded mt-5 shadow-sm">
<div class="p-3">
2022-05-20 02:19:19 +03:00
<a href="/" class="logo-container w-100 d-flex mb-4">
<img src="/static/img/logo_transparent.png" alt="Logo" style="max-width: 50%; margin: 0 auto;" class="mx-auto">
2022-05-20 02:19:19 +03:00
</a>
2022-05-15 20:40:22 +03:00
</div>
2022-05-18 01:36:18 +03:00
2022-05-20 01:40:21 +03:00
<textarea name="pad-content" id="pad-content" onchange="sendMyData(this)" onkeydown="updateStatus(`Not Saved`, `text-danger`)" class="form-control">{{.post_content}}</textarea>
<div id="pad-status" class="my-4 row">
2022-05-20 01:40:21 +03:00
<div class="col-md-12 col-lg-4 col-xl-4" title="Status">
<div class="input-group">
<span class="input-group-text">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-reception-3" viewBox="0 0 16 16">
<path d="M0 11.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2zm4-3a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-5zm4-3a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-8zm4 8a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
</svg>
</span>
<input type="text" class="form-control" readonly value="Loaded" id="loading_status">
</div>
</div>
<div class="col-md-12 col-lg-4 col-xl-4 mt-4 mt-lg-0 mt-xl-0" title="Current Viewers">
<div class="input-group">
<span class="input-group-text">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"></path>
<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"></path>
</svg>
</span>
<input type="text" class="form-control" readonly value="1">
</div>
</div>
2022-05-20 01:40:21 +03:00
<div class="col-md-12 col-lg-4 col-xl-4 mt-4 mt-lg-0 mt-xl-0" title="Last Modified">
<div class="input-group">
<span class="input-group-text">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hourglass-split" viewBox="0 0 16 16">
<path d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2h-7zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48V8.35zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z"/>
</svg>
</span>
2022-05-20 01:40:21 +03:00
<input type="text" class="form-control" id="last_modified_" readonly value="{{.last_modified}}">
</div>
</div>
</div>
<footer class="text-muted py-5 text-center">
<p class="mb-1">
FreePad by <a href="https://justkato.me/">©Kato Twofold</a>
</p>
<p class="mb-0">
FreePad is freely available over on our <a href="https://github.com/JustKato/FreePad">GitHub</a>
</p>
</footer>
</main>
2022-05-15 20:59:46 +03:00
{{ template "inc/theme-toggle.html" .}}
2022-05-18 01:36:18 +03:00
</body>
2022-05-20 01:40:21 +03:00
<script>
function sendMyData(el) {
const formData = new FormData();
el.setAttribute(`readonly`, `1`);
formData.set("content", el.value);
updateStatus(`Attempting to save...`, `text-warning`);
fetch(window.location.href.toString(), {
body: formData,
method: "post",
})
.then( resp => {
console.log(resp);
resp.json()
.then( e => {
console.log(e.pad);
document.getElementById(`last_modified_`).value = e.pad.last_modified;
updateStatus(`Succesfully Saved`, `text-success`);
})
.catch( err => {
console.error(err);
updateStatus(`Failed to Save`, `text-error`);
})
})
.catch( err => {
console.error(err);
updateStatus(`Failed to Save`, `text-error`);
})
.finally( () => {
el.removeAttribute(`readonly`);
})
}
function updateStatus(txt, cls) {
const loading_status = document.getElementById(`loading_status`)
loading_status.value = txt;
loading_status.classList.remove("text-danger", "text-warning", "text-success", "text-white", "text-primary");
loading_status.classList.add(cls);
}
document.addEventListener(`DOMContentLoaded`, e => {
document.getElementById(`pad-content`).focus();
})
</script>
{{ template "inc/footer.html" .}}