Skip to content

Commit 84075ec

Browse files
nthnnnthnn
committed
Initial QLibrary home page.
1 parent 737464a commit 84075ec

File tree

1 file changed

+93
-0
lines changed

1 file changed

+93
-0
lines changed

‎demo/qlibrary_app/index.html

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="description" content="Demo library app for QLBase." />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
8+
<title>QLibrary App Demo (QLBase)</title>
9+
10+
<link rel="stylesheet" href="styles/bootstrap.min.css" />
11+
</head>
12+
<body>
13+
<header class="header sticky-top px-4 pt-4">
14+
<nav class="navbar navbar-expand-lg bg-dark border-secondary mx-lg-4" data-bs-theme="dark">
15+
<div class="container-fluid">
16+
<a class="navbar-brand" href="#">📚 QLibrary <small><small class="d-block text-secondary">Demo library app that uses QLBase.</small></small></a>
17+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
18+
<span class="navbar-toggler-icon"></span>
19+
</button>
20+
21+
<div class="collapse navbar-collapse" id="main-navbar">
22+
<div class="navbar-nav me-auto">
23+
<a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#uploadModal">Upload a Book</a>
24+
<a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#aboutModal">About</a>
25+
</div>
26+
27+
<form class="d-flex">
28+
<input class="form-control me-sm-2 bg-light text-white" type="search" placeholder="Search">
29+
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
30+
</form>
31+
</div>
32+
</div>
33+
</nav>
34+
</header>
35+
36+
<div class="px-4">
37+
<div class="px-4 pt-4">
38+
<h4>Available Books</h4>
39+
<hr/>
40+
41+
<div id="loading-view" class="pt-4 pb-1" align="center">
42+
<img src="https://media.tenor.com/mTz7WCbH92oAAAAj/book-transparent.gif" width="180" />
43+
<p class="text-muted">Loading books...</p>
44+
</div>
45+
</div>
46+
</div>
47+
48+
<hr class="mt-4"/>
49+
<footer class="pb-4">
50+
<div align="center">
51+
Copyright 2024 &copy; <a class="text-decoration-none" href="https://github.com/nthnn/QLBase" target="_blank">QLBase</a>
52+
</div>
53+
</footer>
54+
55+
<div class="modal fade" id="aboutModal" tabindex="-1" aria-labelledby="aboutModalLabel" aria-hidden="true">
56+
<div class="modal-dialog modal-dialog-centered">
57+
<div class="modal-content">
58+
<div class="modal-header">
59+
<h5 class="modal-title" id="aboutModalLabel">About QLibrary</h5>
60+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
61+
</div>
62+
<div class="modal-body">
63+
<p>QLibrary is a demonstration application using the services provided by local QLBase server.</p>
64+
</div>
65+
<div class="modal-footer">
66+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
72+
<div class="modal fade" id="uploadModal" tabindex="-1" aria-labelledby="uploadModalLabel" aria-hidden="true">
73+
<div class="modal-dialog modal-dialog-centered">
74+
<div class="modal-content">
75+
<div class="modal-header">
76+
<h5 class="modal-title" id="uploadModalLabel">Upload a Book</h5>
77+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
78+
</div>
79+
<div class="modal-body">
80+
...
81+
</div>
82+
<div class="modal-footer">
83+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
84+
<button type="button" class="btn btn-primary">Save changes</button>
85+
</div>
86+
</div>
87+
</div>
88+
</div>
89+
90+
<script src="scripts/jquery.min.js"></script>
91+
<script src="scripts/bootstrap.bundle.min.js"></script>
92+
</body>
93+
</html>

0 commit comments

Comments
 (0)