Hugging Face's logo

Spaces:
HI7RAI
/
anycoder-c4b01a4c
Running

App Files Community
anycoder-c4b01a4c / index.html
HI7RAI's picture
HI7RAI
Update index.html
f469fe7 verified
Raw
History Blame Contribute Delete
104 kB
<!DOCTYPE html>
<html lang="I'll complete the HTML application based on the template provided. Let me create a full, working version with all
<!DOCTYhtml>
<html lang="de">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>AnyCoder - Unified Code Integration Platform</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 :root {
 --primary: #6366f1;
 --primary-dark: #4f46e5;
 --secondary: #10b981;
 --accent: #f59e0b;
 --danger: #ef4444;
 --dark: #1e1e2e;
 --dark-2: #2d2d3f;
 --dark-3: #3d3d52;
 --light: #f8fafc;
 --text: #e2e8f0;
 --text-muted: #94a3b8;
 --border: #475569;
 }
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: 'Segoe UI', system-ui, sans-serif;
 }
 body {
 background: var(--dark);
 color: var(--text);
 min-height: 100vh;
 overflow-x: hidden;
 }
 /* Header */
 .header {
 background: linear-gradient(135deg, var(--dark-2), var(--dark-3));
 padding: 1rem 2rem;
 display: flex;
 justify-content: space-between;
 align-items: center;
 border-bottom: 1px solid var(--border);
 position: sticky;
 top: 0;
 z-index: 100;
 backdrop-filter: blur(10px);
 }
 .logo {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 font-size: 1.5rem;
 font-weight: 700;
 color: var(--primary);
 text-decoration: none;
 }
 .logo i {
 font-size: 1.8rem;
 }
 .logo span {
 background: linear-gradient(135deg, var(--primary), var(--secondary));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 }
 .header-actions {
 display: flex;
 gap: 1rem;
 align-items: center;
 }
 .btn {
 padding: 0.5rem 1rem;
 border-radius: 8px;
 border: none;
 cursor: pointer;
 font-weight: 500;
 transition: all 0.3s ease;
 display: flex;
 align-items: center;
 gap: 0.5rem;
 }
 .btn-primary {
 background: var(--primary);
 color: white;
 }
 .btn-primary:hover {
 background: var(--primary-dark);
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
 }
 .btn-secondary {
 background: var(--dark-3);
 color: var(--text);
 border: 1px solid var(--border);
 }
 .btn-secondary:hover {
 background: var(--border);
 }
 .btn-success {
 background: var(--secondary);
 color: white;
 }
 .btn-danger {
 background: var(--danger);
 color: white;
 }
 /* Main Layout */
 .main-container {
 display: grid;
 grid-template-columns: 300px 1fr 350px;
 gap: 1rem;
 padding: 1rem;
 height: calc(100vh - 70px);
 }
 @media (max-width: 1200px) {
 .main-container {
 grid-template-columns: 1fr;
 height: auto;
 }
 }
 /* Panels */
 .panel {
 background: var(--dark-2);
 border-radius: 12px;
 border: 1px solid var(--border);
 display: flex;
 flex-direction: column;
 overflow: hidden;
 }
 .panel-header {
 padding: 1rem;
 background: var(--dark-3);
 border-bottom: 1px solid var(--border);
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
 .panel-title {
 font-weight: 600;
 display: flex;
 align-items: center;
 gap: 0.5rem;
 }
 .panel-content {
 padding: 1rem;
 flex: 1;
 overflow-y: auto;
 }
 /* Repository Inputs */
 .repo-section {
 margin-bottom: 1.5rem;
 }
 .repo-section h3 {
 font-size: 0.9rem;
 color: var(--text-muted);
 margin-bottom: 0.5rem;
 display: flex;
 align-items: center;
 gap: 0.5rem;
 }
 .repo-section h3 i {
 color: var(--primary);
 }
 .input-group {
 margin-bottom: 0.75rem;
 }
 .input-group label {
 display: block;
 font-size: 0.8rem;
 color: var(--text-muted);
 margin-bottom: 0.25rem;
 }
 .input-group input,
 .input-group textarea,
 .input-group select {
 width: 100%;
 padding: 0.6rem;
 background: var(--dark);
 border: 1px solid var(--border);
 border-radius: 6px;
 color: var(--text);
 font-size: 0.9rem;
 transition: all 0.3s ease;
 }
 .input-group input:focus,
 .input-group textarea:focus,
 .input-group select:focus {
 outline: none;
 border-color: var(--primary);
 box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
 }
 .input-group textarea {
 resize: vertical;
 min-height: 80px;
 font-family: 'Consolas', monospace;
 }
 /* Code Editor */
 .editor-container {
 display: flex;
 flex-direction: column;
 height: 100%;
 }
 .editor-toolbar {
 display: flex;
 gap: 0.5rem;
 padding: 0.75rem;
 background: var(--dark-3);
 border-bottom: 1px solid var(--border);
 flex-wrap: wrap;
 }
 .toolbar-btn {
 padding: 0.4rem 0.8rem;
 background: var(--dark);
 border: 1px solid var(--border);
 border-radius: 6px;
 color: var(--text-muted);
 cursor: pointer;
 font-size: 0.8rem;
 transition: all 0.2s ease;
 display: flex;
 align-items: center;
 gap: 0.3rem;
 }
 .toolbar-btn:hover {
 background: var(--primary);
 color: white;
 border-color: var(--primary);
 }
 .toolbar-btn.active {
 background: var(--primary);
 color: white;
 border-color: var(--primary);
 }
 .editor-wrapper {
 flex: 1;
 position: relative;
 overflow: hidden;
 }
 #codeEditor {
 width: 100%;
 height: 100%;
 background: var(--dark);
 color: var(--text);
 border: none;
 resize: none;
 padding: 1rem;
 font-family: 'Consolas', 'Monaco', monospace;
 font-size: 14px;
 line-height: 1.6;
 tab-size: 2;
 outline: none;
 }
 .line-numbers {
 position: absolute;
 left: 0;
 top: 0;
 width: 50px;
 height: 100%;
 background: var(--dark-2);
 color: var(--text-muted);
 text-align: right;
 padding: 1rem 0.5rem;
 font-family: 'Consolas', monospace;
 font-size: 14px;
 line-height: 1.6;
 pointer-events: none;
 border-right: 1px solid var(--border);
 overflow: hidden;
 }
 /* Right Panel - Tools */
 .tools-grid {
 display: grid;
 gap: 0.75rem;
 }
 .tool-card {
 background: var(--dark);
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 1rem;
 cursor: pointer;
 transition: all 0.3s ease;
 }
 .tool-card:hover {
 border-color: var(--primary);
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 .tool-card h4 {
 font-size: 0.9rem;
 margin-bottom: 0.5rem;
 display: flex;
 align-items: center;
 gap: 0.5rem;
 }
 .tool-card h4 i {
 color: var(--primary);
 }
 .tool-card p {
 font-size: 0.8rem;
 color: var(--text-muted);
 }
 /* Status Bar */
 .status-bar {
 background: var(--dark-2);
 padding: 0.75rem 1rem;
 display: flex;
 justify-content: space-between;
 align-items: center;
 border-top: 1px solid var(--border);
 font-size: 0.85rem;
 color: var(--text-muted);
 }
 .status-item {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 }
 .status-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--secondary);
 }
 .status-dot.error {
 background: var(--danger);
 }
 .status-dot.warning {
 background: var(--accent);
 }
 /* Suggestions Panel */
 .suggestions-container {
 position: absolute;
 background: var(--dark-3);
 border: 1px solid var(--border);
 border-radius: 8px;
 max-height: 200px;
 overflow-y: auto;
 display: none;
 z-index: 1000;
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
 }
 .suggestion-item {
 padding: 0.75rem 1rem;
 cursor: pointer;
 border-bottom: 1px solid var(--border);
 transition: background 0.2s ease;
 }
 .suggestion-item:hover {
 background: var(--primary);
 }
 .suggestion-item:last-child {
 border-bottom: none;
 }
 /* Notifications */
 .notification-container {
 position: fixed;
 top: 80px;
 right: 20px;
 z-index: 1000;
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
 }
 .notification {
 padding: 1rem 1.5rem;
 background: var(--dark-3);
 border-radius: 8px;
 border-left: 4px solid var(--primary);
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 animation: slideIn 0.3s ease;
 display: flex;
 align-items: center;
 gap: 0.75rem;
 }
 .notification.success {
 border-left-color: var(--secondary);
 }
 .notification.error {
 border-left-color: var(--danger);
 }
 .notification.warning {
 border-left-color: var(--accent);
 }
 @keyframes slideIn {
 from {
 transform: translateX(100%);
 opacity: 0;
 }
 to {
 transform: translateX(0);
 opacity: 1;
 }
 }
 /* Modal */
 .modal-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.7);
 display: none;
 justify-content: center;
 align-items: center;
 z-index: 2000;
 }
 .modal {
 background: var(--dark-2);
 border-radius: 12px;
 border: 1px solid var(--border);
 width: 90%;
 max-width: 600px;
 max-height: 80vh;
 overflow: hidden;
 animation: modalIn 0.3s ease;
 }
 @keyframes modalIn {
 from {
 transform: scale(0.9);
 opacity: 0;
 }
 to {
 transform: scale(1);
 opacity: 1;
 }
 }
 .modal-header {
 padding: 1rem;
 background: var(--dark-3);
 border-bottom: 1px solid var(--border);
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
 .modal-body {
 padding: 1rem;
 max-height: 60vh;
 overflow-y: auto;
 }
 .modal-footer {
 padding: 1rem;
 border-top: 1px solid var(--border);
 display: flex;
 justify-content: flex-end;
 gap: 0.5rem;
 }
 /* File List */
 .file-list {
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
 }
 .file-item {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0.75rem;
 background: var(--dark);
 border-radius: 6px;
 border: 1px solid var(--border);
 }
 .file-item:hover {
 border-color: var(--primary);
 }
 .file-info {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 }
 .file-icon {
 color: var(--accent);
 }
 .file-actions {
 display: flex;
 gap: 0.25rem;
 }
 .icon-btn {
 padding: 0.4rem;
 background: transparent;
 border: none;
 color: var(--text-muted);
 cursor: pointer;
 border-radius: 4px;
 transition: all 0.2s ease;
 }
 .icon-btn:hover {
 background: var(--dark-3);
 color: var(--primary);
 }
 /* Progress Bar */
 .progress-container {
 margin: 1rem 0;
 }
 .progress-bar {
 height: 8px;
 background: var(--dark);
 border-radius: 4px;
 overflow: hidden;
 }
 .progress-fill {
 height: 100%;
 background: linear-gradient(90deg, var(--primary), var(--secondary));
 width: 0%;
 transition: width 0.3s ease;
 }
 .progress-text {
 font-size: 0.8rem;
 color: var(--text-muted);
 margin-top: 0.25rem;
 }
 /* Tabs */
 .tabs {
 display: flex;
 border-bottom: 1px solid var(--border);
 background: var(--dark-3);
 }
 .tab {
 padding: 0.75rem 1.5rem;
 cursor: pointer;
 border: none;
 background: transparent;
 color: var(--text-muted);
 font-weight: 500;
 transition: all 0.2s ease;
 position: relative;
 }
 .tab:hover {
 color: var(--text);
 }
 .tab.active {
 color: var(--primary);
 }
 .tab.active::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 2px;
 background: var(--primary);
 }
 /* Auto-fix indicator */
 .autofix-indicator {
 position: fixed;
 bottom: 20px;
 right: 20px;
 background: var(--dark-3);
 padding: 0.75rem 1rem;
 border-radius: 8px;
 border: 1px solid var(--border);
 display: none;
 align-items: center;
 gap: 0.5rem;
 font-size: 0.85rem;
 animation: pulse 2s infinite;
 }
 @keyframes pulse {
 0%,
 100% {
 opacity: 1;
 }
 50% {
 opacity: 0.7;
 }
 }
 /* Syntax highlighting */
 .syntax-keyword {
 color: #c678dd;
 }
 .syntax-string {
 color: #98c379;
 }
 .syntax-number {
 color: #d19a66;
 }
 .syntax-comment {
 color: #5c6370;
 }
 .syntax-function {
 color: #61afef;
 }
 .syntax-tag {
 color: #e06c75;
 }
 .syntax-attr {
 color: #d19a66;
 }
 /* Loading spinner */
 .spinner {
 width: 20px;
 height: 20px;
 border: 2px solid var(--border);
 border-top-color: var(--primary);
 border-radius: 50%;
 animation: spin 1s linear infinite;
 }
 @keyframes spin {
 to {
 transform: rotate(360deg);
 }
 }
 /* Scrollbar */
 ::-webkit-scrollbar {
 width: 8px;
 height: 8px;
 }
 ::-webkit-scrollbar-track {
 background: var(--dark);
 }
 ::-webkit-scrollbar-thumb {
 background: var(--dark-3);
 border-radius: 4px;
 }
 ::-webkit-scrollbar-thumb:hover {
 background: var(--border);
 }
 /* Checkbox toggle */
 .toggle-container {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 margin-bottom: 0.5rem;
 }
 .toggle {
 width: 40px;
 height: 20px;
 background: var(--dark);
 border-radius: 10px;
 position: relative;
 cursor: pointer;
 transition: background 0.3s ease;
 }
 .toggle.active {
 background: var(--primary);
 }
 .toggle::after {
 content: '';
 position: absolute;
 width: 16px;
 height: 16px;
 background: white;
 border-radius: 50%;
 top: 2px;
 left: 2px;
 transition: transform 0.3s ease;
 }
 .toggle.active::after {
 transform: translateX(20px);
 }
 .toggle-label {
 font-size: 0.85rem;
 color: var(--text-muted);
 }
 /* Bracket matching highlight */
 .bracket-match {
 background: rgba(99, 102, 241, 0.3);
 border-radius: 2px;
 }
 .bracket-error {
 background: rgba(239, 68, 68, 0.3);
 border-bottom: 2px wavy var(--danger);
 }
 /* Console */
 .console-output {
 padding: 1rem;
 font-family: 'Consolas', monospace;
 font-size: 13px;
 background: var(--dark);
 height: 100%;
 overflow-y: auto;
 }
 .console-line {
 padding: 0.25rem 0;
 border-bottom: 1px solid var(--dark-3);
 }
 .console-line.error {
 color: var(--danger);
 }
 .console-line.warning {
 color: var(--accent);
 }
 .console-line.success {
 color: var(--secondary);
 }
 .console-line.info {
 color: var(--primary);
 }
 /* Preview */
 .preview-frame {
 width: 100%;
 height: 100%;
 border: none;
 background: white;
 }
 /* Tab content areas */
 .tab-content {
 display: none;
 height: 100%;
 }
 .tab-content.active {
 display: block;
 }
 /* Search replace */
 .search-bar {
 display: flex;
 gap: 0.5rem;
 padding: 0.5rem;
 background: var(--dark-3);
 border-bottom: 1px solid var(--border);
 }
 .search-bar input {
 flex: 1;
 padding: 0.5rem;
 background: var(--dark);
 border: 1px solid var(--border);
 border-radius: 4px;
 color: var(--text);
 }
 /* Quick actions */
 .quick-actions {
 display: flex;
 gap: 0.5rem;
 flex-wrap: wrap;
 margin-top: 1rem;
 }
 .quick-action {
 padding: 0.5rem 1rem;
 background: var(--dark);
 border: 1px solid var(--border);
 border-radius: 20px;
 font-size: 0.8rem;
 cursor: pointer;
 transition: all 0.2s ease;
 }
 .quick-action:hover {
 background: var(--primary);
 color: white;
 border-color: var(--primary);
 }
 /* Stats */
 .stats-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 0.5rem;
 margin-top: 1rem;
 }
 .stat-item {
 background: var(--dark);
 padding: 0.75rem;
 border-radius: 6px;
 text-align: center;
 }
 .stat-value {
 font-size: 1.2rem;
 font-weight: 600;
 color: var(--primary);
 }
 .stat-label {
 font-size: 0.7rem;
 color: var(--text-muted);
 }
 </style>
