generated from Goncalves95/ci-full-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbooked.html
210 lines (200 loc) · 11 KB
/
booked.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
<!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" />
<title>Railson.io</title>
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/user.css">
</head>
<body>
<!-- Header -->
<header>
<div class="header">
<div id="logo">
<a href="index.html" aria-label="logo, go to the Home page"><img
src="assets/images/railson_sem_tattoo.png"
class="logo-center"
alt="Railson.io"
/>
</a>
</div>
<!-- Nav bar for medium and large screens -->
<div id="social">
<ul class="large-screen">
<li>
<a
href="https://www.instagram.com/railson.io/"
aria-label="Find us on Instagram (opens in new tab)"
rel="noopener"
target="instagram"
><i class="fa-brands fa-instagram"></i
></a>
</li>
<li>
<a
href="https://www.tiktok.com/@railson.io"
aria-label="Find us on Tiktok (opens in new tab)"
rel="noopener"
target="tiktok"
><i class="fa-brands fa-tiktok"></i
></a>
</li>
<li>
<a
href="https://www.youtube.com/"
aria-label="Find us on Youtube (opens in new tab)"
rel="noopener"
target="youtube"
><i class="fa-brands fa-youtube"></i
></a>
</li>
</ul>
</div>
</div>
<!-- Nav bar for small screens (dropdown) -->
</header>
<!-- Main content -->
<!-- Font Inter -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Font Inter - end -->
<!-- Getform.js -->
<script type="text/javascript" src="https://getform.io/lib/v1/getform.js"></script>
<!-- Getform.js - end -->
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Tailwind CSS - end -->
<!-- Alpine.js -->
<script src="//unpkg.com/alpinejs" defer></script>
<!-- Alpine.js - end -->
<body class="antialiased">
<div class="w-full h-screen flex items-center justify-center" x-data="{open: false}">
<button
class="flex items-baseline flex-col z-[2] border border-black/10 font-medium px-4 py-2 text-xl font-semibold select-none transition-all rounded-md no-underline text-gray-800 hover:border-gray-300"
@click="open = true; document.body.style.overflow='hidden'">
<p>Let's talk</p>
</button>
<div class="glass z-10 fixed w-full h-full flex left-0 top-0 items-center justify-center" x-cloak
x-show="open">
<div class="container px-4 flex items-center justify-center">
<div class="rounded-lg border border-black/10 p-6 w-full bg-white max-w-[550px]"
@click.away="open = false; document.body.style.overflow='auto'">
<div class="flex items-center justify-between">
<h3 class="text-gray-800 font-semibold">Contact Ticket </h3>
<button @click="open = false; document.body.style.overflow='auto'"
class="text-xs border border-transparent select-none transition-all w-[25px] h-[25px] flex items-center justify-center rounded-md no-underline hover:border-gray-300 text-gray-800">✕</button>
</div>
<p class="text-gray-800/50 text-[11px] pr-8 mb-6">Book your new TATTOO, or is it just a question?
You can inform or ask
us
anything.</p>
<p></p>
<form id="form" onsubmit=" sendEmail(); reset(); return false;" name="form" class="mt-2 mb-0">
<div class="">
<div class="rounded-lg m-0 w-fit flex items-center gap-1">
<div>
<input name="subjectType" id="question" type="radio" value="question"
class="hidden peer">
<label for="question"
class="inline-block select-none text-xs bg-white border border-black/10 px-2 py-1 transition-all rounded-md min-w-[90px] text-center cursor-pointer hover:border-gray-300 peer-checked:border-black/60 peer-checked:bg-gray-100">
Book Tattoo
</label>
</div>
<div>
<input name="subjectType" id="feedback" type="radio" value="feedback"
class="hidden peer">
<label for="feedback"
class="inline-block select-none text-xs bg-white border border-black/10 px-2 py-1 transition-all rounded-md min-w-[90px] text-center cursor-pointer hover:border-gray-300 peer-checked:border-black/60 peer-checked:bg-gray-100">
Feedback
</label>
</div>
<div>
<input name="subjectType" id="issue" type="radio" value="issue"
class="hidden peer">
<label for="issue"
class="inline-block select-none text-xs bg-white border border-black/10 px-2 py-1 transition-all rounded-md min-w-[90px] text-center cursor-pointer hover:border-gray-300 peer-checked:border-black/60 peer-checked:bg-gray-100">
Question
</label>
</div>
</div>
</div>
<div class="relative">
<div class="fcf-form-group">
<div class="fcf-input-group">
<input placeholder="Your name" type="text" id="name" name="name" class="hover:cursor-pointer focus:cursor-auto rounded-lg w-full mt-2 mb-2 text-sm transition-all resize-none outline-none border border-gray-100 hover:border-gray-300 p-2.5" required>
</div>
</div>
<div class="fcf-form-group">
<div class="fcf-input-group">
<input placeholder="Your email" type="email" id="email" name="email" class="hover:cursor-pointer focus:cursor-auto rounded-lg w-full mt-2 mb-2 text-sm transition-all resize-none outline-none border border-gray-100 hover:border-gray-300 p-2.5" required>
</div>
</div>
<div class="fcf-form-group">
<div class="fcf-input-group">
<input placeholder="Phone number" type="text" id="phone" name="phone" class="hover:cursor-pointer focus:cursor-auto rounded-lg w-full mt-2 mb-2 text-sm transition-all resize-none outline-none border border-gray-100 hover:border-gray-300 p-2.5" required>
</div>
</div>
<textarea
class="hover:cursor-pointer focus:cursor-auto rounded-lg w-full mt-2 mb-2 text-sm transition-all resize-none outline-none border border-gray-100 hover:border-gray-300 p-2.5"
placeholder="Your message" name="message" id="message" cols="30" rows="5"></textarea>
</div>
<div class="flex items-end justify-between mt-4">
<button
class="text-sm border select-none transition-all px-4 py-1.5 rounded-md no-underline hover:border-gray-300 text-gray-800 select-none w-fit font-normal border border-black/10"
type="submit">Send your mensage</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Footer -->
</div>
</div>
<div id="botoes">
<ul class="on_small_scrrens">
<li>
<a href="https://www.instagram.com/railson.io/" aria-label="Find us on Instagram (opens in new tab)" rel="noopener"
target="instagram"><i class="fa-brands fa-instagram"></i></a>
</li>
<li>
<a href="https://www.tiktok.com/@railson.io" aria-label="Find us on Tiktok (opens in new tab)" rel="noopener"
target="tiktok"><i class='bx bxl-tiktok'></i></a>
</li>
<li>
<a href="https://www.youtube.com/" aria-label="Find us on Youtube (opens in new tab)" rel="noopener"
target="youtube"><img src="assets/images/youtube.svg" alt="youtube"></a>
</li>
<li><a href="https://wa.me/41796354399?text=Hi,%20I'd%20like%20to%20book%20a%20session." rel="noopener"
target="whatsap"><i class="fa-brands fa-whatsapp"></i></a></li>
</ul>
</div>
<!-- Script always in the end of the page -->
<script src="https://kit.fontawesome.com/049d55f482.js" crossorigin="anonymous" defer></script>
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<script src="script.js"></script>
<script src="insta.js"></script>
<script src=" https://smtpjs.com/v3/smtp.js"></script>
<script>
function sendEmail(){
Email.send({
Host : "smtp.elasticemail.com",
Username : "[email protected]",
Password : "20285F1F129897783A79628F5711B6A22E0F",
To : '[email protected]',
From : document.getElementById("email").value,
Subject : "New Contact Form Enquiry",
Body : "Name: " + document.getElementById("name").value
+ "<br> Email: " + document.getElementById("email").value
+ "<br> Phone no: " + document.getElementById("phone").value
+ "<br> Message: " + document.getElementById("message").value
}).then(
message => alert("Message Sent Sucesfuly!")
);
}
</script>
</body>
</html>