<!doctype html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>DataLife - Environmental Coach</title>
<style>:root{--primary-gradient:linear-gradient(45deg, #2ecc71, #27ae60);--secondary-gradient:linear-gradient(45deg, #3498db, #2980b9);--dark-gradient:linear-gradient(45deg, #2c3e50, #34495e);--vintage-gradient:linear-gradient(45deg, #d4a373, #ccd5ae);--text-light:#2c3e50;--text-dark:#ecf0f1;--shadow:0 4px 12px rgba(0,0,0,0.15)}.light-theme{--bg-primary:#ffffff;--bg-secondary:#f5f6fa;--text-color:var(--text-light)}.dark-theme{--bg-primary:#1a1a1a;--bg-secondary:#2c3e50;--text-color:var(--text-dark)}.vintage-theme{--bg-primary:#fefae0;--bg-secondary:#faedcd;--text-color:#5c4033}*{margin:0;padding:0;box-sizing:border-box;transition:all .3s ease}body{font-family:'Segoe UI',sans-serif;background:var(--bg-primary);color:var(--text-color)}.menu-sidebar{position:fixed;top:0;left:-380px;width:380px;height:100vh;background:var(--bg-primary);box-shadow:var(--shadow);z-index:1000;transition:.4s ease-out;padding:2rem}.menu-sidebar.active{left:0}.menu-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem}.menu-close{font-size:1.5rem;background:0 0;border:none;cursor:pointer}.menu-section{margin-bottom:2rem}.menu-section h3{font-size:1.2rem;margin-bottom:1rem;color:var(--text-color)}.menu-item{display:flex;align-items:center;padding:1rem;margin:.5rem 0;border-radius:8px;cursor:pointer;transition:.3s}.menu-item:hover{background:var(--bg-secondary)}.menu-item i{margin-right:1rem}.theme-options{display:flex;gap:1rem;margin-top:1rem}.theme-option{width:40px;height:40px;border-radius:50%;cursor:pointer;border:2px solid transparent}.theme-option.active{border-color:#2ecc71}.theme-light{background:#fff;border:1px solid #ddd}.theme-dark{background:#2c3e50}.theme-vintage{background:#fefae0}.chat-container{max-width:1200px;margin:2rem auto;padding:0 1rem}.chat-header{background:var(--primary-gradient);padding:1.5rem;border-radius:12px;margin-bottom:2rem;display:flex;justify-content:space-between;align-items:center}.message-area{height:70vh;overflow-y:auto;padding:1rem;background:var(--bg-secondary);border-radius:12px;box-shadow:var(--shadow)}.message{max-width:80%;margin:1rem;padding:1rem;border-radius:12px;animation:messageAppear .3s ease}@keyframes messageAppear{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.user-message{background:var(--primary-gradient);color:#fff;margin-left:auto}.coach-message{background:var(--bg-primary);border-left:4px solid #2ecc71}.message-input-container{margin-top:1rem;display:flex;gap:1rem}.message-input{flex:1;padding:1rem;border:2px solid transparent;border-radius:12px;background:var(--bg-secondary);color:var(--text-color);resize:none;min-height:60px;font-size:1rem}.message-input:focus{border-color:#2ecc71;outline:0}.send-button{padding:0 2rem;background:var(--primary-gradient);color:#fff;border:none;border-radius:12px;cursor:pointer;font-weight:700}.typing-indicator{padding:1rem;display:none}.typing-indicator span{display:inline-block;width:8px;height:8px;background:#2ecc71;border-radius:50%;margin-right:5px;animation:typing 1s infinite}@keyframes typing{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}</style>
</head>
<body class=light-theme>
<div class=menu-sidebar>
<div class=menu-header>
<h2>🌿DataLife Menu🇳🇱</h2>
<button class=menu-close>×</button>
</div>
<div class=menu-section>
<h3>Chat Options</h3>
<div class=menu-item id=newChat>
<i>🔄</i> New Chat
</div>
<div class=menu-item id=clearHistory>
<i>🗑️</i> Clear History
</div>
</div>
<div class=menu-section>
<h3>Themes</h3>
<div class=theme-options>
<div class="theme-option theme-light active" data-theme=light></div>
<div class="theme-option theme-dark" data-theme=dark></div>
<div class="theme-option theme-vintage" data-theme=vintage></div>
</div>
</div>
<div class=menu-section>
<h3>Quick Topics</h3>
<div class="menu-item suggested-question">
<i>🌱</i> How to start composting?
</div>
<div class="menu-item suggested-question">
<i>♻️</i> Best recycling practices
</div>
<div class="menu-item suggested-question">
<i>🏭</i> Reducing industrial waste
</div>
</div>
<div class=menu-section>
<h3>Contact</h3>
<div class=menu-item onclick='window.location.href="mailto:queenaicpu@gmail.com"'>
<i>📧</i> Contact Albert
</div>
</div>
</div>
<div class=chat-container>
<div class=chat-header>
<button class=menu-button>☰</button>
<h1>DataLife Environmental Coach🚮☘️😉</h1>
<span class=status>Online💡🌳</span>
</div>
<div class=message-area></div>
<div class=typing-indicator>
<span></span><span></span><span></span>
</div>
<div class=message-input-container>
<textarea class=message-input placeholder="Ask about environmental solutions..."></textarea>
<button class=send-button>Send</button>
</div>
</div>
<script>const PALM_API_KEY="AIzaSyCAfOKX7SVDpMJCuVvE-JrsGssvPknJZg8",PALM_ENDPOINT="https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash-latest:generateContent";let chatHistory=[],isTyping=!1;const menuButton=document.querySelector(".menu-button"),menuSidebar=document.querySelector(".menu-sidebar"),menuClose=document.querySelector(".menu-close"),messageArea=document.querySelector(".message-area"),messageInput=document.querySelector(".message-input"),sendButton=document.querySelector(".send-button"),themeOptions=document.querySelectorAll(".theme-option"),typingIndicator=document.querySelector(".typing-indicator");async function sendMessage(e){if(e.trim()&&!isTyping){addMessage(e,"user"),showTypingIndicator();try{const t=await fetchPalmResponse(e);hideTypingIndicator(),addMessage(t,"coach"),chatHistory.push({role:"user",content:e},{role:"coach",content:t})}catch(e){console.error("Error:",e),hideTypingIndicator(),addMessage("I apologize, but I'm having trouble connecting right now. Please try again.","coach")}}}async function fetchPalmResponse(e){const t=await fetch(`${PALM_ENDPOINT}?key=${PALM_API_KEY}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({contents:[{parts:[{text:e}]}]})});return(await t.json()).candidates[0].content.parts[0].text}function addMessage(e,t){const n=document.createElement("div");n.classList.add("message",`${t}-message`),n.textContent=e,messageArea.appendChild(n),messageArea.scrollTop=messageArea.scrollHeight}function showTypingIndicator(){isTyping=!0,typingIndicator.style.display="block"}function hideTypingIndicator(){isTyping=!1,typingIndicator.style.display="none"}menuButton.addEventListener("click",(()=>menuSidebar.classList.add("active"))),menuClose.addEventListener("click",(()=>menuSidebar.classList.remove("active"))),themeOptions.forEach((e=>{e.addEventListener("click",(()=>{const t=e.dataset.theme;document.body.className=`${t}-theme`,themeOptions.forEach((e=>e.classList.remove("active"))),e.classList.add("active")}))})),sendButton.addEventListener("click",(()=>{const e=messageInput.value.trim();e&&(sendMessage(e),messageInput.value="")})),messageInput.addEventListener("keypress",(e=>{if("Enter"===e.key&&!e.shiftKey){e.preventDefault();const t=messageInput.value.trim();t&&(sendMessage(t),messageInput.value="")}})),addMessage("☺️Hello! I'm your environmental coach. Let's work together to create sustainable solutions for a better planet. How can I help you today⁉️♻️","coach"),document.getElementById("clearHistory").addEventListener("click",(()=>{chatHistory=[],messageArea.innerHTML="",addMessage("Chat history cleared. How can I help you today?","coach")})),document.getElementById("newChat").addEventListener("click",(()=>{chatHistory=[],messageArea.innerHTML="",addMessage("Starting a new chat. What environmental topic would you like to discuss?","coach")})),document.querySelectorAll(".suggested-question").forEach((e=>{e.addEventListener("click",(()=>{const t=e.textContent.trim();messageInput.value=t,menuSidebar.classList.remove("active")}))}))</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>
</body>
</html>