</head>
<body>
 <!-- Header -->
 <header class="header">
 <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="logo" target="_blank">
 <i class="fas fa-code"></i>
 <span>AnyCoder</span>
 </a>
 <div class="header-actions">
 <button class="btn btn-secondary" onclick="showAbout()">
 <i class="fas fa-info-circle"></i> Info
 </button>
 <button class="btn btn-primary" onclick="exportCode()">
 <i class="fas fa-download"></i> Export
 </button>
 <button class="btn btn-success" onclick="runCode()">
 <i class="fas fa-play"></i> Run
 </button>
 </div>
 </header>
<!-- Main Container -->
 <div class="main-container">
 <!-- Left Panel - Repository Inputs -->
 <div class="panel">
 <div class="panel-header">
 <div class="panel-title">
 <i class="fas fa-database"></i> Repositories
 </div>
 </div>
 <div class="panel-content">
 <!-- GitHub Section -->
 <div class="repo-section">
 <h3><i class="fab fa-github"></i> GitHub</h3>
 <div class="input-group">
 <label>Repository URL</label>
 <input type="text" id="githubRepo" placeholder="https://github.com/user/repo">
 </div>
 <div class="input-group">
 <label>Branch/Tag</label>
 <input type="text" id="githubBranch" placeholder="main" value="main">
 </div>
 <div class="input-group">
 <label>File Path (optional)</label>
 <input type="text" id="githubPath" placeholder="src/index.js">
 </div>
 </div>
<!-- HuggingFace Section -->
 <div class="repo-section">
 <h3><i class="fas fa-robot"></i> Hugging Face</h3>
 <div class="input-group">
 <label>Repository ID</label>
 <input type="text" id="hfRepo" placeholder="username/model-name">
 </div>
 <div class="input-group">
 <label>File Path</label>
 <input type="text" id="hfPath" placeholder="path/to/file.py">
 </div>
 </div>
<!-- Fetch Button -->
 <button class="btn btn-primary" style="width: 100%; margin-top: 1rem;" onclick="fetchFromRepo()">
 <i class="fas fa-download"></i> Fetch Content
 </button>
<!-- Progress -->
 <div class="progress-container" id="fetch
<!doctype html>
<html class="">
 <head>
 <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Enter a target URL or asset ID and click **EXTRACT** to simulate downloading the data, shown with a progress bar and log messages. Once the download finishes, press **INJECT .EXE** to create a visu..." />
<meta property="fb:app_id" content="1321688464574422" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@huggingface" />
<meta name="twitter:image" content="https://cdn-thumbnails.huggingface.co/social-thumbnails/spaces/HI7RAI/anycoder-c4b01a4c.png" />
<meta property="og:title" content="Anycoder C4b01a4c - a Hugging Face Space by HI7RAI" />
<meta property="og:description" content="Enter a target URL or asset ID and click **EXTRACT** to simulate downloading the data, shown with a progress bar and log messages. Once the download finishes, press **INJECT .EXE** to create a visu..." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://huggingface.co/spaces/HI7RAI/anycoder-c4b01a4c" />
<meta property="og:image" content="https://cdn-thumbnails.huggingface.co/social-thumbnails/spaces/HI7RAI/anycoder-c4b01a4c.png" />
<link rel="stylesheet" href="/front/build/kube-6b2adab/style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
 href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;1,200;1,300;1,400;1,600;1,700&display=swap"
 rel="stylesheet"
 />
<link
 href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600;700&display=swap"
 rel="stylesheet"
 />
<link
 rel="preload"
 href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.12.0/katex.min.css"
 as="style"
 onload="
 this.onload = null;
 this.rel = 'stylesheet';
 "
 />
<noscript>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.12.0/katex.min.css" />
 </noscript>
 <script>const guestTheme = document.cookie.match(/theme=(\w+)/)?.[1]; document.documentElement.classList.toggle('dark', guestTheme === 'dark' || ( (!guestTheme || guestTheme === 'system') && window.matchMedia('(prefers-color-scheme: dark)').matches));</script>
<link rel="canonical" href="https://huggingface.co/spaces/HI7RAI/anycoder-c4b01a4c"> <script type="application/ld+json">{
 "@context": "https:\/\/schema.org",
 "@type": "WebApplication",
 "name": "Anycoder C4b01a4c",
 "identifier": "HI7RAI\/anycoder-c4b01a4c",
 "creator": {
 "@type": "Person",
 "name": "mAX vORS",
 "url": "https:\/\/huggingface.co\/HI7RAI"
 },
 "applicationCategory": "AIApplication",
 "sameAs": "hi7rai-anycoder-c4b01a4c",
 "url": "https:\/\/huggingface.co\/spaces\/HI7RAI\/anycoder-c4b01a4c",
 "operatingSystem": "Web"
}</script>
<title>Anycoder C4b01a4c - a Hugging Face Space by HI7RAI</title>
<script defer src="/js/script.js"></script>
<script>
 ((window.plausible =
 window.plausible
 || function () {
 (plausible.q = plausible.q || []).push(arguments);
 }),
 (plausible.init =
 plausible.init
 || function (i) {
 plausible.o = i || {};
 }));
 plausible.init({
 customProperties: {
 loggedIn: "true",
 },
 endpoint: "/api/event",
 });
 </script>
<script>
 window.hubConfig = {"features":{"signupDisabled":false},"sshGitUrl":"git@hf.co","moonHttpUrl":"https:\/\/huggingface.co","captchaApiKey":"bd5f2066-93dc-4bdd-a64b-a24646ca3859","datasetViewerPublicUrl":"https:\/\/datasets-server.huggingface.co","stripePublicKey":"pk_live_x2tdjFXBCvXo2FFmMybezpeM00J6gPCAAc","environment":"production","userAgent":"HuggingFace (production)","spacesIframeDomain":"hf.space","spacesApiUrl":"https:\/\/api.hf.space","logoDev":{"apiUrl":"https:\/\/img.logo.dev\/","apiKey":"pk_UHS2HZOeRnaSOdDp7jbd5w"}};
 window.requestId = "Root=1-69c7dcdc-6678ccae1562f48d017c2e03";
 window.featureFlags = {};
 </script>
 <script type="text/javascript" src="https://de5282c3ca0c.edge.sdk.awswaf.com/de5282c3ca0c/526cf06acb0d/challenge.js" defer></script>
