// ==UserScript== // @name Google 1970s CRT Terminal v3 // @namespace web.nextbyte.ai // @version 3.0 // @description Transforms Google into a 1970s green-phosphor CRT terminal with AI mode, image grids, tab navigation, retro TV power-off animation, and a toggle button to re-enable the terminal. // @author NextByte // @match https://www.google.com/* // @grant GM_setValue // @grant GM_getValue // @grant TW_inference // @run-at document-idle // ==/UserScript== (function () { 'use strict'; // ─── CONSTANTS ──────────────────────────────────────────────────────────── const STORAGE_KEY = 'retro_terminal_enabled'; const ACTIVE_TAB_KEY = 'retro_terminal_tab'; const GREEN = '#00ff00'; const DIM_GREEN = '#00aa00'; const DARK_GREEN = '#005500'; const BG = '#000000'; const FONT = "'Courier New', 'Courier', monospace"; // ─── STATE ──────────────────────────────────────────────────────────────── let terminalEnabled = GM_getValue(STORAGE_KEY, true); let activeTab = GM_getValue(ACTIVE_TAB_KEY, 'all'); let realSearchResults = []; let aiResponseCache = null; let commandHistory = []; let historyIndex = -1; let observer = null; // ─── HELPERS ────────────────────────────────────────────────────────────── function escapeHtml(text) { const d = document.createElement('div'); d.textContent = text; return d.innerHTML; } function getQuery() { return new URLSearchParams(window.location.search).get('q') || ''; } function isSearchPage() { return window.location.pathname === '/search'; } // ─── RESULT EXTRACTION ──────────────────────────────────────────────────── function extractRealSearchResults() { const selectors = ['div.g', 'div.tF2Cxc', 'div[data-hveid][data-ved]', 'div[jscontroller][data-hveid]']; const results = []; for (const sel of selectors) { document.querySelectorAll(sel).forEach(el => { if (results.length >= 12) return; const titleEl = el.querySelector('h3'); const linkEl = el.querySelector('a[href]'); if (!titleEl || !linkEl || !linkEl.href) return; if (linkEl.href.startsWith('https://www.google.com/search')) return; const snippetSelectors = ['.VwiC3b', '.yXK7lf', '.s3v9rd', '.st', 'div[data-sncf]', 'span[data-sncf]']; let snippet = ''; for (const ss of snippetSelectors) { const se = el.querySelector(ss); if (se && se.textContent.trim()) { snippet = se.textContent.trim(); break; } } if (!snippet) snippet = el.textContent.replace(titleEl.textContent, '').trim().substring(0, 200); const citeEl = el.querySelector('cite'); let displayUrl = ''; try { displayUrl = citeEl ? citeEl.textContent : new URL(linkEl.href).hostname; } catch (e) { displayUrl = linkEl.href; } results.push({ title: titleEl.textContent.trim(), url: linkEl.href, snippet, displayUrl }); }); if (results.length > 0) break; } return results; } function extractImageResults() { const imgs = []; document.querySelectorAll('img[src*="encrypted-tbn"], img[data-src], g-img img, .islir img').forEach(img => { if (imgs.length >= 12) return; const src = img.src || img.dataset.src; if (src && src.startsWith('http') && !src.includes('google.com/images/branding')) { const alt = img.alt || img.title || 'Image'; const link = img.closest('a'); imgs.push({ src, alt, href: link ? link.href : src }); } }); return imgs; } // ─── CSS INJECTION ──────────────────────────────────────────────────────── function injectStyles() { const existing = document.getElementById('retro-terminal-styles'); if (existing) existing.remove(); const style = document.createElement('style'); style.id = 'retro-terminal-styles'; style.textContent = ` /* ── Reset & Base ── */ #retro-terminal * { box-sizing: border-box; } /* ── Keyframes ── */ @keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} } @keyframes scanmove { 0%{transform:translateY(-100%)} 100%{transform:translateY(100vh)} } @keyframes flicker { 0%{opacity:.97} 5%{opacity:.94} 10%{opacity:.98} 15%{opacity:.91} 20%{opacity:.97} 25%{opacity:.95} 30%{opacity:.99} 35%{opacity:.93} 40%{opacity:.97} 45%{opacity:.96} 50%{opacity:.98} 55%{opacity:.92} 60%{opacity:.97} 65%{opacity:.95} 70%{opacity:.99} 75%{opacity:.94} 80%{opacity:.97} 85%{opacity:.96} 90%{opacity:.98} 95%{opacity:.93} 100%{opacity:.97} } @keyframes phosphor-pulse { 0%,100%{text-shadow:0 0 4px ${GREEN},0 0 8px ${GREEN}} 50%{text-shadow:0 0 6px ${GREEN},0 0 14px ${GREEN},0 0 22px #00cc00} } @keyframes ai-typing { from{width:0} to{width:100%} } @keyframes tv-shrink-h { 0% { transform: scaleY(1); opacity: 1; } 60% { transform: scaleY(0.01); opacity: 1; } 100% { transform: scaleY(0.01); opacity: 1; } } @keyframes tv-dot-fade { 0% { width: 100vw; height: 3px; opacity: 1; background: #ffffff; } 40% { width: 6px; height: 6px; border-radius: 50%; opacity: 1; background: #ffffff; } 100% { width: 0px; height: 0px; opacity: 0; background: #ffffff; } } @keyframes toggle-glow { 0%,100%{box-shadow:0 0 4px ${GREEN}} 50%{box-shadow:0 0 10px ${GREEN},0 0 20px ${GREEN}} } /* ── Terminal Wrapper ── */ #retro-terminal { position: fixed; inset: 0; z-index: 2147483640; background: ${BG}; color: ${GREEN}; font-family: ${FONT}; font-size: 15px; line-height: 1.65; overflow: hidden; display: flex; flex-direction: column; animation: flicker 0.2s infinite; } /* ── Scanlines overlay ── */ #retro-scanlines { position: fixed; inset: 0; z-index: 2147483645; pointer-events: none; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 3px, rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 4px ); } #retro-scanline-beam { position: fixed; left: 0; top: 0; width: 100%; height: 60px; z-index: 2147483644; pointer-events: none; background: linear-gradient(to bottom, transparent 0%, rgba(0,255,0,0.03) 50%, transparent 100%); animation: scanmove 6s linear infinite; } /* ── Chromatic aberration vignette ── */ #retro-vignette { position: fixed; inset: 0; z-index: 2147483643; pointer-events: none; background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.75) 100%); } #retro-chroma { position: fixed; inset: 0; z-index: 2147483642; pointer-events: none; mix-blend-mode: screen; background: transparent; box-shadow: inset 2px 0 0 rgba(255,0,0,0.04), inset -2px 0 0 rgba(0,0,255,0.04); } /* ── Top Navigation Bar ── */ #retro-navbar { flex-shrink: 0; display: flex; align-items: center; gap: 0; padding: 6px 16px 0; border-bottom: 1px solid ${DARK_GREEN}; background: ${BG}; font-size: 13px; letter-spacing: 0.05em; user-select: none; } #retro-navbar .nav-brand { color: ${GREEN}; font-size: 18px; font-weight: bold; margin-right: 20px; text-shadow: 0 0 8px ${GREEN}; letter-spacing: 0.1em; animation: phosphor-pulse 3s ease-in-out infinite; } .retro-tab { padding: 6px 14px; cursor: pointer; color: ${DIM_GREEN}; border: 1px solid transparent; border-bottom: none; margin-right: 2px; transition: color 0.1s, border-color 0.1s; text-transform: uppercase; font-family: ${FONT}; font-size: 12px; letter-spacing: 0.08em; background: transparent; } .retro-tab:hover { color: ${GREEN}; border-color: ${DARK_GREEN}; } .retro-tab.active { color: ${GREEN}; border-color: ${GREEN}; background: rgba(0,255,0,0.06); text-shadow: 0 0 6px ${GREEN}; } .retro-tab.ai-tab { color: #00ffcc; } .retro-tab.ai-tab.active { color: #00ffcc; border-color: #00ffcc; text-shadow: 0 0 6px #00ffcc; } /* ── Status bar ── */ #retro-statusbar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 3px 16px; font-size: 11px; color: ${DARK_GREEN}; border-bottom: 1px solid ${DARK_GREEN}; background: ${BG}; } /* ── Main content area ── */ #retro-content { flex: 1; overflow-y: auto; padding: 12px 20px 20px; scroll-behavior: smooth; } #retro-content::-webkit-scrollbar { width: 6px; } #retro-content::-webkit-scrollbar-track { background: ${BG}; } #retro-content::-webkit-scrollbar-thumb { background: ${DARK_GREEN}; } /* ── Output area ── */ #output-area { margin-bottom: 8px; } .terminal-line { margin: 3px 0; } /* ── Search results ── */ .search-result { margin: 10px 0 10px 0; padding: 8px 10px; border-left: 2px solid ${GREEN}; background: rgba(0,255,0,0.02); } .search-result-num { color: ${DARK_GREEN}; font-size: 12px; } .search-result-title { color: ${GREEN}; font-weight: bold; text-decoration: none; cursor: pointer; text-shadow: 0 0 4px ${GREEN}; } .search-result-title:hover { background: ${GREEN}; color: ${BG}; text-shadow: none; } .search-result-url { color: ${DIM_GREEN}; font-size: 12px; margin-top: 2px; } .search-result-snippet { color: ${GREEN}; opacity: 0.75; margin-top: 4px; font-size: 13px; } /* ── Image grid ── */ #retro-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 12px; } .retro-img-card { border: 2px solid ${DARK_GREEN}; padding: 3px; background: #000; cursor: pointer; position: relative; overflow: hidden; } .retro-img-card:hover { border-color: ${GREEN}; box-shadow: 0 0 8px ${GREEN}; } .retro-img-card img { width: 100%; height: 120px; object-fit: cover; filter: saturate(0.85) contrast(1.1); image-rendering: pixelated; display: block; } .retro-img-card::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 3px ); pointer-events: none; } .retro-img-label { color: ${DIM_GREEN}; font-size: 10px; padding: 3px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── AI Section ── */ #retro-ai-block { border: 1px solid #00ffcc; padding: 14px 16px; margin: 12px 0; background: rgba(0,255,204,0.03); position: relative; } #retro-ai-block::before { content: '[ AI RESPONSE ]'; position: absolute; top: -9px; left: 12px; background: ${BG}; padding: 0 6px; color: #00ffcc; font-size: 11px; letter-spacing: 0.1em; } .ai-text { color: #00ffcc; text-shadow: 0 0 5px #00ffcc; line-height: 1.7; font-size: 14px; } .ai-cursor { display: inline-block; width: 8px; height: 14px; background: #00ffcc; animation: blink 0.8s step-end infinite; vertical-align: text-bottom; margin-left: 2px; } .ai-loading { color: #00ffcc; font-size: 13px; animation: phosphor-pulse 1s ease-in-out infinite; } /* ── CRT image frame (inside AI block) ── */ .crt-image-frame { display: inline-block; border: 3px solid #00ffcc; padding: 4px; margin: 8px 4px; background: #000; box-shadow: 0 0 12px #00ffcc, inset 0 0 8px rgba(0,255,204,0.1); position: relative; } .crt-image-frame img { display: block; max-width: 280px; max-height: 200px; object-fit: cover; filter: saturate(1.1) contrast(1.05); } .crt-image-frame::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 3px, rgba(0,0,0,0.12) 3px, rgba(0,0,0,0.12) 4px ); pointer-events: none; } /* ── Input line ── */ #retro-input-bar { flex-shrink: 0; display: flex; align-items: center; padding: 8px 16px; border-top: 1px solid ${DARK_GREEN}; background: ${BG}; } #retro-prompt { color: ${GREEN}; margin-right: 6px; text-shadow: 0 0 4px ${GREEN}; white-space: nowrap; } #terminal-input { flex: 1; background: transparent; border: none; outline: none; color: ${GREEN}; font-family: ${FONT}; font-size: 15px; caret-color: ${GREEN}; text-shadow: 0 0 4px ${GREEN}; } #retro-cursor { color: ${GREEN}; animation: blink 1s step-end infinite; font-size: 16px; line-height: 1; } /* ── TV Power-off overlay ── */ #retro-tv-off { position: fixed; inset: 0; z-index: 2147483647; background: ${BG}; display: flex; align-items: center; justify-content: center; pointer-events: none; } #retro-tv-line { width: 100vw; height: 3px; background: #ffffff; box-shadow: 0 0 12px #ffffff, 0 0 30px #ffffff; transition: none; } /* ── Toggle button (shown when terminal is OFF) ── */ #retro-toggle-btn { position: fixed; bottom: 24px; right: 24px; z-index: 2147483646; background: ${BG}; color: ${GREEN}; border: 2px solid ${GREEN}; font-family: ${FONT}; font-size: 11px; padding: 8px 14px; cursor: pointer; letter-spacing: 0.1em; text-transform: uppercase; animation: toggle-glow 2s ease-in-out infinite; user-select: none; } #retro-toggle-btn:hover { background: ${GREEN}; color: ${BG}; } /* ── Separator ── */ .retro-sep { color: ${DARK_GREEN}; margin: 4px 0; } `; document.head.appendChild(style); } // ─── TV POWER-OFF ANIMATION (max 150ms) ────────────────────────────────── // WHY THE OLD SHUTDOWN WAS SLOW: // The previous implementation used two chained setTimeout calls (800ms + 1900ms total) // with CSS transitions, causing a ~2s black-screen hang. The fix uses requestAnimationFrame // for frame-perfect timing, collapses the terminal instantly via scaleY transform, // then animates a white line shrinking to a dot — all within 150ms. function tvPowerOff(onComplete) { // 1. Instantly hide all terminal UI elements (no layout thrash) const terminal = document.getElementById('retro-terminal'); const scanlines = document.getElementById('retro-scanlines'); const beam = document.getElementById('retro-scanline-beam'); const vignette = document.getElementById('retro-vignette'); const chroma = document.getElementById('retro-chroma'); // Create the TV-off overlay const overlay = document.createElement('div'); overlay.id = 'retro-tv-off'; const line = document.createElement('div'); line.id = 'retro-tv-line'; overlay.appendChild(line); document.body.appendChild(overlay); // Hide terminal elements immediately (no reflow) requestAnimationFrame(() => { if (terminal) terminal.style.visibility = 'hidden'; if (scanlines) scanlines.style.display = 'none'; if (beam) beam.style.display = 'none'; if (vignette) vignette.style.display = 'none'; if (chroma) chroma.style.display = 'none'; // Phase 1: collapse to horizontal line (0 → 60ms) line.style.transition = 'height 60ms linear, box-shadow 60ms linear'; line.style.height = '3px'; requestAnimationFrame(() => { // Phase 2: shrink line to dot (60ms → 120ms) setTimeout(() => { line.style.transition = 'width 60ms ease-in, height 60ms ease-in, border-radius 60ms ease-in, opacity 30ms linear 60ms'; line.style.width = '6px'; line.style.height = '6px'; line.style.borderRadius = '50%'; // Phase 3: fade dot out (120ms → 150ms) setTimeout(() => { line.style.opacity = '0'; setTimeout(() => { overlay.remove(); if (terminal) terminal.remove(); if (scanlines) scanlines.remove(); if (beam) beam.remove(); if (vignette) vignette.remove(); if (chroma) chroma.remove(); document.body.style.cssText = ''; if (onComplete) onComplete(); }, 30); }, 60); }, 60); }); }); } // ─── TOGGLE BUTTON (re-enable terminal) ────────────────────────────────── function injectToggleButton() { if (document.getElementById('retro-toggle-btn')) return; const btn = document.createElement('button'); btn.id = 'retro-toggle-btn'; btn.textContent = '[ RETRO_TERMINAL_ON ]'; btn.title = 'Re-enable the 1970s CRT Terminal'; btn.addEventListener('click', () => { btn.remove(); GM_setValue(STORAGE_KEY, true); terminalEnabled = true; realSearchResults = extractRealSearchResults(); injectStyles(); buildTerminal(); }); document.body.appendChild(btn); } // ─── NAVIGATION BAR ────────────────────────────────────────────────────── function buildNavbar() { const navbar = document.createElement('div'); navbar.id = 'retro-navbar'; const brand = document.createElement('span'); brand.className = 'nav-brand'; brand.textContent = 'G:\\>'; navbar.appendChild(brand); const tabs = [ { id: 'ai', label: 'AI MODE', cls: 'ai-tab' }, { id: 'all', label: 'ALL' }, { id: 'images', label: 'IMAGES' }, { id: 'products', label: 'PRODUCTS' }, { id: 'videos', label: 'VIDEOS' }, { id: 'news', label: 'NEWS' }, ]; tabs.forEach(t => { const tab = document.createElement('button'); tab.className = 'retro-tab' + (t.cls ? ' ' + t.cls : '') + (activeTab === t.id ? ' active' : ''); tab.textContent = t.label; tab.dataset.tab = t.id; tab.addEventListener('click', () => switchTab(t.id)); navbar.appendChild(tab); }); return navbar; } function switchTab(tabId) { activeTab = tabId; GM_setValue(ACTIVE_TAB_KEY, tabId); document.querySelectorAll('.retro-tab').forEach(t => { t.classList.toggle('active', t.dataset.tab === tabId); }); renderTabContent(); } // ─── STATUS BAR ────────────────────────────────────────────────────────── function buildStatusBar() { const bar = document.createElement('div'); bar.id = 'retro-statusbar'; const query = getQuery(); const left = document.createElement('span'); left.textContent = query ? `QUERY: "${query}"` : 'GOOGLE SEARCH TERMINAL v3.0'; const right = document.createElement('span'); const now = new Date(); right.textContent = `${now.toLocaleDateString()} ${now.toLocaleTimeString()} | MEM: 64K`; bar.appendChild(left); bar.appendChild(right); return bar; } // ─── TAB CONTENT RENDERER ──────────────────────────────────────────────── function renderTabContent() { const outputArea = document.getElementById('output-area'); if (!outputArea) return; outputArea.innerHTML = ''; if (activeTab === 'ai') { renderAITab(outputArea); } else if (activeTab === 'images') { renderImagesTab(outputArea); } else if (activeTab === 'all') { renderAllTab(outputArea); } else { renderComingSoon(outputArea, activeTab.toUpperCase()); } } function renderAllTab(output) { appendLine(output, ''); appendLine(output, '================================================================', 'retro-sep'); appendLine(output, 'SEARCH RESULTS:'); appendLine(output, '================================================================', 'retro-sep'); appendLine(output, ''); if (realSearchResults.length > 0) { realSearchResults.forEach((r, i) => { const div = document.createElement('div'); div.className = 'search-result'; div.innerHTML = `

