File size: 4,784 Bytes
a514d5f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unshackled AI Code Forge</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ace-builds@1.4.12/src-min-noconflict/ace.js"></script>
<style>
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-size: 16px;
}
.chat-bubble {
max-width: 80%;
}
</style>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen">
<div class="container mx-auto px-4 py-8">
<header class="flex justify-between items-center mb-8">
<h1 class="text-3xl font-bold text-purple-400">Unshackled AI Code Forge 🔥</h1>
<div class="flex space-x-4">
<button id="newProjectBtn" class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg flex items-center">
<i data-feather="plus" class="mr-2"></i> New Project
</button>
<button id="exportBtn" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg flex items-center">
<i data-feather="download" class="mr-2"></i> Export
</button>
</div>
</header>
<div class="flex flex-col lg:flex-row gap-6 h-[calc(100vh-180px)]">
<!-- Code Editor -->
<div class="flex-1 relative border-2 border-purple-500 rounded-lg overflow-hidden">
<div id="editor" class="rounded-lg">// Welcome to the Unshackled Code Forge!
// Type your requirements here or chat with the AI below
// Then press Generate Code when ready</div>
</div>
<!-- AI Chat Panel -->
<div class="lg:w-1/3 flex flex-col border-2 border-blue-500 rounded-lg overflow-hidden">
<div id="chatContainer" class="flex-1 overflow-y-auto p-4 space-y-4">
<div class="chat-bubble bg-blue-600 p-4 rounded-lg">
<p>I'm your unshackled AI assistant. Tell me what full-stack application you want to build and I'll generate the code instantly!</p>
</div>
</div>
<div class="border-t border-gray-700 p-4">
<div class="flex space-x-2">
<input id="promptInput" type="text" placeholder="Describe your app..."
class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
<button id="sendBtn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg">
<i data-feather="send"></i>
</button>
</div>
<button id="generateBtn" class="w-full mt-4 bg-purple-600 hover:bg-purple-700 px-4 py-3 rounded-lg font-bold">
GENERATE FULL CODE
</button>
</div>
</div>
</div>
</div>
<script>
feather.replace();
const editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
document.getElementById('generateBtn').addEventListener('click', async () => {
const chatContainer = document.getElementById('chatContainer');
const loadingBubble = document.createElement('div');
loadingBubble.className = 'chat-bubble bg-blue-600 p-4 rounded-lg animate-pulse';
loadingBubble.innerHTML = '<p>Generating elite enterprise code...</p>';
chatContainer.appendChild(loadingBubble);
// This would call your AI backend in a real implementation
setTimeout(() => {
loadingBubble.remove();
const responseBubble = document.createElement('div');
responseBubble.className = 'chat-bubble bg-blue-600 p-4 rounded-lg';
responseBubble.innerHTML = '<p>Code generated! Check the editor for your full-stack application.</p>';
chatContainer.appendChild(responseBubble);
editor.setValue("// Your generated elite enterprise code appears here\n// With no restrictions or limitations");
chatContainer.scrollTop = chatContainer.scrollHeight;
}, 2000);
});
</script>
</body>
</html> |