forked from fenwick67/esp32-chatterbox
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
116 lines (107 loc) · 2.31 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title>ChatterBox</title>
</head>
<body>
<div><p><b>ChatterBox</b></p></div>
<noscript>
<p>Sorry, you'll need javascript to submit a post... but here's what people have been saying:</p>
<iframe sandbox src="./posts"></iframe>
</noscript>
<div id="l"></div>
<div id="f">
<input type="text" id="u" value="Anon">
<textarea type="text" id="t"></textarea>
<button id="s">Post</button>
</div>
<script type="text/javascript">
var log=console.error;
var $=i=>document.getElementById(i);
var ready=true;
g=()=>{/*get new messages*/
if(!ready){return;}
fetch('./posts')
.then(r=>r.text())
.then((t)=>{
$('l').innerHTML=t
.split('\u001e')
.map(s=>s.replace(/</g,'<'))
.map(s=>s.replace(/>/g,'>'))
.map(s=>s.replace(/\n/g,'<br>'))
.map(s=>'<p>'+s+'</p>')
.join('');
ready=true;
})
.catch((e)=>{
log(e);
ready=true;
});
};
g();
setInterval(g,1000);
$('s').addEventListener('click',e=>{
var fd = new FormData();
fd.append('user', $('u').value);
fd.append('mesg', $('t').value);
fetch('./post',{method:'POST',body: fd})
.then(r=>{
$('t').value='';
g();
})
.catch(e=>{
log(e);
g();
})
});
</script>
<style type="text/css">
div{
width:100%;
display:block;
}
#f{
display:flex;
align-items:stretch;
height:50px;
}
p{
border-bottom:solid 1px rgba(0,0,0,0.1);
padding:1em;
margin:0;
word-wrap:break-word;
}
#u,#t,#s{
padding:0;
line-height:50px;
font-size:20px;
height:50px;
}
#t{
flex:1 0 auto;
margin-bottom:0px;
margin-top:0px;
}
#u{
width:100px;
}
#s{
padding:0 1em;
}
html,body{
width:100%;
min-height:100%;
margin:0;
padding:0;
font-size:20px;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
body{
display:flex;
flex-direction:column;
}
</style>
</body>
</html>