-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
73 lines (63 loc) · 3.23 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Book Finder-Luca Gessi</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="Luca Gessi">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="./js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="shortcut icon" type="image/png" href="book-icon.png"/>
<script src="./js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<script src="./js/script.js"></script>
<div class="container">
<div id="header-title" class="row" style="text-align:center;">
<div id="main-title" class="col col-centered">BOOK FINDER</div>
</div><!-- header-title -->
<div id="header-search-bar" class="row" style="text-align:center;">
<div class=".hidden-md-down col-md-2"></div>
<div class="col-md-8">
<form id="search-form" class="d-flex form-inline active-cyan-4 ">
<div class="flex-grow-1" style="flex-grow: 10;position: relative;">
<input id="search-button" class="form-control form-control-sm" type="text" placeholder="Search by book title or author..." aria-label="Search">
<button id="search-clear" style="display: none;" type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="d-none d-sm-block"><!--<i class="fas fa-search" aria-hidden="true"></i>--> <button id="search-submit" type="submit">Search</button></div>
</form>
</div>
<div class=".hidden-md-down col-md-2"></div>
</div><!-- header-search-bar -->
<div id="loading" class="row" style="display:none;">
<div style="margin-top:20px;text-align: center;" class="col-12">
<i class="fa fa-spinner fa-spin" style="font-size:60px;color:#737373;"></i>
</div>
</div>
<div id="loader" class="row" style="text-align:center;display: none;"> <div class="col col-centered">loading</div></div>
<div id="results" class="row" style="text-align:center;"></div>
<div id="error" class="row" style="display:none;text-align:center;"> <div class="col-12">Error: please provide a search query first </div></div>
<div id="nothing" class="row" style="text-align:center;"> <div class="col-12"><span>☹</span>Nothing Here Yet - Try Searching For A Book!</div></div>
<div id="results-test" class="row" style="display:none;text-align: center;padding: 20px">
<div class="book col-12 col-sm-12 col-lg-6">
<div class="book-container">
<div class="book-image"><img src="http://books.google.com/books/content?id=ayOd_Lu7m_MC&printsec=frontcover&img=1&zoom=5&edge=curl&source=gbs_api"></div>
<div class="book-info">
<div class="book-title"> bell UNO</div> <!-- Titolo libro -->
<div class="book-by">By: British Library</div> <!-- By -->
<div class="book-pub-by">Published By: Pinco Pallino editori</div> <!-- Published By -->
<div class="book-link"><a href="" target="_blank" class="btn" role="button">See this Book</a></div>
</div>
<div class="book-background">
</div>
</div>
</div>
</div><!-- results-test -->
</div><!-- Container -->
</body>
</html>