Projet

Général

Profil

Historique

Wiki » Historique » Révision 2

Révision 1 (Johnny Fontaine, 04/03/2026 13:50) → Révision 2/16 (Johnny Fontaine, 04/03/2026 15:08) 

<!DOCTYPE html> 
 <html lang="fr"> 
 <head> 
   <meta charset="UTF-8" /> 
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
   <title>Accueil — Redmine</title> 
   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@300;400;600&display=swap" rel="stylesheet"/> 
   <style> 
     :root { 
       --bg: #0f1117; 
       --surface: #161b27; 
       --border: #252d3d; 
       --accent: #4f8ef7; 
       --accent2: #34d399; 
       --text: #cdd5e0; 
       --muted: #5a6680; 
       --heading: #e8edf5; 
       --tag-bg: #1e2740; 
     } 

     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } 

     body { 
       background: var(--bg); 
       color: var(--text); 
       font-family: 'IBM Plex Sans', sans-serif; 
       font-size: 14px; 
       min-height: 100vh; 
       display: flex; 
       flex-direction: column; 
     } 

     /* ── TOP BAR ── */ 
     header { 
       background: var(--surface); 
       border-bottom: 1px solid var(--border); 
       padding: 0 24px; 
       display: flex; 
       align-items: center; 
       gap: 20px; 
       height: 48px; 
       position: sticky; 
       top: 0; 
       z-index: 10; 
     } 

     .logo { 
       font-family: 'IBM Plex Mono', monospace; 
       font-weight: 600; 
       font-size: 15px; 
       color: var(--accent); 
       letter-spacing: .04em; 
       display: flex; 
       align-items: center; 
       gap: 8px; 
     } 
     .logo-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; } 

     nav { display: flex; gap: 2px; margin-left: 12px; } 
     nav a { 
       color: var(--muted); 
       text-decoration: none; 
       padding: 6px 12px; 
       border-radius: 6px; 
       font-size: 13px; 
       transition: color .15s, background .15s; 
     } 
     nav a:hover, nav a.active { color: var(--heading); background: var(--tag-bg); } 
     nav a.active { color: var(--accent); } 

     .header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } 
     .user-badge { 
       background: var(--tag-bg); 
       border: 1px solid var(--border); 
       border-radius: 20px; 
       padding: 4px 12px; 
       font-size: 12px; 
       color: var(--muted); 
     } 
     .btn-new { 
       background: var(--accent); 
       color: #fff; 
       border: none; 
       border-radius: 6px; 
       padding: 6px 14px; 
       font-size: 12px; 
       font-family: inherit; 
       cursor: pointer; 
       transition: opacity .15s; 
     } 
     .btn-new:hover { opacity: .85; } 

     /* ── LAYOUT ── */ 
     .layout { 
       display: grid; 
       grid-template-columns: 240px 1fr 220px; 
       gap: 0; 
       flex: 1; 
     } 

     /* ── SIDEBAR ── */ 
     aside { 
       border-right: 1px solid var(--border); 
       padding: 24px 0; 
       position: sticky; 
       top: 48px; 
       height: calc(100vh - 48px); 
       overflow-y: auto; 
     } 

     .sidebar-section { margin-bottom: 28px; } 
     .sidebar-label { 
       font-family: 'IBM Plex Mono', monospace; 
       font-size: 10px; 
       font-weight: 600; 
       letter-spacing: .12em; 
       color: var(--muted); 
       text-transform: uppercase; 
       padding: 0 20px 8px; 
     } 

     .tree { list-style: none; } 
     .tree li { position: relative; } 

     .tree-link { 
       display: flex; 
       align-items: center; 
       gap: 8px; 
       padding: 6px 20px; 
       color: var(--text); 
       text-decoration: none; 
       font-size: 13px; 
       border-left: 2px solid transparent; 
       transition: color .12s, background .12s, border-color .12s; 
       cursor: pointer; 
     } 
     .tree-link:hover { 
       color: var(--heading); 
       background: var(--tag-bg); 
       border-left-color: var(--border); 
     } 
     .tree-link.active { 
       color: var(--accent); 
       background: rgba(79,142,247,.08); 
       border-left-color: var(--accent); 
     } 

     .tree-icon { font-size: 14px; opacity: .7; flex-shrink: 0; } 
     .tree-caret { 
       margin-left: auto; 
       font-size: 10px; 
       color: var(--muted); 
       transition: transform .2s; 
     } 
     .tree-caret.open { transform: rotate(90deg); } 

     /* depth indent */ 
     .depth-1 > .tree-link { padding-left: 36px; } 
     .depth-2 > .tree-link { padding-left: 52px; } 
     .depth-3 > .tree-link { padding-left: 68px; } 

     /* connector lines */ 
     .depth-1::before { 
       content: ''; 
       position: absolute; 
       left: 28px; 
       top: 0; bottom: 0; 
       border-left: 1px dashed var(--border); 
       z-index: 0; 
     } 
     .depth-1:last-child::before { bottom: 50%; } 

     .subtree { display: none; } 
     .subtree.open { display: block; } 

     /* ── MAIN ── */ 
     main { padding: 32px 36px; min-width: 0; } 

     .breadcrumb { 
       display: flex; 
       align-items: center; 
       gap: 6px; 
       font-size: 12px; 
       color: var(--muted); 
       margin-bottom: 24px; 
     } 
     .breadcrumb a { color: var(--accent); text-decoration: none; } 
     .breadcrumb span { color: var(--muted); } 

     .page-title { 
       font-family: 'IBM Plex Mono', monospace; 
       font-size: 26px; 
       font-weight: 600; 
       color: var(--heading); 
       margin-bottom: 6px; 
     } 
     .page-meta { 
       font-size: 12px; 
       color: var(--muted); 
       margin-bottom: 32px; 
       display: flex; 
       gap: 16px; 
     } 
     .page-meta span { display: flex; align-items: center; gap: 5px; } 

     /* cards grid */ 
     .cards-heading { 
       font-family: 'IBM Plex Mono', monospace; 
       font-size: 11px; 
       font-weight: 600; 
       letter-spacing: .1em; 
       text-transform: uppercase; 
       color: var(--muted); 
       margin-bottom: 14px; 
     } 

     .cards { 
       display: grid; 
       grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 
       gap: 12px; 
       margin-bottom: 36px; 
     } 

     .card { 
       background: var(--surface); 
       border: 1px solid var(--border); 
       border-radius: 10px; 
       padding: 18px; 
       cursor: pointer; 
       transition: border-color .15s, transform .15s, box-shadow .15s; 
       text-decoration: none; 
       display: block; 
       position: relative; 
       overflow: hidden; 
     } 
     .card::before { 
       content: ''; 
       position: absolute; 
       inset: 0; 
       background: linear-gradient(135deg, rgba(79,142,247,.04) 0%, transparent 60%); 
       opacity: 0; 
       transition: opacity .2s; 
     } 
     .card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); } 
     .card:hover::before { opacity: 1; } 

     .card-icon { font-size: 20px; margin-bottom: 10px; } 
     .card-title { 
       font-size: 13px; 
       font-weight: 600; 
       color: var(--heading); 
       margin-bottom: 4px; 
     } 
     .card-desc { font-size: 12px; color: var(--muted); line-height: 1.5; } 

     /* wiki tree section */ 
     .wiki-section { 
       background: var(--surface); 
       border: 1px solid var(--border); 
       border-radius: 12px; 
       overflow: hidden; 
       margin-bottom: 32px; 
     } 
     .wiki-header { 
       background: var(--tag-bg); 
       border-bottom: 1px solid var(--border); 
       padding: 14px 20px; 
       display: flex; 
       align-items: center; 
       gap: 10px; 
     } 
     .wiki-header-title { 
       font-family: 'IBM Plex Mono', monospace; 
       font-size: 13px; 
       font-weight: 600; 
       color: var(--heading); 
     } 
     .wiki-header-badge { 
       background: rgba(79,142,247,.15); 
       color: var(--accent); 
       border-radius: 4px; 
       padding: 2px 8px; 
       font-size: 11px; 
       font-family: 'IBM Plex Mono', monospace; 
     } 

     .wiki-tree { padding: 8px 0; } 
     .wiki-node { 
       display: flex; 
       align-items: center; 
       gap: 8px; 
       padding: 9px 20px; 
       color: var(--text); 
       text-decoration: none; 
       font-size: 13px; 
       transition: background .12s, color .12s; 
       cursor: pointer; 
     } 
     .wiki-node:hover { background: rgba(255,255,255,.04); color: var(--heading); } 
     .wiki-node .ico { font-size: 14px; flex-shrink: 0; } 
     .wiki-node .lbl { flex: 1; } 
     .wiki-node .arrow { color: var(--muted); font-size: 11px; } 

     .wiki-node.l0 { padding-left: 20px; font-weight: 600; color: var(--heading); } 
     .wiki-node.l1 { padding-left: 42px; } 
     .wiki-node.l2 { padding-left: 64px; } 
     .wiki-node.l3 { padding-left: 86px; } 

     .wiki-node .connector { 
       display: inline-flex; 
       align-items: center; 
       color: var(--border); 
       font-size: 12px; 
       margin-right: 4px; 
     } 

     .tag { 
       background: var(--tag-bg); 
       border: 1px solid var(--border); 
       border-radius: 4px; 
       padding: 1px 7px; 
       font-size: 11px; 
       color: var(--muted); 
       font-family: 'IBM Plex Mono', monospace; 
     } 
     .tag.green { border-color: rgba(52,211,153,.3); color: var(--accent2); background: rgba(52,211,153,.08); } 
     .tag.blue    { border-color: rgba(79,142,247,.3); color: var(--accent); background: rgba(79,142,247,.08); } 

     /* divider */ 
     .divider { border: none; border-top: 1px solid var(--border); margin: 28px 0; } 

     /* ── RIGHT PANEL ── */ 
     .panel { 
       border-left: 1px solid var(--border); 
       padding: 24px 18px; 
       position: sticky; 
       top: 48px; 
       height: calc(100vh - 48px); 
       overflow-y: auto; 
     } 
     .panel-title { 
       font-family: 'IBM Plex Mono', monospace; 
       font-size: 10px; 
       font-weight: 600; 
       letter-spacing: .12em; 
       color: var(--muted); 
       text-transform: uppercase; 
       margin-bottom: 14px; 
     } 

     .activity-item { 
       display: flex; 
       gap: 10px; 
       padding: 8px 0; 
       border-bottom: 1px solid var(--border); 
     } 
     .activity-item:last-child { border-bottom: none; } 
     .act-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex-shrink: 0; } 
     .act-dot.green { background: var(--accent2); } 
     .act-body { flex: 1; min-width: 0; } 
     .act-title { font-size: 12px; color: var(--heading); line-height: 1.4; margin-bottom: 2px; } 
     .act-meta { font-size: 11px; color: var(--muted); } 

     .stat-row { 
       display: flex; 
       justify-content: space-between; 
       align-items: center; 
       padding: 8px 0; 
       border-bottom: 1px solid var(--border); 
     } 
     .stat-row:last-child { border-bottom: none; } 
     .stat-label { font-size: 12px; color: var(--muted); } 
     .stat-val { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--heading); font-weight: 600; } 

     /* animations */ 
     @keyframes fadeUp { 
       from { opacity: 0; transform: translateY(12px); } 
       to     { opacity: 1; transform: translateY(0); } 
     } 
     main > * { animation: fadeUp .35s ease both; } 
     main > *:nth-child(1) { animation-delay: .05s; } 
     main > *:nth-child(2) { animation-delay: .1s; } 
     main > *:nth-child(3) { animation-delay: .15s; } 
     main > *:nth-child(4) { animation-delay: .2s; } 
     main > *:nth-child(5) { animation-delay: .25s; } 

     @media (max-width: 900px) { 
       .layout { grid-template-columns: 1fr; } 
       aside, .panel { display: none; } 
     } 
   </style> 
 </head> 
 <body> 

 <!-- ══ HEADER ══ --> 
 <header> 
   <div class="logo"> 
     <div class="logo-dot"></div> 
     redmine 
   </div> 
   <nav> 
     <a href="#" class="active">Accueil</a> 
     <a href="#">Projets</a> 
     <a href="#">Administration</a> 
     <a href="#">Aide</a> 
   </nav> 
   <div class="header-right"> 
     <span class="user-badge">👤 admin</span> 
     <button class="btn-new">+ Nouveau ticket</button> 
   </div> 
 </header> 

 <!-- ══ LAYOUT ══ --> 
 <div class="layout"> 

   <!-- ── LEFT SIDEBAR ── --> 
   <aside> 
     <div class="sidebar-section"> 
       <div class="sidebar-label">Navigation</div> 
       <ul class="tree"> 
         <li> 
           <a href="#" class="tree-link active"> 
             <span class="tree-icon">🏠</span> Accueil 
           </a> 
         </li> 
         <li> 
           <span class="tree-link" onclick="toggleTree(this)"> 
             <span class="tree-icon">📘</span> # Wiki 
             <span class="tree-caret open">▶</span> 
           </span> 
           <ul class="tree subtree open" id="wiki-tree"> 
             <li class="depth-1"> 
               <span class="tree-link" onclick="toggleTree(this)"> 
                 <span class="tree-icon">📂</span> Installations 
                 <span class="tree-caret open">▶</span> 
               </span> 
               <ul class="tree subtree open"> 
                 <li class="depth-2"> 
                   <a href="#localwp" class="tree-link"> 
                     <span class="tree-icon">⚙️</span> LocalWP Install 
                   </a> 
                 </li> 
               </ul> 
             </li> 
           </ul> 
         </li> 
         <li> 
           <span class="tree-link" onclick="toggleTree(this)"> 
             <span class="tree-icon">🎫</span> Tickets 
             <span class="tree-caret">▶</span> 
           </span> 
           <ul class="tree subtree" id="tickets-tree"> 
             <li class="depth-1"><a href="#" class="tree-link"><span class="tree-icon">🔴</span> Ouverts</a></li> 
             <li class="depth-1"><a href="#" class="tree-link"><span class="tree-icon">✅</span> Fermés</a></li> 
             <li class="depth-1"><a href="#" class="tree-link"><span class="tree-icon">👤</span> Assignés à moi</a></li> 
           </ul> 
         </li> 
         <li> 
           <a href="#" class="tree-link"> 
             <span class="tree-icon">📅</span> Gantt 
           </a> 
         </li> 
         <li> 
           <a href="#" class="tree-link"> 
             <span class="tree-icon">📊</span> Rapports 
           </a> 
         </li> 
         <li> 
           <a href="#" class="tree-link"> 
             <span class="tree-icon">⚙️</span> Paramètres 
           </a> 
         </li> 
       </ul> 
     </div> 
   </aside> 

   <!-- ── MAIN ── --> 
   <main> 
     <!-- Breadcrumb --> 
     <div class="breadcrumb"> 
       <a href="#">Accueil</a> 
       <span>›</span> 
       <span>Vue d'ensemble</span> 
     </div> 

     <!-- Title --> 
     <div class="page-title">📋 Tableau de bord</div> 
     <div class="page-meta"> 
       <span>🕐 Mis à jour aujourd'hui</span> 
       <span>📁 Projet principal</span> 
     </div> 

     <!-- Quick links --> 
     <div class="cards-heading">Accès rapide</div> 
     <div class="cards"> 
       <a href="#wiki" class="card"> 
         <div class="card-icon">📘</div> 
         <div class="card-title">Wiki</div> 
         <div class="card-desc">Documentation, guides d'installation et notes techniques.</div> 
       </a> 
       <a href="#" class="card"> 
         <div class="card-icon">🎫</div> 
         <div class="card-title">Tickets</div> 
         <div class="card-desc">Suivre et gérer les tickets ouverts du projet.</div> 
       </a> 
       <a href="#" class="card"> 
         <div class="card-icon">📅</div> 
         <div class="card-title">Planning</div> 
         <div class="card-desc">Vue Gantt et jalons du projet.</div> 
       </a> 
       <a href="#" class="card"> 
         <div class="card-icon">📊</div> 
         <div class="card-title">Rapports</div> 
         <div class="card-desc">Statistiques et tableaux de bord analytiques.</div> 
       </a> 
     </div> 

     <hr class="divider"/> 

     <!-- Wiki tree --> 
     <div class="cards-heading" id="wiki">Structure du Wiki</div> 
     <div class="wiki-section"> 
       <div class="wiki-header"> 
         <span>📘</span> 
         <span class="wiki-header-title">Wiki</span> 
         <span class="wiki-header-badge">1 page</span> 
       </div> 
       <div class="wiki-tree"> 

         <!-- L0: Wiki root --> 
         <a href="#wiki" class="wiki-node l0"> 
           <span class="ico">📘</span> 
           <span class="lbl">Wiki</span> 
           <span class="tag blue">racine</span> 
         </a> 

         <!-- L1: Installations --> 
         <a href="#installations" class="wiki-node l1"> 
           <span class="connector">└─</span> 
           <span class="ico">📂</span> 
           <span class="lbl">Installations</span> 
           <span class="tag">catégorie</span> 
           <span class="arrow">›</span> 
         </a> 

         <!-- L2: LocalWP --> 
         <a href="#localwp" class="wiki-node l2" id="localwp"> 
           <span class="connector">└─</span> 
           <span class="ico">⚙️</span> 
           <span class="lbl">LocalWP Install</span> 
           <span class="tag green">page</span> 
           <span class="arrow">›</span> 
         </a> 

       </div> 
     </div> 

     <!-- LocalWP preview card --> 
     <div class="cards-heading" id="installations">Page en avant — LocalWP Install</div> 
     <div class="wiki-section" id="localwp-detail"> 
       <div class="wiki-header"> 
         <span>⚙️</span> 
         <span class="wiki-header-title">LocalWP Install</span> 
         <span class="wiki-header-badge">Wiki › Installations</span> 
       </div> 
       <div style="padding: 20px 24px; color: var(--muted); font-size: 13px; line-height: 1.8;"> 
         <p style="color:var(--heading); font-weight:600; margin-bottom:10px;">📄 Contenu de la page</p> 
         <p>Cette page documente la procédure d'installation de <strong style="color:var(--accent)">LocalWP</strong> (anciennement Local by Flywheel), un outil de développement WordPress local.</p> 
         <br/> 
         <p style="color:var(--muted)">Sections prévues :</p> 
         <ul style="list-style:none; margin-top:8px;"> 
           <li style="padding:4px 0; display:flex; gap:8px;"><span style="color:var(--accent2)">✓</span> Prérequis système</li> 
           <li style="padding:4px 0; display:flex; gap:8px;"><span style="color:var(--accent2)">✓</span> Téléchargement et installation</li> 
           <li style="padding:4px 0; display:flex; gap:8px;"><span style="color:var(--accent2)">✓</span> Configuration initiale</li> 
           <li style="padding:4px 0; display:flex; gap:8px;"><span style="color:var(--muted)">○</span> Création d'un premier site</li> 
           <li style="padding:4px 0; display:flex; gap:8px;"><span style="color:var(--muted)">○</span> Dépannage courant</li> 
         </ul> 
         <br/> 
         <div style="display:flex; gap:10px; flex-wrap:wrap;"> 
           <a href="#" style="background:var(--accent);color:#fff;text-decoration:none;border-radius:6px;padding:7px 16px;font-size:12px;">✏️ Éditer la page</a> 
           <a href="#" style="background:var(--tag-bg);color:var(--text);text-decoration:none;border-radius:6px;padding:7px 16px;font-size:12px;border:1px solid var(--border);">📜 Historique</a> 
         </div> 
       </div> 
     </div> 

   </main> 

   <!-- ── RIGHT PANEL ── --> 
   <div class="panel"> 
     <div class="panel-title">Activité récente</div> 
     <div class="activity-item"> 
       <div class="act-dot"></div> 
       <div class="act-body"> 
         <div class="act-title">Wiki — LocalWP Install créée</div> 
         <div class="act-meta">il y a 2 heures · admin</div> 
       </div> 
     </div> 
     <div class="activity-item"> 
       <div class="act-dot green"></div> 
       <div class="act-body"> 
         <div class="act-title">Ticket #12 fermé</div> 
         <div class="act-meta">il y a 4 heures · admin</div> 
       </div> 
     </div> 
     <div class="activity-item"> 
       <div class="act-dot"></div> 
       <div class="act-body"> 
         <div class="act-title">Wiki — catégorie Installations ajoutée</div> 
         <div class="act-meta">hier · admin</div> 
       </div> 
     </div> 
     <div class="activity-item"> 
       <div class="act-dot green"></div> 
       <div class="act-body"> 
         <div class="act-title">Projet initialisé</div> 
         <div class="act-meta">il y a 3 jours · admin</div> 
       </div> 
     </div> 

     <hr class="divider"/> 

     <div class="panel-title">Statistiques</div> 
     <div class="stat-row"> 
       <span class="stat-label">Pages Wiki</span> 
       <span class="stat-val">1</span> 
     </div> 
     <div class="stat-row"> 
       <span class="stat-label">Tickets ouverts</span> 
       <span class="stat-val">0</span> 
     </div> 
     <div class="stat-row"> 
       <span class="stat-label">Membres</span> 
       <span class="stat-val">1</span> 
     </div> 
     <div class="stat-row"> 
       <span class="stat-label">Dernière activité</span> 
       <span class="stat-val">auj.</span> 
     </div> 
   </div> 

 </div> 

 <script> 
   function toggleTree(el) { 
     const caret = el.querySelector('.tree-caret'); 
     const subtree = el.nextElementSibling; 
     if (!subtree || !subtree.classList.contains('subtree')) return; 
     subtree.classList.toggle('open'); 
     if (caret) caret.classList.toggle('open'); 
   } 
 </script> 
 </body> 
 </html>