<!DOCTYPE html>
<html lang="en">
<head>

    <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "TechOrganization",
          "name": "Mphagi Technologies",
          "url": "https://mphagitechnologies.com",
          "logo": "https://mphagitechnologies.com/mphagi-technologies-high-resolution-logo.png",
          "description": "Mphagi Technologies offers innovative web development, software solutions, IT support, and creative design services. Founded in 2024 by Lufuno Mphagi, we specialize in enhancing digital presence with cutting-edge technology and expertise.",
          "foundingDate": "2024",
          "founder": {
            "@type": "Person",
            "name": "Lufuno Mphagi"
          },
          "contactPoint": [
            {
              "@type": "ContactPoint",
              "telephone": "+27-72-409-0369",
              "contactType": "Customer Support",
              "areaServed": "ZA",
              "availableLanguage": ["English"]
            }
          ],
          "address": {
            "@type": "PostalAddress",
            "addressLocality": "Pretoria",
            "addressRegion": "Gauteng",
            "postalCode": "0002",
            "addressCountry": "ZA"
          },
          "sameAs": [
            "mailto:info@mphagitechnologies.com",
            "https://www.linkedin.com/in/lufunomphagi/",
            "https://github.com/LufunoMphagi/",
          ]
        }
        </script>

        

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mphagi Technologies</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9321727044688828"
     crossorigin="anonymous"></script>
    <meta name="description" content="Mphagi Technologies offers innovative web development, software solutions, IT support, and creative design services. Founded in 2024 by Lufuno Mphagi, we specialize in enhancing digital presence with cutting-edge technology and expertise.">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css?family=Schoolbell&v1" rel="stylesheet">

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9321727044688828"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="icon" type="image/x-icon" href="mphagi-technologies-high-resolution-logo.png">
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            background-color: #000000;
        }
        .name{
            font-size: 24px;
    font-weight: bold;
    color: #00aaff;
    text-decoration: none;

        }

        .hero {
            height: 100vh;
            background: url("image.png") no-repeat center center/cover;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
        }
        .navbar-nav .nav-item .nav-link {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: black; /* Set your text color */
    padding: 0 5px;
}

.navbar-nav .nav-item .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: blue;
    transition: width 0.3s, left 0.3s;
    transform: translateX(-50%);
}

