-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
86 lines (79 loc) · 3.71 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
<!DOCTYPE html>
<html>
<head>
<title>Encyclopedia of Life</title>
<script src="jquery-1.7.2.min.js"></script>
<script src="knockout-2.1.0.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="journal.bootstrap.min.css">
<link href='http://fonts.googleapis.com/css?family=Norican' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="eol.css">
<link rel="shortcut icon" href="/eol/favicon.ico" />
</head>
<body data-bind="style: { 'overflow-y': modalOpen() ? 'hidden' : 'scroll' }">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div class="nav">
<form class="navbar-search pull-left">
<input type="text" class="search-query span2" name="q" placeholder="Search">
<div class="icon-search"></div>
</form>
</div>
<ul class="nav menu pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="?collection=736">Best Images on EOL</a></li>
<li class="divider"></li>
<li><a href="?collection=31473">My Collection</a></li>
<li class="divider"></li>
<li><a href="?continue=1">Continue Browsing</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="title-navbar navbar-fixed-top">
<div class="title" data-bind="style: { 'width': modalOpen() ? '315px' : '300px' }">
<a href="index.html"><h2>Encyclopedia of Life</h2></a>
</div>
</div>
<div data-bind="foreach: viewables, style: { height: contentHeight()+'px' }">
<div class="cell" data-bind="style: { left: (left + 'px'), top: (top + 'px') }, click: $root.selectItem">
<div class="life">
<img data-bind="attr: { src: mediumImage }">
</div>
</div>
</div>
<div data-bind="foreach: loading">
<div class="cell" data-bind="visible: visible(), style: { left: (left() + 'px'), top: (top() + 'px') }">
<div class="loading">
<img src="loading.gif">
</div>
</div>
</div>
<div class="modal fade hide" data-bind="with: selectedItem">
<div class="modal-body">
<div class="modal-image">
<a target="_blank" data-bind="attr: { href: fullSizeImage }"><img data-bind="attr: { src: largeImage }"></a>
</div>
<a target="_blank" data-bind="attr: { href: 'http://eol.org'+link }">
<h1 data-bind="text: filename"></h1>
<h3 data-bind="text: name"></h3>
</a>
</div>
<div class="modal-footer">
<div data-bind="style: { display: $root.statusMessage() == '' ? 'block' : 'none' }">
<a class="btn btn-primary" data-bind="click: $root.collect, style: { display: $root.collection_id ? 'none' : 'block' }">Collect!</a>
<a class="btn btn-primary" data-bind="click: $root.remove, style: { display: $root.collection_id == 31473 ? 'block' : 'none' }">Remove</a>
</div>
<div class="alert alert-block alert-success" data-bind="visible: $root.statusMessage() != ''">
<span data-bind="text: $root.statusMessage()"></span>
</div>
</div>
</div>
<script src="eol.js"></script>
</body>
</html>