Skip to content

Commit b76192c

Browse files
TripleU613TripleU613
authored
Update contact-us.html
1 parent f3d84cb commit b76192c

1 file changed

Lines changed: 56 additions & 74 deletions

File tree

‎contact-us.html‎

Lines changed: 56 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
1+
<!DOCTYPE html>
22
<html>
33
<head>
44
<meta name="title" content="JTech - Jewish Tech & Filtering Forum" />
@@ -13,61 +13,52 @@
1313
<meta name="robots" content="index, follow" />
1414
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
1515
<meta name="language" content="English" />
16-
<meta name="author" content="doniel@mesnan.com" />
16+
<meta name="author" content="tripleuworld@gmail.com" />
1717
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
18-
<link rel="icon" href="/img/home/metadata.png">
18+
<link rel="icon" href="/img/home/metadata.png" />
1919
<script src="https://unpkg.com/@tailwindcss/browser@4" defer></script>
2020
<link
2121
rel="stylesheet"
2222
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
23-
integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
2423
crossorigin="anonymous"
2524
referrerpolicy="no-referrer"
2625
/>
2726
<link rel="stylesheet" href="/constants/loader.css" />
2827
<script src="/constants/loader.js"></script>
2928
<style>
30-
img {
31-
pointer-events: none;
32-
}
29+
img { pointer-events: none; }
3330
.text-glow {
3431
text-shadow:
3532
0 0 8px rgba(59, 130, 246, 0.8),
3633
0 0 20px rgba(59, 130, 246, 0.5);
3734
}
3835
</style>
36+
<title>Contact Us - JTech</title>
3937
</head>
4038
<body class="bg-black">
4139
<div id="header-container"></div>
4240

43-
<!--Header-->
41+
<!-- Header -->
4442
<div class="bg-black px-6 pt-24 pb-12 lg:px-8">
45-
<h2
46-
class="mt-20 text-5xl font-semibold tracking-tight text-white sm:text-7xl text-center text-glow"
47-
>
43+
<h2 class="mt-20 text-5xl font-semibold tracking-tight text-white sm:text-7xl text-center text-glow">
4844
Contact Us
4945
</h2>
5046
</div>
47+
5148
<div class="mx-auto max-w-6xl px-6 sm:px-6 pb-24">
52-
<div
53-
class="relative isolate overflow-hidden bg-gray-900 px-6 py-6 shadow-2xl sm:rounded-3xl sm:px-6"
54-
>
55-
<!-- ✅ Using FormSubmit instead of mailto -->
49+
<div class="relative isolate overflow-hidden bg-gray-900 px-6 py-6 shadow-2xl sm:rounded-3xl sm:px-6">
50+
<!-- Contact Form -->
5651
<form
5752
id="contact-form"
58-
action="https://formsubmit.co/tripleuworld@gmail.com"
53+
action="https://jtechcontact.therealadmins.workers.dev/contact"
5954
method="POST"
6055
class="grid grid-cols-1 gap-6 sm:grid-cols-2"
6156
>
62-
<!-- Prevent spam -->
63-
<input type="hidden" name="_captcha" value="false" />
57+
<!-- Honeypot -->
58+
<input type="text" name="_honey" class="hidden" tabindex="-1" autocomplete="off" />
6459

