1401 lines
42 KiB
HTML
1401 lines
42 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Cours IA - Gestion de Projet</title>
|
||
|
||
<!-- Tabler Icons CSS CDN -->
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
|
||
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');
|
||
|
||
:root {
|
||
/* Theme core colors (Indigo/Violet) */
|
||
--primary-hsl: 247, 80%, 62%;
|
||
--primary: hsl(var(--primary-hsl));
|
||
--primary-light: hsl(247, 85%, 96%);
|
||
--primary-dark: hsl(247, 80%, 35%);
|
||
|
||
/* Neutral colors - Clean & Premium Cool Grays */
|
||
--bg-primary: #f8fafc;
|
||
--bg-secondary: #ffffff;
|
||
--bg-tertiary: #f1f5f9;
|
||
|
||
--color-background-primary: var(--bg-secondary);
|
||
--color-background-secondary: var(--bg-primary);
|
||
--color-border-tertiary: #e2e8f0;
|
||
|
||
--color-text-primary: #0f172a;
|
||
--color-text-secondary: #475569;
|
||
--color-text-tertiary: #94a3b8;
|
||
|
||
--color-border-primary: #f1f5f9;
|
||
--color-border-secondary: #e2e8f0;
|
||
|
||
--border-radius-sm: 8px;
|
||
--border-radius-md: 14px;
|
||
--border-radius-lg: 18px;
|
||
|
||
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
|
||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
|
||
--shadow-lg: 0 12px 20px -3px rgba(0, 0, 0, 0.05), 0 4px 8px -4px rgba(0, 0, 0, 0.05);
|
||
|
||
/* Warning Accent (Amber) */
|
||
--color-a-bg: hsl(36, 85%, 96%);
|
||
--color-a-border: hsl(36, 80%, 88%);
|
||
--color-a-accent: hsl(36, 90%, 45%);
|
||
--color-a-dark: hsl(36, 95%, 22%);
|
||
|
||
/* Success Green (Emerald) */
|
||
--color-g-bg: hsl(162, 85%, 96%);
|
||
--color-g-border: hsl(162, 80%, 90%);
|
||
--color-g-accent: hsl(162, 75%, 34%);
|
||
--color-g-dark: hsl(162, 80%, 20%);
|
||
|
||
/* Danger Red */
|
||
--color-danger-bg: hsl(0, 85%, 96%);
|
||
--color-danger-border: hsl(0, 80%, 88%);
|
||
--color-danger-accent: hsl(0, 75%, 45%);
|
||
--color-danger-dark: hsl(0, 95%, 22%);
|
||
|
||
/* Typography */
|
||
--font-sans: 'DM Sans', sans-serif;
|
||
--font-heading: 'Nunito', sans-serif;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body {
|
||
background-color: var(--bg-primary);
|
||
color: var(--color-text-primary);
|
||
font-family: var(--font-sans);
|
||
transition: background-color 0.3s ease, color 0.3s ease;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 2.5rem 24px;
|
||
background-image:
|
||
radial-gradient(at 0% 0%, hsla(247, 80%, 62%, 0.04) 0px, transparent 50%),
|
||
radial-gradient(at 100% 0%, hsla(162, 75%, 34%, 0.01) 0px, transparent 50%),
|
||
radial-gradient(at 50% 100%, hsla(36, 90%, 45%, 0.02) 0px, transparent 50%);
|
||
background-attachment: fixed;
|
||
}
|
||
|
||
.slider-wrap {
|
||
max-width: 840px;
|
||
width: 100%;
|
||
font-family: var(--font-sans);
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-lg);
|
||
overflow: hidden;
|
||
position: relative;
|
||
user-select: none;
|
||
box-shadow: var(--shadow-lg);
|
||
transition: box-shadow 0.3s ease;
|
||
}
|
||
|
||
.progress-bar {
|
||
height: 4px;
|
||
background: var(--bg-tertiary);
|
||
position: relative;
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, var(--primary), var(--color-g-accent));
|
||
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
border-radius: 0 2px 2px 0;
|
||
}
|
||
|
||
.slide-counter {
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
color: var(--color-text-tertiary);
|
||
letter-spacing: 0.1em;
|
||
padding: 14px 24px 0;
|
||
font-family: var(--font-heading);
|
||
}
|
||
|
||
.slides-container {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.slide {
|
||
display: none;
|
||
padding: 24px 32px;
|
||
min-height: 540px;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
.slide.active {
|
||
display: flex;
|
||
}
|
||
|
||
.slide-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
padding: 5px 12px;
|
||
border-radius: 20px;
|
||
width: fit-content;
|
||
font-family: var(--font-heading);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.tag-intro {
|
||
background: var(--primary-light);
|
||
color: var(--primary);
|
||
border: 1px solid hsl(247, 85%, 90%);
|
||
}
|
||
|
||
.tag-outil {
|
||
background: var(--color-g-bg);
|
||
color: var(--color-g-accent);
|
||
border: 1px solid var(--color-g-border);
|
||
}
|
||
|
||
.tag-demo {
|
||
background: var(--color-a-bg);
|
||
color: var(--color-a-accent);
|
||
border: 1px solid var(--color-a-border);
|
||
}
|
||
|
||
.tag-collab {
|
||
background: hsl(271, 85%, 96%);
|
||
color: hsl(271, 80%, 45%);
|
||
border: 1px solid hsl(271, 80%, 90%);
|
||
}
|
||
|
||
.tag-pratique {
|
||
background: hsl(180, 85%, 96%);
|
||
color: hsl(180, 80%, 30%);
|
||
border: 1px solid hsl(180, 80%, 90%);
|
||
}
|
||
|
||
.tag-bilan {
|
||
background: var(--bg-tertiary);
|
||
color: var(--color-text-secondary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
}
|
||
|
||
.slide-title {
|
||
font-family: var(--font-heading);
|
||
font-size: 24px;
|
||
font-weight: 900;
|
||
color: var(--color-text-primary);
|
||
line-height: 1.25;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.slide-title span {
|
||
color: var(--primary);
|
||
}
|
||
|
||
.slide-subtitle {
|
||
font-size: 14px;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.6;
|
||
font-weight: 400;
|
||
}
|
||
|
||
/* Cards grid */
|
||
.cards-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||
gap: 12px;
|
||
flex: 1;
|
||
}
|
||
|
||
.info-card {
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-md);
|
||
padding: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: all 0.25s ease;
|
||
}
|
||
|
||
.info-card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.info-card .card-icon {
|
||
font-size: 24px;
|
||
color: var(--primary);
|
||
}
|
||
|
||
.info-card .card-icon.green {
|
||
color: var(--color-g-accent);
|
||
}
|
||
|
||
.info-card .card-icon.amber {
|
||
color: var(--color-a-accent);
|
||
}
|
||
|
||
.info-card .card-icon.purple {
|
||
color: hsl(271, 80%, 45%);
|
||
}
|
||
|
||
.info-card .card-title {
|
||
font-size: 13.5px;
|
||
font-weight: 800;
|
||
color: var(--color-text-primary);
|
||
font-family: var(--font-heading);
|
||
}
|
||
|
||
.info-card .card-desc {
|
||
font-size: 12px;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.5;
|
||
font-weight: 400;
|
||
}
|
||
|
||
/* Tool comparison */
|
||
.tool-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 12px 16px;
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-md);
|
||
background: var(--bg-secondary);
|
||
box-shadow: var(--shadow-sm);
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.tool-row:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.tool-icon {
|
||
font-size: 22px;
|
||
color: var(--primary);
|
||
width: 28px;
|
||
text-align: center;
|
||
}
|
||
|
||
.tool-icon.green {
|
||
color: var(--color-g-accent);
|
||
}
|
||
|
||
.tool-icon.amber {
|
||
color: var(--color-a-accent);
|
||
}
|
||
|
||
.tool-icon.purple {
|
||
color: hsl(271, 80%, 45%);
|
||
}
|
||
|
||
.tool-name {
|
||
font-size: 13.5px;
|
||
font-weight: 800;
|
||
color: var(--color-text-primary);
|
||
font-family: var(--font-heading);
|
||
}
|
||
|
||
.tool-tags {
|
||
display: flex;
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.tool-tag-pill {
|
||
font-size: 10px;
|
||
padding: 3px 8px;
|
||
border-radius: 12px;
|
||
font-weight: 600;
|
||
background: var(--bg-tertiary);
|
||
color: var(--color-text-secondary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
/* Prompt builder */
|
||
.prompt-builder {
|
||
background: var(--bg-tertiary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-md);
|
||
padding: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
box-shadow: var(--shadow-sm) inset;
|
||
}
|
||
|
||
.prompt-parts {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
.prompt-part {
|
||
padding: 6px 12px;
|
||
border-radius: 8px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
border: 1.5px solid transparent;
|
||
transition: all 0.2s ease;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.prompt-part.role {
|
||
background: var(--primary-light);
|
||
color: var(--primary);
|
||
border-color: hsl(247, 85%, 90%);
|
||
}
|
||
|
||
.prompt-part.contexte {
|
||
background: var(--color-g-bg);
|
||
color: var(--color-g-accent);
|
||
border-color: var(--color-g-border);
|
||
}
|
||
|
||
.prompt-part.tache {
|
||
background: var(--color-a-bg);
|
||
color: var(--color-a-accent);
|
||
border-color: var(--color-a-border);
|
||
}
|
||
|
||
.prompt-part.format {
|
||
background: hsl(271, 85%, 96%);
|
||
color: hsl(271, 80%, 45%);
|
||
border-color: hsl(271, 80%, 90%);
|
||
}
|
||
|
||
.prompt-part.selected {
|
||
transform: scale(1.04);
|
||
box-shadow: 0 0 0 2.5px currentColor;
|
||
}
|
||
|
||
.prompt-output {
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-md);
|
||
padding: 12px 16px;
|
||
font-size: 12.5px;
|
||
color: var(--color-text-primary);
|
||
line-height: 1.6;
|
||
min-height: 60px;
|
||
font-family: var(--font-sans);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.prompt-legend {
|
||
display: flex;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 11px;
|
||
color: var(--color-text-secondary);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.legend-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
/* Kanban */
|
||
.kanban-board {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 12px;
|
||
flex: 1;
|
||
}
|
||
|
||
.kanban-col {
|
||
background: var(--bg-tertiary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-md);
|
||
padding: 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
box-shadow: var(--shadow-sm) inset;
|
||
}
|
||
|
||
.kanban-header {
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
color: var(--color-text-secondary);
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-family: var(--font-heading);
|
||
}
|
||
|
||
.k-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.k-blue {
|
||
background: var(--primary);
|
||
}
|
||
|
||
.k-amber {
|
||
background: var(--color-a-accent);
|
||
}
|
||
|
||
.k-green {
|
||
background: var(--color-g-accent);
|
||
}
|
||
|
||
.kanban-card {
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-sm);
|
||
padding: 10px 12px;
|
||
font-size: 11.5px;
|
||
color: var(--color-text-primary);
|
||
line-height: 1.45;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.kanban-card:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.kanban-card .k-tag {
|
||
font-size: 10px;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
margin-top: 6px;
|
||
display: inline-block;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.k-ai-tag {
|
||
background: var(--primary-light);
|
||
color: var(--primary);
|
||
border: 1px solid hsl(247, 85%, 90%);
|
||
}
|
||
|
||
.k-warn {
|
||
background: var(--color-danger-bg);
|
||
color: var(--color-danger-accent);
|
||
border: 1px solid var(--color-danger-border);
|
||
}
|
||
|
||
/* Timeline */
|
||
.timeline {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
flex: 1;
|
||
}
|
||
|
||
.tl-item {
|
||
display: flex;
|
||
gap: 16px;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.tl-left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 32px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.tl-dot {
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
margin-top: 2px;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.tl-dot i {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.tl-dot.blue {
|
||
background: var(--primary-light);
|
||
color: var(--primary);
|
||
border: 1px solid hsl(247, 85%, 90%);
|
||
}
|
||
|
||
.tl-dot.green {
|
||
background: var(--color-g-bg);
|
||
color: var(--color-g-accent);
|
||
border: 1px solid var(--color-g-border);
|
||
}
|
||
|
||
.tl-dot.amber {
|
||
background: var(--color-a-bg);
|
||
color: var(--color-a-accent);
|
||
border: 1px solid var(--color-a-border);
|
||
}
|
||
|
||
.tl-dot.purple {
|
||
background: hsl(271, 85%, 96%);
|
||
color: hsl(271, 80%, 45%);
|
||
border: 1px solid hsl(271, 80%, 90%);
|
||
}
|
||
|
||
.tl-line {
|
||
flex: 1;
|
||
width: 2px;
|
||
background: var(--color-border-secondary);
|
||
margin: 4px auto;
|
||
}
|
||
|
||
.tl-content {
|
||
padding: 2px 0 20px;
|
||
flex: 1;
|
||
}
|
||
|
||
.tl-title {
|
||
font-size: 13.5px;
|
||
font-weight: 800;
|
||
color: var(--color-text-primary);
|
||
font-family: var(--font-heading);
|
||
}
|
||
|
||
.tl-desc {
|
||
font-size: 12px;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.5;
|
||
margin-top: 3px;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.tl-ai {
|
||
font-size: 10.5px;
|
||
color: var(--primary);
|
||
margin-top: 4px;
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
/* Impact grid */
|
||
.impact-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
flex: 1;
|
||
}
|
||
|
||
.impact-card {
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-md);
|
||
padding: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: all 0.25s ease;
|
||
}
|
||
|
||
.impact-card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.impact-num {
|
||
font-family: var(--font-heading);
|
||
font-size: 32px;
|
||
font-weight: 900;
|
||
color: var(--primary);
|
||
line-height: 1;
|
||
}
|
||
|
||
.impact-num.green {
|
||
color: var(--color-g-accent);
|
||
}
|
||
|
||
.impact-num.amber {
|
||
color: var(--color-a-accent);
|
||
}
|
||
|
||
.impact-num.purple {
|
||
color: hsl(271, 80%, 45%);
|
||
}
|
||
|
||
.impact-label {
|
||
font-size: 12.5px;
|
||
color: var(--color-text-primary);
|
||
font-weight: 800;
|
||
font-family: var(--font-heading);
|
||
}
|
||
|
||
.impact-sub {
|
||
font-size: 11px;
|
||
color: var(--color-text-secondary);
|
||
font-weight: 400;
|
||
}
|
||
|
||
/* Chat demo */
|
||
.chat-demo {
|
||
background: var(--bg-tertiary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-md);
|
||
padding: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
flex: 1;
|
||
box-shadow: var(--shadow-sm) inset;
|
||
}
|
||
|
||
.chat-label {
|
||
font-size: 11px;
|
||
color: var(--color-text-tertiary);
|
||
font-weight: 800;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 2px;
|
||
font-family: var(--font-heading);
|
||
}
|
||
|
||
.chat-msg {
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.chat-msg.user {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.avatar {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
flex-shrink: 0;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.avatar.ai {
|
||
background: var(--primary-light);
|
||
color: var(--primary);
|
||
border: 1px solid hsl(247, 85%, 90%);
|
||
font-size: 16px;
|
||
}
|
||
|
||
.avatar.user-av {
|
||
background: hsl(271, 85%, 96%);
|
||
color: hsl(271, 80%, 45%);
|
||
border: 1px solid hsl(271, 80%, 90%);
|
||
}
|
||
|
||
.bubble {
|
||
font-size: 12px;
|
||
line-height: 1.55;
|
||
padding: 10px 14px;
|
||
border-radius: 14px;
|
||
max-width: 85%;
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.bubble.ai-bubble {
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.bubble.user-bubble {
|
||
background: var(--primary-light);
|
||
color: var(--primary-dark);
|
||
border: 1px solid hsl(247, 80%, 90%);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.bubble strong {
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* Nav */
|
||
.nav-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px 24px;
|
||
border-top: 1px solid var(--color-border-secondary);
|
||
background: var(--bg-tertiary);
|
||
}
|
||
|
||
.nav-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
color: var(--color-text-secondary);
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-md);
|
||
padding: 8px 16px;
|
||
cursor: pointer;
|
||
font-family: var(--font-heading);
|
||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.nav-btn:hover:not(:disabled) {
|
||
background: var(--bg-tertiary);
|
||
color: var(--color-text-primary);
|
||
transform: translateY(-1px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.nav-btn:disabled {
|
||
opacity: 0.4;
|
||
cursor: default;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.nav-btn.primary {
|
||
background: var(--primary);
|
||
color: white;
|
||
border-color: var(--primary);
|
||
}
|
||
|
||
.nav-btn.primary:hover:not(:disabled) {
|
||
background: var(--primary-dark);
|
||
border-color: var(--primary-dark);
|
||
box-shadow: 0 4px 8px hsla(247, 80%, 62%, 0.25);
|
||
}
|
||
|
||
.dots {
|
||
display: flex;
|
||
gap: 6px;
|
||
align-items: center;
|
||
}
|
||
|
||
.dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: var(--color-border-secondary);
|
||
cursor: pointer;
|
||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.dot.active {
|
||
background: var(--primary);
|
||
width: 20px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.two-col {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
flex: 1;
|
||
}
|
||
|
||
.col-panel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.section-label {
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
color: var(--color-text-tertiary);
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 2px;
|
||
font-family: var(--font-heading);
|
||
}
|
||
|
||
.highlight-box {
|
||
background: var(--primary-light);
|
||
border: 1px solid hsl(247, 85%, 90%);
|
||
border-radius: var(--border-radius-md);
|
||
padding: 14px 16px;
|
||
font-size: 12.5px;
|
||
color: var(--primary-dark);
|
||
line-height: 1.6;
|
||
font-weight: 400;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.highlight-box.green {
|
||
background: var(--color-g-bg);
|
||
border-color: var(--color-g-border);
|
||
color: var(--color-g-dark);
|
||
}
|
||
|
||
.highlight-box.amber {
|
||
background: var(--color-a-bg);
|
||
border-color: var(--color-a-border);
|
||
color: var(--color-a-dark);
|
||
}
|
||
|
||
.divider {
|
||
height: 1px;
|
||
background: var(--color-border-secondary);
|
||
margin: 8px 0;
|
||
}
|
||
|
||
.interactive-label {
|
||
font-size: 11px;
|
||
color: var(--color-text-tertiary);
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
font-weight: 800;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-family: var(--font-heading);
|
||
}
|
||
|
||
.sr-only {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
padding: 0;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
clip: rect(0, 0, 0, 0);
|
||
white-space: nowrap;
|
||
border: 0;
|
||
}
|
||
|
||
/* Responsive style */
|
||
@media (max-width: 768px) {
|
||
body {
|
||
padding: 1.5rem 12px;
|
||
}
|
||
.slide {
|
||
padding: 20px 20px 16px;
|
||
min-height: auto;
|
||
}
|
||
.kanban-board {
|
||
grid-template-columns: 1fr;
|
||
gap: 10px;
|
||
}
|
||
.two-col {
|
||
grid-template-columns: 1fr;
|
||
gap: 16px;
|
||
}
|
||
.impact-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 10px;
|
||
}
|
||
.nav-bar {
|
||
padding: 14px 16px;
|
||
}
|
||
.nav-btn {
|
||
padding: 6px 12px;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<h2 class="sr-only">Cours interactif : S'organiser dans son suivi de projet grâce à l'IA — 7 slides pédagogiques avec
|
||
démos</h2>
|
||
|
||
<div class="slider-wrap">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" id="progressFill" style="width: 14.28%"></div>
|
||
</div>
|
||
<div class="slide-counter" id="slideCounter">01 / 07</div>
|
||
|
||
<div class="slides-container">
|
||
|
||
<!-- SLIDE 1 : Introduction -->
|
||
<div class="slide active" id="slide-0">
|
||
<span class="slide-tag tag-intro"><i class="ti ti-sparkles" aria-hidden="true"></i>Introduction</span>
|
||
<div>
|
||
<div class="slide-title">L'IA au service de votre <span>gestion de projet</span></div>
|
||
<div class="slide-subtitle" style="margin-top:8px;">De la planification au bilan, l'intelligence artificielle
|
||
transforme chaque étape du suivi de projet. Découvrez comment l'intégrer concrètement.</div>
|
||
</div>
|
||
<div class="cards-grid" style="grid-template-columns: repeat(2, 1fr);">
|
||
<div class="info-card">
|
||
<i class="ti ti-brain card-icon" aria-hidden="true"></i>
|
||
<div class="card-title">Gain de temps</div>
|
||
<div class="card-desc">Automatiser les tâches répétitives : comptes-rendus, synthèses, relances</div>
|
||
</div>
|
||
<div class="info-card">
|
||
<i class="ti ti-chart-line card-icon green" aria-hidden="true"></i>
|
||
<div class="card-title">Meilleure visibilité</div>
|
||
<div class="card-desc">Tableaux de bord intelligents et alertes prédictives sur les risques</div>
|
||
</div>
|
||
<div class="info-card">
|
||
<i class="ti ti-users card-icon amber" aria-hidden="true"></i>
|
||
<div class="card-title">Collaboration fluide</div>
|
||
<div class="card-desc">Synthèses automatiques, partage de contexte et traduction d'équipe</div>
|
||
</div>
|
||
<div class="info-card">
|
||
<i class="ti ti-checklist card-icon purple" aria-hidden="true"></i>
|
||
<div class="card-title">Décisions éclairées</div>
|
||
<div class="card-desc">Analyse des données projet et suggestions d'arbitrage basées sur les faits</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight-box">
|
||
<strong>Au programme :</strong> Outils IA, structurer vos prompts, automatiser le suivi, générer des
|
||
reportings
|
||
et collaborer avec l'IA comme copilote de projet.
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SLIDE 2 : Panorama des outils -->
|
||
<div class="slide" id="slide-1">
|
||
<span class="slide-tag tag-outil"><i class="ti ti-tool" aria-hidden="true"></i>Outils</span>
|
||
<div>
|
||
<div class="slide-title">Panorama des outils <span>IA</span> pour le projet</div>
|
||
<div class="slide-subtitle" style="margin-top:6px;">Chaque outil a sa spécialité. L'essentiel est de choisir
|
||
celui adapté à votre besoin du moment.</div>
|
||
</div>
|
||
<div class="col-panel">
|
||
<div class="tool-row">
|
||
<i class="ti ti-message-chatbot tool-icon" aria-hidden="true"></i>
|
||
<div>
|
||
<div class="tool-name">Assistants conversationnels</div>
|
||
<div style="font-size:11px; color:var(--color-text-secondary); margin-top:2px;">Claude, ChatGPT, Gemini
|
||
</div>
|
||
</div>
|
||
<div class="tool-tags">
|
||
<span class="tool-tag-pill">Rédaction</span>
|
||
<span class="tool-tag-pill">Synthèse</span>
|
||
<span class="tool-tag-pill">Analyse</span>
|
||
</div>
|
||
</div>
|
||
<div class="tool-row">
|
||
<i class="ti ti-table tool-icon green" aria-hidden="true"></i>
|
||
<div>
|
||
<div class="tool-name">Gestion de projet IA</div>
|
||
<div style="font-size:11px; color:var(--color-text-secondary); margin-top:2px;">Notion AI, ClickUp AI,
|
||
Monday AI</div>
|
||
</div>
|
||
<div class="tool-tags">
|
||
<span class="tool-tag-pill">Planification</span>
|
||
<span class="tool-tag-pill">Kanban</span>
|
||
</div>
|
||
</div>
|
||
<div class="tool-row">
|
||
<i class="ti ti-microphone tool-icon amber" aria-hidden="true"></i>
|
||
<div>
|
||
<div class="tool-name">Transcription & réunion</div>
|
||
<div style="font-size:11px; color:var(--color-text-secondary); margin-top:2px;">Otter.ai, Fireflies, Tl;dv
|
||
</div>
|
||
</div>
|
||
<div class="tool-tags">
|
||
<span class="tool-tag-pill">CR auto</span>
|
||
<span class="tool-tag-pill">Action items</span>
|
||
</div>
|
||
</div>
|
||
<div class="tool-row">
|
||
<i class="ti ti-robot tool-icon purple" aria-hidden="true"></i>
|
||
<div>
|
||
<div class="tool-name">Automatisation IA</div>
|
||
<div style="font-size:11px; color:var(--color-text-secondary); margin-top:2px;">Zapier AI, Make + IA, n8n
|
||
</div>
|
||
</div>
|
||
<div class="tool-tags">
|
||
<span class="tool-tag-pill">Workflows</span>
|
||
<span class="tool-tag-pill">Alertes</span>
|
||
</div>
|
||
</div>
|
||
<div class="tool-row">
|
||
<i class="ti ti-chart-pie tool-icon" aria-hidden="true"></i>
|
||
<div>
|
||
<div class="tool-name">Reporting intelligent</div>
|
||
<div style="font-size:11px; color:var(--color-text-secondary); margin-top:2px;">Power BI Copilot, Looker,
|
||
Tableau AI</div>
|
||
</div>
|
||
<div class="tool-tags">
|
||
<span class="tool-tag-pill">Dashboard</span>
|
||
<span class="tool-tag-pill">Prédictif</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight-box green">
|
||
<strong>Conseil :</strong> Commencez par un seul assistant conversationnel. Maîtrisez-le avant d'ajouter
|
||
d'autres outils à votre stack.
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SLIDE 3 : L'art du prompt -->
|
||
<div class="slide" id="slide-2">
|
||
<span class="slide-tag tag-demo"><i class="ti ti-terminal" aria-hidden="true"></i>Démo interactive</span>
|
||
<div>
|
||
<div class="slide-title">Structurer votre <span>prompt</span> efficacement</div>
|
||
<div class="slide-subtitle" style="margin-top:6px;">Un bon prompt = un bon résultat. Cliquez sur les blocs
|
||
pour
|
||
construire votre prompt projet idéal.</div>
|
||
</div>
|
||
|
||
<div class="prompt-builder">
|
||
<div class="interactive-label"><i class="ti ti-pointer" aria-hidden="true"></i>Cliquez les blocs pour les
|
||
combiner</div>
|
||
<div class="prompt-parts" id="promptParts">
|
||
<span class="prompt-part role" data-type="role" data-text="Tu es un chef de projet expérimenté."
|
||
onclick="togglePromptPart(this)">Rôle : Chef de projet</span>
|
||
<span class="prompt-part contexte" data-type="contexte"
|
||
data-text="Le projet a 3 semaines de retard et 2 livrables bloqués."
|
||
onclick="togglePromptPart(this)">Contexte : Projet en retard</span>
|
||
<span class="prompt-part tache" data-type="tache"
|
||
data-text="Propose un plan de rattrapage en 5 actions prioritaires."
|
||
onclick="togglePromptPart(this)">Tâche
|
||
: Plan de rattrapage</span>
|
||
<span class="prompt-part format" data-type="format"
|
||
data-text="Réponds avec un tableau : action / responsable / délai."
|
||
onclick="togglePromptPart(this)">Format
|
||
: Tableau structuré</span>
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div class="section-label">Prompt généré</div>
|
||
<div class="prompt-output" id="promptOutput">Cliquez sur les blocs ci-dessus pour construire votre prompt…
|
||
</div>
|
||
<div class="prompt-legend">
|
||
<div class="legend-item">
|
||
<div class="legend-dot" style="background:#185FA5;"></div>Rôle
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-dot" style="background:#3B6D11;"></div>Contexte
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-dot" style="background:#854F0B;"></div>Tâche
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-dot" style="background:#3C3489;"></div>Format
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight-box amber">
|
||
<strong>Méthode RCTF :</strong> Rôle → Contexte → Tâche → Format. Ces 4 éléments dans votre prompt multiplient
|
||
la qualité de la réponse IA par 3 en moyenne.
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SLIDE 4 : Suivi Kanban IA -->
|
||
<div class="slide" id="slide-3">
|
||
<span class="slide-tag tag-demo"><i class="ti ti-layout-kanban" aria-hidden="true"></i>Démo</span>
|
||
<div>
|
||
<div class="slide-title">Tableau Kanban <span>assisté par IA</span></div>
|
||
<div class="slide-subtitle" style="margin-top:6px;">L'IA peut analyser l'état de votre board, détecter les
|
||
blocages et suggérer des réaffectations automatiquement.</div>
|
||
</div>
|
||
<div class="kanban-board">
|
||
<div class="kanban-col">
|
||
<div class="kanban-header">
|
||
<div class="k-dot k-blue"></div>À faire
|
||
</div>
|
||
<div class="kanban-card">
|
||
Brief client — V2
|
||
<div><span class="k-tag k-ai-tag">IA : priorité haute</span></div>
|
||
</div>
|
||
<div class="kanban-card">
|
||
Revue design sprint 4
|
||
<div><span class="k-tag"
|
||
style="background:var(--color-background-secondary); color:var(--color-text-secondary); font-size:10px; padding:1px 6px; border-radius:4px; display:inline-block; margin-top:4px;">Cette
|
||
semaine</span></div>
|
||
</div>
|
||
<div class="kanban-card">Onboarding partenaire</div>
|
||
</div>
|
||
<div class="kanban-col">
|
||
<div class="kanban-header">
|
||
<div class="k-dot k-amber"></div>En cours
|
||
</div>
|
||
<div class="kanban-card">
|
||
Intégration API paiement
|
||
<div><span class="k-tag k-warn">Bloqué — 3j</span></div>
|
||
</div>
|
||
<div class="kanban-card">
|
||
Rédaction cahier des charges
|
||
<div><span class="k-tag k-ai-tag">IA : draft généré</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="kanban-col">
|
||
<div class="kanban-header">
|
||
<div class="k-dot k-green"></div>Terminé
|
||
</div>
|
||
<div class="kanban-card">
|
||
Maquettes validées
|
||
<div><span class="k-tag"
|
||
style="background:#EAF3DE; color:#3B6D11; font-size:10px; padding:1px 6px; border-radius:4px; display:inline-block; margin-top:4px;">J-2</span>
|
||
</div>
|
||
</div>
|
||
<div class="kanban-card">Audit sécurité</div>
|
||
<div class="kanban-card">Formation équipe IA</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight-box">
|
||
<strong>Analyse IA détectée :</strong> "Intégration API bloquée depuis 3 jours — suggère de réaffecter Thomas
|
||
depuis 'Onboarding partenaire' pour débloquer avant vendredi."
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SLIDE 5 : Compte-rendu IA -->
|
||
<div class="slide" id="slide-4">
|
||
<span class="slide-tag tag-demo"><i class="ti ti-file-text" aria-hidden="true"></i>Démo</span>
|
||
<div>
|
||
<div class="slide-title">Générer un compte-rendu <span>en 30 secondes</span></div>
|
||
<div class="slide-subtitle" style="margin-top:6px;">Collez vos notes brutes de réunion — l'IA produit un
|
||
compte-rendu structuré, les décisions clés et les actions à suivre.</div>
|
||
</div>
|
||
<div class="two-col" style="flex:1;">
|
||
<div class="col-panel">
|
||
<div class="section-label">Notes brutes (entrée)</div>
|
||
<div class="chat-demo" style="flex:1;">
|
||
<div class="chat-msg user">
|
||
<div class="avatar user-av">S</div>
|
||
<div class="bubble user-bubble">
|
||
Notes réunion 5 juin : retard API 3 jours, Paul sur autre projet, deadline 15 juin, client relancé 2
|
||
fois, budget ok, design validé, besoin débrief équipe lundi
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-panel">
|
||
<div class="section-label">Compte-rendu IA (sortie)</div>
|
||
<div class="chat-demo" style="flex:1;">
|
||
<div class="chat-msg">
|
||
<div class="avatar ai"><i class="ti ti-robot" aria-hidden="true"></i></div>
|
||
<div class="bubble ai-bubble">
|
||
<strong>CR Réunion — 5 juin</strong><br><br>
|
||
<strong>Décisions :</strong><br>
|
||
• Deadline maintenue au 15 juin<br>
|
||
• Budget validé, design approuvé<br><br>
|
||
<strong>Risques :</strong><br>
|
||
• API : retard 3j — Paul indisponible<br>
|
||
• Client relancé 2x sans réponse<br><br>
|
||
<strong>Actions :</strong><br>
|
||
• Réaffecter ressource API d'ici vendredi<br>
|
||
• Débrief équipe — lundi matin
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SLIDE 6 : Workflow automatisé -->
|
||
<div class="slide" id="slide-5">
|
||
<span class="slide-tag tag-pratique"><i class="ti ti-circuit-board" aria-hidden="true"></i>Automatisation</span>
|
||
<div>
|
||
<div class="slide-title">Votre <span>workflow IA</span> de suivi projet</div>
|
||
<div class="slide-subtitle" style="margin-top:6px;">Automatisez la chaîne complète : de la réunion au
|
||
reporting,
|
||
en passant par les relances et les mises à jour.</div>
|
||
</div>
|
||
<div class="timeline">
|
||
<div class="tl-item">
|
||
<div class="tl-left">
|
||
<div class="tl-dot blue"><i class="ti ti-microphone" aria-hidden="true"></i></div>
|
||
<div class="tl-line"></div>
|
||
</div>
|
||
<div class="tl-content">
|
||
<div class="tl-title">Réunion projet</div>
|
||
<div class="tl-desc">Otter.ai / Fireflies transcrit automatiquement la réunion en temps réel</div>
|
||
<div class="tl-ai"><i class="ti ti-robot" aria-hidden="true"></i> Transcription + résumé auto en fin de
|
||
call
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tl-item">
|
||
<div class="tl-left">
|
||
<div class="tl-dot amber"><i class="ti ti-file-description" aria-hidden="true"></i></div>
|
||
<div class="tl-line"></div>
|
||
</div>
|
||
<div class="tl-content">
|
||
<div class="tl-title">Génération du compte-rendu</div>
|
||
<div class="tl-desc">Claude / ChatGPT structure les notes brutes en CR décisionnel avec actions</div>
|
||
<div class="tl-ai"><i class="ti ti-robot" aria-hidden="true"></i> Format personnalisable : décisions,
|
||
risques, tâches</div>
|
||
</div>
|
||
</div>
|
||
<div class="tl-item">
|
||
<div class="tl-left">
|
||
<div class="tl-dot green"><i class="ti ti-refresh" aria-hidden="true"></i></div>
|
||
<div class="tl-line"></div>
|
||
</div>
|
||
<div class="tl-content">
|
||
<div class="tl-title">Mise à jour du suivi</div>
|
||
<div class="tl-desc">Make / Zapier injecte automatiquement les tâches dans Notion, Trello ou Jira</div>
|
||
<div class="tl-ai"><i class="ti ti-robot" aria-hidden="true"></i> Détection des doublons et mise à jour
|
||
des
|
||
statuts</div>
|
||
</div>
|
||
</div>
|
||
<div class="tl-item">
|
||
<div class="tl-left">
|
||
<div class="tl-dot purple"><i class="ti ti-mail" aria-hidden="true"></i></div>
|
||
<div class="tl-line"></div>
|
||
</div>
|
||
<div class="tl-content">
|
||
<div class="tl-title">Relances & alertes</div>
|
||
<div class="tl-desc">L'IA détecte les tâches en retard et génère des relances personnalisées</div>
|
||
<div class="tl-ai"><i class="ti ti-robot" aria-hidden="true"></i> Ton adapté selon le profil du
|
||
destinataire
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SLIDE 7 : Bilan et impact -->
|
||
<div class="slide" id="slide-6">
|
||
<span class="slide-tag tag-bilan"><i class="ti ti-award" aria-hidden="true"></i>Bilan</span>
|
||
<div>
|
||
<div class="slide-title">L'<span>impact réel</span> de l'IA sur vos projets</div>
|
||
<div class="slide-subtitle" style="margin-top:6px;">Ce que les équipes qui ont adopté l'IA dans leur suivi de
|
||
projet constatent en moyenne après 3 mois.</div>
|
||
</div>
|
||
<div class="impact-grid">
|
||
<div class="impact-card">
|
||
<div class="impact-num">−60%</div>
|
||
<div class="impact-label">Temps de rédaction</div>
|
||
<div class="impact-sub">CR, rapports, synthèses générés par IA</div>
|
||
</div>
|
||
<div class="impact-card">
|
||
<div class="impact-num green">+35%</div>
|
||
<div class="impact-label">Réactivité équipe</div>
|
||
<div class="impact-sub">Alertes automatiques sur blocages et retards</div>
|
||
</div>
|
||
<div class="impact-card">
|
||
<div class="impact-num amber">−40%</div>
|
||
<div class="impact-label">Réunions de suivi</div>
|
||
<div class="impact-sub">Reportings automatiques remplacent les points</div>
|
||
</div>
|
||
<div class="impact-card">
|
||
<div class="impact-num purple">×2.5</div>
|
||
<div class="impact-label">Qualité des décisions</div>
|
||
<div class="impact-sub">Données centralisées et analyse en temps réel</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight-box green" style="margin-top:4px;">
|
||
<strong>Pour démarrer :</strong> Choisissez UN processus (le compte-rendu de réunion), testez-le avec Claude
|
||
ou
|
||
ChatGPT cette semaine, puis mesurez le temps gagné. Itérez ensuite.
|
||
</div>
|
||
<div style="text-align:center; margin-top:4px;">
|
||
<button class="nav-btn primary"
|
||
onclick="window.location.href='prompt.html'">
|
||
Obtenir mes templates de prompts ↗
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="nav-bar">
|
||
<button class="nav-btn" id="prevBtn" onclick="changeSlide(-1)" disabled>
|
||
<i class="ti ti-arrow-left" aria-hidden="true"></i> Précédent
|
||
</button>
|
||
<div class="dots" id="dots"></div>
|
||
<button class="nav-btn primary" id="nextBtn" onclick="changeSlide(1)">
|
||
Suivant <i class="ti ti-arrow-right" aria-hidden="true"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const totalSlides = 7;
|
||
let current = 0;
|
||
|
||
const dotsContainer = document.getElementById('dots');
|
||
for (let i = 0; i < totalSlides; i++) {
|
||
const d = document.createElement('div');
|
||
d.className = 'dot' + (i === 0 ? ' active' : '');
|
||
d.onclick = () => goTo(i);
|
||
dotsContainer.appendChild(d);
|
||
}
|
||
|
||
function goTo(idx) {
|
||
document.getElementById('slide-' + current).classList.remove('active');
|
||
current = idx;
|
||
document.getElementById('slide-' + current).classList.add('active');
|
||
document.querySelectorAll('.dot').forEach((d, i) => d.classList.toggle('active', i === current));
|
||
document.getElementById('prevBtn').disabled = current === 0;
|
||
const nextBtn = document.getElementById('nextBtn');
|
||
if (current === totalSlides - 1) {
|
||
nextBtn.disabled = true;
|
||
nextBtn.textContent = 'Fin du cours';
|
||
} else {
|
||
nextBtn.disabled = false;
|
||
nextBtn.innerHTML = 'Suivant <i class="ti ti-arrow-right" aria-hidden="true"></i>';
|
||
}
|
||
const pct = ((current + 1) / totalSlides * 100).toFixed(0);
|
||
document.getElementById('progressFill').style.width = pct + '%';
|
||
const n = String(current + 1).padStart(2, '0');
|
||
const t = String(totalSlides).padStart(2, '0');
|
||
document.getElementById('slideCounter').textContent = n + ' / ' + t;
|
||
}
|
||
|
||
function changeSlide(dir) {
|
||
const next = current + dir;
|
||
if (next >= 0 && next < totalSlides) goTo(next);
|
||
}
|
||
|
||
// Prompt builder
|
||
const selected = {};
|
||
const parts = { role: '', contexte: '', tache: '', format: '' };
|
||
|
||
function togglePromptPart(el) {
|
||
const type = el.dataset.type;
|
||
const text = el.dataset.text;
|
||
if (el.classList.contains('selected')) {
|
||
el.classList.remove('selected');
|
||
parts[type] = '';
|
||
} else {
|
||
el.classList.add('selected');
|
||
parts[type] = text;
|
||
}
|
||
const combined = [parts.role, parts.contexte, parts.tache, parts.format].filter(Boolean).join(' ');
|
||
document.getElementById('promptOutput').textContent = combined || 'Cliquez sur les blocs ci-dessus pour construire votre prompt…';
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html> |