Wiki » Historique » Version 2
Johnny Fontaine, 04/03/2026 15:08
| 1 | 2 | Johnny Fontaine | <!DOCTYPE html> |
|---|---|---|---|
| 2 | <html lang="fr"> |
||
| 3 | <head> |
||
| 4 | <meta charset="UTF-8" /> |
||
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
||
| 6 | <title>Accueil — Redmine</title> |
||
| 7 | <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"/> |
||
| 8 | <style> |
||
| 9 | :root { |
||
| 10 | --bg: #0f1117; |
||
| 11 | --surface: #161b27; |
||
| 12 | --border: #252d3d; |
||
| 13 | --accent: #4f8ef7; |
||
| 14 | --accent2: #34d399; |
||
| 15 | --text: #cdd5e0; |
||
| 16 | --muted: #5a6680; |
||
| 17 | --heading: #e8edf5; |
||
| 18 | --tag-bg: #1e2740; |
||
| 19 | } |
||
| 20 | |||
| 21 | *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } |
||
| 22 | |||
| 23 | body { |
||
| 24 | background: var(--bg); |
||
| 25 | color: var(--text); |
||
| 26 | font-family: 'IBM Plex Sans', sans-serif; |
||
| 27 | font-size: 14px; |
||
| 28 | min-height: 100vh; |
||
| 29 | display: flex; |
||
| 30 | flex-direction: column; |
||
| 31 | } |
||
| 32 | |||
| 33 | /* ── TOP BAR ── */ |
||
| 34 | header { |
||
| 35 | background: var(--surface); |
||
| 36 | border-bottom: 1px solid var(--border); |
||
| 37 | padding: 0 24px; |
||
| 38 | display: flex; |
||
| 39 | align-items: center; |
||
| 40 | gap: 20px; |
||
| 41 | height: 48px; |
||
| 42 | position: sticky; |
||
| 43 | top: 0; |
||
| 44 | z-index: 10; |
||
| 45 | } |
||
| 46 | |||
| 47 | .logo { |
||
| 48 | font-family: 'IBM Plex Mono', monospace; |
||
| 49 | font-weight: 600; |
||
| 50 | font-size: 15px; |
||
| 51 | color: var(--accent); |
||
| 52 | letter-spacing: .04em; |
||
| 53 | display: flex; |
||
| 54 | align-items: center; |
||
| 55 | gap: 8px; |
||
| 56 | } |
||
| 57 | .logo-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; } |
||
| 58 | |||
| 59 | nav { display: flex; gap: 2px; margin-left: 12px; } |
||
| 60 | nav a { |
||
| 61 | color: var(--muted); |
||
| 62 | text-decoration: none; |
||
| 63 | padding: 6px 12px; |
||
| 64 | border-radius: 6px; |
||
| 65 | font-size: 13px; |
||
| 66 | transition: color .15s, background .15s; |
||
| 67 | } |
||
| 68 | nav a:hover, nav a.active { color: var(--heading); background: var(--tag-bg); } |
||
| 69 | nav a.active { color: var(--accent); } |
||
| 70 | |||
| 71 | .header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } |
||
| 72 | .user-badge { |
||
| 73 | background: var(--tag-bg); |
||
| 74 | border: 1px solid var(--border); |
||
| 75 | border-radius: 20px; |
||
| 76 | padding: 4px 12px; |
||
| 77 | font-size: 12px; |
||
| 78 | color: var(--muted); |
||
| 79 | } |
||
| 80 | .btn-new { |
||
| 81 | background: var(--accent); |
||
| 82 | color: #fff; |
||
| 83 | border: none; |
||
| 84 | border-radius: 6px; |
||
| 85 | padding: 6px 14px; |
||
| 86 | font-size: 12px; |
||
| 87 | font-family: inherit; |
||
| 88 | cursor: pointer; |
||
| 89 | transition: opacity .15s; |
||
| 90 | } |
||
| 91 | .btn-new:hover { opacity: .85; } |
||
| 92 | |||
| 93 | /* ── LAYOUT ── */ |
||
| 94 | .layout { |
||
| 95 | display: grid; |
||
| 96 | grid-template-columns: 240px 1fr 220px; |
||
| 97 | gap: 0; |
||
| 98 | flex: 1; |
||
| 99 | } |
||
| 100 | |||
| 101 | /* ── SIDEBAR ── */ |
||
| 102 | aside { |
||
| 103 | border-right: 1px solid var(--border); |
||
| 104 | padding: 24px 0; |
||
| 105 | position: sticky; |
||
| 106 | top: 48px; |
||
| 107 | height: calc(100vh - 48px); |
||
| 108 | overflow-y: auto; |
||
| 109 | } |
||
| 110 | |||
| 111 | .sidebar-section { margin-bottom: 28px; } |
||
| 112 | .sidebar-label { |
||
| 113 | font-family: 'IBM Plex Mono', monospace; |
||
| 114 | font-size: 10px; |
||
| 115 | font-weight: 600; |
||
| 116 | letter-spacing: .12em; |
||
| 117 | color: var(--muted); |
||
| 118 | text-transform: uppercase; |
||
| 119 | padding: 0 20px 8px; |
||
| 120 | } |
||
| 121 | |||
| 122 | .tree { list-style: none; } |
||
| 123 | .tree li { position: relative; } |
||
| 124 | |||
| 125 | .tree-link { |
||
| 126 | display: flex; |
||
| 127 | align-items: center; |
||
| 128 | gap: 8px; |
||
| 129 | padding: 6px 20px; |
||
| 130 | color: var(--text); |
||
| 131 | text-decoration: none; |
||
| 132 | font-size: 13px; |
||
| 133 | border-left: 2px solid transparent; |
||
| 134 | transition: color .12s, background .12s, border-color .12s; |
||
| 135 | cursor: pointer; |
||
| 136 | } |
||
| 137 | .tree-link:hover { |
||
| 138 | color: var(--heading); |
||
| 139 | background: var(--tag-bg); |
||
| 140 | border-left-color: var(--border); |
||
| 141 | } |
||
| 142 | .tree-link.active { |
||
| 143 | color: var(--accent); |
||
| 144 | background: rgba(79,142,247,.08); |
||
| 145 | border-left-color: var(--accent); |
||
| 146 | } |
||
| 147 | |||
| 148 | .tree-icon { font-size: 14px; opacity: .7; flex-shrink: 0; } |
||
| 149 | .tree-caret { |
||
| 150 | margin-left: auto; |
||
| 151 | font-size: 10px; |
||
| 152 | color: var(--muted); |
||
| 153 | transition: transform .2s; |
||
| 154 | } |
||
| 155 | .tree-caret.open { transform: rotate(90deg); } |
||
| 156 | |||
| 157 | /* depth indent */ |
||
| 158 | .depth-1 > .tree-link { padding-left: 36px; } |
||
| 159 | .depth-2 > .tree-link { padding-left: 52px; } |
||
| 160 | .depth-3 > .tree-link { padding-left: 68px; } |
||
| 161 | |||
| 162 | /* connector lines */ |
||
| 163 | .depth-1::before { |
||
| 164 | content: ''; |
||
| 165 | position: absolute; |
||
| 166 | left: 28px; |
||
| 167 | top: 0; bottom: 0; |
||
| 168 | border-left: 1px dashed var(--border); |
||
| 169 | z-index: 0; |
||
| 170 | } |
||
| 171 | .depth-1:last-child::before { bottom: 50%; } |
||
| 172 | |||
| 173 | .subtree { display: none; } |
||
| 174 | .subtree.open { display: block; } |
||
| 175 | |||
| 176 | /* ── MAIN ── */ |
||
| 177 | main { padding: 32px 36px; min-width: 0; } |
||
| 178 | |||
| 179 | .breadcrumb { |
||
| 180 | display: flex; |
||
| 181 | align-items: center; |
||
| 182 | gap: 6px; |
||
| 183 | font-size: 12px; |
||
| 184 | color: var(--muted); |
||
| 185 | margin-bottom: 24px; |
||
| 186 | } |
||
| 187 | .breadcrumb a { color: var(--accent); text-decoration: none; } |
||
| 188 | .breadcrumb span { color: var(--muted); } |
||
| 189 | |||
| 190 | .page-title { |
||
| 191 | font-family: 'IBM Plex Mono', monospace; |
||
| 192 | font-size: 26px; |
||
| 193 | font-weight: 600; |
||
| 194 | color: var(--heading); |
||
| 195 | margin-bottom: 6px; |
||
| 196 | } |
||
| 197 | .page-meta { |
||
| 198 | font-size: 12px; |
||
| 199 | color: var(--muted); |
||
| 200 | margin-bottom: 32px; |
||
| 201 | display: flex; |
||
| 202 | gap: 16px; |
||
| 203 | } |
||
| 204 | .page-meta span { display: flex; align-items: center; gap: 5px; } |
||
| 205 | |||
| 206 | /* cards grid */ |
||
| 207 | .cards-heading { |
||
| 208 | font-family: 'IBM Plex Mono', monospace; |
||
| 209 | font-size: 11px; |
||
| 210 | font-weight: 600; |
||
| 211 | letter-spacing: .1em; |
||
| 212 | text-transform: uppercase; |
||
| 213 | color: var(--muted); |
||
| 214 | margin-bottom: 14px; |
||
| 215 | } |
||
| 216 | |||
| 217 | .cards { |
||
| 218 | display: grid; |
||
| 219 | grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); |
||
| 220 | gap: 12px; |
||
| 221 | margin-bottom: 36px; |
||
| 222 | } |
||
| 223 | |||
| 224 | .card { |
||
| 225 | background: var(--surface); |
||
| 226 | border: 1px solid var(--border); |
||
| 227 | border-radius: 10px; |
||
| 228 | padding: 18px; |
||
| 229 | cursor: pointer; |
||
| 230 | transition: border-color .15s, transform .15s, box-shadow .15s; |
||
| 231 | text-decoration: none; |
||
| 232 | display: block; |
||
| 233 | position: relative; |
||
| 234 | overflow: hidden; |
||
| 235 | } |
||
| 236 | .card::before { |
||
| 237 | content: ''; |
||
| 238 | position: absolute; |
||
| 239 | inset: 0; |
||
| 240 | background: linear-gradient(135deg, rgba(79,142,247,.04) 0%, transparent 60%); |
||
| 241 | opacity: 0; |
||
| 242 | transition: opacity .2s; |
||
| 243 | } |
||
| 244 | .card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); } |
||
| 245 | .card:hover::before { opacity: 1; } |
||
| 246 | |||
| 247 | .card-icon { font-size: 20px; margin-bottom: 10px; } |
||
| 248 | .card-title { |
||
| 249 | font-size: 13px; |
||
| 250 | font-weight: 600; |
||
| 251 | color: var(--heading); |
||
| 252 | margin-bottom: 4px; |
||
| 253 | } |
||
| 254 | .card-desc { font-size: 12px; color: var(--muted); line-height: 1.5; } |
||
| 255 | |||
| 256 | /* wiki tree section */ |
||
| 257 | .wiki-section { |
||
| 258 | background: var(--surface); |
||
| 259 | border: 1px solid var(--border); |
||
| 260 | border-radius: 12px; |
||
| 261 | overflow: hidden; |
||
| 262 | margin-bottom: 32px; |
||
| 263 | } |
||
| 264 | .wiki-header { |
||
| 265 | background: var(--tag-bg); |
||
| 266 | border-bottom: 1px solid var(--border); |
||
| 267 | padding: 14px 20px; |
||
| 268 | display: flex; |
||
| 269 | align-items: center; |
||
| 270 | gap: 10px; |
||
| 271 | } |
||
| 272 | .wiki-header-title { |
||
| 273 | font-family: 'IBM Plex Mono', monospace; |
||
| 274 | font-size: 13px; |
||
| 275 | font-weight: 600; |
||
| 276 | color: var(--heading); |
||
| 277 | } |
||
| 278 | .wiki-header-badge { |
||
| 279 | background: rgba(79,142,247,.15); |
||
| 280 | color: var(--accent); |
||
| 281 | border-radius: 4px; |
||
| 282 | padding: 2px 8px; |
||
| 283 | font-size: 11px; |
||
| 284 | font-family: 'IBM Plex Mono', monospace; |
||
| 285 | } |
||
| 286 | |||
| 287 | .wiki-tree { padding: 8px 0; } |
||
| 288 | .wiki-node { |
||
| 289 | display: flex; |
||
| 290 | align-items: center; |
||
| 291 | gap: 8px; |
||
| 292 | padding: 9px 20px; |
||
| 293 | color: var(--text); |
||
| 294 | text-decoration: none; |
||
| 295 | font-size: 13px; |
||
| 296 | transition: background .12s, color .12s; |
||
| 297 | cursor: pointer; |
||
| 298 | } |
||
| 299 | .wiki-node:hover { background: rgba(255,255,255,.04); color: var(--heading); } |
||
| 300 | .wiki-node .ico { font-size: 14px; flex-shrink: 0; } |
||
| 301 | .wiki-node .lbl { flex: 1; } |
||
| 302 | .wiki-node .arrow { color: var(--muted); font-size: 11px; } |
||
| 303 | |||
| 304 | .wiki-node.l0 { padding-left: 20px; font-weight: 600; color: var(--heading); } |
||
| 305 | .wiki-node.l1 { padding-left: 42px; } |
||
| 306 | .wiki-node.l2 { padding-left: 64px; } |
||
| 307 | .wiki-node.l3 { padding-left: 86px; } |
||
| 308 | |||
| 309 | .wiki-node .connector { |
||
| 310 | display: inline-flex; |
||
| 311 | align-items: center; |
||
| 312 | color: var(--border); |
||
| 313 | font-size: 12px; |
||
| 314 | margin-right: 4px; |
||
| 315 | } |
||
| 316 | |||
| 317 | .tag { |
||
| 318 | background: var(--tag-bg); |
||
| 319 | border: 1px solid var(--border); |
||
| 320 | border-radius: 4px; |
||
| 321 | padding: 1px 7px; |
||
| 322 | font-size: 11px; |
||
| 323 | color: var(--muted); |
||
| 324 | font-family: 'IBM Plex Mono', monospace; |
||
| 325 | } |
||
| 326 | .tag.green { border-color: rgba(52,211,153,.3); color: var(--accent2); background: rgba(52,211,153,.08); } |
||
| 327 | .tag.blue { border-color: rgba(79,142,247,.3); color: var(--accent); background: rgba(79,142,247,.08); } |
||
| 328 | |||
| 329 | /* divider */ |
||
| 330 | .divider { border: none; border-top: 1px solid var(--border); margin: 28px 0; } |
||
| 331 | |||
| 332 | /* ── RIGHT PANEL ── */ |
||
| 333 | .panel { |
||
| 334 | border-left: 1px solid var(--border); |
||
| 335 | padding: 24px 18px; |
||
| 336 | position: sticky; |
||
| 337 | top: 48px; |
||
| 338 | height: calc(100vh - 48px); |
||
| 339 | overflow-y: auto; |
||
| 340 | } |
||
| 341 | .panel-title { |
||
| 342 | font-family: 'IBM Plex Mono', monospace; |
||
| 343 | font-size: 10px; |
||
| 344 | font-weight: 600; |
||
| 345 | letter-spacing: .12em; |
||
| 346 | color: var(--muted); |
||
| 347 | text-transform: uppercase; |
||
| 348 | margin-bottom: 14px; |
||
| 349 | } |
||
| 350 | |||
| 351 | .activity-item { |
||
| 352 | display: flex; |
||
| 353 | gap: 10px; |
||
| 354 | padding: 8px 0; |
||
| 355 | border-bottom: 1px solid var(--border); |
||
| 356 | } |
||
| 357 | .activity-item:last-child { border-bottom: none; } |
||
| 358 | .act-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex-shrink: 0; } |
||
| 359 | .act-dot.green { background: var(--accent2); } |
||
| 360 | .act-body { flex: 1; min-width: 0; } |
||
| 361 | .act-title { font-size: 12px; color: var(--heading); line-height: 1.4; margin-bottom: 2px; } |
||
| 362 | .act-meta { font-size: 11px; color: var(--muted); } |
||
| 363 | |||
| 364 | .stat-row { |
||
| 365 | display: flex; |
||
| 366 | justify-content: space-between; |
||
| 367 | align-items: center; |
||
| 368 | padding: 8px 0; |
||
| 369 | border-bottom: 1px solid var(--border); |
||
| 370 | } |
||
| 371 | .stat-row:last-child { border-bottom: none; } |
||
| 372 | .stat-label { font-size: 12px; color: var(--muted); } |
||
| 373 | .stat-val { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--heading); font-weight: 600; } |
||
| 374 | |||
| 375 | /* animations */ |
||
| 376 | @keyframes fadeUp { |
||
| 377 | from { opacity: 0; transform: translateY(12px); } |
||
| 378 | to { opacity: 1; transform: translateY(0); } |
||
| 379 | } |
||
| 380 | main > * { animation: fadeUp .35s ease both; } |
||
| 381 | main > *:nth-child(1) { animation-delay: .05s; } |
||
| 382 | main > *:nth-child(2) { animation-delay: .1s; } |
||
| 383 | main > *:nth-child(3) { animation-delay: .15s; } |
||
| 384 | main > *:nth-child(4) { animation-delay: .2s; } |
||
| 385 | main > *:nth-child(5) { animation-delay: .25s; } |
||
| 386 | |||
| 387 | @media (max-width: 900px) { |
||
| 388 | .layout { grid-template-columns: 1fr; } |
||
| 389 | aside, .panel { display: none; } |
||
| 390 | } |
||
| 391 | </style> |
||
| 392 | </head> |
||
| 393 | <body> |
||
| 394 | |||
| 395 | <!-- ══ HEADER ══ --> |
||
| 396 | <header> |
||
| 397 | <div class="logo"> |
||
| 398 | <div class="logo-dot"></div> |
||
| 399 | redmine |
||
| 400 | </div> |
||
| 401 | <nav> |
||
| 402 | <a href="#" class="active">Accueil</a> |
||
| 403 | <a href="#">Projets</a> |
||
| 404 | <a href="#">Administration</a> |
||
| 405 | <a href="#">Aide</a> |
||
| 406 | </nav> |
||
| 407 | <div class="header-right"> |
||
| 408 | <span class="user-badge">👤 admin</span> |
||
| 409 | <button class="btn-new">+ Nouveau ticket</button> |
||
| 410 | </div> |
||
| 411 | </header> |
||
| 412 | |||
| 413 | <!-- ══ LAYOUT ══ --> |
||
| 414 | <div class="layout"> |
||
| 415 | |||
| 416 | <!-- ── LEFT SIDEBAR ── --> |
||
| 417 | <aside> |
||
| 418 | <div class="sidebar-section"> |
||
| 419 | <div class="sidebar-label">Navigation</div> |
||
| 420 | <ul class="tree"> |
||
| 421 | <li> |
||
| 422 | <a href="#" class="tree-link active"> |
||
| 423 | <span class="tree-icon">🏠</span> Accueil |
||
| 424 | </a> |
||
| 425 | </li> |
||
| 426 | <li> |
||
| 427 | <span class="tree-link" onclick="toggleTree(this)"> |
||
| 428 | <span class="tree-icon">📘</span> Wiki |
||
| 429 | <span class="tree-caret open">▶</span> |
||
| 430 | </span> |
||
| 431 | <ul class="tree subtree open" id="wiki-tree"> |
||
| 432 | <li class="depth-1"> |
||
| 433 | <span class="tree-link" onclick="toggleTree(this)"> |
||
| 434 | <span class="tree-icon">📂</span> Installations |
||
| 435 | <span class="tree-caret open">▶</span> |
||
| 436 | </span> |
||
| 437 | <ul class="tree subtree open"> |
||
| 438 | <li class="depth-2"> |
||
| 439 | <a href="#localwp" class="tree-link"> |
||
| 440 | <span class="tree-icon">⚙️</span> LocalWP Install |
||
| 441 | </a> |
||
| 442 | </li> |
||
| 443 | </ul> |
||
| 444 | </li> |
||
| 445 | </ul> |
||
| 446 | </li> |
||
| 447 | <li> |
||
| 448 | <span class="tree-link" onclick="toggleTree(this)"> |
||
| 449 | <span class="tree-icon">🎫</span> Tickets |
||
| 450 | <span class="tree-caret">▶</span> |
||
| 451 | </span> |
||
| 452 | <ul class="tree subtree" id="tickets-tree"> |
||
| 453 | <li class="depth-1"><a href="#" class="tree-link"><span class="tree-icon">🔴</span> Ouverts</a></li> |
||
| 454 | <li class="depth-1"><a href="#" class="tree-link"><span class="tree-icon">✅</span> Fermés</a></li> |
||
| 455 | <li class="depth-1"><a href="#" class="tree-link"><span class="tree-icon">👤</span> Assignés à moi</a></li> |
||
| 456 | </ul> |
||
| 457 | </li> |
||
| 458 | <li> |
||
| 459 | <a href="#" class="tree-link"> |
||
| 460 | <span class="tree-icon">📅</span> Gantt |
||
| 461 | </a> |
||
| 462 | </li> |
||
| 463 | <li> |
||
| 464 | <a href="#" class="tree-link"> |
||
| 465 | <span class="tree-icon">📊</span> Rapports |
||
| 466 | </a> |
||
| 467 | </li> |
||
| 468 | <li> |
||
| 469 | <a href="#" class="tree-link"> |
||
| 470 | <span class="tree-icon">⚙️</span> Paramètres |
||
| 471 | </a> |
||
| 472 | </li> |
||
| 473 | </ul> |
||
| 474 | </div> |
||
| 475 | </aside> |
||
| 476 | |||
| 477 | <!-- ── MAIN ── --> |
||
| 478 | <main> |
||
| 479 | <!-- Breadcrumb --> |
||
| 480 | <div class="breadcrumb"> |
||
| 481 | <a href="#">Accueil</a> |
||
| 482 | <span>›</span> |
||
| 483 | <span>Vue d'ensemble</span> |
||
| 484 | </div> |
||
| 485 | |||
| 486 | <!-- Title --> |
||
| 487 | <div class="page-title">📋 Tableau de bord</div> |
||
| 488 | <div class="page-meta"> |
||
| 489 | <span>🕐 Mis à jour aujourd'hui</span> |
||
| 490 | <span>📁 Projet principal</span> |
||
| 491 | </div> |
||
| 492 | |||
| 493 | <!-- Quick links --> |
||
| 494 | <div class="cards-heading">Accès rapide</div> |
||
| 495 | <div class="cards"> |
||
| 496 | <a href="#wiki" class="card"> |
||
| 497 | <div class="card-icon">📘</div> |
||
| 498 | <div class="card-title">Wiki</div> |
||
| 499 | <div class="card-desc">Documentation, guides d'installation et notes techniques.</div> |
||
| 500 | </a> |
||
| 501 | <a href="#" class="card"> |
||
| 502 | <div class="card-icon">🎫</div> |
||
| 503 | <div class="card-title">Tickets</div> |
||
| 504 | <div class="card-desc">Suivre et gérer les tickets ouverts du projet.</div> |
||
| 505 | </a> |
||
| 506 | <a href="#" class="card"> |
||
| 507 | <div class="card-icon">📅</div> |
||
| 508 | <div class="card-title">Planning</div> |
||
| 509 | <div class="card-desc">Vue Gantt et jalons du projet.</div> |
||
| 510 | </a> |
||
| 511 | <a href="#" class="card"> |
||
| 512 | <div class="card-icon">📊</div> |
||
| 513 | <div class="card-title">Rapports</div> |
||
| 514 | <div class="card-desc">Statistiques et tableaux de bord analytiques.</div> |
||
| 515 | </a> |
||
| 516 | </div> |
||
| 517 | |||
| 518 | <hr class="divider"/> |
||
| 519 | |||
| 520 | <!-- Wiki tree --> |
||
| 521 | <div class="cards-heading" id="wiki">Structure du Wiki</div> |
||
| 522 | <div class="wiki-section"> |
||
| 523 | <div class="wiki-header"> |
||
| 524 | <span>📘</span> |
||
| 525 | <span class="wiki-header-title">Wiki</span> |
||
| 526 | <span class="wiki-header-badge">1 page</span> |
||
| 527 | </div> |
||
| 528 | <div class="wiki-tree"> |
||
| 529 | |||
| 530 | <!-- L0: Wiki root --> |
||
| 531 | <a href="#wiki" class="wiki-node l0"> |
||
| 532 | <span class="ico">📘</span> |
||
| 533 | <span class="lbl">Wiki</span> |
||
| 534 | <span class="tag blue">racine</span> |
||
| 535 | </a> |
||
| 536 | |||
| 537 | <!-- L1: Installations --> |
||
| 538 | <a href="#installations" class="wiki-node l1"> |
||
| 539 | <span class="connector">└─</span> |
||
| 540 | <span class="ico">📂</span> |
||
| 541 | <span class="lbl">Installations</span> |
||
| 542 | <span class="tag">catégorie</span> |
||
| 543 | <span class="arrow">›</span> |
||
| 544 | </a> |
||
| 545 | |||
| 546 | <!-- L2: LocalWP --> |
||
| 547 | <a href="#localwp" class="wiki-node l2" id="localwp"> |
||
| 548 | <span class="connector">└─</span> |
||
| 549 | <span class="ico">⚙️</span> |
||
| 550 | <span class="lbl">LocalWP Install</span> |
||
| 551 | <span class="tag green">page</span> |
||
| 552 | <span class="arrow">›</span> |
||
| 553 | </a> |
||
| 554 | |||
| 555 | </div> |
||
| 556 | </div> |
||
| 557 | |||
| 558 | <!-- LocalWP preview card --> |
||
| 559 | <div class="cards-heading" id="installations">Page en avant — LocalWP Install</div> |
||
| 560 | <div class="wiki-section" id="localwp-detail"> |
||
| 561 | <div class="wiki-header"> |
||
| 562 | <span>⚙️</span> |
||
| 563 | <span class="wiki-header-title">LocalWP Install</span> |
||
| 564 | <span class="wiki-header-badge">Wiki › Installations</span> |
||
| 565 | </div> |
||
| 566 | <div style="padding: 20px 24px; color: var(--muted); font-size: 13px; line-height: 1.8;"> |
||
| 567 | <p style="color:var(--heading); font-weight:600; margin-bottom:10px;">📄 Contenu de la page</p> |
||
| 568 | <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> |
||
| 569 | <br/> |
||
| 570 | <p style="color:var(--muted)">Sections prévues :</p> |
||
| 571 | <ul style="list-style:none; margin-top:8px;"> |
||
| 572 | <li style="padding:4px 0; display:flex; gap:8px;"><span style="color:var(--accent2)">✓</span> Prérequis système</li> |
||
| 573 | <li style="padding:4px 0; display:flex; gap:8px;"><span style="color:var(--accent2)">✓</span> Téléchargement et installation</li> |
||
| 574 | <li style="padding:4px 0; display:flex; gap:8px;"><span style="color:var(--accent2)">✓</span> Configuration initiale</li> |
||
| 575 | <li style="padding:4px 0; display:flex; gap:8px;"><span style="color:var(--muted)">○</span> Création d'un premier site</li> |
||
| 576 | <li style="padding:4px 0; display:flex; gap:8px;"><span style="color:var(--muted)">○</span> Dépannage courant</li> |
||
| 577 | </ul> |
||
| 578 | <br/> |
||
| 579 | <div style="display:flex; gap:10px; flex-wrap:wrap;"> |
||
| 580 | <a href="#" style="background:var(--accent);color:#fff;text-decoration:none;border-radius:6px;padding:7px 16px;font-size:12px;">✏️ Éditer la page</a> |
||
| 581 | <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> |
||
| 582 | </div> |
||
| 583 | </div> |
||
| 584 | </div> |
||
| 585 | |||
| 586 | </main> |
||
| 587 | |||
| 588 | <!-- ── RIGHT PANEL ── --> |
||
| 589 | <div class="panel"> |
||
| 590 | <div class="panel-title">Activité récente</div> |
||
| 591 | <div class="activity-item"> |
||
| 592 | <div class="act-dot"></div> |
||
| 593 | <div class="act-body"> |
||
| 594 | <div class="act-title">Wiki — LocalWP Install créée</div> |
||
| 595 | <div class="act-meta">il y a 2 heures · admin</div> |
||
| 596 | </div> |
||
| 597 | </div> |
||
| 598 | <div class="activity-item"> |
||
| 599 | <div class="act-dot green"></div> |
||
| 600 | <div class="act-body"> |
||
| 601 | <div class="act-title">Ticket #12 fermé</div> |
||
| 602 | <div class="act-meta">il y a 4 heures · admin</div> |
||
| 603 | </div> |
||
| 604 | </div> |
||
| 605 | <div class="activity-item"> |
||
| 606 | <div class="act-dot"></div> |
||
| 607 | <div class="act-body"> |
||
| 608 | <div class="act-title">Wiki — catégorie Installations ajoutée</div> |
||
| 609 | <div class="act-meta">hier · admin</div> |
||
| 610 | </div> |
||
| 611 | </div> |
||
| 612 | <div class="activity-item"> |
||
| 613 | <div class="act-dot green"></div> |
||
| 614 | <div class="act-body"> |
||
| 615 | <div class="act-title">Projet initialisé</div> |
||
| 616 | <div class="act-meta">il y a 3 jours · admin</div> |
||
| 617 | </div> |
||
| 618 | </div> |
||
| 619 | |||
| 620 | <hr class="divider"/> |
||
| 621 | |||
| 622 | <div class="panel-title">Statistiques</div> |
||
| 623 | <div class="stat-row"> |
||
| 624 | <span class="stat-label">Pages Wiki</span> |
||
| 625 | <span class="stat-val">1</span> |
||
| 626 | </div> |
||
| 627 | <div class="stat-row"> |
||
| 628 | <span class="stat-label">Tickets ouverts</span> |
||
| 629 | <span class="stat-val">0</span> |
||
| 630 | </div> |
||
| 631 | <div class="stat-row"> |
||
| 632 | <span class="stat-label">Membres</span> |
||
| 633 | <span class="stat-val">1</span> |
||
| 634 | </div> |
||
| 635 | <div class="stat-row"> |
||
| 636 | <span class="stat-label">Dernière activité</span> |
||
| 637 | <span class="stat-val">auj.</span> |
||
| 638 | </div> |
||
| 639 | </div> |
||
| 640 | |||
| 641 | </div> |
||
| 642 | |||
| 643 | <script> |
||
| 644 | function toggleTree(el) { |
||
| 645 | const caret = el.querySelector('.tree-caret'); |
||
| 646 | const subtree = el.nextElementSibling; |
||
| 647 | if (!subtree || !subtree.classList.contains('subtree')) return; |
||
| 648 | subtree.classList.toggle('open'); |
||
| 649 | if (caret) caret.classList.toggle('open'); |
||
| 650 | } |
||
| 651 | </script> |
||
| 652 | </body> |
||
| 653 | </html> |