|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>v0 Clone - AI Code Generation Tool</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> |
|
|
.resize-handle { |
|
|
width: 4px; |
|
|
background-color: rgba(55, 65, 81, 0.5); |
|
|
cursor: col-resize; |
|
|
transition: background-color 0.2s; |
|
|
} |
|
|
.resize-handle:hover { |
|
|
background-color: rgba(55, 65, 81, 0.8); |
|
|
} |
|
|
.tab-active { |
|
|
border-bottom: 2px solid #3b82f6; |
|
|
color: #3b82f6; |
|
|
} |
|
|
.chat-bubble-ai { |
|
|
background-color: #374151; |
|
|
border-radius: 0.75rem 0.75rem 0.75rem 0; |
|
|
} |
|
|
.chat-bubble-user { |
|
|
background-color: #3b82f6; |
|
|
border-radius: 0.75rem 0.75rem 0 0.75rem; |
|
|
} |
|
|
.code-editor { |
|
|
font-family: 'Courier New', Courier, monospace; |
|
|
font-size: 14px; |
|
|
line-height: 1.5; |
|
|
} |
|
|
.diff-added { |
|
|
background-color: rgba(74, 222, 128, 0.1); |
|
|
animation: highlightAdded 1.5s ease-out; |
|
|
} |
|
|
.diff-removed { |
|
|
background-color: rgba(248, 113, 113, 0.1); |
|
|
animation: highlightRemoved 1.5s ease-out; |
|
|
} |
|
|
@keyframes highlightAdded { |
|
|
0% { background-color: rgba(74, 222, 128, 0.3); } |
|
|
100% { background-color: rgba(74, 222, 128, 0.1); } |
|
|
} |
|
|
@keyframes highlightRemoved { |
|
|
0% { background-color: rgba(248, 113, 113, 0.3); } |
|
|
100% { background-color: rgba(248, 113, 113, 0.1); } |
|
|
} |
|
|
.file-change-count { |
|
|
font-size: 0.7rem; |
|
|
padding: 0.1rem 0.3rem; |
|
|
border-radius: 0.2rem; |
|
|
font-feature-settings: "tnum"; |
|
|
font-variant-numeric: tabular-nums; |
|
|
} |
|
|
.preview-container { |
|
|
transform-origin: top left; |
|
|
} |
|
|
@media (max-width: 768px) { |
|
|
.mobile-stack { |
|
|
flex-direction: column; |
|
|
} |
|
|
.mobile-full-width { |
|
|
width: 100% !important; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-100 h-screen flex flex-col overflow-hidden"> |
|
|
|
|
|
<header class="bg-gray-800 px-4 py-2 flex items-center justify-between"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<h1 class="text-xl font-bold text-blue-400">v0 Clone</h1> |
|
|
<div class="hidden md:flex space-x-2"> |
|
|
<button class="px-3 py-1 rounded hover:bg-gray-700">New Project</button> |
|
|
<button class="px-3 py-1 rounded hover:bg-gray-700">Templates</button> |
|
|
<button class="px-3 py-1 rounded hover:bg-gray-700">Examples</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded">Deploy</button> |
|
|
<div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex overflow-hidden mobile-stack"> |
|
|
|
|
|
<div class="w-1/2 flex flex-col mobile-full-width" style="min-width: 300px;"> |
|
|
|
|
|
<div class="flex border-b border-gray-700"> |
|
|
<button id="chat-tab" class="flex-1 py-3 px-4 font-medium tab-active"> |
|
|
<i class="fas fa-comment-dots mr-2"></i>Chat |
|
|
</button> |
|
|
<button id="design-tab" class="flex-1 py-3 px-4 font-medium"> |
|
|
<i class="fas fa-paint-brush mr-2"></i>Design |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="chat-content" class="flex-1 flex flex-col overflow-hidden"> |
|
|
<div class="flex-1 overflow-y-auto p-4" id="chat-messages"> |
|
|
<div class="h-full flex flex-col items-center justify-center text-center px-8"> |
|
|
<div class="max-w-md mx-auto"> |
|
|
<div class="w-16 h-16 bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-robot text-2xl text-blue-400"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-medium mb-2">Design Assistant</h3> |
|
|
<p class="text-gray-400 mb-6">Describe what you'd like to create and I'll help you build it. You can:</p> |
|
|
<div class="grid grid-cols-2 gap-3 text-sm"> |
|
|
<button class="bg-gray-800 hover:bg-gray-700 rounded-lg p-3"> |
|
|
<i class="fas fa-paint-brush text-blue-400 mr-2"></i> |
|
|
Generate UI |
|
|
</button> |
|
|
<button class="bg-gray-800 hover:bg-gray-700 rounded-lg p-3"> |
|
|
<i class="fas fa-code text-blue-400 mr-2"></i> |
|
|
Create Component |
|
|
</button> |
|
|
<button class="bg-gray-800 hover:bg-gray-700 rounded-lg p-3"> |
|
|
<i class="fas fa-search text-blue-400 mr-2"></i> |
|
|
Web Search |
|
|
</button> |
|
|
<button class="bg-gray-800 hover:bg-gray-700 rounded-lg p-3"> |
|
|
<i class="fas fa-image text-blue-400 mr-2"></i> |
|
|
Generate Images |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-4 border-t border-gray-700"> |
|
|
<div class="relative flex items-center space-x-2"> |
|
|
<button class="p-2 rounded-full hover:bg-gray-700" title="Attach files"> |
|
|
<i class="fas fa-paperclip text-gray-400"></i> |
|
|
</button> |
|
|
<input type="text" placeholder="Describe what you want to create..." |
|
|
class="flex-1 bg-gray-700 border border-gray-600 rounded-full px-4 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"> |
|
|
<div class="flex items-center space-x-1"> |
|
|
<button class="p-2 rounded-full hover:bg-gray-700 relative group" title="Enhancements"> |
|
|
<i class="fas fa-bolt text-yellow-400"></i> |
|
|
<div class="absolute hidden group-hover:block bottom-full right-0 mb-2 w-48 bg-gray-800 rounded-lg shadow-lg z-10"> |
|
|
<div class="p-2 space-y-2"> |
|
|
<div class="flex items-center justify-between px-2 py-1 hover:bg-gray-700 rounded"> |
|
|
<span class="text-sm">Web Search</span> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" class="sr-only peer" checked> |
|
|
<div class="w-8 h-4 bg-gray-600 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-blue-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
<div class="flex items-center justify-between px-2 py-1 hover:bg-gray-700 rounded"> |
|
|
<span class="text-sm">Generate Images</span> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" class="sr-only peer"> |
|
|
<div class="w-8 h-4 bg-gray-600 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-blue-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</button> |
|
|
<button class="p-2 rounded-full bg-blue-600 hover:bg-blue-700" title="Send message"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between mt-2 px-2"> |
|
|
<span class="text-xs text-gray-500">Selected: <span id="selected-element" class="text-gray-400">None</span></span> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-xs px-2 py-1 bg-gray-800 hover:bg-gray-700 rounded" title="Add to codebase"> |
|
|
<i class="fas fa-code-branch mr-1"></i> Export |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="design-content" class="hidden flex-1 flex flex-col overflow-hidden"> |
|
|
<div class="p-4 border-b border-gray-700"> |
|
|
<h3 class="font-medium mb-3">Style Controls</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm text-gray-400 mb-1">Background Color</label> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="w-8 h-8 rounded bg-blue-900 border-2 border-blue-400 cursor-pointer" data-color="bg-blue-900"></div> |
|
|
<div class="w-8 h-8 rounded bg-purple-900 border border-gray-600 cursor-pointer" data-color="bg-purple-900"></div> |
|
|
<div class="w-8 h-8 rounded bg-gray-800 border border-gray-600 cursor-pointer" data-color="bg-gray-800"></div> |
|
|
<div class="w-8 h-8 rounded bg-white border border-gray-600 cursor-pointer" data-color="bg-white"></div> |
|
|
<input type="text" placeholder="#hex or class" class="flex-1 bg-gray-700 border border-gray-600 rounded px-3 py-1 text-sm" id="bg-color-input"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm text-gray-400 mb-1">Text Color</label> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-white border-2 border-blue-400 cursor-pointer" data-color="text-white"></div> |
|
|
<div class="w-8 h-8 rounded-full bg-gray-200 border border-gray-600 cursor-pointer" data-color="text-gray-200"></div> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-400 border border-gray-600 cursor-pointer" data-color="text-blue-400"></div> |
|
|
<input type="text" placeholder="#hex or class" class="flex-1 bg-gray-700 border border-gray-600 rounded px-3 py-1 text-sm" id="text-color-input"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm text-gray-400 mb-1">Font Family</label> |
|
|
<select class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-1 text-sm" id="font-family-select"> |
|
|
<option value="font-sans">Sans (Default)</option> |
|
|
<option value="font-serif">Serif</option> |
|
|
<option value="font-mono">Mono</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm text-gray-400 mb-1">Button Style</label> |
|
|
<div class="grid grid-cols-2 gap-2"> |
|
|
<button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded text-sm" data-btn-style="bg-blue-600">Blue</button> |
|
|
<button class="px-3 py-1 bg-gray-600 hover:bg-gray-500 rounded text-sm" data-btn-style="bg-gray-600">Gray</button> |
|
|
<button class="px-3 py-1 bg-purple-600 hover:bg-purple-700 rounded text-sm" data-btn-style="bg-purple-600">Purple</button> |
|
|
<button class="px-3 py-1 border border-gray-400 hover:bg-gray-700 rounded text-sm" data-btn-style="border">Outline</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-t border-gray-700"> |
|
|
<h3 class="font-medium mb-3">Layout Controls</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm text-gray-400 mb-1">Container Width</label> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm" data-width="w-full">Full</button> |
|
|
<button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm" data-width="w-3/4">3/4</button> |
|
|
<button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm" data-width="w-1/2">1/2</button> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm text-gray-400 mb-1">Padding</label> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm" data-padding="p-4">Medium</button> |
|
|
<button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm" data-padding="p-8">Large</button> |
|
|
<button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm" data-padding="p-2">Small</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="resize-handle"></div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col mobile-full-width"> |
|
|
|
|
|
<div class="flex border-b border-gray-700"> |
|
|
<button id="preview-tab" class="flex-1 py-3 px-4 font-medium tab-active"> |
|
|
<i class="fas fa-eye mr-2"></i>Preview |
|
|
</button> |
|
|
<button id="code-tab" class="flex-1 py-3 px-4 font-medium"> |
|
|
<i class="fas fa-code mr-2"></i>Code |
|
|
</button> |
|
|
<button id="settings-tab" class="px-4 py-3 text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-cog"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="preview-content" class="flex-1 overflow-auto bg-white flex items-center justify-center"> |
|
|
<div class="text-center p-8 text-gray-400"> |
|
|
<i class="fas fa-code text-5xl mb-4"></i> |
|
|
<p>Your preview will appear here as you generate code</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="code-content" class="hidden flex-1 flex overflow-hidden"> |
|
|
|
|
|
<div class="w-64 bg-gray-800 border-r border-gray-700 overflow-y-auto"> |
|
|
<div class="p-3"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<h3 class="font-medium">Files</h3> |
|
|
<button class="text-blue-400 hover:text-blue-300 text-sm"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="space-y-1" id="file-tree"> |
|
|
<div class="text-gray-500 text-sm p-2">No files yet</div> |
|
|
|
|
|
<div class="file-item hidden flex items-center justify-between px-2 py-1 hover:bg-gray-700 rounded cursor-pointer"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-file-code text-blue-400 mr-2 text-xs"></i> |
|
|
<span class="text-sm">index.html</span> |
|
|
</div> |
|
|
<div class="diff-counts hidden flex items-center space-x-1"> |
|
|
<span class="text-xs bg-green-900 text-green-300 px-1 rounded">+0</span> |
|
|
<span class="text-xs bg-red-900 text-red-300 px-1 rounded">-0</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden"> |
|
|
<div class="flex items-center bg-gray-800 p-2"> |
|
|
<div class="flex-1 flex items-center"> |
|
|
<i class="fas fa-file-code text-blue-400 mr-2 ml-2"></i> |
|
|
<span>index.html</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<button class="p-1 rounded hover:bg-gray-700"> |
|
|
<i class="fas fa-copy"></i> |
|
|
</button> |
|
|
<button class="p-1 rounded hover:bg-gray-700"> |
|
|
<i class="fas fa-share"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1 overflow-auto code-editor bg-gray-900 p-4"> |
|
|
<pre class="text-gray-500 text-center pt-8">Select a file to view or edit its contents</pre> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-64 bg-gray-800 border-l border-gray-700 overflow-y-auto"> |
|
|
<div class="p-3"> |
|
|
<h3 class="font-medium mb-3">Version History</h3> |
|
|
<div class="space-y-2" id="version-history"> |
|
|
<div class="text-gray-500 text-xs p-2">No versions yet - changes will be tracked automatically</div> |
|
|
|
|
|
<div class="version-item hidden px-2 py-1 text-xs hover:bg-gray-700 rounded cursor-pointer"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span>v0.1.2</span> |
|
|
<span class="text-gray-400">2m ago</span> |
|
|
</div> |
|
|
<div class="flex space-x-1 mt-1"> |
|
|
<span class="file-change-count bg-green-900 text-green-300">+8</span> |
|
|
<span class="file-change-count bg-red-900 text-red-300">-2</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-3 border-t border-gray-700"> |
|
|
<h3 class="font-medium mb-2">Changes</h3> |
|
|
<div class="text-sm space-y-1 text-gray-500"> |
|
|
No changes yet - your modifications will appear here |
|
|
</div> |
|
|
<div class="mt-3 flex space-x-2"> |
|
|
<button class="flex-1 px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm"> |
|
|
<i class="fas fa-undo mr-1"></i> Undo |
|
|
</button> |
|
|
<button class="flex-1 px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded text-sm"> |
|
|
<i class="fas fa-redo mr-1"></i> Redo |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="settings-content" class="hidden flex-1 overflow-auto bg-gray-800 p-6"> |
|
|
<h2 class="text-xl font-bold mb-6">Project Settings</h2> |
|
|
|
|
|
<div class="flex border-b border-gray-700 mb-6"> |
|
|
<button class="px-4 py-2 font-medium tab-active">Overview</button> |
|
|
<button class="px-4 py-2 font-medium">Integrations</button> |
|
|
<button class="px-4 py-2 font-medium">Environment Variables</button> |
|
|
<button class="px-4 py-2 font-medium">Knowledge</button> |
|
|
<button class="px-4 py-2 font-medium">Community</button> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="bg-gray-700 rounded-lg p-4"> |
|
|
<h3 class="font-medium mb-3">Deployment</h3> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<div class="font-medium">Vercel</div> |
|
|
<div class="text-sm text-gray-400">Not connected</div> |
|
|
</div> |
|
|
<button class="px-3 py-1 bg-gray-600 hover:bg-gray-500 rounded text-sm"> |
|
|
Connect |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<div class="font-medium">GitHub</div> |
|
|
<div class="text-sm text-gray-400">Not connected</div> |
|
|
</div> |
|
|
<button class="px-3 py-1 bg-gray-600 hover:bg-gray-500 rounded text-sm"> |
|
|
Connect |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-700 rounded-lg p-4"> |
|
|
<h3 class="font-medium mb-3">Branding</h3> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<div>Built with v0 Button</div> |
|
|
<div class="text-sm text-gray-400">Show that this was built with v0</div> |
|
|
</div> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" value="" class="sr-only peer" checked> |
|
|
<div class="w-11 h-6 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-700 rounded-lg p-4"> |
|
|
<h3 class="font-medium mb-3">Publish to Community</h3> |
|
|
<p class="text-sm text-gray-400 mb-3">Share your project with the v0 community after review.</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="font-medium">Publish Status</div> |
|
|
<div class="text-sm px-2 py-1 bg-gray-600 rounded">Not Published</div> |
|
|
</div> |
|
|
<button class="mt-3 w-full py-2 bg-blue-600 hover:bg-blue-700 rounded"> |
|
|
Submit for Review |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('chat-tab').addEventListener('click', function() { |
|
|
document.getElementById('chat-content').classList.remove('hidden'); |
|
|
document.getElementById('design-content').classList.add('hidden'); |
|
|
document.getElementById('chat-tab').classList.add('tab-active'); |
|
|
document.getElementById('design-tab').classList.remove('tab-active'); |
|
|
}); |
|
|
|
|
|
document.getElementById('design-tab').addEventListener('click', function() { |
|
|
document.getElementById('design-content').classList.remove('hidden'); |
|
|
document.getElementById('chat-content').classList.add('hidden'); |
|
|
document.getElementById('design-tab').classList.add('tab-active'); |
|
|
document.getElementById('chat-tab').classList.remove('tab-active'); |
|
|
}); |
|
|
|
|
|
document.getElementById('preview-tab').addEventListener('click', function() { |
|
|
document.getElementById('preview-content').classList.remove('hidden'); |
|
|
document.getElementById('code-content').classList.add('hidden'); |
|
|
document.getElementById('settings-content').classList.add('hidden'); |
|
|
document.getElementById('preview-tab').classList.add('tab-active'); |
|
|
document.getElementById('code-tab').classList.remove('tab-active'); |
|
|
}); |
|
|
|
|
|
document.getElementById('code-tab').addEventListener('click', function() { |
|
|
document.getElementById('code-content').classList.remove('hidden'); |
|
|
document.getElementById('preview-content').classList.add('hidden'); |
|
|
document.getElementById('settings-content').classList.add('hidden'); |
|
|
document.getElementById('code-tab').classList.add('tab-active'); |
|
|
document.getElementById('preview-tab').classList.remove('tab-active'); |
|
|
}); |
|
|
|
|
|
document.getElementById('settings-tab').addEventListener('click', function() { |
|
|
document.getElementById('settings-content').classList.remove('hidden'); |
|
|
document.getElementById('preview-content').classList.add('hidden'); |
|
|
document.getElementById('code-content').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const resizeHandle = document.querySelector('.resize-handle'); |
|
|
const leftPane = document.querySelector('.mobile-stack > div:first-child'); |
|
|
const rightPane = document.querySelector('.mobile-stack > div:last-child'); |
|
|
|
|
|
let isResizing = false; |
|
|
|
|
|
resizeHandle.addEventListener('mousedown', (e) => { |
|
|
isResizing = true; |
|
|
document.body.style.cursor = 'col-resize'; |
|
|
document.addEventListener('mousemove', handleResize); |
|
|
document.addEventListener('mouseup', stopResize); |
|
|
}); |
|
|
|
|
|
function handleResize(e) { |
|
|
if (!isResizing) return; |
|
|
|
|
|
const containerWidth = document.querySelector('.mobile-stack').clientWidth; |
|
|
const newLeftWidth = (e.clientX / containerWidth) * 100; |
|
|
|
|
|
if (newLeftWidth > 20 && newLeftWidth < 80) { |
|
|
leftPane.style.width = `${newLeftWidth}%`; |
|
|
rightPane.style.width = `${100 - newLeftWidth}%`; |
|
|
} |
|
|
} |
|
|
|
|
|
function stopResize() { |
|
|
isResizing = false; |
|
|
document.body.style.cursor = ''; |
|
|
document.removeEventListener('mousemove', handleResize); |
|
|
document.removeEventListener('mouseup', stopResize); |
|
|
} |
|
|
|
|
|
|
|
|
function updateFileChanges(filename, addedLines, removedLines) { |
|
|
const fileItem = document.querySelector('.file-item'); |
|
|
const diffCounts = fileItem.querySelector('.diff-counts'); |
|
|
|
|
|
if (fileItem) { |
|
|
fileItem.classList.remove('hidden'); |
|
|
|
|
|
if (addedLines > 0 || removedLines > 0) { |
|
|
diffCounts.classList.remove('hidden'); |
|
|
diffCounts.querySelector('span:first-child').textContent = `+${addedLines}`; |
|
|
diffCounts.querySelector('span:last-child').textContent = `-${removedLines}`; |
|
|
|
|
|
|
|
|
fileItem.classList.add('diff-added'); |
|
|
setTimeout(() => { |
|
|
fileItem.classList.remove('diff-added'); |
|
|
}, 1500); |
|
|
} else { |
|
|
diffCounts.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function checkMobile() { |
|
|
if (window.innerWidth <= 768) { |
|
|
leftPane.classList.add('mobile-full-width'); |
|
|
rightPane.classList.add('mobile-full-width'); |
|
|
leftPane.classList.remove('hidden'); |
|
|
rightPane.classList.add('hidden'); |
|
|
} else { |
|
|
leftPane.classList.remove('mobile-full-width'); |
|
|
rightPane.classList.remove('mobile-full-width'); |
|
|
leftPane.classList.remove('hidden'); |
|
|
rightPane.classList.remove('hidden'); |
|
|
} |
|
|
} |
|
|
|
|
|
window.addEventListener('resize', checkMobile); |
|
|
checkMobile(); |
|
|
</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=apicodex/h" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
