<!doctype html>
<html lang=fa dir=rtl>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<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,.3)}.sun{position:absolute;top:50px;right:80px;width:100px;height:100px;background:radial-gradient(circle at center,#fff6d5 0,#ffe87c 20%,gold 40%,orange 70%,#ff8c00 100%);border-radius:50%;box-shadow:0 0 80px gold,0 0 120px #ff8c00,0 0 160px rgba(255,140,0,.4),0 0 200px rgba(255,140,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,.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:.5}50%{opacity:1}}@keyframes sunRays{from{transform:rotate(0)}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,.2))}.turbine-tower{width:30px;height:180px;background:linear-gradient(90deg,#d0d0d0 0,#fff 50%,#d0d0d0 100%);border-radius:5px;position:relative;transform-origin:bottom center}.turbine-head{width:40px;height:30px;background:linear-gradient(90deg,#silver,#fff);position:relative;top:-15px;left:-5px;border-radius:5px;box-shadow:2px 2px 10px rgba(0,0,0,.2)}.turbine-blades-container{position:absolute;width:200px;height:200px;top:-100px;left:-85px;animation:bladeRotation 3s cubic-bezier(.4,0,.2,1) infinite;transform-origin:center center}.blade{position:absolute;width:12px;height:100px;background:linear-gradient(90deg,#f0f0f0 0,#fff 50%,#e0e0e0 100%);left:94px;transform-origin:bottom center;border-radius:100% 100% 5px 5px;box-shadow:2px 2px 10px rgba(0,0,0,.1)}.blade:first-child{transform:rotate(0)}.blade:nth-child(2){transform:rotate(120deg)}.blade:nth-child(3){transform:rotate(240deg)}@keyframes bladeRotation{from{transform:rotate(0)}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,.2))}.tree:first-child{right:25%;animation-delay:-.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,.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,.2),5px 5px 15px rgba(0,0,0,.1)}.cloud{position:absolute;background:linear-gradient(180deg,rgba(255,255,255,.95) 0,rgba(240,240,240,.8) 100%);border-radius:50px;box-shadow:inset -8px -8px 20px rgba(0,0,0,.1),15px 15px 30px rgba(0,0,0,.1);filter:blur(1px)}.cloud::after,.cloud::before{content:'';position:absolute;background:inherit;border-radius:50%;box-shadow:inherit}.cloud:first-child{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,.2),5px 5px 15px rgba(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,.9);border-radius:50%;animation:symbolRotate 6s linear infinite}.particle{position:absolute;background:rgba(255,255,255,.6);border-radius:50%;pointer-events:none;animation:particleFloat 15s linear infinite}@keyframes particleFloat{0%{transform:translateY(0) rotate(0) 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,.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(.7)}.tree{transform:scale(.8)}.sun{transform:scale(.8)}.recycling-bin{transform:scale(.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 t=document.querySelector(".eco-header");for(let a=0;a<50;a++){const a=document.createElement("div");a.className="particle";const e=5*Math.random()+2,n=100*Math.random(),o=15*Math.random(),c=10*Math.random()+10;a.style.cssText=`\n                    width: ${e}px;\n                    height: ${e}px;\n                    left: ${n}%;\n                    animation-delay: -${o}s;\n                    animation-duration: ${c}s;\n                    opacity: ${.5*Math.random()+.3};\n                `,t.appendChild(a)}}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">
<style>.hamburger-menu{position:fixed;top:20px;right:20px;width:60px;height:60px;background:rgba(255,255,255,.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,.15);transition:all .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 .4s cubic-bezier(.68, -.6, .32, 1.6)}.menu-icon span:first-child{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:first-child{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,.98);transition:all .6s cubic-bezier(.7, 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,.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 .3s ease;background:rgba(46,204,113,.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:#fff;transform:translateX(-10px) scale(1.05);box-shadow:0 5px 20px rgba(46,204,113,.3)}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);opacity:0;visibility:hidden;transition:all .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 .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 e=document.querySelector(".hamburger-menu"),t=document.querySelector(".nav-menu"),c=document.querySelector(".overlay");e.classList.toggle("active"),t.classList.toggle("active"),c.classList.toggle("active")}function newReport(){document.querySelectorAll("form").forEach((e=>{e.querySelectorAll("input, select").forEach((e=>{"radio"===e.type||"checkbox"===e.type?e.checked=!1:e.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">
<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:#fff;padding:20px;border-radius:15px;box-shadow:0 0 20px rgba(0,0,0,.1)}h1{text-align:center;color:#2c3e50;margin-bottom:30px}form{display:grid;gap:15px}label{font-weight:700;color:#34495e}input,select{width:100%;padding:10px;border:1px solid #bdc3c7;border-radius:5px;font-size:16px}button{background-color:#3498db;color:#fff;border:none;padding:12px;border-radius:5px;cursor:pointer;font-size:18px;transition:background-color .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>function calculateNutrition(){const e=parseFloat(document.getElementById("age").value),t=document.getElementById("gender").value,n=parseFloat(document.getElementById("height").value),a=parseFloat(document.getElementById("weight").value),o=document.getElementById("activityLevel").value,d=(document.getElementById("consumptionPeriod").value,parseFloat(document.getElementById("water").value)),i=parseFloat(document.getElementById("fruits").value),l=parseFloat(document.getElementById("vegetables").value),r=parseFloat(document.getElementById("grains").value),s=(parseFloat(document.getElementById("fastFood").value),parseFloat(document.getElementById("meatFish").value)),c=parseFloat(document.getElementById("dairyEggs").value),m=parseFloat(document.getElementById("snacks").value),u=a/(n/100)**2;let p;p="male"===t?88.362+13.397*a+4.799*n-5.677*e:447.593+9.247*a+3.098*n-4.33*e;const g=p*{sedentary:1.2,light:1.375,moderate:1.55,active:1.725,veryActive:1.9}[o],v=1e3*(.2*s+.1*c+.1*r),F=1e3*(.1*i+.1*l+.7*r),y=1e3*(.1*s+.1*c+.3*m),E=1e3*(.02*i+.03*l+.1*r),h=4*v+4*F+9*y,B=.3*(i+l)+.2*(s+c)+.1*m,I=.6*B,x=.4*B,f=calculateNutritionScore(h,g,v,F,y,E),w=calculateEnvironmentScore(I,x,d);displayResults(u,g,h,v,F,y,E,B,I,x,f,w),drawNutrientChart(v,F,y),drawWasteChart(I,x),provideRecommendations(u,h,g,d,f,w)}function calculateNutritionScore(e,t,n,a,o,d){return(Math.max(0,100-Math.abs(e-t)/t*100)+(4*n+4*a+9*o)/e*100+Math.min(100,d/30*100))/3}function calculateEnvironmentScore(e,t,n){return(Math.max(0,100-10*(e+t))+Math.max(0,100-25*Math.abs(n-2)))/2}function displayResults(e,t,n,a,o,d,i,l,r,s,c,m){document.getElementById("results").innerHTML=`\n                <h2>نتایج تحلیل پیشرفته</h2>\n                <p>شاخص توده بدنی (BMI): ${e.toFixed(2)}</p>\n                <p>کالری مورد نیاز روزانه: ${t.toFixed(0)} کیلوکالری</p>\n                <p>کل کالری مصرفی: ${n.toFixed(0)} کیلوکالری</p>\n                <p>کل پروتئین مصرفی: ${a.toFixed(1)} گرم</p>\n                <p>کل کربوهیدرات مصرفی: ${o.toFixed(1)} گرم</p>\n                <p>کل چربی مصرفی: ${d.toFixed(1)} گرم</p>\n                <p>کل فیبر مصرفی: ${i.toFixed(1)} گرم</p>\n                <p>کل پسماند: ${l.toFixed(2)} کیلوگرم</p>\n                <p>پسماند قابل بازیافت: ${r.toFixed(2)} کیلوگرم</p>\n                <p>پسماند غیرقابل بازیافت: ${s.toFixed(2)} کیلوگرم</p>\n                <p>امتیاز سلامت تغذیه: ${c.toFixed(0)}/100</p>\n                <p>امتیاز سازگاری با محیط زیست: ${m.toFixed(0)}/100</p>\n            `}function drawNutrientChart(e,t,n){const a=document.getElementById("nutrientChart").getContext("2d");new Chart(a,{type:"pie",data:{labels:["پروتئین","کربوهیدرات","چربی"],datasets:[{data:[e,t,n],backgroundColor:["#FF6384","#36A2EB","#FFCE56"]}]},options:{responsive:!0,title:{display:!0,text:"توزیع مواد مغذی"}}})}function drawWasteChart(e,t){const n=document.getElementById("wasteChart").getContext("2d");new Chart(n,{type:"pie",data:{labels:["قابل بازیافت","غیرقابل بازیافت"],datasets:[{data:[e,t],backgroundColor:["#4CAF50","#F44336"]}]},options:{responsive:!0,title:{display:!0,text:"توزیع پسماند"}}})}function provideRecommendations(e,t,n,a,o,d){let i="<h3>توصیه‌های تغذیه‌ای و زیست‌محیطی:</h3>";e<18.5?i+='<p class="recommendation">وزن شما کمتر از حد طبیعی است. توصیه می‌شود مصرف کالری و پروتئین را افزایش دهید.</p>':e>25&&(i+='<p class="recommendation">وزن شما بیشتر از حد طبیعی است. توصیه می‌شود مصرف کالری را کاهش داده و فعالیت بدنی را افزایش دهید.</p>'),t>1.1*n?i+='<p class="recommendation">مصرف کالری شما بیش از حد نیاز است. سعی کنید مصرف غذاهای پرکالری را کاهش دهید.</p>':t<.9*n&&(i+='<p class="recommendation">مصرف کالری شما کمتر از حد نیاز است. سعی کنید مصرف غذاهای مغذی را افزایش دهید.</p>'),a<2&&(i+='<p class="recommendation">مصرف آب شما کم است. توصیه می‌شود روزانه حداقل 2 لیتر آب بنوشید.</p>'),o<60&&(i+='<p class="recommendation">امتیاز سلامت تغذیه شما پایین است. سعی کنید تعادل بیشتری در مصرف مواد غذایی ایجاد کنید و از غذاهای متنوع استفاده کنید.</p>'),d<60&&(i+='<p class="recommendation">امتیاز سازگاری با محیط زیست شما پایین است. سعی کنید میزان پسماند تولیدی را کاهش دهید و بیشتر از مواد قابل بازیافت استفاده کنید.</p>'),document.getElementById("results").innerHTML+=i}document.getElementById("nutritionForm").addEventListener("submit",(function(e){e.preventDefault(),calculateNutrition()})),"http:"===window.location.protocol&&(navigator.mediaDevices.getUserMedia=function(e){if(navigator.webkitGetUserMedia)return new Promise((function(t,n){navigator.webkitGetUserMedia(e,t,n)}))})</script>
<!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>: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:#fff;border-radius:20px;padding:20px;box-shadow:0 4px 15px rgba(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 .3s ease}.tab.active{background:var(--primary-color);color:#fff}.action-button{width:100%;padding:15px;margin:10px 0;border:none;border-radius:10px;background:#fff;color:var(--primary-color);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .3s ease;font-size:16px}.action-button:hover{background:var(--primary-color);color:#fff}.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 .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(e){document.querySelectorAll(".tab").forEach((e=>e.classList.remove("active"))),event.target.classList.add("active")}function printReport(){window.print()}function saveReport(){const e={date:(new Date).toLocaleDateString("fa-IR"),data:gatherFormData()};let t=JSON.parse(localStorage.getItem("reports")||"[]");t.push(e),localStorage.setItem("reports",JSON.stringify(t)),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 e=document.getElementById("historyContainer");e.style.display="block";const t=JSON.parse(localStorage.getItem("reports")||"[]");e.innerHTML=t.map((e=>`\n                <div class="history-item fade-in">\n                    <div>تاریخ: ${e.date}</div>\n                    <div>اطلاعات: ${JSON.stringify(e.data)}</div>\n                </div>\n            `)).join("")}function clearStorage(){confirm("آیا از پاک کردن تمام گزارش‌ها اطمینان دارید؟")&&(localStorage.removeItem("reports"),alert("حافظه با موفقیت پاک شد"),document.getElementById("historyContainer").innerHTML="")}</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>
</body>
</html></body></html>