<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Web Builder Pro</title>
<style>
:root {
--primary-color: #6366f1;
--secondary-color: #4f46e5;
--success-color: #22c55e;
--bg-dark: #0f172a;
--text-light: #f8fafc;
}
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background-color: #f3f4f6;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.main-card {
background: white;
width: 90%;
max-width: 800px;
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
h1 {
color: var(--bg-dark);
text-align: center;
margin-bottom: 30px;
font-size: 2rem;
}
.input-field {
width: 100%;
padding: 12px;
margin-bottom: 15px;
border: 2px solid #e5e7eb;
border-radius: 10px;
font-size: 16px;
transition: border-color 0.3s;
}
.input-field:focus {
border-color: var(--primary-color);
outline: none;
}
textarea {
height: 200px;
resize: vertical;
font-family: 'Fira Code', monospace;
}
.btn-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 10px;
}
button {
padding: 14px 20px;
border: none;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-size: 15px;
}
.btn-build {
background-color: var(--primary-color);
color: white;
grid-column: span 2;
}
.btn-build:hover { background-color: var(--secondary-color); transform: translateY(-2px); }
.btn-copy { background-color: #e5e7eb; color: #374151; }
.btn-copy:hover { background-color: #d1d5db; }
.btn-preview { background-color: var(--success-color); color: white; }
.btn-preview:hover { opacity: 0.9; }
#linkDisplay {
margin-top: 25px;
padding: 20px;
background: #f8fafc;
border: 1px dashed var(--primary-color);
border-radius: 10px;
display: none;
}
.url-text {
word-break: break-all;
color: var(--secondary-color);
font-size: 14px;
font-weight: 500;
}
.badge {
display: inline-block;
padding: 4px 8px;
background: #dcfce7;
color: #166534;
border-radius: 5px;
font-size: 12px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="main-card" id="app">
<h1>Web Builder Pro</h1>
<label>Project Name</label>
<input type="text" id="siteName" class="input-field" placeholder="Enter your site name...">
<label>Source Code (HTML/CSS/JS)</label>
<textarea id="siteCode" class="input-field" placeholder="Paste your code here..."></textarea>
<div class="btn-group">
<button class="btn-build" onclick="buildProject()">🚀 Generate Site Link</button>
<button class="btn-copy" onclick="copyToClipboard()">Copy Code</button>
<button class="btn-preview" onclick="openPreview()">Live Preview</button>
</div>
<div id="linkDisplay">
<span class="badge">Success! Your site is live</span>
<p>Share this URL:</p>
<div class="url-text" id="finalUrl"></div>
<button onclick="visitSite()" style="margin-top:15px; background: #000; color: #fff; width: 100%;">Visit Website</button>
</div>
</div>
<script>
function buildProject() {
const name = document.getElementById('siteName').value;
const code = document.getElementById('siteCode').value;
if(!name || !code) {
alert("Please fill in both fields!");
return;
}
const encoded = btoa(unescape(encodeURIComponent(code)));
const finalUrl = window.location.href.split('?')[0] + "?v=" + encoded;
document.getElementById('finalUrl').innerText = finalUrl;
document.getElementById('linkDisplay').style.display = 'block';
}
function openPreview() {
const code = document.getElementById('siteCode').value;
if(!code) return alert("No code to preview!");
const win = window.open();
win.document.write(code);
win.document.close();
}
function copyToClipboard() {
const code = document.getElementById('siteCode');
code.select();
document.execCommand('copy');
alert("Code copied to clipboard!");
}
function visitSite() {
const url = document.getElementById('finalUrl').innerText;
window.open(url, '_blank');
}
window.onload = function() {
const params = new URLSearchParams(window.location.search);
const data = params.get('v');
if(data) {
const decoded = decodeURIComponent(escape(atob(data)));
document.open();
document.write(decoded);
document.close();
}
}
</script>
</body>
</html>