<!doctype html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<style>:root{--primary-gradient:linear-gradient(135deg, #43cea2 0%, #185a9d 100%);--secondary-gradient:linear-gradient(90deg, #2c3e50 0%, #3498db 100%);--accent-color:#2ecc71}*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:#f5f6fa}.eco-header{position:relative;height:300px;background:var(--primary-gradient);overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,.1)}.eco-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.2);backdrop-filter:blur(2px)}.eco-scene{position:absolute;bottom:0;left:0;right:0;height:100%;width:100%}.windmill{position:absolute;bottom:30%;right:10%;width:60px;height:150px;filter:drop-shadow(2px 4px 6px rgba(0, 0, 0, .3))}.windmill::before{content:'';position:absolute;bottom:0;left:50%;width:12px;height:120px;background:#f5f5f5;transform:translateX(-50%);border-radius:6px}.windmill::after{content:'✦';position:absolute;top:0;left:50%;font-size:60px;color:#f5f5f5;transform-origin:center 30px;animation:rotate 6s linear infinite;transform:translateX(-50%);text-shadow:0 0 10px rgba(255,255,255,.5)}.tree{position:absolute;bottom:10%;width:60px;height:90px;filter:drop-shadow(2px 4px 6px rgba(0, 0, 0, .3));transition:transform .3s ease}.tree::before{content:'🌳';font-size:60px}.tree:hover{transform:scale(1.1)}.tree:first-child{left:15%;animation:sway 4s ease-in-out infinite}.tree:nth-child(2){left:25%;animation:sway 4s ease-in-out infinite .5s}.tree:nth-child(3){left:35%;animation:sway 4s ease-in-out infinite 1s}.recycle{position:absolute;bottom:25%;left:60%;font-size:60px;filter:drop-shadow(2px 4px 6px rgba(0, 0, 0, .3));animation:float 6s ease-in-out infinite}.recycle::before{content:'♻️'}.earth{position:absolute;top:15%;left:5%;font-size:70px;animation:rotate3D 20s linear infinite}.earth::before{content:'🌍'}.grass{position:absolute;bottom:0;left:0;right:0;height:40px;background:linear-gradient(to bottom,var(--accent-color),#27ae60);box-shadow:0 -2px 10px rgba(0,0,0,.1)}.particles{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.particle{position:absolute;background:rgba(255,255,255,.5);border-radius:50%;pointer-events:none;animation:float-particle 15s linear infinite}@keyframes rotate{from{transform:translateX(-50%) rotate(0)}to{transform:translateX(-50%) rotate(360deg)}}@keyframes rotate3D{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(5deg)}}@keyframes float-particle{0%{transform:translate(0,0);opacity:0}50%{opacity:.8}100%{transform:translate(100px,-100px);opacity:0}}@media (max-width:768px){.eco-header{height:200px}.windmill{right:5%;height:100px}.tree::before{font-size:40px}.recycle{font-size:40px}.earth{font-size:50px}}@media (max-width:480px){.eco-header{height:150px}.tree:nth-child(2){display:none}.windmill{height:80px}}</style>
<script>document.addEventListener("DOMContentLoaded",(function(){const t=document.querySelector(".particles");for(let e=0;e<20;e++){const e=document.createElement("div");e.className="particle",e.style.width=4*Math.random()+"px",e.style.height=e.style.width,e.style.left=100*Math.random()+"%",e.style.top=100*Math.random()+"%",e.style.animationDelay=5*Math.random()+"s",t.appendChild(e)}}))</script>
</head>
<body>
<header class=eco-header>
<div class=eco-overlay></div>
<div class=particles></div>
<div class=eco-scene>
<div class=earth></div>
<div class=windmill></div>
<div class=tree></div>
<div class=tree></div>
<div class=tree></div>
<div class=recycle></div>
<div class=grass></div>
</div>
</header>
</body>
</html>
<!doctype html>
<html lang=en>
<head>
<!doctype html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>Eco Menu</title>
<style>:root{--primary-color:#8fbc8f;--text-color:#333;--bg-color:#fff;--menu-bg:rgba(255, 255, 255, 0.95)}[data-theme=dark]{--primary-color:#6b8e6b;--text-color:#fff;--bg-color:#222;--menu-bg:rgba(34, 34, 34, 0.95)}[data-theme=vintage]{--primary-color:#92b792;--text-color:#463e3e;--bg-color:#f4e4bc;--menu-bg:rgba(244, 228, 188, 0.95)}*{margin:0;padding:0;box-sizing:border-box;transition:all .3s ease}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;color:var(--text-color);background:var(--bg-color);min-height:100vh}.hamburger{position:fixed;top:20px;right:20px;width:30px;height:30px;cursor:pointer;z-index:1000;display:flex;flex-direction:column;justify-content:space-around}.hamburger div{width:100%;height:3px;background:var(--text-color);transition:all .3s ease}.hamburger.active div:first-child{transform:rotate(45deg) translate(8px,8px)}.hamburger.active div:nth-child(2){opacity:0}.hamburger.active div:nth-child(3){transform:rotate(-45deg) translate(8px,-8px)}.menu{position:fixed;top:0;right:-300px;width:300px;height:100vh;background:var(--menu-bg);padding:80px 20px;transition:.3s;overflow-y:auto;z-index:999;box-shadow:-5px 0 15px rgba(0,0,0,.1)}.menu.active{right:0}.menu ul{list-style:none}.menu li{margin:15px 0}.menu a{color:var(--text-color);text-decoration:none;font-size:1.1em;display:flex;align-items:center;transition:.3s;cursor:pointer}.menu a:hover{color:var(--primary-color);transform:translateX(10px)}.menu i{margin-right:10px;font-size:1.2em}.theme-switcher{display:flex;gap:10px;margin-top:20px;padding:10px;border-top:1px solid var(--text-color)}.theme-btn{padding:8px 12px;border:none;border-radius:5px;cursor:pointer;background:var(--primary-color);color:var(--bg-color);transition:.3s}.theme-btn:hover{opacity:.8}@media (max-width:768px){.menu{width:100%;right:-100%}}</style>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css>
</head>
<body>
<div class=hamburger>
<div></div>
<div></div>
<div></div>
</div>
<nav class=menu>
<ul>
<li><a onclick=resetPage()><i class="fas fa-chart-line"></i>New Analysis 📊📉📈</a></li>
<li><a href=mailto:queenaicpu@gmail.com><i class="fas fa-envelope"></i>Contact Albert</a></li>
</ul>
<div class=theme-switcher>
<button class=theme-btn onclick='setTheme("light")'>Light🌞</button>
<button class=theme-btn onclick='setTheme("vintage")'>Vintage🌕</button>
</div>
</nav>
<script>const hamburger=document.querySelector(".hamburger"),menu=document.querySelector(".menu");function setTheme(e){document.documentElement.setAttribute("data-theme",e),localStorage.setItem("theme",e)}function resetPage(){location.reload()}hamburger.addEventListener("click",(()=>{hamburger.classList.toggle("active"),menu.classList.toggle("active")}));const savedTheme=localStorage.getItem("theme")||"light";setTheme(savedTheme),document.addEventListener("click",(e=>{menu.contains(e.target)||hamburger.contains(e.target)||(menu.classList.remove("active"),hamburger.classList.remove("active"))}))</script>
</body>
</head></html>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>Advanced EcoFood Tracker</title>
<style>*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',sans-serif}:root{--primary:#2ecc71;--secondary:#27ae60;--background:#f5f6fa;--text:#2d3436;--accent:#3498db}body{background:var(--background);color:var(--text)}.container{max-width:1200px;margin:0 auto;padding:20px}.header{background:#fff;padding:20px;border-radius:15px;box-shadow:0 4px 6px rgba(0,0,0,.1);margin-bottom:30px;text-align:center}.category-section{background:#fff;padding:25px;border-radius:15px;margin-bottom:20px;box-shadow:0 4px 6px rgba(0,0,0,.1)}.category-title{color:var(--accent);margin-bottom:15px;padding-bottom:10px;border-bottom:2px solid var(--accent)}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:8px;font-weight:500}.form-control{width:100%;padding:12px;border:2px solid #dcdde1;border-radius:8px;transition:all .3s ease}.form-control:focus{border-color:var(--accent);box-shadow:0 0 5px rgba(52,152,219,.3);outline:0}.btn{background:var(--primary);color:#fff;padding:15px 30px;border:none;border-radius:8px;cursor:pointer;font-weight:600;transition:all .3s ease;width:100%;max-width:300px;margin:20px auto;display:block}.btn:hover{background:var(--secondary);transform:translateY(-2px)}.recommendations,.results{margin-top:30px;background:#fff;padding:30px;border-radius:15px;box-shadow:0 4px 6px rgba(0,0,0,.1)}.chart-container{margin:20px 0;height:400px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:20px}.stat-card{background:#f8f9fa;padding:15px;border-radius:8px;text-align:center}.stat-value{font-size:24px;font-weight:700;color:var(--accent)}@media (max-width:768px){.container{padding:10px}.category-section{padding:15px}.form-grid{grid-template-columns:1fr}}</style>

<body>
<div class=container>
<div class=header>
<h1>Data Life 🇳🇱</h1>
<p>Track your food consumption and environmental impact 🚮 🛒</p>
</div>
<div class=personal-info-section>
<h2>Personal Information</h2>
<div class=input-group>
<label for=age class=optional>
<span class=icon>👤</span> Age (Optional)
</label>
<input type=number id=age min=0 max=120 placeholder="Enter your age">
</div>
<div class="input-group required">
<label for=weight>
<span class=icon>⚖️</span> Weight (Required)
</label>
<div class=measurement-input>
<input type=number id=weight required min=20 max=300 step=0.1 placeholder="Enter weight">
<select id=weight-unit>
<option value=kg>KG</option>
<option value=lbs>LBS</option>
</select>
</div>
</div>
<div class="input-group required">
<label for=height>
<span class=icon>📏</span> Height (Required)
</label>
<div class=measurement-input>
<input type=number id=height required min=50 max=300 step=0.1 placeholder="Enter height">
<select id=height-unit onchange=updateHeightPlaceholder()>
<option value=cm>CM</option>
<option value=ft>FT</option>
</select>
</div>
</div>
<div class=input-group>
<label for=gender class=optional>
<span class=icon>⚧️</span> Gender (Optional)
</label>
<select id=gender>
<option value="">Prefer not to say</option>
<option value=male>Male</option>
<option value=female>Female</option>
<option value=non-binary>Non-binary</option>
<option value=other>Other</option>
</select>
</div>
</div>
<style>.personal-info-section{background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.2));backdrop-filter:blur(10px);border-radius:15px;padding:20px;margin:20px 0;box-shadow:0 8px 32px 0 rgba(31,38,135,.15)}.input-group{margin-bottom:20px}.input-group label{display:block;margin-bottom:8px;font-weight:500;color:var(--text-color,#333)}.input-group.required label::after{content:" *";color:#f44}.optional::after{content:" (optional)";font-size:.8em;color:#888}.icon{margin-right:8px}.measurement-input{display:flex;gap:10px}input,select{padding:10px;border:1px solid rgba(0,0,0,.1);border-radius:8px;background:rgba(255,255,255,.9);font-size:16px}input{flex:1}select{min-width:80px}input:focus,select:focus{outline:0;border-color:#4caf50;box-shadow:0 0 0 2px rgba(76,175,80,.2)}@media (max-width:768px){.measurement-input{flex-direction:column;gap:5px}select{width:100%}}</style>
<script>function updateHeightPlaceholder(){const t=document.getElementById("height");"cm"===document.getElementById("height-unit").value?(t.setAttribute("min","50"),t.setAttribute("max","300"),t.setAttribute("step","0.1"),t.placeholder="Enter height in cm"):(t.setAttribute("min","1.64"),t.setAttribute("max","9.84"),t.setAttribute("step","0.01"),t.placeholder="Enter height in ft")}updateHeightPlaceholder()</script>
<form id=consumptionForm>
<div class=category-section>
<h2 class=category-title>Tracking Period 🗓️</h2>
<div class=form-group>
<select class=form-control id=timePeriod required>
<option value=daily>Daily</option>
<option value=weekly>Weekly</option>
<option value=monthly>Monthly</option>
</select>
</div>
</div>
<div class=category-section>
<h2 class=category-title>Beverages 🍺</h2>
<div class=form-grid>
<div class=form-group>
<label>Water (Bottles)🍶</label>
<input type=number class=form-control id=water min=0 step=1>
</div>
<div class=form-group>
<label>Soft Drinks (Cans/Bottles) 🥤</label>
<input type=number class=form-control id=softDrinks min=0 step=1>
</div>
<div class=form-group>
<label>Juice Boxes 🧃</label>
<input type=number class=form-control id=juiceBoxes min=0 step=1>
</div>
<div class=form-group>
<label>Milk bottle 🥛</label>
<input type=number class=form-control id=milkCartons min=0 step=1>
</div>
</div>
</div>
<div class=category-section>
<h2 class=category-title>Fresh Produce </h2>
<div class=form-grid>
<div class=form-group>
<label>Fresh Fruits (Kg) 🍌🍇🍒🍑🍊🍍🍓</label>
<input type=number class=form-control id=freshFruits min=0 step=0.1>
</div>
<div class=form-group>
<label>Fresh Vegetables (Kg) 🥕🫑🍅🥒🥔</label>
<input type=number class=form-control id=freshVegetables min=0 step=0.1>
</div>
<div class=form-group>
<label>Packaged Salads 🥗🥬</label>
<input type=number class=form-control id=packagedSalads min=0 step=1>
</div>
<div class=form-group>
<label>Herbs (Packages) 🌿</label>
<input type=number class=form-control id=herbs min=0 step=1>
</div>
</div>
</div>
<div class=category-section>
<h2 class=category-title>Packaged Foods 📦</h2>
<div class=form-grid>
<div class=form-group>
<label>Canned Foods 🥫</label>
<input type=number class=form-control id=cannedFoods min=0 step=1>
</div>
<div class=form-group>
<label>Snack Packages 🍿</label>
<input type=number class=form-control id=snacks min=0 step=1>
</div>
<div class=form-group>
<label>Frozen Meals 🥶</label>
<input type=number class=form-control id=frozenMeals min=0 step=1>
</div>
<div class=form-group>
<label>Instant Noodles🍜</label>
<input type=number class=form-control id=instantNoodles min=0 step=1>
</div>
</div>
</div>
<div class=category-section>
<h2 class=category-title>Grains & Staples</h2>
<div class=form-grid>
<div class=form-group>
<label>Rice (Kg) 🍚</label>
<input type=number class=form-control id=rice min=0 step=0.1>
</div>
<div class=form-group>
<label>Pasta Packages🍝</label>
<input type=number class=form-control id=pasta min=0 step=1>
</div>
<div class=form-group>
<label>Bread Packages 🍞</label>
<input type=number class=form-control id=bread min=0 step=1>
</div>
<div class=form-group>
<label>Cereal Boxes 🥣</label>
<input type=number class=form-control id=cereal min=0 step=1>
</div>
</div>
</div>
<div class=category-section>
<h2 class=category-title>Protein Sources</h2>
<div class=form-grid>
<div class=form-group>
<label>Meat Packages🍖🥩🥓</label>
<input type=number class=form-control id=meat min=0 step=1>
</div>
<div class=form-group>
<label>Fish Packages 🐟🐠🦈</label>
<input type=number class=form-control id=fish min=0 step=1>
</div>
<div class=form-group>
<label>Eggs (Cartons) 🥚🍳</label>
<input type=number class=form-control id=eggs min=0 step=1>
</div>
<div class=form-group>
<label>Plant-Based Proteins 🍖</label>
<input type=number class=form-control id=plantProtein min=0 step=1>
</div>
</div>
</div>
<div class=category-section>
<h2 class=category-title>Takeout & Restaurant🍔🍗🍤🍡🍢</h2>
<div class=form-grid>
<div class=form-group>
<label>Fast Food Meals🥡🍔</label>
<input type=number class=form-control id=fastFood min=0 step=1>
</div>
<div class=form-group>
<label>Restaurant Takeout 🏫</label>
<input type=number class=form-control id=takeout min=0 step=1>
</div>
<div class=form-group>
<label>Food Delivery🛵🏍️</label>
<input type=number class=form-control id=delivery min=0 step=1>
</div>
<div class=form-group>
<label>Coffee Shop Visits☕</label>
<input type=number class=form-control id=coffeeShop min=0 step=1>
</div>
</div>
</div>
<button type=submit class=btn>Analyze Consumption & Environmental Impact🏞️</button>
</form>
<div class=results id=results style=display:none>
<h2>Detailed Analysis Results📊📈📉</h2>
<div class=chart-container>
<canvas id=wasteChart></canvas>
</div>
<div class=stats-grid id=statistics></div>
</div>
<div class=recommendations id=recommendations style=display:none>
<h2>Personalized Recommendations🙂</h2>
<div id=recommendationText></div>
</div>
</div>
<script src=https://cdn.jsdelivr.net/npm/chart.js></script>
<script>const API_KEY="AIzaSyCAfOKX7SVDpMJCuVvE-JrsGssvPknJZg8",API_ENDPOINT="https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash-latest:generateContent";async function analyzeConsumption(e){try{const a=await fetch(`${API_ENDPOINT}?key=${API_KEY}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({contents:[{parts:[{text:`Analyze this detailed food consumption data and provide specific recommendations for reducing waste: ${JSON.stringify(e)}`}]}]})});return await a.json()}catch(e){return console.error("Error calling Gemini API:",e),null}}function calculateDetailedWaste(e){const a={recyclable:{plastic:0,glass:0,paper:0,metal:0},nonRecyclable:0,biodegradable:0,packaging:0};return a.recyclable.plastic+=30*e.water+25*e.softDrinks,a.recyclable.metal+=15*e.softDrinks,a.recyclable.paper+=20*e.juiceBoxes+30*e.milkCartons,a.biodegradable+=100*e.freshFruits+100*e.freshVegetables,a.recyclable.plastic+=15*e.packagedSalads+5*e.herbs,a.recyclable.metal+=50*e.cannedFoods,a.nonRecyclable+=20*e.snacks+40*e.frozenMeals,a.packaging+=15*e.instantNoodles,a.recyclable.paper+=30*e.rice+20*e.pasta+40*e.cereal,a.recyclable.plastic+=10*e.bread,a.recyclable.plastic+=30*e.meat+25*e.fish,a.recyclable.paper+=40*e.eggs,a.packaging+=20*e.plantProtein,a.nonRecyclable+=100*e.fastFood+80*e.takeout+90*e.delivery,a.recyclable.paper+=15*e.coffeeShop,a}function updateDetailedChart(e){const a=document.getElementById("wasteChart").getContext("2d");new Chart(a,{type:"bar",data:{labels:["Plastic","Glass","Paper","Metal","Non-Recyclable","Biodegradable","Packaging"],datasets:[{label:"Waste in grams",data:[e.recyclable.plastic,e.recyclable.glass,e.recyclable.paper,e.recyclable.metal,e.nonRecyclable,e.biodegradable,e.packaging],backgroundColor:["rgba(46, 204, 113, 0.6)","rgba(52, 152, 219, 0.6)","rgba(155, 89, 182, 0.6)","rgba(241, 196, 15, 0.6)","rgba(231, 76, 60, 0.6)","rgba(26, 188, 156, 0.6)","rgba(230, 126, 34, 0.6)"],borderColor:["rgba(46, 204, 113, 1)","rgba(52, 152, 219, 1)","rgba(155, 89, 182, 1)","rgba(241, 196, 15, 1)","rgba(231, 76, 60, 1)","rgba(26, 188, 156, 1)","rgba(230, 126, 34, 1)"],borderWidth:1}]},options:{responsive:!0,scales:{y:{beginAtZero:!0,title:{display:!0,text:"Waste (grams)"}}}}})}document.getElementById("consumptionForm").addEventListener("submit",(async e=>{e.preventDefault();const a={};e.target.querySelectorAll("input, select").forEach((e=>{a[e.id]="number"===e.type?parseFloat(e.value)||0:e.value}));const t=calculateDetailedWaste(a);document.getElementById("results").style.display="block",document.getElementById("recommendations").style.display="block",updateDetailedChart(t);const l=Object.values(t.recyclable).reduce(((e,a)=>e+a),0)+t.nonRecyclable+t.biodegradable+t.packaging,c=(Object.values(t.recyclable).reduce(((e,a)=>e+a),0)/l*100).toFixed(1);document.getElementById("statistics").innerHTML=`\n                <div class="stat-card">\n                    <h3>Total Waste</h3>\n                    <div class="stat-value">${l.toFixed(0)}g</div>\n                </div>\n                <div class="stat-card">\n                    <h3>Recycling Rate</h3>\n                    <div class="stat-value">${c}%</div>\n                </div>\n                <div class="stat-card">\n                    <h3>Eco Score</h3>\n                    <div class="stat-value">${(100-t.nonRecyclable/l*100).toFixed(1)}%</div>\n                </div>\n            `;const n=await analyzeConsumption(a);n&&n.candidates&&n.candidates[0]&&(document.getElementById("recommendationText").innerHTML=`<p>${n.candidates[0].content.parts[0].text}</p>`)}))</script>
<div id=dataLifeApp class=app-container>
<div class=feedback-box>
<h3>Additional Information 🤔</h3>
<textarea id=userNotes placeholder="Share additional details about your consumption habits..." class=feedback-input></textarea>
</div>
<div class=analysis-box>
<h3>Consumption Analysis 📊📈📉</h3>
<div class=chart-options>
<select id=chartSelector class=chart-select>
<option value=bar>Bar Chart 📊</option>
<option value=pie>Pie Chart🟢🔴🟠 </option>
<option value=line>Line Chart📈📉</option>
<option value=doughnut>Doughnut Chart</option>
</select>
<select id=timeRange class=time-select>
<option value=daily>Daily View</option>
<option value=weekly>Weekly View</option>
<option value=monthly>Monthly View</option>
</select>
<button onclick=updateChart() class=update-btn>Update Chart</button>
</div>
<div class=chart-container>
<canvas id=mainChart></canvas>
</div>
</div>
<div class=export-box>
<button onclick=printData() class=print-btn>
<span class=icon>🖨️</span> Print
</button>
</div>
<div class=eco-footer>
<div class=storage-controls>
<div class="btn-group primary-actions">
<button id=saveReport class="eco-btn save-btn">
<i class="fas fa-leaf"></i> Save Report
</button>
<button id=exportExcel class="eco-btn export-btn">
<i class="fas fa-file-excel"></i> Export to Excel
</button>
</div>
<div class="btn-group secondary-actions">
<button id=showHistory class="eco-btn history-btn">
<i class="fas fa-history"></i> View History
</button>
<button id=clearStorage class="eco-btn clear-btn">
<i class="fas fa-trash"></i> Clear Storage
</button>
</div>
</div>
<div id=reportsList class="reports-container hidden"></div>
</div>
<style>.eco-footer{background:linear-gradient(145deg,#e8f5e9 0,#c8e6c9 50%,#b9f6ca 100%);padding:25px;border-radius:15px;margin:25px 0;box-shadow:0 6px 12px rgba(0,0,0,.1)}.storage-controls{display:flex;flex-direction:column;gap:20px}.btn-group{display:flex;gap:15px;justify-content:center}.eco-btn{padding:14px 28px;border:none;border-radius:30px;cursor:pointer;font-size:16px;font-weight:600;transition:all .3s ease;display:flex;align-items:center;gap:10px;box-shadow:0 4px 6px rgba(0,0,0,.1)}.eco-btn:hover{transform:translateY(-3px);box-shadow:0 6px 12px rgba(0,0,0,.2)}.eco-btn:active{transform:translateY(1px)}.save-btn{background:linear-gradient(135deg,#2196f3 0,#1976d2 100%);color:#fff}.export-btn{background:linear-gradient(135deg,#4caf50 0,#388e3c 100%);color:#fff}.history-btn{background:linear-gradient(135deg,#9c27b0 0,#7b1fa2 100%);color:#fff}.clear-btn{background:linear-gradient(135deg,#f44336 0,#d32f2f 100%);color:#fff}.reports-container{display:grid;gap:15px;max-height:400px;overflow-y:auto;padding:15px;background:rgba(255,255,255,.9);border-radius:10px;margin-top:20px}.reports-container::-webkit-scrollbar{width:8px}.reports-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.reports-container::-webkit-scrollbar-thumb{background:#4caf50;border-radius:4px}.report-item{background:#fff;padding:18px;border-radius:12px;cursor:pointer;transition:all .3s ease;border-left:5px solid #4caf50;display:flex;justify-content:space-between;align-items:center}.report-item:hover{transform:translateX(5px);background:#f8f9fa}.hidden{display:none}.eco-badge{background:#e8f5e9;color:#2e7d32;padding:4px 8px;border-radius:12px;font-size:12px}@media (max-width:768px){.btn-group{flex-direction:column}.eco-btn{width:100%;justify-content:center}}</style>
<script>document.addEventListener("DOMContentLoaded",(function(){const e=document.getElementById("saveReport"),t=document.getElementById("exportExcel"),n=document.getElementById("showHistory"),o=document.getElementById("clearStorage"),s=document.getElementById("reportsList");function c(){const e={};return document.querySelectorAll("input, select").forEach((t=>{t.id&&(e[t.id]=t.value)})),e}function i(e,t){const n=document.createElement("div");n.className=`notification ${t}`,n.style.cssText=`\n            position: fixed;\n            top: 20px;\n            right: 20px;\n            padding: 15px 25px;\n            border-radius: 8px;\n            color: white;\n            background: ${"success"===t?"#4caf50":"#f44336"};\n            box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n            z-index: 1000;\n            transition: all 0.3s ease;\n        `,n.textContent=e,document.body.appendChild(n),setTimeout((()=>{n.style.opacity="0",setTimeout((()=>{document.body.removeChild(n)}),300)}),3e3)}e.addEventListener("click",(function(){const e={timestamp:(new Date).toLocaleString(),data:c()};let t=JSON.parse(localStorage.getItem("ecoReports")||"[]");t.push(e),localStorage.setItem("ecoReports",JSON.stringify(t)),i("Report saved successfully!","success")})),t.addEventListener("click",(function(){const e=JSON.parse(localStorage.getItem("ecoReports")||"[]");if(0===e.length)return void i("No reports to export!","error");let t="Timestamp,";const n=Object.keys(e[0].data);t+=n.join(",")+"\n",e.forEach((e=>{t+=`"${e.timestamp}",`,n.forEach((n=>{t+=`"${e.data[n]||""}",`})),t+="\n"}));const o=new Blob([t],{type:"text/csv"}),s=window.URL.createObjectURL(o),c=document.createElement("a");c.setAttribute("hidden",""),c.setAttribute("href",s),c.setAttribute("download","eco_reports.csv"),document.body.appendChild(c),c.click(),document.body.removeChild(c),i("Reports exported successfully!","success")})),n.addEventListener("click",(function(){s.classList.toggle("hidden"),s.classList.contains("hidden")||function(){const e=JSON.parse(localStorage.getItem("ecoReports")||"[]");s.innerHTML="",e.forEach(((e,t)=>{const n=document.createElement("div");n.className="report-item",n.innerHTML=`\n                <span>Eco Report - ${e.timestamp}</span>\n                <span class="eco-badge">Click to view details</span>\n            `,n.onclick=()=>function(e){const t=window.open("","Report Details","width=800,height=600");let n="\n            <style>\n                body { font-family: Arial, sans-serif; padding: 20px; }\n                .detail-item { margin: 10px 0; padding: 10px; background: #f8f9fa; border-radius: 5px; }\n                h2 { color: #2e7d32; }\n            </style>\n            <h2>Eco Report Details</h2>\n        ";for(let t in e)n+=`<div class="detail-item"><strong>${t}:</strong> ${e[t]}</div>`;t.document.body.innerHTML=n}(e.data),s.appendChild(n)}))}()})),o.addEventListener("click",(function(){confirm("Are you sure you want to delete all saved reports? This action cannot be undone.")&&(localStorage.removeItem("ecoReports"),s.innerHTML="",i("All reports cleared successfully!","success"))}))}))</script>
<style>:root{--primary-color:#2ecc71;--secondary-color:#27ae60;--background-color:#f0f8f1;--text-color:#2c3e50;--shadow:0 2px 10px rgba(0,0,0,0.1)}.app-container{max-width:1200px;margin:20px auto;padding:20px;background:#fff;border-radius:12px;box-shadow:var(--shadow)}.analysis-box,.contact-box,.export-box,.feedback-box{margin:20px 0;padding:15px;border-radius:8px;background:#fff}.feedback-input{width:100%;min-height:100px;padding:12px;border:2px solid var(--primary-color);border-radius:6px;resize:vertical}.chart-options{display:flex;gap:10px;margin-bottom:15px}.chart-select,.time-select{padding:8px;border:1px solid var(--primary-color);border-radius:4px}.export-btn,.print-btn,.share-btn,.update-btn{padding:8px 16px;border:none;border-radius:4px;background:var(--primary-color);color:#fff;cursor:pointer;transition:background .3s}.export-btn:hover,.print-btn:hover,.share-btn:hover,.update-btn:hover{background:var(--secondary-color)}.chart-container{height:400px;position:relative}.contact-link{display:inline-block;padding:10px 20px;background:var(--primary-color);color:#fff;text-decoration:none;border-radius:4px}.menu-button{position:fixed;top:20px;right:20px;width:40px;height:40px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:var(--shadow);z-index:1000}.menu-icon{position:relative;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:2px;background:var(--primary-color)}.menu-icon::after,.menu-icon::before{content:'';position:absolute;width:20px;height:2px;background:var(--primary-color);transition:.3s}.menu-icon::before{top:-6px}.menu-icon::after{top:6px}.side-menu{position:fixed;top:0;right:-300px;width:300px;height:100%;background:#fff;box-shadow:var(--shadow);transition:.3s;z-index:999}.side-menu.active{right:0}.menu-header{padding:20px;background:var(--primary-color);color:#fff}.menu-items{list-style:none;padding:0;margin:0}.menu-items li a{display:block;padding:15px 20px;color:var(--text-color);text-decoration:none;transition:.3s}.menu-items li a:hover{background:var(--background-color)}@media (max-width:768px){.chart-options{flex-direction:column}.side-menu{width:100%;right:-100%}}</style>
<script src=https://cdn.jsdelivr.net/npm/chart.js></script>
<script>let chart=null;function createChart(t){const e=document.getElementById("mainChart").getContext("2d");chart&&chart.destroy();chart=new Chart(e,{type:t,data:{labels:["Category 1","Category 2","Category 3","Category 4"],datasets:[{label:"Consumption Data",data:[12,19,3,5],backgroundColor:["rgba(46, 204, 113, 0.2)","rgba(52, 152, 219, 0.2)","rgba(155, 89, 182, 0.2)","rgba(52, 73, 94, 0.2)"],borderColor:["rgba(46, 204, 113, 1)","rgba(52, 152, 219, 1)","rgba(155, 89, 182, 1)","rgba(52, 73, 94, 1)"],borderWidth:1}]},options:{responsive:!0,maintainAspectRatio:!1}})}function updateChart(){createChart(document.getElementById("chartSelector").value)}function exportPDF(){document.getElementById("mainChart"),document.getElementById("userNotes").value;console.log("Exporting PDF..."),alert("PDF export initiated")}function shareData(){navigator.share?navigator.share({title:"My DataLife Analysis",text:"Check out my consumption analysis!",url:window.location.href}).catch(console.error):alert("Sharing is not supported on this device")}function printData(){window.print()}document.getElementById("menuToggle").addEventListener("click",(function(){document.getElementById("sideMenu").classList.toggle("active")})),document.addEventListener("DOMContentLoaded",(function(){createChart("bar")}))</script>
<style>#eco-footer-box{margin:2rem auto;padding:1rem;max-width:800px;background:linear-gradient(135deg,rgba(230,247,233,.9),rgba(200,230,201,.9));border-radius:12px;box-shadow:0 2px 4px rgba(0,0,0,.1)}#eco-message-container{background:rgba(255,255,255,.95);padding:1.5rem;border-radius:8px;margin-bottom:1rem;text-align:center}#eco-quote{color:#2e7d32;font-size:1.1rem;margin-bottom:.5rem;line-height:1.4}#eco-emoji{font-size:2rem;margin:.5rem 0;display:inline-block}.eco-gradient-line{height:4px;background:linear-gradient(90deg,#4caf50,#81c784,#4caf50);border-radius:2px;margin:1rem auto;width:80%}@media (max-width:600px){#eco-footer-box{margin:1rem}}</style>
<div id=eco-footer-box>
<div id=eco-message-container>
<span id=eco-emoji>🌍</span>
<p id=eco-quote></p>
</div>
<div class=eco-gradient-line></div>
</div>
<script>const ecoEmojis=["🌍","🌱","🌿","🌲","🌺","🦋","🐝","♻️"],ecoMessages=["Hey friend! Small changes today = bigger Earth smiles tomorrow! 🌟","Think of Earth as your home - keep it clean and green! ✨","Every eco-friendly choice you make helps our planet thrive! 🌱","Be the change our Earth needs - one sustainable step at a time! 💚","Together we can make our planet's future brighter! 🌟","Your eco-friendly choices matter more than you know! 🌿","Save water, save life - every drop counts! 💧","Reduce, Reuse, Recycle - Earth's favorite dance moves! 💃","Small acts of green add up to big changes! ✨","Thank you for being a friend to our Earth! 🤗"];function updateEcoMessage(){const e=ecoEmojis[Math.floor(Math.random()*ecoEmojis.length)],o=ecoMessages[Math.floor(Math.random()*ecoMessages.length)];document.getElementById("eco-emoji").textContent=e,document.getElementById("eco-quote").textContent=o}updateEcoMessage(),setInterval(updateEcoMessage,432e5)</script>
<footer class=modern-footer>
<style>@import url(https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Raleway: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:Raleway,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:1.8;animation:fadeIn 1s ease-out}.developer-name{font-family:Cinzel,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;font-style:italic;letter-spacing:1px;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>All intellectual and material rights of this work are reserved for the developer</div>
<div class=developer-name>Thank you, Reza Salehi (Albert)</div>
<div class=title>AI Platforms & Data Developer</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>
</div></body>