<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>سامانه پیشرفته پیگیری تغذیه و پسماند</title>
    <style>
        @font-face {
            font-family: 'Vazir';
            src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font/dist/Vazir.woff2') format('woff2');
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Vazir', sans-serif;
        }

        .auth-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.5s ease-in-out;
        }

        .auth-container {
            background: rgba(255, 255, 255, 0.95);
            padding: 2.5rem;
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
            width: 90%;
            max-width: 420px;
            transform: translateY(0);
            transition: all 0.4s ease;
        }

        .auth-container:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        }

        .auth-header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .auth-header h1 {
            color: #2c3e50;
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .auth-header .icon {
            font-size: 3rem;
            margin-bottom: 1rem;
            background: linear-gradient(45deg, #2ecc71, #3498db);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .input-group {
            position: relative;
            margin-bottom: 2rem;
        }

        .password-input {
            width: 100%;
            padding: 15px;
            border: 2px solid #e0e0e0;
            border-radius: 12px;
            font-size: 1.1rem;
            text-align: center;
            direction: ltr;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.9);
        }

        .password-input:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 15px rgba(52,152,219,0.15);
        }

        .submit-btn {
            width: 100%;
            padding: 15px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(45deg, #2ecc71, #3498db);
            color: white;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(46,204,113,0.3);
        }

        .submit-btn:active {
            transform: translateY(1px);
        }

        .error-message {
            color: #e74c3c;
            margin-top: 1rem;
            text-align: center;
            display: none;
            animation: shake 0.5s ease-in-out;
        }

        .loader {
            display: none;
            width: 25px;
            height: 25px;
            border: 3px solid #ffffff;
            border-radius: 50%;
            border-top-color: transparent;
            animation: spin 1s linear infinite;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-10px); }
            40%, 80% { transform: translateX(10px); }
        }

        @keyframes spin {
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }

        .fade-out {
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s ease-in-out, visibility 0.5s;
        }

        .success-message {
            display: none;
            color: #2ecc71;
            text-align: center;
            margin-top: 1rem;
        }

        @media (max-width: 480px) {
            .auth-container {
                padding: 1.5rem;
            }

            .auth-header h1 {
                font-size: 1.2rem;
            }
        }
    </style>
