fico/test.html

<style>
    :root {
      --bg: #0b0f14;
      --panel: #111826;
      --panel2: #0f1623;
      --text: #e6edf3;
      --muted: #9aa4b2;
      --accent: #7aa2f7;
      --border: rgba(255,255,255,0.08);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, Arial;
      background: radial-gradient(circle at top, #111826, var(--bg));
      color: var(--text);
      padding: 40px;
      height: 100dvh;
    }

    .container {
      max-width: 950px;
      margin: auto;
    }

    h1 {
      font-size: 48px;
      margin: 0;
      letter-spacing: 1px;
    }

    .subtitle {
      color: var(--muted);
      margin-top: 6px;
      margin-bottom: 30px;
    }

    .tag {
      display: inline-block;
      padding: 4px 10px;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--accent);
      font-size: 12px;
      margin-top: 10px;
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      margin-top: 30px;
    }

    .card {
      background: linear-gradient(180deg, var(--panel), var(--panel2));
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 18px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }

    .card h2 {
      margin-top: 0;
      font-size: 18px;
      color: var(--accent);
    }

    pre {
      background: #0a0f18;
      padding: 14px;
      border-radius: 10px;
      overflow-x: auto;
      border: 1px solid var(--border);
      color: #cbd5e1;
    }

    input[type="file"] {
      margin-top: 10px;
      color: var(--muted);
    }

    button {
      margin-top: 12px;
      background: var(--accent);
      border: none;
      color: black;
      padding: 10px 14px;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 600;
      transition: 0.2s;
    }

    button:hover {
      transform: translateY(-1px);
      opacity: 0.9;
    }

    #log {
      margin-top: 10px;
      font-size: 13px;
      color: var(--muted);
      white-space: pre-wrap;
    }

    .highlight {
      color: var(--accent);
    }
  </style>

<div class="container">

  <h1>FICO</h1>
  <div class="subtitle">
    File In Canvas Output — data stored inside images
  </div>

  <div class="tag">experimental / browser / CLI / favicon storage</div>

  <div class="grid">

    <div class="card">
      <h2>🧠 Concept</h2>
      <p>
        FICO transforme des fichiers en <span class="highlight">images PNG</span>
        pour transporter des données dans des supports visuels comme les favicons,
        images web ou storage invisible.
      </p>
    </div>

    <div class="card">
      <h2>⚙️ Pipeline</h2>
      <pre>
File (txt / binary)
        ↓
FICO encode
        ↓
Uint8Array
        ↓
PNG image
        ↓
favicon / transport
        ↓
decode → original file
      </pre>
    </div>

    <div class="card">
      <h2>📦 Features</h2>
      <ul>
        <li>File → Image encoding</li>
        <li>Browser + CLI architecture</li>
        <li>Favicon storage experiments</li>
        <li>Zero runtime dependencies (browser side)</li>
      </ul>
    </div>

  </div>
</div>