<!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>
</body>
</html>