Select All Text by Clicking on Text Field or Textarea Box | YourSite

Select All Text by Clicking on Text Field or Textarea Box

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/what-is-bounce-rate-in-seo-complete-guide-for-beginners">
                                What is Bounce Rate in SEO? Complete Guide for Beginners                            </a>
                        </li>
                                            <li>
                            <a href="/blog/read/comprehensive-interviewer-guide-detailed-article">
                                Comprehensive Interviewer Guide - Detailed Article                            </a>
                        </li>
                                            <li>
                            <a href="/blog/read/five-industry-shifts-reshaping-the-ai-ecosystem-2026-trends">
                                Five Industry Shifts Reshaping the AI Ecosystem (2026 Trends)                            </a>
                        </li>
                                            <li>
                            <a href="/blog/read/how-to-grow-your-business-mindset-step-by-step">
                                How to Grow Your Business Mindset Step by Step                            </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>(53)</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/search-engine-optimization">
                                        Search Engine Optimization                                    </a>
                                    <span>(25)</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/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/skill">
                                        Skill                                    </a>
                                    <span>(17)</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/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>
                                                                                                <li>
                                <div class="category-row">
                                    <a href="/blog/category/competitive-examination">
                                        Competitive Examination                                     </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/1779606662-996970.jpg"
                                            class="card-img-top blog-img"
                                            style="object-fit:cover;"
                                            alt="What is Bounce Rate in SEO? Complete Guide for Beginners"
                                            loading="lazy">
                                                                    </div>

                                <div class="card-body d-flex flex-column">
                                    <a href="/blog/category/general" class="category-badge mb-2">
                                        search-engine-optimization                                    </a>

                                    <h5 class="blog-title fw-bold">
                                        <a href="/blog/read/what-is-bounce-rate-in-seo-complete-guide-for-beginners">
                                            What is Bounce Rate in SEO? Complete Guide for Beginners                                        </a>
                                    </h5>

                                    <p class="text-muted small">
                                        Learn what bounce rate is in SEO, how it is calculated, why it matters, common causes of high bounce rates, an...
                                    </p>

                                    <div class="mt-auto">
                                        <div class="d-flex justify-content-between text-muted small mb-2">
                                            <span>👁 28</span>
                                            <span>2026-05-24</span>
                                        </div>
                                        <a href="/blog/read/what-is-bounce-rate-in-seo-complete-guide-for-beginners" 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/1779453985-585787.jpg"
                                            class="card-img-top blog-img"
                                            style="object-fit:cover;"
                                            alt="Comprehensive Interviewer Guide - Detailed Article"
                                            loading="lazy">
                                                                    </div>

                                <div class="card-body d-flex flex-column">
                                    <a href="/blog/category/general" class="category-badge mb-2">
                                        skill                                    </a>

                                    <h5 class="blog-title fw-bold">
                                        <a href="/blog/read/comprehensive-interviewer-guide-detailed-article">
                                            Comprehensive Interviewer Guide - Detailed Article                                        </a>
                                    </h5>

                                    <p class="text-muted small">
                                        Learn how to conduct effective interviews with this comprehensive interviewer guide. Explore hiring strategies...
                                    </p>

                                    <div class="mt-auto">
                                        <div class="d-flex justify-content-between text-muted small mb-2">
                                            <span>👁 43</span>
                                            <span>2026-05-22</span>
                                        </div>
                                        <a href="/blog/read/comprehensive-interviewer-guide-detailed-article" 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/1779187751-286239.jpg"
                                            class="card-img-top blog-img"
                                            style="object-fit:cover;"
                                            alt="Five Industry Shifts Reshaping the AI Ecosystem (2026 Trends)"
                                            loading="lazy">
                                                                    </div>

                                <div class="card-body d-flex flex-column">
                                    <a href="/blog/category/general" class="category-badge mb-2">
                                        skill                                    </a>

                                    <h5 class="blog-title fw-bold">
                                        <a href="/blog/read/five-industry-shifts-reshaping-the-ai-ecosystem-2026-trends">
                                            Five Industry Shifts Reshaping the AI Ecosystem (2026 Trends)                                        </a>
                                    </h5>

                                    <p class="text-muted small">
                                        Five Industry Shifts Reshaping the AI Ecosystem (2026 Trends)...
                                    </p>

                                    <div class="mt-auto">
                                        <div class="d-flex justify-content-between text-muted small mb-2">
                                            <span>👁 38</span>
                                            <span>2026-05-19</span>
                                        </div>
                                        <a href="/blog/read/five-industry-shifts-reshaping-the-ai-ecosystem-2026-trends" 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/1778305129-602870.jpg"
                                            class="card-img-top blog-img"
                                            style="object-fit:cover;"
                                            alt="How to Grow Your Business Mindset Step by Step"
                                            loading="lazy">
                                                                    </div>

                                <div class="card-body d-flex flex-column">
                                    <a href="/blog/category/general" class="category-badge mb-2">
                                        skill                                    </a>

                                    <h5 class="blog-title fw-bold">
                                        <a href="/blog/read/how-to-grow-your-business-mindset-step-by-step">
                                            How to Grow Your Business Mindset Step by Step                                        </a>
                                    </h5>

                                    <p class="text-muted small">
                                        Learn how to develop and grow a successful business mindset step by step. Discover entrepreneurial thinking, p...
                                    </p>

                                    <div class="mt-auto">
                                        <div class="d-flex justify-content-between text-muted small mb-2">
                                            <span>👁 56</span>
                                            <span>2026-05-09</span>
                                        </div>
                                        <a href="/blog/read/how-to-grow-your-business-mindset-step-by-step" 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="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>
                <h3>About RummanAnsari</h3>
                <p>Your go-to platform for online courses, GK, blogs, and learning resources.</p>
            </div>

            <div>
                <h3>Quick Links</h3>
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/blog/">Blog</a></li>
                    <li><a href="https://www.rummanansari.com/course?course_type=paid">Topic</a></li>
                    <li><a href="/course">Courses</a></li>
                </ul>
            </div>

            <div>
                <h3>Courses</h3>
                <ul>
                    <li><a href="https://www.rummanansari.com/course?course_type=free">Free Courses</a></li>
                    <li><a href="https://www.rummanansari.com/course?course_type=paid">Paid Courses</a></li>
                </ul>

                <h3 class="mt-4">Connect with Us</h3>
                <div class="social-links">
                    <a href="https://www.facebook.com/merummanansari/" aria-label="Facebook Profile"><i class="fab fa-facebook-f"></i></a>
                    <a href="https://x.com/merummanansari" aria-label="Twitter Profile"><i class="fab fa-twitter"></i></a>
                    <a href="https://www.linkedin.com/in/rummanansari/" aria-label="LinkedIn Profile"><i class="fab fa-linkedin-in"></i></a>
                    <a href="https://www.instagram.com/instra.ansari/" aria-label="Instagram Profile"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
        </div>

        <div class="footer-bottom">
            <p class="mb-0">&copy; 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();

const googleLoginButtons = document.querySelectorAll('.googleLoginBtn');

googleLoginButtons.forEach(function (googleLoginBtn) {
    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 || '',
                    google_uid: user.uid
                })
            });

            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>


<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('.article-content pre code').forEach(function (block) {
        if (window.hljs) {
            hljs.highlightElement(block);
        }
    });
});
</script>

</body>
</html>