-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·32 lines (31 loc) · 1.49 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
<!DOCTYPE html>
<html>
<head>
<script src="/socket.io/socket.io.js"></script>
<script src="/jquery.js"></script>
<script src="/client.js"></script>
<style>
#todays-topic {background: green; color: white; padding: 5px;}
#img-container {position: relative; width: 400px; height: 300px; border: 1px #000 solid; background: #eee;}
img {position: absolute; top: 0; left: 0;}
#hotspot { width: 20px; height: 20px; border-radius: 10px; position: absolute; background: yellow; border: 1px red solid; top: 10px; left: 10px;}
#mover {position: absolute; top: -18px; font-weight: bold; width: 200px; left: -90px; text-align: center;}
body { margin: 0; padding: 0; }
</style>
</head>
<body>
<div><label for="input-name">Name: <input type='text' id="input-name" value="Anon"></label></div>
<div><label for="input-topic">Topic: <input type='text' id="input-topic"></label><input id="input-share" type="submit" value="Share"></div>
<div>
<label for="input-img">Img URL: <input type='text' id="input-img"></label><input id="input-share2" type="submit" value="Share">
<a class="quick" href="http://www.outshine.com/images/lolcatz/lolcat6.jpg">C</a>
<a class="quick" href="http://www.outshine.com/images/lolcatz/lolcat9.jpg">A</a>
<a class="quick" href="http://www.lolcats.com/images/u/12/43/lolcatsdotcomlikemyself.jpg">T</a>
</div>
<h2 id="todays-topic"></h2>
<div id="img-container">
<img src="" width="400" height="300">
<div id="hotspot"><div id="mover"></div></div>
</div>
</body>
</html>