Spaces:

ThreeSixNine
/

siteforge-ai-editor

Running

App Files Files Community

ThreeSixNine commited on 30 days ago

Commit

d431ffd

verified ·

1 Parent(s): 4047279

This image is a screenshot of a web-based development environment called SiteForge, which appears to be an AI-powered website builder or code editor.

Browse files

Overall Layout
The interface is divided into two main sections:

Left Panel (Code Editor) - A dark-themed code editor showing an HTML file named "index.html" with syntax highlighting. The code is approximately 21 lines and includes:

Standard HTML5 boilerplate structure
Tailwind CSS integration via CDN
A simple centered layout with text content
A notification badge saying "New version dropped!"
The main heading: "I'm ready to work, Ask me anything."
Right Panel (Preview) - A live preview of the rendered webpage showing:

A clean, minimal design with white background
An orange notification pill at the top: "New version dropped!"
Large, centered text: "I'm ready to work," in gray, followed by "Ask me anything." in bold black
An animated arrow cursor pointing upward from the bottom
UI Elements
Top Navigation Bar:

SiteForge logo with a "PRO" badge in green
Action buttons: Desktop view, Mobile view, Refresh Preview, Help
User profile: "William T" with avatar
Settings icon
Bottom Input Area:

Text input field: "Ask SiteForge anything..."
Three action buttons: "Enhance" (purple), "deepseek-v3.024" (checked), "Redesign"
Send button with arrow icon
Right Sidebar:

