|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>CodeFast - Instant Code Editor</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#6366f1', |
|
|
secondary: '#8b5cf6', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
.code-editor { |
|
|
min-height: 300px; |
|
|
font-family: 'Courier New', monospace; |
|
|
} |
|
|
.preview-frame { |
|
|
border: 1px solid #e2e8f0; |
|
|
min-height: 300px; |
|
|
} |
|
|
.draggable { |
|
|
cursor: col-resize; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
<header class="bg-white shadow-sm"> |
|
|
<div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-primary-500"></div> |
|
|
<h1 class="text-xl font-bold text-gray-800">CodeFast</h1> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-6"> |
|
|
<a href="#" class="text-gray-600 hover:text-primary-500">Features</a> |
|
|
<a href="#" class="text-gray-600 hover:text-primary-500">Pricing</a> |
|
|
<a href="#" class="text-gray-600 hover:text-primary-500">Docs</a> |
|
|
<a href="#" class="text-gray-600 hover:text-primary-500">Blog</a> |
|
|
</nav> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="hidden md:block text-gray-600 hover:text-primary-500">Sign In</button> |
|
|
<button class="px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition">Get Started</button> |
|
|
<button class="md:hidden"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main> |
|
|
<section class="max-w-7xl mx-auto px-4 py-16"> |
|
|
<div class="text-center mb-12"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Instant Code Editor</h1> |
|
|
<p class="text-xl text-gray-600 max-w-2xl mx-auto">Write, test and share code in real-time with our lightning-fast editor.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="flex flex-col md:flex-row"> |
|
|
|
|
|
<div class="flex-1 border-r border-gray-200"> |
|
|
<div class="flex items-center justify-between bg-gray-50 px-4 py-2 border-b border-gray-200"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="w-3 h-3 rounded-full bg-red-500"></span> |
|
|
<span class="w-3 h-3 rounded-full bg-yellow-500"></span> |
|
|
<span class="w-3 h-3 rounded-full bg-green-500"></span> |
|
|
<span class="text-sm text-gray-500 ml-2">index.html</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<button class="text-gray-500 hover:text-primary-500"> |
|
|
<i data-feather="copy" class="w-4 h-4"></i> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-primary-500"> |
|
|
<i data-feather="share-2" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<textarea class="w-full h-64 code-editor bg-gray-50 p-4 rounded-lg font-mono text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" spellcheck="false"> |
|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>My Awesome Page</title> |
|
|
<style> |
|
|
body { |
|
|
font-family: Arial, sans-serif; |
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
height: 100vh; |
|
|
margin: 0; |
|
|
} |
|
|
.card { |
|
|
background: white; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1); |
|
|
padding: 2rem; |
|
|
text-align: center; |
|
|
max-width: 400px; |
|
|
} |
|
|
h1 { |
|
|
color: #6366f1; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="card"> |
|
|
<h1>Hello World!</h1> |
|
|
<p>Welcome to my awesome webpage</p> |
|
|
<button style="background: #6366f1; color: white; border: none; padding: 0.5rem 1rem; border-radius: 5px; margin-top: 1rem;">Click Me</button> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
|
|
</textarea> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1"> |
|
|
<div class="bg-gray-50 px-4 py-2 border-b border-gray-200 flex justify-between items-center"> |
|
|
<div class="text-sm text-gray-500">Preview</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<button class="text-gray-500 hover:text-primary-500"> |
|
|
<i data-feather="refresh-cw" class="w-4 h-4"></i> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-primary-500"> |
|
|
<i data-feather="maximize-2" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<iframe class="w-full h-64 preview-frame bg-white rounded-lg" srcdoc="<!DOCTYPE html><html><head><title>My Awesome Page</title><style>body{font-family: Arial,sans-serif;background: linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0}.card{background: white;border-radius: 10px;box-shadow: 0 4px 6px rgba(0,0,0,0.1);padding: 2rem;text-align: center;max-width: 400px}h1{color: #6366f1}</style></head><body><div class='card'><h1>Hello World!</h1><p>Welcome to my awesome webpage</p><button style='background: #6366f1; color: white; border: none; padding: 0.5rem 1rem; border-radius: 5px; margin-top: 1rem;'>Click Me</button></div></body></html>"></iframe> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 text-center"> |
|
|
<button class="px-6 py-3 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition font-medium">Run Code</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="bg-gray-100 py-16"> |
|
|
<div class="max-w-7xl mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">Powerful Features</h2> |
|
|
<p class="text-lg text-gray-600 max-w-2xl mx-auto">Everything you need to code, collaborate and share your projects</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition"> |
|
|
<div class="w-12 h-12 rounded-full bg-primary-100 flex items-center justify-center mb-4"> |
|
|
<i data-feather="zap" class="text-primary-500"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Instant Results</h3> |
|
|
<p class="text-gray-600">See your changes in real-time without refreshing the page.</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition"> |
|
|
<div class="w-12 h-12 rounded-full bg-primary-100 flex items-center justify-center mb-4"> |
|
|
<i data-feather="share-2" class="text-primary-500"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Easy Sharing</h3> |
|
|
<p class="text-gray-600">Share your projects with a single click. No setup required.</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition"> |
|
|
<div class="w-12 h-12 rounded-full bg-primary-100 flex items-center justify-center mb-4"> |
|
|
<i data-feather="code" class="text-primary-500"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Multi-language</h3> |
|
|
<p class="text-gray-600">Supports HTML, CSS, JavaScript and more coming soon.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="max-w-7xl mx-auto px-4"> |
|
|
<div class="grid md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">CodeFast</h3> |
|
|
<p class="text-gray-400">The fastest way to write and share code online.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Product</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Features</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Examples</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Resources</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Company</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">About</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400">© 2023 CodeFast. All rights reserved.</p> |
|
|
<div class="flex space-x-4 mt-4 md:mt-0"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i data-feather="twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i data-feather="github"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i data-feather="linkedin"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
const editor = document.querySelector('.code-editor'); |
|
|
const preview = document.querySelector('.preview-frame'); |
|
|
|
|
|
editor.addEventListener('input', function() { |
|
|
|
|
|
preview.srcdoc = editor.value; |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
