1<!DOCTYPE html> 2<html lang="en" dir="ltr"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 8 <!-- === SEO === --> 9 <title>The Ultimate AI Tools Library & Prompt Gallery | AI Tools Hub</title> 10 <meta name="description" 11 content="Explore the largest free collection of AI tools (Image Converter, OCR, QR) and professional Midjourney/DALL-E prompts. Your all-in-one creative hub."> 12 <meta name="keywords" 13 content="ai tools library, free online tools, midjourney prompts, image converter, qr code generator, ocr online, notion templates free"> 14 15 <link rel="canonical" href="https://www.adawatai.dev/library.html"> 16 <link rel="alternate" hreflang="en" href="https://www.adawatai.dev/library.html"> 17 <link rel="alternate" hreflang="ar" href="https://www.adawatai.dev/library-ar.html"> 18 <link rel="alternate" hreflang="x-default" href="https://www.adawatai.dev/library.html"> 19 20 <!-- Open Graph --> 21 <meta property="og:title" content="The Ultimate AI Tools Library - AI Tools Hub"> 22 <meta property="og:description" content="Free tools, pro prompts, and resources for creators. All in one place."> 23 <meta property="og:image" content="https://www.adawatai.dev/img/og-library.jpg"> 24 <meta property="og:type" content="website"> 25 <meta name="twitter:card" content="summary_large_image"> 26 27 <!-- Schema.org --> 28
28<script type="application/ld+json"> 29 { 30 "@context": "https://schema.org", 31 "@type": "CollectionPage", 32 "name": "AI Tools & Prompts Library", 33 "url": "https://www.adawatai.dev/library.html", 34 "description": "A comprehensive library of free AI tools and professional prompts.", 35 "publisher": { 36 "@type": "Organization", 37 "name": "AI Tools Hub", 38 "logo": { "@type": "ImageObject", "url": "https://www.adawatai.dev/favicon.png" } 39 } 40 } 41 </script>
41 42 43 <!-- Technical Scripts --> 44
44<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6458463561472933" 45 crossorigin="anonymous"></script>
vendor: 68 bytes, lines 45-46
45 46 <script async src="https://www.googletagmanager.com/gtag/js?id=
46G-ZCBG56HS6D
vendor: 39 bytes, lines 46-47
46" nonce="adawatai-nonce"></script> 47
47<script nonce="adawatai-nonce"> 48
vendor: 154 bytes, lines 48-51
48window.dataLayer = window.dataLayer || []; 49 function gtag() { dataLayer.push(arguments); } 50 gtag('js', new Date()); 51 gtag('config', '
51G-ZCBG56HS6D
vendor: 8 bytes, lines 51-52
51'); 52
52</script>
52 53 54 <!-- CSP --> 55 <meta http-equiv="Content-Security-Policy" content=" 56 default-src 'self'; 57 script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.tailwindcss.com https://cdnjs.cloudflare.com https://unpkg.com https://www.googletagmanager.com https://pagead2.googlesyndication.com https://googleads.g.doubleclick.net https://cdn.onesignal.com https://onesignal.com; 58 style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://fonts.googleapis.com; 59 font-src 'self' data: https://cdnjs.cloudflare.com https://fonts.gstatic.com; 60 img-src 'self' data: https://www.adawatai.dev https://images.unsplash.com https://i.imgur.com https://googleads.g.doubleclick.net https://pagead2.googlesyndication.com blob:; 61 connect-src 'self' https://formspree.io https://*.google-analytics.com https://*.googlesyndication.com https://cdn.onesignal.com https://onesignal.com https://api.onesignal.com; 62 worker-src 'self' blob: https://cdn.onesignal.com; 63 frame-src 'self' https://googleads.g.doubleclick.net https://*.googlesyndication.com https://onesignal.com; 64 upgrade-insecure-requests;"> 65 66 <!-- =================================================================================== --> 67 <!-- START: FAVICONS & APP ICONS CONFIGURATION --> 68 <!-- =================================================================================== --> 69 <link rel="icon" href="/favicon.svg?v=4" type="image/svg+xml"> 70 <link rel="shortcut icon" href="/favicon.ico?v=4"> 71 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=4"> 72 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=4"> 73 <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png?v=4"> 74 <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=4"> 75 <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png?v=4"> 76 <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png?v=4"> 77 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png?v=4"> 78 <meta name="apple-mobile-web-app-title" content="Ø£Ø¯ÙØ§ØªÙ"> 79 <link rel="mask-icon" href="/safari-pinned-tab.svg?v=4" color="#7e22ce"> 80 <link rel="manifest" href="/site.webmanifest?v=4"> 81 <meta name="msapplication-TileColor" content="#7e22ce"> 82 <meta name="theme-color" content="#ffffff"> 83 <!-- =================================================================================== --> 84 <!-- END: FAVICONS & APP ICONS CONFIGURATION --> 85 <!-- =================================================================================== --> 86 <!-- Styles --> 87
87<script src="https://cdn.tailwindcss.com"></script>
87 88 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> 89 <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700&display=swap" rel="stylesheet"> 90 <link rel="stylesheet" href="converter-style.css"> 91 92
92<script> 93 tailwind.config = { 94 darkMode: 'class', 95 theme: { 96 extend: { colors: { primary: '#7e22ce', secondary: '#5D5CDE', dark: '#1a1a2e', darker: '#0f0f1a', surface: '#1f2937' }, fontFamily: { sans: ['Tajawal', 'sans-serif'] } } 97 } 98 } 99 </script>
99 100 101 <!-- Dark Mode Init --> 102
102<script> 103 (function () { 104 try { 105 const theme = localStorage.getItem('aitools_darkMode'); 106 if (theme === '"dark"' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) { 107 document.documentElement.classList.add('dark'); 108 } 109 } catch (e) { } 110 })(); 111 </script>
111 112 113 <!-- OneSignal --> 114
114<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
114 115
115<script> 116 window.OneSignalDeferred = window.OneSignalDeferred || []; 117 OneSignalDeferred.push(async function (OneSignal) { 118 await OneSignal.init({ appId: "8ceefb22-ab6e-4640-8bfc-ce2ffa9c031c" }); 119 }); 120 </script>
120 121 122 123 <style> 124 body { 125 font-family: 'Outfit', sans-serif; 126 } 127 128 .library-card { 129 transition: all 0.3s ease; 130 border: 1px solid transparent; 131 } 132 133 .library-card:hover { 134 transform: translateY(-5px); 135 border-color: #7e22ce; 136 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); 137 } 138 139 .filter-btn.active { 140 background-color: #7e22ce; 141 color: white; 142 border-color: #7e22ce; 143 } 144 145 .fade-in { 146 opacity: 0; 147 transform: translateY(20px); 148 transition: opacity 0.6s ease-out, transform 0.6s ease-out; 149 } 150 151 .fade-in.appear { 152 opacity: 1; 153 transform: translateY(0); 154 } 155 156 .search-container:focus-within { 157 box-shadow: 0 0 0 3px rgba(126, 34, 206, 0.3); 158 border-color: #7e22ce; 159 } 160 161 /* Modal & Notification */ 162 #newsletter-modal-overlay { 163 display: none; 164 opacity: 0; 165 transition: opacity 0.3s ease-in-out; 166 position: fixed; 167 inset: 0; 168 z-index: 2002; 169 background-color: rgba(0, 0, 0, 0.6); 170 align-items: center; 171 justify-content: center; 172 } 173 174 #newsletter-modal-overlay.visible { 175 display: flex; 176 } 177 178 #newsletter-modal-content { 179 transform: scale(0.95); 180 opacity: 0; 181 transition: all 0.3s ease-in-out; 182 } 183 184 #newsletter-modal-overlay.visible #newsletter-modal-content { 185 transform: scale(1); 186 opacity: 1; 187 } 188 189 .notification { 190 position: fixed; 191 top: 20px; 192 left: 50%; 193 transform: translateX(-50%); 194 z-index: 3000; 195 padding: 12px 24px; 196 border-radius: 50px; 197 color: white; 198 font-weight: bold; 199 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); 200 display: flex; 201 align-items: center; 202 gap: 10px; 203 animation: slideDown 0.3s ease-out forwards; 204 } 205 206 @keyframes slideDown { 207 from { 208 top: -50px; 209 opacity: 0; 210 } 211 212 to { 213 top: 20px; 214 opacity: 1; 215 } 216 } 217 218 .floating-coffee-btn { 219 animation: float-wave 4s ease-in-out infinite; 220 } 221 222 @keyframes float-wave { 223 224 0%, 225 100% { 226 transform: translateY(0); 227 } 228 229 50% { 230 transform: translateY(-8px); 231 } 232 } 233 </style> 234</head> 235 236<body 237 class="bg-gray-50 dark:bg-darker text-gray-800 dark:text-gray-200 min-h-screen flex flex-col transition-colors duration-300"> 238 239 <div id="notification-container"></div> 240 241 <!-- HEADER --> 242 <header class="bg-white dark:bg-dark shadow-sm sticky top-0 z-50"> 243 <div class="container mx-auto px-4 py-3 flex items-center justify-between"> 244 <div class="flex items-center gap-x-8"> 245 <a href="index.html" class="text-xl font-bold text-primary whitespace-nowrap">AI Tools Hub</a> 246 <nav class="hidden md:flex"> 247 <ul class="flex items-center gap-x-6 text-sm font-medium"> 248 <li><a href="index.html" class="hover:text-primary transition">Home</a></li> 249 <li><a href="library.html" class="text-primary font-bold transition">Library</a></li> 250 <li><a href="blog/index.html" class="hover:text-primary transition">Blog</a></li> 251 </ul> 252 </nav> 253 </div> 254 <div class="flex items-center gap-x-3"> 255 <button id="newsletter-btn" 256 class="hidden md:inline-flex items-center gap-x-2 bg-primary text-white text-sm font-semibold px-4 py-2 rounded-lg hover:bg-secondary transition-colors duration-300"> 257 <i class="fas fa-envelope"></i> <span>Join</span> 258 </button> 259 <a href="library-ar.html" class="text-sm font-medium hover:text-primary transition-colors">Ø§ÙØ¹Ø±Ø¨ÙØ©</a> 260 <button id="theme-toggle" 261 class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-all"> 262 <i class="fas fa-moon dark:hidden"></i><i class="fas fa-sun hidden dark:block text-yellow-400"></i> 263 </button> 264 <button id="mobile-menu-toggle" 265 class="md:hidden p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-all"> 266 <i class="fas fa-bars"></i> 267 </button> 268 </div> 269 </div> 270 <div id="mobile-menu" 271 class="hidden px-4 md:hidden bg-white dark:bg-dark border-t border-gray-100 dark:border-gray-800"> 272 <ul class="flex flex-col space-y-2 py-2 text-sm font-medium"> 273 <li><a href="index.html" class="block py-2 hover:text-primary">Home</a></li> 274 <li><a href="library.html" class="block py-2 text-primary font-bold">Library</a></li> 275 <li><a href="blog/index.html" class="block py-2 hover:text-primary">Blog</a></li> 276 <li><button id="newsletter-btn-mobile" class="w-full text-left py-2 text-primary font-bold">Join 277 Us</button></li> 278 </ul> 279 </div> 280 </header> 281 282 <!-- MAIN CONTENT --> 283 <main class="container mx-auto px-4 py-12 max-w-6xl flex-grow"> 284 285 <!-- Hero & Search --> 286 <div class="text-center mb-12 fade-in"> 287 <h1 class="text-3xl md:text-5xl font-extrabold text-gray-900 dark:text-white mb-4"> 288 The Ultimate <span class="text-primary">Library</span> 289 </h1> 290 <p class="text-gray-500 dark:text-gray-400 max-w-xl mx-auto text-lg mb-8"> 291 Search and discover professional AI prompts, smart tools, and Notion templates in seconds. 292 </p> 293 <!-- === START: COMPACT PAYPAL CARD (ENGLISH) === --> 294 <div class="max-w-sm mx-auto my-8 px-4 fade-in" dir="ltr"> 295 <div class="bg-[#0f111a] border border-blue-500/20 rounded-2xl p-5 shadow-lg flex items-center gap-4"> 296 <!-- PayPal Mini Icon --> 297 <div 298 class="flex-shrink-0 w-12 h-12 bg-blue-900/20 rounded-xl flex items-center justify-center border border-blue-500/10"> 299 <i class="fab fa-paypal text-[#0070ba] text-2xl"></i> 300 </div> 301 302 <!-- Text Content --> 303 <div class="flex-grow text-left"> 304 <h3 class="text-white text-sm font-bold mb-1">Support Our Work â¤ï¸</h3> 305 <p class="text-gray-400 text-[11px] leading-tight mb-3"> 306 Your small contribution helps us keep this library free and cover server costs. 307 </p> 308 309 <!-- Compact Button --> 310 <a href="https://www.paypal.me/HamidBoughroud" target="_blank" 311 class="inline-flex items-center gap-2 bg-[#0070ba] hover:bg-[#005ea6] text-white text-[10px] font-bold py-1.5 px-4 roun
311ded-lg transition-all shadow-md"> 312 <span>Donate via PayPal</span> 313 <i class="fas fa-arrow-right text-[8px]"></i> 314 </a> 315 </div> 316 </div> 317 </div> 318 <!-- === END: COMPACT PAYPAL CARD === --> 319 <!-- Search Bar --> 320 <div 321 class="max-w-2xl mx-auto relative search-container bg-white dark:bg-surface rounded-xl border border-gray-200 dark:border-gray-700 transition-all"> 322 <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i> 323 <input type="text" id="search-input" placeholder="Search (e.g. Logo, Converter, Men...)" 324 class="w-full bg-transparent py-4 pl-12 pr-4 text-gray-900 dark:text-white outline-none rounded-xl"> 325 </div> 326 <!-- ========================================== --> 327 <!-- AD SLOT 1: Ø¥Ø¹ÙØ§Ù أسÙÙ Ø§ÙØµÙرة Ø§ÙØ¨Ø§Ø±Ø²Ø© --> 328 <!-- ========================================== --> 329 <div class="max-w-3xl mx-auto px-4"> 330 <div class="ad-container"> 331
331<script async 332 src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6458463561472933" 333 crossorigin="anonymous"></script>
333 334 <!-- tools ads --> 335 <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6458463561472933" 336 data-ad-slot="6619225418" data-ad-format="auto" data-full-width-responsive="true"></ins> 337
337<script> 338 (adsbygoogle = window.adsbygoogle || []).push({}); 339 </script>
339 <span class="text-gray-400">Ù Ø³Ø§ØØ© Ø¥Ø¹ÙØ§ÙÙØ© (AdSense 1)</span> 340 </div> 341 </div> 342 343 <!-- Filter Tabs --> 344 <div class="flex flex-wrap justify-center gap-3 mt-8"> 345 <button 346 class="filter-btn active px-6 py-2 rounded-full border border-gray-200 dark:border-gray-700 bg-white dark:bg-surface text-gray-600 dark:text-gray-300 font-bold text-sm transition hover:border-primary" 347 data-filter="all">All</button> 348 <button 349 class="filter-btn px-6 py-2 rounded-full border border-gray-200 dark:border-gray-700 bg-white dark:bg-surface text-gray-600 dark:text-gray-300 font-bold text-sm transition hover:border-primary" 350 data-filter="prompt">AI Prompts</button> 351 <button 352 class="filter-btn px-6 py-2 rounded-full border border-gray-200 dark:border-gray-700 bg-white dark:bg-surface text-gray-600 dark:text-gray-300 font-bold text-sm transition hover:border-primary" 353 data-filter="tool">Smart Tools</button> 354 <button 355 class="filter-btn px-6 py-2 rounded-full border border-gray-200 dark:border-gray-700 bg-white dark:bg-surface text-gray-600 dark:text-gray-300 font-bold text-sm transition hover:border-primary" 356 data-filter="resource">Resources</button> 357 </div> 358 </div> 359 360 <div id="library-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div> 361 362 <!-- Empty State --> 363 <div id="no-results" class="hidden text-center py-20 fade-in"> 364 <i class="fas fa-search text-6xl text-gray-200 dark:text-gray-700 mb-4 block"></i> 365 <p class="text-gray-500">No results found matching your search.</p> 366 </div> 367 368 </main> 369 370 <!-- FOOTER --> 371 <footer class="bg-white dark:bg-dark border-t border-gray-200 dark:border-gray-700 mt-16 pt-12 pb-8"> 372 <div class="container mx-auto px-4 text-center"> 373 <p class="text-sm text-gray-500 dark:text-gray-400">© 2025 AI Tools Hub. All Rights Reserved.</p> 374 </div> 375 </footer> 376 377 <!-- Newsletter Modal --> 378 <div id="newsletter-modal-overlay" 379 class="p-4 hidden fixed inset-0 z-[2002] bg-black/60 items-center justify-center transition-opacity opacity-0"> 380 <div id="newsletter-modal-content" 381 class="bg-white dark:bg-dark w-full max-w-md rounded-xl shadow-2xl scale-95 transition-transform"> 382 <div class="flex justify-between items-center p-5 border-b border-gray-200 dark:border-gray-700"> 383 <h3 id="newsletter-modal-title" class="text-xl font-bold text-primary">Join Our Newsletter!</h3> 384 <button id="modal-close-btn" 385 class="text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors"><i 386 class="fas fa-times text-2xl"></i></button> 387 </div> 388 <div class="p-6"> 389 <p class="mb-5 text-gray-600 dark:text-gray-300">Get the latest AI tools and premium prompts.</p> 390 <form id="newsletter-form" action="https://formspree.io/f/xpwryvwa" method="POST"> 391 <div class="mb-4"> 392 <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Email 393 Address</label> 394 <input type="email" name="email" required 395 class="w-full py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 focus:ring-2 focus:ring-primary transition" 396 placeholder="[email protected]"> 397 </div> 398 <button type="submit" id="modal-submit-btn" 399 class="w-full bg-primary text-white font-bold py-3 px-4 rounded-lg hover:bg-secondary transition-all">Subscribe 400 Now</button> 401 </form> 402 <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700 text-center"> 403 <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">Or support our work â¤ï¸</p> 404 <a href="https://ko-fi.com/adawatai" target="_blank" 405 class="inline-flex items-center justify-center gap-2 bg-[#FFDD00] text-gray-900 hover:bg-yellow-400 font-bold py-3 px-4 roun
405ded-lg shadow-md hover:shadow-lg transition-all text-sm w-full border border-yellow-500"> 406 <i class="fas fa-coffee text-lg"></i> <span>Support Us</span> 407 </a> 408 </div> 409 </div> 410 </div> 411 </div> 412 413 <!-- Floating Button --> 414 <a href="https://ko-fi.com/adawatai" target="_blank" rel="noopener noreferrer" 415 class="floating-coffee-btn fixed bottom-6 right-6 z-[100] flex items-center gap-2 bg-[#FFDD00] text-gray-900 px-4 py-3 rounded-full border border-yellow-500 font-bold transition-all duration-300 hover:scale-110 hover:shadow-yellow-400/50 group"> 416 <i class="fas fa-coffee text-2xl"></i> 417 <span class="font-bold hidden md:block">Support Us</span> 418 </a> 419 420 <!-- SCRIPTS --> 421
421<script> 422 // --- 1. GLOBAL SYSTEM (DIRECT & FIXED) --- 423 function showNotification(msg, isError = false) { 424 let container = document.getElementById('notification-container'); 425 if (!container) { 426 container = document.createElement('div'); 427 container.id = 'notification-container'; 428 container.className = 'fixed top-4 left-1/2 transform -translate-x-1/2 z-[3000]'; 429 document.body.appendChild(container); 430 } 431 const note = document.createElement('div'); 432 const bg = isError ? 'bg-red-600' : 'bg-green-600'; 433 note.className = `${bg} text-white px-6 py-3 rounded-full shadow-2xl flex items-center gap-3 text-sm font-bold transform transition-all duration-500 translate-y-[-50px] opacity-0 pointer-events-auto min-w-[280px] justify-center backdrop-blur-md`; 434 note.innerHTML = `<i class="fas ${isError ? 'fa-exclamation-circle' : 'fa-check-circle'} text-lg"></i> <span>${msg}</span>`; 435 container.appendChild(note); 436 requestAnimationFrame(() => note.classList.remove('translate-y-[-50px]', 'opacity-0')); 437 setTimeout(() => { note.classList.add('opacity-0', 'translate-y-[-50px]'); setTimeout(() => note.remove(), 500); }, 3000); 438 } 439 440 // --- 2. LIBRARY DATA --- 441 const libraryData = [ 442 { 443 title: "Professional Logo Prompts", 444 desc: "Create mascot, minimalist, and 3D logos with these tested prompts.", 445 icon: "fas fa-pen-nib", type: "prompt", url: "prompt/logo-prompts.html", 446 image: "prompt/img-prompt/logos/sushi-logo.webp", 447 count: "45+ Prompts" 448 }, 449 { 450 title: "Fruit & Food AI Art", 451 desc: "Creative prompts for generating cute fruit characters, coffee art, and hyper-realistic food.", 452 icon: "fas fa-lemon", 453 type: "prompt", 454 url: "prompt/fruit-art-prompts.html", 455 image: "prompt/img-prompt/fruit/cute-strawberry-baby.webp", 456 count: "5+ Prompts" 457 }, 458 { 459 title: "Men's Portrait & Fashion", 460 desc: "High-quality prompts for male models, fashion, and cinematic portraits.", 461 icon: "fas fa-user-tie", type: "prompt", url: "prompt/image-editing-prompts.html", 462 image: "prompt/img-prompt/man-cozy-desk-evening.webp", 463 count: "300+ Prompts" 464 }, 465 { 466 title: "Women's Beauty & Style", 467 desc: "Elegant prompts for female fashion, makeup, and artistic styling.", 468 icon: "fas fa-female", type: "prompt", url: "prompt/female-image-prompts.html", 469 image: "prompt/img-prompt/woman/woman-autumn-pink-vest.webp", 470 count: "55+ Prompts" 471 }, 472 473 { 474 title: "Luxury Cars & Lifestyle", 475 desc: "Hyper-realistic prompts for supercars and luxury environments.", 476 icon: "fas fa-car", type: "prompt", url: "prompt/car-prompts.html", 477 image: "prompt/img-prompt/man-convertible-coastal-white-tee.webp", 478 count: "20+ Prompts" 479 }, 480 { 481 title: "Gemini & Nano Banana Prompts", 482 desc: "Specialized codes for hyper-realistic portraits and cinematic color burst effects.", 483 icon: "fas fa-burst", 484 type: "prompt", 485 url: "prompt/gemini-prompts.html", 486 image: "prompt/img-prompt/man-neon-purple-blue-magenta-powder.webp", 487 count: "25+ Prompts" 488 }, 489 490 // 2. Image Shapes & Frames 491 { 492 title: "AI Image Shapes & Frames", 493 desc: "Put your photos inside geometric shapes, neon borders, and professional profile frames.", 494 icon: "fas fa-shapes", 495 type: "prompt", 496 url: "prompt/image-shapes-prompts.html", 497 image: "prompt/img-prompt/man-black-fluid-shape-profile.webp", 498 count: "15+ Prompts" 499 }, 500 501 // 3. Device Mockups 502 { 503 title: "Professional Device Mockups", 504 desc: "Showcase your app designs inside realistic iPhone, MacBook, and 3D product environments.", 505 icon: "fas fa-mobile-screen-button", 506 type: "prompt", 507 url: "prompt/mockup-prompts.html", 508 image: "prompt/img-prompt/mockup/devices-dark-podium.webp", 509 count: "30+ Prompts" 510 }, 511 512 // 4. Product Photography 513 { 514 title: "Product Photography Ads", 515 desc: "Transform basic product shots into high-end commercial advertisements with studio lighting.", 516 icon: "fas fa-camera-retro", 517 type: "prompt", 518 url: "prompt/product-ad-prompts.html", 519 image: "prompt/img-cgi/perfume-neon-mirror-reflection.webp", 520 count: "35+ Prompts" 521 }, 522 523 // 5. AI Sports & Gym 524 { 525 title: "AI Sports & Gym Transformation", 526 desc: "High-fidelity face preservation prompts to turn your photos into professional athlete scenes.", 527 icon: "fas fa-running", 528 type: "prompt", 529 url: "prompt/sports-prompts.html", 530 image: "prompt/img-prompt/sports/gym-athlete.webp", 531 count: "20+ Prompts" 532 }, 533 { 534 title: "Kids Fantasy & Realism", 535 desc: "Cute, cinematic, and cartoon-style prompts featuring children.", 536 icon: "fas fa-child", type: "prompt", url: "prompt/kids-image-prompts.html", 537 image: "prompt/img-prompt/kids/boy-gamer-neon-setup.webp", 538 count: "25+ Prompts" 539 }, 540 { 541 title: "Data & Infographics", 542 desc: "Generate modern charts, isometric data visualizations, and UI elements.", 543 icon: "fas fa-chart-pie", type: "prompt", url: "prompt/infographics-prompts.html", 544 image: "prompt/img-prompt/infographics/pc-components.webp", 545 count: "15+ Prompts" 546 }, 547 { 548 title: "VEO3 Video Generation", 549 desc: "Advanced prompts tailored for AI video generation and motion.", 550 icon: "fas fa-video", type: "prompt", url: "prompt/veo3-prompts.html", 551 image: "prompt/video-prompt/posters/veo3-container-office-build.webp", 552 count: "10+ Prompts" 553 }, 554 { 555 title: "Creative Image Blending", 556 desc: "Prompts for double exposure, surrealism, and mixing elements.", 557 icon: "fas fa-layer-group", type: "prompt", url: "prompt/image-blending-prompts.html", 558 image: "prompt/img-prompt/blendin/muslim-couple-rose-archway.webp", 559 count: "20+ Prompts" 560 }, 561 { 562 title: "Smart Image Converter", 563 desc: "Compress & Convert JPG, PNG, WEBP instantly in your browser.", 564 icon: "fas fa-images", type: "tool", url: "tools/image-converter.html", 565 image: "prompt/img-prompt/converter.webp", 566 count: "1 Free Tool" 567 }, 568 { 569 title: "Pro QR Code Designer", 570 desc: "Generate custom colored QR codes with your own logo embedded.", 571 icon: "fas fa-qrcode", type: "tool", url: "tools/qr-generator.html", 572 image: "prompt/img-prompt/qr-code.webp", 573 count: "1 Free Tool" 574 }, 575 { 576 title: "OCR Text Extractor", 577 desc: "Extract text from any image accurately using AI vision.", 578 icon: "fas fa-font", type: "tool", url: "tools/ocr-tool.html", 579 image: "prompt/img-prompt/ocr.webp", 580 count: "1 Free Tool" 581 }, 582 { 583 title: "YouTube Metadata Tool", 584 desc: "Extract tags, thumbnails, and descriptions from any YT video.", 585 icon: "fab fa-youtube", type: "tool", url: "tools/youtube-tool.html", 586 image: "prompt/img-prompt/youtube.webp", 587 count: "1 Free Tool" 588 }, 589 { 590 title: "Notion Pro Templates", 591 desc: "Boost your productivity with our free management templates.", 592 icon: "fas fa-file-alt", type: "resource", url: "notion/notion-templates.html", 593 image: "img/library/notion.webp", 594 count: "1 Templates" 595 }, 596 597 ]; 598 599 document.addEventListener('DOMContentLoaded', () => { 600 // Theme Logic 601 const themeToggle = document.getElementById('theme-toggle'); 602 themeToggle.addEventListener('click', () => { 603 const isDark = document.documentElement.classList.toggle('dark'); 604 localStorage.setItem('aitools_darkMode', isDark ? 'dark' : 'light'); 605 }); 606 607 // Mobile Menu 608 const mobileMenuBtn = document.getElementById('mobile-menu-toggle'); 609 const mobileMenu = document.getElementById('mobile-menu'); 610 mobileMenuBtn.addEventListener('click', () => mobileMenu.classList.toggle('hidden')); 611 612 // Render Logic 613 const grid = document.getElementById('library-grid'); 614 const searchInput = document.getElementById('search-input'); 615 const filterBtns = document.querySelectorAll('.filter-btn'); 616 const noResults = document.getElementById('no-results'); 617 function render(items) { 618 const grid = document.getElementById('library-grid'); 619 const noResults = document.getElementById('no-results'); 620 621 grid.innerHTML = ''; 622 if (items.length === 0) { 623 noResults.classList.remove('hidden'); 624 return; 625 } 626 noResults.classList.add('hidden'); 627
628 items.forEach(item => { 629 const el = document.createElement('a'); 630 el.href = item.url; 631 el.className = `library-card flex flex-col bg-white dark:bg-surface rounded-2xl border border-gray-200 dark:border-gray-700 relative overflow-hidden group h-full shadow-sm hover:shadow-xl transition-all duration-300`; 632 633 const typeLabel = item.type === 'tool' ? 'Tool' : (item.type === 'prompt' ? 'Prompt' : 'Resource'); 634 const badgeColor = item.type === 'tool' ? 'bg-blue-500 text-white' : (item.type === 'prompt' ? 'bg-purple-500 text-white' : 'bg-gray-700 text-white'); 635 636 // ⨠اÙÙÙØ¯ Ø§ÙØ°ÙÙ ÙÙØ´Ø§Ø±Ø©: Ø³ÙØªÙ Ø±Ø³Ù ÙØ§ ÙÙØ· إذا ÙØ§Ù ÙÙØ§Ù عدد ⨠637 let countBadgeHTML = ''; 638 if (item.count) { 639 countBadgeHTML = ` 640 <div class="flex-shrink-0 bg-primary/10 dark:bg-purple-900/30 text-primary dark:text-purple-300 border border-primary/20 dark:border-purple-800/50 text-[11px] font-bold px-2.5 py-1 rounded-md flex items-center gap-1.5 shadow-sm h-fit mt-0.5"> 641 <i class="fas fa-layer-group opacity-80"></i> 642 <span>${item.count}</span> 643 </div> 644 `; 645 } 646 647 el.innerHTML = ` 648 <!-- 1. ØµÙØ±Ø© Ø§ÙØºÙØ§Ù Ø§ÙØ¹ÙÙÙØ© --> 649 <div class="relative w-full h-44 overflow-hidden bg-gray-100 dark:bg-gray-800 flex-shrink-0"> 650 <img src="${item.image}" alt="${item.title}" loading="lazy" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"> 651 <span class="absolute top-3 right-3 ${badgeColor} text-[11px] font-bold px-3 py-1.5 rounded-full shadow-md backdrop-blur-sm bg-opacity-90 tracking-wide"> 652 ${typeLabel} 653 </span> 654 </div> 655 656 <!-- 2. Ù ØØªÙÙ Ø§ÙØ¨Ø·Ø§ÙØ© --> 657 <div class="p-5 flex flex-col flex-grow"> 658 659 <!-- ⨠سطر Ø§ÙØ¹ÙÙØ§Ù ÙØ§Ùعدد (Ø§ÙØªØ¹Ø¯ÙÙ Ø§ÙØ¬Ø¯Ùد) ⨠--> 660 <div class="flex justify-between items-start gap-3 mb-2"> 661 662 <!-- Ø§ÙØ£ÙÙÙÙØ© ÙØ§ÙعÙÙØ§Ù (عÙ٠اÙÙØ³Ø§Ø±) --> 663 <h3 class="text-[19px] font-bold text-gray-900 dark:text-white group-hover:text-primary transition-colors flex items-start gap-2 leading-tight flex-1"> 664 <i class="${item.icon} text-primary dark:text-purple-400 text-lg mt-0.5"></i> 665 <span class="line-clamp-2">${item.title}</span> 666 </h3> 667 668 <!-- شارة Ø§ÙØ¹Ø¯Ø¯ (عÙ٠اÙÙÙ ÙÙ Ù٠اÙÙØ±Ø§Øº) --> 669 ${countBadgeHTML} 670 671 </div> 672 673 <!-- اÙÙØµÙ --> 674 <p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2 mb-4 flex-grow leading-relaxed"> 675 ${item.desc} 676 </p> 677 678 <!-- â¨ Ø§ÙØ²Ø± Ø§ÙØ¨ÙÙØ³Ø¬Ù Ø§ÙØ«Ø§Ø¨Øª ÙØ§ÙØ£ÙÙ٠⨠--> 679 <div class="mt-auto pt-3 border-t border-gray-100 dark:border-gray-700/50"> 680 <div class="w-full bg-primary hover:bg-secondary text-white text-sm font-bold py-2.5 px-4 rounded-xl flex items-center justify-between shadow-md hover:shadow-lg transition-all duration-300"> 681 <span>Explore Section</span> 682 <div class="w-7 h-7 rounded-full bg-white/20 flex items-center justify-center"> 683 <i class="fas fa-arrow-right transform group-hover:translate-x-1 transition-transform"></i> 684 </div> 685 </div> 686 </div> 687 </div> 688 `; 689 grid.appendChild(el); 690 }); 691 } 692 render(libraryData); 693 694 filterBtns.forEach(btn => { 695 btn.addEventListener('click', () => { 696 filterBtns.forEach(b => b.classList.remove('active')); 697 btn.classList.add('active');
698 const filter = btn.dataset.filter; 699 render(filter === 'all' ? libraryData : libraryData.filter(i => i.type === filter)); 700 }); 701 }); 702 703 searchInput.addEventListener('input', (e) => { 704 const term = e.target.value.toLowerCase(); 705 render(libraryData.filter(item => 706 item.title.toLowerCase().includes(term) || item.desc.toLowerCase().includes(term) 707 )); 708 }); 709 710 // Newsletter Logic (FIXED) 711 const modal = document.getElementById('newsletter-modal-overlay'); 712 const modalContent = document.getElementById('newsletter-modal-content'); 713 714 const openModal = () => { 715 if (!modal) return; 716 modal.classList.remove('hidden'); // Ensure it's not hidden via Tailwind 717 modal.style.display = 'flex'; // Force display flex 718 719 // Small delay to allow CSS transition 720 setTimeout(() => { 721 modal.classList.add('visible'); 722 modal.style.opacity = '1'; 723 if (modalContent) { 724 modalContent.style.transform = 'scale(1)'; 725 modalContent.style.opacity = '1'; 726 } 727 }, 10); 728 }; 729 730 const closeModal = () => { 731 if (!modal) return; 732 modal.style.opacity = '0'; 733 modal.classList.remove('visible'); 734 735 if (modalContent) { 736 modalContent.style.transform = 'scale(0.95)'; 737 modalContent.style.opacity = '0'; 738 } 739 740 setTimeout(() => { 741 modal.style.display = 'none'; 742 }, 300); // Match CSS transition time 743 744 localStorage.setItem('aitools_newsletter', 'closed'); 745 }; 746 747 document.addEventListener('click', (e) => { 748 if (e.target.closest('#newsletter-btn') || e.target.closest('#newsletter-btn-mobile')) { 749 e.preventDefault(); 750 openModal(); 751 } 752 if (e.target.closest('#modal-close-btn') || e.target === modal) { 753 e.preventDefault(); 754 closeModal(); 755 } 756 }); 757 758 // Fade In 759 const observer = new IntersectionObserver((entries) => { 760 entries.forEach(entry => { if (entry.isIntersecting) entry.target.classList.add('appear'); }); 761 }, { threshold: 0.1 }); 762 document.querySelectorAll('.fade-in').forEach(el => observer.observe(el)); 763 // ============================================================ 764 // === 2026 GRAND CELEBRATION (Confetti + Popup) ð === 765 // ============================================================ 766 function celebrate2026() { 767 // 1. Ø§ÙØªØÙÙ: ÙÙ Ø´Ø§ÙØ¯ Ø§ÙØ²Ø§Ø¦Ø± Ø§ÙØ§ØØªÙا٠ÙÙ ÙØ°Ù Ø§ÙØ¬ÙØ³Ø©Ø 768 if (sessionStorage.getItem('celebrated_2026_pro')) return; 769 770 // 2. تØÙ ÙÙ Ù ÙØªØ¨Ø© اÙÙÙÙÙÙØªÙ 771 const script = document.createElement('script'); 772 script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js'; 773 774 script.onload = () => { 775 // Ø£ÙÙØ§Ù اÙÙ ÙÙØ¹ (بÙÙØ³Ø¬ÙØ Ø°ÙØ¨ÙØ Ø£Ø¨ÙØ¶) 776 const colors = ['#7e22ce', '#5D5CDE', '#FFD700', '#ffffff']; 777 778 // --- Ø£: تشغÙÙ Ø§ÙØ£Ùعاب اÙÙØ§Ø±ÙØ© --- 779 const duration = 4000; 780 const end = Date.now() + duration; 781 782 (function frame() { 783 confetti({ 784 particleCount: 4, 785 angle: 60, 786 spread: 55, 787 origin: { x: 0 }, 788 colors: colors, 789 zIndex: 9999 790 }); 791 confetti({ 792 particleCount: 4, 793 angle: 120, 794 spread: 55, 795 origin: { x: 1 }, 796 colors: colors, 797 zIndex: 9999 798 }); 799 800 if (Date.now() < end) { 801 requestAnimationFrame(frame); 802 } 803 }()); 804 805 // --- ب: Ø¥Ø¸ÙØ§Ø± Ø¨Ø·Ø§ÙØ© 2026 --- 806 show2026Card(); 807 808 // ØÙظ Ø§ÙØØ§ÙØ© 809 sessionStorage.setItem('celebrated_2026_pro', 'true'); 810 }; 811 document.body.appendChild(script); 812 } 813 814 function show2026Card() { 815 // ØªØØ¯Ùد اÙÙØºØ© ÙØ§ÙÙØµÙص 816 const isAr = document.documentElement.lang === 'ar' || document.dir === 'rtl'; 817 const titleText = isAr ? 'Ø³ÙØ© Ø³Ø¹ÙØ¯Ø©' : 'Happy New Year'; 818 const subText = isAr ? 'ÙØªÙ ÙÙ Ù٠عا٠ا٠٠ÙÙØ¦Ø§Ù Ø¨Ø§ÙØ¥Ø¨Ø¯Ø§Ø¹' : 'Wishing you a creative year'; 819 820 // Ø¥ÙØ´Ø§Ø¡ Ø§ÙØ³ØªØ§Ù٠دÙÙØ§Ù ÙÙÙØ§Ù 821 const style = document.createElement('style'); 822 style.innerHTML = ` 823 .ny-overlay { 824 position: fixed; inset: 0; z-index: 9998; 825 display: flex; align-items: center; justify-content: center; 826 pointer-events: none; /* ÙØ³Ù Ø Ø¨Ø§ÙÙÙØ± Ø®ÙÙÙ */ 827 } 828 .ny-card { 829 background: rgba(255, 255, 255, 0.9); 830 border: 2px solid rgba(126, 34, 206, 0.3); 831 padding: 30px 50px; 832 border-radius: 24px; 833 text-align: center; 834 box-shadow: 0 20px 50px rgba(126, 34, 206, 0.25); 835 backdrop-filter: blur(10px); 836 transform: scale(0.5); 837 opacity: 0; 838 transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); 839 } 840 .dark .ny-card {
841 background: rgba(30, 41, 59, 0.9); 842 border-color: rgba(255, 255, 255, 0.1); 843 } 844 .ny-year { 845 font-size: 60px; font-weight: 900; line-height: 1; 846 background: linear-gradient(135deg, #7e22ce, #FFD700); 847 -webkit-background-clip: text; 848 -webkit-text-fill-color: transparent; 849 margin-bottom: 5px; 850 display: block; 851 } 852 .ny-title { 853 font-size: 22px; font-weight: 800; color: #1f2937; margin-bottom: 5px; 854 } 855 .dark .ny-title { color: #ffffff; } 856 .ny-sub { 857 font-size: 14px; color: #6b7280; 858 } 859 .dark .ny-sub { color: #9ca3af; } 860 861 /* Animation Class */ 862 .ny-card.active { transform: scale(1); opacity: 1; } 863 .ny-card.leave { transform: scale(1.1); opacity: 0; transition: all 0.4s ease; } 864 `; 865 document.head.appendChild(style); 866 867 // Ø¥ÙØ´Ø§Ø¡ Ø§ÙØ¹Ùاصر 868 const overlay = document.createElement('div'); 869 overlay.className = 'ny-overlay'; 870 871 const card = document.createElement('div'); 872 card.className = 'ny-card'; 873 card.innerHTML = ` 874 <span class="ny-year">2026</span> 875 <div class="ny-title">${titleText}</div> 876 <div class="ny-sub">${subText}</div> 877 `; 878 879 overlay.appendChild(card); 880 document.body.appendChild(overlay); 881 882 // تشغÙÙ Ø§ÙØ£ÙÙÙ ÙØ´Ù 883 // 1. Ø§ÙØ¸ÙÙØ± 884 setTimeout(() => card.classList.add('active'), 100); 885 886 // 2. Ø§ÙØ§Ø®ØªÙاء ÙØ§ÙØØ°Ù (بعد 4 Ø«ÙØ§ÙÙ) 887 setTimeout(() => { 888 card.classList.remove('active'); 889 card.classList.add('leave'); 890 setTimeout(() => { 891 overlay.remove(); 892 style.remove(); 893 }, 500); 894 }, 4000); 895 } 896 897 // تشغÙ٠اÙÙÙØ¯ 898 celebrate2026(); 899 }); 900 </script>
900 901</body> 902 903</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.