6560
<div class="flex flex-col">
66-
<label
67-
for="name"
68-
class="block text-sm font-medium text-gray-300"
69-
>Name</label
70-
>
61+
<label for="name" class="block text-sm font-medium text-gray-300">Name</label>
7162
<input
7263
type="text"
7364
id="name"
@@ -76,12 +67,9 @@
7667
class="mt-1 w-full rounded-md border-gray-700 bg-gray-800 text-white focus:border-blue-500 focus:ring-blue-500"
7768
/>
7869
</div>
70+
7971
<div class="flex flex-col">
80-
<label
81-
for="phone"
82-
class="block text-sm font-medium text-gray-300"
83-
>Phone Number</label
84-
>
72+
<label for="phone" class="block text-sm font-medium text-gray-300">Phone Number</label>
8573
<input
8674
type="tel"
8775
id="phone"
@@ -90,12 +78,9 @@
9078
class="mt-1 w-full rounded-md border-gray-700 bg-gray-800 text-white focus:border-blue-500 focus:ring-blue-500"
9179
/>
9280
</div>
81+
9382
<div class="flex flex-col sm:col-span-2">
94-
<label
95-
for="email"
96-
class="block text-sm font-medium text-gray-300"
97-
>Email</label
98-
>
83+
<label for="email" class="block text-sm font-medium text-gray-300">Email</label>
9984
<input
10085
type="email"
10186
id="email"
@@ -104,12 +89,9 @@
10489
class="mt-1 w-full rounded-md border-gray-700 bg-gray-800 text-white focus:border-blue-500 focus:ring-blue-500"
10590
/>
10691
</div>
92+
10793
<div class="flex flex-col sm:col-span-2">
108-
<label
109-
for="message"
110-
class="block text-sm font-medium text-gray-300"
111-
>Message</label
112-
>
94+
<label for="message" class="block text-sm font-medium text-gray-300">Message</label>
11395
<textarea
11496
id="message"
11597
name="message"
@@ -118,71 +100,74 @@
118100
class="mt-1 w-full rounded-md border-gray-700 bg-gray-800 text-white focus:border-blue-500 focus:ring-blue-500"
119101
></textarea>
120102
</div>
103+
104+
<!-- ✅ Turnstile widget -->
105+
<div class="sm:col-span-2">
106+
<div class="cf-turnstile" data-sitekey="0x4AAAAAABxAWXqdcjbzdErE"></div>
107+
</div>
108+
121109
<div class="sm:col-span-2">
122110
<button
111+
id="submit-btn"
123112
type="submit"
124113
class="w-full rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
125114
>
126115
Send
127116
</button>
128-
<p
129-
id="success-message"
130-
class="mt-2 hidden text-center text-sm text-green-500"
131-
>
117+
<p id="success-message" class="mt-2 hidden text-center text-sm text-green-500">
132118
Message has been sent, thank you.
133119
</p>
120+
<p id="error-message" class="mt-2 hidden text-center text-sm text-red-500"></p>
134121
</div>
135122
</form>
136123
</div>
137124
</div>
138125

139-
<script
140-
type="module"
141-
src="https://unpkg.com/@material-tailwind/html@latest/scripts/tooltip.js"
142-
></script>
126+
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
143127

144128
<div id="footer-container"></div>
145129

146130
<script>
147131
document.addEventListener("DOMContentLoaded", () => {
132+
// Load footer & header
148133
fetch("/constants/footer.html")
149-
.then((response) => response.text())
150-
.then((data) => {
151-
document.getElementById("footer-container").innerHTML = data;
152-
});
134+
.then((r) => r.text())
135+
.then((html) => (document.getElementById("footer-container").innerHTML = html));
153136

154137
fetch("/constants/headerDark.html")
155-
.then((response) => response.text())
156-
.then((data) => {
157-
document.getElementById("header-container").innerHTML = data;
138+
.then((r) => r.text())
139+
.then((html) => {
140+
document.getElementById("header-container").innerHTML = html;
158141
const mobileMenu = document.getElementById("mobile-menu");
159142
const openButton = document.getElementById("mobile-menu-button");
160143
const closeButton = document.getElementById("mobile-menu-close");
161-
162-
openButton.addEventListener("click", function () {
163-
mobileMenu.classList.remove("hidden");
164-
});
165-
166-
closeButton.addEventListener("click", function () {
167-
mobileMenu.classList.add("hidden");
168-
});
144+
openButton?.addEventListener("click", () => mobileMenu?.classList.remove("hidden"));
145+
closeButton?.addEventListener("click", () => mobileMenu?.classList.add("hidden"));
169146
});
170147

171148
const form = document.getElementById("contact-form");
172149
const successMessage = document.getElementById("success-message");
150+
const errorMessage = document.getElementById("error-message");
151+
const submitBtn = document.getElementById("submit-btn");
152+
173153
form.addEventListener("submit", async (e) => {
174154
e.preventDefault();
175-
const formData = new FormData(form);
176-
const response = await fetch(form.action, {
177-
method: "POST",
178-
body: formData,
179-
headers: {
180-
Accept: "application/json",
181-
},
182-
});
183-
if (response.ok) {
155+
successMessage.classList.add("hidden");
156+
errorMessage.classList.add("hidden");
157+
submitBtn.disabled = true;
158+
159+
try {
160+
const fd = new FormData(form);
161+
const resp = await fetch(form.action, { method: "POST", body: fd });
162+
const data = await resp.json();
163+
if (!resp.ok || !data.ok) throw new Error(data.error || "Submission failed");
184164
form.reset();
185165
successMessage.classList.remove("hidden");
166+
} catch (err) {
167+
errorMessage.textContent = err.message || "Network error. Please try again.";
168+
errorMessage.classList.remove("hidden");
169+
} finally {
170+
submitBtn.disabled = false;
186171
}
187172
});
188173
});
@@ -192,11 +177,8 @@
192177
.slide-up {
193178
transform: translateY(100%);
194179
opacity: 0;
195-
transition:
196-
transform 0.5s ease,
197-
opacity 0.5s ease;
180+
transition: transform 0.5s ease, opacity 0.5s ease;
198181
}
199-
200182
.slide-up.show {
201183
transform: translateY(0);
202184
opacity: 1;

0 commit comments

Comments
 (0)