|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>NexusWeb Pro - Générateur de sites complexes</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> |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #0f172a; |
|
|
color: #f8fafc; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #1e40af 0%, #7c3aed 50%, #c026d3 100%); |
|
|
} |
|
|
|
|
|
.code-editor { |
|
|
background: #1e293b; |
|
|
border-radius: 0.5rem; |
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
|
|
} |
|
|
|
|
|
.code-line { |
|
|
counter-increment: line; |
|
|
} |
|
|
|
|
|
.code-line::before { |
|
|
content: counter(line); |
|
|
display: inline-block; |
|
|
width: 2rem; |
|
|
margin-right: 1rem; |
|
|
color: #64748b; |
|
|
text-align: right; |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
height: 6px; |
|
|
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%); |
|
|
} |
|
|
|
|
|
.file-tree li { |
|
|
position: relative; |
|
|
padding-left: 1.5rem; |
|
|
} |
|
|
|
|
|
.file-tree li:before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 0.5rem; |
|
|
top: 0.75rem; |
|
|
width: 0.5rem; |
|
|
height: 0.5rem; |
|
|
border-radius: 50%; |
|
|
background-color: #64748b; |
|
|
} |
|
|
|
|
|
.file-tree li.file:before { |
|
|
background-color: #3b82f6; |
|
|
} |
|
|
|
|
|
.file-tree li.folder:before { |
|
|
background-color: #f59e0b; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen"> |
|
|
|
|
|
<nav class="bg-gray-800 fixed w-full z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 py-3"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="text-2xl font-bold text-white">NexusWeb Pro</div> |
|
|
<button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700"> |
|
|
Générer un projet complet |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="pt-24 pb-16 px-4"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold text-white mb-6"> |
|
|
<span class="block">Générateur de sites complexes</span> |
|
|
<span class="gradient-bg bg-clip-text text-transparent">1500+ lignes de code</span> |
|
|
</h1> |
|
|
<p class="text-xl text-gray-300 mb-8"> |
|
|
Créez des applications web complètes avec architecture professionnelle en quelques clics |
|
|
</p> |
|
|
|
|
|
<div class="max-w-2xl mx-auto"> |
|
|
<div class="flex flex-col sm:flex-row gap-3"> |
|
|
<input id="project-description" type="text" placeholder="Ex: 'Plateforme SaaS avec dashboard admin, API et base de données'" |
|
|
class="flex-1 px-4 py-3 rounded-md text-gray-900"> |
|
|
<button id="generate-btn" class="px-6 py-3 bg-indigo-600 text-white rounded-md hover:bg-indigo-700"> |
|
|
Générer le projet |
|
|
</button> |
|
|
</div> |
|
|
<p class="mt-2 text-sm text-gray-400"> |
|
|
Essayez "Réseau social avec authentification, chat et notifications" ou "ERP avec gestion de stock" |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="max-w-7xl mx-auto px-4 mb-16 hidden" id="project-architecture"> |
|
|
<div class="bg-gray-800 rounded-xl p-6"> |
|
|
<h2 class="text-2xl font-bold text-white mb-6">Architecture du projet</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="bg-gray-700 p-6 rounded-lg"> |
|
|
<h3 class="text-lg font-medium text-white mb-4 flex items-center"> |
|
|
<i class="fas fa-folder-open text-yellow-400 mr-2"></i> |
|
|
Structure des fichiers |
|
|
</h3> |
|
|
<div class="file-tree text-gray-300 space-y-1" id="file-structure"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-700 p-6 rounded-lg"> |
|
|
<h3 class="text-lg font-medium text-white mb-4 flex items-center"> |
|
|
<i class="fas fa-database text-green-400 mr-2"></i> |
|
|
Schéma de base de données |
|
|
</h3> |
|
|
<div class="overflow-auto max-h-64" id="database-schema"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-700 p-6 rounded-lg"> |
|
|
<h3 class="text-lg font-medium text-white mb-4 flex items-center"> |
|
|
<i class="fas fa-server text-blue-400 mr-2"></i> |
|
|
Points d'API |
|
|
</h3> |
|
|
<div class="overflow-auto max-h-64" id="api-endpoints"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="max-w-7xl mx-auto px-4 mb-16 hidden" id="code-preview-section"> |
|
|
<div class="bg-gray-800 rounded-xl p-6"> |
|
|
<h2 class="text-2xl font-bold text-white mb-6">Code généré</h2> |
|
|
|
|
|
<div class="flex flex-wrap gap-4 mb-4"> |
|
|
<button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 active-file" data-file="app.js"> |
|
|
app.js |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-gray-700 text-gray-300 rounded-md hover:bg-gray-600" data-file="routes.js"> |
|
|
routes.js |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-gray-700 text-gray-300 rounded-md hover:bg-gray-600" data-file="models.js"> |
|
|
models.js |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-gray-700 text-gray-300 rounded-md hover:bg-gray-600" data-file="config.js"> |
|
|
config.js |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-gray-700 text-gray-300 rounded-md hover:bg-gray-600" data-file="auth.js"> |
|
|
auth.js |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="code-editor p-4 rounded-lg overflow-auto max-h-96" id="code-preview"> |
|
|
<code class="text-gray-300 font-mono text-sm block whitespace-pre" id="code-content"> |
|
|
<div class="code-line">// Initialisation de l'application</div> |
|
|
<div class="code-line">const express = require('express');</div> |
|
|
<div class="code-line">const mongoose = require('mongoose');</div> |
|
|
<div class="code-line">const cors = require('cors');</div> |
|
|
<div class="code-line">const helmet = require('helmet');</div> |
|
|
<div class="code-line">const rateLimit = require('express-rate-limit');</div> |
|
|
<div class="code-line"></div> |
|
|
<div class="code-line">// Configuration de l'application</div> |
|
|
<div class="code-line">const app = express();</div> |
|
|
<div class="code-line">const PORT = process.env.PORT || 3000;</div> |
|
|
<div class="code-line"></div> |
|
|
<div class="code-line">// Middlewares</div> |
|
|
<div class="code-line">app.use(cors());</div> |
|
|
<div class="code-line">app.use(helmet());</div> |
|
|
<div class="code-line">app.use(express.json());</div> |
|
|
<div class="code-line">app.use(express.urlencoded({ extended: true }));</div> |
|
|
<div class="code-line"></div> |
|
|
<div class="code-line">// Limiteur de requêtes</div> |
|
|
<div class="code-line">const limiter = rateLimit({</div> |
|
|
<div class="code-line"> windowMs: 15 * 60 * 1000, // 15 minutes</div> |
|
|
<div class="code-line"> max: 100 // limite chaque IP à 100 requêtes par fenêtre</div> |
|
|
<div class="code-line">});</div> |
|
|
<div class="code-line">app.use(limiter);</div> |
|
|
<div class="code-line"></div> |
|
|
<div class="code-line">// Connexion à la base de données</div> |
|
|
<div class="code-line">mongoose.connect(process.env.DB_URI, {</div> |
|
|
<div class="code-line"> useNewUrlParser: true,</div> |
|
|
<div class="code-line"> useUnifiedTopology: true,</div> |
|
|
<div class="code-line"> useCreateIndex: true</div> |
|
|
<div class="code-line">})</div> |
|
|
<div class="code-line">.then(() => console.log('Connecté à MongoDB'))</div> |
|
|
<div class="code-line">.catch(err => console.error('Erreur de connexion:', err));</div> |
|
|
<div class="code-line"></div> |
|
|
<div class="code-line">// Routes</div> |
|
|
<div class="code-line">const apiRoutes = require('./routes/api');</div> |
|
|
<div class="code-line">const authRoutes = require('./routes/auth');</div> |
|
|
<div class="code-line">const adminRoutes = require('./routes/admin');</div> |
|
|
<div class="code-line"></div> |
|
|
<div class="code-line">app.use('/api', apiRoutes);</div> |
|
|
<div class="code-line">app.use('/auth', authRoutes);</div> |
|
|
<div class="code-line">app.use('/admin', adminRoutes);</div> |
|
|
<div class="code-line"></div> |
|
|
<div class="code-line">// Gestion des erreurs</div> |
|
|
<div class="code-line">app.use((err, req, res, next) => {</div> |
|
|
<div class="code-line"> console.error(err.stack);</div> |
|
|
<div class="code-line"> res.status(500).json({ error: 'Erreur interne du serveur' });</div> |
|
|
<div class="code-line">});</div> |
|
|
<div class="code-line"></div> |
|
|
<div class="code-line">// Démarrage du serveur</div> |
|
|
<div class="code-line">app.listen(PORT, () => {</div> |
|
|
<div class="code-line"> console.log(`Serveur démarré sur le port ${PORT}`);</div> |
|
|
<div class="code-line">});</div> |
|
|
</code> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 flex justify-between items-center"> |
|
|
<div class="text-gray-400 text-sm"> |
|
|
<span id="line-count">30</span> lignes de code générées |
|
|
</div> |
|
|
<button class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700"> |
|
|
<i class="fas fa-download mr-2"></i>Télécharger le projet complet |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="generation-process" class="hidden py-12 bg-gray-800"> |
|
|
<div class="max-w-4xl mx-auto px-4"> |
|
|
<h2 class="text-2xl font-bold text-white text-center mb-8">Création de votre application</h2> |
|
|
|
|
|
<div class="progress-bar rounded-full mb-8 w-full" id="progress-bar"></div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-center"> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<div class="text-3xl font-bold text-indigo-400 mb-2" id="file-count">0</div> |
|
|
<div class="text-gray-300">Fichiers générés</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<div class="text-3xl font-bold text-green-400 mb-2" id="line-count-total">0</div> |
|
|
<div class="text-gray-300">Lignes de code</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<div class="text-3xl font-bold text-blue-400 mb-2" id="endpoint-count">0</div> |
|
|
<div class="text-gray-300">Endpoints API</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 bg-gray-900 p-4 rounded-lg"> |
|
|
<div class="text-gray-300 font-mono text-sm overflow-auto h-32" id="generation-log"> |
|
|
<div>> Initialisation du générateur...</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-12 bg-gray-900"> |
|
|
<div class="max-w-6xl mx-auto px-4"> |
|
|
<h2 class="text-2xl font-bold text-white text-center mb-8">Applications professionnelles générées</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div class="bg-gray-800 p-6 rounded-lg hover:transform hover:scale-105 transition-transform"> |
|
|
<div class="bg-indigo-600 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-shopping-cart text-white text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-white mb-2">Plateforme e-commerce</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Système complet avec panier, paiement, gestion de produits et dashboard admin. |
|
|
</p> |
|
|
<div class="text-xs text-gray-400"> |
|
|
<span class="bg-gray-700 px-2 py-1 rounded mr-2">~2000 lignes</span> |
|
|
<span class="bg-gray-700 px-2 py-1 rounded">12 endpoints API</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 p-6 rounded-lg hover:transform hover:scale-105 transition-transform"> |
|
|
<div class="bg-purple-600 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-users text-white text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-white mb-2">Réseau social</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Authentification, publications, commentaires, notifications en temps réel. |
|
|
</p> |
|
|
<div class="text-xs text-gray-400"> |
|
|
<span class="bg-gray-700 px-2 py-1 rounded mr-2">~2500 lignes</span> |
|
|
<span class="bg-gray-700 px-2 py-1 rounded">18 endpoints API</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 p-6 rounded-lg hover:transform hover:scale-105 transition-transform"> |
|
|
<div class="bg-green-600 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-chart-line text-white text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-white mb-2">ERP d'entreprise</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Gestion de stock, facturation, RH, reporting et tableaux de bord analytiques. |
|
|
</p> |
|
|
<div class="text-xs text-gray-400"> |
|
|
<span class="bg-gray-700 px-2 py-1 rounded mr-2">~3500 lignes</span> |
|
|
<span class="bg-gray-700 px-2 py-1 rounded">25 endpoints API</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 py-8"> |
|
|
<div class="max-w-4xl mx-auto px-4 text-center"> |
|
|
<p class="text-gray-400"> |
|
|
© 2023 NexusWeb Pro. Générateur d'applications web complexes. |
|
|
</p> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const generateBtn = document.getElementById('generate-btn'); |
|
|
const projectDescription = document.getElementById('project-description'); |
|
|
const generationProcess = document.getElementById('generation-process'); |
|
|
const progressBar = document.getElementById('progress-bar'); |
|
|
const generationLog = document.getElementById('generation-log'); |
|
|
const fileCount = document.getElementById('file-count'); |
|
|
const lineCountTotal = document.getElementById('line-count-total'); |
|
|
const endpointCount = document.getElementById('endpoint-count'); |
|
|
const projectArchitecture = document.getElementById('project-architecture'); |
|
|
const codePreviewSection = document.getElementById('code-preview-section'); |
|
|
const fileStructure = document.getElementById('file-structure'); |
|
|
const databaseSchema = document.getElementById('database-schema'); |
|
|
const apiEndpoints = document.getElementById('api-endpoints'); |
|
|
const codeContent = document.getElementById('code-content'); |
|
|
const lineCount = document.getElementById('line-count'); |
|
|
const fileTabs = document.querySelectorAll('[data-file]'); |
|
|
|
|
|
|
|
|
const projectTemplates = { |
|
|
'ecommerce': { |
|
|
name: "Plateforme e-commerce", |
|
|
files: [ |
|
|
{name: "app.js", type: "file", lines: 120}, |
|
|
{name: "routes/", type: "folder", children: [ |
|
|
{name: "api.js", type: "file", lines: 250}, |
|
|
{name: "auth.js", type: "file", lines: 180}, |
|
|
{name: "admin.js", type: "file", lines: 200} |
|
|
]}, |
|
|
{name: "models/", type: "folder", children: [ |
|
|
{name: "Product.js", type: "file", lines: 150}, |
|
|
{name: "User.js", type: "file", lines: 120}, |
|
|
{name: "Order.js", type: "file", lines: 180} |
|
|
]}, |
|
|
{name: "controllers/", type: "folder", children: [ |
|
|
{name: "productController.js", type: "file", lines: 220}, |
|
|
{name: "userController.js", type: "file", lines: 200}, |
|
|
{name: "orderController.js", type: "file", lines: 240} |
|
|
]}, |
|
|
{name: "middlewares/", type: "folder", children: [ |
|
|
{name: "auth.js", type: "file", lines: 100}, |
|
|
{name: "admin.js", type: "file", lines: 80} |
|
|
]}, |
|
|
{name: "config/", type: "folder", children: [ |
|
|
{name: "db.js", type: "file", lines: 60}, |
|
|
{name: "passport.js", type: "file", lines: 90} |
|
|
]}, |
|
|
{name: "public/", type: "folder", children: [ |
|
|
{name: "css/", type: "folder"}, |
|
|
{name: "js/", type: "folder"}, |
|
|
{name: "images/", type: "folder"} |
|
|
]}, |
|
|
{name: "views/", type: "folder", children: [ |
|
|
{name: "layouts/", type: "folder"}, |
|
|
{name: "products/", type: "folder"}, |
|
|
{name: "users/", type: "folder"} |
|
|
]} |
|
|
], |
|
|
database: [ |
|
|
"Users: id, email, password, name, address, role", |
|
|
"Products: id, name, description, price, category, stock", |
|
|
"Orders: id, userId, products, total, status, createdAt", |
|
|
"Categories: id, name, description", |
|
|
"Payments: id, orderId, amount, method, status" |
|
|
], |
|
|
endpoints: [ |
|
|
"POST /api/products - Créer un produit (admin)", |
|
|
"GET /api/products - Lister tous les produits", |
|
|
"GET /api/products/:id - Obtenir un produit", |
|
|
"POST /api/orders - Créer une commande", |
|
|
"GET /api/orders/:id - Obtenir une commande", |
|
|
"POST /auth/register - S'inscrire", |
|
|
"POST /auth/login - Se connecter", |
|
|
"GET /auth/me - Profil utilisateur", |
|
|
"GET /admin/orders - Lister toutes les commandes (admin)", |
|
|
"PUT /admin/orders/:id - Mettre à jour une commande (admin)" |
|
|
], |
|
|
totalLines: 1500 |
|
|
}, |
|
|
'social': { |
|
|
name: "Réseau social", |
|
|
files: [ |
|
|
{name: "app.js", type: "file", lines: 120}, |
|
|
{name: "routes/", type: "folder", children: [ |
|
|
{name: "posts.js", type: "file", lines: 200}, |
|
|
{name: "auth.js", type: "file", lines: 180}, |
|
|
{name: "users.js", type: "file", lines: 220}, |
|
|
{name: "comments.js", type: "file", lines: 160} |
|
|
]}, |
|
|
{name: "models/", type: "folder", children: [ |
|
|
{name: "User.js", type: "file", lines: 150}, |
|
|
{name: "Post.js", type: "file", lines: 180}, |
|
|
{name: "Comment.js", type: "file", lines: 140} |
|
|
]}, |
|
|
{name: "controllers/", type: "folder", children: [ |
|
|
{name: "postController.js", type: "file", lines: 250}, |
|
|
{name: "userController.js", type: "file", lines: 220}, |
|
|
{name: "commentController.js", type: "file", lines: 200} |
|
|
]}, |
|
|
{name: "socket/", type: "folder", children: [ |
|
|
{name: "index.js", type: "file", lines: 180} |
|
|
]}, |
|
|
{name: "config/", type: "folder", children: [ |
|
|
{name: "db.js", type: "file", lines: 60}, |
|
|
{name: "passport.js", type: "file", lines: 90} |
|
|
]} |
|
|
], |
|
|
database: [ |
|
|
"Users: id, username, email, password, bio, avatar", |
|
|
"Posts: id, userId, content, image, likes, createdAt", |
|
|
"Comments: id, postId, userId, content, createdAt", |
|
|
"Likes: id, postId, userId, createdAt", |
|
|
"Follows: id, followerId, followingId, createdAt" |
|
|
], |
|
|
endpoints: [ |
|
|
"POST /api/posts - Créer un post", |
|
|
"GET /api/posts - Lister les posts", |
|
|
"GET /api/posts/:id - Obtenir un post", |
|
|
"POST /api/posts/:id/like - Aimer un post", |
|
|
"POST /api/posts/:id/comment - Commenter un post", |
|
|
"POST /auth/register - S'inscrire", |
|
|
"POST /auth/login - Se connecter", |
|
|
"GET /api/users/:id - Obtenir un utilisateur", |
|
|
"POST /api/users/:id/follow - Suivre un utilisateur", |
|
|
"GET /api/users/:id/posts - Posts d'un utilisateur" |
|
|
], |
|
|
totalLines: 1800 |
|
|
}, |
|
|
'erp': { |
|
|
name: "Système ERP", |
|
|
files: [ |
|
|
{name: "app.js", type: "file", lines: 150}, |
|
|
{name: "routes/", type: "folder", children: [ |
|
|
{name: "inventory.js", type: "file", lines: 300}, |
|
|
{name: "hr.js", type: "file", lines: 250}, |
|
|
{name: "finance.js", type: "file", lines: 280}, |
|
|
{name: "reports.js", type: "file", lines: 220} |
|
|
]}, |
|
|
{name: "models/", type: "folder", children: [ |
|
|
{name: "Product.js", type: "file", lines: 200}, |
|
|
{name: "Employee.js", type: "file", lines: 180}, |
|
|
{name: "Invoice.js", type: "file", lines: 220}, |
|
|
{name: "Report.js", type: "file", lines: 150} |
|
|
]}, |
|
|
{name: "controllers/", type: "folder", children: [ |
|
|
{name: "inventoryController.js", type: "file", lines: 350}, |
|
|
{name: "hrController.js", type: "file", lines: 300}, |
|
|
{name: "financeController.js", type: "file", lines: 320} |
|
|
]}, |
|
|
{name: "services/", type: "folder", children: [ |
|
|
{name: "reportService.js", type: "file", lines: 280} |
|
|
]}, |
|
|
{name: "config/", type: "folder", children: [ |
|
|
{name: "db.js", type: "file", lines: 80}, |
|
|
{name: "auth.js", type: "file", lines: 120} |
|
|
]} |
|
|
], |
|
|
database: [ |
|
|
"Products: id, name, description, category, quantity, price", |
|
|
"Employees: id, name, position, department, salary, joinDate", |
|
|
"Customers: id, name, email, phone, address", |
|
|
"Invoices: id, customerId, date, total, status", |
|
|
"Orders: id, productId, quantity, date, status", |
|
|
"Reports: id, type, data, generatedBy, createdAt" |
|
|
], |
|
|
endpoints: [ |
|
|
"GET /api/inventory - Liste des produits", |
|
|
"POST /api/inventory - Ajouter un produit", |
|
|
"PUT /api/inventory/:id - Mettre à jour un produit", |
|
|
"GET /api/employees - Liste des employés", |
|
|
"POST /api/employees - Ajouter un employé", |
|
|
"POST /api/invoices - Créer une facture", |
|
|
"GET /api/invoices - Liste des factures", |
|
|
"GET /api/reports/generate - Générer un rapport", |
|
|
"GET /api/reports/:id - Télécharger un rapport", |
|
|
"POST /auth/login - Connexion admin" |
|
|
], |
|
|
totalLines: 2500 |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
generateBtn.addEventListener('click', function() { |
|
|
const description = projectDescription.value.toLowerCase(); |
|
|
let templateKey = 'ecommerce'; |
|
|
|
|
|
if (description.includes('social') || description.includes('réseau') || description.includes('reseau')) { |
|
|
templateKey = 'social'; |
|
|
} else if (description.includes('erp') || description.includes('entreprise') || description.includes('gestion')) { |
|
|
templateKey = 'erp'; |
|
|
} |
|
|
|
|
|
const project = projectTemplates[templateKey]; |
|
|
|
|
|
|
|
|
generationProcess.classList.remove('hidden'); |
|
|
generationProcess.scrollIntoView({ behavior: 'smooth' }); |
|
|
|
|
|
|
|
|
simulateGeneration(project); |
|
|
}); |
|
|
|
|
|
|
|
|
function simulateGeneration(project) { |
|
|
let progress = 0; |
|
|
const totalSteps = 100; |
|
|
const progressInterval = setInterval(() => { |
|
|
progress += 1; |
|
|
progressBar.style.width = `${progress}%`; |
|
|
|
|
|
|
|
|
if (progress === 10) { |
|
|
addLog("> Initialisation de l'architecture du projet..."); |
|
|
} else if (progress === 20) { |
|
|
addLog("> Création des fichiers de configuration..."); |
|
|
} else if (progress === 35) { |
|
|
addLog("> Génération des modèles de données..."); |
|
|
} else if (progress === 50) { |
|
|
addLog("> Création des contrôleurs..."); |
|
|
} else if (progress === 65) { |
|
|
addLog("> Configuration des routes API..."); |
|
|
} else if (progress === 80) { |
|
|
addLog("> Optimisation du code..."); |
|
|
} else if (progress === 90) { |
|
|
addLog("> Finalisation du projet..."); |
|
|
} |
|
|
|
|
|
|
|
|
if (progress % 5 === 0) { |
|
|
const files = Math.min(project.files.length, Math.floor(progress / 100 * project.files.length)); |
|
|
const lines = Math.min(project.totalLines, Math.floor(progress / 100 * project.totalLines)); |
|
|
const endpoints = Math.min(project.endpoints.length, Math.floor(progress / 100 * project.endpoints.length)); |
|
|
|
|
|
fileCount.textContent = files; |
|
|
lineCountTotal.textContent = lines; |
|
|
endpointCount.textContent = endpoints; |
|
|
} |
|
|
|
|
|
|
|
|
if (progress >= totalSteps) { |
|
|
clearInterval(progressInterval); |
|
|
addLog("> Projet généré avec succès!"); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
displayProjectResults(project); |
|
|
}, 1000); |
|
|
} |
|
|
}, 50); |
|
|
} |
|
|
|
|
|
function addLog(message) { |
|
|
const logEntry = document.createElement('div'); |
|
|
logEntry.textContent = message; |
|
|
generationLog.appendChild(logEntry); |
|
|
generationLog.scrollTop = generationLog.scrollHeight; |
|
|
} |
|
|
|
|
|
function displayProjectResults(project) { |
|
|
|
|
|
projectArchitecture.classList.remove('hidden'); |
|
|
projectArchitecture.scrollIntoView({ behavior: 'smooth' }); |
|
|
|
|
|
|
|
|
renderFileStructure(project.files, fileStructure); |
|
|
|
|
|
|
|
|
databaseSchema.innerHTML = project.database.map(item => |
|
|
`<div class="bg-gray-800 p-2 mb-1 rounded text-sm font-mono">${item}</div>` |
|
|
).join(''); |
|
|
|
|
|
|
|
|
apiEndpoints.innerHTML = project.endpoints.map(item => |
|
|
`<div class="bg-gray-800 p-2 mb-1 rounded text-sm font-mono">${item}</div>` |
|
|
).join(''); |
|
|
|
|
|
|
|
|
codePreviewSection.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
fileTabs.forEach(tab => { |
|
|
tab.addEventListener('click', function() { |
|
|
|
|
|
document.querySelector('.active-file').classList.remove('active-file', 'bg-indigo-600'); |
|
|
document.querySelector('.active-file').classList.add('bg-gray-700', 'text-gray-300'); |
|
|
|
|
|
this.classList.add('active-file', 'bg-indigo-600'); |
|
|
this.classList.remove('bg-gray-700', 'text-gray-300'); |
|
|
|
|
|
|
|
|
const file = this.dataset.file; |
|
|
updateCodePreview(file, project); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
function renderFileStructure(files, container, level = 0) { |
|
|
container.innerHTML = ''; |
|
|
|
|
|
files.forEach(file => { |
|
|
const item = document.createElement('li'); |
|
|
item.className = file.type === 'folder' ? 'folder' : 'file'; |
|
|
|
|
|
const icon = file.type === 'folder' ? |
|
|
'<i class="fas fa-folder text-yellow-400 mr-2"></i>' : |
|
|
'<i class="fas fa-file-code text-blue-400 mr-2"></i>'; |
|
|
|
|
|
item.innerHTML = `${icon}${file.name}`; |
|
|
|
|
|
if (file.lines) { |
|
|
item.innerHTML += ` <span class="text-gray-500 text-xs">${file.lines} lignes</span>`; |
|
|
} |
|
|
|
|
|
container.appendChild(item); |
|
|
|
|
|
if (file.children) { |
|
|
const childList = document.createElement('ul'); |
|
|
childList.className = 'ml-4 mt-1'; |
|
|
item.appendChild(childList); |
|
|
renderFileStructure(file.children, childList, level + 1); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
function updateCodePreview(file, project) { |
|
|
|
|
|
let content = ''; |
|
|
let lines = 30; |
|
|
|
|
|
switch(file) { |
|
|
case 'app.js': |
|
|
content = `// ${project.name} - Fichier principal\n\n` + |
|
|
`const express = require('express');\n` + |
|
|
`const mongoose = require('mongoose');\n` + |
|
|
`const cors = require('cors');\n\n` + |
|
|
`// Configuration de l'application\n` + |
|
|
`const app = express();\n` + |
|
|
`const PORT = process.env.PORT || 3000;\n\n` + |
|
|
`// Middlewares\n` + |
|
|
`app.use(cors());\n` + |
|
|
`app.use(express.json());\n\n` + |
|
|
`// Connexion à la base de données\n` + |
|
|
`mongoose.connect(process.env.DB_URI, {\n` + |
|
|
` useNewUrlParser: true,\n` + |
|
|
` useUnifiedTopology: true\n` + |
|
|
`}).then(() => console.log('Connecté à MongoDB'))\n` + |
|
|
` .catch(err => console.error('Erreur:', err));\n\n` + |
|
|
`// Routes\n` + |
|
|
`app.use('/api', require('./routes/api'));\n` + |
|
|
`app.use('/auth', require('./routes/auth'));\n\n` + |
|
|
`// Démarrage du serveur\n` + |
|
|
`app.listen(PORT, () => {\n` + |
|
|
` console.log(\`Serveur démarré sur le port \${PORT}\`);\n` + |
|
|
`});`; |
|
|
lines = 25; |
|
|
break; |
|
|
|
|
|
case 'routes.js': |
|
|
content = `// ${project.name} - Routes API\n\n` + |
|
|
`const express = require('express');\n` + |
|
|
`const router = express.Router();\n` + |
|
|
`const controller = require('../controllers/mainController');\n\n` + |
|
|
`// Routes publiques\n` + |
|
|
`router.get('/products', controller.getProducts);\n` + |
|
|
`router.get('/products/:id', controller.getProduct);\n\n` + |
|
|
`// Routes protégées\n` + |
|
|
`router.use(require('../middlewares/auth'));\n\n` + |
|
|
`router.post('/products', controller.createProduct);\n` + |
|
|
`router.put('/products/:id', controller.updateProduct);\n` + |
|
|
`router.delete('/products/:id', controller.deleteProduct);\n\n` + |
|
|
`module.exports = router;`; |
|
|
lines = 18; |
|
|
break; |
|
|
|
|
|
case 'models.js': |
|
|
content = `// ${project.name} - Modèles de données\n\n` + |
|
|
`const mongoose = require('mongoose');\n\n` + |
|
|
`// Schéma Utilisateur\n` + |
|
|
`const userSchema = new mongoose.Schema({\n` + |
|
|
` name: { type: String, required: true },\n` + |
|
|
` email: { type: String, required: true, unique: true },\n` + |
|
|
` password: { type: String, required: true },\n` + |
|
|
` role: { type: String, enum: ['user', 'admin'], default: 'user' },\n` + |
|
|
` createdAt: { type: Date, default: Date.now }\n` + |
|
|
`});\n\n` + |
|
|
`// Schéma Produit\n` + |
|
|
`const productSchema = new mongoose.Schema({\n` + |
|
|
` name: { type: String, required: true },\n` + |
|
|
` description: { type: String },\n` + |
|
|
` price: { type: Number, required: true },\n` + |
|
|
` category: { type: String },\n` + |
|
|
` stock: { type: Number, default: 0 },\n` + |
|
|
` createdAt: { type: Date, default: Date.now }\n` + |
|
|
`});\n\n` + |
|
|
`// Export des modèles\n` + |
|
|
`module.exports = {\n` + |
|
|
` User: mongoose.model('User', userSchema),\n` + |
|
|
` Product: mongoose.model('Product', productSchema)\n` + |
|
|
`};`; |
|
|
lines = 28; |
|
|
break; |
|
|
|
|
|
default: |
|
|
content = `// ${project.name} - ${file}\n\n` + |
|
|
`// Contenu du fichier ${file}\n` + |
|
|
`// Ce fichier fait partie de l'architecture du projet\n` + |
|
|
`// et contient la logique spécifique à sa fonction.\n\n` + |
|
|
`// ${project.totalLines} lignes de code au total dans ce projet.`; |
|
|
lines = 5; |
|
|
} |
|
|
|
|
|
codeContent.innerHTML = content.split('\n').map(line => |
|
|
`<div class="code-line">${line}</div>` |
|
|
).join(''); |
|
|
|
|
|
lineCount.textContent = lines; |
|
|
} |
|
|
}); |
|
|
</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=docto41/frerr" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
