<!doctype html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>Advanced Dynamic Header</title>
<style>.header-container{position:relative;width:100%;height:60vh;min-height:300px;overflow:hidden;background:#1a2a3a}.header-image{width:100%;height:100%;object-fit:cover;transition:transform 20s ease-in-out;will-change:transform;transform:scale(1)}.header-image:hover{transform:scale(1.1)}.loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:none}.spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-top:4px solid #fff;border-radius:50%;animation:spin 1s linear infinite}.header-controls{position:absolute;bottom:20px;right:20px;display:flex;gap:10px;z-index:10}.control-btn{background:rgba(255,255,255,.2);border:none;padding:10px;border-radius:50%;cursor:pointer;transition:all .3s ease;backdrop-filter:blur(5px)}.control-btn:hover{background:rgba(255,255,255,.4)}.control-btn svg{width:20px;height:20px;fill:white}.image-cache{display:none}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@media (max-width:768px){.header-container{height:40vh}.header-controls{bottom:10px;right:10px}}.shimmer{background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 100%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}</style>
</head>
<body>
<div class=header-container>
<img id=headerImage class=header-image alt="" loading=lazy decoding=async>
<div id=loading class=loading>
<div class=spinner></div>
</div>
<div class=header-controls>
<button class=control-btn id=refreshBtn title="Generate new image">
<svg viewBox="0 0 24 24">
<path d="M17.65 6.35A7.958 7.958 0 0012 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0112 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
</svg>
</button>
<button class=control-btn id=downloadBtn title="Download image">
<svg viewBox="0 0 24 24">
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
</svg>
</button>
</div>
</div>
<div id=imageCache class=image-cache></div>
<script>const API_URL="https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-xl-base-1.0",API_KEY="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",fallbackImages=["https://source.unsplash.com/random/1920x1080/?netherlands,windmills","https://source.unsplash.com/random/1920x1080/?amsterdam,sustainable","https://source.unsplash.com/random/1920x1080/?rotterdam,modern"],prompts=["beautiful Netherlands countryside with windmills, photorealistic, high resolution, 8k","modern Dutch city with sustainable architecture, professional photography, high detail","Rotterdam modern eco architecture, cinematic view, high quality","Dutch sustainable energy farms, aerial view, dramatic lighting","Amsterdam canals with electric boats, golden hour, perfect composition","Netherlands modern greenhouses, futuristic agriculture, high-end photography"],imageCache=new Map,maxCacheSize=5;function getRandomElement(e){return e[Math.floor(Math.random()*e.length)]}function useFallbackImage(){const e=getRandomElement(fallbackImages);document.getElementById("headerImage").src=e,document.getElementById("loading").style.display="none"}async function preloadImage(e){return new Promise(((t,a)=>{const n=new Image;n.onload=()=>t(n),n.onerror=a,n.src=e}))}async function generateImage(){const e=document.getElementById("headerImage"),t=document.getElementById("loading");t.style.display="flex",e.classList.add("shimmer");try{const a=await fetch(API_URL,{method:"POST",headers:{Authorization:`Bearer ${API_KEY}`,"Content-Type":"application/json"},body:JSON.stringify({inputs:getRandomElement(prompts),parameters:{seed:Math.floor(1e6*Math.random()),num_inference_steps:30,guidance_scale:7.5,width:1024,height:576}})});if(!a.ok)throw new Error("API response error");const n=await a.blob(),o=URL.createObjectURL(n);if(await preloadImage(o),imageCache.size>=5){const e=imageCache.keys().next().value;URL.revokeObjectURL(imageCache.get(e)),imageCache.delete(e)}imageCache.set(Date.now(),o),e.onload=()=>{t.style.display="none",e.classList.remove("shimmer")},e.src=o}catch(e){console.error("Error:",e),useFallbackImage()}}function downloadCurrentImage(){const e=document.createElement("a");e.href=document.getElementById("headerImage").src,e.download="netherlands-landscape.jpg",e.click()}document.getElementById("refreshBtn").addEventListener("click",generateImage),document.getElementById("downloadBtn").addEventListener("click",downloadCurrentImage),generateImage(),setInterval(generateImage,36e5),document.getElementById("headerImage").onerror=useFallbackImage,window.addEventListener("unload",(()=>{imageCache.forEach((e=>URL.revokeObjectURL(e)))}))</script>
</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=#><i class="fas fa-leaf"></i>Track Consumption</a></li>
<li><a href=#><i class="fas fa-seedling"></i>Environmental Impact</a></li>
<li><a href=#><i class="fas fa-chart-pie"></i>Statistics</a></li>
<li><a href=#><i class="fas fa-history"></i>History</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("dark")'>Dark🌑</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=exportPDF() class=export-btn>
<span class=icon>📄</span> Export PDF
</button>
<button onclick=shareData() class=share-btn>
<span class=icon>📤</span> Share
</button>
<button onclick=printData() class=print-btn>
<span class=icon>🖨️</span> Print
</button>
</div>
<div class=contact-box>
<a href=mailto:queenaicpu@gmail.com class=contact-link>
Contact Developer Albert 📧
</a>
</div>
</div>
<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>
<!doctype html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<style>body.locked{overflow:hidden}.auth-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(145deg,#1a1a1a,#2d2d2d);display:flex;justify-content:center;align-items:center;z-index:9999;backdrop-filter:blur(10px)}.auth-container{background:linear-gradient(145deg,#fff,#f0f0f0);padding:35px;border-radius:20px;max-width:450px;width:90%;box-shadow:0 15px 35px rgba(0,0,0,.3)}.captcha-container{margin:25px 0;padding:25px;background:linear-gradient(145deg,#e6e6e6,#fff);border-radius:15px;text-align:center;font-size:32px;letter-spacing:8px;font-family:'Courier New',monospace;font-weight:700;color:#333;text-shadow:2px 2px 2px rgba(0,0,0,.1);user-select:none;box-shadow:inset 0 2px 5px rgba(0,0,0,.1)}.storage-panel{position:fixed;bottom:30px;right:30px;background:rgba(255,255,255,.95);padding:20px;border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,.15);z-index:100}.storage-controls{display:flex;gap:15px}.stored-data{max-height:200px;overflow-y:auto;margin-bottom:15px;padding:10px;background:#f5f5f5;border-radius:8px}.data-item{padding:10px;margin:5px 0;background:#fff;border-radius:6px;box-shadow:0 2px 4px rgba(0,0,0,.05)}.btn{padding:12px 25px;border:none;border-radius:10px;cursor:pointer;font-weight:700;font-size:16px;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.btn-save{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff}.btn-clear{background:linear-gradient(135deg,#f44,#c00);color:#fff}.btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,.2)}.input-field{width:100%;padding:15px;margin:15px 0;border:2px solid #ddd;border-radius:10px;font-size:18px;transition:all .3s ease;background:#fff}.input-field:focus{border-color:#4caf50;outline:0;box-shadow:0 0 10px rgba(76,175,80,.2)}.notification{position:fixed;top:20px;right:20px;padding:15px 25px;border-radius:10px;color:#fff;font-weight:700;transform:translateX(150%);transition:transform .3s ease;z-index:10000}.notification.show{transform:translateX(0)}</style>
</head>
<body class=locked>
<div id=auth-overlay class=auth-overlay>
<div class=auth-container>
<h2 style=text-align:center;color:#333>Security Verification</h2>
<div class=captcha-container id=captcha-display></div>
<input id=captcha-input class=input-field placeholder="Enter verification code" autocomplete=off>
<button class="btn btn-save" style=width:100% id=verify-button>
Verify Access
</button>
</div>
</div>
<div id=storage-panel class=storage-panel style=display:none>
<div id=stored-data class=stored-data></div>
<div class=storage-controls>
<button class="btn btn-save" id=save-button>
Save Report 💾
</button>
<button class="btn btn-clear" id=clear-button>
Clear Data 🗑️
</button>
</div>
</div>
<div id=notification class=notification></div>
<script>class SecureStorage{constructor(){this.captchaCode="",this.attempts=0,this.maxAttempts=5,this.storageKey="ecoTracker_reports",this.init()}init(){document.body.classList.add("locked"),this.generateCaptcha(),this.setupEventListeners(),this.updateStoredDataDisplay()}generateCaptcha(){const t="23456789ABCDEFGHJKLMNPQRSTUVWXYZ";this.captchaCode=Array(6).fill(0).map((()=>t.charAt(Math.floor(Math.random()*t.length)))).join(""),document.getElementById("captcha-display").textContent=this.captchaCode}setupEventListeners(){document.getElementById("verify-button").addEventListener("click",(()=>this.verifyAccess())),document.getElementById("captcha-input").addEventListener("keypress",(t=>{"Enter"===t.key&&this.verifyAccess()})),document.getElementById("save-button").addEventListener("click",(()=>this.saveReport())),document.getElementById("clear-button").addEventListener("click",(()=>this.clearStorage()))}verifyAccess(){document.getElementById("captcha-input").value.trim().toUpperCase()===this.captchaCode?(document.body.classList.remove("locked"),document.getElementById("auth-overlay").style.display="none",document.getElementById("storage-panel").style.display="block",this.showNotification("Access granted","success")):(this.attempts++,this.generateCaptcha(),document.getElementById("captcha-input").value="",this.attempts>=this.maxAttempts?(this.showNotification("Too many failed attempts. Page will reload.","error"),setTimeout((()=>location.reload()),2e3)):this.showNotification("Invalid code. Try again.","error"))}saveReport(){const t={id:Date.now(),timestamp:(new Date).toLocaleString("en-US",{dateStyle:"full",timeStyle:"long"}),content:document.querySelector("main")?.innerHTML||"No content available",metadata:{savedAt:(new Date).toISOString(),browser:navigator.userAgent}};try{const e=JSON.parse(localStorage.getItem(this.storageKey)||"[]");e.push(t),localStorage.setItem(this.storageKey,JSON.stringify(e)),this.updateStoredDataDisplay(),this.showNotification("Report saved successfully","success")}catch(t){this.showNotification("Failed to save report","error"),console.error("Storage error:",t)}}clearStorage(){if(confirm("⚠️ Warning: This will delete all saved reports.\nThis action cannot be undone.\n\nProceed?"))try{localStorage.removeItem(this.storageKey),this.updateStoredDataDisplay(),this.showNotification("All data cleared successfully","success")}catch(t){this.showNotification("Failed to clear data","error"),console.error("Clear error:",t)}}updateStoredDataDisplay(){const t=document.getElementById("stored-data"),e=JSON.parse(localStorage.getItem(this.storageKey)||"[]");0!==e.length?t.innerHTML=e.map((t=>`\n            <div class="data-item">\n                <strong>Saved:</strong> ${new Date(t.id).toLocaleString()}<br>\n                <small style="color: #666;">ID: ${t.id}</small>\n            </div>\n        `)).join(""):t.innerHTML='<p style="text-align: center; color: #666;">No saved reports</p>'}showNotification(t,e){const a=document.getElementById("notification");a.textContent=t,a.style.background="success"===e?"#4CAF50":"#ff4444",a.classList.add("show"),setTimeout((()=>{a.classList.remove("show")}),3e3)}}document.addEventListener("DOMContentLoaded",(()=>new SecureStorage))</script>
</body>
</html></body>