<!doctype html>
<html lang=fa dir=rtl>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<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%}.cloud{position:absolute;background:rgba(255,255,255,.9);border-radius:50px;animation:float 15s infinite linear;box-shadow:0 5px 15px rgba(0,0,0,.1)}.cloud::after,.cloud::before{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:first-child{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}.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,.1) 0,transparent 100%)}.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,.1)}.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,.2)}.solar-panel::before{content:'';position:absolute;width:100%;height:100%;background:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:20px 20px}.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,.2)}.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,.2);border-radius:50%;animation:pulse 2s infinite;backdrop-filter:blur(5px);box-shadow:0 0 30px rgba(0,0,0,.1)}.recycling-symbol span{font-size:3em}.interactive-element{cursor:pointer;transition:transform .3s ease}.interactive-element:hover{transform:scale(1.1)}@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(0)}to{transform:rotate(360deg)}}@keyframes sway{0%{transform:rotate(0)}50%{transform:rotate(5deg)}100%{transform:rotate(0)}}@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,.2)}100%{transform:translate(-50%,-50%) scale(1)}}@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>document.querySelectorAll(".interactive-element").forEach((e=>{e.addEventListener("mouseover",(()=>{e.style.filter="brightness(1.2)"})),e.addEventListener("mouseout",(()=>{e.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">
<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,.1)}.hamburger-menu span{display:block;width:25px;height:3px;background:#fff;margin:5px 0;transition:.3s}.menu{position:fixed;top:0;right:-300px;width:300px;height:100vh;background:linear-gradient(145deg,#f8f9fa,#e9ecef);padding:80px 20px;transition:.3s;box-shadow:-2px 0 10px rgba(0,0,0,.1)}.menu.active{right:0}.menu-item{display:block;padding:15px;margin:10px 0;text-decoration:none;color:#333;background:#fff;border-radius:5px;transition:.3s;box-shadow:0 2px 5px rgba(0,0,0,.05)}.menu-item:hover{background:var(--primary-color);color:#fff;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:#fff;padding:15px 25px;border-radius:5px;box-shadow:0 2px 10px rgba(0,0,0,.1);display:none;z-index:1000;animation:slideIn .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");document.querySelectorAll(".hamburger-menu span").forEach((e=>e.classList.toggle("active")))}function newReport(){document.querySelectorAll("input").forEach((e=>{"radio"===e.type||"checkbox"===e.type?e.checked=!1:e.value=""}));document.querySelectorAll("select").forEach((e=>{e.selectedIndex=0}));document.querySelectorAll("textarea").forEach((e=>{e.value=""})),showToast(),document.querySelector(".menu").classList.remove("active")}function showToast(){const e=document.getElementById("toast");e.style.display="block",setTimeout((()=>{e.style.display="none"}),3e3)}document.addEventListener("click",(e=>{const t=document.querySelector(".menu"),c=document.querySelector(".hamburger-menu");t.contains(e.target)||c.contains(e.target)||!t.classList.contains("active")||t.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">
<title>سامانه پیشرفته پیگیری تغذیه و پسماند</title>
<style>body{font-family:Tahoma,sans-serif;max-width:1200px;margin:0 auto;padding:20px;background-color:#f5f5f5}.container{background-color:#fff;padding:20px;border-radius:10px;box-shadow:0 0 10px rgba(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:700}input,select,textarea{width:100%;padding:8px;margin:5px 0;border:1px solid #ddd;border-radius:4px}button{background-color:#4caf50;color:#fff;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:#fff}</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 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="AIzaSyCAfOKX7SVDpMJCuVvE-JrsGssvPknJZg8",GEMINI_ENDPOINT="https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash-latest:generateContent";function showSection(e){document.querySelectorAll(".section").forEach((e=>{e.style.display="none"})),document.getElementById(e).style.display="block",document.querySelectorAll(".tab").forEach((e=>{e.classList.remove("active")})),event.target.classList.add("active")}async function analyzeData(){event.preventDefault();const e=new FormData(document.getElementById("comprehensiveForm")),n=Object.fromEntries(e),t=`\n                لطفا داده های زیر را به صورت جامع تحلیل کرده و پیشنهادات تخصصی ارائه دهید:\n\n                اطلاعات پایه:\n                - سن: ${n.age}\n                - جنسیت: ${n.gender}\n                - قد: ${n.height} سانتی متر\n                - وزن: ${n.weight} کیلوگرم\n                - گروه خونی: ${n.bloodType}\n\n                اطلاعات تغذیه:\n                - مصرف آب: ${n.water} لیتر\n                - مصرف میوه: ${n.fruits} کیلوگرم\n                - مصرف سبزیجات: ${n.vegetables} کیلوگرم\n                - مصرف غلات: ${n.grains} کیلوگرم\n                - مصرف پروتئین: ${n.protein} کیلوگرم\n                - تعداد وعده‌های غذایی: ${n.mealsPerDay}\n                - آلرژی‌ها: ${n.allergies}\n\n                فعالیت بدنی:\n                - سطح فعالیت: ${n.activityLevel}\n                - نوع ورزش‌ها: ${n.exerciseTypes}\n                - ساعات ورزش هفتگی: ${n.exerciseHours}\n\n                مدیریت پسماند:\n                - پسماند خشک: ${n.dryWaste} کیلوگرم\n                - پسماند تر: ${n.wetWaste} کیلوگرم\n                - تفکیک زباله: ${n.wasteSegregation}\n\n                سلامت روان:\n                - سطح استرس: ${n.stressLevel}\n                - کیفیت خواب: ${n.sleepQuality}\n                - ساعات خواب: ${n.sleepHours}\n\n                لطفا تحلیل جامعی از وضعیت سلامت فرد ارائه دهید و پیشنهادات بهبود در هر بخش را مطرح کنید.\n            `;try{const e=await fetch(`${GEMINI_ENDPOINT}?key=${GEMINI_API_KEY}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({contents:[{parts:[{text:t}]}]})}),n=await e.json();document.getElementById("analysis-result").innerHTML=`<h3>تحلیل هوشمند:</h3><div class="analysis-content">${n.candidates[0].content.parts[0].text}</div>`}catch(e){console.error("Error:",e),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,.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,.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,.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:.5em 0;text-shadow:2px 2px 4px rgba(0,0,0,.3);transition:all .3s ease}.developer-name:hover{color:#66d9ef;transform:scale(1.05)}.title{color:#66d9ef;font-size:1em;letter-spacing:.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, .5));animation:float 3s ease-in-out infinite}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%{opacity:.5}50%{opacity:.8}100%{opacity:.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:.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 e(){const e=/iPhone|iPad|iPod|Android/i.test(navigator.userAgent),t=document.querySelector('meta[name="viewport"]');e?(t.content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0",document.documentElement.style.fontSize="14px"):(t.content="width=device-width, initial-scale=1.0",document.documentElement.style.fontSize="16px");let n=.01*window.innerHeight;document.documentElement.style.setProperty("--vh",`${n}px`)}let t;function n(){const e=window.innerWidth,t=window.innerHeight,n=16/9;let i=1;i=e/t>n?t/(e/n):e/(t*n),document.documentElement.style.setProperty("--content-scale",i)}function i(){const e=window.innerWidth,t=Math.min(Math.max(e/100,12),20);document.documentElement.style.setProperty("--base-font-size",`${t}px`)}function d(){const e=document.body;/iPhone|iPad|iPod/i.test(navigator.userAgent)?e.classList.add("ios-device"):/Android/i.test(navigator.userAgent)?e.classList.add("android-device"):e.classList.add("desktop-device"),window.innerWidth<=768?e.classList.add("mobile-view"):window.innerWidth<=1024?e.classList.add("tablet-view"):e.classList.add("desktop-view")}e(),window.addEventListener("resize",(function(){clearTimeout(t),t=setTimeout(e,250)})),window.addEventListener("orientationchange",e),n(),window.addEventListener("resize",n),i(),window.addEventListener("resize",i),d(),window.addEventListener("resize",d)}(),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((([e,t])=>{document.documentElement.style.setProperty(e,t)}))</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}html{scroll-behavior:smooth}@media (hover:none) and (pointer:coarse){.interactive-element{-webkit-tap-highlight-color:transparent}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}</style>
</body>
</html>