-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (133 loc) · 4.67 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
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="icon" href="favicon.png" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<title>Local Libary - Admin Dashboard</title>
</head>
<body>
<header class="container-fluid bg-light border-bottom">
<nav class="row align-items-center">
<h1 class="h4 px-3">Local Library</h1>
<div class="col">
<ul class="nav py-3">
<li class="nav-item">
<a class="nav-link active" href="./index.html">Overall Stats</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./books.html">Stats by Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./accounts.html">Stats by Account</a>
</li>
</ul>
</div>
</nav>
</header>
<main class="container my-4">
<section class="row">
<!-- General stats -->
<article class="mt-4 col-12 col-md">
<div class="card">
<h2 class="py-4 card-header">General Stats</h2>
<div class="card-body">
<p class="card-text">
There are
<span
id="total-book-count"
class="font-weight-bold text-primary"
>0</span
>
total books at the library.
</p>
<p class="card-text">
There are
<span
id="total-borrow-count"
class="font-weight-bold text-primary"
>0</span
>
books currently being borrowed.
</p>
<p class="card-text">
There are
<span
id="total-accounts-count"
class="font-weight-bold text-primary"
>0</span
>
accounts registered with the library.
</p>
</div>
</div>
</article>
<!-- Most common genres -->
<article class="mt-4 col-12 col-md">
<div class="card">
<h2 class="py-4 card-header">Most Common Genres</h2>
<div class="card-body">
<p class="card-text">
Out of all of the books listed, the following genres are the
ones that occurred the most number of times.
</p>
</div>
<ul id="most-common-genres" class="list-group list-group-flush">
<li class="list-group-item">No genres listed.</li>
</ul>
</div>
</article>
</section>
<section class="row">
<!-- Most popular books -->
<article class="mt-4 col-12 col-md">
<div class="card">
<h2 class="py-4 card-header">Most Popular Books</h2>
<div class="card-body">
<p class="card-text">
Out of all of the books listed, the following are the most
popular. This number is generated based on the number of times a
book has been taken out.
</p>
</div>
<ul id="most-popular-books" class="list-group list-group-flush">
<li class="list-group-item">No books listed.</li>
</ul>
</div>
</article>
<!-- Most popular authors -->
<article class="mt-4 col-12 col-md">
<div class="card">
<h2 class="py-4 card-header">Most Popular Authors</h2>
<div class="card-body">
<p class="card-text">
Out of all of the books listed, the following authors are the
most popular. This number is generated based on the number of
times an author's book has been taken out.
</p>
</div>
<ul id="most-popular-authors" class="list-group list-group-flush">
<li class="list-group-item">No authors listed.</li>
</ul>
</div>
</article>
</section>
</main>
<script src="./data/accounts.js"></script>
<script src="./data/authors.js"></script>
<script src="./data/books.js"></script>
<script src="./setup.js"></script>
<script src="./src/home.js"></script>
<script src="./renderers/home.js"></script>
</body>
</html>