-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
62 lines (54 loc) · 2.87 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Soviet Posters & Europeana</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<!-- Bootstrap navbar -->
<nav class="navbar navbar-expand-lg sticky-top">
<nav class="navbar-brand">Soviet Posters & Europeana</nav>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
<a class="nav-link" href="about.html">About the project</a>
</div>
</div>
<form class="form-inline" onsubmit="return false">
<button class="btn btn-outline-success my-2 my-sm-0" type="button" onclick="downloadElements(document.forms[0].elements.rows)">Load the posters!</button>
</form>
</nav>
<!-- scroll indicator -->
<div class="header sticky-top">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
<!-- intro -->
<div class="container-fluid">
<h1>Click 'Load the posters!' button.</h1>
<p>You will see the first 500 posters available on the Europeana APIs as a single grid of images sorted by colors extracted from metadata.
This method allows to explore large numbers of graphic objects, while still being able to see each image separately.
When all the images are displayed simultaneously it makes it easier to compare them and observe patterns, differences and similarities in composition or color. </p>
<p>Please note that loading the posters may take a few minutes.</p>
</div>
<!-- images -->
<div class="images" id="images">
</div>
<!-- scripts -->
<script src="scripts/lodash.js" type="text/javascript"></script>
<script src="env.js"></script>
<script src="scripts/functions.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>