This repository has been archived by the owner on Jun 17, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
squawk.html
90 lines (71 loc) · 2 KB
/
squawk.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
<html>
<head>
<style>
body {
text-align: center;
background-image: url('debut_dark.png');
margin: 0;
}
#container {
margin: 0 auto;
width: 920px;
background-color: white; opacity: 0.9;
}
#container:after { clear: both;}
#header { background-image: url('twinkle_twinkle.png'); color: #888; text-align: left; height: 30px;}
#actions { width: 280px; float:left; background-color: #666; padding: 10px; overflow: hidden;}
#messages-container { background-color: #666; padding: 10px; overflow: hidden;}
#send { margin-top: 10px; padding: 4px; border-radius: 6px; background-color: silver; }
#send input { display: block; }
#send input[type='text'] { width: 100%;}
#messages { border-radius: 6px; background-color: white; }
#gpio { background-color: white; padding: 10px; border-radius: 6px;}
.io { height: 10px; width: 10px; padding: 2px; content: '.'; display: inline-block;}
.io.on { background: #0a0; }
.io.off { background: #a00; }
.message { text-align: left; padding: 8px; border-radius: 2px; }
.message .avatar { float:left; }
.message .body { display: inline-block; vertical-align: top; margin-top: 4px;}
.message .body .from { font-weight: bold;}
.message .time { float: right;}
</style>
</head>
<body>
<div id="container">
<div id="header">
Squawk
</div>
<div id="actions">
<div id="gpio">
<div class="io on"></div>
<div class="io off"></div>
</div>
<div id="send">
<form action="squawk">
Name:
<input type="text" name="name" />
Message:
<input type="text" name="message" />
Avatar:
<select name="avatar">
<option>Default</option>
</select>
<input type="submit" />
</form>
</div>
</div>
<div id="messages-container">
<div id="messages">
[MESSAGES]
<div class="message">
<img src="http://placehold.it/48x48" />
<div class="body">
<span class="from">From</span><br/><span class="body">Message</span>
</div>
<div class="time">15:37</div>
</div>
</div>
</div>
</div>
</body>
</html>