<!doctype html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<style>:root{--menu-gradient-1:#2193b0;--menu-gradient-2:#6dd5ed}.menu-wrapper{position:fixed;top:20px;right:20px;z-index:9999}.hamburger-menu{width:45px;height:45px;cursor:pointer;background:linear-gradient(145deg,var(--menu-gradient-1),var(--menu-gradient-2));border-radius:50%;display:flex;justify-content:center;align-items:center;box-shadow:0 4px 15px rgba(0,0,0,.2);transition:all .3s cubic-bezier(.4, 0, .2, 1)}.hamburger-menu:hover{transform:scale(1.1);box-shadow:0 6px 20px rgba(0,0,0,.25)}.menu-icon{width:26px;height:20px;position:relative}.menu-icon span{display:block;position:absolute;height:3px;width:100%;background:#fff;border-radius:3px;transition:all .4s cubic-bezier(.4, 0, .2, 1)}.menu-icon span:first-child{top:0}.menu-icon span:nth-child(2){top:8px;width:80%}.menu-icon span:nth-child(3){top:16px}.menu-open span:first-child{transform:rotate(45deg) translate(7px,7px)}.menu-open span:nth-child(2){opacity:0;transform:translateX(-10px)}.menu-open span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}.menu-items{position:fixed;top:75px;right:20px;background:linear-gradient(145deg,var(--menu-gradient-1),var(--menu-gradient-2));padding:15px;border-radius:15px;box-shadow:0 4px 15px rgba(0,0,0,.2);opacity:0;transform:translateY(-20px) scale(.95);pointer-events:none;transition:all .4s cubic-bezier(.4, 0, .2, 1);min-width:200px}.menu-items.show{opacity:1;transform:translateY(0) scale(1);pointer-events:all}.menu-items a{display:flex;align-items:center;color:#fff;text-decoration:none;padding:12px 20px;margin:8px 0;border-radius:8px;transition:all .3s cubic-bezier(.4, 0, .2, 1);font-family:Arial,sans-serif;font-size:15px;letter-spacing:.5px;position:relative;overflow:hidden}.menu-items a:before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);transform:translateX(-100%);transition:transform .3s ease}.menu-items a:hover:before{transform:translateX(0)}.menu-items a i{margin-right:10px;font-size:18px}.menu-items a:hover{background:rgba(255,255,255,.15);transform:translateX(5px);box-shadow:0 2px 8px rgba(0,0,0,.1)}.menu-items a .tooltip{position:absolute;background:rgba(0,0,0,.8);color:#fff;padding:5px 10px;border-radius:5px;font-size:12px;right:100%;top:50%;transform:translateY(-50%);margin-right:10px;opacity:0;pointer-events:none;transition:all .3s ease}.menu-items a:hover .tooltip{opacity:1}@media (max-width:768px){.menu-items{width:calc(100vw - 40px);right:50%;transform:translateX(50%) translateY(-20px) scale(.95)}.menu-items.show{transform:translateX(50%) translateY(0) scale(1)}}</style>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css>
</head>
<body>
<div class=menu-wrapper>
<div class=hamburger-menu onclick=toggleMenu(event)>
<div class=menu-icon>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class=menu-items>
<a href=# onclick='return loadContent("home"),!1'>
<i class="fas fa-home"></i>Home
<span class=tooltip>Go to Homepage</span>
</a>
<a href=# onclick='return loadContent("analysis"),!1'>
<i class="fas fa-chart-bar"></i>New Analysis
<span class=tooltip>Start New Analysis</span>
</a>
<a href=mailto:queenaicpu@gmail.com>
<i class="fas fa-envelope"></i>Contact Developer
<span class=tooltip>Email Developer</span>
</a>
</div>
</div>
<script>let currentContent="home";function toggleMenu(e){e.stopPropagation();const n=document.querySelector(".menu-icon"),t=document.querySelector(".menu-items");n.classList.toggle("menu-open"),t.classList.toggle("show")}function loadContent(e){if(currentContent===e)return;currentContent=e;const n=document.querySelector(".menu-icon"),t=document.querySelector(".menu-items");switch(n.classList.remove("menu-open"),t.classList.remove("show"),e){case"home":window.location.href=window.location.pathname;break;case"analysis":resetForm();break;default:console.log("Unknown page")}}function resetForm(){const e=document.getElementsByTagName("form");e.length>0&&e[0].reset();const n=document.getElementById("results");n&&(n.innerHTML="")}document.addEventListener("click",(function(e){const n=document.querySelector(".menu-wrapper"),t=document.querySelector(".menu-items"),o=document.querySelector(".menu-icon");!n.contains(e.target)&&t.classList.contains("show")&&(t.classList.remove("show"),o.classList.remove("menu-open"))})),document.querySelector(".menu-items").addEventListener("click",(function(e){e.stopPropagation()})),document.addEventListener("keydown",(function(e){if("Escape"===e.key){const e=document.querySelector(".menu-items"),n=document.querySelector(".menu-icon");e.classList.remove("show"),n.classList.remove("menu-open")}}))</script>
</body>
</html>
<!doctype html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<style>.eco-header{height:200px;background:linear-gradient(135deg,#b5e48c 0,#184e77 100%);position:relative;overflow:hidden}.cloud{position:absolute;background:rgba(255,255,255,.8);border-radius:50px;animation:floatCloud 20s infinite linear}.cloud:first-child{width:100px;height:40px;top:30px;left:-100px}.cloud:nth-child(2){width:80px;height:30px;top:60px;left:-80px;animation-delay:-5s}.turbine{position:absolute;bottom:0}.tower{width:10px;height:100px;background:#ddd;margin-left:20px}.blades{width:80px;height:80px;position:absolute;top:0;left:-15px;animation:rotate 4s infinite linear}.blade{position:absolute;width:8px;height:30px;background:#fff;left:50%;top:50%;transform-origin:bottom center}.blade:first-child{transform:rotate(0)}.blade:nth-child(2){transform:rotate(120deg)}.blade:nth-child(3){transform:rotate(240deg)}.tree{position:absolute;bottom:0}.trunk{width:20px;height:60px;background:#5c4033}.leaves{width:60px;height:60px;background:#2d5a27;border-radius:50%;position:relative;top:-30px;left:-20px;animation:sway 3s infinite ease-in-out}.sun{position:absolute;width:60px;height:60px;background:gold;border-radius:50%;top:30px;right:30px;box-shadow:0 0 30px gold;animation:glow 3s infinite alternate}.recycling{position:absolute;bottom:20px;right:20px;font-size:40px;color:#fff;animation:spin 10s infinite linear}@keyframes floatCloud{from{transform:translateX(-100px)}to{transform:translateX(calc(100vw + 100px))}}@keyframes rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}@keyframes glow{from{box-shadow:0 0 30px gold}to{box-shadow:0 0 50px gold}}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width:768px){.eco-header{height:150px}.sun{width:40px;height:40px}.tree .leaves{width:40px;height:40px}.turbine .tower{height:70px}.blades{width:60px;height:60px}}</style>
</head>
<body>
<div class=eco-header>
<div class=cloud></div>
<div class=cloud></div>
<div class=sun></div>
<div class=turbine style=left:10%>
<div class=blades>
<div class=blade></div>
<div class=blade></div>
<div class=blade></div>
</div>
<div class=tower></div>
</div>
<div class=turbine style=left:30%>
<div class=blades>
<div class=blade></div>
<div class=blade></div>
<div class=blade></div>
</div>
<div class=tower></div>
</div>
<div class=tree style=left:50%>
<div class=leaves></div>
<div class=trunk></div>
</div>
<div class=tree style=left:70%>
<div class=leaves></div>
<div class=trunk></div>
</div>
<div class=recycling>♻️</div>
</div>
</body>
</html>
<!doctype html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>Advanced Nutrition and Waste Tracking System</title>
<script src=https://cdn.jsdelivr.net/npm/chart.js></script>
<style>body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:#333;max-width:800px;margin:0 auto;padding:20px;background-color:#f0f4f8}h1{color:#2c3e50;text-align:center;margin-bottom:30px}form{background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1)}label{display:block;margin-bottom:5px;font-weight:700}input,select{width:100%;padding:8px;margin-bottom:15px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}button{background-color:#3498db;color:#fff;border:none;padding:10px 20px;border-radius:4px;cursor:pointer;font-size:16px;transition:background-color .3s}button:hover{background-color:#2980b9}#results{margin-top:30px;background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1)}.chart-container{position:relative;height:300px;width:100%;margin-bottom:30px}table{width:100%;border-collapse:collapse;margin-bottom:20px}td,th{border:1px solid #ddd;padding:12px;text-align:left}th{background-color:#f2f2f2;font-weight:700}.recommendations{background-color:#e8f4fd;border-left:4px solid #3498db;padding:15px;margin-top:20px;border-radius:4px}</style>
</head>
<body>
<h1>🍎 Advanced Nutrition and Waste Tracking System</h1>
<form id=nutritionForm>
<label for=age>Age:</label>
<input type=number id=age required>
<label for=gender>Gender:</label>
<select id=gender required>
<option value=male>Male</option>
<option value=female>Female</option>
</select>
<label for=height>Height (cm):</label>
<input type=number id=height required>
<label for=weight>Weight (kg):</label>
<input type=number id=weight required>
<label for=activityLevel>Activity Level:</label>
<select id=activityLevel required>
<option value=sedentary>Sedentary</option>
<option value=light>Light Activity</option>
<option value=moderate>Moderate Activity</option>
<option value=active>Active</option>
<option value=veryActive>Very Active</option>
</select>
<label for=consumptionPeriod>Consumption Period:</label>
<select id=consumptionPeriod required>
<option value=daily>Daily</option>
<option value=weekly>Weekly</option>
<option value=monthly>Monthly</option>
</select>
<label for=water>Water and Beverages (liters):</label>
<input type=number id=water step=0.1 required>
<label for=fruits>Fruits (kg):</label>
<input type=number id=fruits step=0.1 required>
<label for=vegetables>Vegetables (kg):</label>
<input type=number id=vegetables step=0.1 required>
<label for=grains>Grains (kg):</label>
<input type=number id=grains step=0.1 required>
<label for=fastFood>Fast Food (number of meals):</label>
<input type=number id=fastFood required>
<label for=meatFish>Meat/Fish (kg):</label>
<input type=number id=meatFish step=0.1 required>
<label for=dairyEggs>Dairy/Eggs (kg):</label>
<input type=number id=dairyEggs step=0.1 required>
<label for=snacks>Snacks (kg):</label>
<input type=number id=snacks step=0.1 required>
<button type=button onclick=calculateAdvanced()>Calculate Advanced Results</button>
</form>
<div id=results></div>
<script>function calculateAdvanced(){const t=parseInt(document.getElementById("age").value),e=document.getElementById("gender").value,n=parseInt(document.getElementById("height").value),a=parseFloat(document.getElementById("weight").value),o=document.getElementById("activityLevel").value,r=document.getElementById("consumptionPeriod").value,d=parseFloat(document.getElementById("water").value),l=parseFloat(document.getElementById("fruits").value),i=parseFloat(document.getElementById("vegetables").value),s=parseFloat(document.getElementById("grains").value),g=parseInt(document.getElementById("fastFood").value),u=parseFloat(document.getElementById("meatFish").value),c=parseFloat(document.getElementById("dairyEggs").value),m=parseFloat(document.getElementById("snacks").value);let p;p="male"===e?88.362+13.397*a+4.799*n-5.677*t:447.593+9.247*a+3.098*n-4.33*t;const y=p*{sedentary:1.2,light:1.375,moderate:1.55,active:1.725,veryActive:1.9}[o],v=l+i+s+u+c+m,b=.3*v,B=(27*u+13.5*c+.9*l+2*i+1.4*s+2.5*g)*("daily"===r?365:"weekly"===r?52:12);let C=`\n                <h2>Advanced Analysis Results</h2>\n                <table>\n                    <tr><th>Metric</th><th>Value</th></tr>\n                    <tr><td>BMI (Body Mass Index)</td><td>${(a/Math.pow(n/100,2)).toFixed(2)}</td></tr>\n                    <tr><td>BMR (Basal Metabolic Rate)</td><td>${p.toFixed(2)} calories/day</td></tr>\n                    <tr><td>TDEE (Total Daily Energy Expenditure)</td><td>${y.toFixed(2)} calories/day</td></tr>\n                    <tr><td>Total Food Consumption</td><td>${v.toFixed(2)} kg/${r}</td></tr>\n                    <tr><td>Estimated Food Waste</td><td>${b.toFixed(2)} kg/${r}</td></tr>\n                    <tr><td>Estimated Annual Carbon Footprint</td><td>${B.toFixed(2)} kg CO2e</td></tr>\n                </table>\n\n                <div class="chart-container">\n                    <canvas id="foodConsumptionChart"></canvas>\n                </div>\n\n                <div class="chart-container">\n                    <canvas id="nutritionBalanceChart"></canvas>\n                </div>\n\n                <div class="recommendations">\n                    <h3>Recommendations</h3>\n                    <ul>\n                        <li>Aim for a balanced diet with plenty of fruits, vegetables, and whole grains.</li>\n                        <li>Stay hydrated by drinking at least ${(.033*a).toFixed(2)} liters of water per day.</li>\n                        <li>Consider reducing meat consumption to lower your carbon footprint.</li>\n                        <li>Try to minimize food waste by planning meals and properly storing leftovers.</li>\n                    </ul>\n                </div>\n            `;document.getElementById("results").innerHTML=C;const h=document.getElementById("foodConsumptionChart").getContext("2d");new Chart(h,{type:"pie",data:{labels:["Fruits","Vegetables","Grains","Meat/Fish","Dairy/Eggs","Snacks"],datasets:[{data:[l,i,s,u,c,m],backgroundColor:["rgba(255, 99, 132, 0.8)","rgba(75, 192, 192, 0.8)","rgba(255, 206, 86, 0.8)","rgba(54, 162, 235, 0.8)","rgba(153, 102, 255, 0.8)","rgba(255, 159, 64, 0.8)"]}]},options:{responsive:!0,plugins:{title:{display:!0,text:"Food Consumption Distribution"}}}});const f=document.getElementById("nutritionBalanceChart").getContext("2d");new Chart(f,{type:"radar",data:{labels:["Fruits","Vegetables","Grains","Meat/Fish","Dairy/Eggs","Water"],datasets:[{label:"Your Consumption",data:[l,i,s,u,c,d],fill:!0,backgroundColor:"rgba(54, 162, 235, 0.2)",borderColor:"rgb(54, 162, 235)",pointBackgroundColor:"rgb(54, 162, 235)",pointBorderColor:"#fff",pointHoverBackgroundColor:"#fff",pointHoverBorderColor:"rgb(54, 162, 235)"},{label:"Recommended",data:[2,3,2,.5,1,2],fill:!0,backgroundColor:"rgba(255, 99, 132, 0.2)",borderColor:"rgb(255, 99, 132)",pointBackgroundColor:"rgb(255, 99, 132)",pointBorderColor:"#fff",pointHoverBackgroundColor:"#fff",pointHoverBorderColor:"rgb(255, 99, 132)"}]},options:{elements:{line:{borderWidth:3}},plugins:{title:{display:!0,text:"Nutrition Balance"}}}})}</script>
<div class=advanced-controls>
<style>.advanced-controls{max-width:1200px;margin:30px auto;padding:20px;font-family:Arial,sans-serif}.control-panel{background:linear-gradient(145deg,#2193b0,#6dd5ed);border-radius:15px;padding:20px;margin-bottom:20px;box-shadow:0 4px 15px rgba(0,0,0,.1)}.control-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;margin-bottom:20px}.ctrl-btn{padding:12px 20px;border:none;border-radius:8px;background:rgba(255,255,255,.9);color:#2193b0;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;font-weight:700}.ctrl-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15);background:#fff}.ctrl-btn i{margin-right:10px}.history-panel{background:#fff;border-radius:12px;padding:20px;margin-top:20px;display:none;animation:slideDown .4s ease}@keyframes slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.history-item{border-left:4px solid #2193b0;margin:10px 0;padding:15px;background:#f8f9fa;border-radius:0 8px 8px 0;cursor:pointer;transition:all .3s ease}.history-item:hover{transform:translateX(5px);background:#f0f1f2}.category-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:15px}.category-filter{padding:8px 15px;border-radius:20px;background:rgba(255,255,255,.2);color:#fff;cursor:pointer;transition:all .3s ease}.category-filter.active{background:#fff;color:#2193b0}.loading{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s linear infinite;margin-right:10px}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:768px){.control-buttons{grid-template-columns:1fr}}</style>
<div class=control-panel>
<div class=category-filters>
<div class="category-filter active" data-category=all>All Reports</div>
<div class=category-filter data-category=nutrition>Nutrition</div>
<div class=category-filter data-category=activity>Activity</div>
<div class=category-filter data-category=waste>Waste</div>
</div>
<div class=control-buttons>
<button class=ctrl-btn onclick=printReport()>
<i class="fas fa-print"></i>Print Report
</button>
<button class=ctrl-btn onclick=saveReport()>
<i class="fas fa-save"></i>Save Report
</button>
<button class=ctrl-btn onclick=toggleHistory()>
<i class="fas fa-history"></i>View History
</button>
<button class=ctrl-btn onclick=clearStorage()>
<i class="fas fa-trash"></i>Clear Storage
</button>
</div>
</div>
<div id=historyPanel class=history-panel></div>
<script>function saveReport(){const t=collectFormData();if(!t)return;const e=JSON.parse(localStorage.getItem("nutritionReports")||"[]"),o={id:Date.now(),date:(new Date).toISOString(),category:"nutrition",data:t};e.push(o),localStorage.setItem("nutritionReports",JSON.stringify(e)),showNotification("Report saved successfully!")}function collectFormData(){const t=document.querySelector("form");if(!t)return null;const e={};return t.querySelectorAll("input, select").forEach((t=>{e[t.name||t.id]=t.value})),e}function printReport(){const t=collectFormData();if(!t)return;const e=window.open("","_blank");e.document.write(`\n                <html>\n                <head>\n                    <title>Nutrition Report</title>\n                    <style>\n                        body { font-family: Arial; padding: 20px; }\n                        .report-item { margin: 10px 0; }\n                        .header { text-align: center; margin-bottom: 30px; }\n                    </style>\n                </head>\n                <body>\n                    <div class="header">\n                        <h1>Nutrition and Waste Tracking Report</h1>\n                        <p>Generated on: ${(new Date).toLocaleString()}</p>\n                    </div>\n                    ${Object.entries(t).map((([t,e])=>`\n                        <div class="report-item">\n                            <strong>${t}:</strong> ${e}\n                        </div>\n                    `)).join("")}\n                </body>\n                </html>\n            `),e.document.close(),e.print()}function toggleHistory(){const t=document.getElementById("historyPanel"),e=JSON.parse(localStorage.getItem("nutritionReports")||"[]");"none"!==t.style.display&&t.style.display?t.style.display="none":(t.style.display="block",displayHistory(e))}function displayHistory(t){const e=document.getElementById("historyPanel");0!==t.length?e.innerHTML=t.reverse().map((t=>`\n                <div class="history-item" onclick="loadReport('${t.id}')">\n                    <h3>Report from ${new Date(t.date).toLocaleDateString()}</h3>\n                    <p>Category: ${t.category}</p>\n                </div>\n            `)).join(""):e.innerHTML="<p>No history available</p>"}function loadReport(t){const e=JSON.parse(localStorage.getItem("nutritionReports")||"[]").find((e=>e.id===parseInt(t)));e&&(Object.entries(e.data).forEach((([t,e])=>{const o=document.querySelector(`[name="${t}"], #${t}`);o&&(o.value=e)})),showNotification("Report loaded successfully!"))}function clearStorage(){confirm("Are you sure you want to clear all saved reports?")&&(localStorage.removeItem("nutritionReports"),showNotification("Storage cleared successfully!"),"block"===document.getElementById("historyPanel").style.display&&toggleHistory())}function showNotification(t){const e=document.createElement("div");e.style.cssText="\n                position: fixed;\n                bottom: 20px;\n                right: 20px;\n                background: #2193b0;\n                color: white;\n                padding: 15px 25px;\n                border-radius: 8px;\n                box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n                animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.7s;\n                z-index: 1000;\n            ",e.textContent=t,document.body.appendChild(e),setTimeout((()=>e.remove()),3e3)}function filterReports(t){const e=JSON.parse(localStorage.getItem("nutritionReports")||"[]");displayHistory("all"===t?e:e.filter((e=>e.category===t)))}document.querySelectorAll(".category-filter").forEach((t=>{t.addEventListener("click",(function(){document.querySelectorAll(".category-filter").forEach((t=>t.classList.remove("active"))),this.classList.add("active");filterReports(this.dataset.category)}))}))</script>
</div>
</body>
</html>