feat: initial commit

test.html

@@ -0,0 +1,164 @@
+<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>