|
868
|
1 html
|
|
|
2 head
|
|
|
3 style
|
|
|
4 body {
|
|
|
5 background: black;
|
|
|
6 color: white;
|
|
1002
|
7 width: 1024px;
|
|
|
8 height: 600px;
|
|
|
9 overflow: hidden;
|
|
868
|
10 }
|
|
1002
|
11
|
|
|
12 h1, p {
|
|
|
13 background: hsla(0, 0%, 0%, 0.47);
|
|
|
14 display: inline-block;
|
|
|
15 font-size: 31px;
|
|
|
16 padding: 7px;
|
|
|
17 }
|
|
|
18
|
|
868
|
19 img#main {
|
|
|
20 position: absolute;
|
|
|
21 left: 0px;
|
|
|
22 top: 0px;
|
|
1002
|
23 width: 1024px;
|
|
|
24 height: 600px;
|
|
868
|
25 z-index: -10;
|
|
|
26 }
|
|
1002
|
27 div#feeder {
|
|
|
28 box-shadow: 5px 5px 112px hsl(0, 0%, 0%);
|
|
|
29 position: absolute;
|
|
|
30 left: 180px;
|
|
|
31 top: 61px;
|
|
|
32 border: 2px solid white;
|
|
|
33 }
|
|
|
34 div#feeder img {
|
|
|
35
|
|
|
36 }
|
|
868
|
37 body
|
|
1002
|
38 img(id='main', src="")
|
|
|
39 div(id='feeder')
|
|
868
|
40 h1 Ari's bed cactus
|
|
1002
|
41 div(style="position: absolute; right: 20px; top: 20px")
|
|
|
42 button(data-bind="click: toggleFeederCam")
|
|
|
43 | toggle feeder
|
|
|
44 button(data-bind="click: nextImage") next image
|
|
|
45 p(style="position:absolute; left: 20px; top:500px")
|
|
|
46 | Picture
|
|
|
47 span(data-bind="text: imageIndex() + 1")
|
|
|
48
|
|
868
|
49 script(src="../lib/jquery-1.9.1.min.js")
|
|
1002
|
50 script(src="../lib/knockout-2.3.0.js")
|
|
868
|
51 script(src='show.js')
|
|
1002
|
52
|
