Octopusdesign/gestion-projet-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Téléverser les fichiers vers "/"

Browse Source
This commit is contained in:
sebvtl
2026-06-12 04:52:10 +00:00
parent 1d46f37f48
commit ed42a24afe
2 changed files with 89 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
prompt.html
+29 -29
View File
@@ -5,22 +5,22 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Générateur de prompt CR — IA-PRO Gestion de projet</title>
<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>
:root{
--paper:#faf6ef; --paper-2:#f3ecdf; --paper-3:#ece3d2; --card:#fffdf8;
--ink:#1c1914; --ink-2:#4a443a; --ink-3:#8a8273;
--line:#e3d9c6; --line-2:#d4c8b0;
--amber:#d97706; --amber-dark:#92400e; --amber-bg:#fdf3e3; --amber-line:#f0d9b0;
--green:#15803d; --green-bg:#ecf7ec;
--blue:#1d4ed8; --violet:#6d28d9;
--serif:'Source Serif 4',Georgia,serif; --sans:'Lato',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);
--paper:#F4F4FB; --paper-2:#F0F0F8; --paper-3:#E8E8F4; --card:#FFFFFF;
--ink:#1E1E2E; --ink-2:#4B5563; --ink-3:#9CA3AF;
--line:#E0E0EF; --line-2:#D1D5DB;
--amber:#5B4FE8; --amber-dark:#3730A3; --amber-bg:#EEF0FB; --amber-line:#C7C9F0;
--green:#65A30D; --green-bg:#F0F9E8;
--blue:#6366F1; --violet:#60A5FA;
--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(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}
body{
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;
}
.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 */
.out-sticky{position:sticky;top:24px}
.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;
}
.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-title{font-family:var(--sans);font-weight:900;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#a89e8c;margin-left:6px}
.pp-count{margin-left:auto;font-size:11px;color:#6b6457}
.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:#555575}
.pp-body{padding:18px 20px;max-height:430px;overflow:auto}
.pp-body::-webkit-scrollbar{width:8px}
.pp-body::-webkit-scrollbar-thumb{background:#3a342a;border-radius:4px}
.seg-R{color:#fbbf24}.seg-C{color:#93b4f5}.seg-T{color:#86dba2}.seg-F{color:#c4a8f0}
.pp-body::-webkit-scrollbar-thumb{background:#2A2A42;border-radius:4px}
.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-R{background:rgba(217,119,6,.25);color:#fbbf24}
.pl-C{background:rgba(29,78,216,.3);color:#93b4f5}
.pl-T{background:rgba(21,128,61,.3);color:#86dba2}
.pl-F{background:rgba(109,40,217,.3);color:#c4a8f0}
.pp-notes{color:#a89e8c;font-style:italic}
.pp-actions{display:flex;gap:10px;padding:14px 18px;border-top:1px solid #3a342a;flex-wrap:wrap}
.pl-R{background:rgba(91,79,232,.3);color:#A5B4FC}
.pl-C{background:rgba(99,102,241,.3);color:#C7D2FE}
.pl-T{background:rgba(101,163,13,.3);color:#CCEAAA}
.pl-F{background:rgba(96,165,250,.3);color:#BFDBFE}
.pp-notes{color:#8B8BAA;font-style:italic}
.pp-actions{display:flex;gap:10px;padding:14px 18px;border-top:1px solid #2A2A42;flex-wrap:wrap}
.btn{
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;
@@ -113,8 +113,8 @@ textarea{font-family:var(--mono);font-size:13px;line-height:1.6;resize:vertical;
.btn:active{transform:scale(.97)}
.btn-amber{background:var(--amber);color:#fff}
.btn-amber:hover{background:#c2670a}
.btn-dark-ghost{background:transparent;color:#cfc8ba;border:1px solid #4a4336}
.btn-dark-ghost:hover{background:#2c2820}
.btn-dark-ghost{background:transparent;color:#BBBBD4;border:1px solid #2E2E50}
.btn-dark-ghost:hover{background:#22223A}
.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)}
@@ -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-actions">
<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>
</div>
</div>
<div class="legend">
<span><i style="background:#d97706"></i> Rôle</span>
<span><i style="background:#1d4ed8"></i> Contexte</span>
<span><i style="background:#15803d"></i> Tâche</span>
<span><i style="background:#6d28d9"></i> Format</span>
<span><i style="background:#5B4FE8"></i> Rôle</span>
<span><i style="background:#6366F1"></i> Contexte</span>
<span><i style="background:#65A30D"></i> Tâche</span>
<span><i style="background:#60A5FA"></i> Format</span>
</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>