Spaces:

S-Dreamer
/

indiecoder

Running

App Files Files Community

S-Dreamer commited on Jun 20

Commit

6dd39e6

verified ·

1 Parent(s): df8dd1c

undefined - Initial Deployment

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Indiecoder
-emoji: 👀
-colorFrom: green
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: indiecoder
+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,391 @@
-<!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>IndieCoder | Privacy-First Coding Platform</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>
+        .editor-container {
+            height: calc(100vh - 160px);
+        }
+        .sidebar {
+            transition: all 0.3s ease;
+        }
+        .sidebar-collapsed {
+            transform: translateX(-90%);
+        }
+        .tab-active {
+            border-bottom: 2px solid #3b82f6;
+            color: #3b82f6;
+        }
+        .terminal {
+            height: 200px;
+            overflow-y: auto;
+        }
+        .monaco-editor {
+            height: 100%;
+        }
+        .dropdown:hover .dropdown-menu {
+            display: block;
+        }
+        .animate-pulse {
+            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
+        @keyframes pulse {
+            0%, 100% {
+                opacity: 1;
+            }
+            50% {
+                opacity: 0.5;
+            }
+        }
+    </style>
+</head>
+<body class="bg-gray-100 text-gray-900 font-sans">
+    <!-- Navigation -->
+    <nav class="bg-white shadow-sm">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0 flex items-center">
+                        <i class="fas fa-code text-indigo-600 text-2xl mr-2"></i>
+                        <span class="text-xl font-bold text-indigo-600">IndieCoder</span>
+                    </div>
+                    <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
+                        <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
+                            Editor
+                        </a>
+                        <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
+                            Projects
+                        </a>
+                        <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
+                            Community
+                        </a>
+                    </div>
+                </div>
+                <div class="hidden sm:ml-6 sm:flex sm:items-center">
+                    <div class="ml-3 relative">
+                        <div class="dropdown relative">
+                            <button class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                                <span class="sr-only">Open user menu</span>
+                                <div class="h-8 w-8 rounded-full bg-indigo-600 flex items-center justify-center text-white">
+                                    <span>ID</span>
+                                </div>
+                            </button>
+                            <div class="dropdown-menu hidden absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
+                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a>
+                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
+                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="-mr-2 flex items-center sm:hidden">
+                    <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
+                        <span class="sr-only">Open main menu</span>
+                        <i class="fas fa-bars"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <!-- Main Content -->
+    <div class="flex h-full">
+        <!-- Sidebar -->
+        <div class="sidebar bg-gray-800 text-white w-64 flex-shrink-0">
+            <div class="p-4">
+                <div class="flex items-center justify-between mb-6">
+                    <h2 class="text-xl font-semibold">Project Files</h2>
+                    <button class="text-gray-400 hover:text-white">
+                        <i class="fas fa-plus"></i>
+                    </button>
+                </div>
+                <div class="space-y-2">
+                    <div class="flex items-center px-2 py-1 bg-gray-700 rounded">
+                        <i class="fas fa-folder text-yellow-400 mr-2"></i>
+                        <span>src</span>
+                    </div>
+                    <div class="ml-4 space-y-1">
+                        <div class="flex items-center px-2 py-1 hover:bg-gray-700 rounded">
+                            <i class="fas fa-file-code text-blue-400 mr-2"></i>
+                            <span>main.py</span>
+                        </div>
+                        <div class="flex items-center px-2 py-1 hover:bg-gray-700 rounded">
+                            <i class="fas fa-file-code text-blue-400 mr-2"></i>
+                            <span>utils.py</span>
+                        </div>
+                    </div>
+                    <div class="flex items-center px-2 py-1 hover:bg-gray-700 rounded">
+                        <i class="fas fa-file-code text-blue-400 mr-2"></i>
+                        <span>requirements.txt</span>
+                    </div>
+                    <div class="flex items-center px-2 py-1 hover:bg-gray-700 rounded">
+                        <i class="fas fa-file-alt text-green-400 mr-2"></i>
+                        <span>README.md</span>
+                    </div>
+                    <div class="flex items-center px-2 py-1 hover:bg-gray-700 rounded">
+                        <i class="fas fa-cog text-gray-400 mr-2"></i>
+                        <span>config.json</span>
+                    </div>
+                </div>
+            </div>
+            <div class="p-4 border-t border-gray-700">
+                <h3 class="text-sm font-semibold mb-2">Database</h3>
+                <div class="flex items-center px-2 py-1 hover:bg-gray-700 rounded">
+                    <i class="fas fa-database text-purple-400 mr-2"></i>
+                    <span>local.db</span>
+                </div>
+            </div>
+            <div class="p-4 border-t border-gray-700">
+                <h3 class="text-sm font-semibold mb-2">Docker</h3>
+                <div class="flex items-center px-2 py-1 hover:bg-gray-700 rounded">
+                    <i class="fab fa-docker text-blue-400 mr-2"></i>
+                    <span>Dockerfile</span>
+                </div>
+                <div class="flex items-center px-2 py-1 hover:bg-gray-700 rounded">
+                    <i class="fas fa-file-code text-blue-400 mr-2"></i>
+                    <span>docker-compose.yml</span>
+                </div>
+            </div>
+        </div>
+        <!-- Main Editor Area -->
+        <div class="flex-1 flex flex-col overflow-hidden">
+            <!-- Editor Tabs -->
+            <div class="bg-white border-b border-gray-200">
+                <div class="flex">
+                    <div class="flex-1 flex overflow-x-auto">
+                        <div class="flex">
+                            <div class="tab-active px-4 py-2 text-sm font-medium">
+                                main.py
+                            </div>
+                            <div class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">
+                                utils.py
+                            </div>
+                            <div class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">
+                                README.md
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex items-center px-4">
+                        <button class="text-gray-400 hover:text-gray-500 mr-3">
+                            <i class="fas fa-save"></i>
+                        </button>
+                        <button class="text-gray-400 hover:text-gray-500">
+                            <i class="fas fa-ellipsis-v"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- Editor Content -->
+            <div class="editor-container flex-1 overflow-auto bg-white">
+                <div class="h-full">
+                    <div class="monaco-editor">
+                        <div class="bg-gray-50 p-4">
+                            <pre class="text-gray-800 font-mono text-sm">
+<span class="text-purple-600">from</span> flask <span class="text-purple-600">import</span> Flask, render_template, request
+<span class="text-purple-600">from</span> flask_sqlalchemy <span class="text-purple-600">import</span> SQLAlchemy
+<span class="text-purple-600">import</span> os
+<span class="text-gray-500"># Initialize the Flask application</span>
+app = Flask(__name__)
+<span class="text-gray-500"># Configure database</span>
+app.config[<span class="text-green-600">'SQLALCHEMY_DATABASE_URI'</span>] = <span class="text-green-600">'sqlite:///local.db'</span>
+app.config[<span class="text-green-600">'SQLALCHEMY_TRACK_MODIFICATIONS'</span>] = <span class="text-purple-600">False</span>
+db = SQLAlchemy(app)
+<span class="text-gray-500"># Define a simple User model</span>
+<span class="text-purple-600">class</span> <span class="text-blue-600">User</span>(db.Model):
+    id = db.Column(db.Integer, primary_key=<span class="text-purple-600">True</span>)
+    username = db.Column(db.String(<span class="text-yellow-600">80</span>), unique=<span class="text-purple-600">True</span>, nullable=<span class="text-purple-600">False</span>)
+    email = db.Column(db.String(<span class="text-yellow-600">120</span>), unique=<span class="text-purple-600">True</span>, nullable=<span class="text-purple-600">False</span>)
+    <span class="text-purple-600">def</span> <span class="text-blue-600">__repr__</span>(<span class="text-blue-600">self</span>):
+        <span class="text-purple-600">return</span> f<span class="text-green-600">'&lt;User {self.username}&gt;'</span>
+<span class="text-gray-500"># Create database tables</span>
+<span class="text-purple-600">with</span> app.app_context():
+    db.create_all()
+<span class="text-gray-500"># Main route</span>
+<span class="text-purple-600">@app</span>.route(<span class="text-green-600">'/'</span>)
+<span class="text-purple-600">def</span> <span class="text-blue-600">index</span>():
+    <span class="text-purple-600">return</span> render_template(<span class="text-green-600">'index.html'</span>)
+<span class="text-gray-500"># Run the application</span>
+<span class="text-purple-600">if</span> __name__ == <span class="text-green-600">'__main__'</span>:
+    app.run(debug=<span class="text-purple-600">True</span>)</pre>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Terminal -->
+            <div class="bg-gray-800 text-white terminal">
+                <div class="flex items-center px-4 py-2 border-b border-gray-700">
+                    <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="ml-4 text-sm font-medium">Terminal</div>
+                </div>
+                <div class="p-3 font-mono text-sm">
+                    <div class="text-green-400">$ python main.py</div>
+                    <div class="text-gray-400">* Serving Flask app 'main'</div>
+                    <div class="text-gray-400">* Debug mode: on</div>
+                    <div class="text-gray-400">WARNING: This is a development server. Do not use it in a production deployment.</div>
+                    <div class="text-gray-400">* Running on http://127.0.0.1:5000</div>
+                    <div class="text-gray-400">Press CTRL+C to quit</div>
+                    <div class="text-green-400">$</div>
+                    <div class="animate-pulse">|</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Bottom Status Bar -->
+    <div class="bg-gray-800 text-gray-300 text-xs px-4 py-1 flex justify-between">
+        <div class="flex items-center space-x-4">
+            <div class="flex items-center">
+                <i class="fas fa-code-branch text-gray-500 mr-1"></i>
+                <span>main</span>
+            </div>
+            <div class="flex items-center">
+                <i class="fas fa-shield-alt text-green-500 mr-1"></i>
+                <span>Privacy Mode</span>
+            </div>
+            <div class="flex items-center">
+                <i class="fab fa-docker text-blue-400 mr-1"></i>
+                <span>Docker Ready</span>
+            </div>
+        </div>
+        <div class="flex items-center space-x-4">
+            <div class="flex items-center">
+                <i class="fas fa-memory text-yellow-500 mr-1"></i>
+                <span>256MB / 2GB</span>
+            </div>
+            <div class="flex items-center">
+                <i class="fas fa-microchip text-purple-400 mr-1"></i>
+                <span>CPU: 12%</span>
+            </div>
+            <div class="flex items-center">
+                <i class="fas fa-circle text-green-500 mr-1"></i>
+                <span>Localhost</span>
+            </div>
+        </div>
+    </div>
+    <!-- Mobile Menu (hidden by default) -->
+    <div class="hidden sm:hidden" id="mobile-menu">
+        <div class="pt-2 pb-3 space-y-1">
+            <a href="#" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Editor</a>
+            <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Projects</a>
+            <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Community</a>
+        </div>
+    </div>
+    <!-- Welcome Modal -->
+    <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full">
+            <div class="p-6">
+                <div class="flex justify-between items-start">
+                    <div>
+                        <h2 class="text-2xl font-bold text-indigo-600 mb-2">Welcome to IndieCoder</h2>
+                        <p class="text-gray-600 mb-4">Your privacy-first, self-hostable coding platform</p>
+                    </div>
+                    <button class="text-gray-400 hover:text-gray-500">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                    <div class="bg-gray-50 p-4 rounded-lg">
+                        <div class="text-indigo-600 mb-2">
+                            <i class="fas fa-lock text-2xl"></i>
+                        </div>
+                        <h3 class="font-semibold mb-1">Privacy First</h3>
+                        <p class="text-sm text-gray-600">Your code never leaves your infrastructure. No telemetry, no tracking.</p>
+                    </div>
+                    <div class="bg-gray-50 p-4 rounded-lg">
+                        <div class="text-indigo-600 mb-2">
+                            <i class="fas fa-server text-2xl"></i>
+                        </div>
+                        <h3 class="font-semibold mb-1">Self-Hostable</h3>
+                        <p class="text-sm text-gray-600">Run on your own server with Docker. Full control over your environment.</p>
+                    </div>
+                    <div class="bg-gray-50 p-4 rounded-lg">
+                        <div class="text-indigo-600 mb-2">
+                            <i class="fas fa-code text-2xl"></i>
+                        </div>
+                        <h3 class="font-semibold mb-1">Full Stack</h3>
+                        <p class="text-sm text-gray-600">Flask backend, React frontend, SQLite/Postgres support out of the box.</p>
+                    </div>
+                </div>
+                <div class="bg-blue-50 p-4 rounded-lg mb-4">
+                    <h3 class="font-semibold text-blue-800 mb-2">Quick Start</h3>
+                    <div class="bg-gray-800 text-white p-3 rounded font-mono text-sm overflow-x-auto">
+                        <div class="text-green-400"># Clone the repository</div>
+                        <div class="mb-2">git clone https://github.com/indiecoder/indiecoder.git</div>
+                        <div class="text-green-400"># Start with Docker</div>
+                        <div>cd indiecoder</div>
+                        <div>docker-compose up</div>
+                    </div>
+                </div>
+                <div class="flex justify-end">
+                    <button class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                        Get Started
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Toggle mobile menu
+        document.querySelector('button[aria-controls="mobile-menu"]').addEventListener('click', function() {
+            document.getElementById('mobile-menu').classList.toggle('hidden');
+        });
+        // Toggle sidebar
+        document.querySelector('.sidebar-toggle').addEventListener('click', function() {
+            document.querySelector('.sidebar').classList.toggle('sidebar-collapsed');
+        });
+        // Close welcome modal
+        document.querySelector('.modal-close').addEventListener('click', function() {
+            document.querySelector('.modal').classList.add('hidden');
+        });
+        // File tree navigation
+        document.querySelectorAll('.file-tree-item').forEach(item => {
+            item.addEventListener('click', function() {
+                // In a real app, this would load the file content
+                console.log('Opening file:', this.textContent.trim());
+            });
+        });
+        // Terminal input simulation
+        const terminalInput = document.querySelector('.terminal-input');
+        if (terminalInput) {
+            terminalInput.addEventListener('keydown', function(e) {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    // Process command here
+                    const command = this.textContent.trim();
+                    console.log('Command executed:', command);
+                    this.textContent = '$ ';
+                }
+            });
+        }
+    </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=S-Dreamer/indiecoder" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>