-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathslider.php
145 lines (133 loc) · 6.33 KB
/
slider.php
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
<!DOCTYPE html>
<html lang="en" class="w-full h-full">
<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="layout/css/app.css">
<title>Sign Up</title>
</head>
<body class="w-full h-full" style="background-image: url('images/feedbackbegad.jpg');">
<div class="w-full h-full flex justify-center items-center bg-slate-100">
<div class="w-2/3 pb-16 bg-white shadow-lg">
<div class="mx-auto mb-16 py-4 rounded-b-xl px-16 text-5xl bg-orange-100 text-gray-700 shadow-lg table ">Reserve Room</div>
<div class="flex justify-between px-16">
<div class="step-circle relative w-24 h-24 rounded-full bg-orange-400 ring-4 ring-orange-300 flex justify-center items-center text-4xl text-white">
1
</div>
<div class="step-circle w-24 h-24 relative rounded-full bg-orange-200 border-2 border-orange-400 flex justify-center items-center text-4xl text-white">
2
</div>
<div class="step-circle w-24 h-24 rounded-full bg-orange-200 border-2 border-orange-400 flex justify-center items-center text-4xl text-white">
3
</div>
</div>
<form method="POST">
<div class="step-inputs mt-8 text-center hidden">
<label>
<p>Select Option</p>
<select name="option" class="py-2 px-8 border border-slate-500" id="">
<option value="">Select an option</option>
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
</select>
</label>
<br>
</div>
<div class="step-inputs text-center hidden">
Step 2 <br>
<input type="text" class="border border-slate-500 mt-4"><br>
<input type="text" class="border border-slate-500 mt-4"><br>
<input type="text" class="border border-slate-500 mt-4">
</div>
<div class="step-inputs text-center hidden">
Step 3 <br>
<div class="flex justify-center flex-wrap items-center w-full">
<label class="transform relative hover:scale-110 transition-all border border-orange-300">
<input type="checkbox" class="peer">
<div class="absolute top-0 left-0 bg-orange-500 hidden peer-checked:block"></div>
<div class="w-48 h-48">
<img src="uploads/1652970159.jpg" class="w-full h-full object-cover object-center" alt="">
</div>
<div class="py-2 px-2 text-center font-bold">
<p>Name</p>
<p class="text-green-500">
EGP 300/night
</p>
</div>
</label>
</div>
</div>
<div class="flex justify-center">
<button type="button" class="table mt-4 mx-2 bg-gray-800 text-white py-2 px-8">
Save
</button>
<button id="step_button" type="button" class="table mt-4 mx-2 bg-green-500 text-white py-2 px-8">
Next
</button>
</div>
</form>
</div>
</div>
<script>
var current_step = 1;
var max_step =3 ;
var step_circles = document.querySelectorAll('.step-circle');
var step_inputs = document.querySelectorAll('.step-inputs');
var step_button = document.querySelector('#step_button');
step_inputs[0].classList.remove('hidden');
function step(i) {
if (i + 1 == max_step) {
setTimeout(function() {
step_button.innerText = "Submit and Finish";
step_button.type = "submit";
}, 100);
}else{
step_button.innerText = "Next";
step_button.type = "button";
}
current_step = parseInt(step_circles[i].innerText);
for (let i = 0; i < step_circles.length; i++) {
step_circles[i].classList.remove('bg-orange-400');
step_circles[i].classList.add('bg-orange-200');
step_circles[i].classList.add('border-orange-400');
step_circles[i].classList.remove('ring-orange-400');
step_circles[i].classList.remove('ring-4');
step_circles[i].classList.add('border-2');
}
for (let i = 0; i < current_step; i++) {
step_circles[i].classList.add('bg-orange-400');
step_circles[i].classList.remove('bg-orange-200');
step_circles[i].classList.remove('border-orange-400');
step_circles[i].classList.add('ring-orange-300');
step_circles[i].classList.add('ring-4');
step_circles[i].classList.remove('border-2');
}
for (let j = 0; j < step_inputs.length; j++) {
step_inputs[j].classList.add('hidden');
}
step_inputs[i].classList.remove('hidden');
step_inputs[i].classList.add('visible');
}
for (let i = 0; i < step_circles.length; i++) {
step_circles[i].addEventListener('click', function() {
step(i);
});
}
step_button.addEventListener('click', function() {
if (current_step < max_step) {
current_step++;
step(current_step - 1);
if (current_step == max_step) {
let self = this;
setTimeout(function() {
self.innerText = "Submit and Finish";
self.type = "submit";
}, 100);
}
}
});
</script>
</body>
</html>