41 lines
1.5 KiB
Text
41 lines
1.5 KiB
Text
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>${title}</title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<!-- see docs @ https://alpinejs.dev -->
|
||
|
|
<script src="//unpkg.com/alpinejs" defer></script>
|
||
|
|
<body x-data>
|
||
|
|
<div style="position:relative">
|
||
|
|
<div class="container" style="height:99vh;width:400px;margin:0 auto;margin-top:40px;">
|
||
|
|
<center>
|
||
|
|
<img src="https://github.com/coderofsalvation/soakbean/raw/master/.dtp/soakbean.jpg"/><br>
|
||
|
|
<img src="https://github.com/coderofsalvation/soakbean/raw/master/.dtp/soakbean.gif" style="width:100%"/>
|
||
|
|
</center>
|
||
|
|
<br><br>
|
||
|
|
<div class="title">${title}</div>
|
||
|
|
<br>
|
||
|
|
<template x-for="note in $store.app.notes">
|
||
|
|
<div><b x-text="note"></b></div>
|
||
|
|
</template>
|
||
|
|
<br>
|
||
|
|
Read <a href="https://github.com/coderofsalvation/soakbean" target="_blank">the documentation here</a>.
|
||
|
|
<div style="position:absolute;bottom:150px">
|
||
|
|
<center x-text="$store.app.time"></center>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
document.addEventListener('alpine:init', () => {
|
||
|
|
Alpine.store('app', {notes:[],title:''}) // expected schema
|
||
|
|
fetch('/data')
|
||
|
|
.then( (res) => res.json() )
|
||
|
|
.then( (app) => Alpine.store('app',app) )
|
||
|
|
setInterval( () => Alpine.store('app').time = new Date(), 300 )
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
<style type="text/css"> * { font-family:helvetica; color:#555; }</style>
|
||
|
|
</body>
|
||
|
|
</html>
|