Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <!-- SEO & Meta Tags as requested --> | |
| <title>FransixWeb | Cyber Tool Suite</title> | |
| <meta name="robots" content="index, follow"> | |
| <link rel="canonical" href="https://fransixweb.url"> | |
| <link rel="alternate" type="application/atom+xml" title="FransixWeb RSS" href="https://fransixweb.url/rss"> | |
| <meta name="keywords" content="Cyber, Neon, WebDev, Video Stabilizer, APK Converter, Inspector, AI, AnyCoder"> | |
| <meta name="description" content="Advanced Cyberpunk Web Interface for Video Processing, Code Extraction and Storage Management."> | |
| <!-- Open Graph / Facebook --> | |
| <meta property="og:title" content="FransixWeb Cyber Suite"> | |
| <meta property="og:type" content="website"> | |
| <meta property="og:url" content="https://fransixweb.url"> | |
| <meta property="og:image" content="https://fransixweb.url/preview.png"> | |
| <meta property="og:site_name" content="FransixWeb"> | |
| <meta property="fb:page_id" content="123456789"> | |
| <meta property="fb:app_id" content="987654321"> | |
| <meta property="fb:admins" content="1000003805"> | |
| <!-- Twitter --> | |
| <meta name="twitter:card" content="summary_large_image"> | |
| <meta name="twitter:site" content="@fransixweb"> | |
| <meta name="twitter:description" content="Cyberpunk styled web tools for video and code."> | |
| <!-- JSON LD --> | |
| <script type="application/ld+json"> | |
| { | |
| "@context": "https://schema.org", | |
| "@type": "WebSite", | |
| "name": "FransixWeb", | |
| "url": "https://fransixweb.url", | |
| "description": "Cyberpunk Tool Suite" | |
| } | |
| </script> | |
| <!-- Icons --> | |
| <link rel="shortcut icon" href="https://cdn-icons-png.flaticon.com/512/2888/2888407.png"> | |
| <link rel="apple-touch-icon-precomposed" href="https://cdn-icons-png.flaticon.com/512/2888/2888407.png"> | |
| <!-- Import Fonts & Icons --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;500;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* --- CYBER GHETTO STYLE & MODERN CSS --- */ | |
| :root { | |
| --neon-cyan: #00f3ff; | |
| --neon-pink: #ff00ff; | |
| --neon-green: #0aff00; | |
| --dark-bg: #050505; | |
| --panel-bg: rgba(20, 20, 25, 0.85); | |
| --grid-color: rgba(0, 243, 255, 0.1); | |
| --text-main: #e0e0e0; | |
| --border-color: #333; | |
| } | |
| * { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--neon-cyan) var(--dark-bg); } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| background-color: var(--dark-bg); | |
| background-image: | |
| linear-gradient(var(--grid-color) 1px, transparent 1px), | |
| linear-gradient(90deg, var(--grid-color) 1px, transparent 1px), | |
| radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%); | |
| background-size: 40px 40px, 40px 40px, 100% 100%; | |
| font-family: 'Rajdhani', sans-serif; | |
| color: var(--text-main); | |
| overflow-x: hidden; | |
| } | |
| /* Solar Eclipse Fog Effect */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| top: -50%; left: -50%; width: 200%; height: 200%; | |
| background: radial-gradient(circle, rgba(255, 0, 255, 0.05) 0%, transparent 60%); | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| /* Layout */ | |
| .app-container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); | |
| gap: 20px; | |
| } | |
| /* Header */ | |
| header { | |
| grid-column: 1 / -1; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 20px; | |
| border-bottom: 1px solid var(--neon-cyan); | |
| background: rgba(0,0,0,0.5); | |
| backdrop-filter: blur(5px); | |
| margin-bottom: 20px; | |
| } | |
| .brand { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 2rem; | |
| font-weight: bold; | |
| text-transform: uppercase; | |
| color: #fff; | |
| text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan); | |
| letter-spacing: 2px; | |
| } | |
| .anycoder-link { | |
| color: var(--neon-pink); | |
| text-decoration: none; | |
| font-weight: bold; | |
| border: 1px solid var(--neon-pink); | |
| padding: 8px 15px; | |
| transition: all 0.3s; | |
| text-transform: uppercase; | |
| } | |
| .anycoder-link:hover { | |
| background: var(--neon-pink); | |
| color: #000; | |
| box-shadow: 0 0 15px var(--neon-pink); | |
| } | |
| /* Panels */ | |
| .panel { | |
| background: var(--panel-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| position: relative; | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .panel:hover { | |
| border-color: var(--neon-cyan); | |
| box-shadow: 0 0 15px rgba(0, 243, 255, 0.2); | |
| } | |
| .panel-header { | |
| background: rgba(0,0,0,0.6); | |
| padding: 15px; | |
| border-bottom: 1px solid var(--border-color); | |
| font-family: 'Orbitron', sans-serif; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .panel-header i { color: var(--neon-green); } | |
| .panel-body { padding: 20px; flex-grow: 1; } | |
| /* UI Elements */ | |
| .cyber-btn { | |
| background: transparent; | |
| color: var(--neon-cyan); | |
| border: 1px solid var(--neon-cyan); | |
| padding: 10px 20px; | |
| font-family: 'Rajdhani', sans-serif; | |
| font-weight: bold; | |
| text-transform: uppercase; | |
| cursor: pointer; | |
| transition: 0.2s; | |
| width: 100%; | |
| margin-top: 10px; | |
| } | |
| .cyber-btn:hover { | |
| background: var(--neon-cyan); | |
| color: #000; | |
| box-shadow: 0 0 15px var(--neon-cyan); | |
| } | |
| input[type="file"], input[type="text"], select { | |
| width: 100%; | |
| padding: 10px; | |
| background: rgba(0,0,0,0.5); | |
| border: 1px solid #444; | |
| color: #fff; | |
| margin-bottom: 10px; | |
| font-family: 'Rajdhani', sans-serif; | |
| } | |
| .drop-zone { | |
| border: 2px dashed var(--border-color); | |
| padding: 30px; | |
| text-align: center; | |
| color: #888; | |
| transition: 0.3s; | |
| cursor: pointer; | |
| } | |
| .drop-zone.dragover { border-color: var(--neon-pink); color: var(--neon-pink); background: rgba(255,0,255,0.05); } | |
| /* Progress Bar */ | |
| .progress-container { | |
| width: 100%; | |
| background: #222; | |
| height: 10px; | |
| margin-top: 15px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink)); | |
| width: 0%; | |
| transition: width 0.4s; | |
| box-shadow: 0 0 10px var(--neon-cyan); | |
| } | |
| /* Inspector Grid */ | |
| .inspector-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 1fr; | |
| gap: 10px; | |
| font-size: 0.8em; | |
| color: #aaa; | |
| } | |
| .prop-box { | |
| background: rgba(255,255,255,0.05); | |
| padding: 5px; | |
| border-left: 2px solid var(--neon-green); | |
| } | |
| /* Video Canvas */ | |
| canvas { | |
| width: 100%; | |
| background: #000; | |
| border: 1px solid #333; | |
| } | |
| /* Tag Cloud */ | |
| .tag-cloud { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin-top: 10px; | |
| } | |
| .tag { | |
| font-size: 0.8em; | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| background: rgba(255,255,255,0.1); | |
| cursor: pointer; | |
| transition: 0.2s; | |
| } | |
| .tag:hover { background: var(--neon-pink); color: #000; } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .app-container { grid-template-columns: 1fr; } | |
| } | |
| /* Glitch Animation */ | |
| @keyframes glitch { | |
| 0% { transform: translate(0) } | |
| 20% { transform: translate(-2px, 2px) } | |
| 40% { transform: translate(-2px, -2px) } | |
| 60% { transform: translate(2px, 2px) } | |
| 80% { transform: translate(2px, -2px) } | |
| 100% { transform: translate(0) } | |
| } | |
| .glitch:hover { animation: glitch 0.2s linear infinite; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Header --> | |
| <header> | |
| <div class="brand glitch"> | |
| <i class="fa-solid fa-network-wired"></i> FransixWeb.((i*i+i)^exp) | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link"> | |
| Built with AnyCoder <i class="fa-solid fa-external-link-alt"></i> | |
| </a> | |
| </header> | |
| <!-- Panel 1: SEO & Metadata Inspector --> | |
| <div class="panel"> | |
| <div class="panel-header"> | |
| <i class="fa-solid fa-tags"></i> Metadata & SEO Analyzer | |
| </div> | |
| <div class="panel-body"> | |
| <p style="font-size: 0.9em; color: #aaa;">URL: <span style="color:var(--neon-cyan)">https://fransixweb.url</span></p> | |
| <input type="text" id="urlInput" placeholder="Enter URL to scan..." value="https://fransixweb.url"> | |
| <button class="cyber-btn" onclick="analyzeSEO()">Analyze Metadata</button> | |
| <div id="seoResults" style="margin-top: 15px; display:none;"> | |
| <div class="inspector-grid"> | |
| <div class="prop-box"><strong>Title:</strong> <span id="resTitle">-</span></div> | |
| <div class="prop-box"><strong>Robots:</strong> <span id="resRobots">-</span></div> | |
| <div class="prop-box"><strong>OG Type:</strong> <span id="resOg">-</span></div> | |
| <div class="prop-box"><strong>Canonical:</strong> <span id="resCan">-</span></div> | |
| <div class="prop-box"><strong>Keywords:</strong> <span id="resKeys">-</span></div> | |
| <div class="prop-box"><strong>FB Admins:</strong> <span id="resFb">-</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Panel 2: Video Auto-Zoom & Stabilizer --> | |
| <div class="panel"> | |
| <div class="panel-header"> | |
| <i class="fa-solid fa-video"></i> Video Stabilizer & Zoom | |
| </div> | |
| <div class="panel-body"> | |
| <div class="drop-zone" id="videoDropZone"> | |
| Drag & Drop Video or Click to Upload | |
| <input type="file" id="videoInput" accept="video/*" style="display:none"> | |
| </div> | |
| <div class="control-group" style="margin-top: 15px;"> | |
| <label>Analysis Method</label> | |
| <select id="analysisMethod"> | |
| <option value="brightness">Helligkeits-Fokus</option> | |
| <option value="contrast">Kontrast-Fokus</option> | |
| </select> | |
| </div> | |
| <div class="control-group"> | |
| <label>Zoom Level: <span id="zoomVal">1.2x</span></label> | |
| <input type="range" id="zoomRange" min="1" max="2" step="0.1" value="1.2"> | |
| </div> | |
| <button class="cyber-btn" id="processBtn" disabled>Process Video</button> | |
| <div style="margin-top: 15px; text-align: center;"> | |
| <canvas id="previewCanvas"></canvas> | |
| <p style="font-size: 0.8em; color: #666;">Live Preview Analysis</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Panel 3: APK/Python Storage Converter --> | |
| <div class="panel"> | |
| <div class="panel-header"> | |
| <i class="fa-solid fa-microchip"></i> Storage & APK Converter | |
| </div> | |
| <div class="panel-body"> | |
| <p style="font-size:0.9em;">Full Storage Scan & Reconstruction Engine</p> | |
| <div class="drop-zone" id="storageDropZone" style="border-color: var(--neon-green)"> | |
| <i class="fa-solid fa-database"></i> Drop Folders (JAR/HTML/Python) | |
| </div> | |
| <div id="conversionStats" style="margin-top: 20px;"> | |
| <div style="display:flex; justify-content:space-between; font-size:0.8em;"> | |
| <span>Status: <span id="convStatus" style="color:var(--neon-green)">Idle</span></span> | |
| <span>File: <span id="convFile">-</span></span> | |
| </div> | |
| <div class="progress-container"> | |
| <div class="progress-bar" id="convProgress"></div> | |
| </div> | |
| </div> | |
| <div class="tag-cloud"> | |
| <div class="tag">Python 3.11</div> | |
| <div class="tag">Dex Compiler</div> | |
| <div class="tag">ApkSigner</div> | |
| <div class="tag">JSoup</div> | |
| <div class="tag">Selenium</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Panel 4: Web Code Inspector (Extension) --> | |
| <div class="panel"> | |
| <div class="panel-header"> | |
| <i class="fa-solid fa-microscope"></i> DOM Inspector & XPath | |
| </div> | |
| <div class="panel-body"> | |
| <div style="display:flex; gap:10px; margin-bottom:10px;"> | |
| <button class="cyber-btn" id="inspectorToggle" style="flex:1; background: #333; border-color:#666;">Start Inspector</button> | |
| </div> | |
| <div id="inspectorOverlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:9990; cursor:crosshair;"></div> | |
| <div id="inspectorInfo" style="background: rgba(0,0,0,0.3); padding: 10px; border: 1px solid #444;"> | |
| <p style="margin:0; color: var(--neon-cyan);">Hover over elements to see properties.</p> | |
| <div class="inspector-grid" style="margin-top:10px;"> | |
| <div class="prop-box">Tag: <span id="insTag">-</span></div> | |
| <div class="prop-box">Class: <span id="insClass">-</span></div> | |
| <div class="prop-box">ID: <span id="insId">-</span></div> | |
| </div> | |
| <div class="prop-box" style="margin-top:5px;">XPath: <span id="insXPath" style="color:var(--neon-pink); font-family:monospace;">-</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| /* --- JavaScript Logic --- */ | |
| // 1. SEO Analyzer Logic | |
| function analyzeSEO() { | |
| const url = document.getElementById('urlInput').value; | |
| const results = document.getElementById('seoResults'); | |
| // Simulating fetching data based on the prompt's metadata | |
| results.style.display = 'block'; | |
| document.getElementById('resTitle').textContent = document.title; | |
| document.getElementById('resRobots').textContent = document.querySelector('meta[name="robots"]').content; | |
| document.getElementById('resOg').textContent = document.querySelector('meta[property="og:type"]').content; | |
| document.getElementById('resCan').textContent = document.querySelector('link[rel="canonical"]').href; | |
| document.getElementById('resKeys').textContent = document.querySelector('meta[name="keywords"]').content; | |
| document.getElementById('resFb').textContent = document.querySelector('meta[property="fb:admins"]').content; | |
| } | |
| // 2. Video Stabilizer Logic | |
| const videoDrop = document.getElementById('videoDropZone'); | |
| const videoInput = document.getElementById('videoInput'); | |
| const videoEl = document.createElement('video'); | |
| const canvas = document.getElementById('previewCanvas'); | |
| const ctx = canvas.getContext('2d'); | |
| const processBtn = document.getElementById('processBtn'); | |
| const zoomRange = document.getElementById('zoomRange'); | |
| let currentVideoFile = null; | |
| videoDrop.addEventListener('click', () => videoInput.click()); | |
| videoDrop.addEventListener('dragover', (e) => { e.preventDefault(); videoDrop.classList.add('dragover'); }); | |
| videoDrop.addEventListener('dragleave', () => videoDrop.classList.remove('dragover')); | |
| videoDrop.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| videoDrop.classList.remove('dragover'); | |
| handleVideo(e.dataTransfer.files[0]); | |
| }); | |
| videoInput.addEventListener('change', (e) => handleVideo(e.target.files[0])); | |
| zoomRange.addEventListener('input', (e) => { | |
| document.getElementById('zoomVal').textContent = e.target.value + 'x'; | |
| drawFrame(); | |
| }); | |
| function handleVideo(file) { | |
| if(!file.type.startsWith('video/')) return alert('Video file required'); | |
| currentVideoFile = file; | |
| const url = URL.createObjectURL(file); | |
| videoEl.src = url; | |
| videoDrop.innerHTML = `<i class="fa-solid fa-check"></i> ${file.name}`; | |
| processBtn.disabled = false; | |
| videoEl.onloadeddata = () => { | |
| canvas.width = 300; | |
| canvas.height = 150; | |
| drawFrame(); | |
| }; | |
| } | |
| function drawFrame() { | |
| // Simple Analysis: Brightness Center of Mass | |
| if(!videoEl.src) return; | |
| const w = videoEl.videoWidth; | |
| const h = videoEl.videoHeight; | |
| // Draw scaled down to temp canvas for analysis | |
| const tmpC = document.createElement('canvas'); | |
| tmpC.width = w; tmpC.height = h; | |
| const tmpCtx = tmpC.getContext('2d'); | |
| tmpCtx.drawImage(videoEl, 0, 0, w, h); | |
| const frame = tmpCtx.getImageData(0, 0, w, h); | |
| const data = frame.data; | |
| // Calculate center of brightness | |
| let totalX = 0, totalY = 0, totalBright = 0; | |
| for(let y=0; y<h; y+=10) { | |
| for(let x=0; x<w; x+=10) { | |
| const i = (y * w + x) * 4; | |
| const brightness = (data[i]+data[i+1]+data[i+2])/3; | |
| if(brightness > 50) { // Filter dark noise | |
| totalX += x * brightness; | |
| totalY += y * brightness; | |
| totalBright += brightness; | |
| } | |
| } | |
| } | |
| const centerX = totalX / totalBright; | |
| const centerY = totalY / totalBright; | |
| // Render to preview canvas with Zoom | |
| ctx.drawImage(videoEl, 0, 0, w, h); // Clear | |
| const zoom = parseFloat(zoomRange.value); | |
| const cropW = w / zoom; | |
| const cropH = h / zoom; | |
| // Draw the zoomed version on top (simulated) | |
| ctx.drawImage(videoEl, | |
| centerX - cropW/2, centerY - cropH/2, cropW, cropH, | |
| 0, 0, canvas.width, canvas.height | |
| ); | |
| // Draw reticle | |
| ctx.strokeStyle = '#0aff00'; | |
| ctx.lineWidth = 2; | |
| ctx.beginPath(); | |
| ctx.arc(centerX * (canvas.width/w), centerY * (canvas.height/h), 10, 0, Math.PI*2); | |
| ctx.stroke(); | |
| } | |
| processBtn.addEventListener('click', () => { | |
| if(!currentVideoFile) return; | |
| const method = document.getElementById('analysisMethod').value; | |
| alert(`Starting Auto-Stabilizer...\nMethod: ${method}\nThis runs a client-side analysis simulation.`); | |
| // In a real full app, this would trigger the frame-by-frame loop logic from the prompt | |
| }); | |
| // 3. Storage Converter Logic | |
| const storageDrop = document.getElementById('storageDropZone'); | |
| const convStatus = document.getElementById('convStatus'); | |
| const convFile = document.getElementById('convFile'); | |
| const convBar = document.getElementById('convProgress'); | |
| let isConverting = false; | |
| storageDrop.addEventListener('dragover', (e) => { e.preventDefault(); storageDrop.style.borderColor = 'var(--neon-pink)'; }); | |
| storageDrop.addEventListener('dragleave', () => storageDrop.style.borderColor = 'var(--neon-green)'); | |
| storageDrop.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| storageDrop.style.borderColor = 'var(--neon-green)'; | |
| if(!isConverting) runConversionSimulation(); | |
| }); | |
| function runConversionSimulation() { | |
| isConverting = true; | |
| const files = ['app.jar', 'index.html', 'style.css', 'script.py', 'libmodule.so']; | |
| let step = 0; | |
| const interval = setInterval(() => { | |
| step++; | |
| const pct = Math.min(step * 10, 100); | |
| convBar.style.width = pct + '%'; | |
| if(pct < 20) { | |
| convStatus.textContent = "Scanning Storage..."; | |
| convFile.textContent = "searching..."; | |
| } else if (pct < 50) { | |
| convStatus.textContent = "Detecting Formats..."; | |
| convFile.textContent = files[Math.floor(Math.random()*files.length)]; | |
| } else if (pct < 80) { | |
| convStatus.textContent = "Converting..."; | |
| convFile.textContent = "decoding...dexing..."; | |
| } else if (pct < 99) { | |
| convStatus.textContent = "Signing APK..."; | |
| convFile.textContent = "signing cert..."; | |
| } else { | |
| convStatus.textContent = "APK Ready!"; | |
| convFile.textContent = "app-final.apk"; | |
| convStatus.style.color = "var(--neon-pink)"; | |
| clearInterval(interval); | |
| isConverting = false; | |
| } | |
| }, 200); | |
| } | |
| // 4. DOM Inspector Logic | |
| const toggleBtn = document.getElementById('inspectorToggle'); | |
| const overlay = document.getElementById('inspectorOverlay'); | |
| let isInspecting = false; | |
| toggleBtn.addEventListener('click', () => { | |
| isInspecting = !isInspecting; | |
| overlay.style.display = isInspecting ? 'block' : 'none'; | |
| toggleBtn.textContent = isInspecting ? "Stop Inspector" : "Start Inspector"; | |
| toggleBtn.style.background = isInspecting ? 'var(--neon-pink)' : '#333'; | |
| toggleBtn.style.color = isInspecting ? '#000' : '#fff'; | |
| }); | |
| overlay.addEventListener('mouseover', (e) => { | |
| e.stopPropagation(); | |
| const el = e.target; | |
| if(el === overlay || el.tagName === 'BODY') return; | |
| // Highlight logic (simple) | |
| document.querySelectorAll('.highlight-inspect').forEach(x => x.style.outline = 'none'); | |
| const tag = el.tagName.toLowerCase(); | |
| const id = el.id ? '#'+el.id : ''; | |
| const cls = el.className ? '.'+el.className.split(' ').join('.') : ''; | |
| document.getElementById('insTag').textContent = tag; | |
| document.getElementById('insClass').textContent = el.className || '-'; | |
| document.getElementById('insId').textContent = el.id || '-'; | |
| // Generate simple XPath | |
| let path = tag; | |
| if(id) path += id; | |
| document.getElementById('insXPath').textContent = `//${path}`; | |
| }); | |
| </script> | |
| </body> | |
| </html> |