WebLibrary/index.html at main · FriendsNone/WebLibrary · GitHub

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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vinorodrigues/bootstrap-dark@0.0/dist/bootstrap-dark.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <title>WebLibrary</title>
  </head>
  <body>
    <header>
      <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
        <div class="container">
          <a class="navbar-brand my-auto h1" href="index.html">WebLibrary</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#headerNav">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="headerNav">
            <div class="navbar-nav mr-auto">
              <a class="nav-link" href="login.html">Catalog</a>
              <a class="nav-link" href="blog.html">Blog posts</a>
              <a class="nav-link" href="about.html">About</a>
            </div>
            <div>
              <a class="btn btn-secondary btn-sm my-2 mr-1" href="login.html">Log in</a>
              <a class="btn btn-primary btn-sm my-2 ml-1" href="signup.html">Sign up</a>
            </div>
          </div>
        </div>
      </nav>

      <!-- <section class="d-flex align-items-center position-relative vh-100" style="background:linear-gradient(rgba(25, 25, 25, 0.5), rgba(25, 25, 25, 0.5)), url(assets/library.jpg);">
          <div class="container my-5 text-center text-white">
            <h1>Welcome to WebLibrary</h1>
            <p>The free and open-source library management system.</p>
            <a class="btn btn-primary mt-3" href="login.html">Browse the catalog</a>
          </div>
      </section> -->

      <section class="jumbotron jumbotron-fluid my-5 text-center bg-dark text-white" style="background-image: url(assets/library.jpg); background-repeat: no-repeat; background-position: center center;">
        <div class="container my-5">
          <h1>Welcome to WebLibrary</h1>
          <p>The free and open-source library management system.</p>
          <a class="btn btn-primary mt-3" href="login.html">Browse the catalog</a>
        </div>
      </section>
    </header>

    <main>
      <section class="container my-5">
        <!-- TODO: Implement announcement functionality -->
        <h5><i class="bi bi-megaphone"></i> Announcements</h2>
        <div class="card border-danger mt-3">
          <div class="card-body">
            <h5 class="card-title">System maintenance</h5>
            <p class="card-text">
              Starting December 1, 2021. The WebLibrary staff will be doing a monthly system maintenance. Expect online services to degrade or go offline during the maintenance.
            </p>
          </div>
          <div class="card-footer text-muted text-right">
            Announced 1 week ago by WebLibrary Staff
          </div>
        </div>
      </section>

      <section class="container my-5">
        <!-- TODO: Implement blog functionality -->
        <!-- TODO: Add blog links -->
        <h5><i class="bi bi-card-heading"></i> Blog posts</h2>
        <div class="row row-cols-1 row-cols-lg-3 mt-3">
          <div class="col mb-3">
            <div class="card h-100">
              <div class="card-body">
                <h5 class="card-title">Staff picked books to read this holiday season!</h5>
                <p class="card-text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit ipsum, officia quibusdam modi nesciunt error sit impedit explicabo velit. Suscipit.
                </p>
              </div>
              <div class="card-footer text-muted text-right">
                Posted 3 days ago
              </div>
            </div>
          </div>
          <div class="col mb-3">
            <div class="card h-100">
              <div class="card-body">
                <h5 class="card-title">Upcoming books that you don't wanna miss!</h5>
                <p class="card-text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium illo cumque, beatae quod dolorum quia, earum exercitationem odit itaque tenetur, dolorem minus quidem repudiandae porro.
                </p>
              </div>
              <div class="card-footer text-muted text-right">
                Posted 4 days ago
              </div>
            </div>
          </div>
          <div class="col mb-3">
            <div class="card h-100">
              <div class="card-body">
                <h5 class="card-title">Book of the Week!</h5>
                <p class="card-text">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione molestias quibusdam voluptatem dolore itaque culpa quidem beatae dolor nam. Ut fuga facere beatae consequuntur dolorum esse delectus adipisci accusamus iure?
                </p>
              </div>
              <div class="card-footer text-muted text-right">
                Posted 5 days ago
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- TODO: Add more content suitable for the front page -->
    </main>

    <footer>
      <div class="container my-5 text-center text-muted">
        <ul class="list-unstyled">
          <li class="my-1">WebLibrary &copy; 2021</li>
          <li class="my-1">This is a non-functioning prototype.<br>UI/UX is subject to change.</li>
          <li class="my-1">
            <a href="https://github.com/FriendsNone/WebLibrary">Source code</a>
          </li>
        </ul>
      </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>