Maquettes Claude Design avec visio de classe
This commit is contained in:
Adam Belkacemi
parent
238070ae54
commit
236d2d3567
243 changed files with 27992 additions and 0 deletions
181
design/Bibliotheque v2.dc.html
Normal file
181
design/Bibliotheque v2.dc.html
Normal file
|
|
@ -0,0 +1,181 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<style>body{margin:0;background:#f5f6f8;font-family:Mulish,system-ui,sans-serif;color:#111827} a{color:inherit;text-decoration:none} a:hover{color:#1d4ed8} select,input,button{font-family:inherit}</style>
|
||||
</helmet>
|
||||
<div style="display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh">
|
||||
<aside style="display:flex;flex-direction:column;padding:20px 0 24px">
|
||||
<a href="Apercu%20accueil%20Blade.html" aria-label="Syllabus, accueil" style="display:block;padding:0 24px"><img src="images/logo-syllabus.png" alt="Syllabus" style="display:block;height:52px;width:auto"></a>
|
||||
<nav style="margin-top:28px;display:flex;flex-direction:column;flex:1;background:#fff;border:1px solid #e5e7eb;border-left:0;border-radius:0 14px 14px 0;padding:24px 12px 20px">
|
||||
<div style="display:grid;gap:2px;font-size:13px;font-weight:600;color:#4b5563">
|
||||
<a href="#" style="display:flex;align-items:center;gap:10px;padding:8px 12px;color:#1d4ed8;font-weight:700"><svg width="16" height="16" viewBox="0 0 24 24" fill="#2563eb"><rect x="3" y="4" width="18" height="16" rx="3"></rect><rect x="6" y="8" width="12" height="2" fill="#fff"></rect></svg>Cours</a>
|
||||
<a href="#" style="display:flex;align-items:center;gap:10px;padding:7px 12px 7px 26px;color:#1d4ed8;font-weight:700"><span style="width:5px;height:5px;border-radius:50%;background:#2563eb"></span>Bibliothèque</a>
|
||||
<a href="apercu-devoirs.html" style="padding:7px 12px 7px 41px">Mes séquences</a>
|
||||
<a href="apercu-espace-eleve.html" style="display:flex;align-items:center;gap:10px;margin-top:10px;padding:8px 12px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2"><rect x="3" y="5" width="18" height="16" rx="2"></rect><path d="M3 10h18M8 3v4M16 3v4"></path></svg>Planning</a>
|
||||
<a href="apercu-cohortes.html" style="display:flex;align-items:center;gap:10px;padding:8px 12px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2"><circle cx="9" cy="8" r="3.5"></circle><path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6M16 11a3 3 0 1 0 0-6M21 20c0-2.6-1.7-4.8-4-5.6"></path></svg>Élèves</a>
|
||||
<a href="apercu-suivi.html" style="display:flex;align-items:center;gap:10px;padding:8px 12px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2"><circle cx="12" cy="12" r="9"></circle><path d="M12 3v9l6 5"></path></svg>Suivi</a>
|
||||
<a href="apercu-labs.html" style="display:flex;align-items:center;gap:10px;padding:8px 12px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2"><rect x="3" y="4" width="18" height="16" rx="2"></rect><path d="m7 10 3 2-3 2M12 15h5"></path></svg>TP Linux</a>
|
||||
<a href="apercu-banque.html" style="display:flex;align-items:center;gap:10px;padding:8px 12px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1.5"></rect><rect x="14" y="3" width="7" height="7" rx="1.5"></rect><rect x="3" y="14" width="7" height="7" rx="1.5"></rect><rect x="14" y="14" width="7" height="7" rx="1.5"></rect></svg>Catalogue</a>
|
||||
</div>
|
||||
<div style="margin-top:auto;display:grid;gap:2px;font-size:13px;font-weight:600;color:#4b5563">
|
||||
<a href="apercu-aide.html" style="display:flex;align-items:center;gap:10px;padding:8px 12px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V3H6.5A2.5 2.5 0 0 0 4 5.5z"></path></svg>Aide</a>
|
||||
<a href="apercu-pourquoi.html" style="display:flex;align-items:center;gap:10px;padding:8px 12px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2"><circle cx="12" cy="12" r="9"></circle><path d="M12 11v6M12 7h.01"></path></svg>Infos</a>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main style="min-width:0;padding:22px 36px 40px 28px">
|
||||
<header style="display:flex;flex-wrap:wrap;align-items:center;gap:20px">
|
||||
<h1 style="margin:22px 0 0;font-size:24px;font-weight:800;letter-spacing:-0.01em">Bibliothèque des cours</h1>
|
||||
<a href="apercu-quiz-projection.html" style="margin-top:22px;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:6px;background:#1d5cf5;color:#fff;font-size:13px;font-weight:700;box-shadow:0 1px 2px rgba(29,92,245,.35)" style-hover="background:#174bd0;color:#fff"><span style="font-size:18px;line-height:1">+</span>Lancer une séance</a>
|
||||
<div style="margin-left:auto;align-self:flex-start;display:flex;align-items:center;gap:10px;padding:8px 12px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 1px 2px rgba(17,24,39,.04)">
|
||||
<span style="display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#111827;color:#fff;font-size:11px;font-weight:800">AB</span>
|
||||
<span style="display:grid;line-height:1.2;padding-right:14px"><span style="font-size:10px;color:#6b7280">Enseignant</span><span style="font-size:12px;font-weight:800">Adam Belkacemi</span></span>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1e3a8a" stroke-width="3"><path d="m6 9 6 6 6-6"></path></svg>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section style="margin-top:24px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 3px rgba(17,24,39,.04)">
|
||||
<div style="padding:18px 20px 16px;border-bottom:1px solid #eef0f3">
|
||||
<h2 style="margin:0 0 12px;font-size:17px;font-weight:700">Filtrer</h2>
|
||||
<div style="display:flex;flex-wrap:wrap;align-items:center;gap:10px">
|
||||
<label style="position:relative;display:block">
|
||||
<select value="{{ cursus }}" onChange="{{ onCursus }}" style="appearance:none;width:180px;height:34px;padding:0 34px 0 12px;border:0;border-radius:6px;background:#f1f2f5;color:#6b7280;font-size:12px;font-weight:600">
|
||||
<sc-for list="{{ cursusList }}" as="c" hint-placeholder-count="4"><option value="{{ c }}">{{ c }}</option></sc-for>
|
||||
</select>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1e3a8a" stroke-width="3" style="position:absolute;right:12px;top:10px;pointer-events:none"><path d="m6 9 6 6 6-6"></path></svg>
|
||||
</label>
|
||||
<label style="position:relative;display:block">
|
||||
<select value="{{ theme }}" onChange="{{ onTheme }}" style="appearance:none;width:180px;height:34px;padding:0 34px 0 12px;border:0;border-radius:6px;background:#f1f2f5;color:#6b7280;font-size:12px;font-weight:600">
|
||||
<sc-for list="{{ themeList }}" as="t" hint-placeholder-count="4"><option value="{{ t }}">{{ t }}</option></sc-for>
|
||||
</select>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1e3a8a" stroke-width="3" style="position:absolute;right:12px;top:10px;pointer-events:none"><path d="m6 9 6 6 6-6"></path></svg>
|
||||
</label>
|
||||
<label style="position:relative;display:block">
|
||||
<input placeholder="Rechercher…" value="{{ q }}" onChange="{{ onQ }}" style="width:180px;height:34px;padding:0 34px 0 12px;border:0;border-radius:6px;background:#f1f2f5;color:#111827;font-size:12px;font-weight:600;outline-color:#1d5cf5">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2.5" style="position:absolute;right:12px;top:10px;pointer-events:none"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg>
|
||||
</label>
|
||||
<span style="margin-left:auto;font-size:12px;font-weight:600;color:#6b7280">{{ countLabel }}</span>
|
||||
<div style="display:flex;gap:6px">
|
||||
<button type="button" aria-label="Vue grille" aria-pressed="{{ isGrid }}" onClick="{{ setGrid }}" style="{{ gridBtn }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><rect x="4" y="5" width="16" height="10" rx="1.5"></rect><rect x="4" y="17" width="16" height="2" rx="1"></rect></svg></button>
|
||||
<button type="button" aria-label="Vue liste" aria-pressed="{{ isList }}" onClick="{{ setList }}" style="{{ listBtn }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01"></path></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="padding:16px 12px 20px">
|
||||
<div style="{{ gridStyle }}">
|
||||
<sc-for list="{{ items }}" as="c" hint-placeholder-count="6">
|
||||
<a href="{{ c.href }}" style="{{ cardStyle }}" style-hover="box-shadow:0 6px 18px rgba(17,24,39,.08);color:#111827">
|
||||
<div style="{{ c.bandStyle }}"></div>
|
||||
<div style="display:flex;flex-direction:column;flex:1;padding:12px 14px 14px">
|
||||
<h3 style="margin:0;font-size:14px;font-weight:700;line-height:1.3">{{ c.titre }}</h3>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px">
|
||||
<div>
|
||||
<p style="margin:0;font-size:10px;color:#9ca3af">Parties de cours</p>
|
||||
<p style="margin:3px 0 0;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700"><span style="display:grid;place-items:center;width:18px;height:18px;border-radius:4px;background:#eef2ff"><svg width="10" height="10" viewBox="0 0 24 24" fill="#1e3a8a"><path d="M4 4h16v16H4z"></path></svg></span>{{ c.parties }} parties</p>
|
||||
</div>
|
||||
<div>
|
||||
<p style="margin:0;font-size:10px;color:#9ca3af">Exercices</p>
|
||||
<p style="margin:3px 0 0;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700"><span style="display:grid;place-items:center;width:18px;height:18px;border-radius:4px;background:#eef2ff"><svg width="10" height="10" viewBox="0 0 24 24" fill="#1e3a8a"><path d="M12 3 2 8l10 5 10-5z"></path><path d="M6 11v5c3 2 9 2 12 0v-5l-6 3z"></path></svg></span>{{ c.exos }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin:12px 0 0;padding-top:10px;border-top:1px solid #eef0f3;font-size:11px;line-height:1.55;color:#6b7280">{{ c.desc }}</p>
|
||||
<div style="margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;gap:6px">
|
||||
<sc-for list="{{ c.tags }}" as="t" hint-placeholder-count="3"><span style="{{ t.style }}">{{ t.label }}</span></sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</sc-for>
|
||||
</div>
|
||||
<sc-if value="{{ empty }}" hint-placeholder-val="{{ false }}">
|
||||
<p style="margin:0;padding:40px 8px;font-size:14px;font-weight:600;color:#4b5563">Aucun cours ne correspond. Essayez un autre cursus ou un autre mot.</p>
|
||||
</sc-if>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"vue":{"editor":"enum","options":["grille","liste"],"default":"grille","tsType":"'grille' | 'liste'"}}">
|
||||
const COURS = [
|
||||
['Diagnostic réseau en ligne de commande', 'Réseaux', 8, '7 TD', 'Méthode par couches, ping, traceroute, ss, ARP et tcpdump pour résoudre un incident en cinq minutes.', ['BTS SIO', 'BUT R&T', 'TSSR']],
|
||||
['Adressage IPv4 : masques et sous-réseaux', 'Réseaux', 8, '7 TD', 'Calcul réseau et diffusion, nombre magique, découpage égal et VLSM, agrégation de routes.', ['BTS SIO', 'BTS CIEL', 'BUT R&T']],
|
||||
['VLAN 802.1Q et routage inter-VLAN', 'Réseaux', 8, '5 TD', 'Segmenter un établissement sans recâbler, configurer un switch et filtrer entre VLAN.', ['BTS SIO', 'SISR']],
|
||||
['DHCP : serveur, relais et baux', 'Réseaux', 8, '7 TD', 'DORA, étendues et réservations, relais inter-VLAN, DHCP snooping contre les faux serveurs.', ['BTS SIO', 'SISR']],
|
||||
['DNS : zones, enregistrements et Bind9', 'Réseaux', 9, '7 TD', 'Résolveur et serveur faisant autorité, fichiers de zone, TTL, DNSSEC et diagnostic avec dig.', ['BTS SIO', 'BUT R&T', 'AIS']],
|
||||
['NAT et PAT avec nftables', 'Réseaux', 7, '7 TD', 'Masquerade, redirection de ports, suivi de connexions et hairpin NAT sur une passerelle Linux.', ['BTS SIO', 'BUT R&T']],
|
||||
['Routage statique et route par défaut', 'Réseaux', 8, '6 TD', 'Table de routage, correspondance la plus longue, persistance et chemin retour.', ['BTS SIO', 'BTS CIEL']],
|
||||
['Modèles OSI et TCP/IP', 'Réseaux', 8, '4 TD', 'Les couches comme méthode de diagnostic, TCP et UDP, ARP et équipements.', ['SNT', 'BTS SIO', 'BUT R&T']],
|
||||
['Le terminal Linux', 'Systèmes', 8, '4 TD', 'Arborescence, chemins, fichiers, recherche et productivité au clavier.', ['NSI', 'BTS SIO', 'TSSR']],
|
||||
['Droits, utilisateurs et groupes', 'Systèmes', 8, '5 TD', 'Lecture et calcul des droits, SUID et SGID, sudo et audit d’un serveur.', ['BTS SIO', 'BTS CIEL']],
|
||||
['Redirections, tubes et filtres', 'Systèmes', 7, '4 TD', 'Les trois flux, grep, awk, sed et la chaîne qui repère une attaque SSH.', ['BTS SIO', 'BUT R&T']],
|
||||
['Conteneurs Docker', 'DevOps', 7, '4 TD', 'Namespaces et cgroups, Dockerfile de production, volumes, réseaux et sécurité.', ['BTS SIO', 'BUT DevCloud', 'AIS']],
|
||||
['Docker Compose', 'DevOps', 6, '3 TD', 'Application multi-conteneurs, healthchecks, secrets et mise à jour sans perte.', ['BTS SIO', 'AIS']],
|
||||
['Ansible', 'DevOps', 6, '3 TD', 'Automatiser la configuration de dizaines de serveurs, idempotence et déploiement par lots.', ['BTS SIO', 'BUT DevCloud']],
|
||||
['SQL : interroger une base relationnelle', 'Données', 10, '5 TD', 'SELECT, jointures, agrégats, modélisation, index, transactions et injection SQL.', ['NSI', 'BTS SIO', 'BUT Info']],
|
||||
['Python : variables, boucles et fonctions', 'Programmation', 10, '5 TD', 'Types, conditions, boucles, fonctions testées, fichiers CSV et gestion des erreurs.', ['SNT', 'NSI', 'BTS SIO']],
|
||||
['Binaire et hexadécimal', 'Programmation', 8, '6 TD', 'Bases 2 et 16, complément à deux, opérations bit à bit appliquées aux masques.', ['NSI', 'BTS CIEL']],
|
||||
['Le Web : HTTP, HTML, CSS et Apache', 'Web', 9, '4 TD', 'Requêtes et codes HTTP, structure HTML, mise en page CSS et serveur Apache.', ['SNT', 'NSI', 'BTS SIO']],
|
||||
['Cryptographie appliquée', 'Cybersécurité', 9, '4 TD', 'Hachage, stockage des mots de passe, chiffrement, certificats et SSH par clé.', ['BTS SIO', 'BUT Cyber', 'Master']]
|
||||
];
|
||||
const BANDS = [
|
||||
'radial-gradient(circle at 38% 20%, #ffffff 0 4%, #e9d5ff 12%, transparent 24%), radial-gradient(circle at 44% 70%, #f5d0fe 0 10%, transparent 26%), linear-gradient(110deg, #c7d2fe 0%, #ddd6fe 40%, #bae6fd 100%)',
|
||||
'radial-gradient(ellipse at 30% 110%, transparent 40%, #fde68a55 41% 43%, transparent 44%), radial-gradient(ellipse at 70% -20%, transparent 45%, #fbbf2433 46% 48%, transparent 49%), linear-gradient(110deg, #fef3c7, #ffedd5 60%, #fde2e4)',
|
||||
'radial-gradient(circle at 78% 55%, #ffffff 0 6%, #e5e7eb 16%, transparent 30%), linear-gradient(110deg, #99f6e4 0%, #c7d2fe 55%, #fbcfe8 100%)',
|
||||
'radial-gradient(ellipse at 45% 120%, #ff2ebf 0 12%, #a21caf 26%, transparent 46%), linear-gradient(110deg, #1e1b4b 0%, #3b0764 50%, #312e81 100%)',
|
||||
'repeating-linear-gradient(115deg, #7dd3fc 0 6px, #a5b4fc 6px 12px, transparent 12px 22px), linear-gradient(110deg, #4338ca, #6d28d9 60%, #1e40af)',
|
||||
'repeating-linear-gradient(100deg, #ffffff66 0 3px, transparent 3px 14px), linear-gradient(110deg, #bfdbfe, #dbeafe 50%, #c7d2fe)'
|
||||
];
|
||||
const TAGS = {
|
||||
'BTS SIO': ['#ede4ff', '#6d28d9'], 'BTS CIEL': ['#dcfce7', '#15803d'], 'BUT R&T': ['#fce7f3', '#be185d'], 'BUT Info': ['#fce7f3', '#be185d'],
|
||||
'BUT DevCloud': ['#dbeafe', '#1d4ed8'], 'BUT Cyber': ['#fce7f3', '#be185d'], 'SISR': ['#dcfce7', '#15803d'], 'TSSR': ['#ffedd5', '#c2410c'],
|
||||
'AIS': ['#ffedd5', '#c2410c'], 'SNT': ['#dcfce7', '#15803d'], 'NSI': ['#dbeafe', '#1d4ed8'], 'Master': ['#ffedd5', '#c2410c']
|
||||
};
|
||||
const btnBase = { display: 'grid', placeItems: 'center', width: 32, height: 32, border: 0, borderRadius: 6, cursor: 'pointer' };
|
||||
|
||||
class Component extends DCLogic {
|
||||
state = { cursus: 'Tous les cursus', theme: 'Tous les thèmes', q: '', vue: null };
|
||||
renderVals() {
|
||||
const vue = this.state.vue || this.props.vue || 'grille';
|
||||
const liste = vue === 'liste';
|
||||
const { cursus, theme, q } = this.state;
|
||||
const ql = q.trim().toLowerCase();
|
||||
const items = COURS.map((c, i) => [c, i]).filter(([c]) =>
|
||||
(cursus === 'Tous les cursus' || c[5].some(t => t.indexOf(cursus) === 0)) &&
|
||||
(theme === 'Tous les thèmes' || c[1] === theme) &&
|
||||
(!ql || (c[0] + ' ' + c[4]).toLowerCase().includes(ql))
|
||||
).map(([c, i]) => ({
|
||||
titre: c[0], parties: c[2], exos: c[3], desc: c[4],
|
||||
href: 'apercu-cours-fiche.html?chapitre=' + encodeURIComponent(c[0]),
|
||||
tags: c[5].map(t => { const col = TAGS[t] || ['#f1f2f5', '#374151']; return { label: t, style: { padding: '3px 8px', borderRadius: 4, background: col[0], color: col[1], fontSize: 10, fontWeight: 700 } }; }),
|
||||
bandStyle: liste
|
||||
? { width: 150, flexShrink: 0, background: BANDS[i % BANDS.length], borderRadius: '9px 0 0 9px' }
|
||||
: { height: 66, background: BANDS[i % BANDS.length], borderRadius: '9px 9px 0 0' }
|
||||
}));
|
||||
const set = k => e => this.setState({ [k]: e.target.value });
|
||||
const on = { ...btnBase, background: '#dbe6ff', color: '#1d4ed8' }, off = { ...btnBase, background: 'transparent', color: '#1d4ed8' };
|
||||
return {
|
||||
cursusList: ['Tous les cursus', 'SNT', 'NSI', 'BTS SIO', 'BTS CIEL', 'BUT R&T', 'BUT Info', 'BUT DevCloud', 'TSSR', 'AIS', 'Master'],
|
||||
themeList: ['Tous les thèmes', 'Réseaux', 'Systèmes', 'DevOps', 'Données', 'Programmation', 'Web', 'Cybersécurité'],
|
||||
cursus, theme, q, items, empty: items.length === 0,
|
||||
countLabel: items.length + ' cours',
|
||||
onCursus: set('cursus'), onTheme: set('theme'), onQ: e => this.setState({ q: e.target.value }),
|
||||
isGrid: !liste, isList: liste, gridBtn: liste ? off : on, listBtn: liste ? on : off,
|
||||
setGrid: () => this.setState({ vue: 'grille' }), setList: () => this.setState({ vue: 'liste' }),
|
||||
gridStyle: liste ? { display: 'grid', gap: 12 } : { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 12 },
|
||||
cardStyle: { display: 'flex', flexDirection: liste ? 'row' : 'column', border: '1px solid #e5e7eb', borderRadius: 10, background: '#fff', transition: 'box-shadow .15s' }
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue