-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (119 loc) · 5.07 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jiji's Book Service | All Of The Books You Want</title>
<!-- fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<!-- styles -->
<link rel="stylesheet" href="./build/style.css">
<link rel="stylesheet" href="./assets/styles/font-awesome.min.css">
<!-- scripts -->
<script src="./scripts/genre.js"></script>
<script src="./scripts/book.js"></script>
<script src="./scripts/script.js"></script>
</head>
<body onload="start()">
<header class="sticky">
<nav>
<ul class="flex center-self">
<li class="selected" id="homebtn"><a href="#home">HOME</a></li>
<li id="categoriesbtn"><a href="#categories">SEARCH</a></li>
<li id="booksbtn"><a href="#books">CATALOG</a></li>
<li id="addbookbtn"><a href="#" onclick="showAddBook()">ADD BOOK</a></li>
</ul>
</nav>
</header>
<div class="component" id="home">
<div class="bg"></div>
<article>
<h1>Jiji's Book Service</h1>
<p>ALL OF THE BOOKS YOU WANT</p>
<button onclick="showAddBook()">Add a Book</button>
</article>
</div>
<div class="component sticky" id="categories">
<div class="form">
<input type="text" name="name" id="nameId" placeholder="Name">
<input type="text" name="author" id="authorId" placeholder="Author">
<input type="text" pattern="\d*" name="datefrom" id="dateFromId" placeholder="Publish Date From">
<input type="text" pattern="\d*" name="dateto" id="dateToId" placeholder="Publish Date To">
<div class="dropdown">
<div class="dropbtn" id="genresId">Genre</div>
<div class="dropdown-content">
</div>
</div>
<button><i class="fa fa-search"></i></button>
</div>
</div>
<div class="component" id="books">
<div class="book">
<div class="border"></div>
<h2>Book Name</h2>
<p class="author">by Book Author</p>
<img src="" alt="">
<p class="price">$Price</p>
</div>
<div class="book">
<div class="border"></div>
<h2>Book Name</h2>
<p class="author">by Book Author</p>
<img src="" alt="">
<p class="price">$Price</p>
</div>
<div class="book">
<div class="border"></div>
<h2>Moby Dick</h2>
<p class="author">by Herman Melville</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTdI_bt7Hu22IteheNoPt_434n4vrBJqS-FkXqFi7iCKrTFg4uf" alt="">
<p class="price">$ 31.15</p>
</div>
<div class="book">
<div class="border"></div>
<h2>Book Name</h2>
<p class="author">by Book Author</p>
<img src="" alt="">
<p class="price">$Price</p>
</div>
<div class="book">
<div class="border"></div>
<h2>Book Name</h2>
<p class="author">by Book Author</p>
<img src="" alt="">
<p class="price">$Price</p>
</div>
</div>
<footer class="flex">
<p>© David Tsiklauri 2020</p>
<div class="social">
<i class="fa fa-facebook-square"></i>
<i class="fa fa-twitter-square"></i>
<i class="fa fa-github-square"></i>
<i class="fa fa-linkedin-square"></i>
</div>
</footer>
<div class="component" id="info">
</div>
<div class="component" id="addbook">
<div class="flex">
<h2>Add a Book</h2>
<input type="text" pattern=".+" name="addname" id="addname" placeholder="Name *">
<input type="text" pattern=".+" name="addauthor" id="addauthor" placeholder="Author *">
<input type="text" pattern="\d+" name="adddate" id="adddate" placeholder="Publish Date (format: 2000) *">
<div class="dropdown">
<div class="dropbtn" id="addgenresId">Genre</div>
<div class="dropdown-content">
</div>
</div>
<input type="url" name="addimg" id="addimg" placeholder="Image Link *">
<input type="text" pattern="\d+\.?\d*" name="addprice" id="addprice" placeholder="Price *">
<input type="url" name="addlink" id="addlink" placeholder="URL of amazon *">
<textarea name="description" id="descriptionid" cols="30" rows="10" placeholder="Description"></textarea>
<button onclick="addbook()">Add</button>
<button class="close" onclick="closeAddBook()"><i class="fa fa-close"></i></button>
</div>
</div>
</body>
</html>