.navbar-nav .nav-item .nav-link:hover::after {
    width: 100%;
  
}

        

        .hero::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            z-index: 1;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            color: #fff;
            animation: fadeIn 2s ease-in-out;
        }

        @keyframes fadeIn {
            0% { opacity: 0; transform: translateY(20px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .social-icons a {
            color: white;
            font-size: 1.5rem;
            margin: 0 10px;
            transition: transform 0.3s, color 0.3s;
        }

        .social-icons a:hover {
            color: #0d6efd;
            transform: scale(1.2);
        }

        .navbar {
            background-color: #000;
        }

        .navbar-brand, .nav-link {
            color: #fff !important;
        }

        .about-section {
            color: #fff;
            padding: 50px 20px;
        }

        .about-section .read-more {
            color: #fff;
            border: 2px dashed #0d6efd;
            padding: 5px 10px;
            cursor: pointer;
            background: none;
            transition: all 0.3s;
        }

        .aboutInfo{
            background-color: #222;
            border-radius: 10px;
        }

        .aboutInfo p{
            color: rgb(216, 208, 208);
        }

        .aboutInfo h2{
            text-align: center; /* Center the text horizontally */
    text-decoration: underline; /* Add an underline */
    margin-top: 20px; /* Optional: Adjust the top margin */
        }

        .about-section .read-more:hover {
            background-color: #0d6efd;
            color: #fff;
            border-color: transparent;
        }

        .about-section .full-text {
            display: none;
            margin-top: 20px;
        }

        /* Bar animation */
        .progress-bar {
            animation: growBar 2s ease-out forwards;
        }

        @keyframes growBar {
            from {
                width: 0;
            }
            to {
                width: 100%;
            }
        }
        

        /* Hover effects */
        .stat-card:hover {
            background-color: #333;
            color: white;
            transform: scale(1.05);
            transition: 0.3s ease-in-out;
        }

        .progress {
            height: 25px;
        }

        /* Counter animation */
        .counter {
            font-size: 1.5rem;
            font-weight: bold;
            animation: countUp 2s ease-in-out forwards;
        }

        @keyframes countUp {
            from {
                content: "0";
            }
            to {
                content: attr(data-target);
            }
        }

        .services-section {
           
            color: #fff;
            padding: 50px 20px;
        }

        .services-section h2 {
            text-align: center;
            margin-bottom: 40px;
        }

        .service-box {
            background-color: #333;
            padding: 20px;
            text-align: center;
            border-radius: 10px;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .service-box:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
        }

        .service-box i {
            font-size: 2.5rem;
            margin-bottom: 15px;
            color: #0d6efd;
        }

        .contact-section {
            padding: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .contact-card {
            
            border-radius: 10px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            display: flex;
            width: 100%;
            max-width: 900px;
        }

        /* General Styling for the Section */
.contact-section {
    padding: 50px 20px;
   
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Form Section */
.contact-form {
    background-color: #2a2a2a;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    flex: 1;
}

.contact-form h3 {
    font-size: 24px;
    margin-bottom: 20px;
    color: white;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 8px #2f6fcf;
}

.contact-form button {
    width: 100%;
    background-color: #0d6efd;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.contact-form button:hover {
    background-color: #1156bd;
    transform: scale(1.05);
}

/* Contact Section Styling */
.contact-container {
    display: flex;
    flex-wrap: wrap; /* Ensure it stacks vertically on smaller screens */
    gap: 20px; /* Adds space between boxes */
}

.contact-form, .contact-info {
    flex: 1; /* Both sections take equal width */
    min-width: 300px; /* Prevent shrinking below 300px on small screens */
    padding: 30px;
    box-sizing: border-box;
}

/* Form Section */
.contact-form {
    background-color: #222;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}



.contact-form p {
    color: rgb(100, 100, 100);
    margin-bottom: 20px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 8px #2f6fcf;
}

.contact-form button {
    width: 100%;
    background-color: #0d6efd;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.contact-form button:hover {
    background-color: #1156bd;
    transform: scale(1.05);
}

/* Info Section */
.contact-info {
    background: url("lantern-6826697_1280.jpg") no-repeat center center/cover;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-info h4 {
    font-size: 20px;
    margin-bottom: 20px;
}

.contact-info .info-item {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.contact-info .info-item i {
    font-size: 18px;
    margin-right: 10px;
    color: #0d6efd;
}

/* Hover effects */
.contact-info .info-item:hover {
    transform: translateX(10px);
    transition: transform 0.3s ease;
}

/* Social Media Links Styling */
.social-links a {
    color: #f7b731;
    transition: transform 0.3s ease, color 0.3s ease;
    text-decoration: none;
}

.social-links a:hover {
    transform: scale(1.2);
    color: #d6a023;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .contact-container {
        flex-direction: column; /* Stack vertically on smaller screens */
    }

    .contact-form, .contact-info {
        flex: none; /* Remove equal width on small screens */
        width: 100%; /* Make each take full width */
    }
}





        footer {
            text-align: center;
            padding: 20px;
            background-color: #222;
            color: #fff;
        }
        .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='gray' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


    </style>
</head>
<body>

<!-- Navbar -->
<nav class="navbar navbar-expand-lg fixed-top bg">
    <div class="container">
        <a class="name" href="#">MPHAGI TECHNOLOGIES</a>
        <button class="navbar-toggler " type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon "></span>
        </button>
        <div class="collapse navbar-collapse " id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0)" onclick="scrollToSection('home')">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0)" onclick="scrollToSection('about')">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0)" onclick="scrollToSection('services')">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0)" onclick="scrollToSection('contact')">Contact</a>
                </li>
            </ul>
            
        </div>
    </div>
</nav>




<script>
    // Function to scroll to specific section by ID
    function scrollToSection(sectionId) {
        const section = document.getElementById(sectionId);
        if (section) {
            section.scrollIntoView({ behavior: 'smooth' });
        }
    }
</script>

<!-- Hero Section -->
<section id="home" class="hero">
    <div class="hero-content">
        <h1>Lufuno Mphagi</h1>
        <p>Back and Front End Developer</p>
        <div class="social-icons mt-3">
            <a href="https://github.com/LufunoMphagi/" target="_blank"><i class="fab fa-github"></i></a>
            <a href="https://www.linkedin.com/in/lufunomphagi/" target="_blank"><i class="fab fa-linkedin"></i></a>
            <a href="mailto:info@mphagitechnologies.com" target="_blank"><i class="fas fa-envelope"></i></a>
        </div>
    </div>
</section>

<!-- About Section -->
<section id="about" class="about-section">
    <div class="container">
        <div class="row">
            <div class="col-md-6 text-center">
                <img src="mphagi-technologies-high-resolution-logo.png" alt="Mphagi Technologies Logo" class="img-fluid">
            </div>
            <div class="col-md-6 aboutInfo">
                <h2>About Us</h2>
                <br>
                <p>At Mphagi Technologies, we are at the forefront of innovation, specializing in both front-end and back-end network development. Our company was founded in 2024 by visionary Lufuno Mphagi, who is currently studying for a bachelor's degree in computer science. Our company is dedicated to providing cutting-edge solutions that enhance your digital presence...<span class="full-text"><br><br>Our origins may be traced back to our passion for technology, and we have since grown to provide a wide range of development and technological services.Mphagi Technologies is the best option for individuals who want a user-friendly interface, extensive backend capabilities, or a combination of the two.

                    In addition to development, we provide IT technical services to ensure that your systems operate at peak performance. Our expert staff is dedicated to providing quality on every project we tackle. As we develop, our dedication to innovation, quality, and client satisfaction remains unchanged. Join us on this exciting technology journey and let us make your ideas a reality.
                    
                    Thank you for choosing Mphagi Technologies - where innovation meets expertise...</span></p>
                <button class="read-more">Read more</button>
                <a href="#contact" class="btn btn-primary ms-3">Contact Us</a>
            </div>
        </div>
    </div>
</section>

<section class="container py-5 skills">
    <div class="row mb-4">
        <div class="col text-center text-light">
            <h2 class="mb-3">Our Skills</h2>
            <p>We take pride in our diverse skill set, honed to deliver exceptional results and drive innovation in every project we undertake.</p>
        </div>
    </div>
    <div class="row">
        <!-- Skill Bars -->
        <div class="col-md-6">
            <div class="mb-3 text-light">
                <h6>Problem-Solving</h6>
                <div class="progress">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 0%;" data-target="100">100%</div>
                </div>
            </div>
            <div class="mb-3 text-light">
                <h6>Team Collaboration</h6>
                <div class="progress">
                    <div class="progress-bar bg-info" role="progressbar" style="width: 0%;" data-target="100">100%</div>
                </div>
            </div>
            <div class="mb-3 text-light">
                <h6>Project Management</h6>
                <div class="progress">
                    <div class="progress-bar bg-warning" role="progressbar" style="width: 0%;" data-target="100">100%</div>
                </div>
            </div>
        </div>

        <!-- Stats -->
        <div class="col-md-6">
            <div class="row">
                <div class="col-6 mb-3">
                    <div class="p-3 stat-card  text-light text-center rounded" style="background-color: #222;">
                        <div class="counter" data-target="3">0</div>
                        <p>Years Of Experience</p>
                    </div>
                </div>
                <div class="col-6 mb-3">
                    <div class="p-3 stat-card  text-light  text-center rounded" style="background-color: #222;">
                        <div class="counter" data-target="15">0</div>
                        <p>Projects Done</p>
                    </div>
                </div>
                <div class="col-6 mb-3">
                    <div class="p-3 stat-card  text-light  text-center rounded" style="background-color: #222;">
                        <div class="counter" data-target="100">0</div>
                        <p>Satisfied Clients(%)</p>
                    </div>
                </div>
                <div class="col-6 mb-3">
                    <div class="p-3 stat-card  text-light  text-center rounded" style="background-color: #222;">
                        <div class="counter" data-target="2024">0</div>
                        <p>Year Established</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    // Counter Animation
    const counters = document.querySelectorAll('.counter');
    counters.forEach(counter => {
        counter.innerText = '0';
        const updateCounter = () => {
            const target = +counter.getAttribute('data-target');
            const count = +counter.innerText;

            const increment = target / 100; // Adjust speed here

            if (count < target) {
                counter.innerText = Math.ceil(count + increment);
                setTimeout(updateCounter, 20);
            } else {
                counter.innerText = target ;
            }


           
        };

        updateCounter();
    });

    // Animate Progress Bars
    const progressBars = document.querySelectorAll('.progress-bar');
    window.addEventListener('load', () => {
        progressBars.forEach(bar => {
            const targetWidth = bar.getAttribute('data-target');
            bar.style.width = targetWidth + '%';
        });
    });
</script>


<!-- Services Section -->
<section id="services" class="services-section">
    <div class="container">
        <h2>Explore Our Range of Services</h2>
        <div class="row mt-4">
            <div class="col-md-4 mb-4">
                <div class="service-box">
                    <i class="fas fa-globe"></i>
                    <h4>Web Development</h4>
                    <p>We build responsive and user-friendly websites tailored to your business needs, ensuring optimal performance and design.</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="service-box">
                    <i class="fas fa-code"></i>
                    <h4>Software Development</h4>
                    <p>Custom software solutions to streamline your operations and enhance productivity, using the latest technologies.</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="service-box">
                    <i class="fas fa-chart-line"></i>
                    <h4>Data Analysis</h4>
                    <p>Transform raw data into actionable insights with our advanced data analytics services for smarter decision-making.</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="service-box">
                    <i class="fas fa-database"></i>
                    <h4>Database Administration</h4>
                    <p>Efficient management, optimization, and maintenance of your databases to ensure data integrity and security.</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="service-box">
                    <i class="fas fa-paint-brush"></i>
                    <h4>Creative design</h4>
                    <p>Innovative graphic design and branding services to help your business stand out in the digital landscape.</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="service-box">
                    <i class="fas fa-tools"></i>
                    <h4>IT Support</h4>
                    <p>Comprehensive IT support services to keep your systems running smoothly and minimize downtime.</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="service-box">
                    <i class="fas fa-network-wired"></i>
                    <h4>IT Technincal Services</h4>
                    <p>Expert technical solutions for hardware, network, and system management to ensure seamless operations.</p>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="contact-section" id="contact">
    <div class="contact-container">
        <!-- Form Section -->
        <div class="contact-form " id="contactForm">
            <h3>Contact Us</h3>
            <p>Feel free to contact us anytime. We will get back to you as soon as we can!</p>
            <form action="#" method="post">
                <label for="name">Name</label>
                <input type="text" class="form-control w-95" rows="2" id="name" name="name" placeholder="Your Name"  required>
                <label for="email">Email</label>
                <input type="email" class="form-control w-95" rows="2"  id="email" name="email" placeholder="Your Email" required>
                <label for="message">Message</label>
                <textarea id="message" class="form-control w-95" name="message" placeholder="Your Message" rows="2" required></textarea>
                <button type="submit" class="btn btn-primary" id="submitBtn">Send Message</button>
            </form>
            <p id="responseMessage" class="mt-3"></p>
        </div>

        <!-- Include EmailJS -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
<script type="text/javascript">
// Initialize EmailJS with your public key
(function () {
emailjs.init("PaeRTidagDhegZwjb");
})();

// Handle the form submission
document.getElementById('contactForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the form from submitting normally

// Disable the submit button to prevent multiple clicks
const submitBtn = document.getElementById("submitBtn");
submitBtn.disabled = true;
submitBtn.innerText = "Sending..."; // Optional: Change button text to indicate sending

// Capture the form data
var params = {
    name: document.getElementById("name").value,
    email: document.getElementById("email").value,
    message: document.getElementById("message").value,
};

const serviceID = "service_vr8q0ou"; // Replace with your EmailJS service ID
const templateID = "template_ozfuwcu"; // Replace with your EmailJS template ID

// Send email via EmailJS
emailjs.send(serviceID, templateID, params)
    .then(function(res) {
        // Clear the form fields
        document.getElementById("name").value = "";
        document.getElementById("email").value = "";
        document.getElementById("message").value = "";

        // Show success message
        document.getElementById("responseMessage").innerText = "Your message was sent successfully!";
        document.getElementById("responseMessage").className = "text-success";
        console.log(res);

        // Re-enable the button
        submitBtn.disabled = false;
        submitBtn.innerText = "Send Message"; // Restore original button text
    })
    .catch(function(err) {
        // Handle error
        document.getElementById("responseMessage").innerText = "Sorry, there was an error sending your message.";
        document.getElementById("responseMessage").className = "text-danger";
        console.log(err);

        // Re-enable the button
        submitBtn.disabled = false;
        submitBtn.innerText = "Send Message"; // Restore original button text
    });
});
</script>

        <!-- Info Section -->
        <div class="contact-info">
            <h4>Info</h4>
            <div class="info-item">
                <i class="bi bi-envelope-fill"></i>
                <span>info@mphagitechnologies.com</span>
            </div>
            <div class="info-item">
                <i class="bi bi-telephone-fill"></i>
                <span>+27 72 409 0369</span>
            </div>
            <div class="info-item">
                <i class="bi bi-geo-alt-fill"></i>
                <span>Pretoria, Gauteng</span>
            </div>
            <div class="info-item">
                <i class="bi bi-clock-fill"></i>
                <span>08:00 - 17:00</span>
            </div>
            <div class="social-links mt-4">
                <a href="https://github.com/LufunoMphagi/" target="_blank" class="text-white mx-3" title="github">
                    <i class="fab fa-github fa-lg"></i>
                </a>
                <a href="https://www.linkedin.com/in/lufunomphagi/" target="_blank" class="text-white mx-3" title="LinkedIn">
                    <i class="fab fa-linkedin fa-lg"></i>
                </a>
                <a href="mailto:info@mphagitechnologies.com" class="text-white mx-3" title="Email">
                    <i class="fas fa-envelope fa-lg"></i>
                </a>
            </div>
        </div>
    </div>
</section>



<!-- Footer -->
<footer>
    &copy; 2024 - <span id="currentYear"></span> Mphagi Technologies
</footer>

<script>
    document.getElementById('currentYear').textContent = new Date().getFullYear();
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // Smooth scrolling for navigation
    document.querySelectorAll('.nav-link').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href').slice(1);
            const targetSection = document.getElementById(targetId);
            if (targetSection) {
                window.scrollTo({
                    top: targetSection.offsetTop - 70,
                    behavior: 'smooth'
                });
            }
        });
    });

    // Read More functionality
    document.querySelector('.read-more').addEventListener('click', function() {
        const fullText = document.querySelector('.full-text');
        if (fullText.style.display === 'none' || fullText.style.display === '') {
            fullText.style.display = 'inline';
            this.textContent = 'Read less';
        } else {
            fullText.style.display = 'none';
            this.textContent = 'Read more';
        }
    });
