-
Notifications
You must be signed in to change notification settings - Fork 0
/
contactUs.html
265 lines (229 loc) · 12 KB
/
contactUs.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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="static/bulbFavicon.ico">
<link href="static/css/tailwind.min.css" rel="stylesheet">
<link href="static/css/movieApi.css" rel="stylesheet">
<script type="text/javascript" src="static/js/jquery-3.5.1.min.js"></script>
<title>Welcome to Cinegram !</title>
</head>
<body>
<!-- Preloader -->
<div class="loader-wrapper">
<!-- Loading square for squar.red network -->
<span class="loader"><span class="loader-inner"></span></span>
</div>
<!-- Header -->
<header class="text-gray-700 body-font">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-green-500 rounded-full" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
<span class="ml-3 text-xl">Cinegram</span>
</a>
<nav class="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
</nav>
</div>
</header>
<!-- contact us -->
<section class="text-gray-700 body-font relative">
<div class="container px-5 py-20 mx-auto">
<div class="flex flex-col text-center w-full mb-12">
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">Contact Us</h1>
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">You can always reach out to me !</p>
</div>
<div class="lg:w-1/2 md:w-2/3 mx-auto">
<div class="flex flex-wrap -m-2">
<div class="p-2 w-1/2">
<div class="relative">
<label for="name" class="leading-7 text-sm text-gray-600">Name</label>
<input type="text" id="nameInput" name="nameInput" class="w-full bg-gray-100 rounded border border-gray-300 focus:border-indigo-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out" maxlength="100" onkeydown="hideError('name')">
<span id="err-name" class="error hidden">
Please enter a correct name.
</span>
</div>
</div>
<div class="p-2 w-1/2">
<div class="relative">
<label for="email" class="leading-7 text-sm text-gray-600">Email</label>
<input type="email" id="emailInput" name="emailInput" class="w-full bg-gray-100 rounded border border-gray-300 focus:border-indigo-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out" onkeydown="hideError('email')">
<span id="err-email" class="error hidden">
Please enter a valid email address.
</span>
</div>
</div>
</div>
<div class="p-2 w-full">
<div class="relative">
<label for="message" class="leading-7 text-sm text-gray-600">Message</label>
<textarea id="message" name="message" class="w-full bg-gray-100 rounded border border-gray-300 focus:border-indigo-500 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out" maxlength="450" onkeydown="hideError('message')"></textarea>
</div>
<span id="err-message" class="error hidden">
Your message can not be less than 20 characters.
</span>
</div>
<div class="p-2 w-full">
<button id="submitBtn" class="flex mx-auto text-white bg-green-500 border-0 py-2 px-8 focus:outline-none hover:bg-green-600 rounded text-lg" >Submit</button>
<a id="feedbackSent" class="hidden" target="_blank" href="#">
feedback
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="text-gray-700 body-font">
<div class="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
<a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-green-500 rounded-full" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
<span class="ml-3 text-xl">Cinegram</span>
</a>
<p class="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0">© 2021 survi suman —
<a href="https://twitter.com/knyttneve" class="text-gray-600 ml-1" rel="noopener noreferrer" target="_blank">@sumansurvi</a>
</p>
</div>
</footer>
<script type="text/javascript">
// Preloader
$(window).on('load',function(){
$('.loader-wrapper').fadeOut('slow');
});
// -------
$(document).ready(function() {
document.getElementById('submitBtn').disabled=true;
});
// email input
$('#emailInput').on('focusout',function(){
// disabling the submit button
document.getElementById('submitBtn').disabled=true;
// storing the input email value
var input = document.getElementById('emailInput').value;
// email regular expression for the validation of an email format
let emailRegex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if(!emailRegex.test(input)){
// if email format is not valid then it will unhide the span message as an error message and will keep the focus on email
$('#emailInput').focus();
$('#err-email').removeClass('hidden');
}else{
// if email format is valid then it will hide the span message as an error message and will leave the focus from email
$('#err-email').addClass('hidden');
}
validation();
});
// name input
$('#nameInput').on('keyup',function(){
// disabling the submit button
document.getElementById('submitBtn').disabled=true;
//storing the input name value
var input = document.getElementById('nameInput').value;
// regular expression for the validation of an name format
let nameRegex = /^[a-zA-Z ]+$/;
if(!nameRegex.test(input)){
// if name format is not valid then it will unhide the span message as an error message and will keep the focus on name
$('#nameInput').focus();
$('#err-name').removeClass('hidden');
}else{
// if name format is valid then it will hide the span message as an error message and will leave the focus from name
$('#err-name').addClass('hidden');
}
validation();
});
//message input
$('#message').on('keyup',function(){
// disabling the submit button
document.getElementById('submitBtn').disabled=true;
//storing the input message value
var input = document.getElementById('message').value;
if(input == ''){
// if message is empty, it will keep the focus on message
$('#message').focus();
return false;
// the below code will not run after the return statement
}else{
// if message is not empty, it will hide the error message
$('#err-message').addClass('hidden');
}
validation();
});
//submit button
$('#submitBtn').on('click',function(){
// showing preloader everytime the submit btn is clicked
$('.loader-wrapper').show();
// storing the message value for the minimum length of message validation
var input = document.getElementById('message').value;
if(input.length<20){
// if the length is below 20 characters, focus will stay on message field and the error message will be shown
$('#message').focus();
$('#err-message').removeClass('hidden');
$('.loader-wrapper').hide();
return false;
}else{
//hiding the error message if the length is valid.
$('#err-message').addClass('hidden');
}
validation();
setTimeout(function(){
$('.loader-wrapper').fadeOut('slow');
}, 2000);
$('#feedbackSent').click();
});
//feedback sending setup
$('#feedbackSent').on('click', function (event) {
event.preventDefault();
let name = document.getElementById('nameInput').value;
let message = document.getElementById('message').value;
let email = document.getElementById('emailInput').value;
// %0D%0A for new line
let body = 'Name : '+name+'%0D%0A'+'%0D%0A'+'Email : '+email+'%0D%0A'+'%0D%0A'+'Message : '+'%0D%0A'+'%0D%0A'+message;
// let feedback = 'mailto:[email protected]?subject=Cinegram feedback&body='+body;
window.location = 'mailto:[email protected]?subject=Cinegram feedback&body='+body;
});
function validation(){
var name = document.getElementById('nameInput').value;
var email = document.getElementById('emailInput').value;
var message = document.getElementById('message').value;
if(isEmpty(name)){
// if name is empty, submit btn will be disabled
document.getElementById('submitBtn').disabled=true;
return false;
// below code will not run
}
if(isEmpty(email)){
// if email is empty, submit btn will be disabled
document.getElementById('submitBtn').disabled=true;
// document.getElementById('submitBtn').disabled=true;
return false;
//below code will not run
}
if(isEmpty(message)){
// if message is empty, submit btn will be disabled
document.getElementById('submitBtn').disabled=true;
// document.getElementById('submitBtn').disabled=true;
return false;
// below code will not run
}
// if none of the above conditions are true, then submit btn will be disabled.
document.getElementById('submitBtn').disabled=false;
};
// this function is used for hiding error
function hideError(t){
// '#err-' is same for name, email and message ID's, where t= name,message,email
$('#err-'+t).addClass('hidden');
}
function isEmpty(value){
// if value is empty
if(value == "" || value == null || value == undefined){
return true;
}else{
return false;
}
}
</script>
</body>
</html>