Téléverser les fichiers vers "/"
This commit is contained in:
parent
1d46f37f48
commit
ed42a24afe
120
index.html
120
index.html
@ -5,41 +5,41 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>IA & Gestion de projet — Cours interactif 1h</title>
|
<title>IA & Gestion de projet — Cours interactif 1h</title>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&family=Lato:wght@400;700;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||||
<style>
|
<style>
|
||||||
:root{
|
:root{
|
||||||
--paper:#faf6ef;
|
--paper:#F4F4FB;
|
||||||
--paper-2:#f3ecdf;
|
--paper-2:#F0F0F8;
|
||||||
--paper-3:#ece3d2;
|
--paper-3:#E8E8F4;
|
||||||
--card:#fffdf8;
|
--card:#FFFFFF;
|
||||||
--ink:#1c1914;
|
--ink:#1E1E2E;
|
||||||
--ink-2:#4a443a;
|
--ink-2:#4B5563;
|
||||||
--ink-3:#8a8273;
|
--ink-3:#9CA3AF;
|
||||||
--line:#e3d9c6;
|
--line:#E0E0EF;
|
||||||
--line-2:#d4c8b0;
|
--line-2:#D1D5DB;
|
||||||
--amber:#d97706;
|
--amber:#5B4FE8;
|
||||||
--amber-dark:#92400e;
|
--amber-dark:#3730A3;
|
||||||
--amber-bg:#fdf3e3;
|
--amber-bg:#EEF0FB;
|
||||||
--amber-line:#f0d9b0;
|
--amber-line:#C7C9F0;
|
||||||
--green:#15803d;
|
--green:#65A30D;
|
||||||
--green-bg:#ecf7ec;
|
--green-bg:#F0F9E8;
|
||||||
--green-line:#c9e6c9;
|
--green-line:#CCEAAA;
|
||||||
--red:#b91c1c;
|
--red:#B91C1C;
|
||||||
--red-bg:#fdeeee;
|
--red-bg:#FEE2E2;
|
||||||
--red-line:#f3cfcf;
|
--red-line:#FECACA;
|
||||||
--blue:#1d4ed8;
|
--blue:#6366F1;
|
||||||
--blue-bg:#edf2fd;
|
--blue-bg:#EEF2FF;
|
||||||
--blue-line:#cdd9f5;
|
--blue-line:#C7D2FE;
|
||||||
--violet:#6d28d9;
|
--violet:#60A5FA;
|
||||||
--violet-bg:#f3eefc;
|
--violet-bg:#EFF6FF;
|
||||||
--violet-line:#ddd0f2;
|
--violet-line:#BFDBFE;
|
||||||
--serif:'Source Serif 4', Georgia, serif;
|
--serif:'Plus Jakarta Sans', 'Inter', sans-serif;
|
||||||
--sans:'Lato', sans-serif;
|
--sans:'Inter', 'Plus Jakarta Sans', sans-serif;
|
||||||
--mono:'IBM Plex Mono', monospace;
|
--mono:'IBM Plex Mono', monospace;
|
||||||
--r-sm:6px; --r-md:12px; --r-lg:18px;
|
--r-sm:6px; --r-md:12px; --r-lg:18px;
|
||||||
--sh-sm:0 1px 2px rgba(28,25,20,.06);
|
--sh-sm:0 1px 2px rgba(30,30,46,.05);
|
||||||
--sh-md:0 4px 14px rgba(28,25,20,.08);
|
--sh-md:0 4px 14px rgba(30,30,46,.07);
|
||||||
--sh-lg:0 16px 40px rgba(28,25,20,.12);
|
--sh-lg:0 16px 40px rgba(30,30,46,.10);
|
||||||
}
|
}
|
||||||
*{box-sizing:border-box;margin:0;padding:0}
|
*{box-sizing:border-box;margin:0;padding:0}
|
||||||
html{scroll-behavior:smooth}
|
html{scroll-behavior:smooth}
|
||||||
@ -51,8 +51,8 @@ body{
|
|||||||
line-height:1.55;
|
line-height:1.55;
|
||||||
min-height:100vh;
|
min-height:100vh;
|
||||||
background-image:
|
background-image:
|
||||||
radial-gradient(at 8% -10%, rgba(217,119,6,.07) 0, transparent 45%),
|
radial-gradient(at 8% -10%, rgba(91,79,232,.07) 0, transparent 45%),
|
||||||
radial-gradient(at 95% 110%, rgba(109,40,217,.05) 0, transparent 40%);
|
radial-gradient(at 95% 110%, rgba(55,48,163,.05) 0, transparent 40%);
|
||||||
background-attachment:fixed;
|
background-attachment:fixed;
|
||||||
}
|
}
|
||||||
body::before{
|
body::before{
|
||||||
@ -93,7 +93,7 @@ body::before{
|
|||||||
.xp-pill.bump{transform:scale(1.15)}
|
.xp-pill.bump{transform:scale(1.15)}
|
||||||
.xp-pill .coin{
|
.xp-pill .coin{
|
||||||
width:22px;height:22px;border-radius:50%;
|
width:22px;height:22px;border-radius:50%;
|
||||||
background:radial-gradient(circle at 35% 30%, #fbbf24, var(--amber) 70%);
|
background:radial-gradient(circle at 35% 30%, #A5B4FC, var(--amber) 70%);
|
||||||
display:grid;place-items:center;font-size:11px;color:#fff;font-weight:900;
|
display:grid;place-items:center;font-size:11px;color:#fff;font-weight:900;
|
||||||
box-shadow:0 1px 3px rgba(0,0,0,.3);
|
box-shadow:0 1px 3px rgba(0,0,0,.3);
|
||||||
}
|
}
|
||||||
@ -123,7 +123,7 @@ body::before{
|
|||||||
|
|
||||||
/* progress rail */
|
/* progress rail */
|
||||||
.rail{height:4px;background:var(--paper-3)}
|
.rail{height:4px;background:var(--paper-3)}
|
||||||
.rail-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--amber),#f59e0b);transition:width .5s ease;border-radius:0 3px 3px 0}
|
.rail-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--amber),#818CF8);transition:width .5s ease;border-radius:0 3px 3px 0}
|
||||||
|
|
||||||
/* ============ LAYOUT ============ */
|
/* ============ LAYOUT ============ */
|
||||||
.stage{max-width:1060px;margin:0 auto;padding:28px 24px 120px;position:relative;z-index:1}
|
.stage{max-width:1060px;margin:0 auto;padding:28px 24px 120px;position:relative;z-index:1}
|
||||||
@ -213,7 +213,7 @@ h3.sub{font-family:var(--serif);font-size:20px;font-weight:700;margin:26px 0 12p
|
|||||||
}
|
}
|
||||||
.toast.show{transform:none}
|
.toast.show{transform:none}
|
||||||
.toast .t-ico{font-size:20px}
|
.toast .t-ico{font-size:20px}
|
||||||
.toast small{display:block;font-weight:400;font-size:12px;color:#cfc8ba}
|
.toast small{display:block;font-weight:400;font-size:12px;color:#BBBBD4}
|
||||||
|
|
||||||
/* ============ SLIDE 0 : COVER ============ */
|
/* ============ SLIDE 0 : COVER ============ */
|
||||||
.cover{display:grid;grid-template-columns:1.25fr .9fr;gap:40px;align-items:center;min-height:62vh}
|
.cover{display:grid;grid-template-columns:1.25fr .9fr;gap:40px;align-items:center;min-height:62vh}
|
||||||
@ -224,7 +224,7 @@ h3.sub{font-family:var(--serif);font-size:20px;font-weight:700;margin:26px 0 12p
|
|||||||
.cstat span{font-size:12.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:1px;font-weight:700}
|
.cstat span{font-size:12.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:1px;font-weight:700}
|
||||||
.agenda{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-md);overflow:hidden}
|
.agenda{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-md);overflow:hidden}
|
||||||
.agenda-head{background:var(--ink);color:var(--paper);padding:14px 20px;font-family:var(--serif);font-weight:700;font-size:15px;display:flex;justify-content:space-between;align-items:center}
|
.agenda-head{background:var(--ink);color:var(--paper);padding:14px 20px;font-family:var(--serif);font-weight:700;font-size:15px;display:flex;justify-content:space-between;align-items:center}
|
||||||
.agenda-head span{font-family:var(--mono);font-size:12px;color:#cfc8ba;font-weight:400}
|
.agenda-head span{font-family:var(--mono);font-size:12px;color:#BBBBD4;font-weight:400}
|
||||||
.agenda-row{
|
.agenda-row{
|
||||||
display:flex;align-items:center;gap:12px;padding:11px 20px;
|
display:flex;align-items:center;gap:12px;padding:11px 20px;
|
||||||
border-bottom:1px solid var(--line);font-size:14px;cursor:pointer;
|
border-bottom:1px solid var(--line);font-size:14px;cursor:pointer;
|
||||||
@ -315,29 +315,29 @@ h3.sub{font-family:var(--serif);font-size:20px;font-weight:700;margin:26px 0 12p
|
|||||||
.brick.sel-T{background:var(--green-bg);border-color:var(--green);color:var(--green);transform:scale(1.03)}
|
.brick.sel-T{background:var(--green-bg);border-color:var(--green);color:var(--green);transform:scale(1.03)}
|
||||||
.brick.sel-F{background:var(--violet-bg);border-color:var(--violet);color:var(--violet);transform:scale(1.03)}
|
.brick.sel-F{background:var(--violet-bg);border-color:var(--violet);color:var(--violet);transform:scale(1.03)}
|
||||||
.prompt-paper{
|
.prompt-paper{
|
||||||
background:#211d16;color:#efe9dc;border-radius:var(--r-lg);
|
background:#1A1A2E;color:#E8E6F0;border-radius:var(--r-lg);
|
||||||
padding:22px;font-family:var(--mono);font-size:13.5px;line-height:1.8;
|
padding:22px;font-family:var(--mono);font-size:13.5px;line-height:1.8;
|
||||||
box-shadow:var(--sh-lg);min-height:280px;position:sticky;top:84px;
|
box-shadow:var(--sh-lg);min-height:280px;position:sticky;top:84px;
|
||||||
}
|
}
|
||||||
.prompt-paper .pp-head{
|
.prompt-paper .pp-head{
|
||||||
display:flex;align-items:center;gap:8px;margin-bottom:16px;
|
display:flex;align-items:center;gap:8px;margin-bottom:16px;
|
||||||
padding-bottom:12px;border-bottom:1px solid #3a342a;
|
padding-bottom:12px;border-bottom:1px solid #2A2A42;
|
||||||
}
|
}
|
||||||
.pp-dot{width:10px;height:10px;border-radius:50%}
|
.pp-dot{width:10px;height:10px;border-radius:50%}
|
||||||
.prompt-paper .pp-title{font-family:var(--sans);font-weight:900;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:#a89e8c;margin-left:6px}
|
.prompt-paper .pp-title{font-family:var(--sans);font-weight:900;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:#8B8BAA;margin-left:6px}
|
||||||
.pp-line{display:block;margin-bottom:10px;opacity:0;transform:translateX(-8px);transition:all .4s}
|
.pp-line{display:block;margin-bottom:10px;opacity:0;transform:translateX(-8px);transition:all .4s}
|
||||||
.pp-line.in{opacity:1;transform:none}
|
.pp-line.in{opacity:1;transform:none}
|
||||||
.pp-line .pl{font-weight:600;padding:1px 7px;border-radius:5px;margin-right:8px;font-size:11px}
|
.pp-line .pl{font-weight:600;padding:1px 7px;border-radius:5px;margin-right:8px;font-size:11px}
|
||||||
.pl-R{background:rgba(217,119,6,.25);color:#fbbf24}
|
.pl-R{background:rgba(91,79,232,.3);color:#A5B4FC}
|
||||||
.pl-C{background:rgba(29,78,216,.3);color:#93b4f5}
|
.pl-C{background:rgba(99,102,241,.3);color:#C7D2FE}
|
||||||
.pl-T{background:rgba(21,128,61,.3);color:#86dba2}
|
.pl-T{background:rgba(101,163,13,.3);color:#CCEAAA}
|
||||||
.pl-F{background:rgba(109,40,217,.3);color:#c4a8f0}
|
.pl-F{background:rgba(96,165,250,.3);color:#BFDBFE}
|
||||||
.pp-placeholder{color:#6b6457;font-style:italic}
|
.pp-placeholder{color:#555575;font-style:italic}
|
||||||
.power-meter{margin-top:18px;padding-top:14px;border-top:1px solid #3a342a}
|
.power-meter{margin-top:18px;padding-top:14px;border-top:1px solid #2A2A42}
|
||||||
.power-meter .pm-label{font-family:var(--sans);font-size:11px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:#a89e8c;display:flex;justify-content:space-between;margin-bottom:8px}
|
.power-meter .pm-label{font-family:var(--sans);font-size:11px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:#8B8BAA;display:flex;justify-content:space-between;margin-bottom:8px}
|
||||||
.pm-bar{height:9px;background:#3a342a;border-radius:5px;overflow:hidden}
|
.pm-bar{height:9px;background:#2A2A42;border-radius:5px;overflow:hidden}
|
||||||
.pm-fill{height:100%;width:5%;border-radius:5px;background:linear-gradient(90deg,#b91c1c,#d97706,#15803d);transition:width .6s cubic-bezier(.22,1,.36,1)}
|
.pm-fill{height:100%;width:5%;border-radius:5px;background:linear-gradient(90deg,#B91C1C,#5B4FE8,#65A30D);transition:width .6s cubic-bezier(.22,1,.36,1)}
|
||||||
.pm-verdict{font-family:var(--sans);font-size:13px;font-weight:700;margin-top:8px;color:#cfc8ba;min-height:20px}
|
.pm-verdict{font-family:var(--sans);font-size:13px;font-weight:700;margin-top:8px;color:#BBBBD4;min-height:20px}
|
||||||
|
|
||||||
/* ============ KANBAN ============ */
|
/* ============ KANBAN ============ */
|
||||||
.kb-board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
|
.kb-board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
|
||||||
@ -362,13 +362,13 @@ h3.sub{font-family:var(--serif);font-size:20px;font-weight:700;margin:26px 0 12p
|
|||||||
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-1.5deg)}75%{transform:rotate(1.5deg)}}
|
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-1.5deg)}75%{transform:rotate(1.5deg)}}
|
||||||
@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}
|
@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}
|
||||||
.ai-console{
|
.ai-console{
|
||||||
margin-top:18px;background:#211d16;border-radius:var(--r-md);padding:18px 20px;
|
margin-top:18px;background:#1A1A2E;border-radius:var(--r-md);padding:18px 20px;
|
||||||
font-family:var(--mono);font-size:13px;color:#efe9dc;line-height:1.75;
|
font-family:var(--mono);font-size:13px;color:#E8E6F0;line-height:1.75;
|
||||||
min-height:96px;box-shadow:var(--sh-md);
|
min-height:96px;box-shadow:var(--sh-md);
|
||||||
}
|
}
|
||||||
.ai-console .scan{color:#a89e8c}
|
.ai-console .scan{color:#8B8BAA}
|
||||||
.ai-console .found{color:#fbbf24}
|
.ai-console .found{color:#F59E0B}
|
||||||
.ai-console .reco{color:#86dba2}
|
.ai-console .reco{color:#CCEAAA}
|
||||||
.cursor-blink{display:inline-block;width:8px;height:15px;background:var(--amber);vertical-align:-2px;animation:pulse .9s infinite}
|
.cursor-blink{display:inline-block;width:8px;height:15px;background:var(--amber);vertical-align:-2px;animation:pulse .9s infinite}
|
||||||
|
|
||||||
/* ============ CR TRANSFORMER ============ */
|
/* ============ CR TRANSFORMER ============ */
|
||||||
@ -466,9 +466,9 @@ h3.sub{font-family:var(--serif);font-size:20px;font-weight:700;margin:26px 0 12p
|
|||||||
.final-badge.show{display:block}
|
.final-badge.show{display:block}
|
||||||
.medal{
|
.medal{
|
||||||
width:120px;height:120px;border-radius:50%;margin:0 auto 16px;
|
width:120px;height:120px;border-radius:50%;margin:0 auto 16px;
|
||||||
background:radial-gradient(circle at 35% 30%,#fbbf24,var(--amber) 65%,var(--amber-dark));
|
background:radial-gradient(circle at 35% 30%,#A5B4FC,var(--amber) 65%,var(--amber-dark));
|
||||||
display:grid;place-items:center;font-size:52px;
|
display:grid;place-items:center;font-size:52px;
|
||||||
box-shadow:0 10px 30px rgba(217,119,6,.4),inset 0 2px 6px rgba(255,255,255,.5);
|
box-shadow:0 10px 30px rgba(91,79,232,.35),inset 0 2px 6px rgba(255,255,255,.5);
|
||||||
animation:medalSpin 1s cubic-bezier(.34,1.56,.64,1);
|
animation:medalSpin 1s cubic-bezier(.34,1.56,.64,1);
|
||||||
}
|
}
|
||||||
@keyframes medalSpin{from{transform:rotateY(180deg) scale(.3)}to{transform:none}}
|
@keyframes medalSpin{from{transform:rotateY(180deg) scale(.3)}to{transform:none}}
|
||||||
@ -799,7 +799,7 @@ body.formateur .formateur-flag{display:block}
|
|||||||
|
|
||||||
<div style="text-align:center;margin-top:18px">
|
<div style="text-align:center;margin-top:18px">
|
||||||
<button class="btn btn-primary" id="crRun">⚡ Transformer les notes</button>
|
<button class="btn btn-primary" id="crRun">⚡ Transformer les notes</button>
|
||||||
<a class="btn btn-ghost" href="generateur-prompt-cr.html" target="_blank" style="text-decoration:none">🛠️ Ouvrir le générateur de prompt CR</a>
|
<a class="btn btn-ghost" href="prompt.html" target="_blank" style="text-decoration:none">🛠️ Ouvrir le générateur de prompt CR</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="callout amber"><span class="ci">⏱️</span><div><b>Faites le calcul :</b> un CR manuel = 25 à 40 min. Avec l'IA = 30 s de génération + 4 min de relecture. Sur 3 réunions par semaine, c'est <b>~1h30 récupérée chaque semaine</b> — soit plus d'une semaine de travail par an.</div></div>
|
<div class="callout amber"><span class="ci">⏱️</span><div><b>Faites le calcul :</b> un CR manuel = 25 à 40 min. Avec l'IA = 30 s de génération + 4 min de relecture. Sur 3 réunions par semaine, c'est <b>~1h30 récupérée chaque semaine</b> — soit plus d'une semaine de travail par an.</div></div>
|
||||||
@ -924,7 +924,7 @@ body.formateur .formateur-flag{display:block}
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="text-align:center;margin-top:26px">
|
<div style="text-align:center;margin-top:26px">
|
||||||
<a class="btn btn-amber" href="generateur-prompt-cr.html" target="_blank" style="text-decoration:none">🛠️ Récupérer mon générateur de prompts CR →</a>
|
<a class="btn btn-amber" href="prompt.html" target="_blank" style="text-decoration:none">🛠️ Récupérer mon générateur de prompts CR →</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="fnotes">
|
<div class="fnotes">
|
||||||
@ -1252,7 +1252,7 @@ function celebrate(){
|
|||||||
const c=document.createElement('div');
|
const c=document.createElement('div');
|
||||||
c.className='cf';
|
c.className='cf';
|
||||||
c.style.left=Math.random()*100+'vw';
|
c.style.left=Math.random()*100+'vw';
|
||||||
c.style.background=['#d97706','#15803d','#1d4ed8','#6d28d9','#fbbf24'][i%5];
|
c.style.background=['#5B4FE8','#65A30D','#6366F1','#60A5FA','#A5B4FC'][i%5];
|
||||||
c.style.animationDuration=(2.2+Math.random()*2)+'s';
|
c.style.animationDuration=(2.2+Math.random()*2)+'s';
|
||||||
c.style.animationDelay=(Math.random()*.8)+'s';
|
c.style.animationDelay=(Math.random()*.8)+'s';
|
||||||
c.style.transform=`rotate(${Math.random()*360}deg)`;
|
c.style.transform=`rotate(${Math.random()*360}deg)`;
|
||||||
|
|||||||
58
prompt.html
58
prompt.html
@ -5,22 +5,22 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Générateur de prompt CR — IA-PRO Gestion de projet</title>
|
<title>Générateur de prompt CR — IA-PRO Gestion de projet</title>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&family=Lato:wght@400;700;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||||
<style>
|
<style>
|
||||||
:root{
|
:root{
|
||||||
--paper:#faf6ef; --paper-2:#f3ecdf; --paper-3:#ece3d2; --card:#fffdf8;
|
--paper:#F4F4FB; --paper-2:#F0F0F8; --paper-3:#E8E8F4; --card:#FFFFFF;
|
||||||
--ink:#1c1914; --ink-2:#4a443a; --ink-3:#8a8273;
|
--ink:#1E1E2E; --ink-2:#4B5563; --ink-3:#9CA3AF;
|
||||||
--line:#e3d9c6; --line-2:#d4c8b0;
|
--line:#E0E0EF; --line-2:#D1D5DB;
|
||||||
--amber:#d97706; --amber-dark:#92400e; --amber-bg:#fdf3e3; --amber-line:#f0d9b0;
|
--amber:#5B4FE8; --amber-dark:#3730A3; --amber-bg:#EEF0FB; --amber-line:#C7C9F0;
|
||||||
--green:#15803d; --green-bg:#ecf7ec;
|
--green:#65A30D; --green-bg:#F0F9E8;
|
||||||
--blue:#1d4ed8; --violet:#6d28d9;
|
--blue:#6366F1; --violet:#60A5FA;
|
||||||
--serif:'Source Serif 4',Georgia,serif; --sans:'Lato',sans-serif; --mono:'IBM Plex Mono',monospace;
|
--serif:'Plus Jakarta Sans','Inter',sans-serif; --sans:'Inter','Plus Jakarta Sans',sans-serif; --mono:'IBM Plex Mono',monospace;
|
||||||
--sh-sm:0 1px 2px rgba(28,25,20,.06); --sh-md:0 4px 14px rgba(28,25,20,.08); --sh-lg:0 16px 40px rgba(28,25,20,.14);
|
--sh-sm:0 1px 2px rgba(30,30,46,.05); --sh-md:0 4px 14px rgba(30,30,46,.07); --sh-lg:0 16px 40px rgba(30,30,46,.10);
|
||||||
}
|
}
|
||||||
*{box-sizing:border-box;margin:0;padding:0}
|
*{box-sizing:border-box;margin:0;padding:0}
|
||||||
body{
|
body{
|
||||||
background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;
|
background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;
|
||||||
background-image:radial-gradient(at 5% -5%,rgba(217,119,6,.06) 0,transparent 40%),radial-gradient(at 100% 105%,rgba(29,78,216,.04) 0,transparent 40%);
|
background-image:radial-gradient(at 5% -5%,rgba(91,79,232,.06) 0,transparent 40%),radial-gradient(at 100% 105%,rgba(55,48,163,.04) 0,transparent 40%);
|
||||||
background-attachment:fixed;min-height:100vh;
|
background-attachment:fixed;min-height:100vh;
|
||||||
}
|
}
|
||||||
.wrap{max-width:1180px;margin:0 auto;padding:30px 24px 60px}
|
.wrap{max-width:1180px;margin:0 auto;padding:30px 24px 60px}
|
||||||
@ -87,24 +87,24 @@ textarea{font-family:var(--mono);font-size:13px;line-height:1.6;resize:vertical;
|
|||||||
/* output side */
|
/* output side */
|
||||||
.out-sticky{position:sticky;top:24px}
|
.out-sticky{position:sticky;top:24px}
|
||||||
.prompt-paper{
|
.prompt-paper{
|
||||||
background:#211d16;color:#efe9dc;border-radius:16px;box-shadow:var(--sh-lg);
|
background:#1A1A2E;color:#E8E6F0;border-radius:16px;box-shadow:var(--sh-lg);
|
||||||
font-family:var(--mono);font-size:12.8px;line-height:1.75;overflow:hidden;
|
font-family:var(--mono);font-size:12.8px;line-height:1.75;overflow:hidden;
|
||||||
}
|
}
|
||||||
.pp-head{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid #3a342a}
|
.pp-head{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid #2A2A42}
|
||||||
.pp-dot{width:10px;height:10px;border-radius:50%}
|
.pp-dot{width:10px;height:10px;border-radius:50%}
|
||||||
.pp-title{font-family:var(--sans);font-weight:900;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#a89e8c;margin-left:6px}
|
.pp-title{font-family:var(--sans);font-weight:900;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#8B8BAA;margin-left:6px}
|
||||||
.pp-count{margin-left:auto;font-size:11px;color:#6b6457}
|
.pp-count{margin-left:auto;font-size:11px;color:#555575}
|
||||||
.pp-body{padding:18px 20px;max-height:430px;overflow:auto}
|
.pp-body{padding:18px 20px;max-height:430px;overflow:auto}
|
||||||
.pp-body::-webkit-scrollbar{width:8px}
|
.pp-body::-webkit-scrollbar{width:8px}
|
||||||
.pp-body::-webkit-scrollbar-thumb{background:#3a342a;border-radius:4px}
|
.pp-body::-webkit-scrollbar-thumb{background:#2A2A42;border-radius:4px}
|
||||||
.seg-R{color:#fbbf24}.seg-C{color:#93b4f5}.seg-T{color:#86dba2}.seg-F{color:#c4a8f0}
|
.seg-R{color:#A5B4FC}.seg-C{color:#C7D2FE}.seg-T{color:#CCEAAA}.seg-F{color:#BFDBFE}
|
||||||
.pl{font-weight:600;padding:1px 7px;border-radius:5px;font-size:10px;font-family:var(--sans);letter-spacing:1px;margin-right:6px}
|
.pl{font-weight:600;padding:1px 7px;border-radius:5px;font-size:10px;font-family:var(--sans);letter-spacing:1px;margin-right:6px}
|
||||||
.pl-R{background:rgba(217,119,6,.25);color:#fbbf24}
|
.pl-R{background:rgba(91,79,232,.3);color:#A5B4FC}
|
||||||
.pl-C{background:rgba(29,78,216,.3);color:#93b4f5}
|
.pl-C{background:rgba(99,102,241,.3);color:#C7D2FE}
|
||||||
.pl-T{background:rgba(21,128,61,.3);color:#86dba2}
|
.pl-T{background:rgba(101,163,13,.3);color:#CCEAAA}
|
||||||
.pl-F{background:rgba(109,40,217,.3);color:#c4a8f0}
|
.pl-F{background:rgba(96,165,250,.3);color:#BFDBFE}
|
||||||
.pp-notes{color:#a89e8c;font-style:italic}
|
.pp-notes{color:#8B8BAA;font-style:italic}
|
||||||
.pp-actions{display:flex;gap:10px;padding:14px 18px;border-top:1px solid #3a342a;flex-wrap:wrap}
|
.pp-actions{display:flex;gap:10px;padding:14px 18px;border-top:1px solid #2A2A42;flex-wrap:wrap}
|
||||||
.btn{
|
.btn{
|
||||||
font-family:var(--sans);font-weight:900;font-size:13.5px;border:none;cursor:pointer;
|
font-family:var(--sans);font-weight:900;font-size:13.5px;border:none;cursor:pointer;
|
||||||
border-radius:10px;padding:10px 18px;display:inline-flex;align-items:center;gap:8px;
|
border-radius:10px;padding:10px 18px;display:inline-flex;align-items:center;gap:8px;
|
||||||
@ -113,8 +113,8 @@ textarea{font-family:var(--mono);font-size:13px;line-height:1.6;resize:vertical;
|
|||||||
.btn:active{transform:scale(.97)}
|
.btn:active{transform:scale(.97)}
|
||||||
.btn-amber{background:var(--amber);color:#fff}
|
.btn-amber{background:var(--amber);color:#fff}
|
||||||
.btn-amber:hover{background:#c2670a}
|
.btn-amber:hover{background:#c2670a}
|
||||||
.btn-dark-ghost{background:transparent;color:#cfc8ba;border:1px solid #4a4336}
|
.btn-dark-ghost{background:transparent;color:#BBBBD4;border:1px solid #2E2E50}
|
||||||
.btn-dark-ghost:hover{background:#2c2820}
|
.btn-dark-ghost:hover{background:#22223A}
|
||||||
|
|
||||||
.legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
|
.legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
|
||||||
.legend span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--ink-3)}
|
.legend span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--ink-3)}
|
||||||
@ -235,15 +235,15 @@ footer{margin-top:36px;text-align:center;font-size:12px;color:var(--ink-3)}
|
|||||||
<div class="pp-body" id="ppBody"></div>
|
<div class="pp-body" id="ppBody"></div>
|
||||||
<div class="pp-actions">
|
<div class="pp-actions">
|
||||||
<button class="btn btn-amber" id="btnCopy">📋 Copier le prompt</button>
|
<button class="btn btn-amber" id="btnCopy">📋 Copier le prompt</button>
|
||||||
<a class="btn btn-dark-ghost" id="btnClaude" href="https://claude.ai/new" target="_blank" style="text-decoration:none">↗ Ouvrir Claude</a>
|
<a class="btn btn-dark-ghost" id="btnClaude" href="https://claude.ai/new" target="_blank" style="text-decoration:none">↗ Ouvrir une IA</a>
|
||||||
<button class="btn btn-dark-ghost" id="btnRaw">{ } Version brute</button>
|
<button class="btn btn-dark-ghost" id="btnRaw">{ } Version brute</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="legend">
|
<div class="legend">
|
||||||
<span><i style="background:#d97706"></i> Rôle</span>
|
<span><i style="background:#5B4FE8"></i> Rôle</span>
|
||||||
<span><i style="background:#1d4ed8"></i> Contexte</span>
|
<span><i style="background:#6366F1"></i> Contexte</span>
|
||||||
<span><i style="background:#15803d"></i> Tâche</span>
|
<span><i style="background:#65A30D"></i> Tâche</span>
|
||||||
<span><i style="background:#6d28d9"></i> Format</span>
|
<span><i style="background:#60A5FA"></i> Format</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="tip">💡<div><b>Astuce formation :</b> pas encore de notes ? Copiez le prompt tel quel — il demande à l'IA de créer un exemple fictif réaliste, idéal pour voir le rendu avant de l'utiliser en production.</div></div>
|
<div class="tip">💡<div><b>Astuce formation :</b> pas encore de notes ? Copiez le prompt tel quel — il demande à l'IA de créer un exemple fictif réaliste, idéal pour voir le rendu avant de l'utiliser en production.</div></div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user