335 lines
9.0 KiB
HTML
335 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WEVAL Academy E-Learning — Formations IA avec Certification</title>
|
|
<meta name="description" content="Formations IA complètes avec quiz et certification. 11 modules: Prompt Engineering, LLM Souverain, Cloud IA, Sécurité. Certifiez vos compétences IA.">
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--primary: #e94560;
|
|
--dark: #0f172a;
|
|
--bg: #1e293b;
|
|
--text: #f1f5f9;
|
|
--gray: #64748b;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
background: var(--dark);
|
|
color: var(--text);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.header {
|
|
background: var(--bg);
|
|
padding: 1.5rem 2rem;
|
|
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.header-content {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 1.5rem;
|
|
font-weight: 800;
|
|
color: white;
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.logo span {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 2rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.hero {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 4rem 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 3rem;
|
|
font-weight: 800;
|
|
margin-bottom: 1rem;
|
|
background: linear-gradient(135deg, var(--primary), #ff6b95);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1.25rem;
|
|
color: var(--gray);
|
|
max-width: 700px;
|
|
margin: 0 auto 2rem;
|
|
}
|
|
|
|
.stats {
|
|
display: flex;
|
|
gap: 3rem;
|
|
justify-content: center;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.stat {
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 2.5rem;
|
|
font-weight: 800;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.stat-label {
|
|
color: var(--gray);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
#root {
|
|
max-width: 1400px;
|
|
margin: 2rem auto;
|
|
padding: 0 2rem;
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
padding: 4rem 2rem;
|
|
color: var(--gray);
|
|
}
|
|
|
|
.loading::after {
|
|
content: '⏳';
|
|
display: block;
|
|
font-size: 3rem;
|
|
margin-top: 1rem;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hero h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.stats {
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="header">
|
|
<div class="header-content">
|
|
<a href="/" class="logo">
|
|
WEVAL<span>Academy</span>
|
|
</a>
|
|
<nav class="nav-links">
|
|
<a href="/">Accueil</a>
|
|
<a href="/products/academy.html">Présentation</a>
|
|
<a href="/products/academy-elearning.html">Formations</a>
|
|
<a href="/wevia">Chat IA</a>
|
|
<a href="/booking.html">Contact</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<h1>🎓 Formations IA avec Certification</h1>
|
|
<p>
|
|
11 modules complets avec quiz interactifs et certification officielle WEVAL.
|
|
Maîtrisez l'IA générative, le prompt engineering et les LLMs souverains.
|
|
</p>
|
|
|
|
<div class="stats">
|
|
<div class="stat">
|
|
<div class="stat-value">11</div>
|
|
<div class="stat-label">Formations</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value">12</div>
|
|
<div class="stat-label">Quiz</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value">45min</div>
|
|
<div class="stat-label">Durée moyenne</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div id="root">
|
|
<div class="loading">
|
|
Chargement du module e-learning...
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
// Import React depuis CDN
|
|
import React from 'https://esm.sh/react@18.2.0';
|
|
import ReactDOM from 'https://esm.sh/react-dom@18.2.0/client';
|
|
|
|
// Charger le module Academy
|
|
const loadAcademyModule = async () => {
|
|
try {
|
|
// Récupérer le code du module
|
|
const response = await fetch('/products/WevalIA-Academy-Module.jsx');
|
|
const moduleCode = await response.text();
|
|
|
|
// Créer un composant temporaire qui affiche les formations
|
|
const AcademyComponent = () => {
|
|
return React.createElement('div', {
|
|
style: {
|
|
background: '#1e293b',
|
|
borderRadius: '12px',
|
|
padding: '2rem',
|
|
marginBottom: '2rem'
|
|
}
|
|
}, [
|
|
React.createElement('h2', {
|
|
key: 'title',
|
|
style: {
|
|
fontSize: '1.8rem',
|
|
marginBottom: '1rem',
|
|
color: '#f1f5f9'
|
|
}
|
|
}, '📚 Catalogue des Formations'),
|
|
React.createElement('p', {
|
|
key: 'desc',
|
|
style: {
|
|
color: '#64748b',
|
|
marginBottom: '2rem'
|
|
}
|
|
}, 'Module e-learning complet extrait. 2013 lignes de code React avec 12 quiz intégrés.'),
|
|
React.createElement('div', {
|
|
key: 'info',
|
|
style: {
|
|
background: 'rgba(233, 69, 96, 0.1)',
|
|
border: '1px solid rgba(233, 69, 96, 0.3)',
|
|
borderRadius: '8px',
|
|
padding: '1.5rem',
|
|
marginTop: '1rem'
|
|
}
|
|
}, [
|
|
React.createElement('h3', {
|
|
key: 'info-title',
|
|
style: { color: '#e94560', marginBottom: '0.5rem' }
|
|
}, '✅ Module Disponible'),
|
|
React.createElement('p', {
|
|
key: 'info-text',
|
|
style: { color: '#f1f5f9', fontSize: '0.9rem' }
|
|
}, 'Le module e-learning complet (198KB, 2013 lignes) a été extrait du Git et est prêt pour intégration React. Il contient 11 formations complètes avec quiz interactifs et système de certification.'),
|
|
React.createElement('ul', {
|
|
key: 'formations',
|
|
style: {
|
|
marginTop: '1rem',
|
|
paddingLeft: '1.5rem',
|
|
color: '#cbd5e1'
|
|
}
|
|
}, [
|
|
'Introduction à l\'IA Générative',
|
|
'Prompt Engineering Fondamentaux',
|
|
'Prompt Engineering Avancé',
|
|
'LLM Souverain Ollama',
|
|
'Architecture Cloud IA',
|
|
'Sécurité IA',
|
|
'IA pour Managers',
|
|
'Automatisation IA',
|
|
'Comprendre LLM',
|
|
'IA Data Analytics',
|
|
'Guide Certifications IA'
|
|
].map((f, i) => React.createElement('li', {
|
|
key: i,
|
|
style: { marginBottom: '0.5rem' }
|
|
}, f))),
|
|
React.createElement('div', {
|
|
key: 'cta',
|
|
style: {
|
|
marginTop: '1.5rem',
|
|
padding: '1rem',
|
|
background: 'rgba(233, 69, 96, 0.2)',
|
|
borderRadius: '6px',
|
|
textAlign: 'center'
|
|
}
|
|
}, [
|
|
React.createElement('p', {
|
|
key: 'cta-text',
|
|
style: { color: '#f1f5f9', fontWeight: 600 }
|
|
}, '🚀 Module React complet prêt pour compilation'),
|
|
React.createElement('p', {
|
|
key: 'cta-details',
|
|
style: { color: '#94a3b8', fontSize: '0.85rem', marginTop: '0.5rem' }
|
|
}, 'Fichier: /var/www/html/products/WevalIA-Academy-Module.jsx (198KB)')
|
|
])
|
|
])
|
|
]);
|
|
};
|
|
|
|
// Render
|
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
|
root.render(React.createElement(AcademyComponent));
|
|
|
|
} catch (error) {
|
|
console.error('Erreur chargement module:', error);
|
|
document.getElementById('root').innerHTML = `
|
|
<div style="background: #dc2626; color: white; padding: 2rem; border-radius: 12px; text-align: center;">
|
|
<h3>❌ Erreur de chargement</h3>
|
|
<p style="margin-top: 1rem; opacity: 0.9;">${error.message}</p>
|
|
</div>
|
|
`;
|
|
}
|
|
};
|
|
|
|
// Charger au démarrage
|
|
loadAcademyModule();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|