Challenges.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=1440" />
    <title>Challenges Teenagers</title>
    <link rel="stylesheet" href="style.css" />
    <style>    
    #popupBox {
        position: fixed;
        top: 50%;
        left: 33.3%;
        transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 30px;
        border-radius: 10px;
        display: none;
        z-index: 999;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        max-width: 200px;
        text-align: center;
    }
    #popupBox-1 {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 30px;
        border-radius: 10px;
        display: none;
        z-index: 999;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        max-width: 200px;
        text-align: center;
    }
    #popupBox-2 {
        position: fixed;
        top: 50%;
        left: 66.6%;
        transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 30px;
        border-radius: 10px;
        display: none;
        z-index: 999;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        max-width: 200px;
        text-align: center;
    }
    </style>
</head>
<body>
    <div id="header" class="fixed-top">
        <a href="Main.html"><img id="logo" src="anos_prev_ui.png"></a>
        <a href="Main.html"><t id="head">Eco-Switch</t></a>
    <div class="container">
        <a href="main.html"><button id="webitem">About us</button></a> <span style="color: white; font-weight: bold;">|</span>
        <a href="newcalc.html"><button id="webitem">Calculator</button></a> <span style="color: white; font-weight: bold;">|</span>
        <button id="webitem" onclick="navigateToChallenges()">Challenges</button> <span style="color: white; font-weight: bold;">|</span>
        <a href="marketplace.html"><button id="webitem">Market place</button></a>
    </div>
    <div id="authButtons" style="position: absolute; right: 100px;">
        <a href="Login.html"><button id="webitem">Login</button></a> <span style="color: white; font-weight: bold;">|</span>
        <a href="Register.html"><button id="webitem">Register</button></a>
    </div>
    <div id="userProfile" style="display: none; position: absolute; left: 1130px; align-items: center; justify-content: center;">
        <span id="userName" style="color: white; font-weight: bold; margin-right: 10px;"></span>
        <img id="userIcon" src="icon.jpeg" style="width: 50px; height: 50px; cursor: pointer; border-radius: 40px;" >
        <button id="logoutBtn" style="display: none; position: absolute; top: 40px;">Logout</button>
    </div>
    </div>

<main>
    <section class="hero-section" id="hero-section">
    <h1 class="title">Teenagers Challenges</h1>
    </section>

    <section class="cards" id="cards">
        <div class="card" id="card">
            <div class="card-img" id="card-img">
                <img src="challenge1.jpg" alt="image">
            </div>
            <div class="text">Pick-up To Change!</div>
            <div class="card-points">200 points</div>
        </div>
        
        <div class="card" id="card-1">
            <div class="card-img" id="card-img">
                <img src="challenge2.jpg" alt="image">
            </div>
            <div class="text">Be an Influencer!</div>
            <div class="card-points">150 points</div>
        </div>
        
        
    
    <div class="card" id="card-2">
        <div class="card-img" id="card-img">
            <img src="challenge3.jpg" alt="image">
        </div>
        <div class="text">A Clean Week!</div>
        <div class="card-points">500 points</div>
    </div>
    
    
    </section>
</main>
<div id="popupBox">Organize a local <span>trash pick-up event</span> in your neighborhood
    <button onclick="window.location.href='https://docs.google.com/forms/d/1lMBe-ULjNU9R6-Lp_WkhITAm4Yhh8s6db-FGHmkkYJ4/edit'">upload a photo</button>
</div>
<div id="popupBox-1">Write a blog or make a short video on how to reduce plastic use
    <button onclick="window.location.href='https://docs.google.com/forms/d/1lMBe-ULjNU9R6-Lp_WkhITAm4Yhh8s6db-FGHmkkYJ4/edit'">upload a photo</button>
</div>
<div id="popupBox-2"> Trying to go a week without using disposable plastic
    <button onclick="window.location.href='https://docs.google.com/forms/d/1lMBe-ULjNU9R6-Lp_WkhITAm4Yhh8s6db-FGHmkkYJ4/edit'">upload a photo</button>
</div>


<script>
 
  const hoverBox = document.getElementById("card");
  const popupBox = document.getElementById("popupBox");

  hoverBox.addEventListener("mouseenter", () => {
    popupBox.style.display = "block";
  });
  popupBox.addEventListener("mouseenter", () => {
    popupBox.style.display = "block";
  });

  hoverBox.addEventListener("mouseleave", () => {
    popupBox.style.display = "none";
  });
  const hoverBox1 = document.getElementById("card-1");
  const popupBox1 = document.getElementById("popupBox-1");

 
   hoverBox1.addEventListener("mouseenter", () => {
    popupBox1.style.display = "block";
  });
  popupBox1.addEventListener("mouseenter", () => {
    popupBox1.style.display = "block";
  });
  hoverBox1.addEventListener("mouseleave", () => {
    popupBox1.style.display = "none";
  });
  const hoverBox2 = document.getElementById("card-2");
  const popupBox2 = document.getElementById("popupBox-2");

  hoverBox2.addEventListener("mouseenter", () => {
    popupBox2.style.display = "block";
  });
  popupBox2.addEventListener("mouseenter", () => {
    popupBox2.style.display = "block";
  });

  hoverBox2.addEventListener("mouseleave", () => {
    popupBox2.style.display = "none";
  });

// Check login status on page load
document.addEventListener('DOMContentLoaded', function() {
    const user = JSON.parse(localStorage.getItem('user'));
    const authButtons = document.getElementById('authButtons');
    const userProfile = document.getElementById('userProfile');
    const userName = document.getElementById('userName');
    const logoutBtn = document.getElementById('logoutBtn');

    if (user) {
        // Show user profile
        authButtons.style.display = 'none';
        userProfile.style.display = 'flex';
        userName.textContent = `${user.first_name} ${user.second_name}`;
        
        // Show logout button on hover
        userProfile.addEventListener('mouseenter', () => {
            logoutBtn.style.display = 'block';
        });
        
        userProfile.addEventListener('mouseleave', () => {
            logoutBtn.style.display = 'none';
        });

        // Logout functionality
        logoutBtn.addEventListener('click', () => {
            localStorage.clear();
            window.location.href = 'Login.html';
        });
    }
});
</script>
<script>
    function navigateToChallenges() {
        const user = JSON.parse(localStorage.getItem('user'));
        if (!user) {
            window.location.href = 'Challenges.html';
            return;
        }
    
        const age = user.age;
        if (age <= 12) {
            window.location.href = 'challenges-childern.html';
        } else if (age <= 19) {
            window.location.href = 'Challenges.html';
        } else {
            window.location.href = 'challenge-adults.html';
        }
    }
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const user = JSON.parse(localStorage.getItem('user'));
            if (!user) return;
        
            const age = user.age;
            const currentPage = window.location.pathname.split('/').pop();
        
            // Define allowed pages for each age group
            const allowedPages = {
                'child': 'challenges-childern.html',
                'teen': 'Challenges.html',
                'adult': 'challenge-adults.html'
            };
        
            // Determine correct page
            let correctPage;
            if (age <= 12) correctPage = allowedPages.child;
            else if (age <= 19) correctPage = allowedPages.teen;
            else correctPage = allowedPages.adult;
        
            // Redirect if not on correct page
            if (currentPage !== correctPage) {
                window.location.href = correctPage;
            }
        });
        </script>

</body>
</html>