-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
98 lines (90 loc) · 3.89 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Library!</title>
<!-- Fonts and icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <!-- CSS - Frameworks and libraries -->
<link rel="stylesheet" href="https://unpkg.com/bulmaswatch/darkly/bulmaswatch.min.css">
<!-- CSS - proper styles -->
<link rel="stylesheet" href="./styles.css">
<!-- JS - Proper scripts -->
<script src="./script.js" defer></script>
</head>
<body>
<!-- Navbar -->
<nav class="navbar is-black" role="navigation" aria-label="main navigation">
<div class="navbar-menu is-active">
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
<!-- Hero section -->
<section class="hero is-small is-link">
<div class="hero-body container">
<h1 class="title is-1">My Library</h1>
<p class="subtitle">
Keep a record for all your books!
</p>
<button type="button" class="button js-modal-trigger" data-target="add-book-form" id="new-book-btn"> Add New Book +</button>
</div>
</section>
<!-- Content section -->
<section class="box main-content" id="books-section">
</section>
<footer class="footer">
<div class="content has-text-centered">
<p>
Copyright © 2023 | iaaron-xyz <a href="https://github.com/iaaron-xyz" target="_blank"><i class="fa-brands fa-github"></i></a> | <a href="https://github.com/iaaron-xyz/my-library" target="_blank">Source</a>
</p>
<p>Site constructed using <a href="https://bulma.io/" target="_blank">Bulma.io</a></p>
</div>
</footer>
<!-- Modal Form to add a new book -->
<div id="modal-form" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<form action="" onsubmit="saveInfoBook(event)">
<div class="field">
<p class="control">
<label for="title" class="label">New Book Title:</label>
<input type="text" class="input" id="title" name="title" placeholder="Book Title" required>
</p>
</div>
<div class="field">
<p class="control">
<label for="author" class="label">Author name:</label>
<input type="text" class="input" id="author" name="author" placeholder="Author Name" required>
</p>
</div>
<div class="field">
<p class="control">
<label for="pages">Number of pages:</label>
<input type="number" class="input" id="pages" min="1" required>
</p>
</div>
<label class="checkbox">
<input type="checkbox" name="read" id="read">
<label for="read">I read this book</label>
</label>
<div class="field">
<div class="control" id="submit-book-info">
<button class="button is-link" id="add-book-info-btn">Add Book</button>
</div>
</div>
</form>
</div>
</div>
<button class="modal-close is-large" id="modal-close" aria-label="close"></button>
</div>
</body>
</html>