This script highlight all text in textarea or text field (input tag) by clicking on it. It allows users to reduce their manual work. For instance when users need to copy to the clipboard all text quickly or quickly delete the text from the field. For example: to copy a piece of code or to delete a username and password on login web page.
Code
The script is really very simple. Text field must have unique identifier, this indentifier will be passed to the SelectAll() function. The function call only two methods: focus() and select().
<script type="text/javascript"> function SelectAll(id) { document.getElementById(id).focus(); document.getElementById(id).select(); } </script> Textarea:<br> <textarea rows="3" id="txtarea" onClick="SelectAll('txtarea');" style="width:200px" >This text you can select all by clicking here </article> </div> <aside class="sidebar"> <div class="sidebar-inner"> <div class="sidebar-card"> <h3>Latest Posts</h3> <ul> <li> <a href="/blog/read/heat-stroke-in-summer-causes-symptoms-prevention-and-what-to-do"> Heat Stroke in Summer: Causes, Symptoms, Prevention and What To Do </a> </li> <li> <a href="/blog/read/alcoholic-fatty-liver-disease-causes-symptoms-risks-and-how-to-improve-it"> Alcoholic Fatty Liver Disease: Causes, Symptoms, Risks and How to Improve It </a> </li> <li> <a href="/blog/read/non-alcoholic-fatty-liver-meaning-causes-symptoms-and-how-to-improve-it"> Non-Alcoholic Fatty Liver: Meaning, Causes, Symptoms, and How to Improve It </a> </li> <li> <a href="/blog/read/the-ultimate-blueprint-to-score-7070-in-isc-class-12-computer-science"> The Ultimate Blueprint to Score 70/70 in ISC Class 12 Computer Science </a> </li> </ul> </div> <div class="sidebar-card"> <h3>Categories</h3> <ul> <li> <div class="category-row"> <a href="/blog/category/islam"> Religion </a> <span>(62)</span> </div> </li> <li> <div class="category-row"> <a href="/blog/category/life-lesson"> Life Lesson </a> <span>(52)</span> </div> </li> <li> <div class="category-row"> <a href="/blog/category/miscellaneous"> Miscellaneous </a> <span>(40)</span> </div> </li> <li> <div class="category-row"> <a href="/blog/category/web-development"> Web Development </a> <span>(31)</span> </div> </li> <li> <div class="category-row"> <a href="/blog/category/whatsappstory"> Whatsapp Story </a> <span>(26)</span> </div> </li> <li> <div class="category-row"> <a href="/blog/category/health"> Health </a> <span>(24)</span> </div> </li> <li> <div class="category-row"> <a href="/blog/category/search-engine-optimization"> Search Engine Optimization </a> <span>(23)</span> </div> </li> <li> <div class="category-row"> <a href="/blog/category/c-programming-language"> Programming Language </a> <span>(23)</span> </div> </li> <li> <div class="category-row"> <a href="/blog/category/Bengali-to-English-Translation"> Bengali to English Translation </a> <span>(18)</span> </div> </li> <li> <div class="category-row"> <a href="/blog/category/sql-server"> Database </a> <span>(16)</span> </div> </li> <li> <div class="category-row"> <a href="/blog/category/tcs-preparation"> TCS Preparation </a> <span>(13)</span> </div> </li> <li> <div class="category-row"> <a href="/blog/category/india-gk-questions"> India GK Questions </a> <span>(13)</span> </div> </li> <li> <div class="category-row"> <a href="/blog/category/skill"> Skill </a> <span>(12)</span> </div> </li> <li> <div class="category-row"> <a href="/blog/category/ms-dot-net"> MS dot NET </a> <span>(11)</span> </div> </li> <li> <div class="category-row"> <a href="/blog/category/Personal-Development"> Personal Development </a> <span>(11)</span> </div> </li> <li> <div class="category-row"> <a href="/blog/category/youth-society"> যুব সমাজ </a> <span>(11)</span> </div> </li> <li> <div class="category-row"> <a href="/blog/category/data-structure"> Data Structure </a> <span>(8)</span> </div> </li> <li> <div class="category-row"> <a href="/blog/category/top-10"> Top 10 </a> <span>(7)</span> </div> </li> <li> <div class="category-row"> <a href="/blog/category/english-quotes"> English Quotes </a> <span>(7)</span> </div> </li> <li> <div class="category-row"> <a href="/blog/category/Bangla-Quotes"> Bangla Quotes </a> <span>(7)</span> </div> </li> <li> <div class="category-row"> <a href="/blog/category/react-js"> ReactJs </a> <span>(6)</span> </div> </li> <li> <div class="category-row"> <a href="/blog/category/bengali-kobita"> Bengali Kobita </a> <span>(4)</span> </div> </li> <li> <div class="category-row"> <a href="/blog/category/biography"> Biography </a> <span>(2)</span> </div> </li> <li> <div class="category-row"> <a href="/blog/category/class-1-12-resources"> Class 1-12 Resources </a> <span>(2)</span> </div> </li> <li> <div class="category-row"> <a href="/blog/category/image-processing"> Image Processing </a> <span>(1)</span> </div> </li> </ul> </div> </div> </aside> </div> <div class="related-section container"> <h3>Related Posts</h3> <div class="related-grid"> <div class="related-card"> <a href="/blog/read/full-stack-developer-angular-django"> <img src="/blog/write-blog/images/blog-image-329763597-ad.png" alt="Full Stack Developer - Angular Django"> <h5>Full Stack Developer - Angular Django</h5> </a> </div> <div class="related-card"> <a href="/blog/read/how-to-redirect-all-users-from-one-website-to-another-using-htaccess"> <img src="/blog/write-blog/images/blog-image-912067019-Capture.JPG" alt="How to redirect all users from one website to another using .htaccess"> <h5>How to redirect all users from one website to another using .htaccess</h5> </a> </div> <div class="related-card"> <a href="/blog/read/installation-and-setup-process-of-sass-and-scss"> <img src="/blog/write-blog/images/blog-image-584131101-Capture.PNG" alt="Installation and setup process of SASS and scss"> <h5>Installation and setup process of SASS and scss</h5> </a> </div> <div class="related-card"> <a href="/blog/read/angularjs-interview-questions-and-answers"> <img src="/blog/write-blog/images/blog-image-179201502-Capture.PNG" alt="AngularJS interview questions and answers"> <h5>AngularJS interview questions and answers</h5> </a> </div> <div class="related-card"> <a href="/blog/read/mean-stack-consultant"> <img src="/blog/write-blog/images/blog-image-349780086-FullStackSoftwareDevelopers.png" alt="MEAN stack consultant"> <h5>MEAN stack consultant</h5> </a> </div> <div class="related-card"> <a href="/blog/read/sanitize-user-inputs"> <img src="/blog/write-blog/images/blog-image-570674348-sanitize.jpg" alt="Sanitize user inputs"> <h5>Sanitize user inputs</h5> </a> </div> <div class="related-card"> <a href="/blog/read/free-php-html-css-javascript-typescript-editor-codelobster-ide"> <img src="/blog/write-blog/images/blog-image-449326882-odelobster-ide.png" alt="Free PHP, HTML, CSS, JavaScript/TypeScript editor - CodeLobster IDE"> <h5>Free PHP, HTML, CSS, JavaScript/TypeScript editor - CodeLobster IDE</h5> </a> </div> <div class="related-card"> <a href="/blog/read/what-is-thee-difference-between-utf8-general-ci-and-utf8mb4-unicode-520-ci-in-mysql-collection"> <img src="/blog/write-blog/images/blog-image-770013832-difference-between-mysql-collection.png" alt="What is thee difference between utf8_general_ci and utf8mb4_unicode_520_ci in mysql collection"> <h5>What is thee difference between utf8_general_ci and utf8mb4_unicode_520_ci in mysql collection</h5> </a> </div> </div> </div> <div class="container py-5"> <div class="mb-5 text-center fade-in"> <h2 class="fw-bold">🚀 More Blogs You Might Like</h2> <p class="text-muted">Explore more articles and keep learning</p> </div> <div class="row"> <div class="col-lg-12"> <div id="blog-container" class="row g-4"> <div class="col-sm-6 col-md-3 fade-in blog-item" style="animation-delay: 0s;"> <div class="card blog-card border-0 rounded-4 h-100"> <div style="overflow:hidden;"> <img src="/blog/write-blog/images/1777205682-189911.jpeg" class="card-img-top blog-img" style="height:220px; object-fit:cover;" alt="Heat Stroke in Summer: Causes, Symptoms, Prevention and What To Do" loading="lazy"> </div> <div class="card-body d-flex flex-column"> <a href="/blog/category/general" class="category-badge mb-2"> health </a> <h5 class="blog-title fw-bold"> <a href="/blog/read/heat-stroke-in-summer-causes-symptoms-prevention-and-what-to-do"> Heat Stroke in Summer: Causes, Symptoms, Prevention and What To Do </a> </h5> <p class="text-muted small"> Heat Stroke in Summer: Causes, Symptoms, Prevention and What To Do... </p> <div class="mt-auto"> <div class="d-flex justify-content-between text-muted small mb-2"> <span>👁 11</span> <span>2026-04-26</span> </div> <a href="/blog/read/heat-stroke-in-summer-causes-symptoms-prevention-and-what-to-do" class="btn btn-sm read-btn w-100"> Read More → </a> </div> </div> </div> </div> <div class="col-sm-6 col-md-3 fade-in blog-item" style="animation-delay: 0.1s;"> <div class="card blog-card border-0 rounded-4 h-100"> <div style="overflow:hidden;"> <img src="/blog/write-blog/images/1777205277-666524.jpeg" class="card-img-top blog-img" style="height:220px; object-fit:cover;" alt="Alcoholic Fatty Liver Disease: Causes, Symptoms, Risks and How to Improve It" loading="lazy"> </div> <div class="card-body d-flex flex-column"> <a href="/blog/category/general" class="category-badge mb-2"> health </a> <h5 class="blog-title fw-bold"> <a href="/blog/read/alcoholic-fatty-liver-disease-causes-symptoms-risks-and-how-to-improve-it"> Alcoholic Fatty Liver Disease: Causes, Symptoms, Risks and How to Improve It </a> </h5> <p class="text-muted small"> Alcoholic Fatty Liver Disease: Causes, Symptoms, Risks and How to Improve It... </p> <div class="mt-auto"> <div class="d-flex justify-content-between text-muted small mb-2"> <span>👁 12</span> <span>2026-04-26</span> </div> <a href="/blog/read/alcoholic-fatty-liver-disease-causes-symptoms-risks-and-how-to-improve-it" class="btn btn-sm read-btn w-100"> Read More → </a> </div> </div> </div> </div> <div class="col-sm-6 col-md-3 fade-in blog-item" style="animation-delay: 0.2s;"> <div class="card blog-card border-0 rounded-4 h-100"> <div style="overflow:hidden;"> <img src="/blog/write-blog/images/1777204917-429777.jpeg" class="card-img-top blog-img" style="height:220px; object-fit:cover;" alt="Non-Alcoholic Fatty Liver: Meaning, Causes, Symptoms, and How to Improve It" loading="lazy"> </div> <div class="card-body d-flex flex-column"> <a href="/blog/category/general" class="category-badge mb-2"> health </a> <h5 class="blog-title fw-bold"> <a href="/blog/read/non-alcoholic-fatty-liver-meaning-causes-symptoms-and-how-to-improve-it"> Non-Alcoholic Fatty Liver: Meaning, Causes, Symptoms, and How to Improve It </a> </h5> <p class="text-muted small"> Non-Alcoholic Fatty Liver: Meaning, Causes, Symptoms, and How to Improve It... </p> <div class="mt-auto"> <div class="d-flex justify-content-between text-muted small mb-2"> <span>👁 12</span> <span>2026-04-26</span> </div> <a href="/blog/read/non-alcoholic-fatty-liver-meaning-causes-symptoms-and-how-to-improve-it" class="btn btn-sm read-btn w-100"> Read More → </a> </div> </div> </div> </div> <div class="col-sm-6 col-md-3 fade-in blog-item" style="animation-delay: 0.3s;"> <div class="card blog-card border-0 rounded-4 h-100"> <div style="overflow:hidden;"> <img src="/blog/write-blog/images/1775904199-505181.png" class="card-img-top blog-img" style="height:220px; object-fit:cover;" alt="The Ultimate Blueprint to Score 70/70 in ISC Class 12 Computer Science" loading="lazy"> </div> <div class="card-body d-flex flex-column"> <a href="/blog/category/general" class="category-badge mb-2"> class-1-12-resources </a> <h5 class="blog-title fw-bold"> <a href="/blog/read/the-ultimate-blueprint-to-score-7070-in-isc-class-12-computer-science"> The Ultimate Blueprint to Score 70/70 in ISC Class 12 Computer Science </a> </h5> <p class="text-muted small"> The Ultimate Blueprint to Score 70/70 in ISC Class 12 Computer Science... </p> <div class="mt-auto"> <div class="d-flex justify-content-between text-muted small mb-2"> <span>👁 47</span> <span>2026-04-11</span> </div> <a href="/blog/read/the-ultimate-blueprint-to-score-7070-in-isc-class-12-computer-science" class="btn btn-sm read-btn w-100"> Read More → </a> </div> </div> </div> </div> </div> <div id="loading" class="text-center my-4" style="display:none;"> <div class="spinner-border"></div> </div> <div id="scroll-sentinel"></div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/php.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/json.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/xml.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/csharp.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/css.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/sql.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/java.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function () { document.querySelectorAll('#blog-article pre code').forEach(function (block) { if (window.hljs) { hljs.highlightElement(block); } }); }); let offset = 4; let hasMore = true; const sentinel = document.getElementById('scroll-sentinel'); const loadingEl = document.getElementById('loading'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting && hasMore) { loadMoreBlogs(); } }); }, { rootMargin: '200px' }); if (sentinel) { observer.observe(sentinel); } function escapeHtml(value) { const div = document.createElement('div'); div.textContent = value ?? ''; return div.innerHTML; } function loadMoreBlogs() { loadingEl.style.display = 'block'; fetch('/blog/loadMore', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `offset=${offset}` }) .then(res => res.json()) .then(data => { const container = document.getElementById('blog-container'); data.blogs.forEach((blog) => { const div = document.createElement('div'); div.className = 'col-sm-6 col-md-3 fade-in blog-item'; const thumbnail = blog.thumbnail ? `/blog/write-blog/${escapeHtml(blog.thumbnail)}` : ''; const title = escapeHtml(blog.blog_title || 'No Title'); const postUrl = escapeHtml(blog.post_url || '#'); const category = escapeHtml(blog.blog_category || 'General'); const categorySlug = escapeHtml((blog.blog_category_parmalink || 'general').toLowerCase()); const description = escapeHtml((blog.description || '').substring(0, 110)); const views = escapeHtml(String(blog.view_by_people || 0)); const blogDate = escapeHtml(blog.blog_date || ''); div.innerHTML = ` <div class="card blog-card border-0 rounded-4 h-100"> <div style="overflow:hidden;"> ${thumbnail ? `<img loading="lazy" src="${thumbnail}" class="card-img-top blog-img" style="height:220px; object-fit:cover;" alt="${title}">` : ''} </div> <div class="card-body d-flex flex-column"> <a href="/blog/category/${categorySlug}" class="category-badge mb-2"> ${category} </a> <h5 class="blog-title fw-bold"> <a href="/blog/read/${postUrl}">${title}</a> </h5> <p class="text-muted small">${description}...</p> <div class="mt-auto"> <div class="d-flex justify-content-between text-muted small mb-2"> <span>👁 ${views}</span> <span>${blogDate}</span> </div> <a href="/blog/read/${postUrl}" class="btn btn-sm read-btn w-100">Read More →</a> </div> </div> </div> `; container.appendChild(div); }); offset += data.blogs.length; hasMore = data.hasMore; loadingEl.style.display = 'none'; if (!hasMore && sentinel) { sentinel.remove(); } }) .catch(err => { console.error(err); loadingEl.style.display = 'none'; }); } </script> <script> function shareArticle(url) { const text = "Check this out 👇\n" + url; // Modern browsers (mobile + desktop) if (navigator.share) { navigator.share({ title: document.title, text: text, url: url }).catch(err => console.log('Share cancelled', err)); } else { // Fallback: Open WhatsApp const whatsappUrl = "https://wa.me/?text=" + encodeURIComponent(text); window.open(whatsappUrl, '_blank'); } } </script> <script> function copyLink(url) { navigator.clipboard.writeText(url).then(() => { alert('Link copied!'); }); } </script> <style> footer.site-footer, footer.site-footer a, footer.site-footer li, footer.site-footer p, footer.site-footer span, footer.site-footer h5, .navbar .dropdown-menu, .navbar .dropdown-menu a, .navbar .dropdown-menu li, .navbar .dropdown-menu p { color: var(--text-color) !important; background-color: var(--header-footer-bg) !important; } footer.site-footer a:hover, .navbar .dropdown-menu a:hover { color: var(--link-hover-color) !important; } footer.site-footer hr { border-color: var(--shadow-color) !important; } footer.site-footer i { color: var(--text-color) !important; } footer.site-footer i:hover { color: var(--link-hover-color) !important; } .site-footer { padding: 48px 24px 24px; margin-top: 40px; border-top: 1px solid var(--border-color); } .site-footer .footer-inner { width: 100%; max-width: 100%; margin: 0; } .site-footer .footer-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .site-footer h5 { font-size: 1.2rem; font-weight: 700; margin-bottom: 16px; } .site-footer p, .site-footer li, .site-footer a { font-size: 0.98rem; line-height: 1.7; text-decoration: none; } .site-footer ul { padding-left: 0; margin-bottom: 0; list-style: none; } .site-footer .social-links a { display: inline-flex; align-items: center; justify-content: center; margin-right: 14px; font-size: 1rem; } .site-footer .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 20px; margin-top: 28px; border-top: 1px solid var(--shadow-color); } .site-footer .footer-bottom-links a { margin-left: 18px; } .site-footer .footer-bottom-links a:first-child { margin-left: 0; } @media (max-width: 991.98px) { .site-footer { padding: 36px 16px 20px; } .site-footer .footer-top { grid-template-columns: 1fr; gap: 24px; } .site-footer .footer-bottom { flex-direction: column; align-items: flex-start; } .site-footer .footer-bottom-links a { margin-left: 0; margin-right: 16px; } } </style> <footer class="site-footer"> <div class="footer-inner"> <div class="footer-top"> <div> <h5>About RummanAnsari</h5> <p>Your go-to platform for online courses, GK, blogs, and learning resources.</p> </div> <div> <h5>Quick Links</h5> <ul> <li><a href="/">Home</a></li> <li><a href="/blog/">Blog</a></li> <li><a href="/subject">Topic</a></li> <li><a href="/course">Courses</a></li> </ul> </div> <div> <h5>Courses</h5> <ul> <li><a href="/course">Free Courses</a></li> <li><a href="/course">Paid Courses</a></li> </ul> <h5 class="mt-4">Connect with Us</h5> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-linkedin-in"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> </div> </div> </div> <div class="footer-bottom"> <p class="mb-0">© 2026 RummanAnsari. All rights reserved.</p> <div class="footer-bottom-links"> <a href="/about/">About</a> <a href="/about/privacy-policy/">Privacy</a> <a href="/about/terms-and-conditions/">Terms</a> </div> </div> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <!--<script src="/assets/js/new-scripts.js"></script>--> <!-- below two for editor--> <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.js"></script> <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> <script> document.addEventListener('DOMContentLoaded', function () { const body = document.body; const toggleBtn = document.getElementById('sidebarToggleBtn'); const closeBtn = document.getElementById('closeSidebarBtn'); const overlay = document.getElementById('sidebarOverlay'); const mobileBreakpoint = 992; function isMobile() { return window.innerWidth < mobileBreakpoint; } function applySidebarState() { const saved = localStorage.getItem('sidebarCollapsed'); if (isMobile()) { body.classList.remove('sidebar-collapsed'); body.classList.remove('sidebar-mobile-open'); } else { body.classList.remove('sidebar-mobile-open'); if (saved === 'true') { body.classList.add('sidebar-collapsed'); } else { body.classList.remove('sidebar-collapsed'); } } } if (toggleBtn) { toggleBtn.addEventListener('click', function () { if (isMobile()) { body.classList.toggle('sidebar-mobile-open'); } else { body.classList.toggle('sidebar-collapsed'); localStorage.setItem( 'sidebarCollapsed', body.classList.contains('sidebar-collapsed') ? 'true' : 'false' ); } }); } if (closeBtn) { closeBtn.addEventListener('click', function () { body.classList.remove('sidebar-mobile-open'); }); } if (overlay) { overlay.addEventListener('click', function () { body.classList.remove('sidebar-mobile-open'); }); } window.addEventListener('resize', applySidebarState); applySidebarState(); }); document.addEventListener('DOMContentLoaded', function () { const body = document.body; const themeButtons = document.querySelectorAll('[data-theme-button]'); }); </script> <script type="module"> import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js"; import { getAuth, GoogleAuthProvider, signInWithPopup } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-auth.js"; const firebaseConfig = { apiKey: "AIzaSyCNteyUk6yYXnx275jqn09fGPtjpnir5pY", authDomain: "rummanansari-01.firebaseapp.com", projectId: "rummanansari-01", storageBucket: "rummanansari-01.firebasestorage.app", messagingSenderId: "958581859518", appId: "1:958581859518:web:ea2b17c10640eb8747eaef" }; const app = initializeApp(firebaseConfig); const auth = getAuth(app); const provider = new GoogleAuthProvider(); document.getElementById('googleLoginBtn').addEventListener('click', async function () { try { const result = await signInWithPopup(auth, provider); const user = result.user; const response = await fetch('/login/google', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: user.email || '', first_name: user.displayName ? user.displayName.split(' ')[0] : '', last_name: user.displayName ? user.displayName.split(' ').slice(1).join(' ') : '', profile_image: user.photoURL || '' }) }); const rawText = await response.text(); console.log('Server response:', rawText); let data; try { data = JSON.parse(rawText); } catch (e) { alert('Server is not returning valid JSON. Check console.'); return; } if (data.status === 'success') { window.location.href = data.redirect || '/dashboard'; } else { alert(data.message || 'Google login failed.'); } } catch (error) { console.error('Google login error:', error); alert(error.message || 'Unable to login with Google.'); } }); </script> </body> </html>