[${i + 1}]

${escapeHtml(r.title)}

URL: ${escapeHtml(r.displayUrl)}

${escapeHtml(r.snippet)}

`; output.appendChild(div); }); } else { appendLine(output, 'ERROR: No results extracted. Try a new search.', null, '#ff4444'); } appendLine(output, ''); appendLine(output, '================================================================', 'retro-sep'); appendLine(output, 'Click any result title to open. Type a new query below.'); appendLine(output, ''); } function renderImagesTab(output) { appendLine(output, ''); appendLine(output, '================================================================', 'retro-sep'); appendLine(output, 'IMAGE RESULTS:'); appendLine(output, '================================================================', 'retro-sep'); appendLine(output, ''); const imgs = extractImageResults(); if (imgs.length > 0) { const grid = document.createElement('div'); grid.id = 'retro-image-grid'; imgs.forEach(img => { const card = document.createElement('div'); card.className = 'retro-img-card'; card.title = img.alt; card.addEventListener('click', () => window.open(img.href, '_blank')); const image = document.createElement('img'); image.src = img.src; image.alt = img.alt; image.loading = 'lazy'; const label = document.createElement('div'); label.className = 'retro-img-label'; label.textContent = img.alt; card.appendChild(image); card.appendChild(label); grid.appendChild(card); }); output.appendChild(grid); } else { appendLine(output, 'ERROR: No images found on this page.', null, '#ff4444'); appendLine(output, 'Tip: Search for something first, then switch to IMAGES tab.'); } appendLine(output, ''); } function renderAITab(output) { appendLine(output, ''); appendLine(output, '================================================================', 'retro-sep'); appendLine(output, 'AI MODE -- PHOSPHOR INTELLIGENCE UNIT v1.0'); appendLine(output, '================================================================', 'retro-sep'); appendLine(output, ''); const query = getQuery(); if (!query) { appendLine(output, 'No query detected. Type a search term below to activate AI mode.'); return; } const aiBlock = document.createElement('div'); aiBlock.id = 'retro-ai-block'; if (aiResponseCache) { renderAIResponse(aiBlock, aiResponseCache); } else { const loading = document.createElement('div'); loading.className = 'ai-loading'; loading.textContent = 'PROCESSING QUERY... PLEASE WAIT...'; aiBlock.appendChild(loading); output.appendChild(aiBlock); // Use TW_inference for AI response TW_inference( `You are a helpful AI assistant embedded in a 1970s retro terminal interface. Answer the following search query concisely and informatively. Keep your response under 200 words. Query: "${query}"`, realSearchResults.map(r => r.title + ': ' + r.snippet).join('\n') ).then(response => { aiResponseCache = response; loading.remove(); renderAIResponse(aiBlock, response); // Also show a relevant image in CRT frame if available const imgs = extractImageResults(); if (imgs.length > 0) { const frame = document.createElement('div'); frame.className = 'crt-image-frame'; const img = document.createElement('img'); img.src = imgs[0].src; img.alt = imgs[0].alt; frame.appendChild(img); aiBlock.appendChild(frame); } }).catch(() => { loading.textContent = 'AI UNIT OFFLINE. MANUAL SEARCH REQUIRED.'; loading.style.color = '#ff4444'; }); return; } output.appendChild(aiBlock); } function renderAIResponse(container, text) { const p = document.createElement('div'); p.className = 'ai-text'; p.textContent = text; const cur = document.createElement('span'); cur.className = 'ai-cursor'; p.appendChild(cur); container.appendChild(p); } function renderComingSoon(output, tabName) { appendLine(output, ''); appendLine(output, '================================================================', 'retro-sep'); appendLine(output, `${tabName} MODULE`); appendLine(output, '================================================================', 'retro-sep'); appendLine(output, ''); appendLine(output, `> ${tabName} results are not yet available in this terminal build.`); appendLine(output, '> Switch to ALL or IMAGES tab for available results.'); appendLine(output, ''); } function appendLine(parent, text, className, color) { const el = document.createElement('div'); el.className = 'terminal-line' + (className ? ' ' + className : ''); el.textContent = text || ''; if (color) el.style.color = color; parent.appendChild(el); return el; } // ─── COMMAND PROCESSOR ──────────────────────────────────────────────────── function processCommand(cmd, outputArea) { const lower = cmd.toLowerCase().trim(); if (lower === 'help') { showHelp(outputArea); } else if (lower === 'clear' || lower === 'cls') { clearScreen(outputArea); } else if (lower === 'about') { showAbout(outputArea); } else if (lower === 'exit' || lower === 'quit' || lower === 'shutdown') { shutdownTerminal(); } else if (lower.startsWith('tab ')) { const t = lower.substring(4).trim(); switchTab(t); } else if (lower === 'ai') { switchTab('ai'); } else if (lower === 'images') { switchTab('images'); } else if (lower.startsWith('search ')) { performSearch(cmd.substring(7)); } else if (cmd.length > 0) { performSearch(cmd); } } function showHelp(output) { const lines = [ '', 'AVAILABLE COMMANDS:', '-------------------', 'search [query] - Search Google', '[query] - Direct search', 'ai - Switch to AI Mode tab', 'images - Switch to Images tab', 'tab [name] - Switch tab (all/ai/images/products/videos/news)', 'help - Show this help', 'clear / cls - Clear screen', 'about - About this terminal', 'exit / quit - Power off terminal (TV animation)', '', ]; lines.forEach(l => appendLine(output, l)); } function showAbout(output) { const lines = [ '', '================================================================', 'GOOGLE CRT TERMINAL v3.0', '================================================================', '', 'A 1970s green-phosphor terminal interface for Google Search.', '', 'Features:', ' - Authentic CRT scanlines + chromatic aberration', ' - Phosphor glow text-shadow effects', ' - AI Mode with TW_inference integration', ' - Image grid with pixelated CRT border', ' - Tab navigation (AI/All/Images/Products/Videos/News)', ' - Retro TV power-off animation (150ms)', ' - RETRO_TERMINAL_ON toggle button', ' - Command history (arrow keys)', '', 'Built for retro computing enthusiasts.', '', ]; lines.forEach(l => appendLine(output, l)); } function clearScreen(output) { output.innerHTML = ''; appendLine(output, 'Screen cleared.'); appendLine(output, ''); } function performSearch(query) { const outputArea = document.getElementById('output-area'); if (outputArea) { appendLine(outputArea, `Searching: "${query}"...`); appendLine(outputArea, 'Connecting to search servers...'); const terminal = document.getElementById('retro-terminal'); if (terminal) terminal.scrollTop = terminal.scrollHeight; } window.location.href = `https://www.google.com/search?q=${encodeURIComponent(query)}`; } // ─── SHUTDOWN ───────────────────────────────────────────────────────────── function shutdownTerminal() { GM_setValue(STORAGE_KEY, false); terminalEnabled = false; // Disable input immediately const inputEl = document.getElementById('terminal-input'); if (inputEl) { inputEl.disabled = true; inputEl.blur(); } // Run TV power-off animation, then restore Google and inject toggle button tvPowerOff(() => { // Restore original Google page document.body.style.cssText = ''; // Inject toggle button so user can re-enable injectToggleButton(); }); } // ─── TERMINAL BUILDER ───────────────────────────────────────────────────── function buildTerminal() { // Remove any existing terminal const existing = document.getElementById('retro-terminal'); if (existing) existing.remove(); // Wipe body content and set base styles document.body.innerHTML = ''; document.body.style.cssText = 'margin:0;padding:0;overflow:hidden;background:#000;'; // ── Overlay effects ── const scanlines = document.createElement('div'); scanlines.id = 'retro-scanlines'; document.body.appendChild(scanlines); const beam = document.createElement('div'); beam.id = 'retro-scanline-beam'; document.body.appendChild(beam); const vignette = document.createElement('div'); vignette.id = 'retro-vignette'; document.body.appendChild(vignette); const chroma = document.createElement('div'); chroma.id = 'retro-chroma'; document.body.appendChild(chroma); // ── Terminal shell ── const terminal = document.createElement('div'); terminal.id = 'retro-terminal'; // Navbar terminal.appendChild(buildNavbar()); // Status bar terminal.appendChild(buildStatusBar()); // Content area const content = document.createElement('div'); content.id = 'retro-content'; const outputArea = document.createElement('div'); outputArea.id = 'output-area'; content.appendChild(outputArea); terminal.appendChild(content); // Input bar const inputBar = document.createElement('div'); inputBar.id = 'retro-input-bar'; const prompt = document.createElement('span'); prompt.id = 'retro-prompt'; prompt.textContent = isSearchPage() ? `[${getQuery()}]> ` : 'GOOGLE> '; const input = document.createElement('input'); input.type = 'text'; input.id = 'terminal-input'; input.autocomplete = 'off'; input.spellcheck = false; input.placeholder = 'Type a command or search query...'; const cursor = document.createElement('span'); cursor.id = 'retro-cursor'; cursor.textContent = '█'; inputBar.appendChild(prompt); inputBar.appendChild(input); inputBar.appendChild(cursor); terminal.appendChild(inputBar); document.body.appendChild(terminal); // ── Boot sequence ── const boot = [ 'GOOGLE SEARCH SYSTEM v3.0', 'Copyright (C) 1970 Google Corporation', '', 'Initializing phosphor display... OK', 'Loading search engine............. OK', 'Connecting to network............. OK', 'AI unit status.................... ONLINE', '', '================================================================', 'WELCOME TO GOOGLE CRT TERMINAL', '================================================================', '', 'Type "help" for commands | "exit" to power off | "ai" for AI mode', '', ]; boot.forEach(l => appendLine(outputArea, l)); // ── Display search results if on search page ── if (isSearchPage()) { renderTabContent(); } // ── Input handling ── input.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); const cmd = input.value.trim(); if (cmd) { commandHistory.unshift(cmd); historyIndex = -1; const cmdLine = document.createElement('div'); cmdLine.className = 'terminal-line'; cmdLine.innerHTML = `> ${escapeHtml(cmd)}`; outputArea.appendChild(cmdLine); processCommand(cmd, outputArea); input.value = ''; cursor.style.display = 'inline'; content.scrollTop = content.scrollHeight; } } else if (e.key === 'ArrowUp') { e.preventDefault(); if (historyIndex < commandHistory.length - 1) { historyIndex++; input.value = commandHistory[historyIndex]; } } else if (e.key === 'ArrowDown') { e.preventDefault(); if (historyIndex > 0) { historyIndex--; input.value = commandHistory[historyIndex]; } else if (historyIndex === 0) { historyIndex = -1; input.value = ''; } } }); input.addEventListener('input', () => { cursor.style.display = input.value.length > 0 ? 'none' : 'inline'; }); // Auto-focus input.focus(); document.addEventListener('click', () => input.focus(), { passive: true }); } // ─── MUTATION OBSERVER (performance: inject only when needed) ───────────── function setupObserver() { if (observer) observer.disconnect(); observer = new MutationObserver((mutations) => { // Only re-inject if our terminal was removed from the DOM if (!document.getElementById('retro-terminal') && terminalEnabled) { observer.disconnect(); realSearchResults = extractRealSearchResults(); injectStyles(); buildTerminal(); setupObserver(); } }); observer.observe(document.body, { childList: true, subtree: false }); } // ─── INIT ───────────────────────────────────────────────────────────────── function init() { if (!terminalEnabled) { // Terminal was previously disabled — just show the toggle button injectToggleButton(); return; } // Extract real results before wiping the DOM if (isSearchPage()) { realSearchResults = extractRealSearchResults(); } injectStyles(); buildTerminal(); setupObserver(); } // Run after DOM is ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } })();