PageSourceSearch

https://www.adawatai.dev/library.html

html adawatai.dev collected 2026-10-04 14:06:40 UTC 44,053 bytes, 903 lines download raw bytes

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.