Hugging Face's logo

Spaces:
ThreeSixNine
/
siteforge-ai-editor
Running

App Files Community
siteforge-ai-editor / index.html
ThreeSixNine's picture
ThreeSixNine
redesign
c5bc24c verified
raw
history blame contribute delete
20.6 kB
<!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;Nebula AI&lt;/title&gt;
 &lt;script src="<span class="text-blue-400">https://cdn.tailwindcss.com</span>"&gt;&lt;/script&gt;
 &lt;link href="<span class="text-blue-400">https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&amp;display=swap</span>" rel="stylesheet"&gt;
 &lt;style&gt; body { font-family: 'Inter', sans-serif; } &lt;/style&gt;
&lt;/head&gt;
&lt;body class="<span class="text-purple-400">bg-slate-900 text-white</span>"&gt;
 &lt;nav class="<span class="text-green-400">w-full py-6 px-8 flex justify-between items-center</span>"&gt;
 &lt;div class="<span class="text-yellow-400">text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-500</span>"&gt;Nebula&lt;/div&gt;
 &lt;div class="<span class="text-orange-400">hidden md:flex space-x-8 text-slate-300</span>"&gt;
 &lt;a href="#" class="hover:text-cyan-400"&gt;Features&lt;/a&gt;
 &lt;a href="#" class="hover:text-cyan-400"&gt;Pricing&lt;/a&gt;
 &lt;a href="#" class="hover:text-cyan-400"&gt;About&lt;/a&gt;
 &lt;/div&gt;
 &lt;button class="<span class="text-pink-400">bg-cyan-500 hover:bg-cyan-600 text-white px-5 py-2 rounded-full transition</span>"&gt;Get Started&lt;/button&gt;
 &lt;/nav&gt;
&lt;header class="<span class="text-blue-400">container mx-auto px-6 py-20 text-center relative overflow-hidden</span>"&gt;
 &lt;div class="<span class="text-purple-400">absolute top-0 left-1/2 -translate-x-1/2 w-full h-full bg-purple-600 blur-[120px] opacity-20 -z-10</span>"&gt;&lt;/div&gt;
 &lt;span class="<span class="text-green-400">bg-slate-800 border border-slate-700 text-cyan-400 px-4 py-1 rounded-full text-sm font-semibold</span>"&gt;
 ✨ AI-Powered Generation v2.0
 &lt;/span&gt;
 &lt;h1 class="<span class="text-gray-500">text-5xl md:text-7xl font-bold mt-8 leading-tight</span>"&gt;
 Create &lt;span class="bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-500"&gt;Intelligent&lt;/span&gt; &lt;br/&gt; Web Experiences
 &lt;/h1&gt;
 &lt;p class="<span class="text-black">text-slate-400 mt-6 text-lg max-w-2xl mx-auto</span>"&gt;
 Nebula helps you build stunning, responsive websites in minutes using advanced generative AI algorithms.
 &lt;/p&gt;
 &lt;div class="<span class="text-pink-400">mt-10 flex justify-center gap-4</span>"&gt;
 &lt;button class="<span class="text-yellow-400">bg-white text-slate-900 px-8 py-3 rounded-lg font-semibold hover:bg-slate-100 transition</span>"&gt;
 Start Free Trial
 &lt;/button&gt;
 &lt;button class="<span class="text-orange-400">border border-slate-600 px-8 py-3 rounded-lg font-semibold hover:bg-slate-800 transition</span>"&gt;
 View Demo
 &lt;/button&gt;
 &lt;/div&gt;
 &lt;/header&gt;
