-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
130 lines (129 loc) · 5.65 KB
/
Copy pathindex.html
File metadata and controls
130 lines (129 loc) · 5.65 KB
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>PhotoGallery</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma-rtl.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="container is-fluid">
<section class="section" id="headerArea">
<div class="container has-text-centered">
<h1 class="title">
Stelios Karakostas
</h1>
<p class="subtitle">
A photo gallery with data from <strong>UnsplashApi</strong>!
</p>
</div>
</section>
<section class="section" id="searchArea">
<div class="container is-fluid field has-addons">
<p class="control is-expanded">
<input class="input is-normal" id="searchBar" type="search" placeholder="Search">
</p>
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
<span>Examples</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu-quickSearch" role="menu">
<div class="dropdown-content">
<a class="dropdown-item" onclick="setUserSearch('Sea')">
Sea
</a>
<a class="dropdown-item" onclick="setUserSearch('Mountain')">
Mountain
</a>
<a class="dropdown-item" onclick="setUserSearch('Wallpaper')">
Wallpaper
</a>
<a class="dropdown-item" onclick="setUserSearch('City')">
City
</a>
<a class="dropdown-item" onclick="setUserSearch('People')">
People
</a>
<a class="dropdown-item" onclick="setUserSearch('Code')">
Code
</a>
<a class="dropdown-item" onclick="setUserSearch('Animals')">
Animals
</a>
</div>
</div>
</div>
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
<span>PerPage</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu-PerPage" role="menu">
<div class="dropdown-content">
<a class="dropdown-item" onclick="setItemsPerPage(12)">
12
</a>
<a class="dropdown-item" onclick="setItemsPerPage(24)">
24
</a>
<a class="dropdown-item" onclick="setItemsPerPage(36)">
36
</a>
<a class="dropdown-item" onclick="setItemsPerPage(48)">
48
</a>
</div>
</div>
</div>
<p class="control">
<button class="button is-info" id="searchButton">Search</button>
</p>
</div>
<div class="container is-fluid is-size-5 has-text-left is-family-monospace mt0" id="results"></div>
<div class="container is-fluid columns mt-5 mgb=0">
<div class="column control is-expanded">
</div>
<div class="field has-addons is-pulled-right">
<p class="control">
<button class="button is-centered is-focused" onclick="setOrderBy('relevant')">
Relevant
</button>
</p>
<p class="control">
<button class="button is-centered" onclick="setOrderBy('latest')">
Latest
</button>
</p>
</div>
</div>
</section>
<section class="section">
<div class="container is-fluid">
<div class="columns box is-multiline " id="elements"></div>
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
<a class="pagination-previous" onclick="previousPage()" id="prevPageB">Previous</a>
<a class="pagination-next" onclick="nextPage()" id="nextPageB">Next page</a>
<ul class="pagination-list" id="myPagination"></ul>
</nav>
</div>
</section>
</section>
<script src="JS/createElements.js"></script>
<script src="JS/functions.js"></script>
<script src="JS/listeners.js"></script>
<script src="JS/requestsAjax.js"></script>
<script src="JS/main.js"></script>
</body>
</html>