-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
40 lines (40 loc) · 1.53 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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>