77 lines
2.5 KiB
HTML
77 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title>Notes :: alphabreed</title>
|
|
<meta name="author" content="Stefan Mühlinghaus">
|
|
<meta name="viewport" content="initial-scale=1, user-scalable=no">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
<meta name="theme-color" content="#222">
|
|
<meta name="robots" content="noindex, nofollow">
|
|
<link rel="icon" type="image/vnd.microsoft.icon" href="/img/favicon.ico">
|
|
<script defer src="/js/alpine-alphabreed.js"></script>
|
|
<script defer src="/js/alpine-3.15.3.min.js"></script>
|
|
<style>
|
|
html, body, form, textarea { padding:0; margin:0;
|
|
height:100%; }
|
|
html { background-color:#333; color:#ccc;
|
|
font-family:monospace; font-size:15px; }
|
|
main { height:100%; }
|
|
textarea { border:none; padding:20px; width:100%;
|
|
font-family:inherit; box-sizing:border-box; resize:none;
|
|
background-color:inherit; color:inherit;
|
|
font-size:inherit; outline:none; }
|
|
#pending { position:fixed; top:10px; right:10px; width:20px;
|
|
height:20px; border:3px solid #ccc; border-radius:20px;
|
|
border-color:#ccc #ccc transparent transparent;
|
|
opacity:0; transition:opacity 0.5s; transition-delay:0.5s;
|
|
animation:0.7s linear infinite rotate; }
|
|
#pending.show { opacity:1; }
|
|
@keyframes rotate {
|
|
from { transform:rotate(0deg); }
|
|
to { transform:rotate(359deg); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main x-data="{
|
|
store: null,
|
|
notes: '',
|
|
needCreate: false,
|
|
loaded: false,
|
|
async getNotes() {
|
|
const notes = await this.store.getNotes();
|
|
this.loaded = true;
|
|
if (notes === false) {
|
|
this.needCreate = true;
|
|
return;
|
|
}
|
|
this.notes = notes;
|
|
},
|
|
async saveNotes() {
|
|
if (!this.loaded)
|
|
return;
|
|
if (this.needCreate) {
|
|
const result = await this.store.createNotes(this.notes);
|
|
if (result)
|
|
this.needCreate = false;
|
|
}
|
|
else {
|
|
await this.store.updateNotes(this.notes);
|
|
}
|
|
},
|
|
async init() {
|
|
this.store = Alpine.store('alphabreed');
|
|
this.store.backUrl = '/notes/';
|
|
const tokenOK = await this.store.checkToken();
|
|
if (!tokenOK)
|
|
return;
|
|
await this.getNotes();
|
|
}
|
|
}" @keydown.window.prevent.stop.ctrl.s="saveNotes">
|
|
<textarea autocomplete="off" spellcheck="false" autofocus placeholder="Write notes here..." x-model="notes" @input="$store.alphabreed.pending = true" @input.debounce.500ms="saveNotes"></textarea>
|
|
<div id="pending" :class="{'show': $store.alphabreed.pending}"></div>
|
|
</main>
|
|
</body>
|
|
</html> |