-
Notifications
You must be signed in to change notification settings - Fork 0
/
form.html
401 lines (379 loc) · 19.6 KB
/
form.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
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>VorTex - Advanced Cybersecurity Take Down Service</title>
<meta name="description" content="VorTex Cybersecurity offers a free, advanced service to help remove online nude, partially nude, or sexually explicit content of minors.">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
@import url('https://cdn.rawgit.com/sh4hids/bangla-web-fonts/bensen-handwriting/stylesheet.css');
body {
font-family: 'BenSenHandwriting', sans-serif;
background-image: url('https://github.com/VorTexCyberBD/.github/raw/main/profile/IMG_7812.jpeg');
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.content-wrapper {
background-color: rgba(255, 255, 255, 0.95);
}
.logo-container {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
border: 3px solid white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.logo {
width: 100%;
height: 100%;
object-fit: cover;
}
.loader {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(59, 130, 246, 0.9);
z-index: 9999;
color: white;
}
.loader img {
width: 100px;
height: 100px;
animation: pulse 1s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.progress-bar {
width: 300px;
height: 10px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 5px;
margin-top: 20px;
overflow: hidden;
}
.progress {
width: 0%;
height: 100%;
background-color: white;
border-radius: 5px;
transition: width 0.5s ease;
}
.tip {
margin-top: 20px;
text-align: center;
font-size: 1.2rem;
max-width: 80%;
}
.form-input {
transition: all 0.3s ease;
}
.form-input:focus {
transform: scale(1.02);
}
</style>
</head>
<body>
<div id="loader" class="loader">
<img src="https://avatars.githubusercontent.com/u/175133802?s=200&v=4" alt="VorTex Logo">
<div class="progress-bar">
<div id="progress" class="progress"></div>
</div>
<div id="tip" class="tip"></div>
</div>
<div class="content-wrapper min-h-screen">
<header class="bg-blue-600 text-white p-4 shadow-md sticky top-0 z-10">
<div class="container mx-auto flex items-center justify-between">
<div class="flex items-center">
<div class="logo-container mr-4">
<img src="https://avatars.githubusercontent.com/u/175133802?s=200&v=4" alt="VorTex Logo" class="logo">
</div>
<h1 class="text-2xl font-bold">VorTex Cybersecurity</h1>
</div>
<nav>
<button id="infoButton" class="bg-white text-blue-600 px-6 py-2 rounded-full hover:bg-blue-100 transition duration-300 transform hover:scale-105">What You Need To Know</button>
</nav>
</div>
</header>
<main class="container mx-auto p-4 md:p-8">
<div class="bg-white shadow-lg rounded-lg p-6 mb-6 transition duration-300 hover:shadow-xl">
<h2 class="text-xl font-bold mb-4">VorTex is committed to:</h2>
<ul class="list-disc pl-6 space-y-2">
<li>🛡️ Fortifying digital infrastructures</li>
<li>🔐 Safeguarding sensitive data</li>
<li>🌐 Cultivating a secure cyber ecosystem</li>
<li>🧠 Fostering cybersecurity awareness</li>
</ul>
</div>
<div class="bg-white shadow-lg rounded-lg p-6 mb-6 transition duration-300 hover:shadow-xl">
<h2 class="text-2xl font-bold mb-4">Cybersecurity Incident Report Form</h2>
<form id="reportForm" class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="userName" class="block text-sm font-medium text-gray-700">আপনার নাম (Your Name)</label>
<input type="text" id="userName" name="userName" required class="form-input mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
</div>
<div>
<label for="userEmail" class="block text-sm font-medium text-gray-700">আপনার ইমেইল (Your Email)</label>
<input type="email" id="userEmail" name="userEmail" required class="form-input mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
</div>
<div>
<label for="userPhone" class="block text-sm font-medium text-gray-700">আপনার ফোন নম্বর (Your Phone Number)</label>
<input type="tel" id="userPhone" name="userPhone" required class="form-input mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
</div>
<div>
<label for="affectedPerson" class="block text-sm font-medium text-gray-700">প্রভাবিত ব্যক্তির নাম (Affected Person's Name)</label>
<input type="text" id="affectedPerson" name="affectedPerson" required class="form-input mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
</div>
<div>
<label for="affectedPersonAge" class="block text-sm font-medium text-gray-700">প্রভাবিত ব্যক্তির বয়স (Affected Person's Age)</label>
<input type="number" id="affectedPersonAge" name="affectedPersonAge" min="1" max="17" required class="form-input mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
</div>
<div>
<label for="incidentDate" class="block text-sm font-medium text-gray-700">ঘটনার তারিখ (Incident Date)</label>
<input type="date" id="incidentDate" name="incidentDate" required class="form-input mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
</div>
</div>
<div>
<label for="incidentType" class="block text-sm font-medium text-gray-700">ঘটনার ধরন (Incident Type)</label>
<select id="incidentType" name="incidentType" required class="form-input mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
<option value="">Select an option</option>
<option value="nude">Nude Photo/Video</option>
<option value="partiallyNude">Partially Nude Photo/Video</option>
<option value="sexuallyExplicit">Sexually Explicit Content</option>
<option value="other">Other</option>
</select>
</div>
<div>
<label for="incidentDescription" class="block text-sm font-medium text-gray-700">ঘটনার বিবরণ (Incident Description)</label>
<textarea id="incidentDescription" name="incidentDescription" rows="4" required class="form-input mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"></textarea>
</div>
<div>
<label for="evidence" class="block text-sm font-medium text-gray-700">প্রমাণ আপলোড করুন (Upload Evidence)</label>
<input type="file" id="evidence" name="evidence" accept="image/*,video/*" class="form-input mt-1 block w-full">
</div>
<div>
<button type="submit" class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-full focus:outline-none focus:shadow-outline transition duration-300 transform hover:scale-105">রিপোর্ট জমা দিন (Submit Report)</button>
</div>
</form>
</div>
<div class="bg-white shadow-lg rounded-lg p-6 mb-6 transition duration-300 hover:shadow-xl">
<h2 class="text-2xl font-bold mb-4">Take Down Statistics</h2>
<canvas id="takeDownChart"></canvas>
</div>
</main>
<footer class="bg-gray-800 text-white p-8">
<div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">Contact Us</h3>
<p>24-hour tip line: <a href="tel:8008435678" class="underline hover:text-blue-400 transition duration-300">(800) 843-5678</a></p>
<p>Email: [email protected]</p>
</div>
<div>
<h3 class="text-xl font-bold mb-4">Quick Links</h3>
<ul class="space-y-2">
<li><a href="#" class="hover:text-blue-400 transition duration-300">About Us</a></li>
<li><a href="#" class="hover:text-blue-400 transition duration-300">Services</a></li>
<li><a href="#" class="hover:text-blue-400 transition duration-300">Resources</a></li>
</ul>
</div>
<div>
<h3 class="text-xl font-bold mb-4">Connect with us</h3>
<div class="flex space-x-4">
<a href="https://t.me/VorTexCyberBD" class="text-3xl hover:text-blue-400 transition duration-300"><i class="fab fa-telegram"></i></a>
<a href="https://www.facebook.com/profile.php?id=61562470161288&mibextid=LQQJ4d" class="text-3xl hover:text-blue-400 transition duration-300"><i class="fab fa-facebook"></i></a>
</div>
</div>
</div>
</footer>
</div>
<script>
// Loader with rotating tips
const tips = [
"আপনার পাসওয়ার্ড নিয়মিত পরিবর্তন করুন।",
"অপরিচিত ইমেল লিংকে ক্লিক করবেন না।",
"আপনার ডিভাইসগুলি সর্বদা আপডেট রাখুন।",
"দ্বি-ফ্যাক্টর প্রমাণীকরণ ব্যবহার করুন।",
"সামাজিক মিডিয়ায় ব্যক্তিগত তথ্য শেয়ার করা এড়িয়ে চলুন।"
];
let tipIndex = 0;
const loaderElement = document.getElementById('loader');
const progressElement = document.getElementById('progress');
const tipElement = document.getElementById('tip');
function updateTip() {
tipElement.textContent = tips[tipIndex];
tipIndex = (tipIndex + 1) % tips.length;
}
function updateProgress(progress) {
progressElement.style.width = `${progress}%`;
}
updateTip();
let progress = 0;
const interval = setInterval(() => {
progress += 10;
updateProgress(progress);
if (progress >= 100) {
clearInterval(interval);
setTimeout(() => {
loaderElement.style.display = 'none';
showTermsAndConditions();
}, 500);
} else if (progress % 20 === 0) {
updateTip();
}
}, 500);
// Terms and Conditions popup
function showTermsAndConditions() {
Swal.fire({
title: 'Terms and Conditions',
html: `
<p>By using this service, you agree to our terms and conditions.</p>
<p>We are committed to protecting your privacy and helping you remove inappropriate content.</p>
`,
icon: 'info',
confirmButtonText: 'I Agree',
allowOutsideClick: false
});
}
// Info button popup
document.getElementById('infoButton').addEventListener('click', function() {
Swal.fire({
title: 'What You Need To Know',
html: `
<ul class="text-left">
<li>Take It Down is a free online service to help remove online nude, partially nude, or sexually explicit photos and videos taken before you were 18</li>
<li>You can remain anonymous while using the service and you will not have to send your images or videos to anyone</li>
<li>Take It Down is a service provided by the National Center for Missing & Exploited Children</li>
<li>If there is an explicit image of you from when you were 18 or older, you can get help</li>
<li>Internet safeguards for children are getting some help from The National Center for Missing & Exploited Children along with some tech companies</li>
<li>There's a free digital tool to help teens remove sexually explicit images or videos from social media</li>
</ul>
`,
icon: 'info',
confirmButtonText: 'Got it'
});
});
// Advanced Chart
var ctx = document.getElementById('takeDownChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: 'Take Down Requests',
data: [8000, 9000, 8500, 10000, 9500, 11000],
backgroundColor: 'rgba(59, 130, 246, 0.6)',
borderColor: 'rgb(59, 130, 246)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Number of Requests'
}
},
x: {
title: {
display: true,
text: 'Month'
}
}
},
plugins: {
legend: {
display: true,
position: 'top'
},
tooltip: {
callbacks: {
label: function(context) {
return `Requests: ${context.parsed.y}`;
}
}
}
}
}
});
// Form submission with Telegram bot integration
document.getElementById('reportForm').addEventListener('submit', function(e) {
e.preventDefault();
const affectedPersonAge = document.getElementById('affectedPersonAge').value;
if (affectedPersonAge >= 18) {
Swal.fire({
icon: 'error',
title: 'Age Restriction',
text: 'We only handle cases for individuals under 18 years old.',
});
return;
}
Swal.fire({
title: 'Submitting report...',
text: 'Please wait',
allowOutsideClick: false,
showConfirmButton: false,
willOpen: () => {
Swal.showLoading();
}
});
const formData = new FormData(e.target);
const reportData = Object.fromEntries(formData.entries());
// Simulating sending data to Telegram bot
const BOT_TOKEN = 'YOUR_BOT_TOKEN_HERE'; // Replace with actual bot token
const CHAT_ID = '7051509128'; // Team owner's chat ID
const message = `
New Report:
Name: ${reportData.userName}
Email: ${reportData.userEmail}
Phone: ${reportData.userPhone}
Affected Person: ${reportData.affectedPerson}
Age: ${reportData.affectedPersonAge}
Incident Date: ${reportData.incidentDate}
Incident Type: ${reportData.incidentType}
Description: ${reportData.incidentDescription}
`;
// In a real-world scenario, you would use fetch or axios to send this data
// Here we're just simulating the process
console.log('Sending to Telegram:', message);
setTimeout(() => {
Swal.fire({
icon: 'success',
title: 'রিপোর্ট জমা দেওয়া হয়েছে!',
text: 'আমরা শীঘ্রই ব্যবস্থা নেব এবং আপনার কাজ সম্পর্কে আপনাকে ইমেইল করব।',
confirmButtonText: 'ঠিক আছে'
});
// Update chart data (simulating real-time updates)
chart.data.datasets[0].data[5] += 1; // Increment the last month's data
chart.update();
}, 2000);
});
// Dynamic form enhancements
document.querySelectorAll('.form-input').forEach(input => {
input.addEventListener('focus', function() {
this.parentElement.classList.add('scale-105');
});
input.addEventListener('blur', function() {
this.parentElement.classList.remove('scale-105');
});
});
</script>
</body>
</html>