diff --git a/static/booking_confirmation.css b/static/booking_confirmation.css
new file mode 100644
index 0000000000000000000000000000000000000000..0ac620f21336a6be7b228b35e770da4be1afd6a4
--- /dev/null
+++ b/static/booking_confirmation.css
@@ -0,0 +1,16 @@
+#header {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ width: 30%;
+}
+
+
+h1 {
+color: black;
+font-family: arial, sans-serif;
+font-size: 40px;
+font-weight: bold;
+margin-top: 70px;
+text-align: center;
+}
diff --git a/static/booking_confirmation.html b/static/booking_confirmation.html
new file mode 100644
index 0000000000000000000000000000000000000000..8832f952ededf387b3fc40b574adc2436c0452bf
--- /dev/null
+++ b/static/booking_confirmation.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="stylesheet" href="booking_confirmation.css">
+
+<title>Booking Confirmation</title>
+</head>
+
+ <header>
+ <img src="Tramshed-Logo-Main-Black.png" id=header />
+ </header>
+
+ <section>
+ <h1 class="bookingtitle">Booking Confirmation</h1>
+
+ </section>
diff --git a/static/make_booking.css b/static/make_booking.css
index 34bb55e6c7a61fac6ebd14e69d8764085fa7974c..fd20d60849cd32dafe593961f1f12f531f10bb72 100644
--- a/static/make_booking.css
+++ b/static/make_booking.css
@@ -1,6 +1,8 @@
#header {
display: block;
- width: 30%;
+ margin-left: auto;
+ margin-right: auto;
+ width: 70%;
}
@@ -12,3 +14,67 @@ font-weight: bold;
margin-top: 70px;
text-align: center;
}
+
+h2 {
+color: black;
+font-family: arial, sans-serif;
+font-size: 20px;
+font-weight: bold;
+}
+
+
+body {
+ width: 450px;
+ margin: 0 auto;
+ padding: 50px;
+}
+
+div.booking {
+ margin: 20px 0;
+}
+
+div.booking.date {
+ width: 49%;
+ display: inline-block;
+ float: left;
+ margin-left: 1%;
+}
+
+
+input, select, textarea {
+ border-radius: 2px;
+ border: 2px solid #777;
+ box-sizing: border-box;
+ font-size: 1.25em;
+ width: 100%;
+ padding: 10px;
+}
+
+div.booking.date input {
+ width: 95%;
+ display: inline-block;
+}
+
+textarea {
+ height: 250px;
+}
+
+hr {
+ border: 1px dotted #ccc;
+}
+
+button {
+ height: 50px;
+ background: black;
+ border: none;
+ color: white;
+ font-size: 1.25em;
+ border-radius: 4px;
+ cursor: pointer;
+
+}
+
+button:hover {
+ border: 2px solid black;
+
+}
diff --git a/static/make_booking.html b/static/make_booking.html
index 0e61d1f23ba057e776fae0c024938dc2a9b4b469..f2149e25a613971e333f77e44c133e463b110b88 100644
--- a/static/make_booking.html
+++ b/static/make_booking.html
@@ -3,6 +3,20 @@
<head>
<link rel="stylesheet" href="make_booking.css">
+<style>
+var currentDateTime = new Date();
+var year = currentDateTime.getFullYear();
+var month = (currentDateTime.getMonth() + 1);
+var date = (currentDateTime.getDate() + 1);
+
+if(date < 10) {
+ date = '0' + date;
+}
+if(month < 10) {
+ month = '0' + month;
+}
+</style>
+
<title>Make a Booking</title>
</head>
@@ -10,12 +24,48 @@
<img src="Tramshed-Logo-Main-Black.png" id=header />
</header>
- <body>
+ <section>
<h1 class="bookingtitle">Make a Booking</h1>
- </body>
-
-
+ </section>
+
+<main>
+ <form>
+ <div class="booking">
+ <input type="text" id="name" name="visitor_name" placeholder="Your Name" pattern=[A-Z\sa-z]{3,20} required>
+ </div>
+ <div class="booking">
+ <input type="email" id="email" name="visitor_email" placeholder="example@email.com" required>
+ </div>
+ <div class="booking">
+ <input type="tel" id="phone" name="visitor_phone" placeholder="Phone Number" pattern=(\d{3})-?\s?(\d{3})-?\s?(\d{4}) required>
+ </div>
+ <hr>
+ <div class="booking date">
+ <h2 for="checkin-date">Check-in Date</h2>
+ <input type="date" id="checkin-date" name="checkin" required>
+ </div>
+ <div class="booking date">
+ <h2 for="checkout-date">Check-out Date</h2>
+ <input type="date" id="checkout-date" name="checkout" required>
+ </div>
+ <div class="booking">
+ <h2 for="office-selection">Select Office Space</h2>
+ <select id="office-selection" name="office_preference" required>
+ <option value="">Choose from the List</option>
+ <option value="codebase">Codebase</option>
+ <option value="catalyst">Catalyst</option>
+ <option value="dogpatch">Dogpatch Labs</option>
+ </select>
+ </div>
+ <hr>
+ <div class="booking">
+ <h2 for="message">Anything Else?</h2>
+ <textarea id="message" name="visitor_message" placeholder="Tell us anything else that might be important." required></textarea>
+ </div>
+ <button type="submit">Confirm Booking</button>
+ </form>
+</main>