Vertical toolbar with various icons for additional tools/features
Color Scheme
Editor: Dark background (#1e1e1e or similar) with colorful syntax highlighting (blue, orange, green, purple)
Preview: Clean white background with black and gray text
Accents: Orange for notifications, purple for primary actions, green for PRO badge
Typography
The preview uses a modern sans-serif font (likely Inter or similar)
"I'm ready to work," is in a lighter weight, medium size
"Ask me anything." is in bold, larger size for emphasis
Key Features for Recreation
To recreate this exactly, you'd need:

Two-panel layout with resizable divider
Syntax-highlighted code editor on the left (Monaco Editor or CodeMirror would work well)
Live preview iframe on the right that updates in real-time
Tailwind CSS for rapid styling
Notification system with dismissible badges
AI chat interface at the bottom with model selection
Responsive design controls (Desktop/Mobile toggle)
Enhancement Opportunities
This interface could be enhanced by:

Adding dark/light mode toggle for the preview
Including a component library sidebar for drag-and-drop elements
Adding version history with visual diff comparison
Implementing collaborative editing with real-time cursors
Adding deployment options (hosting, export to ZIP, GitHub sync)
Including accessibility checker and SEO analysis tools
Adding animation previews and micro-interaction controls
Implementing AI suggestions inline in the code editor
The overall aesthetic is modern, clean, and professional - typical of contemporary developer tools like Vercel's editor, Replit, or StackBlitz.

Files changed (2) hide show

README.md +6 -3
index.html +284 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Siteforge Ai Editor
-emoji: 👁
 colorFrom: purple
 colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: SiteForge AI Editor 🧠
 colorFrom: purple
 colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - siteforge-v3
 ---
+# Welcome to your new SiteForge project!
+This project was created with [SiteForge](https://threesixnine-siteforge.hf.space).

index.html CHANGED Viewed

@@ -1,19 +1,285 @@
-<!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>SiteForge AI Editor</title>
+    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧠</text></svg>">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#fff7ed',
+                            100: '#ffedd5',
+                            200: '#fed7aa',
+                            300: '#fdba74',
+                            400: '#fb923c',
+                            500: '#f97316',
+                            600: '#ea580c',
+                            700: '#c2410c',
+                            800: '#9a3412',
+                            900: '#7c2d12',
+                        },
+                        secondary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .editor-scrollbar::-webkit-scrollbar {
+            width: 8px;
+        }
+        .editor-scrollbar::-webkit-scrollbar-track {
+            background: #1e293b;
+        }
+        .editor-scrollbar::-webkit-scrollbar-thumb {
+            background: #475569;
+            border-radius: 4px;
+        }
+        .editor-scrollbar::-webkit-scrollbar-thumb:hover {
+            background: #64748b;
+        }
+        .resize-handle {
+            width: 5px;
+            cursor: col-resize;
+            background: linear-gradient(90deg, transparent 0%, rgba(156, 163, 175, 0.3) 50%, transparent 100%);
+        }
+        .pulse-dot {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7); }
+            70% { box-shadow: 0 0 0 10px rgba(249, 115, 22, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100 h-screen flex flex-col overflow-hidden">
+    <!-- Top Navigation -->
+    <header class="bg-gray-800 border-b border-gray-700 px-4 py-2 flex items-center justify-between">
+        <div class="flex items-center space-x-4">
+            <div class="flex items-center">
+                <span class="font-bold text-xl">SiteForge</span>
+                <span class="ml-2 bg-green-500 text-white text-xs px-2 py-1 rounded">PRO</span>
+            </div>
+            <div class="flex space-x-2">
+                <button class="p-2 rounded hover:bg-gray-700 transition">
+                    <i data-feather="monitor" class="w-4 h-4"></i>
+                </button>
+                <button class="p-2 rounded hover:bg-gray-700 transition">
+                    <i data-feather="smartphone" class="w-4 h-4"></i>
+                </button>
+                <button class="p-2 rounded hover:bg-gray-700 transition">
+                    <i data-feather="refresh-cw" class="w-4 h-4"></i>
+                </button>
+                <button class="p-2 rounded hover:bg-gray-700 transition">
+                    <i data-feather="help-circle" class="w-4 h-4"></i>
+                </button>
+            </div>
+        </div>
+        <div class="flex items-center space-x-4">
+            <div class="flex items-center space-x-2">
+                <span>William T</span>
+                <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center">
+                    <span>WT</span>
+                </div>
+            </div>
+            <button class="p-2 rounded hover:bg-gray-700 transition">
+                <i data-feather="settings" class="w-4 h-4"></i>
+            </button>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <div class="flex flex-1 overflow-hidden">
+        <!-- Left Panel - Code Editor -->
+        <div class="w-1/2 flex flex-col border-r border-gray-700">
+            <div class="px-4 py-2 bg-gray-800 border-b border-gray-700 flex items-center justify-between">
+                <div class="flex items-center space-x-2">
+                    <i data-feather="file-text" class="w-4 h-4"></i>
+                    <span>index.html</span>
+                </div>
+                <div class="flex space-x-1">
+                    <button class="p-1 rounded hover:bg-gray-700">
+                        <i data-feather="save" class="w-4 h-4"></i>
+                    </button>
+                    <button class="p-1 rounded hover:bg-gray-700">
+                        <i data-feather="copy" class="w-4 h-4"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="flex-1 overflow-auto editor-scrollbar bg-gray-900 p-4 font-mono text-sm">
+                <pre class="text-gray-300">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
+    &lt;title&gt;Document&lt;/title&gt;
+    &lt;script src="<span class="text-blue-400">https://cdn.tailwindcss.com</span>"&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body class="<span class="text-purple-400">bg-white</span>"&gt;
+    &lt;div class="<span class="text-yellow-400">absolute top-4 left-1/2 transform -translate-x-1/2</span>"&gt;
+        &lt;div class="<span class="text-orange-400">bg-orange-500 text-white px-4 py-1 rounded-full text-sm</span>"&gt;
+            New version dropped!
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="<span class="text-green-400">flex flex-col items-center justify-center min-h-screen</span>"&gt;
+        &lt;h1 class="<span class="text-gray-500">text-3xl mb-2</span>"&gt;I'm ready to work,&lt;/h1&gt;
+        &lt;h2 class="<span class="text-black">text-4xl font-bold</span>"&gt;Ask me anything.&lt;/h2&gt;
+    &lt;/div&gt;
+    &lt;div class="<span class="text-pink-400">absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce</span>"&gt;
+        &lt;i data-feather="<span class="text-blue-400">arrow-up</span>" class="<span class="text-black">w-8 h-8</span>"&gt;&lt;/i&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+            </div>
+        </div>
+        <!-- Resize Handle -->
+        <div class="resize-handle"></div>
+        <!-- Right Panel - Preview -->
+        <div class="w-1/2 flex flex-col bg-white">
+            <div class="px-4 py-2 bg-gray-100 border-b border-gray-300 flex items-center justify-between">
+                <div class="text-gray-700">Preview</div>
+                <div class="flex space-x-1">
+                    <button class="p-1 rounded hover:bg-gray-200">
+                        <i data-feather="maximize" class="w-4 h-4"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="flex-1 overflow-auto relative">
+                <!-- Preview Content -->
+                <div class="min-h-full bg-white">
+                    <!-- Notification Badge -->
+                    <div class="absolute top-4 left-1/2 transform -translate-x-1/2">
+                        <div class="bg-orange-500 text-white px-4 py-1 rounded-full text-sm">
+                            New version dropped!
+                        </div>
+                    </div>
+                    <!-- Main Content -->
+                    <div class="flex flex-col items-center justify-center min-h-screen">
+                        <h1 class="text-3xl mb-2 text-gray-500">I'm ready to work,</h1>
+                        <h2 class="text-4xl font-bold">Ask me anything.</h2>
+                    </div>
+                    <!-- Animated Arrow -->
+                    <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
+                        <i data-feather="arrow-up" class="w-8 h-8 text-black"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Bottom Input Area -->
+    <div class="border-t border-gray-700 bg-gray-800 p-3">
+        <div class="flex items-center">
+            <input
+                type="text"
+                placeholder="Ask SiteForge anything..."
+                class="flex-1 bg-gray-700 text-white rounded-l-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
+            >
+            <div class="flex bg-gray-700">
+                <button class="px-3 py-3 border-r border-gray-600 text-purple-400 hover:bg-gray-600 transition">
+                    Enhance
+                </button>
+                <button class="px-3 py-3 border-r border-gray-600 flex items-center space-x-1 hover:bg-gray-600 transition">
+                    <span>deepseek-v3.024</span>
+                    <i data-feather="check" class="w-4 h-4"></i>
+                </button>
+                <button class="px-3 py-3 flex items-center space-x-1 hover:bg-gray-600 transition">
+                    <span>Redesign</span>
+                </button>
+            </div>
+            <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-3 rounded-r-lg transition flex items-center">
+                <i data-feather="send" class="w-5 h-5"></i>
+            </button>
+        </div>
+    </div>
+    <!-- Right Sidebar -->
+    <div class="absolute right-0 top-16 bottom-16 w-12 bg-gray-800 border-l border-gray-700 flex flex-col items-center py-4 space-y-6">
+        <button class="p-2 rounded-lg hover:bg-gray-700 transition relative">
+            <i data-feather="layers" class="w-5 h-5"></i>
+            <div class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full pulse-dot"></div>
+        </button>
+        <button class="p-2 rounded-lg hover:bg-gray-700 transition">
+            <i data-feather="box" class="w-5 h-5"></i>
+        </button>
+        <button class="p-2 rounded-lg hover:bg-gray-700 transition">
+            <i data-feather="layout" class="w-5 h-5"></i>
+        </button>
+        <button class="p-2 rounded-lg hover:bg-gray-700 transition">
+            <i data-feather="code" class="w-5 h-5"></i>
+        </button>
+        <button class="p-2 rounded-lg hover:bg-gray-700 transition">
+            <i data-feather="bar-chart-2" class="w-5 h-5"></i>
+        </button>
+        <button class="p-2 rounded-lg hover:bg-gray-700 transition mt-auto">
+            <i data-feather="more-vertical" class="w-5 h-5"></i>
+        </button>
+    </div>
+    <script>
+        feather.replace();
+        // Simple resize functionality
+        document.addEventListener('DOMContentLoaded', function() {
+            const resizeHandle = document.querySelector('.resize-handle');
+            const leftPanel = document.querySelector('.w-1/2:first-child');
+            const rightPanel = document.querySelector('.w-1/2:last-child');
+            let isResizing = false;
+            resizeHandle.addEventListener('mousedown', function(e) {
+                isResizing = true;
+                document.body.style.cursor = 'col-resize';
+                e.preventDefault();
+            });
+            document.addEventListener('mousemove', function(e) {
+                if (!isResizing) return;
+                const containerOffsetLeft = document.querySelector('.flex').getBoundingClientRect().left;
+                const posX = e.clientX - containerOffsetLeft;
+                const containerWidth = document.querySelector('.flex').offsetWidth;
+                const newLeftWidth = (posX / containerWidth) * 100;
+                const newRightWidth = 100 - newLeftWidth;
+                if (newLeftWidth > 25 && newLeftWidth < 75) {
+                    leftPanel.style.width = `${newLeftWidth}%`;
+                    rightPanel.style.width = `${newRightWidth}%`;
+                }
+            });
+            document.addEventListener('mouseup', function() {
+                isResizing = false;
+                document.body.style.cursor = 'default';
+            });
+        });
+    </script>
+</body>
 </html>