Team Ai
Apppublic

Dharun72/StackOverflow

sourceHugging Faceupdated 10mo agoView on Hugging Face
0likes
index.html594 linesDownload Raw Back to root
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&lt;String&gt;. 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>