Dharun72/StackOverflow
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Stack Overflow - Where Developers Learn, Share, & Build</title>7 <style>8 /* --- RESET & BASIC VARS --- */9 :root {10 --orange: #f48024;11 --black: #232629;12 --black-700: #525960;13 --blue: #0a95ff;14 --blue-dark: #0074cc;15 --bg-body: #f8f9f9;16 --white: #ffffff;17 --border: #d6d9dc;18 --shadow: 0 1px 2px rgba(0,0,0,0.05), 0 1px 4px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.05);19 }20 21 * { box-sizing: border-box; }22 body {23 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;24 background-color: var(--bg-body);25 color: var(--black);26 margin: 0;27 display: flex;28 flex-direction: column;29 min-height: 100vh;30 }31 32 /* --- HEADER --- */33 header {34 background-color: var(--bg-body);35 border-top: 3px solid var(--orange);36 box-shadow: 0 1px 2px rgba(0,0,0,0.1);37 position: fixed;38 width: 100%;39 top: 0;40 z-index: 100;41 height: 50px;42 display: flex;43 align-items: center;44 padding: 0 20px;45 }46 47 .logo {48 font-size: 1.2rem;49 font-weight: bold;50 margin-right: 20px;51 display: flex;52 align-items: center;53 cursor: pointer;54 }55 .logo span:first-child { margin-right: 5px; } 56 /* Stack Icon Mock */57 .icon-stack { width: 25px; height: 25px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 37"><path d="M26 33v-9h4v13H0V24h4v9h22Z" fill="%23BCBBBB"/><path d="M21.5 0l-2.7 2 9.9 13.3 2.7-2L21.5 0ZM26 18.4L13.3 7.8l2.1-2.5 12.7 10.6-2.1 2.5ZM9.1 15.2l15 7 1.4-3-15-7-1.4 3Zm14 10.79l.68-2.95-16.1-3.35L7 23l16.1 2.99ZM23 30H7v-3h16v3Z" fill="%23F48024"/></svg>') no-repeat center; background-size: contain; }58 59 .search-bar {60 flex-grow: 1;61 max-width: 700px;62 position: relative;63 }64 .search-bar input {65 width: 100%;66 padding: 8px 10px 8px 35px;67 border: 1px solid #babfc4;68 border-radius: 3px;69 font-size: 13px;70 }71 .search-icon {72 position: absolute;73 left: 10px;74 top: 50%;75 transform: translateY(-50%);76 color: #888;77 }78 79 .nav-links {80 margin-left: auto;81 display: flex;82 gap: 15px;83 font-size: 13px;84 color: var(--black-700);85 }86 .nav-btn {87 padding: 8px 12px;88 border-radius: 3px;89 cursor: pointer;90 }91 .nav-btn.primary { background-color: #e1ecf4; color: #39739d; }92 .nav-btn.blue { background-color: var(--blue); color: var(--white); }93 94 /* --- LAYOUT --- */95 .container {96 display: flex;97 max-width: 1264px;98 width: 100%;99 margin: 50px auto 0;100 flex: 1;101 }102 103 /* --- SIDEBAR --- */104 .sidebar {105 width: 164px;106 flex-shrink: 0;107 padding: 20px 0;108 border-right: 1px solid var(--border);109 font-size: 13px;110 }111 .sidebar ul { list-style: none; padding: 0; margin: 0; }112 .sidebar li { margin-bottom: 5px; }113 .sidebar a {114 text-decoration: none;115 color: var(--black-700);116 display: block;117 padding: 8px 10px;118 }119 .sidebar a.active {120 font-weight: bold;121 color: var(--black);122 background-color: #f1f2f3;123 border-right: 3px solid var(--orange);124 }125 126 /* --- CONTENT --- */127 .content {128 flex-grow: 1;129 padding: 24px;130 }131 .content-header {132 display: flex;133 justify-content: space-between;134 align-items: center;135 margin-bottom: 24px;136 }137 .content-header h1 { font-size: 27px; margin: 0; font-weight: 400; }138 .ask-btn {139 background-color: var(--blue);140 color: white;141 border: none;142 padding: 10px 15px;143 border-radius: 3px;144 font-size: 13px;145 cursor: pointer;146 box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.4);147 }148 149 .filter-bar {150 display: flex;151 justify-content: flex-end;152 margin-bottom: 15px;153 border-bottom: 1px solid var(--border);154 padding-bottom: 15px;155 }156 .btn-group { border: 1px solid var(--black-700); border-radius: 3px; display: flex; }157 .btn-group button {158 background: white;159 border: none;160 border-right: 1px solid var(--black-700);161 padding: 8px 10px;162 font-size: 12px;163 cursor: pointer;164 color: var(--black-700);165 }166 .btn-group button:last-child { border-right: none; }167 .btn-group button.active { background-color: #e3e6e8; color: var(--black); }168 169 /* --- QUESTIONS LIST --- */170 .question-item {171 display: flex;172 padding: 16px;173 border-bottom: 1px solid var(--border);174 }175 .stats {176 display: flex;177 flex-direction: column;178 align-items: flex-end;179 margin-right: 16px;180 font-size: 13px;181 gap: 6px;182 min-width: 60px;183 color: var(--black-700);184 }185 .stats .votes { color: var(--black); }186 .stats .answers { border: 1px solid #48a868; color: #48a868; padding: 2px 4px; border-radius: 3px; }187 .stats .answers.has-answers { background-color: #48a868; color: white; }188 189 .q-summary { flex-grow: 1; }190 .q-title {191 color: var(--blue-dark);192 font-size: 17px;193 margin: 0 0 5px 0;194 text-decoration: none;195 cursor: pointer;196 }197 .q-excerpt {198 font-size: 13px;199 color: #3b4045;200 margin: 0 0 8px 0;201 line-height: 1.4;202 display: -webkit-box;203 -webkit-line-clamp: 2;204 -webkit-box-orient: vertical;205 overflow: hidden;206 }207 .tags { display: flex; gap: 5px; margin-bottom: 10px; }208 .tag {209 background-color: #e1ecf4;210 color: #39739d;211 font-size: 12px;212 padding: 4px 6px;213 border-radius: 3px;214 text-decoration: none;215 }216 .user-card {217 display: flex;218 justify-content: flex-end;219 font-size: 12px;220 color: var(--black-700);221 }222 223 /* --- CHATBOT WIDGET --- */224 .chat-toggle {225 position: fixed;226 bottom: 20px;227 right: 20px;228 width: 60px;229 height: 60px;230 background-color: var(--orange);231 border-radius: 50%;232 box-shadow: 0 4px 12px rgba(0,0,0,0.2);233 display: flex;234 justify-content: center;235 align-items: center;236 cursor: pointer;237 z-index: 1000;238 transition: transform 0.2s;239 }240 .chat-toggle:hover { transform: scale(1.05); }241 .chat-toggle svg { width: 30px; height: 30px; fill: white; }242 243 .chat-window {244 position: fixed;245 bottom: 90px;246 right: 20px;247 width: 350px;248 height: 500px;249 background-color: white;250 border: 1px solid var(--border);251 border-radius: 8px;252 box-shadow: 0 5px 20px rgba(0,0,0,0.15);253 display: flex;254 flex-direction: column;255 z-index: 999;256 transform-origin: bottom right;257 transform: scale(0);258 transition: transform 0.3s ease;259 overflow: hidden;260 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;261 }262 .chat-window.open { transform: scale(1); }263 264 .chat-header {265 background-color: var(--orange);266 color: white;267 padding: 15px;268 font-weight: bold;269 display: flex;270 justify-content: space-between;271 align-items: center;272 }273 .chat-close { cursor: pointer; font-size: 1.2rem; }274 275 .chat-messages {276 flex-grow: 1;277 padding: 15px;278 overflow-y: auto;279 background-color: #f1f2f3;280 display: flex;281 flex-direction: column;282 gap: 10px;283 }284 285 .message {286 max-width: 85%;287 padding: 10px;288 border-radius: 8px;289 font-size: 14px;290 line-height: 1.4;291 word-wrap: break-word;292 }293 .message.bot {294 background-color: white;295 align-self: flex-start;296 border: 1px solid #e0e0e0;297 }298 .message.user {299 background-color: #dbeafe; /* Light blue */300 align-self: flex-end;301 color: #1e40af;302 }303 .message strong { font-weight: bold; }304 .message code {305 background-color: #f6f6f6;306 padding: 2px 4px;307 border-radius: 3px;308 font-family: monospace;309 font-size: 90%;310 }311 .message pre {312 background-color: #f6f6f6;313 padding: 10px;314 border-radius: 5px;315 overflow-x: auto;316 margin: 5px 0;317 }318 319 .chat-input-area {320 padding: 10px;321 border-top: 1px solid var(--border);322 display: flex;323 gap: 5px;324 background: white;325 }326 .chat-input-area input {327 flex-grow: 1;328 padding: 10px;329 border: 1px solid var(--border);330 border-radius: 4px;331 outline: none;332 }333 .chat-input-area input:focus { border-color: var(--blue); }334 .chat-send {335 background-color: var(--blue);336 color: white;337 border: none;338 padding: 0 15px;339 border-radius: 4px;340 cursor: pointer;341 font-weight: bold;342 }343 .chat-send:disabled { background-color: #ccc; cursor: not-allowed; }344 345 /* Loading Dots */346 .typing-indicator { font-style: italic; color: #888; font-size: 12px; margin-left: 5px; display: none; }347 </style>348</head>349<body>350 351 <header>352 <div class="logo">353 <div class="icon-stack"></div>354 <span>stack</span><b>overflow</b>355 </div>356 <div class="search-bar">357 <span class="search-icon">🔍</span>358 <input type="text" placeholder="Search...">359 </div>360 <div class="nav-links">361 <div class="nav-btn primary">Log in</div>362 <div class="nav-btn blue">Sign up</div>363 </div>364 </header>365 366 <div class="container">367 <nav class="sidebar">368 <ul>369 <li><a href="#" class="active">Home</a></li>370 <li><span style="padding: 8px 10px; color: #888; text-transform: uppercase; font-size: 11px;">Public</span></li>371 <li><a href="#">Questions</a></li>372 <li><a href="#">Tags</a></li>373 <li><a href="#">Users</a></li>374 <li><a href="#">Companies</a></li>375 </ul>376 </nav>377 378 <main class="content">379 <div class="content-header">380 <h1>Top Questions</h1>381 <button class="ask-btn">Ask Question</button>382 </div>383 384 <div class="filter-bar">385 <div class="btn-group">386 <button class="active">Interesting</button>387 <button>Hot</button>388 <button>Week</button>389 <button>Month</button>390 </div>391 </div>392 393 <div id="questions-list">394 <div class="question-item">395 <div class="stats">396 <div class="votes"><strong>12</strong> votes</div>397 <div class="answers has-answers"><strong>4</strong> answers</div>398 <div class="views">123 views</div>399 </div>400 <div class="q-summary">401 <div class="q-title">How do I merge two dictionaries in a single expression in Python?</div>402 <div class="q-excerpt">I want to merge two dictionaries into a new one. I have x = {'a': 1, 'b': 2} and y = {'b': 3, 'c': 4}. I want z = {'a': 1, 'b': 3, 'c': 4}. How do I do this effectively?</div>403 <div class="tags">404 <a href="#" class="tag">python</a>405 <a href="#" class="tag">dictionary</a>406 <a href="#" class="tag">merge</a>407 </div>408 <div class="user-card">asked 2 min ago by <strong>py_dev_99</strong></div>409 </div>410 </div>411 412 <div class="question-item">413 <div class="stats">414 <div class="votes"><strong>5</strong> votes</div>415 <div class="answers"><strong>0</strong> answers</div>416 <div class="views">45 views</div>417 </div>418 <div class="q-summary">419 <div class="q-title">Java Stream API - filtering and collecting a list of objects</div>420 <div class="q-excerpt">I have a list of Person objects. I want to filter out anyone under 18 and collect their names into a List<String>. What is the most concise way to do this using Streams?</div>421 <div class="tags">422 <a href="#" class="tag">java</a>423 <a href="#" class="tag">stream-api</a>424 <a href="#" class="tag">lambda</a>425 </div>426 <div class="user-card">asked 15 min ago by <strong>java_guru</strong></div>427 </div>428 </div>429 430 <div class="question-item">431 <div class="stats">432 <div class="votes"><strong>0</strong> votes</div>433 <div class="answers"><strong>0</strong> answers</div>434 <div class="views">8 views</div>435 </div>436 <div class="q-summary">437 <div class="q-title">Understanding Python's GIL (Global Interpreter Lock)</div>438 <div class="q-excerpt">Can someone explain why Python has a GIL and how it affects multi-threaded applications? Is it possible to bypass it for CPU-bound tasks?</div>439 <div class="tags">440 <a href="#" class="tag">python</a>441 <a href="#" class="tag">multithreading</a>442 <a href="#" class="tag">gil</a>443 </div>444 <div class="user-card">asked 1 hour ago by <strong>concurrency_fan</strong></div>445 </div>446 </div>447 </div>448 </main>449 </div>450 451 <div class="chat-toggle" id="chat-toggle" title="Ask AI Helper">452 <svg viewBox="0 0 24 24">453 <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>454 </svg>455 </div>456 457 <div class="chat-window" id="chat-window">458 <div class="chat-header">459 <span>Stack Overflow AI Helper</span>460 <span class="chat-close" id="chat-close">×</span>461 </div>462 <div class="chat-messages" id="chat-messages">463 <div class="message bot">464 Hello! I am an AI assistant powered by Gemini Flash 1.5. I can help you with <strong>Python</strong> and <strong>Java</strong> queries.<br><br>To get started, please paste your Gemini API Key below. (It will not be stored permanently).465 </div>466 </div>467 <div class="typing-indicator" id="typing-indicator">AI is typing...</div>468 <div class="chat-input-area">469 <input type="text" id="chat-input" placeholder="Type a message..." autocomplete="off">470 <button class="chat-send" id="chat-send">Send</button>471 </div>472 </div>473 474 <script>475 // --- CHAT UI LOGIC ---476 const toggleBtn = document.getElementById('chat-toggle');477 const chatWindow = document.getElementById('chat-window');478 const closeBtn = document.getElementById('chat-close');479 const messagesContainer = document.getElementById('chat-messages');480 const inputField = document.getElementById('chat-input');481 const sendBtn = document.getElementById('chat-send');482 const typingIndicator = document.getElementById('typing-indicator');483 484 let apiKey = null;485 486 toggleBtn.addEventListener('click', () => {487 chatWindow.classList.toggle('open');488 if(chatWindow.classList.contains('open')) inputField.focus();489 });490 491 closeBtn.addEventListener('click', () => {492 chatWindow.classList.remove('open');493 });494 495 // Add message to chat496 function addMessage(text, sender) {497 const div = document.createElement('div');498 div.classList.add('message', sender);499 500 // Basic formatting for bot messages501 if (sender === 'bot') {502 // Convert simple markdown code blocks (```...```) to <pre>503 let formatted = text.replace(/```([\s\S]*?)```/g, '<pre>$1</pre>');504 // Convert inline code (`...`) to <code>505 formatted = formatted.replace(/`([^`]+)`/g, '<code>$1</code>');506 // Convert bold (**...**)507 formatted = formatted.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');508 div.innerHTML = formatted;509 } else {510 div.textContent = text;511 }512 513 messagesContainer.appendChild(div);514 messagesContainer.scrollTop = messagesContainer.scrollHeight;515 }516 517 // --- GEMINI API LOGIC ---518 async function callGemini(prompt) {519 if (!apiKey) return;520 521 typingIndicator.style.display = 'block';522 523 const systemInstruction = `524 You are a helpful assistant on a Stack Overflow-style website. 525 You are an expert in Python and Java.526 1. If the user asks a question about Python or Java, answer it clearly with code examples where necessary.527 2. If the user asks about other programming languages or general life topics, politely refuse and remind them you only handle Python and Java.528 3. Keep answers concise and helpful.529 `;530 531 const fullPrompt = systemInstruction + "\n\nUser Question: " + prompt;532 533 const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-flash-latest:generateContent?key=${apiKey}`;534 535 try {536 const response = await fetch(url, {537 method: 'POST',538 headers: { 'Content-Type': 'application/json' },539 body: JSON.stringify({540 contents: [{541 parts: [{ text: fullPrompt }]542 }]543 })544 });545 546 const data = await response.json();547 548 if (data.error) {549 addMessage("Error: " + data.error.message, 'bot');550 } else {551 const text = data.candidates[0].content.parts[0].text;552 addMessage(text, 'bot');553 }554 555 } catch (err) {556 addMessage("Network Error: Unable to reach Gemini API.", 'bot');557 console.error(err);558 } finally {559 typingIndicator.style.display = 'none';560 }561 }562 563 async function handleSend() {564 const text = inputField.value.trim();565 if (!text) return;566 567 // Clear input568 inputField.value = '';569 570 // If API Key is not set yet, treat this input as the key571 if (!apiKey) {572 // Basic validation (Google API keys usually start with AIza)573 if (text.startsWith('AIza') && text.length > 20) {574 apiKey = text;575 addMessage('API Key accepted! How can I help you with Python or Java today?', 'bot');576 } else {577 addMessage("That doesn't look like a valid Google API Key. It should start with 'AIza'. Please try again.", 'bot');578 }579 return;580 }581 582 // Normal chat flow583 addMessage(text, 'user');584 await callGemini(text);585 }586 587 sendBtn.addEventListener('click', handleSend);588 inputField.addEventListener('keypress', (e) => {589 if (e.key === 'Enter') handleSend();590 });591 592 </script>593</body>594</html>