<!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>