Spaces:

SilentShado
/

anycoder-e404f3ce

Running

App Files Files Community

SilentShado commited on Feb 25

Commit

3a7e817

verified ·

1 Parent(s): d205641

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +535 -19

index.html CHANGED Viewed

@@ -1,19 +1,535 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Project Blue | Prototype</title>
+    <style>
+        /* --- RESET & VARIABLES --- */
+        :root {
+            --bg-dark: #020617;
+            --bg-panel: #0f172a;
+            --primary: #3b82f6;
+            --primary-glow: #60a5fa;
+            --accent: #0ea5e9;
+            --text-main: #f8fafc;
+            --text-muted: #94a3b8;
+            --success: #10b981;
+            --font-mono: 'Courier New', Courier, monospace;
+            --font-sans: system-ui, -apple-system, sans-serif;
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            background-color: var(--bg-dark);
+            background-image:
+                radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%),
+                radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%),
+                radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
+            background-size: 100% 100%;
+            color: var(--text-main);
+            font-family: var(--font-sans);
+            height: 100vh;
+            overflow: hidden; /* App-like feel */
+            display: flex;
+            flex-direction: column;
+        }
+        /* --- HEADER --- */
+        header {
+            padding: 1rem 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            z-index: 10;
+        }
+        .brand {
+            font-weight: 700;
+            font-size: 1.2rem;
+            letter-spacing: -0.05em;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .brand span {
+            color: var(--primary);
+        }
+        .anycoder-link {
+            font-size: 0.85rem;
+            color: var(--text-muted);
+            text-decoration: none;
+            padding: 0.5rem 1rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 20px;
+            transition: all 0.3s ease;
+            background: rgba(255, 255, 255, 0.05);
+        }
+        .anycoder-link:hover {
+            background: var(--primary);
+            color: white;
+            border-color: var(--primary);
+            box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
+        }
+        /* --- MAIN CONTAINER --- */
+        main {
+            flex: 1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 2rem;
+            position: relative;
+        }
+        /* Background Grid Animation */
+        .grid-bg {
+            position: absolute;
+            width: 200%;
+            height: 200%;
+            background-image:
+                linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
+            background-size: 40px 40px;
+            transform: perspective(500px) rotateX(60deg) translateY(-100px) translateZ(-200px);
+            animation: gridMove 20s linear infinite;
+            z-index: 0;
+            pointer-events: none;
+        }
+        @keyframes gridMove {
+            0% { transform: perspective(500px) rotateX(60deg) translateY(0) translateZ(-200px); }
+            100% { transform: perspective(500px) rotateX(60deg) translateY(40px) translateZ(-200px); }
+        }
+        /* --- THE BROWSER WINDOW SIMULATION --- */
+        .browser-mockup {
+            width: 100%;
+            max-width: 900px;
+            height: 600px;
+            background: rgba(15, 23, 42, 0.6);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 12px;
+            box-shadow:
+                0 25px 50px -12px rgba(0, 0, 0, 0.5),
+                0 0 0 1px rgba(255, 255, 255, 0.05);
+            display: flex;
+            flex-direction: column;
+            z-index: 1;
+            overflow: hidden;
+            animation: float 6s ease-in-out infinite;
+            position: relative;
+        }
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-15px); }
+            100% { transform: translateY(0px); }
+        }
+        /* Window Controls */
+        .window-header {
+            padding: 12px 16px;
+            background: rgba(255, 255, 255, 0.03);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .window-controls {
+            display: flex;
+            gap: 8px;
+        }
+        .dot {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+        }
+        .dot.red { background: #ef4444; }
+        .dot.yellow { background: #f59e0b; }
+        .dot.green { background: #10b981; }
+        .url-bar {
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 6px;
+            padding: 4px 12px;
+            font-family: var(--font-mono);
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            flex: 1;
+            max-width: 400px;
+            margin: 0 auto;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            border: 1px solid transparent;
+            transition: border 0.3s;
+        }
+        .url-bar:hover {
+            border-color: rgba(59, 130, 246, 0.3);
+        }
+        .lock-icon {
+            color: var(--success);
+        }
+        /* Content Area */
+        .window-content {
+            flex: 1;
+            padding: 2rem;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            position: relative;
+        }
+        /* Glitch Text Effect */
+        .glitch-wrapper {
+            position: relative;
+            margin-bottom: 2rem;
+        }
+        .glitch {
+            font-size: 3rem;
+            font-weight: 800;
+            text-transform: uppercase;
+            position: relative;
+            color: var(--text-main);
+            letter-spacing: 2px;
+        }
+        .glitch::before, .glitch::after {
+            content: attr(data-text);
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .glitch::before {
+            left: 2px;
+            text-shadow: -1px 0 #ff00c1;
+            clip: rect(44px, 450px, 56px, 0);
+            animation: glitch-anim 5s infinite linear alternate-reverse;
+        }
+        .glitch::after {
+            left: -2px;
+            text-shadow: -1px 0 #00fff9;
+            clip: rect(44px, 450px, 56px, 0);
+            animation: glitch-anim2 5s infinite linear alternate-reverse;
+        }
+        @keyframes glitch-anim {
+            0% { clip: rect(12px, 9999px, 5px, 0); }
+            20% { clip: rect(65px, 9999px, 80px, 0); }
+            40% { clip: rect(20px, 9999px, 90px, 0); }
+            60% { clip: rect(80px, 9999px, 5px, 0); }
+            80% { clip: rect(10px, 9999px, 40px, 0); }
+            100% { clip: rect(50px, 9999px, 70px, 0); }
+        }
+        @keyframes glitch-anim2 {
+            0% { clip: rect(60px, 9999px, 10px, 0); }
+            20% { clip: rect(10px, 9999px, 50px, 0); }
+            40% { clip: rect(90px, 9999px, 20px, 0); }
+            60% { clip: rect(15px, 9999px, 80px, 0); }
+            80% { clip: rect(40px, 9999px, 30px, 0); }
+            100% { clip: rect(70px, 9999px, 10px, 0); }
+        }
+        /* Description Text */
+        .description {
+            max-width: 500px;
+            color: var(--text-muted);
+            line-height: 1.6;
+            margin-bottom: 2rem;
+            font-size: 1rem;
+        }
+        /* Terminal / Console Box */
+        .console-box {
+            width: 100%;
+            max-width: 500px;
+            background: #000;
+            border-radius: 6px;
+            padding: 1rem;
+            text-align: left;
+            font-family: var(--font-mono);
+            font-size: 0.8rem;
+            border: 1px solid #333;
+            box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
+            height: 150px;
+            overflow: hidden;
+            position: relative;
+        }
+        .console-line {
+            margin-bottom: 5px;
+            opacity: 0;
+            animation: fadeIn 0.3s forwards;
+        }
+        .cursor {
+            display: inline-block;
+            width: 8px;
+            height: 15px;
+            background: var(--primary);
+            animation: blink 1s infinite;
+        }
+        @keyframes blink { 50% { opacity: 0; } }
+        @keyframes fadeIn { to { opacity: 1; } }
+        /* Progress Bar */
+        .progress-container {
+            width: 100%;
+            height: 4px;
+            background: #333;
+            border-radius: 2px;
+            margin-top: 10px;
+            overflow: hidden;
+        }
+        .progress-bar {
+            height: 100%;
+            width: 0%;
+            background: linear-gradient(90deg, var(--primary), var(--accent));
+            transition: width 0.5s ease;
+            box-shadow: 0 0 10px var(--primary);
+        }
+        /* Interactive Elements */
+        .actions {
+            margin-top: 2rem;
+            display: flex;
+            gap: 1rem;
+        }
+        .btn {
+            padding: 0.8rem 1.5rem;
+            border: none;
+            border-radius: 6px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            font-size: 0.9rem;
+        }
+        .btn-primary {
+            background: var(--primary);
+            color: white;
+            box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.39);
+        }
+        .btn-primary:hover {
+            background: var(--primary-glow);
+            transform: translateY(-2px);
+        }
+        .btn-secondary {
+            background: transparent;
+            border: 1px solid var(--text-muted);
+            color: var(--text-muted);
+        }
+        .btn-secondary:hover {
+            border-color: var(--text-main);
+            color: var(--text-main);
+        }
+        /* Footer */
+        footer {
+            padding: 1rem;
+            text-align: center;
+            font-size: 0.8rem;
+            color: rgba(255, 255, 255, 0.3);
+            border-top: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        /* Responsive */
+        @media (max-width: 768px) {
+            .browser-mockup {
+                height: 80vh;
+                width: 95%;
+            }
+            .glitch { font-size: 2rem; }
+            .window-header { padding: 8px; }
+            .url-bar { display: none; } /* Hide URL bar on mobile for space */
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="brand">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: var(--primary);">
+                <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
+                <polyline points="2 17 12 22 22 17"></polyline>
+                <polyline points="2 12 12 17 22 12"></polyline>
+            </svg>
+            BLUE<span>PROTO</span>
+        </div>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+            Built with anycoder
+        </a>
+    </header>
+    <main>
+        <div class="grid-bg"></div>
+        <div class="browser-mockup">
+            <div class="window-header">
+                <div class="window-controls">
+                    <div class="dot red"></div>
+                    <div class="dot yellow"></div>
+                    <div class="dot green"></div>
+                </div>
+                <div class="url-bar">
+                    <span class="lock-icon">🔒</span>
+                    <span id="url-text">local://prototype/test_env</span>
+                </div>
+                <div style="width: 40px;"></div> <!-- Spacer for balance -->
+            </div>
+            <div class="window-content">
+                <div class="glitch-wrapper">
+                    <h1 class="glitch" data-text="SYSTEM INIT">SYSTEM INIT</h1>
+                </div>
+                <p class="description">
+                    This environment is currently in <strong>alpha testing phase</strong>.
+                    We are starting small, laying the foundation for a full-scale browser engine.
+                    Watch the logs below for initialization status.
+                </p>
+                <div class="console-box" id="console">
+                    <!-- JS will populate this -->
+                    <div class="console-line"><span style="color: #60a5fa">></span> Initializing core modules...</div>
+                </div>
+                <div class="progress-container">
+                    <div class="progress-bar" id="progress-bar"></div>
+                </div>
+                <div class="actions">
+                    <button class="btn btn-primary" onclick="runTest()">Run Diagnostics</button>
+                    <button class="btn btn-secondary" onclick="resetSystem()">Reset</button>
+                </div>
+            </div>
+        </div>
+    </main>
+    <footer>
+        &copy; 2023 BlueProto Project. All systems operational.
+    </footer>
+    <script>
+        const consoleBox = document.getElementById('console');
+        const progressBar = document.getElementById('progress-bar');
+        const urlText = document.getElementById('url-text');
+        const logs = [
+            { text: "Loading assets...", color: "#94a3b8" },
+            { text: "Parsing CSS rules...", color: "#94a3b8" },
+            { text: "Compiling JS modules...", color: "#94a3b8" },
+            { text: "Connecting to neural network...", color: "#f59e0b" },
+            { text: "Optimizing render pipeline...", color: "#10b981" },
+            { text: "Rendering UI components...", color: "#94a3b8" },
+            { text: "System Ready. Waiting for input.", color: "#3b82f6" }
+        ];
+        let progress = 0;
+        let isRunning = false;
+        function addLog(text, color) {
+            const line = document.createElement('div');
+            line.className = 'console-line';
+            line.innerHTML = `<span style="color: ${color || '#60a5fa'}">></span> ${text}`;
+            consoleBox.appendChild(line);
+            consoleBox.scrollTop = consoleBox.scrollHeight;
+        }
+        function runTest() {
+            if (isRunning) return;
+            isRunning = true;
+            progress = 0;
+            progressBar.style.width = '0%';
+            consoleBox.innerHTML = ''; // Clear console
+            urlText.innerText = "local://diagnostics/running";
+            let logIndex = 0;
+            const interval = setInterval(() => {
+                progress += Math.random() * 5;
+                if (progress > 100) progress = 100;
+                progressBar.style.width = `${progress}%`;
+                // Add logs based on progress
+                if (progress > (logIndex + 1) * (100 / logs.length) && logIndex < logs.length) {
+                    addLog(logs[logIndex].text, logs[logIndex].color);
+                    logIndex++;
+                }
+                if (progress >= 100) {
+                    clearInterval(interval);
+                    isRunning = false;
+                    urlText.innerText = "local://prototype/test_env";
+                    addLog("Diagnostics Complete.", "#10b981");
+                }
+            }, 200);
+        }
+        function resetSystem() {
+            consoleBox.innerHTML = '<div class="console-line"><span style="color: #ef4444">></span> System reset initiated...</div>';
+            progressBar.style.width = '0%';
+            urlText.innerText = "local://system/reset";
+            setTimeout(() => {
+                consoleBox.innerHTML = '<div class="console-line"><span style="color: #60a5fa">></span> System Ready. Waiting for input.</div>';
+                urlText.innerText = "local://prototype/test_env";
+            }, 1000);
+        }
+        // Initial startup sequence
+        window.onload = () => {
+            setTimeout(() => {
+                addLog("DOM Content Loaded", "#94a3b8");
+                setTimeout(() => {
+                    addLog("Styles applied", "#94a3b8");
+                }, 500);
+            }, 800);
+        };
+        // Dynamic URL bar effect
+        setInterval(() => {
+            if(!isRunning) {
+                const states = ["idle", "listening", "monitoring", "standby"];
+                const randomState = states[Math.floor(Math.random() * states.length)];
+                // Only update occasionally to avoid flashing
+                if(Math.random() > 0.8) {
+                   // urlText.innerText = `local://prototype/${randomState}`;
+                }
+            }
+        }, 2000);
+    </script>
+</body>
+</html>