card-generator/static/index.html

<!doctype html>
<html lang="fr" data-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
<title>Card Generator · Yasder</title>
<link rel="stylesheet" href="/static/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,700&family=Syne:wght@400;600&family=DM+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
</head>
<body>

<header class="app-header">
  <div class="brand">
    <svg class="brand-logo" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M204.3 5C104.9 24.4 24.8 104.3 5.2 203.4c-37 187 131.7 326.4 258.8 306.7 41.2-6.4 61.4-54.6 42.5-91.7-23.1-45.4 9.9-98.4 60.9-98.4h79.7c35.8 0 64.8-29.6 64.9-65.3C511.5 97.1 368 -38.1 204.3 5zM96 320c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm32-128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128-64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"/>
    </svg>
    <span class="brand-mark">YB<span class="dot">.</span></span>
    <span class="brand-name">Card Generator</span>
  </div>
  <div class="brand-tagline">Mêmes cartes que sur yasser.boulayoune.com · Fraunces / Syne / DM Sans</div>
</header>

<main class="app">

  <!-- LEFT: form -->
  <aside class="panel form-panel">
    <h2>Contenu</h2>

    <div class="field">
      <label for="eyebrow">Eyebrow <span class="hint">(petit titre en haut, en majuscules)</span></label>
      <input id="eyebrow" type="text" value="RÉALISATION · SYMFONY" maxlength="60">
    </div>

    <div class="field">
      <label for="title">Titre (ligne 1)</label>
      <input id="title" type="text" value="pokedwwmm" maxlength="40">
    </div>

    <div class="field">
      <label for="title_2">Titre ligne 2 <span class="hint">(optionnel · pour titre sur 2 lignes)</span></label>
      <input id="title_2" type="text" value="" maxlength="40">
    </div>

    <div class="field">
      <label for="tagline">Tagline <span class="hint">(stack, mots-clés)</span></label>
      <input id="tagline" type="text" value="151 Pokémon · Twig Components · JSON" maxlength="80">
    </div>

    <h2>Couleurs</h2>

    <div class="field row">
      <div class="row-col">
        <label for="accent">Couleur d'accent</label>
        <input id="accent" type="color" value="#ef4444">
      </div>
      <div class="row-col">
        <label for="logo_color">Couleur du logo <span class="hint">(SVG icônes uniquement)</span></label>
        <input id="logo_color" type="color" value="#ef4444">
      </div>
    </div>

    <div class="field">
      <label>Palettes rapides</label>
      <div class="swatches">
        <button type="button" class="swatch" data-color="#ef4444" title="Rouge Symfony"></button>
        <button type="button" class="swatch" data-color="#5865f2" title="Discord violet"></button>
        <button type="button" class="swatch" data-color="#21759b" title="WordPress bleu"></button>
        <button type="button" class="swatch" data-color="#a855f7" title="Violet"></button>
        <button type="button" class="swatch" data-color="#22c55e" title="Vert Node"></button>
        <button type="button" class="swatch" data-color="#fb923c" title="Orange Forgejo"></button>
        <button type="button" class="swatch" data-color="#3b82f6" title="Bleu"></button>
        <button type="button" class="swatch" data-color="#06b6d4" title="Cyan"></button>
        <button type="button" class="swatch" data-color="#f5f5f7" title="Blanc"></button>
        <button type="button" class="swatch" data-color="#a8e063" title="Lime"></button>
      </div>
    </div>

    <h2>Logo</h2>

    <div class="field">
      <label>Source</label>
      <div class="seg">
        <button type="button" class="seg-btn active" data-kind="preset">Bibliothèque</button>
        <button type="button" class="seg-btn" data-kind="upload">Upload PNG</button>
        <button type="button" class="seg-btn" data-kind="text">Texte</button>
        <button type="button" class="seg-btn" data-kind="none">Aucun</button>
      </div>
    </div>

    <div class="field logo-source preset-source">
      <label for="logo_preset">Icône (simpleicons + FontAwesome)</label>
      <div class="logo-grid" id="logo_grid"></div>
    </div>

    <div class="field logo-source upload-source" hidden>
      <label for="logo_upload">Upload une image (PNG transparent recommandé, ou SVG)</label>
      <input id="logo_upload" type="file" accept="image/png,image/svg+xml,image/webp,image/jpeg">
      <div id="upload_preview" class="upload-preview" hidden></div>
    </div>

    <div class="field logo-source text-source" hidden>
      <label for="logo_text">Texte du logo <span class="hint">(monogramme · ex : YB.)</span></label>
      <input id="logo_text" type="text" value="YB." maxlength="6">
    </div>

    <div class="field">
      <label for="logo_size">Taille du logo <output id="logo_size_val">260px</output></label>
      <input id="logo_size" type="range" min="120" max="380" step="10" value="260">
    </div>

    <h2>Export</h2>

    <div class="field">
      <label for="filename">Nom du fichier</label>
      <input id="filename" type="text" value="card" maxlength="60">
    </div>

    <div class="field row">
      <div class="row-col">
        <label for="export_width">Largeur PNG</label>
        <select id="export_width">
          <option value="800">800 × 500 (1×)</option>
          <option value="1600" selected>1600 × 1000 (2×, retina)</option>
          <option value="2400">2400 × 1500 (3×)</option>
        </select>
      </div>
    </div>

    <div class="actions">
      <button id="btn-png" type="button" class="btn btn-primary">⬇ Télécharger PNG</button>
      <button id="btn-svg" type="button" class="btn">⬇ Télécharger SVG</button>
    </div>

  </aside>

  <!-- RIGHT: preview -->
  <section class="panel preview-panel">
    <header class="preview-header">
      <h2>Aperçu</h2>
      <div class="zoom-info">800 × 500 · preview live</div>
    </header>

    <div class="preview-wrap">
      <div id="preview-frame">
        <!-- SVG is injected here -->
      </div>
    </div>

    <footer class="preview-footer">
      <span id="status" class="status">prêt</span>
    </footer>
  </section>

</main>

<script src="/static/app.js"></script>
</body>
</html>