</head>
 <body class="flex flex-col min-h-dvh bg-white dark:bg-gray-950 text-black SpacePage">
 <!--[--><div class="flex min-h-dvh flex-col"><div class="SVELTE_HYDRATER contents" data-target="DeviceProvider" data-props="{}"><!----></div> <div class="SVELTE_HYDRATER contents" data-target="SystemThemeMonitor" data-props="{&quot;isLoggedIn&quot;:true}"><!----></div> <!--[-1--><!--]--> <!--[0--><!--[--><div class="SVELTE_HYDRATER contents" data-target="SpaceHeader" data-props="{&quot;activeTab&quot;:&quot;spaceApp&quot;,&quot;authLight&quot;:{&quot;csrfToken&quot;:&quot;eyJkYXRhIjp7ImV4cGlyYXRpb24iOjE3NzQ3OTIyODQ1MTYsInVzZXJJZCI6IjY2ZmQ3ZDlkNWZiZTIzZjBlYTVkYmM0MSJ9LCJzaWduYXR1cmUiOiIxODEzMGViZDg2YjAzMTYwNTBhYzI1YjRjYzY1YTIwZWMzNjliMTNhOGM0ZTVmMTc0OTc0ZmFmYjY1MTg0NzUyIn0=&quot;,&quot;hasHfLevelAccess&quot;:false,&quot;u&quot;:{&quot;avatarUrl&quot;:&quot;/avatars/0108fce6864070c3976e308a8145a61a.svg&quot;,&quot;isPro&quot;:false,&quot;orgs&quot;:[],&quot;user&quot;:&quot;HI7RAI&quot;,&quot;canPostBlog&quot;:false,&quot;canPostSocialPost&quot;:false,&quot;isPaperAuthor&quot;:false,&quot;canHaveBilling&quot;:true,&quot;canCreateOrg&quot;:true,&quot;theme&quot;:&quot;light&quot;,&quot;notifications&quot;:{&quot;org_suggestions&quot;:false},&quot;hardwareItems&quot;:[],&quot;hardwareItemsPrivate&quot;:false,&quot;usage&quot;:{&quot;storage&quot;:{&quot;used&quot;:667488029,&quot;count&quot;:75,&quot;usedPrivate&quot;:0,&quot;usedPublic&quot;:667488029,&quot;summary&quot;:{&quot;model&quot;:{&quot;used&quot;:0,&quot;usedPrivate&quot;:0,&quot;usedPublic&quot;:0,&quot;count&quot;:1},&quot;space&quot;:{&quot;used&quot;:667488029,&quot;usedPrivate&quot;:0,&quot;usedPublic&quot;:667488029,&quot;count&quot;:74}},&quot;lastMetronomeSentAt&quot;:&quot;2026-03-28T13:47:38.009Z&quot;},&quot;inference&quot;:{&quot;usedNanoUsd&quot;:0,&quot;numRequests&quot;:0,&quot;providerDetails&quot;:[],&quot;periodEnd&quot;:&quot;2026-03-31T23:59:59.999Z&quot;,&quot;periodStart&quot;:&quot;2026-03-01T00:00:00.000Z&quot;,&quot;includedNanoUsd&quot;:100000000,&quot;limitNanoUsd&quot;:100000000},&quot;zeroGpu&quot;:{&quot;base&quot;:210,&quot;current&quot;:210},&quot;lastUpdatedAt&quot;:&quot;2026-03-28T13:51:10.794Z&quot;,&quot;jobs&quot;:{&quot;totalMinutes&quot;:0,&quot;jobDetails&quot;:[],&quot;usedMicroUsd&quot;:0,&quot;periodStart&quot;:&quot;2026-03-01T00:00:00.000Z&quot;,&quot;periodEnd&quot;:&quot;2026-03-28T13:51:10.794Z&quot;}},&quot;welcomeLinks&quot;:[&quot;hf-spaces&quot;],&quot;hasProOrOrgPaidPlan&quot;:false}},&quot;author&quot;:{&quot;_id&quot;:&quot;66fd7d9d5fbe23f0ea5dbc41&quot;,&quot;avatarUrl&quot;:&quot;/avatars/0108fce6864070c3976e308a8145a61a.svg&quot;,&quot;fullname&quot;:&quot;mAX vORS&quot;,&quot;name&quot;:&quot;HI7RAI&quot;,&quot;type&quot;:&quot;user&quot;,&quot;isPro&quot;:false,&quot;isHf&quot;:false,&quot;isHfAdmin&quot;:false,&quot;isMod&quot;:false,&quot;followerCount&quot;:1,&quot;isUserFollowing&quot;:false},&quot;avatarUrl&quot;:&quot;/avatars/0108fce6864070c3976e308a8145a61a.svg&quot;,&quot;canDisable&quot;:false,&quot;canReadRepoSettings&quot;:true,&quot;canWriteRepoSettings&quot;:true,&quot;canWrite&quot;:true,&quot;discussionsStats&quot;:{&quot;closed&quot;:0,&quot;open&quot;:0,&quot;total&quot;:0},&quot;query&quot;:{},&quot;space&quot;:{&quot;author&quot;:&quot;HI7RAI&quot;,&quot;colorFrom&quot;:&quot;indigo&quot;,&quot;colorTo&quot;:&quot;blue&quot;,&quot;cardData&quot;:{&quot;title&quot;:&quot;Anycoder C4b01a4c&quot;,&quot;emoji&quot;:&quot;🏆&quot;,&quot;colorFrom&quot;:&quot;indigo&quot;,&quot;colorTo&quot;:&quot;blue&quot;,&quot;sdk&quot;:&quot;static&quot;,&quot;pinned&quot;:false,&quot;tags&quot;:[&quot;anycoder&quot;]},&quot;createdAt&quot;:&quot;2026-03-18T06:28:23.000Z&quot;,&quot;emoji&quot;:&quot;🏆&quot;,&quot;discussionsDisabled&quot;:false,&quot;discussionsSorting&quot;:&quot;recently-created&quot;,&quot;duplicationDisabled&quot;:false,&quot;id&quot;:&quot;HI7RAI/anycoder-c4b01a4c&quot;,&quot;isLikedByUser&quot;:false,&quot;watched&quot;:{&quot;isWatching&quot;:true,&quot;isMuted&quot;:false,&quot;mode&quot;:&quot;global&quot;},&quot;lastModified&quot;:&quot;2026-03-18T06:28:27.000Z&quot;,&quot;likes&quot;:0,&quot;pinned&quot;:false,&quot;private&quot;:false,&quot;visibility&quot;:&quot;public&quot;,&quot;gated&quot;:false,&quot;repoType&quot;:&quot;space&quot;,&quot;subdomain&quot;:&quot;hi7rai-anycoder-c4b01a4c&quot;,&quot;sdk&quot;:&quot;static&quot;,&quot;staticOrigin&quot;:&quot;index.html&quot;,&quot;title&quot;:&quot;Anycoder C4b01a4c&quot;,&quot;runtime&quot;:{&quot;stage&quot;:&quot;RUNNING&quot;,&quot;hardware&quot;:{&quot;current&quot;:null,&quot;requested&quot;:null},&quot;replicas&quot;:{&quot;requested&quot;:1,&quot;current&quot;:1}},&quot;iframe&quot;:{&quot;embedSrc&quot;:&quot;https://hi7rai-anycoder-c4b01a4c.static.hf.space&quot;,&quot;src&quot;:&quot;https://hi7rai-anycoder-c4b01a4c.static.hf.space/index.html&quot;},&quot;secrets&quot;:[],&quot;variables&quot;:[],&quot;linkedModels&quot;:[],&quot;linkedDatasets&quot;:[],&quot;linkedCollections&quot;:[],&quot;sha&quot;:&quot;13bd2db58220ebe4a1356904fbf3d3703f07378d&quot;,&quot;hasBlockedOids&quot;:false,&quot;region&quot;:&quot;us&quot;,&quot;tags&quot;:[&quot;static&quot;,&quot;anycoder&quot;,&quot;region:us&quot;]},&quot;u&quot;:{&quot;avatarUrl&quot;:&quot;/avatars/0108fce6864070c3976e308a8145a61a.svg&quot;,&quot;isPro&quot;:false,&quot;fullname&quot;:&quot;mAX vORS&quot;,&quot;user&quot;:&quot;HI7RAI&quot;,&quot;orgs&quot;:[],&quot;signup&quot;:{&quot;details&quot;:&quot;portaible&quot;},&quot;isHf&quot;:false,&quot;isMod&quot;:false,&quot;type&quot;:&quot;user&quot;,&quot;theme&quot;:&quot;light&quot;,&quot;canPay&quot;:false,&quot;spacesAvailableFlavors&quot;:[&quot;cpu-basic&quot;,&quot;cpu-upgrade&quot;,&quot;zero-a10g&quot;,&quot;t4-small&quot;,&quot;t4-medium&quot;,&quot;l4x1&quot;,&quot;l4x4&quot;,&quot;l40sx1&quot;,&quot;l40sx4&quot;,&quot;l40sx8&quot;,&quot;a10g-small&quot;,&quot;a10g-large&quot;,&quot;a10g-largex2&quot;,&quot;a10g-largex4&quot;,&quot;a100-large&quot;,&quot;a100x4&quot;,&quot;a100x8&quot;],&quot;canPostBlog&quot;:false,&quot;canPostSocialPost&quot;:false,&quot;isPaperAuthor&quot;:false,&quot;billingMode&quot;:&quot;prepaid&quot;,&quot;currentBalanceUsd&quot;:0},&quot;unreadNotifications&quot;:7,&quot;unreadChangelogCount&quot;:3,&quot;sessionUuid&quot;:&quot;aqDFn7hbEJMubdi55oUMU&quot;,&quot;hasPaidPlanEligibleOrg&quot;:false}"><!--[-1--><!--]--> <!--[0--><!--[0--><header class="from-gray-50-to-white bg-linear-to-t relative z-40 border-b border-gray-100 via-white pt-0.5 dark:via-gray-950"><div class="relative mx-4 mb-1 flex flex-col justify-between max-sm:mt-2 sm:mb-0 xl:flex-row"><div class="flex items-center justify-between xl:min-w-0"><h1 class="my-2 flex w-full min-w-0 flex-wrap items-center gap-y-2 text-lg leading-tight xl:flex-nowrap"><span class="flex shrink-0 flex-nowrap items-center"><a href="/spaces" class="hover:bg-linear-to-r peer order-last hidden font-bold hover:from-blue-600 hover:via-purple-600 hover:to-pink-600 hover:bg-clip-text hover:text-transparent sm:inline">Spaces</a> <svg class="hidden peer-hover:block mr-1.5 w-5 animate__animated animate__fadeInUp animate__fast" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M7.80914 18.7462V24.1907H13.2536V18.7462H7.80914Z" fill="#FF3270"></path><path d="M18.7458 18.7462V24.1907H24.1903V18.7462H18.7458Z" fill="#861FFF"></path><path d="M7.80914 7.80982V13.2543H13.2536V7.80982H7.80914Z" fill="#097EFF"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.41775C4 5.08246 5.08246 4 6.41775 4H14.6457C15.7626 4 16.7026 4.75724 16.9802 5.78629C18.1505 4.67902 19.7302 4 21.4685 4C25.0758 4 28.0003 6.92436 28.0003 10.5317C28.0003 12.27 27.3212 13.8497 26.2139 15.02C27.243 15.2977 28.0003 16.2376 28.0003 17.3545V25.5824C28.0003 26.9177 26.9177 28.0003 25.5824 28.0003H17.0635H14.9367H6.41775C5.08246 28.0003 4 26.9177 4 25.5824V15.1587V14.9367V6.41775ZM7.80952 7.80952V13.254H13.254V7.80952H7.80952ZM7.80952 24.1907V18.7462H13.254V24.1907H7.80952ZM18.7462 24.1907V18.7462H24.1907V24.1907H18.7462ZM18.7462 10.5317C18.7462 9.0283 19.9651 7.80952 21.4685 7.80952C22.9719 7.80952 24.1907 9.0283 24.1907 10.5317C24.1907 12.0352 22.9719 13.254 21.4685 13.254C19.9651 13.254 18.7462 12.0352 18.7462 10.5317Z" fill="black"></path><path d="M21.4681 7.80982C19.9647 7.80982 18.7458 9.02861 18.7458 10.5321C18.7458 12.0355 19.9647 13.2543 21.4681 13.2543C22.9715 13.2543 24.1903 12.0355 24.1903 10.5321C24.1903 9.02861 22.9715 7.80982 21.4681 7.80982Z" fill="#FFD702"></path></svg><!----> <a href="/" class="mr-0 w-5 peer-hover:hidden sm:mr-1.5"><img alt="Hugging Face's logo" src="/front/assets/huggingface_logo-noborder.svg" class="w-5"/></a></span> <hr class="rounded-xs mx-2 h-2 translate-y-px border-r dark:border-gray-600 xl:mx-2.5"/> <!--[0--><div class="group flex flex-none items-center"><div class="relative mr-1 flex items-center"><!--[-1--><!--]--> <!--[-1--><!--[--><span class="inline-block "><span class="contents"><!--[--><!--[--><a href="/HI7RAI" class="text-gray-400 hover:text-blue-600"><div class="flex-none "><img alt="" class="size-3.5 rounded-full flex-none select-none " src="/avatars/0108fce6864070c3976e308a8145a61a.svg" crossorigin="anonymous"/> <!--[-1--><!--]--></div><!----></a><!--]--><!--]--></span> <!--[-1--><!--]--></span><!--]--><!--]--></div> <!--[--><span class="inline-block "><span class="contents"><!--[--><!--[--><a href="/HI7RAI" class="text-gray-400 hover:text-blue-600">HI7RAI</a><!--]--><!--]--></span> <!--[-1--><!--]--></span><!--]--> <div class="mx-0.5 text-gray-300">/</div></div><!--]--> <div class="max-w-full xl:flex xl:min-w-0 xl:flex-nowrap xl:items-center xl:gap-x-1"><a class="break-words font-mono font-semibold hover:text-blue-600 text-[1.07rem] xl:truncate" href="/spaces/HI7RAI/anycoder-c4b01a4c">anycoder-c4b01a4c</a> <!--[0--><!----><button class="text-xs mr-3 focus:outline-hidden inline-flex cursor-pointer items-center text-sm mx-0.5 text-gray-600 " title="Copy space name to clipboard" type="button"><!--[0--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg><!--]--><!--]--> <!--[-1--><!--]--></button><!----><!--]--></div><!----> <!--[-1--><!--]--> <!--[-1--><!--]--> <!--[0--><div class="inline-flex items-center overflow-hidden whitespace-nowrap rounded-md border bg-white text-sm leading-none text-gray-500 mr-2 shrink-0"><button class="relative flex items-center overflow-hidden from-red-50 to-transparent dark:from-red-900 px-1.5 py-1 hover:bg-linear-to-t focus:outline-hidden" title="Like"><svg class="left-1.5 absolute" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" fill="currentColor"><path d="M22.45,6a5.47,5.47,0,0,1,3.91,1.64,5.7,5.7,0,0,1,0,8L16,26.13,5.64,15.64a5.7,5.7,0,0,1,0-8,5.48,5.48,0,0,1,7.82,0L16,10.24l2.53-2.58A5.44,5.44,0,0,1,22.45,6m0-2a7.47,7.47,0,0,0-5.34,2.24L16,7.36,14.89,6.24a7.49,7.49,0,0,0-10.68,0,7.72,7.72,0,0,0,0,10.82L16,29,27.79,17.06a7.72,7.72,0,0,0,0-10.82A7.49,7.49,0,0,0,22.45,4Z"></path></svg><!----> <!--[-1--><!--]--> <span class="ml-4 pl-0.5 ">like</span></button> <button class="focus:outline-hidden flex items-center border-l px-1.5 py-1 text-gray-400 hover:bg-gray-50 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-800" title="See users who liked this repository">0</button></div> <!--[-1--><!--]--><!--]--> <!--[-1--><!--]--> <!--[0--><!--]--> <!--[0--><!--[0--><span class="inline-block "><span class="contents"><!--[--><div class="cursor-pointer select-none overflow-hidden font-mono text-xs shrink-0 mr-2 flex items-center rounded-lg border leading-none dark:bg-gray-900
 border-green-100
 text-green-700 dark:text-green-500"><div class="inline-flex items-center whitespace-nowrap px-2 py-[0.32rem] dark:bg-gray-900 border-green-100 bg-green-50 hover:bg-green-100/70 hover:text-green-800 dark:hover:text-green-400"><!--[0--><!--[0--><!--[0--><div class="ml-0.5 mr-1.5 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-green-500"></div><!--]--><!--]--><!--]--> Running <!--[-1--><!--]--></div> <!--[-1--><!--]--></div><!--]--></span> <!--[-1--><!--]--></span><!--]--><!----> <!--[-1--><!--]--><!--]--> <!--[-1--><!--]--><!----> <!--[-1--><!--]--> <div class="xl:hidden"><div class="relative "><button class="btn px-1 py-1 text-sm translate-y-0 " type="button"><!--[0--><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="p-px" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><circle cx="16" cy="7" r="3" fill="currentColor"></circle><circle cx="16" cy="16" r="3" fill="currentColor"></circle><circle cx="16" cy="25" r="3" fill="currentColor"></circle></svg><!----> <!--[-1--><!--]--><!--]--><!--]--><!--]--> <!--[-1--><!--]--></button> <!--[-1--><!--]--></div><!----></div> <!--[0--><dialog class="shadow-alternate z-40 mx-4 my-auto h-fit select-text overflow-hidden rounded-xl bg-white max-sm:max-w-[calc(100dvw-2rem)] sm:mx-auto lg:mt-26 md:portrait:mt-30 xl:mt-30 2xl:mt-32 w-full lg:w-7/12 max-w-[calc(100%-4rem)] md:max-w-2xl "><div tabindex="-1" class="outline-none focus:ring-0 focus-visible:ring-0"><!--[-1--><!--]--></div></dialog><!--]--> <!--[-1--><!--]--><!----></h1> <div class="flex flex-none items-center justify-center p-0.5 place-self-start p-0 max-sm:absolute max-sm:-right-4 max-sm:-top-2 sm:my-2 xl:hidden aspect-1"><button class="relative z-40 flex h-6 w-8 items-center justify-center" type="button"><!--[--><svg width="1em" height="1em" viewBox="0 0 10 10" class="text-xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" preserveAspectRatio="xMidYMid meet" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.65039 2.9999C1.65039 2.8066 1.80709 2.6499 2.00039 2.6499H8.00039C8.19369 2.6499 8.35039 2.8066 8.35039 2.9999C8.35039 3.1932 8.19369 3.3499 8.00039 3.3499H2.00039C1.80709 3.3499 1.65039 3.1932 1.65039 2.9999ZM1.65039 4.9999C1.65039 4.8066 1.80709 4.6499 2.00039 4.6499H8.00039C8.19369 4.6499 8.35039 4.8066 8.35039 4.9999C8.35039 5.1932 8.19369 5.3499 8.00039 5.3499H2.00039C1.80709 5.3499 1.65039 5.1932 1.65039 4.9999ZM2.00039 6.6499C1.80709 6.6499 1.65039 6.8066 1.65039 6.9999C1.65039 7.1932 1.80709 7.3499 2.00039 7.3499H8.00039C8.19369 7.3499 8.35039 7.1932 8.35039 6.9999C8.35039 6.8066 8.19369 6.6499 8.00039 6.6499H2.00039Z"></path></svg><!--]--> <!--[0--><div class="bg-linear-to-br absolute bottom-0.5 right-1.5 z-20 h-2 w-2 rounded-full from-yellow-400 to-orange-500 ring-1 ring-white dark:ring-gray-950"></div><!--]--></button> <!--[-1--><!--]--></div><!----></div> <div class="hidden flex-row items-center justify-between gap-x-2 xl:flex xl:flex-none"><div class="-mb-px flex h-12 items-center overflow-x-auto overflow-y-hidden "><!--[-1--><!--]--> <!--[--><!--[--><a class="tab-alternate active" href="/spaces/HI7RAI/anycoder-c4b01a4c"><!--[0--><!--[--><svg class="mr-1.5 text-gray-400 flex-none" xmlns="http://www.wAnyCoder
mAX vORSLogout
app.html
HTML
1269127012711272127312741275127612771278
Chat
Code
Settings
 1269127012711272127312741275127612771278```html
<!DOCTYPE html>
<html lang="de">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>WEITER - Weiter geht's</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link
 href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=DM+Sans:wght@400;500;700&display=swap"
 rel="stylesheet">
 <style>
 :root {
 --primary: #0f172a;
 --secondary: #1e293b;
 --accent: #f97316;
 --accent-glow: #fb923c;
 --text: #f8fafc;
 --text-muted: #94a3b8;
 --success: #22c55e;
 --card-bg: rgba(30, 41, 59, 0.7);
 --glass: rgba(255, 255, 255, 0.05);
 --border: rgba(255, 255, 255, 0.1);
 }
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
 body {
 font-family: 'DM Sans', sans-serif;
 background: var(--primary);
 color: var(--text);
 min-height: 100vh;
 overflow-x: hidden;
 }
 /* Animated Background */
 .bg-pattern {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
 background:
 radial-gradient(ellipse at 20% 20%, rgba(249, 115, 22, 0.15) 0%, transparent 50%),
 radial-gradient(ellipse at 80% 80%, rgba(251, 146, 60, 0.1) 0%, transparent 50%),
 linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
 }
 .grid-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
 background-image:
 linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
 linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
 background-size: 60px 60px;
 animation: gridMove 20s linear infinite;
 }
 @keyframes gridMove {
 0% {
 transform: translate(0, 0);
 }
 100% {
 transform: translate(60px, 60px);
 }
 }
 /* Header */
 header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 1.5rem 2rem;
 backdrop-filter: blur(20px);
 border-bottom: 1px solid var(--border);
 position: sticky;
 top: 0;
 z-index: 100;
 }
 .logo {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 }
 .logo-icon {
 width: 40px;
 height: 40px;
 background: linear-gradient(135deg, var(--accent), var(--accent-glow));
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.5rem;
 box-shadow: 0 4px 20px rgba(249, 115, 22, 0.4);
 }
 .logo-text {
 font-family: 'Space Grotesk', sans-serif;
 font-size: 1.5rem;
 font-weight: 700;
 letter-spacing: -0.02em;
 }
 .logo-text span {
 color: var(--accent);
 }
 .header-right {
 display: flex;
 align-items: center;
 gap: 1rem;
 }
 .built-with {
 font-size: 0.875rem;
 color: var(--text-muted);
 text-decoration: none;
 padding: 0.5rem 1rem;
 background: var(--glass);
 border-radius: 8px;
 border: 1px solid var(--border);
 transition: all 0.3s ease;
 }
 .built-with:hover {
 background: rgba(255, 255, 255, 0.1);
 color: var(--text);
 }
 /* Main Content */
 main {
 max-width: 1200px;
 margin: 0 auto;
 padding: 3rem 2rem;
 }
 /* Hero Section */
 .hero {
 text-align: center;
 margin-bottom: 4rem;
 position: relative;
 }
 .hero h1 {
 font-family: 'Space Grotesk', sans-serif;
 font-size: clamp(2.5rem, 6vw, 4.5rem);
 font-weight: 700;
 line-height: 1.1;
 margin-bottom: 1.5rem;
 letter-spacing: -0.03em;
 }
 .hero h1 .highlight {
 background: linear-gradient(135deg, var(--accent), #fff);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 }
 .hero p {
 font-size: 1.25rem;
 color: var(--text-muted);
 max-width: 600px;
 margin: 0 auto 2rem;
 line-height: 1.6;
 }
 /* Stats Cards */
 .stats-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: 1.5rem;
 margin-bottom: 4rem;
 }
 .stat-card {
 background: var(--card-bg);
 border: 1px solid var(--border);
 border-radius: 16px;
 padding: 1.5rem;
 backdrop-filter: blur(10px);
 transition: all 0.3s ease;
 position: relative;
 overflow: hidden;
 }
 .stat-card::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 3px;
 background: linear-gradient(90deg, var(--accent), var(--accent-glow));
 opacity: 0;
 transition: opacity 0.3s ease;
 }
 .stat-card:hover {
 transform: translateY(-4px);
 border-color: var(--accent);
 }
 .stat-card:hover::before {
 opacity: 1;
 }
 .stat-icon {
 font-size: 2rem;
 margin-bottom: 1rem;
 }
 .stat-value {
 font-family: 'Space Grotesk', sans-serif;
 font-size: 2rem;
 font-weight: 700;
 color: var(--text);
 }
 .stat-label {
 color: var(--text-muted);
 font-size: 0.875rem;
 margin-top: 0.25rem;
 }
 /* Goals Section */
 .section-title {
 font-family: 'Space Grotesk', sans-serif;
 font-size: 1.75rem;
 font-weight: 600;
 margin-bottom: 1.5rem;
 display: flex;
 align-items: center;
 gap: 0.75rem;
 }
 .goals-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
 gap: 1.5rem;
 margin-bottom: 3rem;
 }
 .goal-card {
 background: var(--card-bg);
 border: 1px solid var(--border);
 border-radius: 20px;
 padding: 1.75rem;
 backdrop-filter: blur(10px);
 transition: all 0.3s ease;
 cursor: pointer;
 }
 .goal-card:hover {
 border-color: var(--accent);
 transform: scale(1.02);
 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
 }
 .goal-header {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 margin-bottom: 1rem;
 }
 .goal-title {
 font-family: 'Space Grotesk', sans-serif;
 font-size: 1.25rem;
 font-weight: 600;
 }
 .goal-priority {
 padding: 0.25rem 0.75rem;
 border-radius: 20px;
 font-size: 0.75rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 }
 .priority-high {
 background: rgba(239, 68, 68, 0.2);
 color: #f87171;
 }
 .priority-medium {
 background: rgba(249, 115, 22, 0.2);
 color: var(--accent);
 }
 .priority-low {
 background: rgba(34, 197, 94, 0.2);
 color: var(--success);
 }
 .goal-description {
 color: var(--text-muted);
 font-size: 0.9rem;
 margin-bottom: 1.25rem;
 line-height: 1.5;
 }
 .progress-bar {
 height: 8px;
 background: rgba(255, 255, 255, 0.1);
 border-radius: 10px;
 overflow: hidden;
 margin-bottom: 0.75rem;
 }
 .progress-fill {
 height: 100%;
 background: linear-gradient(90deg, var(--accent), var(--accent-glow));
 border-radius: 10px;
 transition: width 0.5s ease;
 }
 .progress-text {
 display: flex;
 justify-content: space-between;
 font-size: 0.8rem;
 color: var(--text-muted);
 }
 /* Add Goal Form */
 .add-goal-section {
 background: var(--card-bg);
 border: 1px solid var(--border);
 border-radius: 20px;
 padding: 2rem;
 margin-bottom: 3rem;
 }
 .form-title {
 font-family: 'Space Grotesk', sans-serif;
 font-size: 1.25rem;
 font-weight: 600;
 margin-bottom: 1.5rem;
 }
 .goal-form {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 1rem;
 }
 .form-group {
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
 }
 .form-group label {
 font-size: 0.875rem;
 color: var(--text-muted);
 font-weight: 500;
 }
 .form-group input,
 .form-group select,
 .form-group textarea {
 padding: 0.875rem 1rem;
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid var(--border);
 border-radius: 12px;
 color: var(--text);
 font-family: inherit;
 font-size: 0.95rem;
 transition: all 0.3s ease;
 }
 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
 outline: none;
 border-color: var(--accent);
 box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
 }
 .form-group textarea {
 resize: vertical;
 min-height: 80px;
 }
 .btn {
 padding: 1rem 2rem;
 border: none;
 border-radius: 12px;
 font-family: 'Space Grotesk', sans-serif;
 font-size: 1rem;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.3s ease;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.5rem;
 }
 .btn-primary {
 background: linear-gradient(135deg, var(--accent), var(--accent-glow));
 color: white;
 box-shadow: 0 4px 20px rgba(249, 115, 22, 0.4);
 }
 .btn-primary:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 30px rgba(249, 115, 22, 0.5);
 }
 /* Timeline Section */
 .timeline-section {
 margin-bottom: 3rem;
 }
 .timeline {
 position: relative;
 padding-left: 2rem;
 }
 .timeline::before {
 content: '';
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
 width: 2px;
 background: linear-gradient(180deg, var(--accent), var(--accent-glow));
 }
 .timeline-item {
 position: relative;
 padding-bottom: 2rem;
 padding-left: 1.5rem;
 }
 .timeline-item::before {
 content: '';
 position: absolute;
 left: -2rem;
 top: 0.5rem;
 width: 12px;
 height: 12px;
 background: var(--accent);
 border-radius: 50%;
 border: 3px solid var(--primary);
 box-shadow: 0 0 10px rgba(249, 115, 22, 0.5);
 }
 .timeline-date {
 font-size: 0.8rem;
 color: var(--accent);
 font-weight: 600;
 margin-bottom: 0.5rem;
 }
 .timeline-content {
 background: var(--card-bg);
 border: 1px solid var(--border);
 border-radius: 12px;
 padding: 1.25rem;
 }
 .timeline-title {
 font-family: 'Space Grotesk', sans-serif;
 font-weight: 600;
 margin-bottom: 0.5rem;
 }
 .timeline-desc {
 color: var(--text-muted);
 font-size: 0.9rem;
 }
 /* Motivational Quote */
 .quote-section {
 background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(251, 146, 60, 0.05));
 border: 1px solid rgba(249, 115, 22, 0.2);
 border-radius: 20px;
 padding: 3rem;
 text-align: center;
 position: relative;
 overflow: hidden;
 }
 .quote-section::before {
 content: '"';
 position: absolute;
 top: -20px;
 left: 20px;
 font-family: 'Space Grotesk', sans-serif;
 font-size: 8rem;
 color: var(--accent);
 opacity: 0.1;
 }
 .quote-text {
 font-family: 'Space Grotesk', sans-serif;
 font-size: 1.5rem;
 font-weight: 500;
 line-height: 1.6;
 margin-bottom: 1rem;
 }
 .quote-author {
 color: var(--text-muted);
 font-size: 0.9rem;
 }
 /* Footer */
 footer {
 text-align: center;
 padding: 2rem;
 border-top: 1px solid var(--border);
 color: var(--text-muted);
 font-size: 0.875rem;
 }
 /* Animations */
 @keyframes fadeInUp {
 from {
 opacity: 0;
 transform: translateY(20px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
 }
 .animate-in {
 animation: fadeInUp 0.6s ease forwards;
 }
 .delay-1 {
 animation-delay: 0.1s;
 }
 .delay-2 {
 animation-delay: 0.2s;
 }
 .delay-3 {
 animation-delay: 0.3s;
 }
 .delay-4 {
 animation-delay: 0.4s;
 }
 /* Responsive */
 @media (max-width: 768px) {
 header {
 padding: 1rem;
 flex-direction: column;
 gap: 1rem;
 }
 main {
 padding: 2rem 1rem;
 }
 .hero h1 {
 font-size: 2rem;
 }
 .goals-container {
 grid-template-columns: 1fr;
 }
 .goal-form {
 grid-template-columns: 1fr;
 }
 }
 /* Floating particles */
 .particle {
 position: fixed;
 width: 4px;
 height: 4px;
 background: var(--accent);
 border-radius: 50%;
 opacity: 0.3;
 animation: float 15s infinite;
 pointer-events: none;
 }
 @keyframes float {
 0%,
 100% {
 transform: translateY(100vh) rotate(0deg);
 opacity: 0;
 }
 10% {
 opacity: 0.3;
 }
 90% {
 opacity: 0.3;
 }
 100% {
 transform: translateY(-100vh) rotate(720deg);
 opacity: 0;
 }
 }
 </style>
</head>
<body>
 <div class="bg-pattern"></div>
 <div class="grid-overlay"></div>
<!-- Floating Particles -->
 <div class="particle" style="left: 10%; animation-delay: 0s;"></div>
 <div class="particle" style="left: 20%; animation-delay: 2s;"></div>
 <div class="particle" style="left: 35%; animation-delay: 4s;"></div>
 <div class="particle" style="left: 50%; animation-delay: 1s;"></div>
 <div class="particle" style="left: 65%; animation-delay: 3s;"></div>
 <div class="particle" style="left: 80%; animation-delay: 5s;"></div>
 <div class="particle" style="left: 90%; animation-delay: 2.5s;"></div>
<header>
 <div class="logo">
 <div class="logo-icon">→</div>
 <div class="logo-text">WEI<span>TER</span></div>
 </div>
 <div class="header-right">
 <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
 Built with anycoder
 </a>
 </div>
 </header>
<main>
 <!-- Hero Section -->
 <section class="hero animate-in">
 <h1>Weiter geht's!<br><span class="highlight">Dein Weg nach vorn</span></h1>
 <p>Setze dir Ziele, verfolge deinen Fortschritt und bleib motiviert. Jeder Schritt zählt auf deiner Reise zum
 Erfolg.</p>
 </section>
<!-- Stats -->
 <div class="stats-grid">
 <div class="stat-card animate-in delay-1">
 <div class="stat-icon">🎯</div>
 <div class="stat-value" id="totalGoals">5</div>
 <div class="stat-label">Aktive Ziele</div>
 </div>
 <div class="stat-card animate-in delay-2">
 <div class="stat-icon">✅</div>
 <div class="stat-value" id="completedGoals">2</div>
 <div class="stat-label">Abgeschlossen</div>
 </div>
 <div class="stat-card animate-in delay-3">
 <div class="stat-icon">📈</div>
 <div class="stat-value">78%</div>
 <div class="stat-label">Fortschritt</div>
 </div>
 <div class="stat-card animate-in delay-4">
 <div class="stat-icon">🔥</div>
 <div class="stat-value">12</div>
 <div class="stat-label">Tage Streak</div>
 </div>
 </div>
<!-- Add Goal Section -->
 <section class="add-goal-section animate-in">
 <h2 class="form-title">✨ Neues Ziel setzen</h2>
 <form class="goal-form" id="goalForm">
 <div class="form-group">
 <label for="goalTitle">Ziel</label>
 <input type="text" id="goalTitle" placeholder="Was möchtest du erreichen?" required>
 </div>
 <div class="form-group">
 <label for="goalPriority">Priorität</label>
 <select id="goalPriority">
 <option value="low">Niedrig</option>
 <option value="medium" selected>Mittel</option>
 <option value="high">Hoch</option>
 </select>
 </div>
 <div class="form-group">
 <label for="goalProgress">Fortschritt (%)</label>
 <input type="number" id="goalProgress" min="0" max="100" value="0">
 </div>
 <div class="form-group">
 <label for="goalDescription">Beschreibung</label>
 <textarea id="goalDescription" placeholder="Beschreibe dein Ziel genauer..."></textarea>
 </div>
 <button type="submit" class="btn btn-primary">
 <span>+</span> Ziel hinzufügen
 </button>
 </form>
 </section>
<!-- Goals Section -->
 <section class="goals-section">
 <h2 class="section-title">📋 Deine Ziele</h2>
 <div class="goals-container" id="goalsContainer">
 <div class="goal-card">
 <div class="goal-header">
 <div class="goal-title">Programmieren lernen</div>
 <span class="goal-priority priority-high">Hoch</span>
 </div>
 <div class="goal-description">Täglich 2 Stunden JavaScript und React üben, um bis Ende des Jahres Full-Stack
 Developer zu werden.</div>
 <div class="progress-bar">
 <div class="progress-fill" style="width: 75%;"></div>
 </div>
 <div class="progress-text">
 <span>Fortschritt</span>
 <span>75%</span>
 </div>
 </div>
<div class="goal-card">
 <div class="goal-header">
 <div class="goal-title">Fitness-Ziele</div>
 <span class="goal-priority priority-medium">Mittel</span>
 </div>
 <div class="goal-description">3x pro Woche ins Fitnessstudio gehen und bis zum Sommer einen Marathon laufen.
 </div>
 <div class="progress-bar">
 <div class="progress-fill" style="width: 60%;"></div>
 </div>
 <div class="progress-text">
 <span>Fortschritt</span>
 <span>60%</span>
 </div>
 </div>
<div class="goal-card">
 <div class="goal-header">
 <div class="goal-title">Sprachen lernen</div>
 <span class="goal-priority priority-low">Niedrig</span>
 </div>
 <div class="goal-description">Spanisch auf B1-Niveau bringen durch wöchentliche Konversationsübungen.</div>
 <div class="progress-bar">
 <div class="progress-fill" style="width: 40%;"></div>
 </div>
 <div class="progress-text">
 <span>Fortschritt</span>
 <span>40%</span>
 </div>
 </div>
<div class="goal-card">
 <div class="goal-header">
 <div class="goal-title">Finanziell unabhängig</div>
 <span class="goal-priority priority-high">Hoch</span>
 </div>
 <div class="goal-description">Monatlich 500€ sparen und in ETFs investieren für langfristigen Vermögensaufbau.
 </div>
 <div class="progress-bar">
 <div class="progress-fill" style="width: 85%;"></div>
 </div>
 <div class="progress-text">
 <span>Fortschritt</span>
 <span>85%</span>
 </div>
 </div>
<div class="goal-card">
 <div class="goal-header">
 <div class="goal-title">Buch lesen</div>
 <span class="goal-priority priority-low">Niedrig</span>
 </div>
 <div class="goal-description">12 Bücher pro Jahr lesen - je ein Buch pro Monat zu verschiedenen Themen.</div>
 <div class="progress-bar">
 <div class="progress-fill" style="width: 50%;"></div>
 </div>
 <div class="progress-text">
 <span>Fortschritt</span>
 <span>50%</span>
 </div>
 </div>
 </div>
 </section>
<!-- Timelin```html
<!DOCTYPE html>
<html lang="de">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>AnyCoder - Unified Code Integration Platform</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 :root {
 --primary: #6366f1;
 --primary-dark: #4f46e5;
 --secondary: #10b981;
 --accent: #f59e0b;
 --danger: #ef4444;
 --dark: #1e1e2e;
 --dark-2: #2d2d3f;
 --dark-3: #3d3d52;
 --light: #f8fafc;
 --text: #e2e8f0;
 --text-muted: #94a3b8;
 --border: #475569;
 }
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: 'Segoe UI', system-ui, sans-serif;
 }
 body {
 background: var(--dark);
 color: var(--text);
 min-height: 100vh;
 overflow-x: hidden;
 }
 /* Header */
 .header {
 background: linear-gradient(135deg, var(--dark-2), var(--dark-3));
 padding: 1rem 2rem;
 display: flex;
 justify-content: space-between;
 align-items: center;
 border-bottom: 1px solid var(--border);
 position: sticky;
 top: 0;
 z-index: 100;
 backdrop-filter: blur(10px);
 }
 .logo {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 font-size: 1.5rem;
 font-weight: 700;
 color: var(--primary);
 text-decoration: none;
 }
 .logo i {
 font-size: 1.8rem;
 }
 .logo span {
 background: linear-gradient(135deg, var(--primary), var(--secondary));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 }
 .header-actions {
 display: flex;
 gap: 1rem;
 align-items: center;
 }
 .btn {
 padding: 0.5rem 1rem;
 border-radius: 8px;
 border: none;
 cursor: pointer;
 font-weight: 500;
 transition: all 0.3s ease;
 display: flex;
 align-items: center;
 gap: 0.5rem;
 }
 .btn-primary {
 background: var(--primary);
 color: white;
 }
 .btn-primary:hover {
 background: var(--primary-dark);
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
 }
 .btn-secondary {
 background: var(--dark-3);
 color: var(--text);
 border: 1px solid var(--border);
 }
 .btn-secondary:hover {
 background: var(--border);
 }
 .btn-success {
 background: var(--secondary);
 color: white;
 }
 .btn-danger {
 background: var(--danger);
 color: white;
 }
 /* Main Layout */
 .main-container {
 display: grid;
 grid-template-columns: 300px 1fr 350px;
 gap: 1rem;
 padding: 1rem;
 height: calc(100vh - 70px);
 }
 @media (max-width: 1200px) {
 .main-container {
 grid-template-columns: 1fr;
 height: auto;
 }
 }
 /* Panels */
 .panel {
 background: var(--dark-2);
 border-radius: 12px;
 border: 1px solid var(--border);
 display: flex;
 flex-direction: column;
 overflow: hidden;
 }
 .panel-header {
 padding: 1rem;
 background: var(--dark-3);
 border-bottom: 1px solid var(--border);
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
 .panel-title {
 font-weight: 600;
 display: flex;
 align-items: center;
 gap: 0.5rem;
 }
 .panel-content {
 padding: 1rem;
 flex: 1;
 overflow-y: auto;
 }
 /* Repository Inputs */
 .repo-section {
 margin-bottom: 1.5rem;
 }
 .repo-section h3 {
 font-size: 0.9rem;
 color: var(--text-muted);
 margin-bottom: 0.5rem;
 display: flex;
 align-items: center;
 gap: 0.5rem;
 }
 .repo-section h3 i {
 color: var(--primary);
 }
 .input-group {
 margin-bottom: 0.75rem;
 }
 .input-group label {
 display: block;
 font-size: 0.8rem;
 color: var(--text-muted);
 margin-bottom: 0.25rem;
 }
 .input-group input,
 .input-group textarea,
 .input-group select {
 width: 100%;
 padding: 0.6rem;
 background: var(--dark);
 border: 1px solid var(--border);
 border-radius: 6px;
 color: var(--text);
 font-size: 0.9rem;
 transition: all 0.3s ease;
 }
 .input-group input:focus,
 .input-group textarea:focus,
 .input-group select:focus {
 outline: none;
 border-color: var(--primary);
 box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
 }
 .input-group textarea {
 resize: vertical;
 min-height: 80px;
 font-family: 'Consolas', monospace;
 }
 /* Code Editor */
 .editor-container {
 display: flex;
 flex-direction: column;
 height: 100%;
 }
 .editor-toolbar {
 display: flex;
 gap: 0.5rem;
 padding: 0.75rem;
 background: var(--dark-3);
 border-bottom: 1px solid var(--border);
 flex-wrap: wrap;
 }
 .toolbar-btn {
 padding: 0.4rem 0.8rem;
 background: var(--dark);
 border: 1px solid var(--border);
 border-radius: 6px;
 color: var(--text-muted);
 cursor: pointer;
 font-size: 0.8rem;
 transition: all 0.2s ease;
 display: flex;
 align-items: center;
 gap: 0.3rem;
 }
 .toolbar-btn:hover {
 background: var(--primary);
 color: white;
 border-color: var(--primary);
 }
 .toolbar-btn.active {
 background: var(--primary);
 color: white;
 border-color: var(--primary);
 }
 .editor-wrapper {
 flex: 1;
 position: relative;
 overflow: hidden;
 }
 #codeEditor {
 width: 100%;
 height: 100%;
 background: var(--dark);
 color: var(--text);
 border: none;
 resize: none;
 padding: 1rem;
 font-family: 'Consolas', 'Monaco', monospace;
 font-size: 14px;
 line-height: 1.6;
 tab-size: 2;
 outline: none;
 }
 .line-numbers {
 position: absolute;
 left: 0;
 top: 0;
 width: 50px;
 height: 100%;
 background: var(--dark-2);
 color: var(--text-muted);
 text-align: right;
 padding: 1rem 0.5rem;
 font-family: 'Consolas', monospace;
 font-size: 14px;
 line-height: 1.6;
 pointer-events: none;
 border-right: 1px solid var(--border);
 overflow: hidden;
 }
 /* Right Panel - Tools */
 .tools-grid {
 display: grid;
 gap: 0.75rem;
 }
 .tool-card {
 background: var(--dark);
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 1rem;
 cursor: pointer;
 transition: all 0.3s ease;
 }
 .tool-card:hover {
 border-color: var(--primary);
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 .tool-card h4 {
 font-size: 0.9rem;
 margin-bottom: 0.5rem;
 display: flex;
 align-items: center;
 gap: 0.5rem;
 }
 .tool-card h4 i {
 color: var(--primary);
 }
 .tool-card p {
 font-size: 0.8rem;
 color: var(--text-muted);
 }
 /* Status Bar */
 .status-bar {
 background: var(--dark-2);
 padding: 0.75rem 1rem;
 display: flex;
 justify-content: space-between;
 align-items: center;
 border-top: 1px solid var(--border);
 font-size: 0.85rem;
 color: var(--text-muted);
 }
 .status-item {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 }
 .status-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--secondary);
 }
 .status-dot.error {
 background: var(--danger);
 }
 .status-dot.warning {
 background: var(--accent);
 }
 /* Suggestions Panel */
 .suggestions-container {
 position: absolute;
 background: var(--dark-3);
 border: 1px solid var(--border);
 border-radius: 8px;
 max-height: 200px;
 overflow-y: auto;
 display: none;
 z-index: 1000;
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
 }
 .suggestion-item {
 padding: 0.75rem 1rem;
 cursor: pointer;
 border-bottom: 1px solid var(--border);
 transition: background 0.2s ease;
 }
 .suggestion-item:hover {
 background: var(--primary);
 }
 .suggestion-item:last-child {
 border-bottom: none;
 }
 /* Notifications */
 .notification-container {
 position: fixed;
 top: 80px;
 right: 20px;
 z-index: 1000;
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
 }
 .notification {
 padding: 1rem 1.5rem;
 background: var(--dark-3);
 border-radius: 8px;
 border-left: 4px solid var(--primary);
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 animation: slideIn 0.3s ease;
 display: flex;
 align-items: center;
 gap: 0.75rem;
 }
 .notification.success {
 border-left-color: var(--secondary);
 }
 .notification.error {
 border-left-color: var(--danger);
 }
 .notification.warning {
 border-left-color: var(--accent);
 }
 @keyframes slideIn {
 from {
 transform: translateX(100%);
 opacity: 0;
 }
 to {
 transform: translateX(0);
 opacity: 1;
 }
 }
 /* Modal */
 .modal-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.7);
 display: none;
 justify-content: center;
 align-items: center;
 z-index: 2000;
 }
 .modal {
 background: var(--dark-2);
 border-radius: 12px;
 border: 1px solid var(--border);
 width: 90%;
 max-width: 600px;
 max-height: 80vh;
 overflow: hidden;
 animation: modalIn 0.3s ease;
 }
 @keyframes modalIn {
 from {
 transform: scale(0.9);
 opacity: 0;
 }
 to {
 transform: scale(1);
 opacity: 1;
 }
 }
 .modal-header {
 padding: 1rem;
 background: var(--dark-3);
 border-bottom: 1px solid var(--border);
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
 .modal-body {
 padding: 1rem;
 max-height: 60vh;
 overflow-y: auto;
 }
 .modal-footer {
 padding: 1rem;
 border-top: 1px solid var(--border);
 display: flex;
 justify-content: flex-end;
 gap: 0.5rem;
 }
 /* File List */
 .file-list {
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
 }
 .file-item {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0.75rem;
 background: var(--dark);
 border-radius: 6px;
 border: 1px solid var(--border);
 }
 .file-item:hover {
 border-color: var(--primary);
 }
 .file-info {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 }
 .file-icon {
 color: var(--accent);
 }
 .file-actions {
 display: flex;
 gap: 0.25rem;
 }
 .icon-btn {
 padding: 0.4rem;
 background: transparent;
 border: none;
 color: var(--text-muted);
 cursor: pointer;
 border-radius: 4px;
 transition: all 0.2s ease;
 }
 .icon-btn:hover {
 background: var(--dark-3);
 color: var(--primary);
 }
 /* Progress Bar */
 .progress-container {
 margin: 1rem 0;
 }
 .progress-bar {
 height: 8px;
 background: var(--dark);
 border-radius: 4px;
 overflow: hidden;
 }
 .progress-fill {
 height: 100%;
 background: linear-gradient(90deg, var(--primary), var(--secondary));
 width: 0%;
 transition: width 0.3s ease;
 }
 .progress-text {
 font-size: 0.8rem;
 color: var(--text-muted);
 margin-top: 0.25rem;
 }
 /* Tabs */
 .tabs {
 display: flex;
 border-bottom: 1px solid var(--border);
 background: var(--dark-3);
 }
 .tab {
 padding: 0.75rem 1.5rem;
 cursor: pointer;
 border: none;
 background: transparent;
 color: var(--text-muted);
 font-weight: 500;
 transition: all 0.2s ease;
 position: relative;
 }
 .tab:hover {
 color: var(--text);
 }
 .tab.active {
 color: var(--primary);
 }
 .tab.active::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 2px;
 background: var(--primary);
 }
 /* Auto-fix indicator */
 .autofix-indicator {
 position: fixed;
 bottom: 20px;
 right: 20px;
 background: var(--dark-3);
 padding: 0.75rem 1rem;
 border-radius: 8px;
 border: 1px solid var(--border);
 display: none;
 align-items: center;
 gap: 0.5rem;
 font-size: 0.85rem;
 animation: pulse 2s infinite;
 }
 @keyframes pulse {
 0%,
 100% {
 opacity: 1;
 }
 50% {
 opacity: 0.7;
 }
 }
 /* Syntax highlighting */
 .syntax-keyword {
 color: #c678dd;
 }
 .syntax-string {
 color: #98c379;
 }
 .syntax-number {
 color: #d19a66;
 }
 .syntax-comment {
 color: #5c6370;
 }
 .syntax-function {
 color: #61afef;
 }
 .syntax-tag {
 color: #e06c75;
 }
 .syntax-attr {
 color: #d19a66;
 }
 /* Loading spinner */
 .spinner {
 width: 20px;
 height: 20px;
 border: 2px solid var(--border);
 border-top-color: var(--primary);
 border-radius: 50%;
 animation: spin 1s linear infinite;
 }
 @keyframes spin {
 to {
 transform: rotate(360deg);
 }
 }
 /* Scrollbar */
 ::-webkit-scrollbar {
 width: 8px;
 height: 8px;
 }
 ::-webkit-scrollbar-track {
 background: var(--dark);
 }
 ::-webkit-scrollbar-thumb {
 background: var(--dark-3);
 border-radius: 4px;
 }
 ::-webkit-scrollbar-thumb:hover {
 background: var(--border);
 }
 /* Checkbox toggle */
 .toggle-container {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 margin-bottom: 0.5rem;
 }
 .toggle {
 width: 40px;
 height: 20px;
 background: var(--dark);
 border-radius: 10px;
 position: relative;
 cursor: pointer;
 transition: background 0.3s ease;
 }
 .toggle.active {
 background: var(--primary);
 }
 .toggle::after {
 content: '';
 position: absolute;
 width: 16px;
 height: 16px;
 background: white;
 border-radius: 50%;
 top: 2px;
 left: 2px;
 transition: transform 0.3s ease;
 }
 .toggle.active::after {
 transform: translateX(20px);
 }
 .toggle-label {
 font-size: 0.85rem;
 color: var(--text-muted);
 }
 /* Bracket matching highlight */
 .bracket-match {
 background: rgba(99, 102, 241, 0.3);
 border-radius: 2px;
 }
 .bracket-error {
 background: rgba(239, 68, 68, 0.3);
 border-bottom: 2px wavy var(--danger);
 }
 </style>
</head>
<body>
 <!-- Header -->
 <header class="header">
 <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="logo" target="_blank">
 <i class="fas fa-code"></i>
 <span>AnyCoder</span>
 </a>
 <div class="header-actions">
 <button class="btn btn-secondary" onclick="showAbout()">
 <i class="fas fa-info-circle"></i> Info
 </button>
 <button class="btn btn-primary" onclick="exportCode()">
 <i class="fas fa-download"></i> Export
 </button>
 <button class="btn btn-success" onclick="runCode()">
 <i class="fas fa-play"></i> Run
 </button>
 </div>
 </header>
<!-- Main Container -->
 <div class="main-container">
 <!-- Left Panel - Repository Inputs -->
 <div class="panel">
 <div class="panel-header">
 <div class="panel-title">
 <i class="fas fa-database"></i> Repositories
 </div>
 </div>
 <div class="panel-content">
 <!-- GitHub Section -->
 <div class="repo-section">
 <h3><i class="fab fa-github"></i> GitHub</h3>
 <div class="input-group">
 <label>Repository URL</label>
 <input type="text" id="githubRepo" placeholder="https://github.com/user/repo">
 </div>
 <div class="input-group">
 <label>Branch/Tag</label>
 <input type="text" id="githubBranch" placeholder="main" value="main">
 </div>
 <div class="input-group">
 <label>File Path (optional)</label>
 <input type="text" id="githubPath" placeholder="src/index.js">
 </div>
 </div>
<!-- HuggingFace Section -->
 <div class="repo-section">
 <h3><i class="fas fa-robot"></i> Hugging Face</h3>
 <div class="input-group">
 <label>Repository ID</label>
 <input type="text" id="hfRepo" placeholder="username/model-name">
 </div>
 <div class="input-group">
 <label>File Path</label>
 <input type="text" id="hfPath" placeholder="path/to/file.py">
 </div>
 </div>
<!-- Fetch Button -->
 <button class="btn btn-primary" style="width: 100%; margin-top: 1rem;" onclick="fetchFromRepo()">
 <i class="fas fa-download"></i> Fetch Content
 </button>
<!-- Progress -->
 <div class="progress-container" id="fetchProgress" style="display: none;">
 <div class="progress-bar">
 <div class="progress-fill" id="progressFill"></div>
 </div>
 <div class="progress-text" id="progressText">Loading...</div>
 </div>
<!-- Fetched Files -->
 <div class="repo-section" style="margin-top: 1.5rem;">
 <h3><i class="fas fa-folder-open"></i> Loaded Files</h3>
 <div class="file-list" id="fileList">
 <p style="color: var(--text-muted); font-size: 0.85rem;">No files loaded yet</p>
 </div>
 </div>
 </div>
 </div>
<!-- Center Panel - Code Editor -->
 <div class="panel">
 <div class="tabs">
 <button class="tab active" onclick="switchTab('editor')">Editor</button>
 <button class="tab" onclick="switchTab('preview')">Preview</button>
 <button class="tab" onclick="switchTab('console')">Console</button>
 </div>
 <div class="editor-container">
 <div class="editor-toolbar">
 <button class="toolbar-btn" onclick="formatCode()" title="Format Code">
 <i class="fas fa-align-left"></i> Format
 </button>
 <button class="toolbar-btn" onclick="validateBrackets()" title="Validate Brackets">
 <i class="fas fa-brackets"></i> Brackets
 </button>
 <button class="toolbar-btn" onclick="autoFixSyntax()" title="Auto-Fix Syntax">
 <i class="fas fa-wrench"></i> Auto-Fix
 </button>
 <button class="toolbar-btn" onclick="minifyCode()" title="Minify">
 <i class="fas fa-compress-alt"></i> Minify
 </button>
 <button class="toolbar-btn" onclick="beautifyCode()" title="Beautify">
 <i class="fas fa-indent"></i> Beautify
 </button>
 <div class="toggle-container" style="margin-left: auto;">
 <div class="toggle active" id="autoFixToggle" onclick="toggleAutoFix()"></div>
 <span class="toggle-label">Auto-Fix</span>
 </div>
 </div>
 <div class="editor-wrapper">
 <div class="line-numbers" id="lineNumbers">1</div>
 window.featureFlagswindow.hubConfigwindow.requestIdplausible.initwindow.plausiblethis.onloadthis.relthis.onload">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <title>VisionFX HyperCore // Glory Extractor v9.0</title>
<script src="https://cdn.tailwindcss.com"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
 <script src="https://unpkg.com/lucide@latest"></script>
<script>
 tailwind.config = {
 theme: {
 extend: {
 colors: {
 'neon-blue': '#00f3ff',
 'neon-green': '#00ff9d',
 'deep-void': '#050505',
 },
 fontFamily: {
 mono: ['"JetBrains Mono"', 'monospace'],
 }
 }
 }
 }
 </script>
<style>
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;600;800&display=swap');
:root {
 --neon-blue: #00f3ff;
 --neon-green: #00ff9d;
 --bg-dark: #020202;
 }
* { box-sizing: border-box; }
body {
 background-color: var(--bg-dark);
 overflow: hidden;
 color: #fff;
 font-family: 'Inter', sans-serif;
 }
 #stream-viewport {
 height: 100vh;
 width: 100vw;
 overflow-y: scroll;
 scroll-snap-type: y mandatory;
 scroll-behavior: smooth;
 }
.stream-unit {
 height: 100vh;
 width: 100%;
 scroll-snap-align: start;
 position: relative;
 overflow: hidden;
 border-bottom: 1px solid rgba(0, 255, 157, 0.1);
 }
 .glitch-text {
 position: relative;
 }
.glitch-text::before,
 .glitch-text::after {
 content: attr(data-text);
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 }
.glitch-text::before {
 left: 2px;
 text-shadow: -2px 0 #ff00c1;
 clip: rect(44px, 450px, 56px, 0);
 animation: glitch-anim 5s infinite linear alternate-reverse;
 }
.glitch-text::after {
 left: -2px;
 text-shadow: -2px 0 #00fff9;
 clip: rect(44px, 450px, 56px, 0);
 animation: glitch-anim2 5s infinite linear alternate-reverse;
 }
 @keyframes glitch-anim {
 0% { clip: rect(38px, 9999px, 84px, 0); }
 20% { clip: rect(8px, 9999px, 16px, 0); }
 40% { clip: rect(68px, 9999px, 4px, 0); }
 60% { clip: rect(28px, 9999px, 84px, 0); }
 80% { clip: rect(18px, 9999px, 54px, 0); }
 100% { clip: rect(58px, 9999px, 34px, 0); }
 }
@keyframes glitch-anim2 {
 0% { clip: rect(65px, 9999px, 12px, 0); }
 20% { clip: rect(42px, 9999px, 78px, 0); }
 40% { clip: rect(5px, 9999px, 36px, 0); }
 60% { clip: rect(89px, 9999px, 22px, 0); }
 80% { clip: rect(31px, 9999px, 67px, 0); }
 100% { clip: rect(73px, 9999px, 45px, 0); }
 }
 ::-webkit-scrollbar { width: 4px; }
 ::-webkit-scrollbar-track { background: #000; }
 ::-webkit-scrollbar-thumb { background: var(--neon-green); }
 .scanline {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 2px;
 background: linear-gradient(90deg, transparent, var(--neon-green), transparent);
 animation: scanline 4s linear infinite;
 pointer-events: none;
 z-index: 9999;
 opacity: 0.5;
 }
@keyframes scanline {
 0% { top: -2px; }
 100% { top: 100%; }
 }
 .input-glow:focus {
 box-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
 }
 .btn-extract {
 background: linear-gradient(135deg, rgba(0, 243, 255, 0.1), rgba(0, 243, 255, 0.05));
 border: 1px solid rgba(0, 243, 255, 0.5);
 transition: all 0.3s ease;
 }
.btn-extract:hover {
 background: linear-gradient(135deg, rgba(0, 243, 255, 0.2), rgba(0, 243, 255, 0.1));
 box-shadow: 0 0 30px rgba(0, 243, 255, 0.4);
 }
 .btn-inject {
 background: linear-gradient(135deg, rgba(0, 255, 157, 0.1), rgba(0, 255, 157, 0.05));
 border: 1px solid rgba(0, 255, 157, 0.5);
 transition: all 0.3s ease;
 }
.btn-inject:hover {
 background: linear-gradient(135deg, rgba(0, 255, 157, 0.2), rgba(0, 255, 157, 0.1));
 box-shadow: 0 0 30px rgba(0, 255, 157, 0.4);
 }
 .data-card {
 background: linear-gradient(180deg, rgba(12, 12, 12, 0.9), rgba(20, 20, 30, 0.8));
 border: 1px solid rgba(0, 255, 157, 0.2);
 backdrop-filter: blur(10px);
 }
 @media (prefers-reduced-motion: reduce) {
 .glitch-text::before,
 .glitch-text::after,
 .scanline {
 animation: none;
 }
 }
 </style>
</head>
<body class="font-sans antialiased">
<div class="scanline"></div>
<div id="canvas-container" class="fixed inset-0 z-0 pointer-events-none opacity-30"></div>
<div id="hud-layer" class="fixed inset-0 z-50 pointer-events-none flex flex-col justify-between p-4">
<div class="flex justify-between items-start">
 <div class="bg-black/90 backdrop-blur-md border border-neon-green/30 p-4 rounded pointer-events-auto">
 <h1 class="text-xl md:text-2xl font-extrabold tracking-tighter text-neon-green glitch-text" data-text="GLORY EXTRACTOR">GLORY EXTRACTOR</h1>
 <div class="text-xs font-mono text-gray-400 mt-2 flex flex-wrap gap-2 items-center">
 <span id="fps-counter" class="text-neon-blue">60 FPS</span>
 <span class="text-gray-600">|</span>
 <span id="sensor-status">SENSORS: OFF</span>
 <span class="text-gray-600">|</span>
 <span class="text-red-500 animate-pulse">LIVE</span>
 </div>
 <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs text-neon-blue/70 hover:text-neon-blue transition-colors mt-2 block">Built with anycoder</a>
 </div>
<div class="bg-black/80 backdrop-blur border border-white/10 p-2 rounded-full pointer-events-auto cursor-pointer hover:bg-white/10 transition">
 <i data-lucide="settings" class="w-5 h-5 text-white"></i>
 </div>
 </div>
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-lg px-4 pointer-events-auto" id="extractor-panel">
 <div class="data-card p-6 rounded-lg shadow-2xl">
 <div class="flex items-center gap-2 mb-4 text-neon-blue font-mono text-sm">
 <i data-lucide="database" class="w-4 h-4"></i>
 <span id="typing-header">INITIATING SEQUENCE...</span>
 </div>
<div class="relative group mb-4">
 <input type="text" id="target-input"
class="w-full bg-gray-900/80 border-b-2 border-gray-700 text-white p-4 focus:outline-none focus:border-neon-green font-mono transition-all text-lg placeholder-gray-600 input-glow rounded-t"
 placeholder="ENTER TARGET URL / ASSET ID">
 <div class="absolute right-4 top-4 text-gray-500 group-focus-within:text-neon-green transition-colors">
 <i data-lucide="search" class="w-5 h-5"></i>
 </div>
 </div>
<div class="flex gap-3">
 <button onclick="App.runExtraction()" class="flex-1 btn-extract text-neon-blue py-3 font-bold tracking-widest rounded transition-all">
 EXTRACT
 </button>
 <button onclick="App.injectEXE()" class="flex-1 btn-inject text-neon-green py-3 font-bold tracking-widest rounded transition-all">
 INJECT .EXE
 </button>
 </div>
<div class="h-1 w-full bg-gray-800 mt-4 overflow-hidden rounded-full">
 <div id="extraction-bar" class="h-full bg-gradient-to-r from-neon-blue to-neon-green w-0 transition-all duration-300 ease-out rounded-full"></div>
 </div>
<div id="log-output" class="mt-3 h-16 overflow-y-auto font-mono text-xs text-gray-500 leading-relaxed">
 <div><span class="text-neon-green">>>></span> SYSTEM READY</div>
 <div><span class="text-neon-green">>>></span> AWAITING INPUT...</div>
 </div>
 </div>
 </div>
<div class="text-center pointer-events-auto">
 <p class="text-xs text-gray-600 font-mono">SCROLL TO EXPLORE STREAM</p>
 <i data-lucide="chevrons-down" class="w-4 h-4 mx-auto text-gray-600 animate-bounce mt-1"></i>
 </div>
 </div>
<div id="stream-viewport">
 <div class="stream-unit flex items-center justify-center bg-gradient-to-b from-black to-gray-900">
 <div class="text-center opacity-20">
 <i data-lucide="loader" class="w-16 h-16 mx-auto mb-4 animate-spin"></i>
 <p class="font-mono tracking-widest text-sm">AWAITING INJECTION</p>
 </div>
 </div>
 </div>
<script>
 const App = {
 state: {
 isExtracting: false,
 sensorX: 0,
 sensorY: 0,
 modulesLoaded: 0,
 progress: 0
 },
 refs: {},
 scene: null,
 camera: null,
 renderer: null,
 particles: null,
 plane: null,
 init() {
 this.refs = {
 stream: document.getElementById('stream-viewport'),
 input: document.getElementById('target-input'),
 bar: document.getElementById('extraction-bar'),
 log: document.getElementById('log-output'),
 panel: document.getElementById('extractor-panel')
 };
this.setupThreeJS();
 this.setupSensors();
 this.initTyping();
 lucide.createIcons();
setInterval(() => this.liveUpdate(), 2000);
 },
 setupThreeJS() {
 const container = document.getElementById('canvas-container');
 if (!container) return;
this.scene = new THREE.Scene();
 this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 this.renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
this.renderer.setSize(window.innerWidth, window.innerHeight);
 this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
 container.appendChild(this.renderer.domElement);
 const geometry = new THREE.PlaneGeometry(100, 100, 40, 40);
 const material = new THREE.MeshBasicMaterial({
color: 0x00ff9d,
wireframe: true,
transparent: true,
opacity: 0.15
 });
 this.plane = new THREE.Mesh(geometry, material);
 this.plane.rotation.x = -Math.PI / 2;
 this.scene.add(this.plane);
 const pGeo = new THREE.BufferGeometry();
 const pCount = 800;
 const pPos = new Float32Array(pCount * 3);
 for (let i = 0; i < pCount * 3; i++) {
 pPos[i] = (Math.random() - 0.5) * 60;
 }
 pGeo.setAttribute('position', new THREE.BufferAttribute(pPos, 3));
 const pMat = new THREE.PointsMaterial({
size: 0.15,
color: 0x00f3ff,
 transparent: true,
 opacity: 0.8
 });
 this.particles = new THREE.Points(pGeo, pMat);
 this.scene.add(this.particles);
 this.camera.position.set(0, 8, 15);
 this.camera.lookAt(0, 0, 0);
 this.animate();
 window.addEventListener('resize', () => {
 this.camera.aspect = window.innerWidth / window.innerHeight;
 this.camera.updateProjectionMatrix();
 this.renderer.setSize(window.innerWidth, window.innerHeight);
 });
 },
 animate() {
 requestAnimationFrame(() => this.animate());
if (this.plane && this.particles && this.camera) {
 const targetX = this.state.sensorX * 3;
 const targetY = 8 + (this.state.sensorY * 2);
this.camera.position.x += (targetX - this.camera.position.x) * 0.03;
 this.camera.position.y += (targetY - this.camera.position.y) * 0.03;
 this.camera.lookAt(0, 0, 0);
 this.plane.rotation.z += 0.002;
 this.particles.rotation.y -= 0.001;
this.renderer.render(this.scene, this.camera);
 }
 },
 setupSensors() {
 document.addEventListener('mousemove', (e) => {
 this.state.sensorX = (e.clientX / window.innerWidth) * 2 - 1;
 this.state.sensorY = (e.clientY / window.innerHeight) * 2 - 1;
 });
 if (window.DeviceOrientationEvent) {
 window.addEventListener('deviceorientation', (e) => {
 const statusEl = document.getElementById('sensor-status');
 if (statusEl) {
 statusEl.innerText = "SENSORS: ACTIVE";
 statusEl.style.color = "#00ff9d";
 }
 this.state.sensorX = (e.gamma || 0) / 45;
 this.state.sensorY = (e.beta || 0) / 45;
 });
 }
 },
 initTyping() {
 const header = document.getElementById('typing-header');
 if (header) {
 gsap.to(header, {
 duration: 2,
 text: "SYSTEM READY // AWAITING INPUT",
 ease: "none"
 });
 }
 },
 log(msg) {
 if (!this.refs.log) return;
 const line = document.createElement('div');
 line.innerHTML = `<span class="text-neon-green">>>></span> ${msg}`;
 this.refs.log.prepend(line);
 if (this.refs.log.children.length > 6) {
 this.refs.log.lastChild.remove();
 }
 },
 runExtraction() {
 const val = this.refs.input ? this.refs.input.value : '';
 if (!val) {
 this.log("ERROR: NO TARGET DEFINED");
 return;
 }
this.state.isExtracting = true;
 this.state.progress = 0;
 this.log(`CONNECTING TO: ${val}...`);
const interval = setInterval(() => {
 this.state.progress += Math.random() * 15;
 if (this.state.progress > 100) this.state.progress = 100;
if (this.refs.bar) {
 this.refs.bar.style.width = `${this.state.progress}%`;
 }
this.log(`DOWNLOADING [${Math.floor(Math.random() * 9999)}]... ${this.state.progress.toFixed(1)}%`);
 if (this.state.progress >= 100) {
 clearInterval(interval);
 this.log("DOWNLOAD COMPLETE. READY TO INJECT.");
 if (this.refs.panel) {
 gsap.to(this.refs.panel, { scale: 0.97, duration: 0.1, yoyo: true, repeat: 1 });
 }
 }
 }, 100);
 },
 injectEXE() {
 if (!this.refs.bar || this.refs.bar.style.width !== '100%') {
 this.log("ERROR: EXTRACT DATA FIRST");
 return;
 }
 this.log("COMPILING .EXE PACKAGE...");
 this.log("INJECTING INTO STREAM...");
 const id = `module-${Date.now()}`;
 const newUnit = document.createElement('div');
 newUnit.className = "stream-unit flex relative bg-gradient-to-br from-gray-900 to-black";
 newUnit.id = id;
const randomSize = Math.floor(Math.random() * 500) + 50;
 const moduleId = this.state.modulesLoaded++;
newUnit.innerHTML = `
 <div class="absolute inset-0 flex items-center justify-center">
 <div class="relative">
 <div class="w-32 h-32 border-2 border-neon-green rounded-lg animate-pulse flex items-center justify-center">
 <i data-lucide="package" class="w-12 h-12 text-neon-green"></i>
 </div>
 </div>
 </div>
 <div class="absolute bottom-10 left-10 z-10">
 <h2 class="text-3xl md:text-4xl font-extrabold text-white">DATA_NODE_${moduleId}</h2>
 <div class="flex gap-2 mt-2">
 <span class="bg-neon-green text-black px-3 py-1 text-xs font-bold rounded">ACTIVE</span>
 <span class="bg-gray-800 text-white px-3 py-1 text-xs font-mono rounded">SIZE: ${randomSize}MB</span>
 </div>
 </div>
 <div class="absolute top-10 right-10 text-right">
 <p class="font-mono text-xs text-gray-500">MODULE ID: ${id}</p>
 <p class="font-mono text-xs text-neon-blue">STATUS: INJECTED</p>
 </div>
 `;
 if (this.refs.stream) {
 this.refs.stream.prepend(newUnit);
 lucide.createIcons();
 this.refs.stream.scrollTo({ top: 0, behavior: 'smooth' });
 }
 setTimeout(() => {
 if (this.refs.bar) this.refs.bar.style.width = '0%';
 if (this.refs.input) this.refs.input.value = '';
 this.log("SYSTEM IDLE.");
 }, 1000);
 },
 liveUpdate() {
 const fps = Math.floor(58 + Math.random() * 5);
 const fpsEl = document.getElementById('fps-counter');
 if (fpsEl) fpsEl.innerText = `${fps} FPS`;
if (Math.random() > 0.85) {
 const title = document.querySelector('.glitch-text');
 if (title) {
 title.classList.add('opacity-60');
 setTimeout(() => title.classList.remove('opacity-60'), 80);
 }
 }
 }
 };
 window.onload = () => App.init();
 </script>
</body>
</html>