Hugging Face's logo

Spaces:
docto41
/
prosite-builder
Running

App Files Community
prosite-builder / index.html
docto41's picture
docto41
Add 3 files
25fc48a verified
raw
history blame contribute delete
24.3 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ProSite Builder - Générateur Professionnel</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>
.editor-bg {
background-color: #1e293b;
}
.sidebar-bg {
background-color: #0f172a;
}
.code-editor {
font-family: 'Courier New', monospace;
font-size: 14px;
line-height: 1.5;
tab-size: 2;
}
.preview-frame {
transform: scale(0.8);
transform-origin: top left;
width: 125%;
height: 125%;
}
.component-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.draggable-component {
cursor: grab;
}
.draggable-component:active {
cursor: grabbing;
}
</style>
</head>
<body class="bg-gray-100 font-sans">
<!-- Top Navigation -->
<nav class="bg-gray-900 text-white shadow-lg">
<div class="container mx-auto px-6 py-3">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<i class="fas fa-code text-2xl text-blue-400"></i>
<span class="text-xl font-bold">ProSite Builder</span>
<span class="hidden md:inline-block bg-blue-500 text-xs px-2 py-1 rounded-full">PRO</span>
</div>
<div class="flex items-center space-x-6">
<button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-play mr-2"></i> Exécuter
</button>
<button class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-cloud-upload-alt mr-2"></i> Publier
</button>
<div class="hidden md:flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-8 h-8 rounded-full">
<span>John Doe</span>
</div>
</div>
</div>
</div>
</nav>
<!-- Main Editor Area -->
<div class="flex h-screen pt-16 overflow-hidden">
<!-- Left Sidebar - Components -->
<div class="sidebar-bg text-gray-200 w-64 flex-shrink-0 overflow-y-auto">
<div class="p-4">
<h3 class="font-semibold text-lg mb-4 flex items-center">
<i class="fas fa-cubes mr-2 text-blue-400"></i> Composants
</h3>
<div class="mb-6">
<h4 class="text-sm uppercase font-medium mb-2 text-gray-400">Structure</h4>
<div class="space-y-2">
<div class="component-card draggable-component bg-gray-800 p-3 rounded-lg cursor-move" draggable="true" data-type="header">
<div class="flex items-center">
<i class="fas fa-heading text-blue-400 mr-2"></i>
<span>En-tête</span>
</div>
</div>
<div class="component-card draggable-component bg-gray-800 p-3 rounded-lg cursor-move" draggable="true" data-type="hero">
<div class="flex items-center">
<i class="fas fa-star text-yellow-400 mr-2"></i>
<span>Section Hero</span>
</div>
</div>
<div class="component-card draggable-component bg-gray-800 p-3 rounded-lg cursor-move" draggable="true" data-type="footer">
<div class="flex items-center">
<i class="fas fa-shoe-prints text-purple-400 mr-2"></i>
<span>Pied de page</span>
</div>
</div>
</div>
</div>
<div class="mb-6">
<h4 class="text-sm uppercase font-medium mb-2 text-gray-400">Contenu</h4>
<div class="space-y-2">
<div class="component-card draggable-component bg-gray-800 p-3 rounded-lg cursor-move" draggable="true" data-type="text">
<div class="flex items-center">
<i class="fas fa-paragraph text-green-400 mr-2"></i>
<span>Texte</span>
</div>
</div>
<div class="component-card draggable-component bg-gray-800 p-3 rounded-lg cursor-move" draggable="true" data-type="image">
<div class="flex items-center">
<i class="fas fa-image text-red-400 mr-2"></i>
<span>Image</span>
</div>
</div>
<div class="component-card draggable-component bg-gray-800 p-3 rounded-lg cursor-move" draggable="true" data-type="video">
<div class="flex items-center">
<i class="fas fa-video text-purple-400 mr-2"></i>
<span>Vidéo</span>
</div>
</div>
</div>
</div>
<div class="mb-6">
<h4 class="text-sm uppercase font-medium mb-2 text-gray-400">Avancé</h4>
<div class="space-y-2">
<div class="component-card draggable-component bg-gray-800 p-3 rounded-lg cursor-move" draggable="true" data-type="form">
<div class="flex items-center">
<i class="fas fa-envelope text-blue-400 mr-2"></i>
<span>Formulaire</span>
</div>
</div>
<div class="component-card draggable-component bg-gray-800 p-3 rounded-lg cursor-move" draggable="true" data-type="gallery">
<div class="flex items-center">
<i class="fas fa-th text-yellow-400 mr-2"></i>
<span>Galerie</span>
</div>
</div>
<div class="component-card draggable-component bg-gray-800 p-3 rounded-lg cursor-move" draggable="true" data-type="map">
<div class="flex items-center">
<i class="fas fa-map-marked-alt text-green-400 mr-2"></i>
<span>Carte</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Main Editor -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Editor Tabs -->
<div class="editor-bg text-gray-300 border-b border-gray-700">
<div class="flex">
<div class="px-4 py-3 border-b-2 border-blue-500 text-white flex items-center">
<i class="fas fa-file-code mr-2"></i>
<span>index.html</span>
<button class="ml-2 text-gray-400 hover:text-white">
<i class="fas fa-times"></i>
</button>
</div>
<div class="px-4 py-3 hover:bg-gray-700 flex items-center">
<i class="fas fa-file-code mr-2"></i>
<span>style.css</span>
<button class="ml-2 text-gray-400 hover:text-white">
<i class="fas fa-times"></i>
</button>
</div>
<div class="px-4 py-3 hover:bg-gray-700 flex items-center">
<i class="fas fa-file-code mr-2"></i>
<span>script.js</span>
<button class="ml-2 text-gray-400 hover:text-white">
<i class="fas fa-times"></i>
</button>
</div>
<button class="px-3 text-gray-400 hover:text-white">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
<!-- Code Editor -->
<div class="flex-1 flex overflow-hidden">
<div class="editor-bg flex-1 overflow-auto code-editor p-4 text-gray-300">
<div class="mb-4">
<span class="text-blue-400">&lt;!DOCTYPE html&gt;</span>
</div>
<div class="mb-4">
<span class="text-blue-400">&lt;html</span> <span class="text-green-400">lang=</span><span class="text-yellow-400">"fr"</span><span class="text-blue-400">&gt;</span>
</div>
<div class="mb-4 ml-4">
<span class="text-blue-400">&lt;head&gt;</span>
</div>
<div class="mb-4 ml-8">
<span class="text-blue-400">&lt;meta</span> <span class="text-green-400">charset=</span><span class="text-yellow-400">"UTF-8"</span><span class="text-blue-400">&gt;</span>
</div>
<div class="mb-4 ml-8">
<span class="text-blue-400">&lt;meta</span> <span class="text-green-400">name=</span><span class="text-yellow-400">"viewport"</span> <span class="text-green-400">content=</span><span class="text-yellow-400">"width=device-width, initial-scale=1.0"</span><span class="text-blue-400">&gt;</span>
</div>
<div class="mb-4 ml-8">
<span class="text-blue-400">&lt;title&gt;</span><span class="text-gray-300">Mon Site Professionnel</span><span class="text-blue-400">&lt;/title&gt;</span>
</div>
<div class="mb-4 ml-8">
<span class="text-blue-400">&lt;link</span> <span class="text-green-400">rel=</span><span class="text-yellow-400">"stylesheet"</span> <span class="text-green-400">href=</span><span class="text-yellow-400">"style.css"</span><span class="text-blue-400">&gt;</span>
</div>
<div class="mb-4 ml-4">
<span class="text-blue-400">&lt;/head&gt;</span>
</div>
<div class="mb-4 ml-4">
<span class="text-blue-400">&lt;body&gt;</span>
</div>
<div class="mb-4 ml-8">
<span class="text-blue-400">&lt;header</span> <span class="text-green-400">class=</span><span class="text-yellow-400">"header"</span><span class="text-blue-400">&gt;</span>
</div>
<div class="mb-4 ml-12">
<span class="text-blue-400">&lt;nav&gt;</span>
</div>
<div class="mb-4 ml-16">
<span class="text-blue-400">&lt;div</span> <span class="text-green-400">class=</span><span class="text-yellow-400">"container"</span><span class="text-blue-400">&gt;</span>
</div>
<div class="mb-4 ml-20">
<span class="text-blue-400">&lt;a</span> <span class="text-green-400">href=</span><span class="text-yellow-400">"#"</span> <span class="text-green-400">class=</span><span class="text-yellow-400">"logo"</span><span class="text-blue-400">&gt;</span><span class="text-gray-300">MonLogo</span><span class="text-blue-400">&lt;/a&gt;</span>
</div>
<div class="mb-4 ml-20">
<span class="text-blue-400">&lt;ul</span> <span class="text-green-400">class=</span><span class="text-yellow-400">"nav-links"</span><span class="text-blue-400">&gt;</span>
</div>
<div class="mb-4 ml-24">
<span class="text-blue-400">&lt;li&gt;</span><span class="text-blue-400">&lt;a</span> <span class="text-green-400">href=</span><span class="text-yellow-400">"#"</span><span class="text-blue-400">&gt;</span><span class="text-gray-300">Accueil</span><span class="text-blue-400">&lt;/a&gt;</span><span class="text-blue-400">&lt;/li&gt;</span>
</div>
<div class="mb-4 ml-24">
<span class="text-blue-400">&lt;li&gt;</span><span class="text-blue-400">&lt;a</span> <span class="text-green-400">href=</span><span class="text-yellow-400">"#"</span><span class="text-blue-400">&gt;</span><span class="text-gray-300">Services</span><span class="text-blue-400">&lt;/a&gt;</span><span class="text-blue-400">&lt;/li&gt;</span>
</div>
<div class="mb-4 ml-24">
<span class="text-blue-400">&lt;li&gt;</span><span class="text-blue-400">&lt;a</span> <span class="text-green-400">href=</span><span class="text-yellow-400">"#"</span><span class="text-blue-400">&gt;</span><span class="text-gray-300">Contact</span><span class="text-blue-400">&lt;/a&gt;</span><span class="text-blue-400">&lt;/li&gt;</span>
</div>
<div class="mb-4 ml-20">
<span class="text-blue-400">&lt;/ul&gt;</span>
</div>
<div class="mb-4 ml-16">
<span class="text-blue-400">&lt;/div&gt;</span>
</div>
<div class="mb-4 ml-12">
<span class="text-blue-400">&lt;/nav&gt;</span>
</div>
<div class="mb-4 ml-8">
<span class="text-blue-400">&lt;/header&gt;</span>
</div>
<div class="mb-4 ml-8">
<span class="text-blue-400">&lt;main&gt;</span>
</div>
<div class="mb-4 ml-12">
<span class="text-blue-400">&lt;section</span> <span class="text-green-400">class=</span><span class="text-yellow-400">"hero"</span><span class="text-blue-400">&gt;</span>
</div>
<div class="mb-4 ml-16">
<span class="text-blue-400">&lt;div</span> <span class="text-green-400">class=</span><span class="text-yellow-400">"container"</span><span class="text-blue-400">&gt;</span>
</div>
<div class="mb-4 ml-20">
<span class="text-blue-400">&lt;h1&gt;</span><span class="text-gray-300">Solution Professionnelle pour Votre Entreprise</span><span class="text-blue-400">&lt;/h1&gt;</span>
</div>
<div class="mb-4 ml-20">
<span class="text-blue-400">&lt;p&gt;</span><span class="text-gray-300">Nous créons des sites web haut de gamme avec des fonctionnalités avancées.</span><span class="text-blue-400">&lt;/p&gt;</span>
</div>
<div class="mb-4 ml-20">
<span class="text-blue-400">&lt;a</span> <span class="text-green-400">href=</span><span class="text-yellow-400">"#"</span> <span class="text-green-400">class=</span><span class="text-yellow-400">"btn"</span><span class="text-blue-400">&gt;</span><span class="text-gray-300">Démarrer</span><span class="text-blue-400">&lt;/a&gt;</span>
</div>
<div class="mb-4 ml-16">
<span class="text-blue-400">&lt;/div&gt;</span>
</div>
<div class="mb-4 ml-12">
<span class="text-blue-400">&lt;/section&gt;</span>
</div>
<div class="mb-4 ml-8">
<span class="text-blue-400">&lt;/main&gt;</span>
</div>
<div class="mb-4 ml-4">
<span class="text-blue-400">&lt;/body&gt;</span>
</div>
<div class="mb-4">
<span class="text-blue-400">&lt;/html&gt;</span>
</div>
</div>
<!-- Preview Panel -->
<div class="w-1/2 bg-white border-l border-gray-300 overflow-auto p-4">
<div class="flex justify-between items-center mb-4">
<h3 class="font-semibold text-gray-700">Aperçu en direct</h3>
<div class="flex space-x-2">
<button class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">
<i class="fas fa-desktop"></i>
</button>
<button class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">
<i class="fas fa-tablet-alt"></i>
</button>
<button class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">
<i class="fas fa-mobile-alt"></i>
</button>
</div>
</div>
<div class="preview-frame border border-gray-300 rounded-lg overflow-hidden bg-white">
<iframe src="about:blank" id="livePreview" class="w-full h-full border-0"></iframe>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Status Bar -->
<div class="bg-gray-800 text-gray-400 text-sm px-4 py-2 flex justify-between items-center">
<div class="flex items-center space-x-4">
<div>
<i class="fas fa-circle text-green-500 mr-1"></i>
<span>Connecté</span>
</div>
<div>
<i class="fas fa-code-branch mr-1"></i>
<span>main</span>
</div>
</div>
<div class="flex items-center space-x-4">
<div>
<span>HTML</span>
</div>
<div>
<span>UTF-8</span>
</div>
<div>
<span>Ligne 42, Colonne 15</span>
</div>
</div>
</div>
<script>
// Drag and drop functionality
document.addEventListener('DOMContentLoaded', function() {
const draggables = document.querySelectorAll('.draggable-component');
const codeEditor = document.querySelector('.code-editor');
draggables.forEach(draggable => {
draggable.addEventListener('dragstart', () => {
draggable.classList.add('dragging');
});
draggable.addEventListener('dragend', () => {
draggable.classList.remove('dragging');
});
});
codeEditor.addEventListener('dragover', e => {
e.preventDefault();
const afterElement = getDragAfterElement(codeEditor, e.clientY);
const draggable = document.querySelector('.dragging');
if (afterElement == null) {
codeEditor.appendChild(draggable);
} else {
codeEditor.insertBefore(draggable, afterElement);
}
});
function getDragAfterElement(container, y) {
const draggableElements = [...container.querySelectorAll('.draggable-component:not(.dragging)')];
return draggableElements.reduce((closest, child) => {
const box = child.getBoundingClientRect();
const offset = y - box.top - box.height / 2;
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child };
} else {
return closest;
}
}, { offset: Number.NEGATIVE_INFINITY }).element;
}
// Update preview
function updatePreview() {
const previewFrame = document.getElementById('livePreview');
const htmlCode = document.querySelector('.code-editor').innerText;
previewFrame.srcdoc = `
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
.header { background: #1e293b; color: white; padding: 1rem 0; }
.container { width: 90%; max-width: 1200px; margin: 0 auto; }
nav { display: flex; justify-content: space-between; align-items: center; }
.logo { color: white; text-decoration: none; font-weight: bold; font-size: 1.5rem; }
.nav-links { display: flex; list-style: none; }
.nav-links li { margin-left: 2rem; }
.nav-links a { color: white; text-decoration: none; }
.hero { padding: 4rem 0; text-align: center; background: #f8fafc; }
.btn { display: inline-block; background: #3b82f6; color: white; padding: 0.5rem 1rem; border-radius: 0.25rem; text-decoration: none; }
</style>
</head>
<body>
<header class="header">
<nav>
<div class="container">
<a href="#" class="logo">MonLogo</a>
<ul class="nav-links">
<li><a href="#">Accueil</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</header>
<main>
<section class="hero">
<div class="container">
<h1>Solution Professionnelle pour Votre Entreprise</h1>
<p>Nous créons des sites web haut de gamme avec des fonctionnalités avancées.</p>
<a href="#" class="btn">Démarrer</a>
</div>
</section>
</main>
<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=docto41/prosite-builder" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>