</head>
<body>
    <div class="auth-overlay" id="authOverlay">
        <div class="auth-container">
            <div class="auth-header">
                <div class="icon">♻️</div>
                <h1>سامانه پیشرفته پیگیری تغذیه و پسماند</h1>
            </div>
            <form id="authForm" onsubmit="return validateAccess(event)">
                <div class="input-group">
                    <input type="password" 
                           class="password-input" 
                           id="accessCode"
                           placeholder="لطفاً رمز عبور را وارد کنید" 
                           autocomplete="off"
                           required>
                </div>
                <button type="submit" class="submit-btn" id="submitBtn">
                    <span class="btn-text">ورود به سامانه</span>
                    <span class="loader"></span>
                </button>
                <div class="error-message" id="errorMsg">رمز عبور نادرست است. لطفاً مجدداً تلاش کنید.</div>
                <div class="success-message" id="successMsg">در حال ورود به سامانه...</div>
            </form>
        </div>
    </div>

    <script>
        (function() {
            const CORRECT_PASSWORD = '590245';
            const AUTH_KEY = 'eco_platform_auth';
            
            // Check if already authenticated
            if (sessionStorage.getItem(AUTH_KEY) === 'true') {
                document.getElementById('authOverlay').classList.add('fade-out');
                setTimeout(() => {
                    document.getElementById('authOverlay').style.display = 'none';
                }, 500);
                return;
            }

            function validateAccess(event) {
                event.preventDefault();
                
                const accessCode = document.getElementById('accessCode');
                const submitBtn = document.getElementById('submitBtn');
                const btnText = submitBtn.querySelector('.btn-text');
                const loader = submitBtn.querySelector('.loader');
                const errorMsg = document.getElementById('errorMsg');
                const successMsg = document.getElementById('successMsg');

                // Reset states
                errorMsg.style.display = 'none';
                successMsg.style.display = 'none';
                btnText.style.display = 'none';
                loader.style.display = 'block';
                submitBtn.disabled = true;

                // Simulate server verification
                setTimeout(() => {
                    if (accessCode.value === CORRECT_PASSWORD) {
                        successMsg.style.display = 'block';
                        sessionStorage.setItem(AUTH_KEY, 'true');
                        
                        setTimeout(() => {
                            document.getElementById('authOverlay').classList.add('fade-out');
                            setTimeout(() => {
                                document.getElementById('authOverlay').style.display = 'none';
                            }, 500);
                        }, 1000);
                    } else {
                        errorMsg.style.display = 'block';
                        btnText.style.display = 'block';
                        loader.style.display = 'none';
                        submitBtn.disabled = false;
                        
                        // Clear input and focus
                        accessCode.value = '';
                        accessCode.focus();
                    }
                }, 1500);

                return false;
            }

            // Attach form submit handler
            document.getElementById('authForm').addEventListener('submit', validateAccess);

            // Prevent form resubmission on page refresh
            if (window.history.replaceState) {
                window.history.replaceState(null, null, window.location.href);
            }
        })();
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .eco-header {
            position: relative;
            height: 400px;
            background: linear-gradient(
                180deg, 
                #1a4561 0%,
                #3c7fb0 30%,
                #87CEEB 70%,
                #b5e5ff 100%
            );
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }

        /* === خورشید پیشرفته با افکت‌های نور === */
        .sun {
            position: absolute;
            top: 50px;
            right: 80px;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle at center,
                #fff6d5 0%,
                #ffe87c 20%,
                #ffd700 40%,
                #ffa500 70%,
                #ff8c00 100%
            );
            border-radius: 50%;
            box-shadow: 
                0 0 80px #ffd700,
                0 0 120px #ff8c00,
                0 0 160px rgba(255, 140, 0, 0.4),
                0 0 200px rgba(255, 140, 0, 0.2);
            animation: 
                sunPulse 4s ease-in-out infinite,
                sunRays 20s linear infinite;
            filter: blur(1px);
        }

        .sun::after {
            content: '';
            position: absolute;
            top: -20%;
            left: -20%;
            width: 140%;
            height: 140%;
            background: radial-gradient(circle at center,
                rgba(255, 255, 255, 0.8) 0%,
                rgba(255, 255, 255, 0) 70%
            );
            animation: sunGlow 6s ease-in-out infinite;
        }

        @keyframes sunPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        @keyframes sunGlow {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        @keyframes sunRays {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* === توربین بادی پیشرفته === */
        .wind-turbine {
            position: absolute;
            bottom: 100px;
            left: 15%;
            transform-origin: bottom center;
            animation: turbineSwaying 12s ease-in-out infinite;
            filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2));
        }

        .turbine-tower {
            width: 30px;
            height: 180px;
            background: linear-gradient(
                90deg,
                #d0d0d0 0%,
                #ffffff 50%,
                #d0d0d0 100%
            );
            border-radius: 5px;
            position: relative;
            transform-origin: bottom center;
        }

        .turbine-head {
            width: 40px;
            height: 30px;
            background: linear-gradient(90deg, #silver, #ffffff);
            position: relative;
            top: -15px;
            left: -5px;
            border-radius: 5px;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
        }

        .turbine-blades-container {
            position: absolute;
            width: 200px;
            height: 200px;
            top: -100px;
            left: -85px;
            animation: bladeRotation 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
            transform-origin: center center;
        }

        .blade {
            position: absolute;
            width: 12px;
            height: 100px;
            background: linear-gradient(
                90deg,
                #f0f0f0 0%,
                #ffffff 50%,
                #e0e0e0 100%
            );
            left: 94px;
            transform-origin: bottom center;
            border-radius: 100% 100% 5px 5px;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
        }

        .blade:nth-child(1) { transform: rotate(0deg); }
        .blade:nth-child(2) { transform: rotate(120deg); }
        .blade:nth-child(3) { transform: rotate(240deg); }

        @keyframes bladeRotation {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* === درختان پیشرفته === */
        .tree {
            position: absolute;
            bottom: 60px;
            transform-origin: bottom center;
            animation: treeSwaying 6s ease-in-out infinite;
            filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2));
        }

        .tree:nth-child(1) { right: 25%; animation-delay: -0.5s; }
        .tree:nth-child(2) { right: 45%; animation-delay: -1s; }
        .tree:nth-child(3) { right: 65%; animation-delay: -1.5s; }

        .tree-trunk {
            width: 30px;
            height: 100px;
            background: linear-gradient(
                90deg,
                #4a2612 0%,
                #8b4513 50%,
                #4a2612 100%
            );
            margin: 0 auto;
            border-radius: 5px;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
        }

        .tree-crown {
            width: 120px;
            height: 160px;
            background: radial-gradient(
                ellipse at center,
                #98fb98 0%,
                #228b22 70%,
                #006400 100%
            );
            border-radius: 70% 70% 60% 60%;
            position: relative;
            top: -20px;
            left: -45px;
            animation: treeCrownBreathing 4s ease-in-out infinite;
            box-shadow: 
                inset -5px -5px 15px rgba(0,0,0,0.2),
                5px 5px 15px rgba(0,0,0,0.1);
        }

        /* === ابرهای پیشرفته === */
        .cloud {
            position: absolute;
            background: linear-gradient(
                180deg,
                rgba(255,255,255,0.95) 0%,
                rgba(240,240,240,0.8) 100%
            );
            border-radius: 50px;
            box-shadow: 
                inset -8px -8px 20px rgba(0,0,0,0.1),
                15px 15px 30px rgba(0,0,0,0.1);
            filter: blur(1px);
        }

        .cloud::before,
        .cloud::after {
            content: '';
            position: absolute;
            background: inherit;
            border-radius: 50%;
            box-shadow: inherit;
        }

        .cloud:nth-child(1) {
            top: 60px;
            left: -200px;
            width: 180px;
            height: 60px;
            animation: cloudFloat 30s linear infinite;
        }

        .cloud:nth-child(2) {
            top: 120px;
            left: -150px;
            width: 140px;
            height: 50px;
            animation: cloudFloat 25s linear infinite;
            animation-delay: -15s;
        }

        /* === سطل بازیافت پیشرفته === */
        .recycling-bin {
            position: absolute;
            bottom: 60px;
            left: 45%;
            width: 80px;
            height: 100px;
            background: linear-gradient(
                135deg,
                #2980b9 0%,
                #3498db 50%,
                #2980b9 100%
            );
            border-radius: 10px;
            border-top: 20px solid #2c3e50;
            box-shadow: 
                inset -5px -5px 15px rgba(0,0,0,0.2),
                5px 5px 15px rgba(0,0,0,0.2);
            transform-origin: bottom center;
            animation: binWobble 4s ease-in-out infinite;
        }

        .recycling-symbol {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            border: 4px solid rgba(255,255,255,0.9);
            border-radius: 50%;
            animation: symbolRotate 6s linear infinite;
        }

        /* === ذرات محیطی === */
        .particle {
            position: absolute;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 50%;
            pointer-events: none;
            animation: particleFloat 15s linear infinite;
        }

        @keyframes particleFloat {
            0% {
                transform: translateY(0) rotate(0deg) scale(1);
                opacity: 0;
            }
            20% { opacity: 1; }
            80% { opacity: 1; }
            100% {
                transform: translateY(-100vh) rotate(360deg) scale(0);
                opacity: 0;
            }
        }

        /* === افکت‌های نور === */
        .light-beam {
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                135deg,
                rgba(255,255,255,0) 0%,
                rgba(255,255,255,0.1) 50%,
                rgba(255,255,255,0) 100%
            );
            animation: lightBeam 10s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes lightBeam {
            0%, 100% { opacity: 0; }
            50% { opacity: 1; }
        }

        @media (max-width: 768px) {
            .eco-header {
                height: 300px;
            }
            
            .wind-turbine {
                transform: scale(0.7);
            }
            
            .tree {
                transform: scale(0.8);
            }
            
            .sun {
                transform: scale(0.8);
            }

            .recycling-bin {
                transform: scale(0.8);
            }
        }
    </style>
