-
Notifications
You must be signed in to change notification settings - Fork 14
Expand file tree
/
Copy pathindex.html
More file actions
342 lines (304 loc) · 17.1 KB
/
index.html
File metadata and controls
342 lines (304 loc) · 17.1 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
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
<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Checker Scammer - Dokumentasi</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
display: ['Space Grotesk', 'sans-serif'],
},
colors: {
dark: {
bg: '#09090b',
card: '#18181b',
border: '#27272a',
},
brand: {
primary: '#8b5cf6', // Violet
accent: '#10b981', // Emerald
}
},
animation: {
'fade-in': 'fadeIn 0.6s ease-out forwards',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0', transform: 'translateY(10px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
}
}
}
}
};
</script>
<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&family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<style>
body {
background-color: #09090b;
color: #e4e4e7;
/* Mencegah scroll horizontal berlebih di HP */
overflow-x: hidden;
background-image:
radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.05), transparent 40%),
radial-gradient(circle at 100% 100%, rgba(16, 185, 129, 0.05), transparent 40%);
}
.glass-card {
background: rgba(24, 24, 27, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Efek hover dimatikan di touch device biar ga nyangkut */
@media (hover: hover) {
.glass-card:hover {
border-color: rgba(139, 92, 246, 0.3);
transform: translateY(-2px);
box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5);
}
}
/* Scrollbar Halus */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #09090b; }
::-webkit-scrollbar-thumb { background: #27272a; border-radius: 4px; }
.gradient-text {
background: linear-gradient(to right, #a78bfa, #34d399);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body class="antialiased selection:bg-brand-primary selection:text-white">
<nav class="fixed top-0 w-full z-50 border-b border-white/5 bg-dark-bg/85 backdrop-blur-md transition-all duration-300">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="flex items-center justify-between h-16">
<div class="flex items-center gap-3">
<span class="font-display font-bold text-base sm:text-lg tracking-tight text-white leading-none">
Checker<br class="sm:hidden"><span class="sm:ml-1 text-gray-400 sm:text-white">Scammer</span>
</span>
</div>
<a href="https://github.com/ViewTechOrg/Checker-Scammer" target="_blank" class="px-3 py-1.5 rounded-full border border-white/10 bg-white/5 text-xs font-medium text-gray-300 hover:text-white hover:bg-white/10 transition-colors flex items-center gap-2">
<i class="fab fa-github text-sm"></i>
<span class="hidden sm:inline">Lihat di GitHub</span>
<span class="sm:hidden">GitHub</span>
</a>
</div>
</div>
</nav>
<main class="pt-24 pb-12 max-w-6xl mx-auto px-4 sm:px-6 space-y-12 sm:space-y-20">
<section class="text-center space-y-4 sm:space-y-6 animate-fade-in px-2">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-violet-500/20 bg-violet-500/10 text-violet-300 text-[10px] sm:text-xs font-mono uppercase tracking-wider">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-violet-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-violet-500"></span>
</span>
CLI Investigation Tool
</div>
<h1 class="text-3xl sm:text-5xl md:text-6xl font-display font-bold text-white tracking-tight leading-tight">
Dokumentasi <br class="hidden sm:block"/>
<span class="gradient-text block sm:inline mt-1 sm:mt-0">Checker Scammer</span>
</h1>
<p class="text-sm sm:text-lg text-gray-400 max-w-xl mx-auto leading-relaxed px-4">
"Kenali dengan baik sebelum anda tertipu oleh hal yang tampak meyakinkan."
</p>
</section>
<div class="grid grid-cols-1 md:grid-cols-12 gap-4 sm:gap-6">
<div class="md:col-span-8 glass-card rounded-2xl p-6 sm:p-8">
<h2 class="text-xl sm:text-2xl font-display font-bold text-white mb-4 flex items-center gap-2"> Apa itu?
</h2>
<div class="space-y-4 text-sm sm:text-base text-gray-400 leading-relaxed text-justify sm:text-left">
<p>
<strong class="text-white">Checker-Scammer</strong> adalah alat Penyelidikan berbasis CLI yang memanfaatkan teknik
Perhitungan berdasarkan jumlah tag dalam batas tertentu.
</p>
<p>
Alat ini berfungsi untuk mengidentifikasi sebuah nomor platform WhatsApp apakah masuk golongan scammer atau aman sebelum memulai transaksi. Membantu mengurangi resiko penipuan online.
</p>
</div>
</div>
<div class="md:col-span-4 glass-card rounded-2xl p-6 sm:p-8 bg-gradient-to-br from-dark-card to-[#121214]">
<h2 class="text-lg sm:text-xl font-display font-bold text-white mb-4">Data Collected</h2>
<ul class="space-y-3 text-sm text-gray-400">
<li class="flex items-center gap-3 bg-white/5 p-2 rounded-lg">
<div class="w-6 h-6 rounded bg-brand-accent/20 flex items-center justify-center text-brand-accent text-xs"><i class="fas fa-user"></i></div>
<span>Foto Profil Target</span>
</li>
<li class="flex items-center gap-3 bg-white/5 p-2 rounded-lg">
<div class="w-6 h-6 rounded bg-brand-accent/20 flex items-center justify-center text-brand-accent text-xs"><i class="fas fa-phone"></i></div>
<span>Info Nomor HP</span>
</li>
<li class="flex items-center gap-3 bg-white/5 p-2 rounded-lg">
<div class="w-6 h-6 rounded bg-brand-accent/20 flex items-center justify-center text-brand-accent text-xs"><i class="fas fa-chart-bar"></i></div>
<span>Analisis Resiko</span>
</li>
</ul>
</div>
<div class="md:col-span-12 mt-4 sm:mt-0">
<h2 class="text-xl sm:text-2xl font-display font-bold text-white mb-4 sm:mb-6 pl-2 border-l-4 border-brand-primary">Fitur Utama</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6">
<div class="glass-card p-5 sm:p-6 rounded-xl relative overflow-hidden group">
<div class="w-10 h-10 rounded-lg bg-violet-500/20 flex items-center justify-center text-violet-400 mb-4">
<i class="fas fa-mobile-alt"></i>
</div>
<h3 class="font-bold text-white mb-2 text-lg">Analisis Nomor</h3>
<p class="text-xs sm:text-sm text-gray-400 leading-relaxed">Analisis cepat dan ringan melalui CLI untuk mendeteksi indikasi penipuan.</p>
</div>
<div class="glass-card p-5 sm:p-6 rounded-xl border-dashed border-white/20">
<div class="flex justify-between items-start mb-4">
<div class="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center text-blue-400">
<i class="fas fa-database"></i>
</div>
<span class="px-2 py-0.5 rounded bg-blue-500/10 text-blue-400 text-[10px] font-mono border border-blue-500/20">SOON</span>
</div>
<h3 class="font-bold text-white mb-2 text-lg">Analisis NIK</h3>
<p class="text-xs sm:text-sm text-gray-400 leading-relaxed">Fitur database kependudukan (coming soon) untuk validasi lebih akurat.</p>
</div>
<div class="glass-card p-5 sm:p-6 rounded-xl border-dashed border-white/20">
<div class="flex justify-between items-start mb-4">
<div class="w-10 h-10 rounded-lg bg-emerald-500/20 flex items-center justify-center text-emerald-400">
<i class="fas fa-eye"></i>
</div>
<span class="px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-400 text-[10px] font-mono border border-emerald-500/20">ADD</span>
</div>
<h3 class="font-bold text-white mb-2 text-lg">Show Tag Victim</h3>
<p class="text-xs sm:text-sm text-gray-400 leading-relaxed">Melihat histori laporan korban secara detail.</p>
</div>
</div>
</div>
<div class="md:col-span-12 glass-card rounded-2xl overflow-hidden border border-white/10 mt-4 sm:mt-8 shadow-2xl shadow-black/50">
<div class="border-b border-white/5 bg-black/30 p-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
<h2 class="text-lg sm:text-xl font-display font-bold text-white flex items-center gap-2">
<i class="fas fa-terminal text-gray-500"></i> Install & Jalankan
</h2>
<div class="hidden sm:flex gap-1.5">
<div class="w-3 h-3 rounded-full bg-red-500/20 border border-red-500/50"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500/20 border border-yellow-500/50"></div>
<div class="w-3 h-3 rounded-full bg-green-500/20 border border-green-500/50"></div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2">
<div class="p-0 bg-[#0c0c0c] border-b lg:border-b-0 lg:border-r border-white/5 relative group">
<div class="absolute top-0 left-0 w-full h-8 bg-gradient-to-b from-[#0c0c0c] to-transparent z-10 pointer-events-none"></div>
<button onclick="copyCode()" class="absolute top-4 right-4 z-20 bg-white/10 active:bg-white/20 text-white text-[10px] sm:text-xs px-3 py-1.5 rounded transition-all flex items-center gap-2 backdrop-blur-md border border-white/10">
<i class="fas fa-copy"></i> <span id="copyText">Salin</span>
</button>
<pre class="p-6 font-mono text-xs sm:text-sm text-gray-300 overflow-x-auto leading-loose whitespace-pre" id="codeBlock"><span class="text-violet-400">pkg</span> update && <span class="text-violet-400">pkg</span> upgrade
<span class="text-violet-400">apt</span> install git make just
<span class="text-yellow-300">git</span> clone https://github.com/ViewTechOrg/Checker-Scammer
<span class="text-blue-400">cd</span> Checker-Scammer
<span class="text-emerald-400">make</span> install
<span class="text-emerald-400">just</span> run</pre>
</div>
<div class="p-6 sm:p-8 space-y-6 sm:space-y-8 bg-dark-bg/50">
<div>
<h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-3 pb-2 border-b border-white/10">
Pengaturan Layar <span class="text-red-400">(Penting)</span>
</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div class="bg-dark-card p-3 rounded-lg border border-white/5 flex flex-row sm:flex-col items-center sm:items-start justify-between sm:justify-center gap-2">
<div class="flex items-center gap-2 text-violet-400">
<i class="fas fa-mobile-alt"></i> <span class="text-[10px] font-bold">PORTRAIT</span>
</div>
<div class="flex gap-4 sm:block">
<div class="font-mono text-sm sm:text-xl text-white">x: 101</div>
<div class="font-mono text-sm sm:text-xl text-white">y: 35</div>
</div>
</div>
<div class="bg-dark-card p-3 rounded-lg border border-white/5 flex flex-row sm:flex-col items-center sm:items-start justify-between sm:justify-center gap-2">
<div class="flex items-center gap-2 text-emerald-400">
<i class="fas fa-desktop"></i> <span class="text-[10px] font-bold">LANDSCAPE</span>
</div>
<div class="flex gap-4 sm:block">
<div class="font-mono text-sm sm:text-xl text-white">x: 181</div>
<div class="font-mono text-sm sm:text-xl text-white">y: 70</div>
</div>
</div>
</div>
<p class="text-[10px] sm:text-xs text-gray-500 mt-2 italic flex items-start gap-1">
<i class="fas fa-lightbulb text-yellow-500/50 mt-0.5"></i>
<span>Tips: Gunakan <strong>Cubit Layar (Zoom Gesture)</strong> untuk menyesuaikan tampilan di Termux HP.</span>
</p>
</div>
<div class="hidden sm:block">
<h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-3 pb-2 border-b border-white/10">Kontrol</h3>
<ul class="space-y-2 text-xs sm:text-sm text-gray-400">
<li class="flex items-center gap-2"><i class="fas fa-mouse-pointer w-4 text-center"></i> Navigasi: <strong>Panah / Kursor</strong></li>
<li class="flex items-center gap-2"><i class="fas fa-keyboard w-4 text-center"></i> Input: <strong>Keyboard</strong></li>
</ul>
</div>
<div class="mt-2 p-2 sm:p-3 bg-brand-primary/10 border border-brand-primary/20 rounded text-brand-primary text-[10px] sm:text-xs font-mono text-center">
"Sedia Payung Sebelum Hujan"
</div>
</div>
</div>
</div>
<div class="md:col-span-12 grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 mt-4 sm:mt-8">
<a href="https://github.com/ViewTechOrg/Checker-Scammer" target="_blank" class="glass-card p-5 sm:p-6 rounded-xl flex items-center justify-between group">
<div class="flex items-center gap-4">
<i class="fab fa-github text-2xl sm:text-3xl text-white"></i>
<div>
<h3 class="font-bold text-white text-sm sm:text-base">Dokumentasi</h3>
<p class="text-xs sm:text-sm text-gray-400">Source code & Updates</p>
</div>
</div>
<i class="fas fa-arrow-right text-gray-500 -rotate-45 group-hover:rotate-0 transition-transform"></i>
</a>
<a href="https://youtu.be/cMBJ_GvPey4?si=Mz5HnBlWFEbtJasf" target="_blank" class="glass-card p-5 sm:p-6 rounded-xl flex items-center justify-between group">
<div class="flex items-center gap-4">
<i class="fab fa-youtube text-2xl sm:text-3xl text-red-500"></i>
<div>
<h3 class="font-bold text-white text-sm sm:text-base">Tutorial Video</h3>
<p class="text-xs sm:text-sm text-gray-400">Cara penggunaan</p>
</div>
</div>
<i class="fas fa-play text-gray-500 text-xs sm:text-sm group-hover:text-red-500 transition-colors"></i>
</a>
</div>
</div>
</main>
<footer class="border-t border-white/5 bg-black/40 py-8 sm:py-12 mt-8">
<div class="max-w-6xl mx-auto px-4 text-center">
<div class="flex justify-center gap-6 sm:gap-8 mb-6 sm:mb-8">
<a href="https://github.com/ViewTechOrg" class="text-gray-400 hover:text-white transition-colors text-xl"><i class="fab fa-github"></i></a>
<a href="https://instagram.com/viewtechorg" class="text-gray-400 hover:text-pink-500 transition-colors text-xl"><i class="fab fa-instagram"></i></a>
<a href="https://wa.me/6281234567890" class="text-gray-400 hover:text-green-500 transition-colors text-xl"><i class="fab fa-whatsapp"></i></a>
<a href="mailto:email@example.com" class="text-gray-400 hover:text-blue-500 transition-colors text-xl"><i class="fas fa-envelope"></i></a>
</div>
<p class="text-gray-600 text-xs sm:text-sm">
© 2025 Checker Scammer Docs. <br class="sm:hidden">By ViewTechOrg
</p>
</div>
</footer>
<script>
function copyCode() {
const code = `pkg update && pkg upgrade
apt install git make just
git clone https://github.com/ViewTechOrg/Checker-Scammer
cd Checker-Scammer
make install
just run`;
navigator.clipboard.writeText(code).then(() => {
const btnText = document.getElementById('copyText');
const icon = btnText.parentElement.querySelector('i');
btnText.innerText = "Disalin";
icon.className = "fas fa-check text-green-400";
setTimeout(() => {
btnText.innerText = "Salin";
icon.className = "fas fa-copy";
}, 2000);
});
}
</script>
</body>
</html>