-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
301 lines (282 loc) · 22 KB
/
Copy pathindex.html
File metadata and controls
301 lines (282 loc) · 22 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
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BotScript | Premium Automations by @hammaadworks</title>
<meta name="description" content="BotScript: A curated collection of high-performance, autonomous Python scripts for web automation, media, and productivity. Built by hammaadworks.">
<script src="https://cdn.tailwindcss.com"></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=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
body { font-family: 'Plus Jakarta Sans', sans-serif; }
.glass { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); }
.card-hover:hover { transform: translateY(-6px); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.hero-gradient { background: radial-gradient(circle at top right, #e0e7ff 0%, #ffffff 50%, #f8fafc 100%); }
.video-overlay { background: linear-gradient(to top, rgba(2, 6, 23, 0.8) 0%, transparent 60%); }
</style>
</head>
<body class="bg-[#fafafa] text-slate-900 antialiased">
<!-- Navbar -->
<nav class="sticky top-0 z-50 glass border-b border-slate-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16 items-center">
<div class="flex items-center gap-3">
<div class="w-9 h-9 bg-slate-900 rounded-xl flex items-center justify-center text-white font-black text-xl italic">B</div>
<span class="font-extrabold text-xl tracking-tighter">BotScript</span>
</div>
<div class="hidden md:flex items-center gap-8 text-sm font-semibold text-slate-500">
<a href="#catalog" class="hover:text-slate-900 transition-colors">Catalog</a>
<a href="https://github.com/hammaadworks" target="_blank" class="hover:text-slate-900 transition-colors">@hammaadworks</a>
<a href="https://github.com/hammaadworks/python-bots" target="_blank" class="px-5 py-2.5 bg-slate-900 text-white rounded-xl hover:bg-slate-800 transition-all shadow-sm">Get Source</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<header class="relative overflow-hidden hero-gradient pt-24 pb-32 lg:pt-40 lg:pb-48">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-50 border border-indigo-100 text-indigo-600 text-xs font-bold mb-8 uppercase tracking-widest">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
</span>
The hammaadworks Collection
</div>
<h1 class="text-6xl lg:text-8xl font-extrabold tracking-tight text-slate-955 mb-8 leading-[0.9]">
Automation is <br><span class="text-indigo-600 italic">my craft.</span>
</h1>
<p class="text-xl text-slate-500 max-w-2xl mx-auto mb-12 leading-relaxed font-medium">
I am <span class="text-slate-900 font-bold">@hammaadworks</span>. Over the years, I've built dozens of automations to solve real-world problems. **BotScript** is my curated collection of the absolute best.
</p>
<div class="flex flex-col sm:flex-row gap-5 justify-center">
<a href="#catalog" class="px-10 py-5 bg-slate-900 text-white rounded-2xl font-bold shadow-2xl shadow-slate-200 hover:scale-[1.02] transition-all">
Explore My Collection
</a>
<a href="https://github.com/hammaadworks" target="_blank" class="px-10 py-5 bg-white border border-slate-200 text-slate-900 rounded-2xl font-bold hover:bg-slate-50 transition-all">
Hire Me / Collaborate
</a>
</div>
</div>
</header>
<!-- Catalog Section -->
<section id="catalog" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32">
<div class="flex flex-col md:flex-row justify-between items-end mb-20 gap-8">
<div class="max-w-xl">
<h2 class="text-4xl font-black mb-4 tracking-tight">The Elite Six</h2>
<p class="text-slate-500 font-medium">My most useful, high-performance scripts. All standardized as "one-filers" for instant utility.</p>
</div>
<div class="relative w-full md:w-80">
<input type="text" id="searchInput" placeholder="Search scripts..."
class="w-full px-6 py-4 rounded-2xl border border-slate-200 focus:ring-4 focus:ring-indigo-100 focus:border-indigo-500 outline-none transition-all shadow-sm font-medium">
</div>
</div>
<div id="scriptGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
<!-- 1. Bulk Mailer Pro -->
<div class="script-card group bg-white rounded-[2rem] border border-slate-100 shadow-sm overflow-hidden card-hover" data-tags="email bulk mail automation rich video">
<div class="aspect-[9/16] bg-slate-100 relative overflow-hidden group/video">
<video id="vid-1" src="assets/bulk_mail/demo.mp4" autoplay muted loop playsinline class="object-cover w-full h-full"></video>
<div class="absolute inset-0 video-overlay flex items-center justify-center opacity-0 group-hover/video:opacity-100 transition-opacity">
<button onclick="openFullscreen('vid-1')" class="p-4 bg-white/20 backdrop-blur-xl rounded-full text-white hover:bg-white/40 transition-all shadow-2xl">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
</svg>
</button>
</div>
<div class="absolute bottom-6 left-6">
<span class="px-3 py-1 bg-indigo-600 text-white text-[10px] font-black rounded-full uppercase tracking-tighter">Verified</span>
</div>
</div>
<div class="p-8">
<h3 class="text-2xl font-black mb-3 italic">Bulk Mailer Pro</h3>
<p class="text-slate-500 text-sm leading-relaxed mb-4 font-medium">High-fidelity email sender with progress tracking and SMTP security. Designed for @hammaadworks' outreach.</p>
<div class="flex flex-wrap gap-2 mb-8">
<span class="px-2 py-1 bg-slate-100 text-slate-600 text-[10px] font-bold rounded uppercase tracking-wider">Marketing</span>
<span class="px-2 py-1 bg-slate-100 text-slate-600 text-[10px] font-bold rounded uppercase tracking-wider">Outreach</span>
</div>
<a href="https://github.com/hammaadworks/python-bots/blob/master/bulk_mail.py" target="_blank" class="inline-flex items-center text-slate-900 font-bold text-sm group-hover:gap-3 transition-all">
View Source on GitHub <span class="ml-2">→</span>
</a>
</div>
</div>
<!-- 2. Google Forms Master -->
<div class="script-card group bg-white rounded-[2rem] border border-slate-100 shadow-sm overflow-hidden card-hover" data-tags="google forms automation faker video data testing">
<div class="aspect-[9/16] bg-slate-100 relative overflow-hidden group/video">
<video id="vid-2" src="assets/google_forms/demo.mov" autoplay muted loop playsinline class="object-cover w-full h-full"></video>
<div class="absolute inset-0 video-overlay flex items-center justify-center opacity-0 group-hover/video:opacity-100 transition-opacity">
<button onclick="openFullscreen('vid-2')" class="p-4 bg-white/20 backdrop-blur-xl rounded-full text-white hover:bg-white/40 transition-all shadow-2xl">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
</svg>
</button>
</div>
<div class="absolute bottom-6 left-6">
<span class="px-3 py-1 bg-indigo-600 text-white text-[10px] font-black rounded-full uppercase tracking-tighter">Autonomous</span>
</div>
</div>
<div class="p-8">
<h3 class="text-2xl font-black mb-3 italic">G-Forms Master</h3>
<p class="text-slate-500 text-sm leading-relaxed mb-4 font-medium">Autonomous filler with heuristic DOM scanning. Fills any form instantly without hardcoded IDs.</p>
<div class="flex flex-wrap gap-2 mb-8">
<span class="px-2 py-1 bg-slate-100 text-slate-600 text-[10px] font-bold rounded uppercase tracking-wider">Data Entry</span>
<span class="px-2 py-1 bg-slate-100 text-slate-600 text-[10px] font-bold rounded uppercase tracking-wider">Testing</span>
</div>
<a href="https://github.com/hammaadworks/python-bots/blob/master/automate_google_forms.py" target="_blank" class="inline-flex items-center text-slate-900 font-bold text-sm group-hover:gap-3 transition-all">
View Source on GitHub <span class="ml-2">→</span>
</a>
</div>
</div>
<!-- 3. WhatsApp Master -->
<div class="script-card group bg-white rounded-[2rem] border border-slate-100 shadow-sm overflow-hidden card-hover" data-tags="whatsapp automation selenium support">
<div class="aspect-[9/16] bg-green-600 relative overflow-hidden flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 text-white opacity-20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12c0 1.76.46 3.42 1.25 4.88L2 22l5.13-1.25c1.46.79 3.12 1.25 4.87 1.25 5.52 0 10-4.48 10-10S17.52 2 12 2z"/></svg>
<div class="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-transparent"></div>
<div class="absolute bottom-6 left-6">
<span class="px-3 py-1 bg-indigo-600 text-white text-[10px] font-black rounded-full uppercase tracking-tighter">Communication</span>
</div>
</div>
<div class="p-8">
<h3 class="text-2xl font-black mb-3 italic">WhatsApp Master</h3>
<p class="text-slate-500 text-sm leading-relaxed mb-4 font-medium">Sophisticated Selenium tool for WhatsApp Web. Search, select, and send media/text at scale.</p>
<div class="flex flex-wrap gap-2 mb-8">
<span class="px-2 py-1 bg-slate-100 text-slate-600 text-[10px] font-bold rounded uppercase tracking-wider">Support</span>
<span class="px-2 py-1 bg-slate-100 text-slate-600 text-[10px] font-bold rounded uppercase tracking-wider">Bulk Messaging</span>
</div>
<a href="https://github.com/hammaadworks/python-bots/blob/master/automate_whatsapp.py" target="_blank" class="inline-flex items-center text-slate-900 font-bold text-sm group-hover:gap-3 transition-all">
View Source on GitHub <span class="ml-2">→</span>
</a>
</div>
</div>
<!-- 4. AI Documentor -->
<div class="script-card group bg-white rounded-[2rem] border border-slate-100 shadow-sm overflow-hidden card-hover" data-tags="ai gemini documentation precommit hook">
<div class="aspect-[9/16] bg-slate-100 relative overflow-hidden group/image">
<img src="assets/code_documentation/proof.png" alt="AI Documentor Proof" class="object-cover w-full h-full">
<div class="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-transparent"></div>
<div class="absolute bottom-6 left-6">
<span class="px-3 py-1 bg-indigo-600 text-white text-[10px] font-black rounded-full uppercase tracking-tighter">AI-Powered</span>
</div>
</div>
<div class="p-8">
<h3 class="text-2xl font-black mb-3 italic">AI Documentor</h3>
<p class="text-slate-500 text-sm leading-relaxed mb-4 font-medium">Automate your codebase documentation using Gemini 2.0. Accepts files/folders. Excellent as a Pre-Commit Hook.</p>
<div class="flex flex-wrap gap-2 mb-8">
<span class="px-2 py-1 bg-slate-100 text-slate-600 text-[10px] font-bold rounded uppercase tracking-wider">Pre-Commit Hook</span>
<span class="px-2 py-1 bg-slate-100 text-slate-600 text-[10px] font-bold rounded uppercase tracking-wider">Code Quality</span>
</div>
<a href="https://github.com/hammaadworks/python-bots/blob/master/automate_code_documentation.py" target="_blank" class="inline-flex items-center text-slate-900 font-bold text-sm group-hover:gap-3 transition-all">
View Source on GitHub <span class="ml-2">→</span>
</a>
</div>
</div>
<!-- 5. Ztype Game Bot -->
<div class="script-card group bg-white rounded-[2rem] border border-slate-100 shadow-sm overflow-hidden card-hover" data-tags="game bot ocr cv vision">
<div class="aspect-[9/16] bg-slate-100 relative overflow-hidden group/video">
<video id="vid-5" src="assets/ztype/demo.mp4" autoplay muted loop playsinline class="object-cover w-full h-full"></video>
<div class="absolute inset-0 video-overlay flex items-center justify-center opacity-0 group-hover/video:opacity-100 transition-opacity">
<button onclick="openFullscreen('vid-5')" class="p-4 bg-white/20 backdrop-blur-xl rounded-full text-white hover:bg-white/40 transition-all shadow-2xl">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
</svg>
</button>
</div>
<div class="absolute bottom-6 left-6">
<span class="px-3 py-1 bg-indigo-600 text-white text-[10px] font-black rounded-full uppercase tracking-tighter">CV / OCR</span>
</div>
</div>
<div class="p-8">
<h3 class="text-2xl font-black mb-3 italic">Ztype Game Bot</h3>
<p class="text-slate-500 text-sm leading-relaxed mb-4 font-medium">Real-time Computer Vision and OCR bot to dominate the Ztype typing game. Blazing fast accuracy.</p>
<div class="flex flex-wrap gap-2 mb-8">
<span class="px-2 py-1 bg-slate-100 text-slate-600 text-[10px] font-bold rounded uppercase tracking-wider">Computer Vision</span>
<span class="px-2 py-1 bg-slate-100 text-slate-600 text-[10px] font-bold rounded uppercase tracking-wider">Testing</span>
</div>
<a href="https://github.com/hammaadworks/python-bots/blob/master/automate_ztype.py" target="_blank" class="inline-flex items-center text-slate-900 font-bold text-sm group-hover:gap-3 transition-all">
View Source on GitHub <span class="ml-2">→</span>
</a>
</div>
</div>
<!-- 6. Wgetube Pro -->
<div class="script-card group bg-white rounded-[2rem] border border-slate-100 shadow-sm overflow-hidden card-hover" data-tags="youtube media tui content learning">
<div class="aspect-[9/16] bg-slate-950 relative overflow-hidden flex items-center justify-center">
<div class="text-indigo-600 font-mono text-[10px] group-hover:scale-110 transition-transform tracking-widest uppercase">Initializing TUI...</div>
<div class="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-transparent"></div>
<div class="absolute bottom-6 left-6">
<span class="px-3 py-1 bg-indigo-600 text-white text-[10px] font-black rounded-full uppercase tracking-tighter">Suite</span>
</div>
</div>
<div class="p-8">
<h3 class="text-2xl font-black mb-3 italic">Wgetube Pro</h3>
<p class="text-slate-500 text-sm leading-relaxed mb-4 font-medium">My most advanced media project. A Terminal hub for downloading, clipping, and looping media.</p>
<div class="flex flex-wrap gap-2 mb-8">
<span class="px-2 py-1 bg-slate-100 text-slate-600 text-[10px] font-bold rounded uppercase tracking-wider">Content Creation</span>
<span class="px-2 py-1 bg-slate-100 text-slate-600 text-[10px] font-bold rounded uppercase tracking-wider">Learning</span>
</div>
<a href="https://github.com/hammaadworks/python-bots/blob/master/ytd_cli.py" target="_blank" class="inline-flex items-center text-slate-900 font-bold text-sm group-hover:gap-3 transition-all">
View Source on GitHub <span class="ml-2">→</span>
</a>
</div>
</div>
</div>
</section>
<!-- Footer / CTA -->
<footer class="bg-white border-t border-slate-100 py-32 text-center">
<div class="max-w-4xl mx-auto px-4">
<h2 class="text-5xl font-black tracking-tight mb-8 leading-tight">Like what you see? <br>Let's talk about <span class="text-indigo-600 italic">your</span> next project.</h2>
<p class="text-xl text-slate-500 font-medium mb-12">I'm <span class="text-slate-950 font-bold">@hammaadworks</span>, and I specialize in high-impact technical solutions. Reach out to collaborate or hire me.</p>
<div class="flex flex-wrap justify-center gap-8 mb-12">
<a href="https://x.com/hammaadworks" target="_blank" class="font-bold text-slate-900 hover:text-indigo-600 transition-colors">X (Twitter)</a>
<a href="https://github.com/hammaadworks" target="_blank" class="font-bold text-slate-900 hover:text-indigo-600 transition-colors">GitHub</a>
<a href="https://linkedin.com/in/hammaadworks" target="_blank" class="font-bold text-slate-900 hover:text-indigo-600 transition-colors">LinkedIn</a>
<a href="https://www.producthunt.com/@hammaadworks" target="_blank" class="font-bold text-slate-900 hover:text-indigo-600 transition-colors">ProductHunt</a>
</div>
<div class="flex flex-wrap justify-center gap-6 text-sm">
<span class="text-slate-400 font-bold uppercase tracking-widest italic">hammaadworks@gmail.com</span>
<span class="text-slate-300">|</span>
<span class="text-slate-400 font-bold uppercase tracking-widest italic">hammaadworks.com (soon)</span>
</div>
<p class="mt-24 text-slate-300 text-[10px] font-black uppercase tracking-[0.2em] italic">© 2026 BotScript • Built with dedication by hammaadworks. Alhamdulillah.</p>
</div>
</footer>
<!-- Scripts -->
<script>
// Fullscreen Logic
function openFullscreen(id) {
const elem = document.getElementById(id);
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
// Enable controls and unmute in fullscreen for better experience
elem.controls = true;
elem.muted = false;
// Revert when exiting fullscreen
document.addEventListener('fullscreenchange', () => {
if (!document.fullscreenElement) {
elem.controls = false;
elem.muted = true;
elem.play(); // Ensure it keeps playing
}
});
}
// Search Logic
const searchInput = document.getElementById('searchInput');
const cards = document.querySelectorAll('.script-card');
searchInput.addEventListener('input', (e) => {
const query = e.target.value.toLowerCase();
cards.forEach(card => {
const tags = card.getAttribute('data-tags').toLowerCase();
const title = card.querySelector('h3').innerText.toLowerCase();
if (tags.includes(query) || title.includes(query)) {
card.style.display = 'block';
} else {
card.style.display = 'none';
}
});
});
</script>
</body>
</html>