-
Notifications
You must be signed in to change notification settings - Fork 0
/
feedback.html
184 lines (174 loc) · 7.09 KB
/
feedback.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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GoatHeroes | Feedback</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Fontawesome -->
<link href="css/all.min.css" rel="stylesheet">
<!-- Roboto Font from Google -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<!--JavaScript for Bootstrap -->
<script src="js/bootstrap.bundle.min.js"></script>
<!-- Added to make DOM manipulation and access easy -->
<script src="js/jquery-3.6.0.min.js"></script>
<!-- Contains JavaScript code written by me that is relevant to the entire pages -->
<script src="js/script.js"></script>
</head>
<body class="d-flex flex-column h-100">
<header>
<!-- Fixed navbar -->
<nav class="navbar goat-heroes-nav navbar-dark fixed-top navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-toggle">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav-toggle">
<img class="navbar-brand" src="images/logo.png" />
<div class="text-light fw-bold text-bod fs-2 fs-b">GOATHEROES</div>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 float-end">
<li class="nav-item">
<a class="nav-link" href="index.html">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="booking.html">BOOK</a>
</li>
<li class="nav-item">
<a class="nav-link" href="testimonials.html">TESTIMONIALS</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="contact-us.html">CONTACT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">ABOUT US</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="flex-shrink-0">
<div class="page-title">FEEDBACK</div>
<section class="container" style="padding: 1rem">
<form id="feedbackForm" class="form-background">
<label for="feedbackType" class="form-label">Type</label>
<select id="feedbackType" class="form-select">
<option selected value="1">TESTIMONY</option>
<option value="2">GENERAL</option>
</select>
<div class="mb-3">
<label for="fullName" class="form-label">Full Name</label>
<input type="text" class="form-control" id="fullName" placeholder="Jane Doe">
<div id="fullName-error" class="d-none invalid-feedback">
</div>
</div>
<div class="mb-3">
<label for="feedback" class="form-label">Notes</label>
<textarea class="form-control" id="feedback" rows="7"></textarea>
</div>
<div class="d-flex justify-content-center">
<button type="submit" disabled id="submitFeedback" class="btn btn-outline-success btn-lg mt-4">SUBMIT</button>
</div>
</form>
<div id="formSubmitLoading" class="mt-3 d-none text-center">
<div class="loading-spinner spinner-border"></div>
<p class="fs-4 text-green">Submitting. Please wait...</p>
<p class="fs-6 text-muted">Do not close your browser window</p>
</div>
<div id="formSubmitSuccess" class="mt-3 mb-3 d-none text-center">
<i class="fas fa-check-circle fa-5x text-green"></i>
<p class="fs-4 text-green">You feedback has been successfully submitted.</p>
<div class="d-flex justify-content-center flex-row">
<a href="index.html" class="btn btn-lg btn-secondary ms-2 d-flex justify-content-center align-items-center ">
<i class="fas fa-home fa-2x"></i><span class="ms-2">HOME</span>
</a>
</div>
</div>
</section>
</main>
<!-- Footer all HTML is mine with bootstrap being used to scaffold and style -->
<footer class="footer mt-auto py-3 ">
<div class="container">
<div class="d-flex align-items-center">
<img class="footer-logo me-2" src="images/logo.png" />
<div class="d-block text-start">
<div class="text-light fw-bold fs-2">GOATHEROES</div>
<p class="fs-6 text-light fw-bold text">WE GOAT YOU</p>
</div>
</div>
<div class="row row-cols-2">
<div class="col-sm-6 col-md-3">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link footer-nav-link" href="booking.html"><strong>BOOK</strong> <i class="fas fa-angle-right"></i></a>
</li>
<li class="nav-item">
<a class="nav-link footer-nav-link" href="new-booking.html">New Booking</a>
</li>
<li class="nav-item">
<a class="nav-link footer-nav-link" href="bookings.html">Current Booking</a>
</li>
</ul>
</div>
<div class="col-sm-6 col-md-3">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link footer-nav-link" href="contact-us.html"><strong>CONTACT US </strong> <i class="fas fa-angle-right"></i></a>
</li>
<li class="nav-item">
<a class="nav-link footer-nav-link" href="feedback.html">Feedback</a>
</li>
</ul>
</div>
<div class="col-xs-6 col-md-3">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link footer-nav-link" href="about-us.html"><strong>ABOUT US</strong> <i class="fas fa-angle-right"></i></a>
</li>
<li class="nav-item">
<a class="nav-link footer-nav-link" href="testimonials.html">Testimonials</a>
</li>
</ul>
</div>
<div class="col-sm-6 col-md-3">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link footer-nav-link" href="testimonials.html"><strong>TESTIMONIALS</strong> <i class="fas fa-angle-right"></i></a>
</li>
</ul>
</div>
</div>
<div class="d-flex justify-content-between">
<div>
<h3 class="fw-bold text-light">Get Social</h3>
<a href="#"><i class="fab text-light fa-facebook fa-2x me-2"></i></a>
<a href="#"><i class="fab text-light fa-instagram fa-2x me-2"></i></a>
<a href="#"><i class="fab text-light fa-twitter fa-2x"></i></a>
</div>
<div>
<h3 class="fw-bold text-light">Get in touch</h3>
<h6 class="text-light">Phone: 07 1234 567</h6>
<h6 class="text-light">Email: info@goatheroes.com.au </h6>
</div>
</div>
<div class="d-flex justify-content-around">
<a class="footer-nav-link nav-link" href="404.html">Privacy Policy</a>
<a class="footer-nav-link nav-link" href="404.html">Terms and Conditions</a>
</div>
</div>
</footer>
<!-- Page specific JavaScript -->
<script>
$(document).ready(function() {
configureInputValidation(feedbackFormValidationConfig, (valid) => {
$('#submitFeedback').prop('disabled', !valid);
});
// connects form submission event
handleNewFeedbackFormSubmission();
})
</script>
</body>
</html>