&lt;section class="<span class="text-blue-400">container mx-auto px-6 py-20 grid md:grid-cols-3 gap-8</span>"&gt;
 &lt;div class="<span class="text-green-400">bg-slate-800/50 p-8 rounded-2xl border border-slate-700 hover:border-cyan-500/50 transition</span>"&gt;
 &lt;div class="<span class="text-pink-400">w-12 h-12 bg-cyan-500/20 rounded-lg flex items-center justify-center text-cyan-400 mb-4</span>"&gt;⚡&lt;/div&gt;
 &lt;h3 class="<span class="text-gray-500">text-xl font-bold mb-2</span>"&gt;Lightning Fast&lt;/h3&gt;
 &lt;p class="<span class="text-black">text-slate-400 text-sm</span>"&gt;Optimized for speed and performance, ensuring your users get the best experience.&lt;/p&gt;
 &lt;/div&gt;
 &lt;div class="<span class="text-green-400">bg-slate-800/50 p-8 rounded-2xl border border-slate-700 hover:border-purple-500/50 transition</span>"&gt;
 &lt;div class="<span class="text-pink-400">w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center text-purple-400 mb-4</span>"&gt;🎨&lt;/div&gt;
 &lt;h3 class="<span class="text-gray-500">text-xl font-bold mb-2</span>"&gt;Design Freedom&lt;/h3&gt;
 &lt;p class="<span class="text-black">text-slate-400 text-sm</span>"&gt;Full control over your design system with advanced customization tools.&lt;/p&gt;
 &lt;/div&gt;
 &lt;div class="<span class="text-green-400">bg-slate-800/50 p-8 rounded-2xl border border-slate-700 hover:border-pink-500/50 transition</span>"&gt;
 &lt;div class="<span class="text-pink-400">w-12 h-12 bg-pink-500/20 rounded-lg flex items-center justify-center text-pink-400 mb-4</span>"&gt;🔒&lt;/div&gt;
 &lt;h3 class="<span class="text-gray-500">text-xl font-bold mb-2</span>"&gt;Secure by Default&lt;/h3&gt;
 &lt;p class="<span class="text-black">text-slate-400 text-sm</span>"&gt;Enterprise-grade security built into every layer of the platform.&lt;/p&gt;
 &lt;/div&gt;
 &lt;/section&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-slate-900 border-b border-slate-700 flex items-center justify-between text-white">
 <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-slate-900 font-sans">
 <nav class="w-full py-6 px-8 flex justify-between items-center">
 <div class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-500">Nebula</div>
 <div class="hidden md:flex space-x-8 text-slate-300 text-sm">
 <a href="#" class="hover:text-cyan-400 transition">Features</a>
 <a href="#" class="hover:text-cyan-400 transition">Pricing</a>
 <a href="#" class="hover:text-cyan-400 transition">About</a>
 </div>
 <button class="bg-cyan-500 hover:bg-cyan-600 text-white px-5 py-2 rounded-full text-sm font-semibold transition shadow-lg shadow-cyan-500/30">Get Started</button>
 </nav>
<header class="container mx-auto px-6 py-20 text-center relative overflow-hidden">
 <!-- Background Glow -->
 <div class="absolute top-0 left-1/2 -translate-x-1/2 w-3/4 h-full bg-purple-600 blur-[120px] opacity-20 -z-10 rounded-full pointer-events-none"></div>
<span class="bg-slate-800/80 backdrop-blur border border-slate-700 text-cyan-400 px-4 py-1 rounded-full text-sm font-semibold inline-block">
 ✨ AI-Powered Generation v2.0
 </span>
 <h1 class="text-5xl md:text-7xl font-bold mt-8 leading-tight tracking-tight">
 Create <span class="bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-500">Intelligent</span> <br/>
 Web Experiences
 </h1>
 <p class="text-slate-400 mt-6 text-lg max-w-2xl mx-auto leading-relaxed">
 Nebula helps you build stunning, responsive websites in minutes using advanced generative AI algorithms tailored to your needs.
 </p>
 <div class="mt-10 flex justify-center gap-4">
 <button class="bg-white text-slate-900 px-8 py-3 rounded-lg font-bold hover:bg-slate-100 transition transform hover:-translate-y-1 shadow-xl">
 Start Free Trial
 </button>
 <button class="border border-slate-600 px-8 py-3 rounded-lg font-semibold hover:bg-slate-800 transition text-slate-300">
 View Demo
 </button>
 </div>
 </header>
<section class="container mx-auto px-6 py-10 grid md:grid-cols-3 gap-6">
 <!-- Card 1 -->
 <div class="bg-slate-800/40 backdrop-blur-sm p-8 rounded-2xl border border-slate-700 hover:border-cyan-500/50 transition hover:bg-slate-800/60 group">
 <div class="w-12 h-12 bg-cyan-500/20 rounded-lg flex items-center justify-center text-cyan-400 mb-4 text-xl group-hover:scale-110 transition duration-300">⚡</div>
 <h3 class="text-xl font-bold mb-2 text-white">Lightning Fast</h3>
 <p class="text-slate-400 text-sm leading-relaxed">Optimized for speed and performance, ensuring your users get the best experience possible.</p>
 </div>
 <!-- Card 2 -->
 <div class="bg-slate-800/40 backdrop-blur-sm p-8 rounded-2xl border border-slate-700 hover:border-purple-500/50 transition hover:bg-slate-800/60 group">
 <div class="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center text-purple-400 mb-4 text-xl group-hover:scale-110 transition duration-300">🎨</div>
 <h3 class="text-xl font-bold mb-2 text-white">Design Freedom</h3>
 <p class="text-slate-400 text-sm leading-relaxed">Full control over your design system with advanced customization tools.</p>
 </div>
 <!-- Card 3 -->
 <div class="bg-slate-800/40 backdrop-blur-sm p-8 rounded-2xl border border-slate-700 hover:border-pink-500/50 transition hover:bg-slate-800/60 group">
 <div class="w-12 h-12 bg-pink-500/20 rounded-lg flex items-center justify-center text-pink-400 mb-4 text-xl group-hover:scale-110 transition duration-300">🔒</div>
 <h3 class="text-xl font-bold mb-2 text-white">Secure by Default</h3>
 <p class="text-slate-400 text-sm leading-relaxed">Enterprise-grade security built into every layer of the platform.</p>
 </div>
 </section>
 </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>