-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
74 lines (69 loc) · 2.74 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="main-container">
<div class="header">
<h1>Digital Library</h1>
<dialog>
<button value="cancel" id="cancel" formmethod="dialog" autofocus></button>
<form>
<label for="title">Book Title</label>
<input type="text" id="title" name="title" required autocomplete="off" maxlength="50">
<label for="author">Author</label>
<input type="text" id="author" name="author" required autocomplete="off" maxlength="50">
<label for="genre">Genre</label>
<select id="genre" name="genre" required>
<option value="Fiction">Fiction</option>
<option value="Non-fiction">Non-fiction</option>
<option value="Mystery">Mystery</option>
<option value="Sci-fi">Sci-Fi</option>
<option value="Fantasy">Fantasy</option>
<option value="Romance">Romance</option>
<option value="Biography">Biography</option>
<option value="Comedy">Comedy</option>
<option value="Horror">Horror</option>
<option value="History">History</option>
</select>
<label for="pageCount">Number of pages</label>
<input type="number" id="pageCount" min="1" name="pageCount" required max="9999">
<label for="isRead">
Have you read it?
<input type="checkbox" id="isRead" name="isRead">
<div class="custom-checkbox">
<div class="checkmark"></div>
</div>
</label>
<button type="submit" id="submit-btn" value="Submit">Submit</button>
</form>
</dialog>
</div>
<div class="library-wrapper">
<button class="modal-btn">
<span>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<g id="Edit / Add_Plus">
<path id="Vector" d="M6 12H12M12 12H18M12 12V18M12 12V6" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</g>
</svg>
</span>
</button>
</div>
<div class="footer">Copyright © 2023
<a href="https://github.com/VHadyak" target="_blank">VHadyak</a>
</div>
</div>
</div>
</body>
</html>