Add 'Add Request' Modal

public/main.js

@@ -34,4 +34,12 @@ function updateTable() {
 	getRequests(count,allRequests);
 }
 
+function openAddRequestModal() {
+	document.getElementById("addRequestModalBackground").style.display = "flex";
+}
+
+function closeAddRequestModal() {
+	document.getElementById("addRequestModalBackground").style.display = "none";
+}
+
 updateTable();

public/style.css

@@ -83,3 +83,40 @@ div#nav-userpic {
 #requests .request-score {
 	text-align: right;
 }
+
+#addRequestModalBackground {
+	display: none;
+	position: fixed;
+	z-index: 1;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: #444;
+	background-color: #444a;
+	align-items: center;
+	justify-content: center;
+}
+
+#addRequestModal {
+	position: relative;
+	padding: 1em;
+	display: inline-block;
+	background-color: #444;
+	box-shadow: 0px 5px 20px black;
+}
+
+#addRequestModal h1 {
+	margin-top: 0;
+}
+
+#addRequestModalClose {
+	position: absolute;
+	top: 0;
+	right: 0.5em;
+	font-size: 150%;
+}
+
+#addRequestModalClose a {
+	text-decoration: none;
+}

views/main.eta

@@ -10,6 +10,7 @@
 			<div id="logo">Learn Request Queue</div>
 			<div id="nav-requests"><a href="/">Requests</a></div>
 			<%- if (it.userName) { // Logged in -%>
+			<div id="nav-addrequest"><a href="#" onclick="openAddRequestModal()">Add Request</a></div>
 			<div id="nav-userpic"><img src="<%= it.userProfilePicture %>" /></div>
 			<div id="nav-username"><%= it.userName %></div>
 			<div id="nav-logout"><a href="/logout">Logout</a></div>
@@ -29,6 +30,15 @@
 			</select>
 			<input type="checkbox" id="allRequests" onchange="updateTable()">View requests in any state</input>
 		</div>
+		<div id="addRequestModalBackground">
+			<div id="addRequestModal">
+				<div id="addRequestModalClose"><a href="#" onclick="closeAddRequestModal()">&times;</a></div>
+				<h1>Add Request</h1>
+				URL: <input id="addRequestUrl"></input>
+				<button onclick="validateAndSubmitRequest()">Request</button><br>
+				Currently, only Youtube links are accepted.
+			</div>
+		</div>
 	</body>
 </html>