</head>
<body>
    <div class="eco-header">
        <div class="light-beam"></div>
        <div class="sun"></div>
        
        <div class="cloud"></div>
        <div class="cloud"></div>
        
        <div class="wind-turbine">
            <div class="turbine-blades-container">
                <div class="blade"></div>
                <div class="blade"></div>
                <div class="blade"></div>
            </div>
            <div class="turbine-head"></div>
            <div class="turbine-tower"></div>
        </div>

        <div class="tree">
            <div class="tree-crown"></div>
            <div class="tree-trunk"></div>
        </div>
        
        <div class="tree">
            <div class="tree-crown"></div>
            <div class="tree-trunk"></div>
        </div>
        
        <div class="tree">
            <div class="tree-crown"></div>
            <div class="tree-trunk"></div>
        </div>

        <div class="recycling-bin">
            <div class="recycling-symbol"></div>
        </div>
    </div>

    <script>
        function createParticles() {
            const header = document.querySelector('.eco-header');
            const particleCount = 50;

            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                
                const size = Math.random() * 5 + 2;
                const startPosition = Math.random() * 100;
                const delay = Math.random() * 15;
                const duration = Math.random() * 10 + 10;

                particle.style.cssText = `
                    width: ${size}px;
                    height: ${size}px;
                    left: ${startPosition}%;
                    animation-delay: -${delay}s;
                    animation-duration: ${duration}s;
                    opacity: ${Math.random() * 0.5 + 0.3};
                `;

                header.appendChild(particle);
            }
        }

        createParticles();
    </script>
