Spaces:
Running
Running
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"> | |
| <title>Universal Code Fixer & Visual FX Studio</title> | |
| <script src="https://cdn.jsdelivr.net/npm/@huggingface/transformers@2.20.0/dist/transformers.min.js"></script> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script> | |
| <style> | |
| :root { | |
| --primary: #00ff9d; | |
| --secondary: #ff0055; | |
| --bg: #050505; | |
| --panel: #111; | |
| --glass: rgba(17,17,17,0.85); | |
| } | |
| body { | |
| background: var(--bg); | |
| color: #eee; | |
| font-family: 'Fira Code', monospace; | |
| overflow-x: hidden; | |
| } | |
| ::-webkit-scrollbar { width: 6px; height: 6px; } | |
| ::-webkit-scrollbar-track { background: #0a0a0a; } | |
| ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; } | |
| ::-webkit-scrollbar-thumb:hover { background: var(--primary); } | |
| .glass-panel { | |
| background: var(--glass); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid #222; | |
| } | |
| .neon-border { | |
| border: 1px solid var(--primary); | |
| box-shadow: 0 0 10px rgba(0,255,157,0.2), inset 0 0 10px rgba(0,255,157,0.05); | |
| } | |
| .btn-neon { | |
| background: transparent; | |
| border: 1px solid var(--primary); | |
| color: var(--primary); | |
| padding: 8px 16px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| text-transform: uppercase; | |
| font-size: 11px; | |
| letter-spacing: 1px; | |
| } | |
| .btn-neon:hover { | |
| background: var(--primary); | |
| color: #000; | |
| box-shadow: 0 0 20px rgba(0,255,157,0.5); | |
| } | |
| .btn-danger { | |
| border-color: var(--secondary); | |
| color: var(--secondary); | |
| } | |
| .btn-danger:hover { | |
| background: var(--secondary); | |
| color: white; | |
| box-shadow: 0 0 20px rgba(255,0,85,0.5); | |
| } | |
| textarea, input[type="text"] { | |
| background: #0a0a0a; | |
| border: 1px solid #333; | |
| color: var(--primary); | |
| font-family: 'Fira Code', monospace; | |
| font-size: 12px; | |
| padding: 10px; | |
| outline: none; | |
| resize: vertical; | |
| } | |
| textarea:focus, input:focus { | |
| border-color: var(--primary); | |
| box-shadow: 0 0 5px rgba(0,255,157,0.3); | |
| } | |
| .loading-bar { | |
| height: 3px; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| transition: width 0.3s; | |
| } | |
| .status-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: #333; | |
| } | |
| .status-dot.ready { background: var(--primary); box-shadow: 0 0 10px var(--primary); } | |
| .status-dot.loading { background: #ffaa00; animation: pulse 1s infinite; } | |
| .status-dot.error { background: var(--secondary); } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| @keyframes slideIn { | |
| from { transform: translateX(-20px); opacity: 0; } | |
| to { transform: translateX(0); opacity: 1; } | |
| } | |
| .fx-layer { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| transition: opacity 0.5s; | |
| } | |
| .viewport-frame { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| .copy-btn { | |
| position: absolute; | |
| right: 5px; | |
| top: 5px; | |
| background: #222; | |
| border: 1px solid #444; | |
| color: #888; | |
| font-size: 10px; | |
| padding: 2px 6px; | |
| cursor: pointer; | |
| } | |
| .copy-btn:hover { | |
| color: var(--primary); | |
| border-color: var(--primary); | |
| } | |
| </style> | |
| </head> | |
| <body class="flex flex-col h-screen"> | |
| <!-- Header --> | |
| <header class="h-14 border-b border-[#222] flex justify-between items-center px-4 shrink-0 glass-panel z-30"> | |
| <div class="flex items-center gap-4"> | |
| <div class="text-[var(--primary)] font-bold tracking-widest text-lg">⚡ UNIVERSAL CODE FIXER</div> | |
| <div class="flex items-center gap-2"> | |
| <div id="modelStatus" class="status-dot"></div> | |
| <span id="modelStatusText" class="text-xs text-gray-500">Initialisiere...</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs text-gray-400 hover:text-[var(--primary)] transition-colors"> | |
| Built with <span class="text-[var(--primary)] underline">anycoder</span> | |
| </a> | |
| <button class="btn-neon" id="btnClearHistory">Clear History</button> | |
| </div> | |
| </header> | |
| <!-- Progress Bar --> | |
| <div id="progressContainer" class="h-1 bg-[#111]"> | |
| <div id="progressBar" class="loading-bar" style="width: 0%"></div> | |
| </div> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- LEFT: Code Input Panel --> | |
| <aside class="w-1/3 border-r border-[#222] glass-panel flex flex-col p-3 gap-3 z-20"> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-xs font-bold text-gray-400">CODE INPUT</div> | |
| <div class="flex gap-2"> | |
| <button class="btn-neon text-[10px]" id="btnLoadExample">Load Example</button> | |
| </div> | |
| </div> | |
| <div class="relative flex-1"> | |
| <textarea id="codeInput" class="w-full h-full min-h-[200px]" placeholder="// Paste your code here..."></textarea> | |
| <button class="copy-btn" onclick="copyToClipboard('codeInput')">COPY</button> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button class="btn-neon flex-1" id="btnFix">🔧 Auto Fix</button> | |
| <button class="btn-neon flex-1 btn-danger" id="btnExecute">▶ Execute</button> | |
| </div> | |
| <div class="text-xs text-gray-500"> | |
| Language: | |
| <select id="languageSelect" class="bg-[#0a0a0a] border border-[#333] text-[var(--primary)] px-2 py-1 ml-2"> | |
| <option value="javascript">JavaScript</option> | |
| <option value="python">Python</option> | |
| <option value="html">HTML</option> | |
| <option value="css">CSS</option> | |
| </select> | |
| </div> | |
| </aside> | |
| <!-- CENTER: Visual FX Viewport --> | |
| <main class="flex-1 relative flex flex-col bg-[#080808]"> | |
| <div class="h-8 border-b border-[#222] flex items-center px-3 gap-2 bg-[#0a0a0a]"> | |
| <span class="text-xs text-gray-400">VISUAL FX STUDIO</span> | |
| <div class="flex-1"></div> | |
| <label class="text-xs text-gray-500"> | |
| <input type="checkbox" id="enableBW" checked> B&W Overlay | |
| </label> | |
| <input type="range" id="bwAlpha" min="0" max="100" value="50" class="w-20"> | |
| <button class="btn-neon text-[10px]" id="btnCapture">📷 Capture</button> | |
| </div> | |
| <div id="viewportFrame" class="flex-1 relative viewport-frame"> | |
| <!-- Canvas layers for double exposure effect --> | |
| <canvas id="mainCanvas" class="absolute top-0 left-0 w-full h-full"></canvas> | |
| <canvas id="bwOverlay" class="fx-layer" style="opacity: 0.5; mix-blend-mode: saturation;"></canvas> | |
| <video id="videoSource" class="hidden" loop muted playsinline></video> | |
| </div> | |
| <!-- FX Controls --> | |
| <div class="h-32 border-t border-[#222] glass-panel p-3 flex gap-3 overflow-x-auto"> | |
| <div class="flex flex-col gap-2 min-w-[200px]"> | |
| <div class="text-xs text-gray-400">ANIMATION</div> | |
| <label class="text-xs text-gray-500">Speed: <input type="range" id="animSpeed" min="0" max="100" value="50" class="w-24 ml-2"></label> | |
| <label class="text-xs text-gray-500">Scale: <input type="range" id="animScale" min="10" max="200" value="100" class="w-24 ml-2"></label> | |
| </div> | |
| <div class="flex flex-col gap-2 min-w-[200px]"> | |
| <div class="text-xs text-gray-400">COLOR FILTER</div> | |
| <label class="text-xs text-gray-500">Hue: <input type="range" id="colorHue" min="0" max="360" value="0" class="w-24 ml-2"></label> | |
| <label class="text-xs text-gray-500">Sat: <input type="range" id="colorSat" min="0" max="100" value="50" class="w-24 ml-2"></label> | |
| </div> | |
| <div class="flex flex-col gap-2 min-w-[200px]"> | |
| <div class="text-xs text-gray-400">DOUBLE EXPOSURE</div> | |
| <label class="text-xs text-gray-500">Mix: <input type="range" id="exposureMix" min="0" max="100" value="50" class="w-24 ml-2"></label> | |
| <label class="text-xs text-gray-500">Offset: <input type="range" id="exposureOffset" min="0" max="100" value="0" class="w-24 ml-2"></label> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- RIGHT: Output & History --> | |
| <aside class="w-1/3 border-l border-[#222] glass-panel flex flex-col p-3 gap-3 z-20"> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-xs font-bold text-gray-400">OUTPUT & HISTORY</div> | |
| <button class="btn-neon text-[10px]" id="btnSaveOutput">💾 Save</button> | |
| </div> | |
| <div class="relative flex-1"> | |
| <textarea id="codeOutput" class="w-full h-full min-h-[200px]" placeholder="// Fixed code will appear here..." readonly></textarea> | |
| <button class="copy-btn" onclick="copyToClipboard('codeOutput')">COPY</button> | |
| </div> | |
| <div class="text-xs font-bold text-gray-400 mt-2">EXECUTION LOG</div> | |
| <div id="execLog" class="h-32 overflow-y-auto border border-[#222] p-2 bg-[#0a0a0a] text-[10px] font-mono"></div> | |
| </aside> | |
| </div> | |
| <!-- Hidden iframe for safe code execution --> | |
| <iframe id="sandboxFrame" class="hidden" sandbox="allow-scripts"></iframe> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |