Spaces:
Running
Running
| <html lang="pt-br"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>tkX | DeepMind Search Engine</title> | |
| <!-- Importing Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* --- CORE VARIABLES & RESET --- */ | |
| :root { | |
| --bg: #030303; | |
| --bg-glass: rgba(16, 20, 24, 0.7); | |
| --cyan: #00f2ff; | |
| --cyan-dim: rgba(0, 242, 255, 0.3); | |
| --blue: #1a73e8; | |
| --text: #43d172; | |
| --text-dim: #8b9bb4; | |
| --glass-border: rgba(255, 255, 255, 0.1); | |
| --font-main: 'Inter', system-ui, -apple-system, sans-serif; | |
| --font-mono: 'JetBrains Mono', 'Fira Code', monospace; | |
| } | |
| * { | |
| box-sizing: box-sizing; | |
| outline: none; | |
| } | |
| body, html { | |
| margin: 0; padding: 0; | |
| background-color: var(--bg); | |
| color: var(--text); | |
| font-family: var(--font-main); | |
| overflow-x: hidden; | |
| scroll-behavior: smooth; | |
| height: 100%; | |
| } | |
| /* --- BACKGROUND CANVAS (Lagrangian Field) --- */ | |
| #lagrangian-canvas { | |
| position: fixed; top: 0; left: 0; | |
| width: 100%; height: 100%; | |
| z-index: -1; opacity: 0.4; | |
| pointer-events: none; | |
| } | |
| /* --- PRELOADER (Matrix Rain) --- */ | |
| #preloader { | |
| position: fixed; | |
| top: 0; left: 0; | |
| width: 100vw; height: 100vh; | |
| background-color: #000; | |
| z-index: 9999; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| transition: opacity 1s ease; | |
| opacity: 1; | |
| } | |
| #matrix-canvas-loader { | |
| position: absolute; top: 0; left: 0; | |
| width: 100%; height: 100%; | |
| } | |
| .loader-text { | |
| color: var(--cyan); | |
| font-family: var(--font-mono); | |
| font-size: 2rem; | |
| text-transform: uppercase; | |
| letter-spacing: 4px; | |
| z-index: 10; | |
| animation: flicker 2s infinite; | |
| } | |
| @keyframes flicker { | |
| 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; } | |
| 20%, 24%, 55% { opacity: 0.1; } | |
| } | |
| /* --- HEADER / BRANDING --- */ | |
| .top-bar { | |
| position: absolute; top: 20px; left: 20px; | |
| z-index: 100; | |
| font-family: var(--font-mono); | |
| font-size: 0.8rem; | |
| color: var(--text-dim); | |
| } | |
| .anycoder-link { | |
| color: var(--cyan); | |
| text-decoration: none; | |
| border: 1px solid var(--cyan-dim); | |
| padding: 4px 10px; | |
| border-radius: 4px; | |
| transition: 0.3s; | |
| } | |
| .anycoder-link:hover { | |
| background: var(--cyan-dim); | |
| box-shadow: 0 0 10px var(--cyan); | |
| } | |
| /* --- HERO SECTION --- */ | |
| .hero-section { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 40vh; | |
| padding-top: 8vh; | |
| transition: min-height 0.5s ease, padding 0.5s ease; | |
| position: relative; | |
| z-index: 5; | |
| } | |
| .hero-section.active-search { | |
| min-height: 15vh; | |
| padding-top: 2vh; | |
| opacity: 0.8; | |
| transform: translateY(-20px); | |
| } | |
| .logo-tkx { | |
| font-size: 8vw; | |
| font-weight: 900; | |
| letter-spacing: -0.1em; | |
| background: linear-gradient(180deg, #fff 0%, #43d172 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| margin: 0; | |
| filter: drop-shadow(0 0 20px rgba(43, 211, 72, 0.3)); | |
| line-height: 1; | |
| } | |
| .tagline { | |
| font-family: var(--font-mono); | |
| font-size: 0.8rem; | |
| letter-spacing: 4px; | |
| color: var(--cyan); | |
| text-transform: uppercase; | |
| margin-top: 10px; | |
| opacity: 0.8; | |
| } | |
| /* --- SEARCH BAR CONTAINER --- */ | |
| .search-wrapper { | |
| width: 100%; | |
| max-width: 800px; | |
| margin: 30px auto; | |
| z-index: 100; | |
| position: relative; | |
| } | |
| /* Google CSE Overrides */ | |
| .gsc-control-cse { | |
| background: transparent ; | |
| border: none ; | |
| padding: 0 ; | |
| font-family: var(--font-main) ; | |
| } | |
| .gsc-input-box { | |
| background: var(--bg-glass) ; | |
| border: 1px solid var(--glass-border) ; | |
| border-radius: 12px ; | |
| height: 60px ; | |
| box-shadow: 0 4px 20px rgba(0,0,0,0.5) ; | |
| transition: all 0.3s ease ; | |
| display: flex ; | |
| align-items: center ; | |
| padding: 0 ; | |
| overflow: hidden ; | |
| } | |
| .gsc-input-box:hover, .gsc-input-box-focus { | |
| border-color: var(--cyan) ; | |
| box-shadow: 0 0 25px var(--cyan-dim) ; | |
| transform: scale(1.01); | |
| } | |
| input.gsc-input { | |
| color: #fff ; | |
| font-size: 1.2rem ; | |
| background: none ; | |
| padding: 0 20px ; | |
| font-family: var(--font-mono) ; | |
| border-radius: 12px ; | |
| } | |
| .gsc-search-button-v2 { | |
| background: var(--cyan) ; | |
| color: #000 ; | |
| border-radius: 10px ; | |
| height: 40px ; | |
| width: 40px ; | |
| margin: 0 10px ; | |
| border: none ; | |
| cursor: pointer; | |
| box-shadow: 0 0 10px var(--cyan) ; | |
| transition: 0.2s; | |
| } | |
| .gsc-search-button-v2:hover { | |
| background: #fff ; | |
| box-shadow: 0 0 20px #fff ; | |
| } | |
| /* --- RESULTS AREA --- */ | |
| .results-area { | |
| width: 95%; | |
| max-width: 900px; | |
| margin: 0 auto; | |
| padding-bottom: 100px; | |
| z-index: 5; | |
| position: relative; | |
| } | |
| /* Result Card Styling */ | |
| .gsc-webResult.gsc-result { | |
| background: linear-gradient(145deg, rgba(20,20,20,0.6), rgba(10,10,10,0.8)) ; | |
| border: 1px solid var(--glass-border) ; | |
| margin-bottom: 25px ; | |
| padding: 25px ; | |
| border-radius: 16px ; | |
| transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .gsc-webResult.gsc-result::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; width: 3px; height: 100%; | |
| background: var(--cyan-dim); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .gsc-webResult.gsc-result:hover { | |
| border-color: var(--cyan) ; | |
| box-shadow: 0 10px 30px -10px rgba(0, 242, 255, 0.15); | |
| transform: translateY(-2px); | |
| } | |
| .gsc-webResult.gsc-result:hover::before { | |
| opacity: 1; | |
| background: var(--cyan); | |
| box-shadow: 0 0 10px var(--cyan); | |
| } | |
| .gs-title, .gs-title b { | |
| color: var(--cyan) ; | |
| font-size: 1.4rem ; | |
| font-weight: 600 ; | |
| text-decoration: none ; | |
| font-family: var(--font-main); | |
| } | |
| .gs-title:hover { | |
| text-shadow: 0 0 8px var(--cyan-dim); | |
| } | |
| .gs-snippet { | |
| color: var(--text-dim) ; | |
| font-size: 1rem ; | |
| line-height: 1.7 ; | |
| margin-top: 10px; | |
| } | |
| .gs-title a { | |
| text-decoration: none; | |
| } | |
| /* Pagination Styling */ | |
| .gsc-cursor-box { | |
| margin-top: 60px ; | |
| text-align: center ; | |
| background: rgba(0,0,0,0.3); | |
| padding: 20px; | |
| border-radius: 16px; | |
| border: 1px solid var(--glass-border); | |
| } | |
| .gsc-cursor-page { | |
| background: transparent ; | |
| color: var(--cyan) ; | |
| padding: 10px 15px ; | |
| border-radius: 6px ; | |
| border: 1px solid var(--cyan-dim) ; | |
| margin: 0 4px ; | |
| text-decoration: none ; | |
| font-family: var(--font-mono); | |
| transition: 0.3s; | |
| display: inline-block; | |
| } | |
| .gsc-cursor-page:hover { | |
| background: var(--cyan-dim) ; | |
| box-shadow: 0 0 10px var(--cyan); | |
| } | |
| .gsc-cursor-current-page { | |
| background: var(--cyan) ; | |
| color: #000 ; | |
| font-weight: bold ; | |
| border-color: var(--cyan) ; | |
| } | |
| /* Hide Google Branding */ | |
| .gcsc-branding, .gsc-adBlock { display: none ; } | |
| /* --- FOOTER STATUS --- */ | |
| .lagrangian-status { | |
| position: fixed; | |
| bottom: 20px; | |
| left: 20px; | |
| right: 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| color: var(--text-dim); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| background: rgba(0,0,0,0.8); | |
| padding: 10px 20px; | |
| border-radius: 8px; | |
| border: 1px solid var(--glass-border); | |
| z-index: 100; | |
| pointer-events: none; /* Let clicks pass through if needed */ | |
| } | |
| .status-links a { | |
| color: var(--cyan); | |
| margin-left: 15px; | |
| text-decoration: none; | |
| transition: 0.3s; | |
| } | |
| .status-links a:hover { | |
| color: #fff; | |
| text-shadow: 0 0 5px var(--cyan); | |
| } | |
| /* --- RESPONSIVE --- */ | |
| @media (max-width: 600px) { | |
| .logo-tkx { font-size: 4rem; } | |
| .hero-section { padding-top: 40px; } | |
| .lagrangian-status { flex-direction: column; gap: 10px; bottom: 10px; } | |
| .status-links { margin-top: 5px; } | |
| .status-links a { margin: 0 5px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- PRELOADER --> | |
| <div id="preloader"> | |
| <canvas id="matrix-canvas-loader"></canvas> | |
| <div class="loader-text">SYSTEM INIT...</div> | |
| </div> | |
| <!-- BACKGROUND CANVAS --> | |
| <canvas id="lagrangian-canvas"></canvas> | |
| <!-- HEADER LINK --> | |
| <div class="top-bar"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a> | |
| </div> | |
| <!-- MAIN HERO --> | |
| <div class="hero-section" id="hero"> | |
| <h1 class="logo-tkx">Matrix</h1> | |
| <div class="tagline">Lagrangian Prime Search</div> | |
| <div class="search-wrapper"> | |
| <!-- Google CSE Component --> | |
| <div class="gcse-search" data-resultsUrl="" data-newWindow="false" data-queryParameterName="q"></div> | |
| </div> | |
| </div> | |
| <!-- RESULTS TARGET --> | |
| <div class="results-area" id="results-target"></div> | |
| <!-- FOOTER STATUS --> | |
| <div class="lagrangian-status"> | |
| <div class="signal-info"> | |
| Signal: I/Q Demodulated | Matrix: Prime_Rank_1 | |
| </div> | |
| <div class="status-links"> | |
| <a href="#">Mode: Infinite_Flow</a> | | |
| <a href="#">LabX</a> | | |
| <a href="#">Nexus</a> | | |
| <a href="#">DeepMind</a> | |
| </div> | |
| </div> | |
| <!-- SCRIPTS --> | |
| <script> | |
| /* --- 1. PRELOADER MATRIX EFFECT --- */ | |
| document.addEventListener("DOMContentLoaded", function() { | |
| const preloader = document.getElementById('preloader'); | |
| const loaderCanvas = document.getElementById('matrix-canvas-loader'); | |
| if (loaderCanvas) { | |
| const ctx = loaderCanvas.getContext('2d'); | |
| const alphabet = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン01'; | |
| const fontSize = 16; | |
| let columns, rainDrops = []; | |
| const initializeMatrix = () => { | |
| loaderCanvas.width = window.innerWidth; | |
| loaderCanvas.height = window.innerHeight; | |
| columns = Math.floor(loaderCanvas.width / fontSize); | |
| rainDrops = []; | |
| for (let x = 0; x < columns; x++) { | |
| rainDrops[x] = 1; | |
| } | |
| }; | |
| const drawMatrix = () => { | |
| ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; | |
| ctx.fillRect(0, 0, loaderCanvas.width, loaderCanvas.height); | |
| ctx.fillStyle = '#0F0'; | |
| ctx.font = fontSize + 'px monospace'; | |
| for (let i = 0; i < rainDrops.length; i++) { | |
| const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length)); | |
| ctx.fillText(text, i * fontSize, rainDrops[i] * fontSize); | |
| if (rainDrops[i] * fontSize > loaderCanvas.height && Math.random() > 0.975) { | |
| rainDrops[i] = 0; | |
| } | |
| rainDrops[i]++; | |
| } | |
| }; | |
| initializeMatrix(); | |
| let matrixInterval = setInterval(drawMatrix, 33); | |
| window.addEventListener('resize', initializeMatrix); | |
| // Hide Preloader after 3 seconds | |
| setTimeout(() => { | |
| clearInterval(matrixInterval); | |
| preloader.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| }, 3000); | |
| } | |
| }); | |
| /* --- 2. LAGRANGIAN BACKGROUND (Waves & Primes) --- */ | |
| const canvas = document.getElementById('lagrangian-canvas'); | |
| const ctx = canvas.getContext('2d'); | |
| let width, height, time = 0; | |
| function resize() { | |
| width = canvas.width = window.innerWidth; | |
| height = canvas.height = window.innerHeight; | |
| } | |
| window.addEventListener('resize', resize); | |
| resize(); | |
| function isPrime(n) { | |
| for(let i=2, s=Math.sqrt(n); i<=s; i++) if(n%i===0) return false; | |
| return n>1; | |
| } | |
| function animateBg() { | |
| ctx.clearRect(0, 0, width, height); // Clear fully for cleaner look | |
| // Wave | |
| ctx.beginPath(); | |
| ctx.strokeStyle = 'rgba(0, 242, 255, 0.15)'; | |
| ctx.lineWidth = 2; | |
| for(let i=0; i<width; i+=5) { | |
| const wave = Math.sin(i * 0.01 + time) * 50 + Math.cos(i * 0.02 + time) * 20; | |
| ctx.lineTo(i, height/2 + wave); | |
| } | |
| ctx.stroke(); | |
| // Prime Matrix Points | |
| for(let i=0; i<50; i++) { | |
| const x = (i * 79) % width; | |
| const y = (i * 137) % height; | |
| if(isPrime(i + 7)) { | |
| const glow = Math.sin(time + i) * 0.5 + 0.5; | |
| ctx.fillStyle = `rgba(0, 242, 255, ${glow * 0.4})`; | |
| ctx.fillRect(x, y, 3, 3); | |
| } | |
| } | |
| time += 0.02; | |
| requestAnimationFrame(animateBg); | |
| } | |
| animateBg(); | |
| /* --- 3. GOOGLE CSE INJECTION --- */ | |
| (function() { | |
| var cx = '9df5cc74ffd07b41a'; // Placeholder ID - Replace with yours if needed | |
| var gcse = document.createElement('script'); | |
| gcse.type = 'text/javascript'; | |
| gcse.async = true; | |
| gcse.src = 'https://cse.google.com/cse.js?cx=' + cx; | |
| var s = document.getElementsByTagName('script')[0]; | |
| s.parentNode.insertBefore(gcse, s); | |
| })(); | |
| /* --- 4. UI LOGIC (Search Interaction) --- */ | |
| window.addEventListener('load', function() { | |
| const hero = document.getElementById('hero'); | |
| // Check for results periodically to adjust UI height | |
| const checkSearch = setInterval(() => { | |
| const results = document.querySelector('.gsc-results-wrapper-visible'); | |
| if (results) { | |
| hero.classList.add('active-search'); | |
| clearInterval(checkSearch); | |
| } | |
| }, 500); | |
| }); | |
| /* --- 5. SECURITY / SHIELD --- */ | |
| (function() { | |
| 'use strict'; | |
| document.addEventListener('contextmenu', function(e) { e.preventDefault(); }, false); | |
| document.addEventListener('keydown', function(e) { | |
| if (e.keyCode === 123 || (e.ctrlKey && e.shiftKey && e.keyCode === 73) || (e.ctrlKey && e.keyCode === 85)) { | |
| e.preventDefault(); | |
| return false; | |
| } | |
| }, false); | |
| // Anti-debugger loop | |
| setInterval(function() { | |
| (function() { | |
| (function a() { | |
| try { | |
| (function b(i) { | |
| if (("" + i / i).length !== 1 || i % 20 === 0) { | |
| (function() {}).constructor("debugger")(); | |
| } else { | |
| debugger; | |
| } | |
| b(++i); | |
| })(0); | |
| } catch (e) { | |
| setTimeout(a, 50); | |
| } | |
| })(); | |
| })(); | |
| }, 100); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |