<!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">
    <title>پلتفرم زیست محیطی</title>
    <style>
        :root {
            --gradient-1: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
            --gradient-2: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
            --primary: #00b894;
            --secondary: #0984e3;
            --accent: #6c5ce7;
            --dark: #2d3436;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: system-ui;
            background: var(--gradient-1);
            min-height: 100vh;
            overflow-x: hidden;
            color: var(--dark);
        }

        .header {
            position: relative;
            height: 100vh;
            width: 100%;
            overflow: hidden;
        }

        .scene {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        /* Enhanced Clouds */
        .cloud {
            position: absolute;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50px;
            animation: float 15s infinite linear;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

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

        .cloud::before {
            width: 50%;
            height: 100%;
            top: -50%;
            left: 25%;
        }

        .cloud::after {
            width: 30%;
            height: 100%;
            top: -30%;
            right: 25%;
        }

        .cloud:nth-child(1) { top: 20%; left: -10%; width: 100px; height: 40px; }
        .cloud:nth-child(2) { top: 40%; left: -15%; width: 120px; height: 45px; animation-delay: -5s; }
        .cloud:nth-child(3) { top: 60%; left: -5%; width: 80px; height: 35px; animation-delay: -10s; }

        /* Enhanced Mountains */
        .mountain {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 35vh;
            background: linear-gradient(45deg, #2c3e50, #34495e);
            clip-path: polygon(0 100%, 50% 0, 100% 100%);
        }

        .mountain::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(rgba(255,255,255,0.1) 0%, transparent 100%);
        }

        /* Enhanced Turbine */
        .turbine {
            position: absolute;
            bottom: 35vh;
            width: 6px;
            height: 100px;
            background: linear-gradient(to bottom, #95a5a6, #7f8c8d);
        }

        .turbine::before {
            content: '';
            position: absolute;
            top: 0;
            left: -48px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 3px solid #95a5a6;
            animation: rotate 4s infinite linear;
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
        }

        /* Enhanced Solar Panel */
        .solar-panel {
            position: absolute;
            bottom: 40vh;
            right: 15%;
            width: 80px;
            height: 60px;
            background: linear-gradient(45deg, #0984e3, #74b9ff);
            transform: perspective(500px) rotateX(30deg);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }

        .solar-panel::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
            background-size: 20px 20px;
        }

        /* Enhanced Trees */
        .tree {
            position: absolute;
            bottom: 35vh;
            width: 20px;
            height: 80px;
            background: linear-gradient(to bottom, #6c5ce7, #4834d4);
            animation: sway 3s infinite ease-in-out;
        }

        .tree::before {
            content: '';
            position: absolute;
            top: -40px;
            left: -30px;
            width: 80px;
            height: 80px;
            background: linear-gradient(to bottom right, #00b894, #00cec9);
            border-radius: 50%;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        /* Enhanced Recycling Symbol */
        .recycling-symbol {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 120px;
            height: 120px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            animation: pulse 2s infinite;
            backdrop-filter: blur(5px);
            box-shadow: 0 0 30px rgba(0,0,0,0.1);
        }

        .recycling-symbol span {
            font-size: 3em;
        }

        /* Interactive Elements */
        .interactive-element {
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .interactive-element:hover {
            transform: scale(1.1);
        }

        /* Enhanced Animations */
        @keyframes float {
            from { transform: translateX(-100%) translateY(0); }
            50% { transform: translateX(50vw) translateY(20px); }
            to { transform: translateX(100vw) translateY(0); }
        }

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

        @keyframes sway {
            0% { transform: rotate(0deg); }
            50% { transform: rotate(5deg); }
            100% { transform: rotate(0deg); }
        }

        @keyframes pulse {
            0% { transform: translate(-50%, -50%) scale(1); }
            50% { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 40px rgba(0,255,0,0.2); }
            100% { transform: translate(-50%, -50%) scale(1); }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .mountain { height: 25vh; }
            .turbine { height: 70px; bottom: 25vh; }
            .solar-panel { bottom: 30vh; width: 60px; height: 40px; }
            .tree { bottom: 25vh; height: 60px; }
            .tree::before { width: 60px; height: 60px; top: -30px; left: -20px; }
            .recycling-symbol { width: 80px; height: 80px; }
            .recycling-symbol span { font-size: 2em; }
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="scene">
            <div class="cloud interactive-element"></div>
            <div class="cloud interactive-element"></div>
            <div class="cloud interactive-element"></div>
            <div class="mountain"></div>
            <div class="turbine interactive-element" style="left: 20%"></div>
            <div class="turbine interactive-element" style="left: 40%"></div>
            <div class="turbine interactive-element" style="left: 60%"></div>
            <div class="solar-panel interactive-element"></div>
            <div class="tree interactive-element" style="left: 70%"></div>
            <div class="tree interactive-element" style="left: 80%"></div>
            <div class="tree interactive-element" style="left: 90%"></div>
            <div class="recycling-symbol interactive-element">
                <span>♻️</span>
            </div>
        </div>
    </header>

    <script>
        // Add interactive hover effects
        document.querySelectorAll('.interactive-element').forEach(element => {
            element.addEventListener('mouseover', () => {
                element.style.filter = 'brightness(1.2)';
            });
            
            element.addEventListener('mouseout', () => {
                element.style.filter = 'brightness(1)';
            });
        });
    </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>
        :root {
            --primary-color: #2ecc71;
            --secondary-color: #27ae60;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Tahoma', sans-serif;
        }

        .hamburger-menu {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 100;
            cursor: pointer;
            background: linear-gradient(145deg, var(--primary-color), var(--secondary-color));
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .hamburger-menu span {
            display: block;
            width: 25px;
            height: 3px;
            background: white;
            margin: 5px 0;
            transition: 0.3s;
        }

        .menu {
            position: fixed;
            top: 0;
            right: -300px;
            width: 300px;
            height: 100vh;
            background: linear-gradient(145deg, #f8f9fa, #e9ecef);
            padding: 80px 20px;
            transition: 0.3s;
            box-shadow: -2px 0 10px rgba(0,0,0,0.1);
        }

        .menu.active {
            right: 0;
        }

        .menu-item {
            display: block;
            padding: 15px;
            margin: 10px 0;
            text-decoration: none;
            color: #333;
            background: white;
            border-radius: 5px;
            transition: 0.3s;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        .menu-item:hover {
            background: var(--primary-color);
            color: white;
            transform: translateX(-5px);
        }

        .eco-animation {
            position: fixed;
            bottom: 20px;
            left: 20px;
            animation: float 3s infinite ease-in-out;
        }

        .toast {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: var(--primary-color);
            color: white;
            padding: 15px 25px;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            display: none;
            z-index: 1000;
            animation: slideIn 0.3s ease-out;
        }

        @keyframes slideIn {
            from { transform: translateX(100%); }
            to { transform: translateX(0); }
        }

        @keyframes float {
            0% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0); }
        }

        .menu-item i {
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="hamburger-menu" onclick="toggleMenu()">
        <span></span>
        <span></span>
        <span></span>
    </div>

    <nav class="menu">
        <a href="#" class="menu-item" onclick="newReport()">
            <i>📊</i>
            گزارش جدید
        </a>
        <a href="mailto:queenaicpu@gmail.com" class="menu-item">
            <i>✉️</i>
            ارتباط با توسعه‌دهنده
        </a>
    </nav>

    <div class="eco-animation">
        🌱
    </div>

    <div class="toast" id="toast">
        فرم با موفقیت پاک شد
    </div>

    <script>
        function toggleMenu() {
            document.querySelector('.menu').classList.toggle('active');
            const spans = document.querySelectorAll('.hamburger-menu span');
            spans.forEach(span => span.classList.toggle('active'));
        }

        function newReport() {
            // پاک کردن تمام ورودی‌های فرم
            const inputs = document.querySelectorAll('input');
            inputs.forEach(input => {
                if (input.type === 'radio' || input.type === 'checkbox') {
                    input.checked = false;
                } else {
                    input.value = '';
                }
            });

            // پاک کردن تمام select ها
            const selects = document.querySelectorAll('select');
            selects.forEach(select => {
                select.selectedIndex = 0;
            });

            // پاک کردن تمام textarea ها
            const textareas = document.querySelectorAll('textarea');
            textareas.forEach(textarea => {
                textarea.value = '';
            });

            // نمایش پیام موفقیت
            showToast();
            
            // بستن منو
            document.querySelector('.menu').classList.remove('active');
        }

        function showToast() {
            const toast = document.getElementById('toast');
            toast.style.display = 'block';
            setTimeout(() => {
                toast.style.display = 'none';
            }, 3000);
        }

        document.addEventListener('click', (e) => {
            const menu = document.querySelector('.menu');
            const hamburger = document.querySelector('.hamburger-menu');
            if (!menu.contains(e.target) && !hamburger.contains(e.target) && menu.classList.contains('active')) {
                menu.classList.remove('active');
            }
        });
    </script>
</body>
</html>

<!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>
        body {
            font-family: 'Tahoma', sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        .question-group {
            margin: 15px 0;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 5px;
        }
        label {
            display: block;
            margin: 8px 0;
            font-weight: bold;
        }
        input, select, textarea {
            width: 100%;
            padding: 8px;
            margin: 5px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background-color: #45a049;
        }
        .tabs {
            display: flex;
            margin-bottom: 20px;
        }
        .tab {
            padding: 10px 20px;
            background-color: #ddd;
            border: none;
            cursor: pointer;
        }
        .tab.active {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>♻️🚮☺️🌳 سامانه پیشرفته پیگیری تغذیه و پسماند</h1>
        
        <div class="tabs">
            <button class="tab active" onclick="showSection('basic')">اطلاعات پایه</button>
            <button class="tab" onclick="showSection('nutrition')">تغذیه</button>
            <button class="tab" onclick="showSection('activity')">فعالیت بدنی</button>
            <button class="tab" onclick="showSection('waste')">پسماند</button>
            <button class="tab" onclick="showSection('mental')">سلامت روان</button>
        </div>

        <form id="comprehensiveForm">
            <!-- بخش اطلاعات پایه -->
            <div id="basic" class="section">
                <h2>اطلاعات پایه</h2>
                
                <div class="question-group">
                    <label>سن:</label>
                    <input type="number" name="age" required>

                    <label>جنسیت:</label>
                    <select name="gender" required>
                        <option value="male">مرد</option>
                        <option value="female">زن</option>
                    </select>

                    <label>قد (سانتی‌متر):</label>
                    <input type="number" name="height" required>

                    <label>وزن (کیلوگرم):</label>
                    <input type="number" name="weight" required>

                    <label>گروه خونی:</label>
                    <select name="bloodType">
                        <option value="A+">A+</option>
                        <option value="A-">A-</option>
                        <option value="B+">B+</option>
                        <option value="B-">B-</option>
                        <option value="AB+">AB+</option>
                        <option value="AB-">AB-</option>
                        <option value="O+">O+</option>
                        <option value="O-">O-</option>
                    </select>
                </div>
            </div>

            <!-- بخش تغذیه -->
            <div id="nutrition" class="section" style="display:none;">
                <h2>اطلاعات تغذیه</h2>
                
                <div class="question-group">
                    <h3>مصرف روزانه</h3>
                    <label>آب و نوشیدنی‌ها (لیتر):</label>
                    <input type="number" name="water" step="0.1">

                    <label>میوه‌ها (کیلوگرم):</label>
                    <input type="number" name="fruits" step="0.1">

                    <label>سبزیجات (کیلوگرم):</label>
                    <input type="number" name="vegetables" step="0.1">

                    <label>غلات (کیلوگرم):</label>
                    <input type="number" name="grains" step="0.1">

                    <label>پروتئین (کیلوگرم):</label>
                    <input type="number" name="protein" step="0.1">
                </div>

                <div class="question-group">
                    <h3>عادات غذایی</h3>
                    <label>تعداد وعده‌های غذایی در روز:</label>
                    <input type="number" name="mealsPerDay">

                    <label>ساعات معمول صرف غذا:</label>
                    <input type="text" name="mealTimes" placeholder="مثال: صبحانه ۸، ناهار ۱۳، شام ۲۰">

                    <label>آلرژی‌های غذایی:</label>
                    <textarea name="allergies" rows="3"></textarea>
                </div>
            </div>

            <!-- بخش فعالیت بدنی -->
            <div id="activity" class="section" style="display:none;">
                <h2>فعالیت بدنی</h2>
                
                <div class="question-group">
                    <label>سطح فعالیت روزانه:</label>
                    <select name="activityLevel">
                        <option value="sedentary">کم تحرک</option>
                        <option value="light">فعالیت سبک</option>
                        <option value="moderate">فعالیت متوسط</option>
                        <option value="high">فعالیت زیاد</option>
                        <option value="very-high">فعالیت خیلی زیاد</option>
                    </select>

                    <label>نوع ورزش‌های منظم:</label>
                    <textarea name="exerciseTypes" rows="3"></textarea>

                    <label>مدت زمان ورزش در هفته (ساعت):</label>
                    <input type="number" name="exerciseHours">
                </div>
            </div>

            <!-- بخش پسماند -->
            <div id="waste" class="section" style="display:none;">
                <h2>مدیریت پسماند</h2>
                
                <div class="question-group">
                    <label>میزان پسماند خشک روزانه (کیلوگرم):</label>
                    <input type="number" name="dryWaste" step="0.1">

                    <label>میزان پسماند تر روزانه (کیلوگرم):</label>
                    <input type="number" name="wetWaste" step="0.1">

                    <label>تفکیک زباله:</label>
                    <select name="wasteSegregation">
                        <option value="yes">بله</option>
                        <option value="no">خیر</option>
                        <option value="partial">تا حدودی</option>
                    </select>
                </div>
            </div>

            <!-- بخش سلامت روان -->
            <div id="mental" class="section" style="display:none;">
                <h2>سلامت روان</h2>
                
                <div class="question-group">
                    <label>میزان استرس روزانه (۱-۱۰):</label>
                    <input type="range" name="stressLevel" min="1" max="10">

                    <label>کیفیت خواب:</label>
                    <select name="sleepQuality">
                        <option value="excellent">عالی</option>
                        <option value="good">خوب</option>
                        <option value="fair">متوسط</option>
                        <option value="poor">ضعیف</option>
                    </select>

                    <label>ساعات خواب روزانه:</label>
                    <input type="number" name="sleepHours">
                </div>
            </div>

            <button type="submit" onclick="analyzeData()">تحلیل جامع اطلاعات</button>
        </form>

        <div id="analysis-result"></div>
    </div>

    <script>
        const GEMINI_API_KEY = 'AIzaSyBa_MwcxtaXjkg1FN0GJ5YZkeBA_TGcTaQ';
        const GEMINI_ENDPOINT = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash-latest:generateContent';

        function showSection(sectionId) {
            // Hide all sections
            document.querySelectorAll('.section').forEach(section => {
                section.style.display = 'none';
            });
            // Show selected section
            document.getElementById(sectionId).style.display = 'block';
            
            // Update tabs
            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.remove('active');
            });
            event.target.classList.add('active');
        }

        async function analyzeData() {
            event.preventDefault();
            const formData = new FormData(document.getElementById('comprehensiveForm'));
            const data = Object.fromEntries(formData);
            
            const prompt = `
                لطفا داده های زیر را به صورت جامع تحلیل کرده و پیشنهادات تخصصی ارائه دهید:

                اطلاعات پایه:
                - سن: ${data.age}
                - جنسیت: ${data.gender}
                - قد: ${data.height} سانتی متر
                - وزن: ${data.weight} کیلوگرم
                - گروه خونی: ${data.bloodType}

                اطلاعات تغذیه:
                - مصرف آب: ${data.water} لیتر
                - مصرف میوه: ${data.fruits} کیلوگرم
                - مصرف سبزیجات: ${data.vegetables} کیلوگرم
                - مصرف غلات: ${data.grains} کیلوگرم
                - مصرف پروتئین: ${data.protein} کیلوگرم
                - تعداد وعده‌های غذایی: ${data.mealsPerDay}
                - آلرژی‌ها: ${data.allergies}

                فعالیت بدنی:
                - سطح فعالیت: ${data.activityLevel}
                - نوع ورزش‌ها: ${data.exerciseTypes}
                - ساعات ورزش هفتگی: ${data.exerciseHours}

                مدیریت پسماند:
                - پسماند خشک: ${data.dryWaste} کیلوگرم
                - پسماند تر: ${data.wetWaste} کیلوگرم
                - تفکیک زباله: ${data.wasteSegregation}

                سلامت روان:
                - سطح استرس: ${data.stressLevel}
                - کیفیت خواب: ${data.sleepQuality}
                - ساعات خواب: ${data.sleepHours}

                لطفا تحلیل جامعی از وضعیت سلامت فرد ارائه دهید و پیشنهادات بهبود در هر بخش را مطرح کنید.
            `;

            try {
                const response = await fetch(`${GEMINI_ENDPOINT}?key=${GEMINI_API_KEY}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        contents: [{
                            parts: [{
                                text: prompt
                            }]
                        }]
                    })
                });

                const result = await response.json();
                document.getElementById('analysis-result').innerHTML = 
                    `<h3>تحلیل هوشمند:</h3><div class="analysis-content">${result.candidates[0].content.parts[0].text}</div>`;
            } catch (error) {
                console.error('Error:', error);
                document.getElementById('analysis-result').innerHTML = 
                    '<p style="color: red;">خطا در تحلیل داده‌ها</p>';
            }
        }
    </script>
<footer class="modern-footer">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Vazirmatn:wght@300;400;600&display=swap');
    
    .modern-footer {
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
      color: rgba(255,255,255,0.9);
      padding: 3rem 2rem;
      font-family: 'Vazirmatn', sans-serif;
      text-align: center;
      position: relative;
      overflow: hidden;
      min-height: 250px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-shadow: 0 -10px 20px rgba(0,0,0,0.1);
    }

    .modern-footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
      animation: pulse 4s ease infinite;
    }

    .footer-text {
      position: relative;
      z-index: 1;
      line-height: 2;
      animation: fadeIn 1s ease-out;
    }

    .developer-name {
      font-family: 'Vazirmatn', serif;
      color: #4a90e2;
      font-weight: 700;
      font-size: 1.4em;
      margin: 0.5em 0;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
      transition: all 0.3s ease;
    }

    .developer-name:hover {
      color: #66d9ef;
      transform: scale(1.05);
    }

    .title {
      color: #66d9ef;
      font-size: 1em;
      letter-spacing: 0.5px;
      margin-bottom: 1em;
    }

    .ai-logo {
      width: 80px;
      height: 80px;
      margin: 1.5em auto;
      position: relative;
    }

    .ai-logo svg {
      width: 100%;
      height: 100%;
      filter: drop-shadow(0 0 8px rgba(102, 217, 239, 0.5));
      animation: float 3s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    @keyframes pulse {
      0% { opacity: 0.5; }
      50% { opacity: 0.8; }
      100% { opacity: 0.5; }
    }

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

    @media (max-width: 768px) {
      .modern-footer {
        padding: 2rem 1rem;
      }
      
      .footer-text {
        font-size: 0.9em;
      }

      .developer-name {
        font-size: 1.2em;
      }

      .ai-logo {
        width: 60px;
        height: 60px;
      }
    }
  </style>

  <div class="footer-text">
    <div>کلیه حقوق معنوی و مادی این اثر برای توسعه دهنده محفوظ می‌باشد</div>
    <div class="developer-name">با تشکر، رضا صالحی (آلبرت)</div>
    <div class="title">توسعه دهنده پلتفرم‌های هوش مصنوعی و دیتا</div>
    
    <div class="ai-logo">
      <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M50 10L90 30V70L50 90L10 70V30L50 10Z" stroke="#66d9ef" stroke-width="2"/>
        <path d="M50 10V90" stroke="#66d9ef" stroke-width="2"/>
        <path d="M90 30L10 70" stroke="#66d9ef" stroke-width="2"/>
        <path d="M10 30L90 70" stroke="#66d9ef" stroke-width="2"/>
        <circle cx="50" cy="50" r="10" fill="#4a90e2"/>
        <circle cx="50" cy="50" r="5" fill="#66d9ef"/>
        <circle cx="50" cy="10" r="3" fill="#66d9ef"/>
        <circle cx="90" cy="30" r="3" fill="#66d9ef"/>
        <circle cx="90" cy="70" r="3" fill="#66d9ef"/>
        <circle cx="50" cy="90" r="3" fill="#66d9ef"/>
        <circle cx="10" cy="70" r="3" fill="#66d9ef"/>
        <circle cx="10" cy="30" r="3" fill="#66d9ef"/>
      </svg>
    </div>
  </div>
</footer>
<script>
// تشخیص نوع دستگاه و تنظیم مقیاس
(function() {
    function adjustViewport() {
        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
        const viewport = document.querySelector('meta[name="viewport"]');
        
        if (isMobile) {
            // تنظیمات برای موبایل
            viewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0';
            document.documentElement.style.fontSize = '14px';
        } else {
            // تنظیمات برای دسکتاپ
            viewport.content = 'width=device-width, initial-scale=1.0';
            document.documentElement.style.fontSize = '16px';
        }
        
        // تنظیم ارتفاع واقعی viewport
        let vh = window.innerHeight * 0.01;
        document.documentElement.style.setProperty('--vh', `${vh}px`);
    }

    // اجرای تابع در لود اولیه
    adjustViewport();

    // اجرای مجدد در تغییر سایز پنجره
    let resizeTimeout;
    window.addEventListener('resize', function() {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(adjustViewport, 250);
    });

    // تنظیم orientation برای موبایل
    window.addEventListener('orientationchange', adjustViewport);

    // تنظیم مقیاس صحیح برای محتوا
    function setContentScale() {
        const width = window.innerWidth;
        const height = window.innerHeight;
        const aspectRatio = width / height;
        const idealAspectRatio = 16 / 9;
        
        let scale = 1;
        if (aspectRatio > idealAspectRatio) {
            scale = height / (width / idealAspectRatio);
        } else {
            scale = width / (height * idealAspectRatio);
        }
        
        document.documentElement.style.setProperty('--content-scale', scale);
    }

    setContentScale();
    window.addEventListener('resize', setContentScale);

    // تنظیم سایز فونت‌ها بر اساس عرض viewport
    function setResponsiveFontSize() {
        const width = window.innerWidth;
        const baseFontSize = Math.min(Math.max(width / 100, 12), 20);
        document.documentElement.style.setProperty('--base-font-size', `${baseFontSize}px`);
    }

    setResponsiveFontSize();
    window.addEventListener('resize', setResponsiveFontSize);

    // اضافه کردن کلاس‌های مناسب به body
    function setDeviceClasses() {
        const body = document.body;
        if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
            body.classList.add('ios-device');
        } else if (/Android/i.test(navigator.userAgent)) {
            body.classList.add('android-device');
        } else {
            body.classList.add('desktop-device');
        }

        if (window.innerWidth <= 768) {
            body.classList.add('mobile-view');
        } else if (window.innerWidth <= 1024) {
            body.classList.add('tablet-view');
        } else {
            body.classList.add('desktop-view');
        }
    }

    setDeviceClasses();
    window.addEventListener('resize', setDeviceClasses);

})();

// تنظیم CSS variables برای استفاده در استایل‌ها
document.documentElement.style.setProperty('--window-height', `${window.innerHeight}px`);
document.documentElement.style.setProperty('--window-width', `${window.innerWidth}px`);

// اضافه کردن کد تشخیص جهت و زبان
document.documentElement.style.setProperty('--device-direction', 
    document.dir || document.documentElement.dir || 'rtl');

// تنظیم متغیرهای محیطی برای استایل‌ها
const cssVariables = {
    '--header-height': '60px',
    '--footer-height': '50px',
    '--sidebar-width': '250px',
    '--content-max-width': '1200px',
    '--content-padding': '20px',
    '--mobile-breakpoint': '768px',
    '--tablet-breakpoint': '1024px',
    '--desktop-breakpoint': '1200px'
};

Object.entries(cssVariables).forEach(([key, value]) => {
    document.documentElement.style.setProperty(key, value);
});
</script>

<style>
:root {
    /* متغیرهای پایه برای رسپانسیو */
    --responsive-padding: clamp(1rem, 5vw, 3rem);
    --responsive-margin: clamp(1rem, 3vw, 2rem);
    --responsive-gap: clamp(0.5rem, 2vw, 1.5rem);
    
    /* فونت‌های رسپانسیو */
    --font-size-sm: clamp(0.8rem, 1vw, 0.9rem);
    --font-size-base: clamp(1rem, 1.5vw, 1.1rem);
    --font-size-lg: clamp(1.2rem, 2vw, 1.4rem);
    --font-size-xl: clamp(1.4rem, 2.5vw, 1.8rem);
    
    /* فاصله‌های رسپانسیو */
    --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
    --space-sm: clamp(0.5rem, 1vw, 1rem);
    --space-md: clamp(1rem, 2vw, 2rem);
    --space-lg: clamp(2rem, 4vw, 4rem);
    --space-xl: clamp(4rem, 6vw, 6rem);
}

/* استایل‌های پایه برای رسپانسیو */
body {
    font-size: var(--base-font-size);
    padding: var(--responsive-padding);
    margin: 0;
    min-height: calc(var(--vh, 1vh) * 100);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* تنظیمات برای دستگاه‌های مختلف */
.mobile-view {
    --content-padding: 10px;
    --sidebar-width: 200px;
}

.tablet-view {
    --content-padding: 15px;
    --sidebar-width: 220px;
}

.desktop-view {
    --content-padding: 20px;
    --sidebar-width: 250px;
}

/* تنظیمات smooth scroll */
html {
    scroll-behavior: smooth;
}

/* تنظیمات touch برای موبایل */
@media (hover: none) and (pointer: coarse) {
    .interactive-element {
        -webkit-tap-highlight-color: transparent;
    }
}

/* بهینه‌سازی برای صفحه نمایش‌های retina */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    html {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}
</style>
<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>