Spaces:

jeffgui
/

jeff-deepsite

Running

App Files Files Community

jeffgui commited on Apr 2

Commit

8205d95

verified ·

1 Parent(s): df14b55

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +258 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Jeff Deepsite
-emoji: 📊
-colorFrom: purple
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: jeff-deepsite
+emoji: 🐳
+colorFrom: blue
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,258 @@
-<!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>PyCraft - Python Code Editor</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .code-editor {
+            font-family: 'Fira Code', monospace;
+            tab-size: 4;
+        }
+        .line-numbers {
+            user-select: none;
+            text-align: right;
+        }
+        .python-keyword {
+            color: #ff79c6;
+        }
+        .python-builtin {
+            color: #8be9fd;
+        }
+        .python-string {
+            color: #f1fa8c;
+        }
+        .python-comment {
+            color: #6272a4;
+        }
+        .python-number {
+            color: #bd93f9;
+        }
+        .python-operator {
+            color: #ff5555;
+        }
+        .cursor-blink {
+            animation: blink 1s step-end infinite;
+        }
+        @keyframes blink {
+            from, to { opacity: 1; }
+            50% { opacity: 0; }
+        }
+        .terminal {
+            font-family: 'Courier New', monospace;
+            background-color: #1e1e1e;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="flex justify-between items-center mb-6">
+            <div class="flex items-center space-x-2">
+                <i class="fab fa-python text-3xl text-blue-400"></i>
+                <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-green-400 bg-clip-text text-transparent">PyCraft</h1>
+            </div>
+            <div class="flex space-x-4">
+                <button id="run-btn" class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-lg flex items-center space-x-2 transition-all">
+                    <i class="fas fa-play"></i>
+                    <span>Run (F5)</span>
+                </button>
+                <button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center space-x-2 transition-all">
+                    <i class="fas fa-save"></i>
+                    <span>Save</span>
+                </button>
+                <button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center space-x-2 transition-all">
+                    <i class="fas fa-cog"></i>
+                </button>
+            </div>
+        </header>
+        <!-- Main Editor Area -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <!-- Code Editor -->
+            <div class="bg-gray-800 rounded-xl overflow-hidden shadow-2xl">
+                <div class="bg-gray-700 px-4 py-2 flex justify-between items-center">
+                    <div class="flex space-x-2">
+                        <div class="w-3 h-3 rounded-full bg-red-500"></div>
+                        <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+                        <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                    </div>
+                    <div class="text-sm text-gray-400">main.py</div>
+                    <div class="w-8"></div>
+                </div>
+                <div class="p-4">
+                    <div class="code-editor flex h-96">
+                        <div class="line-numbers w-10 pr-2 text-gray-500 select-none overflow-hidden">
+                            <!-- Line numbers will be generated by JS -->
+                        </div>
+                        <textarea id="python-code" class="flex-1 bg-transparent outline-none resize-none text-white overflow-auto" spellcheck="false"># Welcome to PyCraft!
+# Write your Python code here
+def greet(name):
+    """A simple greeting function"""
+    print(f"Hello, {name}!")
+if __name__ == "__main__":
+    names = ["Alice", "Bob", "Charlie"]
+    for name in names:
+        greet(name)
+# Try pressing F5 or the Run button</textarea>
+                    </div>
+                </div>
+            </div>
+            <!-- Output Terminal -->
+            <div class="bg-gray-800 rounded-xl overflow-hidden shadow-2xl flex flex-col">
+                <div class="bg-gray-700 px-4 py-2 flex justify-between items-center">
+                    <div class="flex items-center space-x-2">
+                        <i class="fas fa-terminal text-green-400"></i>
+                        <span class="text-sm">Terminal</span>
+                    </div>
+                    <button id="clear-terminal" class="text-gray-400 hover:text-white">
+                        <i class="fas fa-trash-alt"></i>
+                    </button>
+                </div>
+                <div class="terminal flex-1 p-4 overflow-y-auto" id="output-terminal">
+                    <div class="text-green-400">PyCraft v1.0 - Python 3.x</div>
+                    <div class="text-gray-400">Output will appear here...</div>
+                </div>
+                <div class="bg-gray-700 px-4 py-2 flex items-center">
+                    <span class="text-green-400 mr-2">>>></span>
+                    <input type="text" id="terminal-input" class="bg-transparent outline-none flex-1" placeholder="Enter Python commands...">
+                </div>
+            </div>
+        </div>
+        <!-- Features Section -->
+        <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div class="bg-gray-800 p-6 rounded-xl shadow-lg">
+                <div class="flex items-center mb-4">
+                    <div class="bg-blue-500 p-2 rounded-lg mr-4">
+                        <i class="fas fa-bolt text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold">Fast Execution</h3>
+                </div>
+                <p class="text-gray-400">Run your Python code instantly with our optimized execution engine. No setup required.</p>
+            </div>
+            <div class="bg-gray-800 p-6 rounded-xl shadow-lg">
+                <div class="flex items-center mb-4">
+                    <div class="bg-purple-500 p-2 rounded-lg mr-4">
+                        <i class="fas fa-code text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold">Syntax Highlighting</h3>
+                </div>
+                <p class="text-gray-400">Beautiful syntax highlighting that makes your code more readable and easier to debug.</p>
+            </div>
+            <div class="bg-gray-800 p-6 rounded-xl shadow-lg">
+                <div class="flex items-center mb-4">
+                    <div class="bg-green-500 p-2 rounded-lg mr-4">
+                        <i class="fas fa-terminal text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold">Interactive Terminal</h3>
+                </div>
+                <p class="text-gray-400">Experiment with Python commands in real-time using our interactive terminal.</p>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Initialize the editor
+        document.addEventListener('DOMContentLoaded', function() {
+            const codeTextarea = document.getElementById('python-code');
+            const lineNumbers = document.querySelector('.line-numbers');
+            const outputTerminal = document.getElementById('output-terminal');
+            const runButton = document.getElementById('run-btn');
+            const clearTerminalButton = document.getElementById('clear-terminal');
+            const terminalInput = document.getElementById('terminal-input');
+            // Generate line numbers
+            function updateLineNumbers() {
+                const lines = codeTextarea.value.split('\n');
+                lineNumbers.innerHTML = lines.map((_, i) => `<div>${i + 1}</div>`).join('');
+            }
+            // Syntax highlighting (simplified)
+            function applySyntaxHighlighting() {
+                // This is a simplified version - a real implementation would use a proper parser
+                const code = codeTextarea.value;
+                // Highlighting would be applied here in a real implementation
+            }
+            // Run Python code
+            function runPythonCode() {
+                const code = codeTextarea.value;
+                outputTerminal.innerHTML += `<div class="text-blue-400">Running your code...</div>`;
+                // In a real implementation, this would send the code to a Python interpreter
+                // For this demo, we'll simulate execution with setTimeout
+                setTimeout(() => {
+                    try {
+                        // Simulate output
+                        const mockOutput = `Hello, Alice!\nHello, Bob!\nHello, Charlie!\n`;
+                        outputTerminal.innerHTML += `<div class="text-gray-100 whitespace-pre">${mockOutput}</div>`;
+                        outputTerminal.innerHTML += `<div class="text-green-400">Program finished successfully.</div>`;
+                    } catch (error) {
+                        outputTerminal.innerHTML += `<div class="text-red-400">Error: ${error.message}</div>`;
+                    }
+                    outputTerminal.scrollTop = outputTerminal.scrollHeight;
+                }, 500);
+            }
+            // Clear terminal
+            function clearTerminal() {
+                outputTerminal.innerHTML = '<div class="text-green-400">PyCraft v1.0 - Python 3.x</div>';
+            }
+            // Handle terminal input
+            function handleTerminalInput() {
+                const command = terminalInput.value.trim();
+                if (command) {
+                    outputTerminal.innerHTML += `<div class="text-yellow-400">>>> ${command}</div>`;
+                    // Simulate command execution
+                    setTimeout(() => {
+                        if (command.includes('print')) {
+                            outputTerminal.innerHTML += `<div class="text-gray-100">${command.replace('print', '').replace(/['"()]/g, '')}</div>`;
+                        } else if (command === 'help') {
+                            outputTerminal.innerHTML += `<div class="text-gray-100">Type Python commands to execute them interactively.</div>`;
+                        } else {
+                            outputTerminal.innerHTML += `<div class="text-gray-100">Command executed (simulated).</div>`;
+                        }
+                        outputTerminal.scrollTop = outputTerminal.scrollHeight;
+                    }, 300);
+                }
+                terminalInput.value = '';
+            }
+            // Event listeners
+            codeTextarea.addEventListener('input', () => {
+                updateLineNumbers();
+                applySyntaxHighlighting();
+            });
+            runButton.addEventListener('click', runPythonCode);
+            clearTerminalButton.addEventListener('click', clearTerminal);
+            terminalInput.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') {
+                    handleTerminalInput();
+                }
+            });
+            // Keyboard shortcut for running code (F5)
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'F5') {
+                    e.preventDefault();
+                    runPythonCode();
+                }
+            });
+            // Initialize
+            updateLineNumbers();
+            applySyntaxHighlighting();
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=jeffgui/jeff-deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>