</body>
</html>


<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* ... سایر استایل‌های قبلی ... */

        .hamburger-menu {
            position: fixed;
            top: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background: rgba(255, 255, 255, 0.98);
            border-radius: 15px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease;
        }

        .hamburger-menu:hover {
            transform: scale(1.05);
        }

        .menu-icon {
            width: 30px;
            height: 20px;
            position: relative;
        }

        .menu-icon span {
            position: absolute;
            width: 100%;
            height: 3px;
            background: #333;
            border-radius: 4px;
            transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
        }

        .menu-icon span:nth-child(1) {
            top: 0;
            transform-origin: 0% 0%;
        }

        .menu-icon span:nth-child(2) {
            top: 50%;
            transform: translateY(-50%);
        }

        .menu-icon span:nth-child(3) {
            bottom: 0;
            transform-origin: 0% 100%;
        }

        .hamburger-menu.active .menu-icon span:nth-child(1) {
            transform: rotate(45deg) translate(1px, -2px);
            width: 32px;
        }

        .hamburger-menu.active .menu-icon span:nth-child(2) {
            transform: translateX(-20px);
            opacity: 0;
        }

        .hamburger-menu.active .menu-icon span:nth-child(3) {
            transform: rotate(-45deg) translate(1px, 2px);
            width: 32px;
        }

        .nav-menu {
            position: fixed;
            top: 0;
            right: -100%;
            width: 100%;
            height: 100vh;
            background: rgba(255, 255, 255, 0.98);
            transition: all 0.6s cubic-bezier(0.7, 0, 0.3, 1);
            z-index: 999;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(10px);
        }

        @media (min-width: 768px) {
            .nav-menu {
                width: 400px;
            }
        }

        .nav-menu.active {
            right: 0;
            box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
        }

        .nav-menu a {
            display: flex;
            align-items: center;
            padding: 20px 40px;
            color: #333;
            text-decoration: none;
            font-size: 1.4em;
            margin: 15px;
            border-radius: 15px;
            transition: all 0.3s ease;
            background: rgba(46, 204, 113, 0.1);
            width: 80%;
            max-width: 300px;
        }

        .nav-menu a i {
            margin-left: 15px;
            font-size: 1.5em;
        }

        .nav-menu a:hover {
            background: linear-gradient(135deg, #2ecc71, #3498db);
            color: white;
            transform: translateX(-10px) scale(1.05);
            box-shadow: 0 5px 20px rgba(46, 204, 113, 0.3);
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            opacity: 0;
            visibility: hidden;
            transition: all 0.5s ease;
            z-index: 998;
            backdrop-filter: blur(8px);
        }

        .overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .menu-title {
            position: absolute;
            top: 40px;
            right: 100px;
            font-size: 1.8em;
            color: #333;
            opacity: 0;
            transform: translateX(50px);
            transition: all 0.5s ease;
        }

        .nav-menu.active .menu-title {
            opacity: 1;
            transform: translateX(0);
        }

    </style>
</head>
<body>
    <div class="eco-header">
        <div class="hamburger-menu" onclick="toggleMenu()">
            <div class="menu-icon">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>

        <div class="overlay" onclick="toggleMenu()"></div>
        
        <nav class="nav-menu">
            <h2 class="menu-title">منوی اصلی</h2>
            <a href="#" onclick="newReport()">
                <i>📊</i>
                گزارش جدید
            </a>
            <a href="mailto:queenaicpu@gmail.com">
                <i>📧</i>
                ارتباط با توسعه دهنده
            </a>
        </nav>

        <!-- ... بقیه محتوای قبلی ... -->
    </div>

    <script>
        function toggleMenu() {
            const menu = document.querySelector('.hamburger-menu');
            const nav = document.querySelector('.nav-menu');
            const overlay = document.querySelector('.overlay');
            
            menu.classList.toggle('active');
            nav.classList.toggle('active');
            overlay.classList.toggle('active');
        }

        function newReport() {
            const forms = document.querySelectorAll('form');
            forms.forEach(form => {
                const inputs = form.querySelectorAll('input, select');
                inputs.forEach(input => {
                    if (input.type === 'radio' || input.type === 'checkbox') {
                        input.checked = false;
                    } else {
                        input.value = '';
                    }
                });
            });
            toggleMenu();
        }
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>سامانه پیشرفته پیگیری تغذیه و پسماند</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: 'Vazir', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f0f8ff;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
        }
        form {
            display: grid;
            gap: 15px;
        }
        label {
            font-weight: bold;
            color: #34495e;
        }
        input, select {
            width: 100%;
            padding: 10px;
            border: 1px solid #bdc3c7;
            border-radius: 5px;
            font-size: 16px;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 12px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 18px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        #results {
            margin-top: 30px;
            padding: 20px;
            background-color: #ecf0f1;
            border-radius: 10px;
        }
        canvas {
            max-width: 100%;
            height: auto;
            margin-top: 20px;
        }
        .recommendation {
            background-color: #e8f6f3;
            border-left: 5px solid #1abc9c;
            padding: 10px;
            margin-top: 20px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🍉 سامانه پیشرفته پیگیری تغذیه و پسماند</h1>
        <form id="nutritionForm">
            <label for="age">سن:</label>
            <input type="number" id="age" required>
            
            <label for="gender">جنسیت:</label>
            <select id="gender" required>
                <option value="male">مرد</option>
                <option value="female">زن</option>
            </select>
            
            <label for="height">قد (سانتی‌متر):</label>
            <input type="number" id="height" required>
            
            <label for="weight">وزن (کیلوگرم):</label>
            <input type="number" id="weight" required>
            
            <label for="activityLevel">سطح فعالیت:</label>
            <select id="activityLevel" required>
                <option value="sedentary">کم تحرک</option>
                <option value="light">فعالیت سبک</option>
                <option value="moderate">فعالیت متوسط</option>
                <option value="active">فعالیت زیاد</option>
                <option value="veryActive">فعالیت خیلی زیاد</option>
            </select>
            
            <label for="consumptionPeriod">دوره مصرف:</label>
            <select id="consumptionPeriod" required>
                <option value="daily">روزانه</option>
                <option value="weekly">هفتگی</option>
                <option value="monthly">ماهانه</option>
            </select>
            
            <label for="water">آب و نوشیدنی‌ها (لیتر):</label>
            <input type="number" id="water" step="0.1" required>
            
            <label for="fruits">میوه‌ها (کیلوگرم):</label>
            <input type="number" id="fruits" step="0.1" required>
            
            <label for="vegetables">سبزیجات (کیلوگرم):</label>
            <input type="number" id="vegetables" step="0.1" required>
            
            <label for="grains">غلات (کیلوگرم):</label>
            <input type="number" id="grains" step="0.1" required>
            
            <label for="fastFood">فست فود (تعداد وعده):</label>
            <input type="number" id="fastFood" required>
            
            <label for="meatFish">گوشت/ماهی (کیلوگرم):</label>
            <input type="number" id="meatFish" step="0.1" required>
            
            <label for="dairyEggs">لبنیات/تخم مرغ (کیلوگرم):</label>
            <input type="number" id="dairyEggs" step="0.1" required>
            
            <label for="snacks">تنقلات (کیلوگرم):</label>
            <input type="number" id="snacks" step="0.1" required>
            
            <button type="submit">محاسبه پیشرفته</button>
        </form>
        <div id="results"></div>
        <canvas id="nutrientChart"></canvas>
        <canvas id="wasteChart"></canvas>
    </div>
    <script>
        document.getElementById('nutritionForm').addEventListener('submit', function(e) {
            e.preventDefault();
            calculateNutrition();
        });

        function calculateNutrition() {
            const age = parseFloat(document.getElementById('age').value);
            const gender = document.getElementById('gender').value;
            const height = parseFloat(document.getElementById('height').value);
            const weight = parseFloat(document.getElementById('weight').value);
            const activityLevel = document.getElementById('activityLevel').value;
            const consumptionPeriod = document.getElementById('consumptionPeriod').value;
            const water = parseFloat(document.getElementById('water').value);
            const fruits = parseFloat(document.getElementById('fruits').value);
            const vegetables = parseFloat(document.getElementById('vegetables').value);
            const grains = parseFloat(document.getElementById('grains').value);
            const fastFood = parseFloat(document.getElementById('fastFood').value);
            const meatFish = parseFloat(document.getElementById('meatFish').value);
            const dairyEggs = parseFloat(document.getElementById('dairyEggs').value);
            const snacks = parseFloat(document.getElementById('snacks').value);

            // محاسبه BMI
            const bmi = weight / ((height / 100) ** 2);

            // محاسبه کالری مورد نیاز روزانه (فرمول Harris-Benedict)
            let bmr;
            if (gender === 'male') {
                bmr = 88.362 + (13.397 * weight) + (4.799 * height) - (5.677 * age);
            } else {
                bmr = 447.593 + (9.247 * weight) + (3.098 * height) - (4.330 * age);
            }

            // ضریب فعالیت
            const activityFactors = {
                sedentary: 1.2,
                light: 1.375,
                moderate: 1.55,
                active: 1.725,
                veryActive: 1.9
            };
            const dailyCalories = bmr * activityFactors[activityLevel];

            // محاسبه مصرف مواد غذایی و تولید پسماند
            const totalProtein = (meatFish * 0.2 + dairyEggs * 0.1 + grains * 0.1) * 1000;
            const totalCarbs = (fruits * 0.1 + vegetables * 0.1 + grains * 0.7) * 1000;
            const totalFat = (meatFish * 0.1 + dairyEggs * 0.1 + snacks * 0.3) * 1000;
            const totalFiber = (fruits * 0.02 + vegetables * 0.03 + grains * 0.1) * 1000;

            const totalCalories = (totalProtein * 4) + (totalCarbs * 4) + (totalFat * 9);

            const totalWaste = (fruits + vegetables) * 0.3 + (meatFish + dairyEggs) * 0.2 + snacks * 0.1;
            const recyclableWaste = totalWaste * 0.6;
            const nonRecyclableWaste = totalWaste * 0.4;

            // محاسبه امتیازات
            const nutritionScore = calculateNutritionScore(totalCalories, dailyCalories, totalProtein, totalCarbs, totalFat, totalFiber);
            const environmentScore = calculateEnvironmentScore(recyclableWaste, nonRecyclableWaste, water);

            displayResults(bmi, dailyCalories, totalCalories, totalProtein, totalCarbs, totalFat, totalFiber, totalWaste, recyclableWaste, nonRecyclableWaste, nutritionScore, environmentScore);
            drawNutrientChart(totalProtein, totalCarbs, totalFat);
            drawWasteChart(recyclableWaste, nonRecyclableWaste);
            provideRecommendations(bmi, totalCalories, dailyCalories, water, nutritionScore, environmentScore);
        }

        function calculateNutritionScore(totalCalories, dailyCalories, protein, carbs, fat, fiber) {
            const calorieScore = Math.max(0, 100 - Math.abs(totalCalories - dailyCalories) / dailyCalories * 100);
            const macroScore = (protein * 4 + carbs * 4 + fat * 9) / totalCalories * 100;
            const fiberScore = Math.min(100, fiber / 30 * 100);
            return (calorieScore + macroScore + fiberScore) / 3;
        }

        function calculateEnvironmentScore(recyclableWaste, nonRecyclableWaste, water) {
            const wasteScore = Math.max(0, 100 - (recyclableWaste + nonRecyclableWaste) * 10);
            const waterScore = Math.max(0, 100 - Math.abs(water - 2) * 25);
            return (wasteScore + waterScore) / 2;
        }

        function displayResults(bmi, dailyCalories, totalCalories, protein, carbs, fat, fiber, totalWaste, recyclableWaste, nonRecyclableWaste, nutritionScore, environmentScore) {
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = `
                <h2>نتایج تحلیل پیشرفته</h2>
                <p>شاخص توده بدنی (BMI): ${bmi.toFixed(2)}</p>
                <p>کالری مورد نیاز روزانه: ${dailyCalories.toFixed(0)} کیلوکالری</p>
                <p>کل کالری مصرفی: ${totalCalories.toFixed(0)} کیلوکالری</p>
                <p>کل پروتئین مصرفی: ${protein.toFixed(1)} گرم</p>
                <p>کل کربوهیدرات مصرفی: ${carbs.toFixed(1)} گرم</p>
                <p>کل چربی مصرفی: ${fat.toFixed(1)} گرم</p>
                <p>کل فیبر مصرفی: ${fiber.toFixed(1)} گرم</p>
                <p>کل پسماند: ${totalWaste.toFixed(2)} کیلوگرم</p>
                <p>پسماند قابل بازیافت: ${recyclableWaste.toFixed(2)} کیلوگرم</p>
                <p>پسماند غیرقابل بازیافت: ${nonRecyclableWaste.toFixed(2)} کیلوگرم</p>
                <p>امتیاز سلامت تغذیه: ${nutritionScore.toFixed(0)}/100</p>
                <p>امتیاز سازگاری با محیط زیست: ${environmentScore.toFixed(0)}/100</p>
            `;
        }

        function drawNutrientChart(protein, carbs, fat) {
            const ctx = document.getElementById('nutrientChart').getContext('2d');
            new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: ['پروتئین', 'کربوهیدرات', 'چربی'],
                    datasets: [{
                        data: [protein, carbs, fat],
                        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
                    }]
                },
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: 'توزیع مواد مغذی'
                    }
                }
            });
        }

        function drawWasteChart(recyclableWaste, nonRecyclableWaste) {
            const ctx = document.getElementById('wasteChart').getContext('2d');
            new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: ['قابل بازیافت', 'غیرقابل بازیافت'],
                    datasets: [{
                        data: [recyclableWaste, nonRecyclableWaste],
                        backgroundColor: ['#4CAF50', '#F44336']
                    }]
                },
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: 'توزیع پسماند'
                    }
                }
            });
        }

        function provideRecommendations(bmi, totalCalories, dailyCalories, water, nutritionScore, environmentScore) {
            let recommendations = '<h3>توصیه‌های تغذیه‌ای و زیست‌محیطی:</h3>';

            if (bmi < 18.5) {
                recommendations += '<p class="recommendation">وزن شما کمتر از حد طبیعی است. توصیه می‌شود مصرف کالری و پروتئین را افزایش دهید.</p>';
            } else if (bmi > 25) {
                recommendations += '<p class="recommendation">وزن شما بیشتر از حد طبیعی است. توصیه می‌شود مصرف کالری را کاهش داده و فعالیت بدنی را افزایش دهید.</p>';
            }

            if (totalCalories > dailyCalories * 1.1) {
                recommendations += '<p class="recommendation">مصرف کالری شما بیش از حد نیاز است. سعی کنید مصرف غذاهای پرکالری را کاهش دهید.</p>';
            } else if (totalCalories < dailyCalories * 0.9) {
                recommendations += '<p class="recommendation">مصرف کالری شما کمتر از حد نیاز است. سعی کنید مصرف غذاهای مغذی را افزایش دهید.</p>';
            }

            if (water < 2) {
                recommendations += '<p class="recommendation">مصرف آب شما کم است. توصیه می‌شود روزانه حداقل 2 لیتر آب بنوشید.</p>';
            }

            if (nutritionScore < 60) {
                recommendations += '<p class="recommendation">امتیاز سلامت تغذیه شما پایین است. سعی کنید تعادل بیشتری در مصرف مواد غذایی ایجاد کنید و از غذاهای متنوع استفاده کنید.</p>';
            }

            if (environmentScore < 60) {
                recommendations += '<p class="recommendation">امتیاز سازگاری با محیط زیست شما پایین است. سعی کنید میزان پسماند تولیدی را کاهش دهید و بیشتر از مواد قابل بازیافت استفاده کنید.</p>';
            }

            document.getElementById('results').innerHTML += recommendations;
        }

        // برای حل مشکل اسکن با دوربین در حالت لوکال
        if (window.location.protocol === 'http:') {
            navigator.mediaDevices.getUserMedia = function(constraints) {
                if (navigator.webkitGetUserMedia) {
                    return new Promise(function(resolve, reject) {
                        navigator.webkitGetUserMedia(constraints, resolve, reject);
                    });
                }
            }
        }
    </script>
