StudyRoomTracker.github.io/index.html at main · StudyRoomTracker/StudyRoomTracker.github.io · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>RPI Study Room Tracker</title>
    <link rel="ICON" href="logo-modified.png" type="image/x-icon" />

    <!-- update the version number as needed -->
    <script defer src="/__/firebase/9.8.4/firebase-app-compat.js"></script>
    <!-- include only the Firebase features as you need -->
    <script defer src="/__/firebase/9.8.4/firebase-auth-compat.js"></script>
    <script defer src="/__/firebase/9.8.4/firebase-database-compat.js"></script>
    <script defer src="/__/firebase/9.8.4/firebase-firestore-compat.js"></script>
    <script defer src="/__/firebase/9.8.4/firebase-functions-compat.js"></script>
    <script defer src="/__/firebase/9.8.4/firebase-messaging-compat.js"></script>
    <script defer src="/__/firebase/9.8.4/firebase-storage-compat.js"></script>
    <script defer src="/__/firebase/9.8.4/firebase-analytics-compat.js"></script>
    <script defer src="/__/firebase/9.8.4/firebase-remote-config-compat.js"></script>
    <script defer src="/__/firebase/9.8.4/firebase-performance-compat.js"></script>
    <!--
      initialize the SDK after all desired features are loaded, set useEmulator to false
      to avoid connecting the SDK to running emulators.
    -->
    <script defer src="/__/firebase/init.js?useEmulator=true"></script>
    <link rel="stylesheet" href="style.css">

  </head>
  <body>

    <!-- <script type="text/javascript" src = "main.js"></script> -->

    <nav class = "navbar">
      <div class = "menu">
          <a href="about"><img src = "logo-modified.png" class = "logoSpace"> </a>
		  <li class="logo"><a href=".">Study Room Tracker &#128526</a></li>
		  <li class="logo" style="margin:auto;"><a href ="hours">Hours</a></li>
		  <li class="logo" style="margin:auto;"><a href ="faq">FAQ</a></li>

    </div>
            <button id = "joinQueue" onclick="document.getElementById('queue').style.display='block'" style="width:auto;" class="queuebtn">Join Queue</button>
            <div id="queue" class="modal" >
              <div id="addToQueue" class="modal-content animate" style = "width:18%;">
                <p id = "queueQuery"></p>
                <p id = "joinAsk"><b>Would you like to join the queue?</b></p>

                <button id = "join" class="queuebtn" style="left: 0px; margin: 10px 8px; width: 100px">Yes</button>
                <button id = "refuse" onclick="document.getElementById('queue').style.display='none'" class="queuebtn" style="background-color: #f44336; left: 0px; margin: 10px 8px; width:100px">No</button>
              </div>

            </div>
    <button id = "mainLogin" onclick="document.getElementById('id01').style.display='block'" style="width:auto;" class="loginbtn">Login</button>

    <div id="id01" class="modal">

      <div id="retrieveLogin" class="modal-content animate">
          <p id = "signIn"></p>
          <label for="email"><b>Email</b></label>
          <p id = "emailDescription" style = "color:red"></p>
          <input id = "einput" type="text" placeholder="Enter Email" name="email" required>

          <label for="psw"><b>Password (must be at least 6 characters)</b></label>
          <p id = "passwordDescription" style="color:red"></p>
          <input id = "pinput" type="password" placeholder="Enter Password" name="psw" required>

          <button id="submitLogin" class="loginbtn" style="width:100px">Login</button> <!-- change to "button" and call js function -->

          <button type="button" onclick="document.getElementById('id01').style.display='none'" class="loginbtn" style="background-color: #f44336; width: 100px">Cancel</button>
      </div>
    </div>

    <div id = "roomAvailable" class = "modal">
      <p id = "roomAvailableMessage"><b>A room is now available: </b></p>
          <button id = "occupyRoom" class="queuebtn" style="left: 0px; margin: 10px 8px; width: 100px">Occupy Room</button>
    </div>

  </div>

    </nav>

	<div class = "sidenav">
		<div class = "menu2"> <br>
			<a href="floor1">Floor 1</a> <br>
			<a href="floor2">Floor 2</a> <br>
			<a href="floor3">Floor 3</a> <br>
			<a href="floor4">Floor 4</a> <br>
		</div>
	</div>

	<div class="container">
		<img src="Folsom_Library_Image.jpg" style="width: 100%; height: 83.5vh; z-index:-1; filter:brightness(45%);">
		<div class="cTitle"> <h1> Welcome to the Study Room Tracker </h1> </div>
		<pre class = "cMiddle">
Are you a student? Do you want to study?
Have you ever wandered into the library looking for a study room only to find they are all occupied to your great dismay?
Is the library just too big for you and you need a helpful floor plan? </pre>
		<pre class = "cBottom">
If you answered yes to any of these questions then you have come to the right place!
We at the NSA are proud to present the very latest in study room finding technology. </pre>
	</div>
  <script type="module" src = "main.js"></script>
  </body>
</html>