-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsloane.html
138 lines (125 loc) · 3.94 KB
/
sloane.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
<!DOCTYPE html>
<html>
<head>
<title>Availability Form</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<style>
/* Styles for loading animation */
.loading {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
background-color: rgba(255, 255, 255, 0.7);
padding: 20px;
text-align: center;
font-size: 24px;
}
.loading img {
width: 50px;
height: 50px;
margin-bottom: 10px;
}
/* Styles for success modal */
.modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
text-align: center;
font-size: 24px;
animation: fadeOut 5s ease-in-out;
}
@keyframes fadeOut {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; display: none; }
}
</style>
</head>
<body>
<div class="container">
<h1 class="mt-5">Availability Form</h1>
<form>
<div class="mb-3">
<label for="date" class="form-label">Date:</label>
<input type="date" id="date" name="date" class="form-control" required>
</div>
<div class="row mb-3">
<div class="col">
<label for="startTime" class="form-label">Start Time:</label>
<input type="time" id="startTime" name="startTime" class="form-control" required>
</div>
<div class="col">
<label for="endTime" class="form-label">End Time:</label>
<input type="time" id="endTime" name="endTime" class="form-control" required>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="submitForm()">Submit</button>
</form>
<div id="loading" class="loading">
<img src="loading.gif" alt="Loading">
<p>Please wait...</p>
</div>
<div id="modal" class="modal">
<p>Your availability has been updated.</p>
</div>
</div>
<script>
// Submit form data and show success modal
function submitForm() {
var loading = document.getElementById("loading");
var modal = document.getElementById("modal");
// Display loading animation
loading.style.display = "block";
// Simulate a delay before showing the success modal (3 seconds)
setTimeout(function () {
loading.style.display = "none"; // Hide loading animation
modal.style.display = "block"; // Show success modal
// Automatically fade out the modal after 5 seconds
setTimeout(function () {
modal.style.opacity = "0";
setTimeout(function () {
modal.style.display = "none";
}, 1000);
}, 5000);
// Submit the form to the server
var date = document.getElementById("date").value;
var startTime = document.getElementById("startTime").value;
var endTime = document.getElementById("endTime").value;
var formData = {
date: date,
startTime: startTime,
endTime: endTime
};
fetch('http://localhost:3000/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(function (response) {
if (response.ok) {
console.log('Form data submitted successfully');
} else {
console.error('An error occurred while submitting the form data');
}
})
.catch(function (error) {
console.error('An error occurred while submitting the form data', error);
});
}, 3000);
}
</script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>