-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnewbooking.html
136 lines (129 loc) · 6.26 KB
/
newbooking.html
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
132
133
134
135
136
<!--
Copyright (c) 2021 Ashley L Hines Pty Ltd
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://use.typekit.net/zwp4tpp.css" />
<link href="/css/main.css" rel="stylesheet" />
<link rel="shortcut icon" href="https://www.canberra.edu.au/config/designs/global-combined-parse-squiz/favicon.ico" type="image/ico" />
<title>Workshop 7 - New Booking</title>
</head>
<body>
<div id="grid-wrapper" class="grid-wrapper">
<header>
<div class="flexbox-left">
<img class="menu-icon" alt="Menu Button" role="button" src="/img/menu.png" onClick="toggleMenu()" />
<h2>Online Bookings</h2>
</div>
<a class="flexbox-center" href="/">
<object class="UC_SVG" data="/img/UC.svg"></object>
<h2 class="title-pipe">|</h2>
<h1>Workshop7</h1>
</a>
<div class="flexbox-right">
<h2>Joe Bloggs</h2>
<object data="/img/user.svg"></object>
</div>
</header>
<div class="sidebar">
<a href="/mybookings.html"><object data="/img/user.svg"></object>My Bookings</a
>
<a href="/newbooking.html" class="active"
><object data="/img/user.svg"></object>New Booking</a
>
<a href="/induction.html"
><object data="/img/user.svg"></object>Safety Induction</a
>
<a href="/rooms"><object data="/img/user.svg"></object>Rooms</a>
<a href="/machines"><object data="/img/user.svg"></object>Machines</a>
<a href="https://www.canberra.edu.au/"><object data="/img/user.svg"></object>Logout</a>
</div>
<div class="content">
<div class="content-container">
<h1>New Booking</h1>
<form action="/mybookings.html">
<div class="form-grid">
<div>
<label class="form-h2" for="room-machine-input">Room/MachineID</label>
<input id="room-machine-input" type="text" />
</div>
<div>
<label class="form-h2" for="booking-date">Booking Date</label>
<input type="date" name="date" id="booking-date" />
</div>
<div>
<label class="form-h2" for="length">Desired Booking Length</label>
<select name="length" id="length">
<option value="0-30">30 Min</option>
<option value="1-00">60 Min</option>
<option value="1-30">1 Hr 30 Min</option>
<option value="2-00">2 Hr</option>
<option value="2-30">2 Hr 30 Min</option>
<option value="3-00">3 Hr</option>
<option value="3-30">3 Hr 30 Min</option>
<option value="4-00">4 Hr</option>
</select>
</div>
<div>
<p class="form-h2">Booking Type</p>
<br>
<input type="radio" name="booking-type" id="booking-personal" /><label for="booking-personal">Personal</label>
<input type="radio" name="booking-type" id="booking-course" /><label for="booking-course">Course Related</label>
</div>
</div>
<h2>Available Times</h2>
<div class="form-item">
<button id="pill-1" type="button" class="pill" onclick="selectBookingPill(1)">
09:00-10:00
</button>
<button id="pill-2" type="button" class="pill" onclick="selectBookingPill(2)">
10:00-11:00
</button>
<button id="pill-3" type="button" class="pill" onclick="selectBookingPill(3)">
11:00-12:00
</button>
<button id="pill-4" type="button" class="pill" onclick="selectBookingPill(4)">
12:00-01:00
</button>
<button id="pill-5" type="button" class="pill" onclick="selectBookingPill(5)">
01:00-02:00
</button>
<button id="pill-6" type="button" class="pill" onclick="selectBookingPill(6)">
02:00-03:00
</button>
</div>
<h2>Estimated Cost</h2>
<p>- $12.50</p>
<h2>Staff Aprroval</h2>
<input type="checkbox" name="staff-approval" id="staff-approval" />
<label for="staff-approval">I Acknowledge that this time slot requires Staff Approval</label>
<h2>Terms and Conditions</h2>
<input type="checkbox" name="terms" id="terms" /><label for="terms">I Agree to the UC Workshop7 Terms and Conditions</label
>
<h2>Caveats</h2>
<input type="checkbox" name="caveats" id="caveats" /><label
for="caveats"
>Different Caveats for a machine would go down here.</label
><br>
<button type="submit" class="pill-large form-item">Submit</button>
</form>
</div>
</div>
</div>
<script src="/js/bundle.js"></script>
</body>
</html>