<!doctype html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>Advanced AI Interview Assistant Pro</title>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css>
<style>:root{--primary-color:#1e3c72;--secondary-color:#2a5298;--accent-color:#ff6b6b;--text-color:#333;--bg-gradient:linear-gradient(135deg, var(--primary-color), var(--secondary-color))}*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',sans-serif;transition:all .3s ease}body{background:var(--bg-gradient);min-height:100vh;padding:20px;color:var(--text-color)}.container{max-width:1400px;margin:0 auto;background:rgba(255,255,255,.98);border-radius:20px;box-shadow:0 12px 48px rgba(0,0,0,.15);backdrop-filter:blur(10px);overflow:hidden}.header{padding:25px;background:#fff;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid rgba(0,0,0,.1);position:relative}.logo{display:flex;align-items:center;gap:15px}.logo-icon{font-size:32px;color:var(--primary-color);animation:pulse 2s infinite}.logo-text{font-size:28px;font-weight:800;background:var(--bg-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.chat-container{display:grid;grid-template-columns:280px 1fr 280px;height:calc(100vh - 180px)}.sidebar{padding:20px;background:rgba(245,247,250,.95);border-right:1px solid rgba(0,0,0,.1);overflow-y:auto}.chat-area{height:100%;overflow-y:auto;padding:30px;scroll-behavior:smooth}.message{margin:15px 0;padding:20px;border-radius:15px;max-width:85%;position:relative;animation:messageSlide .5s ease}.ai{background:#f8f9fa;border-left:4px solid var(--primary-color);margin-right:auto}.user{background:var(--bg-gradient);color:#fff;margin-left:auto;border-right:4px solid var(--accent-color)}.input-area{padding:25px;display:flex;gap:15px;background:#fff;border-top:2px solid rgba(0,0,0,.1);position:relative}.input-wrapper{flex:1;position:relative}textarea{width:100%;padding:18px;border:2px solid rgba(0,0,0,.1);border-radius:12px;font-size:16px;line-height:1.5;resize:none;transition:border-color .3s ease;min-height:60px;max-height:200px}textarea:focus{outline:0;border-color:var(--primary-color);box-shadow:0 0 15px rgba(30,60,114,.1)}.send-button{padding:15px 30px;background:var(--bg-gradient);color:#fff;border:none;border-radius:12px;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:10px;transition:transform .2s ease}.send-button:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,.2)}.message-actions{margin-top:15px;display:flex;gap:15px;opacity:.8}.action-icon{cursor:pointer;padding:8px;border-radius:50%;background:rgba(255,255,255,.1);transition:all .2s ease}.action-icon:hover{background:rgba(255,255,255,.2);transform:scale(1.1)}.typing-indicator{padding:20px;display:none;align-items:center;gap:10px}.typing-dot{width:8px;height:8px;background:var(--primary-color);border-radius:50%;animation:typingAnimation 1.4s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}@keyframes messageSlide{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes typingAnimation{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}@media (max-width:1200px){.chat-container{grid-template-columns:1fr}.sidebar{display:none}}@media (max-width:768px){.container{margin:0;border-radius:0}.header{padding:15px}.logo-text{font-size:20px}.message{max-width:95%}}</style>
</head>
<body>
<div class=container>
<div class=header>
<div class=logo>
<i class="fas fa-robot logo-icon"></i>
<span class=logo-text>AI Interview Pro</span>
</div>
<div class=header-actions>
<button class=theme-toggle>
<i class="fas fa-moon"></i>
</button>
</div>
</div>
<div class=chat-container>
<aside class=sidebar>
<div class=interview-types>
<h3>Interview Types</h3>
</div>
</aside>
<main class=chat-area id=chatArea>
<div class="message ai">
<p>Welcome to AI Interview Pro! I'm your advanced interview preparation assistant. I can help you with:</p>
<ul>
<li>Job interviews across all industries</li>
<li>Visa interview preparation</li>
<li>Technical assessments</li>
<li>Behavioral questions</li>
<li>Salary negotiations</li>
</ul>
<p>What type of interview would you like to practice?</p>
</div>
</main>
<aside class=sidebar>
<div class=interview-tips>
<h3>Pro Tips</h3>
</div>
</aside>
</div>
<div class=input-area>
<div class=input-wrapper>
<textarea id=userInput placeholder="Type your message here... (Press Enter to send, Shift+Enter for new line)" rows=1></textarea>
</div>
<button class=send-button onclick=sendMessage()>
<i class="fas fa-paper-plane"></i>
<span>Send</span>
</button>
</div>
</div>
<script>const API_KEY="AIzaSyB4zYyXQGT4DHqAdJrjPZoIxys9nn-IGzg",API_ENDPOINT="https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash-latest:generateContent";let chatHistory=[],isTyping=!1;async function sendMessage(){if(isTyping)return;const e=document.getElementById("userInput"),n=e.value.trim();if(n){addMessage(n,"user"),e.value="",showTypingIndicator();try{addMessage(await fetchAIResponse(n),"ai")}catch(e){console.error("Error:",e),addMessage("I apologize, but I encountered an error. Please try again.","ai")}hideTypingIndicator()}}async function fetchAIResponse(e){const n={contents:[{parts:[{text:e}]}]};try{const e=await fetch(`${API_ENDPOINT}?key=${API_KEY}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(n)});return(await e.json()).candidates[0].content.parts[0].text}catch(e){throw new Error("Failed to fetch AI response")}}function addMessage(e,n){const t=document.createElement("div");t.classList.add("message",n),t.innerHTML=`\n                ${e}\n                <div class="message-actions">\n                    <span class="action-icon" onclick="copyToClipboard('${e}')">\n                        <i class="fas fa-copy"></i>\n                    </span>\n                    <span class="action-icon" onclick="speakText('${e}')">\n                        <i class="fas fa-volume-up"></i>\n                    </span>\n                    <span class="action-icon" onclick="shareMessage('${e}')">\n                        <i class="fas fa-share-alt"></i>\n                    </span>\n                </div>\n            `;const s=document.getElementById("chatArea");s.appendChild(t),s.scrollTop=s.scrollHeight,chatHistory.push({type:n,text:e,timestamp:(new Date).toISOString()})}function copyToClipboard(e){navigator.clipboard.writeText(e).then((()=>showToast("Copied to clipboard!"))).catch((e=>console.error("Failed to copy:",e)))}function speakText(e){const n=new SpeechSynthesisUtterance(e);window.speechSynthesis.speak(n)}function shareMessage(e){navigator.share&&navigator.share({title:"AI Interview Pro",text:e}).catch((e=>console.error("Error sharing:",e)))}function showToast(e){}function showTypingIndicator(){isTyping=!0;const e=document.createElement("div");e.classList.add("typing-indicator"),e.innerHTML='\n                <div class="typing-dot"></div>\n                <div class="typing-dot"></div>\n                <div class="typing-dot"></div>\n            ',document.getElementById("chatArea").appendChild(e)}function hideTypingIndicator(){isTyping=!1;const e=document.querySelector(".typing-indicator");e&&e.remove()}document.getElementById("userInput").addEventListener("keypress",(e=>{"Enter"!==e.key||e.shiftKey||(e.preventDefault(),sendMessage())})),document.addEventListener("DOMContentLoaded",(()=>{}))</script>
</body>
</html>