</script>
<!-- Bootstrap JS and Popper.js -->

<script>
    document.addEventListener('DOMContentLoaded', () => {
    const themeToggleButton = document.getElementById('themeToggle');
    const themeIcon = document.getElementById('themeIcon');

    // Set initial icon based on the current theme
    if (document.body.getAttribute('data-theme') === 'dark') {
        themeIcon.classList.remove('fa-moon');
        themeIcon.classList.add('fa-sun');
    } else {
        themeIcon.classList.remove('fa-sun');
        themeIcon.classList.add('fa-moon');
    }

    // Toggle theme and icon on click
    themeToggleButton.addEventListener('click', () => {
        const currentTheme = document.body.getAttribute('data-theme');

        if (currentTheme === 'dark') {
            document.body.removeAttribute('data-theme'); // Switch to light mode
            themeIcon.classList.remove('fa-sun');
            themeIcon.classList.add('fa-moon');
        } else {
            document.body.setAttribute('data-theme', 'dark'); // Switch to dark mode
            themeIcon.classList.remove('fa-moon');
            themeIcon.classList.add('fa-sun');
        }
    });
});

//cookies for mode:
// Function to set a cookie
function setCookie(name, value, days) {
    const date = new Date();
    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000); // Expiry in days
    const expires = "expires=" + date.toUTCString();
    document.cookie = name + "=" + value + ";" + expires + ";path=/";
}

// Function to get a cookie by name
function getCookie(name) {
    const nameEQ = name + "=";
    const decodedCookie = decodeURIComponent(document.cookie);
    const cookies = decodedCookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
        let cookie = cookies[i];
        while (cookie.charAt(0) === ' ') {
            cookie = cookie.substring(1);
        }
        if (cookie.indexOf(nameEQ) === 0) {
            return cookie.substring(nameEQ.length, cookie.length);
        }
    }
    return null;
}

// Apply theme based on user selection
function applyTheme(theme) {
    document.documentElement.setAttribute('data-theme', theme);
    setCookie('theme', theme, 30); // Save theme in cookies for 30 days
}

// Event listener for the toggle button/icon
document.getElementById('themeToggle').addEventListener('click', function () {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    applyTheme(newTheme);
});

// On page load, check for user's theme preference in cookies
window.addEventListener('DOMContentLoaded', function () {
    const savedTheme = getCookie('theme') || 'light'; // Default to 'light' if no cookie
    applyTheme(savedTheme);
});
</script>


</body>
</html>
