PageSourceSearch

https://freddydeveloper.com/blog.html

html freddydeveloper.com collected 2026-09-24 14:13:20 UTC 24,063 bytes, 530 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="canonical" href="blog.php" />
7    <link rel="shortcut icon" href="img/favicon.png">
8    <title>©FreddyDeveloper | Blog</title>
9    <link rel="stylesheet" href="css/site.css" media="screen and (min-width: 768px)">
10    
10<script src="https://cdn.tailwindcss.com"></script>
10
11    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
12<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap">
13        <link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@400;700&display=swap" rel="stylesheet">
14        <link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
15        <link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
16        <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
17        <link href="https://fonts.googleapis.com/css2?family=Quantico&display=swap" rel="stylesheet">
18        <link href="https://fonts.googleapis.com/css2?family=Teko:wght@400;500;600;700&display=swap" rel="stylesheet">
19        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
20        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
21        <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap" rel="stylesheet">
22    
22<script>
23        tailwind.config = {
24            darkMode: 'class',
25            theme: {
26                extend: {
27                    colors: {
28                        primary: {"50":"#eff6ff","100":"#dbeafe","200":"#bfdbfe","300":"#93c5fd","400":"#60a5fa","500":"#3b82f6","600":"#2563eb","700":"#1d4ed8","800":"#1e40af","900":"#1e3a8a","950":"#172554"}
29                    }
30                },
31                fontFamily: {
32                    'body': [
33                        'Inter', 
34                        'ui-sans-serif', 
35                        'system-ui', 
36                        '-apple-system', 
37                        'system-ui', 
38                        'Segoe UI', 
39                        'Roboto', 
40                        'Helvetica Neue', 
41                        'Arial', 
42                        'Noto Sans', 
43                        'sans-serif', 
44                        'Apple Color Emoji', 
45                        'Segoe UI Emoji', 
46                        'Segoe UI Symbol', 
47                        'Noto Color Emoji'
48                    ],
49                    'sans': [
50                        'Inter', 
51                        'ui-sans-serif', 
52                        'system-ui', 
53                        '-apple-system', 
54                        'system-ui', 
55                        'Segoe UI', 
56                        'Roboto', 
57                        'Helvetica Neue', 
58                        'Arial', 
59                        'Noto Sans', 
60                        'sans-serif', 
61                        'Apple Color Emoji', 
62                        'Segoe UI Emoji', 
63                        'Segoe UI Symbol', 
64                        'Noto Color Emoji'
65                    ]
66                }
67            }
68        }
69    </script>
69
70    <style>
71        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
72        
73		.category-banner {
74            transition: all 0.3s ease;
75            overflow: hidden;
76        }
77        
78        .category-banner:hover {
79            transform: translateY(-10px);
80            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
81        }
82        
83        .category-content {
84            padding: 1.5rem;
85        }
86        
87        /* Dark mode toggle switch styles */
88        .switch {
89            position: relative;
90            display: inline-block;
91            width: 60px;
92            height: 34px;
93        }
94
95        .switch input {
96            opacity: 0;
97            width: 0;
98            height: 0;
99        }
100
101        .slider {
102            position: absolute;
103            cursor: pointer;
104            top: 0;
105            left: 0;
106            right: 0;
107            bottom: 0;
108            background-color: #ccc;
109            transition: .4s;
110            border-radius: 34px;
111        }
112
113        .slider:before {
114            position: absolute;
115            content: "";
116            height: 26px;
117            width: 26px;
118            left: 4px;
119            bottom: 4px;
120            background-color: white;
121            transition: .4s;
122            border-radius: 50%;
123        }
124
125        input:checked + .slider {
126            background-color: #2196F3;
127        }
128
129        input:checked + .slider:before {
130            transform: translateX(26px);
131        }
132		
133        .category-card {
134            transition: all 0.3s ease;
135            overflow: hidden;
136            position: relative;
137        }
138        
139        .category-card:hover {
140            transform: translateY(-10px);
141            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
142        }
143        
144        .category-icon {
145            font-size: 3rem;
146            transition: all 0.3s ease;
147        }
148        
149        .category-card:hover .category-icon {
150            transform: scale(1.2);
151        }
152        
153        .category-content {
154            transition: all 0.3s ease;
155        }
156        
157        .category-card:hover .category-content {
158            transform: translateY(-5px);
159        }
160        
161        .category-card::before {
162            content: '';
163            position: absolute;
164            top: 0;
165            left: 0;
166            right: 0;
167            bottom: 0;
168            background: linear-gradient(45deg, rgba(59, 130, 246, 0.5), rgba(147, 51, 234, 0.5));
169            opacity: 0;
170            transition: opacity 0.3s ease;
171        }
172        
173        .category-card:hover::before {
174            opacity: 1;
175        }
176
177    .mobile-menu-button {
178        display: none;
179        flex-direction: column;
180        justify-content: space-around;
181        width: 30px;
182        height: 21px;
183        background: transparent;
184        border: none;
185        cursor: pointer;
186        padding: 0;
187        z-index: 1002;
188    }
189
190    .mobile-menu-button span {
191        width: 30px;
192        height: 3px;
193        background: var(--neon-blue, #0ff);
194        border-radius: 10px;
195        transition: all 0.3s linear;
196        position: relative;
197        transform-origin: 1px;
198    }
199
200    .mobile-menu {
201        display: none;
202        flex-direction: column;
203        background-color: rgba(0, 0, 0, 0.9);
204        position: fixed;
205        top: 0;
206        right: 0;
207        height: 100vh;
208        width: 100%;
209        padding-top: 3.5rem;
210        transition: transform 0.3s ease-in-out;
211        transform: translateX(100%);
212        z-index: 1001;
213    }
214
215    .mobile-menu.active {
216        transform: translateX(0);
217    }
218
219    .mobile-menu a {
220        font-size: 1.5rem;
221        text-align: center;
222        padding: 2rem 0;
223        font-weight: bold;
224        letter-spacing: 0.5rem;
225        color: var(--neon-blue, #0ff);
226        text-decoration: none;
227        transition: color 0.3s linear;
228    }
229
230    .mobile-menu a:hover {
231        color: #fff;
232    }
233
234    @media (max-width: 768px) {
235        .mobile-menu-button {
236            display: flex;
237        }
238
239        .mobile-menu {
240            display: flex;
241        }
242
243        .hidden {
244            display: none;
245        }
246    }
247
248    .mobile-menu-button.active span:first-child {
249        transform: rotate(45deg);
250    }
251
252    .mobile-menu-button.active span:nth-child(2) {
253        opacity: 0;
254    }
255
256    .mobile-menu-button.active span:nth-child(3) {
257        transform: rotate(-45deg);
258    }
259
260    body.menu-open {
261        overflow: hidden;
262    }
263
264    main {
265        position: relative;
266        z-index: 1;
267    }
268
269    nav {
270        position: relative;
271        z-index: 1002;
272    }
273    </style>
274</head>
275<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-300">
276    <nav class="bg-white dark:bg-gray-800 shadow-lg">
277        <div class="max-w-7xl mx-auto px-4">
278            <div class="flex justify-between">
279                <div class="flex space-x-7">
280                    <div>
281                        <a href="index.php" class="flex items-center py-4 px-2">
282                            <img src="img/logo.png" alt="Logo" class="h-8 w-8 mr-2">
283                            <span class="font-semibold text-gray-500 dark:text-gray-300 text-lg">FreddyDeveloper</span>
284                        </a>
285                    </div>
286                </div>
287                <div class="hidden md:flex items-center space-x-1">
288                    <a href="index.php" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-blue-500 transition duration-300">Home</a>
289                    <a href="index.php#about" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-blue-500 transition duration-300">About</a>
290                    <a href="index.php#projects" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-blue-500 transition duration-300">Projects</a>
291                    <a href="index.php#skills" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-blue-500 transition duration-300">Skills</a>
292<a href="services.php" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-blue-500 transition duration-300">Services</a>
293                    <a href="contact.html" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-blue-500 transition duration-300">Contact</a>
294                    <label class="switch">
295                        <input type="checkbox" id="darkModeToggle">
296                        <span class="slider"></span>
297                    </label>
298                </div>
299            <!-- Mobile Navigation Button -->
300            <div class="md:hidden flex items-center">
301                <button class="mobile-menu-button">
302                    <span></span>
303                    <span></span>
304                    <span></span>
305                </button>
306            </div>
307        </div>
308    </div>
309    <!-- Mobile Navigation Menu -->
310    <div class="mobile-menu">
311        <a href="index.php">Home</a>
312        <a href="index.php#about">About</a>
313        <a href="index.php#projects">Projects</a>
314        <a href="index.php#skills">Skills</a>
315        <a href="services.php">Services</a>
316        <a href="contact.html">Contact</a>
317    </div>
318</nav>
319
320    <main class="container mx-auto px-4 py-8" role="main">
321        <h1 id="blog" class="text-4xl font-bold text-center mb-12 text-gray-800 dark:text-white">Blog</h1>
322
323        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
324    <div id="chrome-extensions-card" class="category-card bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6 cursor-pointer">
325        <div class="category-icon text-blue-500 mb-4">
326            <i class="fas fa-puzzle-piece"></i>
327        </div>
328        <div class="category-content">
329            <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Chrome Extensions</h2>
330            <p class="text-gray-600 dark:text-gray-300">Download powerful Chrome extensions to enhance your browsing experience.</p>
331        </div>
332    </div>
333
334    <div id="qr-code-generator-card" class="category-card bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6 cursor-pointer">
335        <div class="category-icon text-green-500 mb-4">
336            <i class="fas fa-qrcode"></i>
337        </div>
338        <div class="category-content">
339            <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">QR Code Generator</h2>
340            <p class="text-gray-600 dark:text-gray-300">Create custom QR codes for your business needs.</p>
341        </div>
342    </div>
343
344    <div id="social-media-topics-card" class="category-card bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6 cursor-pointer">
345        <div class="category-icon text-purple-500 mb-4">
346            <i class="fas fa-hashtag"></i>
347        </div>
348        <div class="category-content">
349            <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Social Media Topics</h2>
350            <p class="text-gray-600 dark:text-gray-300">Stay updated with the latest trends and strategies.</p>
351        </div>
352    </div>
353
354    <div id="kindle-books-card" class="category-card bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6 cursor-pointer">
355        <div class="category-icon text-yellow-500 mb-4">
356            <i class="fas fa-book"></i>
357        </div>
358        <div class="category-content">
359            <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Kindle Books</h2>
360            <p class="text-gray-600 dark:text-gray-300">Discover each of my Kindle book releases and dive into thrilling tales of fantasy and horror.</p>
361        </div>
362    </div>
363
364    <div id="security-card" class="category-card bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6 cursor-pointer">
365        <div class="category-icon text-red-500 mb-4">
366            <i class="fas fa-graduation-cap"></i>
367        </div>
368        <div class="category-content">
369            <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Website Security Tips</h2>
370            <p class="text-gray-600 dark:text-gray-300">Understanding DDoS attacks and effective prevention strategies.</p>
371        </div>
372    </div>
373
374    <div id="beta-testers-card" class="category-card bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6 cursor-pointer">
375        <div class="category-icon text-pink-500 mb-4">
376            <i class="fas fa-flask"></i>
377        </div>
378        <div class="category-content">
379            <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Beta Testers Program</h2>
380            <p class="text-gray-600 dark:text-gray-300">Join as a beta tester and help me perfect my new products.</p>
381        </div>
382    </div>
383
384    <div id="web-development-card" class="category-card bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6 cursor-pointer">
385        <div class="category-icon text-indigo-500 mb-4">
386            <i class="fas fa-code"></i>
387        </div>
388        <div class="category-content">
389            <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Digital Solutions</h2>
390            <p class="text-gray-600 dark:text-gray-300">I master modern programming technologies and best engineering practices.</p>
391        </div>
392    </div>
393
394    <div id="apple-card" class="category-card bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6 cursor-pointer">
395        <div class="category-icon text-gray-500 mb-4">
396            <i class="fab fa-apple"></i>
397        </div>
398        <div class="category-content">
399            <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Apple News</h2>
400            <p class="text-gray-600 dark:text-gray-300">Stay updated on Apple’s latest launches, innovations, and trends.</p>
401        </div>
402    </div>
403
404    <div id="android-card" class="category-card bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6 cursor-pointer">
405        <div class="category-icon text-blue-700 mb-4">
406            <i class="fab fa-android" style="color: #3DDC84;"></i>
407        </div>
408        <div class="category-content">
409            <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Android News</h2>
410            <p class="text-gray-600 dark:text-gray-300">Get the latest Android news, device reviews, and app updates.</p>
411                </div>
412            </div>
413        </div>
414    </main>
415
416    <footer class="bg-gray-800 text-white py-8 mt-auto">
417        <div class="container mx-auto px-4">
418            <div class="flex flex-wrap justify-between items-center">
419                <div class="w-full md:w-1/3 text-center md:text-left mb-6 md:mb-0">
420                    <h3 class="text-2xl font-bold">FreddyDeveloper LLC</h3>
421                </div>
422                <div class="w-full md:w-1/3 text-center mb-6 md:mb-0">
423                    <a href="https://wordpress.freddydeveloper.com/" class="hover:text-blue-400 transition duration-300 mx-2" target="_blank">Plugins</a>
424                    <a href="https://search.freddydeveloper.com/" class="hover:text-blue-400 transition duration-300 mx-2" target="_blank">Search</a>
425                    <a href="https://freddydeveloper.com/qrcode/" class="hover:text-blue-400 transition duration-300 mx-2" target="_self">QR</a>
426                    <a href="https://hire.freddydeveloper.com/" class="hover:text-blue-400 transition duration-300 mx-2">Hire</a>
427
428                <a href="contact.html" class="hover:text-blue-400 transition duration-300 mx-2">Contact</a>
429            </div>
430            <div class="w-full md:w-1/3 text-center md:text-right">
431                <div class="flex justify-center md:justify-end space-x-4">
432                    <a href="https://github.com/FreddyDeveloper?tab=repositories" class="text-white hover:text-blue-400 transition duration-300" target="_blank" aria-label="GitHub">
433                        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
433<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path></svg>
434                    </a>
435                    <a href="https://www.youtube.com/@freddydeveloper" class="text-white hover:text-blue-400 transition duration-300" target="_blank" aria-label="YouTube">
436                        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path></svg>
437                    </a>
438                    <a href="https://x.com/freddydeveloper" class="text-white hover:text-blue-400 transition duration-300" target="_blank" aria-label="X">
439                        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932L18.901 1.153ZM17.61 20.644h2.039L6.486 3.24H4.298L17.61 20.644Z"></path></svg>
440                    </a>
441                    <a href="https://instagram.com/freddydeveloper" target="_blank" aria-label="Instagram" class="text-white hover:text-blue-400 transition duration-300">
442                            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
443                        </a>
444                        <a href="https://socialnetwork.freddydeveloper.com/" target="_blank" aria-label="Social Network" class="text-white hover:text-blue-400 transition duration-300">
445                            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3 17v-2h6v2h-6zm8-6h-10v-2h10v2zm0-4h-10v-2h10v2z"/></svg>
446                        </a>
447                    </div>
448                </div>
449            </div>
450        </div>
451    </footer>
452
453    <div class="text-center py-4 bg-gray-900 text-white transition-colors duration-300">
454        <p>&copy;<span id="current-year"></span>FreddyDeveloper, All rights reserved.</p>
455    </div>
456
457    
457<script>
458        // Dark mode toggle functionality
459        const darkModeToggle = document.getElementById('darkModeToggle');
460        const html = document.documentElement;
461
462        // Check for saved theme preference or use user's system preference
463        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
464            html.classList.add('dark');
465            darkModeToggle.checked = true;
466        } else {
467            html.classList.remove('dark');
468            darkModeToggle.checked = false;
469        }
470
471        // Toggle dark mode
472        darkModeToggle.addEventListener('change', function() {
473            if (this.checked) {
474                html.classList.add('dark');
475                localStorage.theme = 'dark';
476            } else {
477                html.classList.remove('dark');
478                localStorage.theme = 'light';
479            }
480        });
481    </script>
481
482
483<script>
484document.addEventListener('DOMContentLoaded', function() {
485    const cardLinks = {
486        'chrome-extensions-card': 'https://chromewebstore.google.com/search/freddydeveloper?hl=en-US&utm_source=ext_sidebar',
487        'qr-code-generator-card': 'https://freddydeveloper.com/qrcode/',
488        'social-media-topics-card': 'delete.html',
489        'kindle-books-card': 'https://www.amazon.com/author/freddydeveloper',
490        'security-card': 'https://smartkiller.freddydeveloper.com/',
491        'beta-testers-card': 'https://socialnetwork.freddydeveloper.com/',
492        'web-development-card': 'https://store.freddydeveloper.com/',
493        'apple-card': 'https://ios.freddydeveloper.com/',
494        'android-card': 'https://android.freddydeveloper.com/'
495    };
496
497    for (const [cardId, link] of Object.entries(cardLinks)) {
498        const card = document.getElementById(cardId);
499        if (card) {
500            card.addEventListener('click', function() {
501                window.location.href = link;
502            });
503        }
504    }
505});
506</script>
506
507</body>
508<script>
509document.addEventListener('DOMContentLoaded', function() {
510    const mobileMenuButton = document.querySelector('.mobile-menu-button');
511    const mobileMenu = document.querySelector('.mobile-menu');
512    const body = document.body;
513
514    mobileMenuButton.addEventListener('click', function() {
515        this.classList.toggle('active');
516        mobileMenu.classList.toggle('active');
517        body.classList.toggle('menu-open');
518    });
519
520    const menuLinks = mobileMenu.querySelectorAll('a');
521    menuLinks.forEach(link => {
522        link.addEventListener('click', function() {
523            mobileMenuButton.classList.remove('active');
524            mobileMenu.classList.remove('active');
525            body.classList.remove('menu-open');
526        });
527    });
528});
529</script>
529
530</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.