<!DOCTYPE html>
<html dir="rtl" lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مدیریت گزارش‌ها</title>
    <style>
        :root {
            --primary-color: #2A9D8F;
            --secondary-color: #264653;
            --accent-color: #E9C46A;
            --light-bg: #F1FAEE;
        }
        
        body {
            font-family: system-ui, -apple-system, Vazirmatn, Tahoma;
            background: linear-gradient(135deg, var(--light-bg), #E8F5E9);
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .tab {
            padding: 10px 20px;
            background: var(--light-bg);
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .tab.active {
            background: var(--primary-color);
            color: white;
        }

        .action-button {
            width: 100%;
            padding: 15px;
            margin: 10px 0;
            border: none;
            border-radius: 10px;
            background: white;
            color: var(--primary-color);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.3s ease;
            font-size: 16px;
        }

        .action-button:hover {
            background: var(--primary-color);
            color: white;
        }

        .history-container {
            margin-top: 20px;
            display: none;
        }

        .history-item {
            background: var(--light-bg);
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 10px;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .fade-in {
            animation: fadeIn 0.3s ease forwards;
        }
    </style>
</head>
<body>
    <div class="container fade-in">
        <div class="tabs">
            <button class="tab active" onclick="switchTab('all')">همه گزارش‌ها</button>
            <button class="tab" onclick="switchTab('nutrition')">تغذیه</button>
            <button class="tab" onclick="switchTab('activity')">فعالیت</button>
            <button class="tab" onclick="switchTab('waste')">پسماند</button>
        </div>

        <button class="action-button" onclick="printReport()">
            <i>🖨️</i>
            چاپ گزارش
        </button>

        <button class="action-button" onclick="saveReport()">
            <i>💾</i>
            ذخیره گزارش
        </button>

        <button class="action-button" onclick="viewHistory()">
            <i>📋</i>
            مشاهده تاریخچه
        </button>

        <button class="action-button" onclick="clearStorage()">
            <i>🗑️</i>
            پاک کردن حافظه
        </button>

        <div id="historyContainer" class="history-container">
            <!-- تاریخچه گزارش‌ها اینجا نمایش داده می‌شود -->
        </div>
    </div>

    <script>
        function switchTab(tab) {
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            event.target.classList.add('active');
        }

        function printReport() {
            window.print();
        }

        function saveReport() {
            const report = {
                date: new Date().toLocaleDateString('fa-IR'),
                data: gatherFormData()
            };
            
            let reports = JSON.parse(localStorage.getItem('reports') || '[]');
            reports.push(report);
            localStorage.setItem('reports', JSON.stringify(reports));
            alert('گزارش با موفقیت ذخیره شد');
        }

        function gatherFormData() {
            // این تابع داده‌های فرم را جمع‌آوری می‌کند
            return {
                age: document.getElementById('age')?.value,
                gender: document.querySelector('input[name="gender"]:checked')?.value,
                height: document.getElementById('height')?.value,
                weight: document.getElementById('weight')?.value,
                activityLevel: document.getElementById('activityLevel')?.value,
                // سایر فیلدها
            };
        }

        function viewHistory() {
            const container = document.getElementById('historyContainer');
            container.style.display = 'block';
            
            const reports = JSON.parse(localStorage.getItem('reports') || '[]');
            container.innerHTML = reports.map(report => `
                <div class="history-item fade-in">
                    <div>تاریخ: ${report.date}</div>
                    <div>اطلاعات: ${JSON.stringify(report.data)}</div>
                </div>
            `).join('');
        }

        function clearStorage() {
            if(confirm('آیا از پاک کردن تمام گزارش‌ها اطمینان دارید؟')) {
                localStorage.removeItem('reports');
                alert('حافظه با موفقیت پاک شد');
                document.getElementById('historyContainer').innerHTML = '';
            }
        }
    </script>
<head>
    <!-- Prevent page indexing by search engines -->
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex, nofollow">
</head>
<body>
    <!-- Your page content goes here -->
</body>
</html>