Premier jet : gabarit SVG et rendu PNG
This commit is contained in:
commit
81fd9dd717
5 changed files with 761 additions and 0 deletions
163
static/index.html
Normal file
163
static/index.html
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
<!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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue