-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjoin.html
More file actions
121 lines (120 loc) · 5.44 KB
/
Copy pathjoin.html
File metadata and controls
121 lines (120 loc) · 5.44 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Join Our Health Campaign</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.jsdelivr.net/npm/particles.js"></script>
</head>
<body class="bg-blue-50 min-h-screen flex items-center justify-center relative">
<div id="particles-js" class="absolute inset-0 -z-10"></div>
<div class="bg-white rounded-xl shadow-lg p-8 w-full max-w-md">
<h2 class="text-2xl text-blue-600 font-semibold text-center mb-6">💙 Join Our Health Campaign</h2>
<form id="contact-form" class="space-y-4">
<input type="hidden" name="command" value="/start" />
<div class="flex items-center border border-blue-200 rounded-lg px-3 py-2">
<i class="fas fa-user text-blue-400 mr-2"></i>
<input type="text" name="name" required placeholder="Full Name"
class="flex-1 bg-transparent outline-none text-gray-700 placeholder-gray-400" />
</div>
<div class="flex items-center border border-blue-200 rounded-lg px-3 py-2">
<i class="fas fa-map-marker-alt text-blue-400 mr-2"></i>
<input type="text" name="state_country" required placeholder="State, Country"
class="flex-1 bg-transparent outline-none text-gray-700 placeholder-gray-400" />
</div>
<div class="flex items-center border border-blue-200 rounded-lg px-3 py-2">
<i class="fab fa-telegram-plane text-blue-400 mr-2"></i>
<input type="text" name="telegram" required placeholder="@TelegramUsername/Phone"
class="flex-1 bg-transparent outline-none text-gray-700 placeholder-gray-400" />
</div>
<div class="flex items-center border border-blue-200 rounded-lg px-3 py-2">
<i class="fas fa-star text-blue-400 mr-2"></i>
<input type="text" name="phone" placeholder="Rate Us (out of 5)"
class="flex-1 bg-transparent outline-none text-gray-700 placeholder-gray-400" />
</div>
<div class="flex items-start border border-blue-200 rounded-lg px-3 py-2">
<i class="fas fa-comment text-blue-400 mt-2 mr-2"></i>
<textarea name="message" required placeholder="Your feedback..."
class="flex-1 bg-transparent outline-none text-gray-700 placeholder-gray-400 resize-none h-24"></textarea>
</div>
<button type="submit"
class="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition">
Submit
</button>
</form>
</div>
<footer class="absolute bottom-4 w-full text-center text-sm text-gray-500">
Made with ❤️ by <a href="https://t.me/Akki_IzPro" target="_blank" class="text-blue-600 hover:underline">@Akki_IzPro</a>
</footer>
<script>
particlesJS("particles-js", {
particles: {
number: { value: 70, density: { enable: true, value_area: 800 } },
color: { value: "#a0c4ff" },
shape: { type: "circle" },
opacity: { value: 0.5 },
size: { value: 3, random: true },
line_linked: { enable: true, distance: 120, color: "#a0c4ff", opacity: 0.4, width: 1 },
move: { enable: true, speed: 2 }
},
interactivity: {
events: {
onhover: { enable: true, mode: "grab" },
onclick: { enable: true, mode: "push" }
},
modes: {
grab: { distance: 140, line_linked: { opacity: 0.5 } },
push: { particles_nb: 4 }
}
},
retina_detect: true
});
</script>
<script>
const form = document.getElementById("contact-form");
form.addEventListener("submit", async (e) => {
e.preventDefault();
const formData = {
name: form.name.value,
state_country: form.state_country.value,
telegram: form.telegram.value,
phone: form.phone.value || "Not Provided",
message: form.message.value,
};
try {
const res = await fetch("/.netlify/functions/sendMessage", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(formData),
});
const result = await res.json();
if (res.ok && result.success) {
const popup = document.createElement("div");
popup.className = "fixed inset-0 flex items-center justify-center bg-black/30 z-50";
popup.innerHTML = `
<div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-sm text-center">
<h3 class="text-blue-600 text-xl font-semibold mb-2">🎉 Thank You!</h3>
<p class="text-gray-700 mb-4">Your Ticket ID: <strong>${result.ticketID}</strong>/nWe Will contat you soon</p>
<button id="copy-btn" class="mt-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded">Copy ID</button>
</div>`;
document.body.appendChild(popup);
document.getElementById("copy-btn").onclick = () => {
navigator.clipboard.writeText(result.ticketID).then(() => {
popup.remove();
});
};
form.reset();
} else {
alert(`Error: ${result.error || "Unable to submit"}`
);
}
} catch (err) {
console.error(err);
alert("Submission failed, please try again.");
}
});
</script>
</body>
</html>