docs(marketing): outils d'export logo + OG image + image LinkedIn
Trois templates HTML autonomes pour générer les assets visuels sans quitter le repo : - `docs/logo-export.html` — outil interactif d'export du wordmark Rubis.pro en PNG (Bricolage Grotesque). 3 layouts (horizontal, vertical, texte seul), 5 fonds, 5 couleurs, taille 120 → 4096 px, format carré. Preset 120 px pour le logo de consent screen Google OAuth. Le canvas attend `document.fonts.ready` avant rendu pour éviter le fallback sans-serif. - `docs/og-default-source.html` — recréation HTML pixel-perfect du `og-default.png` (1200×630) avec le nouveau wordmark `Rubis.pro` et `DSO*`. Export via Chrome DevTools "Capture node screenshot" pour remplacer `apps/landing/public/og-default.png`. - `docs/linkedin-launch-source.html` — image carrée 1200×1200 pour un post de lancement LinkedIn. Format optimal pour le feed mobile (LinkedIn n'crop pas les carrés). Headline + stat-héros + brand. Tous les gems sont des SVG inline (4 facettes + contour) — identité visuelle 1:1 avec `<Gem/>` du SPA et `favicon.svg`. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
ordinarthur
parent
3052a7e909
commit
642747d762
305
docs/linkedin-launch-source.html
Normal file
305
docs/linkedin-launch-source.html
Normal file
@ -0,0 +1,305 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>LinkedIn launch image — Rubis.pro</title>
|
||||
<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=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
:root {
|
||||
--rubis: #9F1239;
|
||||
--rubis-deep: #771328;
|
||||
--rubis-light: #C9415C;
|
||||
--rubis-glow: #FBE4EA;
|
||||
--cream: #FAF7F2;
|
||||
--cream-2: #F4EFE7;
|
||||
--ink: #1A1410;
|
||||
--ink-2: #4A3F36;
|
||||
--ink-3: #8B7E73;
|
||||
--line: #E8E0D6;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: #2a2520;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 40px 20px;
|
||||
gap: 20px;
|
||||
font-family: "Inter", system-ui, sans-serif;
|
||||
}
|
||||
.instructions {
|
||||
max-width: 900px;
|
||||
color: #ddd;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
background: #1a1410;
|
||||
padding: 16px 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.instructions code {
|
||||
background: #3a3530;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: ui-monospace, Menlo, monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
/*
|
||||
* #li : carré 1200×1200 — format optimal pour le feed LinkedIn mobile
|
||||
* (LinkedIn affiche les images carrées sans crop, ce qui maximise la
|
||||
* vertical real estate quand le user scrolle). Pour exporter : Chrome
|
||||
* DevTools → Elements → sélectionner #li → clic droit → "Capture node
|
||||
* screenshot".
|
||||
*/
|
||||
#li {
|
||||
width: 1200px;
|
||||
height: 1200px;
|
||||
background: var(--cream);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-family: "Inter", system-ui, sans-serif;
|
||||
color: var(--ink);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 90px 90px 80px;
|
||||
}
|
||||
|
||||
/* Halo rubis en haut-droite — brand color signal sans dominer */
|
||||
.halo {
|
||||
position: absolute;
|
||||
top: -300px;
|
||||
right: -300px;
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, var(--rubis-glow) 0%, transparent 65%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Gem géant en filigrane derrière le headline — signature visuelle */
|
||||
.gem-bg {
|
||||
position: absolute;
|
||||
bottom: -140px;
|
||||
left: -140px;
|
||||
width: 720px;
|
||||
height: 720px;
|
||||
opacity: 0.08;
|
||||
transform: rotate(0deg);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ============ Header (brand lockup) ============ */
|
||||
.top {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
font-family: "Bricolage Grotesque", sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: 36px;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--ink);
|
||||
line-height: 1;
|
||||
}
|
||||
.brand .gem {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
.brand .suffix {
|
||||
color: var(--ink-3);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 16px;
|
||||
background: white;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--ink-2);
|
||||
}
|
||||
.badge .dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #2d8a4e;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 3px rgba(45, 138, 78, 0.18);
|
||||
}
|
||||
|
||||
/* ============ Centre — headline + sub ============ */
|
||||
.center {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 920px;
|
||||
}
|
||||
h1 {
|
||||
font-family: "Bricolage Grotesque", sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: 110px;
|
||||
line-height: 0.98;
|
||||
letter-spacing: -0.04em;
|
||||
color: var(--ink);
|
||||
}
|
||||
h1 em {
|
||||
font-style: italic;
|
||||
color: var(--rubis);
|
||||
font-weight: 800;
|
||||
}
|
||||
.sub {
|
||||
margin-top: 32px;
|
||||
font-size: 28px;
|
||||
line-height: 1.4;
|
||||
color: var(--ink-2);
|
||||
font-weight: 400;
|
||||
max-width: 760px;
|
||||
}
|
||||
.sub b { color: var(--ink); font-weight: 700; }
|
||||
|
||||
/* ============ Stat chip ============ */
|
||||
.stat-row {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.stat {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
padding: 14px 22px;
|
||||
background: var(--rubis);
|
||||
color: var(--cream);
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 8px 24px rgba(159, 18, 57, 0.25);
|
||||
}
|
||||
.stat .num {
|
||||
font-family: "Bricolage Grotesque", sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: 36px;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1;
|
||||
}
|
||||
.stat .label {
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.stat-sep {
|
||||
font-size: 22px;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
.stat-soft {
|
||||
font-size: 20px;
|
||||
color: var(--ink-2);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ============ Footer ============ */
|
||||
.bottom {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
}
|
||||
.domain {
|
||||
font-family: "Bricolage Grotesque", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--ink);
|
||||
}
|
||||
.domain .arrow {
|
||||
color: var(--rubis);
|
||||
margin-right: 8px;
|
||||
}
|
||||
.tag {
|
||||
font-size: 17px;
|
||||
color: var(--ink-3);
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">
|
||||
<strong>Comment exporter en PNG 1200×1200</strong> — ouvrir Chrome DevTools (<code>⌘⌥I</code>),
|
||||
sélectionner la div <code>#li</code> dans l'arbre Elements, clic droit →
|
||||
<em>Capture node screenshot</em>. Format optimal pour un post LinkedIn dans le feed mobile.
|
||||
</p>
|
||||
|
||||
<div id="li">
|
||||
<div class="halo"></div>
|
||||
|
||||
<!-- Gem fantôme en arrière-plan -->
|
||||
<svg class="gem-bg" viewBox="0 0 100 100" fill="none">
|
||||
<polygon points="50,6 6,50 50,50" fill="#9F1239" fill-opacity="1"/>
|
||||
<polygon points="50,6 94,50 50,50" fill="#9F1239" fill-opacity="0.8"/>
|
||||
<polygon points="6,50 50,50 50,94" fill="#9F1239" fill-opacity="0.65"/>
|
||||
<polygon points="50,50 94,50 50,94" fill="#9F1239" fill-opacity="0.48"/>
|
||||
<polygon points="50,6 94,50 50,94 6,50" fill="none" stroke="#9F1239" stroke-width="1.6" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
||||
<!-- Top : brand + statut -->
|
||||
<div class="top">
|
||||
<div class="brand">
|
||||
<svg class="gem" viewBox="0 0 100 100" fill="none">
|
||||
<polygon points="50,6 6,50 50,50" fill="#9F1239" fill-opacity="1"/>
|
||||
<polygon points="50,6 94,50 50,50" fill="#9F1239" fill-opacity="0.8"/>
|
||||
<polygon points="6,50 50,50 50,94" fill="#9F1239" fill-opacity="0.65"/>
|
||||
<polygon points="50,50 94,50 50,94" fill="#9F1239" fill-opacity="0.48"/>
|
||||
<polygon points="50,6 94,50 50,94 6,50" fill="none" stroke="#9F1239" stroke-width="1.6" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span>Rubis<span class="suffix">.pro</span></span>
|
||||
</div>
|
||||
<span class="badge">
|
||||
<span class="dot"></span>
|
||||
En ligne
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Centre : headline -->
|
||||
<div class="center">
|
||||
<h1>
|
||||
Vos factures<br />
|
||||
relancées<br />
|
||||
<em>toutes seules</em>.
|
||||
</h1>
|
||||
<p class="sub">
|
||||
Le SaaS de relance pour TPE-PME françaises. Drag-and-drop, OCR,
|
||||
plans de relance automatiques.
|
||||
</p>
|
||||
<div class="stat-row">
|
||||
<span class="stat">
|
||||
<span class="num">5 h</span>
|
||||
<span class="label">par semaine récupérées</span>
|
||||
</span>
|
||||
<span class="stat-sep">·</span>
|
||||
<span class="stat-soft">8 h → moins de 3</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom : domaine + tag -->
|
||||
<div class="bottom">
|
||||
<span class="domain">
|
||||
<span class="arrow">→</span>rubis.pro
|
||||
</span>
|
||||
<span class="tag">30 jours gratuits · sans carte bancaire</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
585
docs/logo-export.html
Normal file
585
docs/logo-export.html
Normal file
@ -0,0 +1,585 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Logo export — Rubis.pro</title>
|
||||
<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=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
:root {
|
||||
--rubis: #9F1239;
|
||||
--rubis-deep: #771328;
|
||||
--rubis-light: #C9415C;
|
||||
--rubis-glow: #FBE4EA;
|
||||
--cream: #FAF7F2;
|
||||
--ink: #1A1410;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: "Inter", system-ui, sans-serif;
|
||||
background: var(--cream);
|
||||
color: var(--ink);
|
||||
min-height: 100vh;
|
||||
padding: 32px;
|
||||
}
|
||||
.app {
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr;
|
||||
gap: 32px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
h1 {
|
||||
font-family: "Bricolage Grotesque", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 28px;
|
||||
margin: 0 0 4px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.sub {
|
||||
font-size: 13px;
|
||||
color: #6b5f57;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.panel {
|
||||
background: white;
|
||||
border: 1px solid #e8e0d6;
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
}
|
||||
.controls h2 {
|
||||
font-family: "Bricolage Grotesque", sans-serif;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: #6b5f57;
|
||||
margin: 0 0 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.group { margin-bottom: 20px; }
|
||||
.group:last-child { margin-bottom: 0; }
|
||||
.seg {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 6px;
|
||||
}
|
||||
.seg.three { grid-template-columns: repeat(3, 1fr); }
|
||||
.seg button {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-size: 13px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #e8e0d6;
|
||||
background: white;
|
||||
color: var(--ink);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.12s;
|
||||
}
|
||||
.seg button:hover { border-color: var(--rubis-light); }
|
||||
.seg button.active {
|
||||
background: var(--rubis);
|
||||
color: white;
|
||||
border-color: var(--rubis);
|
||||
}
|
||||
.swatches {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 6px;
|
||||
}
|
||||
.swatches button {
|
||||
aspect-ratio: 1;
|
||||
border: 2px solid #e8e0d6;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.12s;
|
||||
position: relative;
|
||||
}
|
||||
.swatches button.active {
|
||||
border-color: var(--rubis);
|
||||
box-shadow: 0 0 0 2px var(--rubis-glow);
|
||||
}
|
||||
.swatches button[data-bg="transparent"] {
|
||||
background-image:
|
||||
linear-gradient(45deg, #ddd 25%, transparent 25%),
|
||||
linear-gradient(-45deg, #ddd 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, #ddd 75%),
|
||||
linear-gradient(-45deg, transparent 75%, #ddd 75%);
|
||||
background-size: 8px 8px;
|
||||
background-position: 0 0, 0 4px, 4px -4px, -4px 0;
|
||||
}
|
||||
label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
margin-bottom: 6px;
|
||||
color: #6b5f57;
|
||||
}
|
||||
input[type="range"] {
|
||||
width: 100%;
|
||||
accent-color: var(--rubis);
|
||||
}
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #e8e0d6;
|
||||
border-radius: 8px;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-size: 13px;
|
||||
}
|
||||
input[type="text"]:focus {
|
||||
outline: none;
|
||||
border-color: var(--rubis);
|
||||
box-shadow: 0 0 0 3px var(--rubis-glow);
|
||||
}
|
||||
.toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 10px;
|
||||
background: var(--cream);
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.toggle input { margin: 0; accent-color: var(--rubis); }
|
||||
.export {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
background: var(--rubis);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-family: "Bricolage Grotesque", sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.export:hover { background: var(--rubis-deep); }
|
||||
|
||||
.preview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
.preview-stage {
|
||||
flex: 1;
|
||||
min-height: 480px;
|
||||
border: 1px dashed #d4cabe;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
background-image:
|
||||
linear-gradient(45deg, #f0e9de 25%, transparent 25%),
|
||||
linear-gradient(-45deg, #f0e9de 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, #f0e9de 75%),
|
||||
linear-gradient(-45deg, transparent 75%, #f0e9de 75%);
|
||||
background-size: 16px 16px;
|
||||
background-position: 0 0, 0 8px, 8px -8px, -8px 0;
|
||||
}
|
||||
#stage canvas {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
box-shadow: 0 8px 30px rgba(26, 20, 16, 0.12);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.info {
|
||||
font-size: 12px;
|
||||
color: #6b5f57;
|
||||
text-align: center;
|
||||
}
|
||||
.font-status {
|
||||
font-size: 12px;
|
||||
color: #6b5f57;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.font-status.loaded { color: #2d8a4e; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<aside class="controls">
|
||||
<h1>Logo export</h1>
|
||||
<p class="sub">Wordmark Rubis.pro · Bricolage Grotesque · PNG haute résolution</p>
|
||||
|
||||
<div class="panel">
|
||||
<div class="group">
|
||||
<h2>Texte</h2>
|
||||
<input type="text" id="text" value="Rubis.pro" />
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<h2>Layout</h2>
|
||||
<div class="seg three" id="layout">
|
||||
<button data-layout="horizontal" class="active">Horizontal</button>
|
||||
<button data-layout="vertical">Vertical</button>
|
||||
<button data-layout="wordmark">Texte seul</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<h2>Couleur du logo</h2>
|
||||
<div class="seg three" id="fg">
|
||||
<button data-fg="rubis" class="active">Rubis</button>
|
||||
<button data-fg="ink">Encre</button>
|
||||
<button data-fg="cream">Crème</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<h2>Fond</h2>
|
||||
<div class="swatches" id="bg">
|
||||
<button data-bg="cream" style="background:#FAF7F2" class="active" title="Crème"></button>
|
||||
<button data-bg="white" style="background:#ffffff" title="Blanc"></button>
|
||||
<button data-bg="ink" style="background:#1A1410" title="Encre"></button>
|
||||
<button data-bg="rubis" style="background:#9F1239" title="Rubis"></button>
|
||||
<button data-bg="transparent" title="Transparent"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<h2>Graisse</h2>
|
||||
<div class="seg three" id="weight">
|
||||
<button data-weight="500">500</button>
|
||||
<button data-weight="700" class="active">700</button>
|
||||
<button data-weight="800">800</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<h2>Taille export</h2>
|
||||
<div class="seg" id="size-presets" style="grid-template-columns: repeat(5, 1fr); margin-bottom: 8px;">
|
||||
<button data-size="120" title="Google OAuth consent (120×120)">120</button>
|
||||
<button data-size="512">512</button>
|
||||
<button data-size="1024">1024</button>
|
||||
<button data-size="2048" class="active">2048</button>
|
||||
<button data-size="4096">4096</button>
|
||||
</div>
|
||||
<label><span>Côté</span><span id="size-val">2048 × 2048 px</span></label>
|
||||
<input type="range" id="size" min="120" max="4096" step="8" value="2048" />
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<label class="toggle">
|
||||
<span>Padding interne</span>
|
||||
<input type="checkbox" id="padding" checked />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button class="export" id="export-btn">Télécharger en PNG</button>
|
||||
<p class="font-status" id="font-status">Chargement de la police…</p>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="preview">
|
||||
<div class="preview-stage">
|
||||
<div id="stage"></div>
|
||||
</div>
|
||||
<p class="info" id="info"></p>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// --- State ---
|
||||
const state = {
|
||||
text: "Rubis.pro",
|
||||
layout: "horizontal",
|
||||
fg: "rubis",
|
||||
bg: "cream",
|
||||
weight: 700,
|
||||
size: 2048,
|
||||
padding: true,
|
||||
};
|
||||
|
||||
const COLORS = {
|
||||
rubis: "#9F1239",
|
||||
"rubis-deep": "#771328",
|
||||
"rubis-light": "#C9415C",
|
||||
ink: "#1A1410",
|
||||
cream: "#FAF7F2",
|
||||
white: "#ffffff",
|
||||
};
|
||||
|
||||
// --- Drawing ---
|
||||
/**
|
||||
* Dessine le gem facetté (4 facettes + contour) à la position (x, y) avec
|
||||
* la taille `size` et la couleur `color`. Reproduit exactement <Gem/> du
|
||||
* SPA / favicon.svg, mais en canvas — garantit l'identité visuelle 1:1.
|
||||
*/
|
||||
function drawGem(ctx, x, y, size, color) {
|
||||
const s = size / 88; // viewBox interne 88x88 (de 6 à 94)
|
||||
const cx = x + size / 2;
|
||||
const cy = y + size / 2;
|
||||
const tx = (px) => cx + (px - 50) * s;
|
||||
const ty = (py) => cy + (py - 50) * s;
|
||||
|
||||
const facets = [
|
||||
{ pts: [[50, 6], [6, 50], [50, 50]], alpha: 1.0 },
|
||||
{ pts: [[50, 6], [94, 50], [50, 50]], alpha: 0.8 },
|
||||
{ pts: [[6, 50], [50, 50], [50, 94]], alpha: 0.65 },
|
||||
{ pts: [[50, 50], [94, 50], [50, 94]], alpha: 0.48 },
|
||||
];
|
||||
for (const { pts, alpha } of facets) {
|
||||
ctx.globalAlpha = alpha;
|
||||
ctx.fillStyle = color;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(tx(pts[0][0]), ty(pts[0][1]));
|
||||
ctx.lineTo(tx(pts[1][0]), ty(pts[1][1]));
|
||||
ctx.lineTo(tx(pts[2][0]), ty(pts[2][1]));
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
ctx.globalAlpha = 1;
|
||||
ctx.strokeStyle = color;
|
||||
ctx.lineWidth = Math.max(1.6 * s, 1);
|
||||
ctx.lineJoin = "round";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(tx(50), ty(6));
|
||||
ctx.lineTo(tx(94), ty(50));
|
||||
ctx.lineTo(tx(50), ty(94));
|
||||
ctx.lineTo(tx(6), ty(50));
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
/**
|
||||
* Construit un canvas avec le logo selon le state courant.
|
||||
* Renvoie { canvas, width, height } — le canvas est dimensionné pour matcher
|
||||
* le contenu (avec padding optionnel), pas forcé carré.
|
||||
*/
|
||||
function renderLogo(opts = {}) {
|
||||
const exportSize = opts.size ?? state.size;
|
||||
const dpr = opts.dpr ?? 1;
|
||||
const fgColor = COLORS[state.fg];
|
||||
const bgColor = state.bg === "transparent" ? null : COLORS[state.bg];
|
||||
|
||||
// Le wordmark est dimensionné en fonction de la largeur cible.
|
||||
// Bricolage Grotesque a une cap-height ~0.72 et un descender ~0.22.
|
||||
// Pour un rendu propre, on calcule d'abord la métrique du texte puis
|
||||
// on positionne tout autour.
|
||||
|
||||
// Off-screen mesure
|
||||
const measure = document.createElement("canvas").getContext("2d");
|
||||
|
||||
// En layout "wordmark" pur, le texte fait ~80% de la largeur.
|
||||
// En "horizontal", gem prend ~0.18 de la largeur, gap ~0.05, texte le reste.
|
||||
// En "vertical", gem au-dessus, texte en-dessous.
|
||||
|
||||
const padding = state.padding ? exportSize * 0.08 : 0;
|
||||
|
||||
let textHeightRatio; // hauteur du texte / hauteur totale du contenu
|
||||
let gemSize, gap, contentW, contentH;
|
||||
let fontSize;
|
||||
|
||||
if (state.layout === "wordmark") {
|
||||
// Texte seul : on calibre la fontSize pour que le texte rendu fasse
|
||||
// ~exportSize - 2*padding de large.
|
||||
const targetW = exportSize - 2 * padding;
|
||||
fontSize = 100;
|
||||
measure.font = `${state.weight} ${fontSize}px "Bricolage Grotesque", sans-serif`;
|
||||
const w0 = measure.measureText(state.text).width;
|
||||
fontSize = (targetW / w0) * fontSize;
|
||||
measure.font = `${state.weight} ${fontSize}px "Bricolage Grotesque", sans-serif`;
|
||||
const m = measure.measureText(state.text);
|
||||
const ascent = m.actualBoundingBoxAscent || fontSize * 0.75;
|
||||
const descent = m.actualBoundingBoxDescent || fontSize * 0.22;
|
||||
contentW = m.width;
|
||||
contentH = ascent + descent;
|
||||
gemSize = 0;
|
||||
gap = 0;
|
||||
} else if (state.layout === "horizontal") {
|
||||
// Gem + texte côte à côte. Hauteur du gem = hauteur du texte (cap-height-ish).
|
||||
// On vise une largeur totale = exportSize - 2*padding.
|
||||
const targetW = exportSize - 2 * padding;
|
||||
// Premier passage : on suppose gem = hauteur du texte ≈ 0.78 * fontSize.
|
||||
// gap = 0.18 * gemSize, contentW = gemSize + gap + textW.
|
||||
// On calibre fontSize pour que tout ça fasse targetW.
|
||||
fontSize = 100;
|
||||
measure.font = `${state.weight} ${fontSize}px "Bricolage Grotesque", sans-serif`;
|
||||
const w0 = measure.measureText(state.text).width;
|
||||
// gem ≈ 0.78 * fontSize (proche de la cap-height)
|
||||
// gap ≈ 0.22 * gem
|
||||
const gemRatio = 0.85;
|
||||
const gapRatio = 0.18;
|
||||
const totalAtFs100 = gemRatio * fontSize + gapRatio * gemRatio * fontSize + w0;
|
||||
fontSize = (targetW / totalAtFs100) * fontSize;
|
||||
measure.font = `${state.weight} ${fontSize}px "Bricolage Grotesque", sans-serif`;
|
||||
const m = measure.measureText(state.text);
|
||||
const ascent = m.actualBoundingBoxAscent || fontSize * 0.75;
|
||||
const descent = m.actualBoundingBoxDescent || fontSize * 0.22;
|
||||
gemSize = gemRatio * fontSize;
|
||||
gap = gapRatio * gemSize;
|
||||
contentW = gemSize + gap + m.width;
|
||||
contentH = Math.max(gemSize, ascent + descent);
|
||||
} else {
|
||||
// vertical : gem au-dessus, texte en-dessous, centrés horizontalement
|
||||
const targetW = exportSize - 2 * padding;
|
||||
fontSize = 100;
|
||||
measure.font = `${state.weight} ${fontSize}px "Bricolage Grotesque", sans-serif`;
|
||||
const w0 = measure.measureText(state.text).width;
|
||||
fontSize = (targetW / w0) * fontSize;
|
||||
measure.font = `${state.weight} ${fontSize}px "Bricolage Grotesque", sans-serif`;
|
||||
const m = measure.measureText(state.text);
|
||||
const ascent = m.actualBoundingBoxAscent || fontSize * 0.75;
|
||||
const descent = m.actualBoundingBoxDescent || fontSize * 0.22;
|
||||
gemSize = m.width * 0.42; // gem proportionné au texte
|
||||
gap = gemSize * 0.25;
|
||||
contentW = m.width;
|
||||
contentH = gemSize + gap + ascent + descent;
|
||||
}
|
||||
|
||||
// Canvas final : carré exportSize × exportSize, contenu centré.
|
||||
const totalW = exportSize;
|
||||
const totalH = exportSize;
|
||||
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = Math.round(totalW * dpr);
|
||||
canvas.height = Math.round(totalH * dpr);
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.scale(dpr, dpr);
|
||||
|
||||
// Fond
|
||||
if (bgColor) {
|
||||
ctx.fillStyle = bgColor;
|
||||
ctx.fillRect(0, 0, totalW, totalH);
|
||||
}
|
||||
|
||||
// Dessin selon layout
|
||||
ctx.fillStyle = fgColor;
|
||||
ctx.textBaseline = "alphabetic";
|
||||
ctx.font = `${state.weight} ${fontSize}px "Bricolage Grotesque", sans-serif`;
|
||||
|
||||
if (state.layout === "wordmark") {
|
||||
const m = ctx.measureText(state.text);
|
||||
const ascent = m.actualBoundingBoxAscent || fontSize * 0.75;
|
||||
const descent = m.actualBoundingBoxDescent || fontSize * 0.22;
|
||||
const x = (totalW - contentW) / 2;
|
||||
const y = totalH / 2 - (ascent + descent) / 2 + ascent;
|
||||
ctx.fillText(state.text, x, y);
|
||||
} else if (state.layout === "horizontal") {
|
||||
const m = ctx.measureText(state.text);
|
||||
const ascent = m.actualBoundingBoxAscent || fontSize * 0.75;
|
||||
const descent = m.actualBoundingBoxDescent || fontSize * 0.22;
|
||||
const textH = ascent + descent;
|
||||
const startX = (totalW - contentW) / 2;
|
||||
const centerY = totalH / 2;
|
||||
// Gem centré verticalement
|
||||
const gemY = centerY - gemSize / 2;
|
||||
drawGem(ctx, startX, gemY, gemSize, fgColor);
|
||||
// Texte aligné sur la baseline → on positionne pour que le centre vertical du texte = centerY
|
||||
const textY = centerY - (ascent + descent) / 2 + ascent;
|
||||
ctx.fillStyle = fgColor;
|
||||
ctx.fillText(state.text, startX + gemSize + gap, textY);
|
||||
} else {
|
||||
// vertical
|
||||
const m = ctx.measureText(state.text);
|
||||
const ascent = m.actualBoundingBoxAscent || fontSize * 0.75;
|
||||
const gemX = (totalW - gemSize) / 2;
|
||||
const gemY = (totalH - contentH) / 2;
|
||||
drawGem(ctx, gemX, gemY, gemSize, fgColor);
|
||||
ctx.fillStyle = fgColor;
|
||||
const textX = (totalW - m.width) / 2;
|
||||
const textY = gemY + gemSize + gap + ascent;
|
||||
ctx.fillText(state.text, textX, textY);
|
||||
}
|
||||
|
||||
return { canvas, width: totalW, height: totalH };
|
||||
}
|
||||
|
||||
// --- Preview ---
|
||||
function updatePreview() {
|
||||
const stage = document.getElementById("stage");
|
||||
stage.innerHTML = "";
|
||||
// Preview = mêmes proportions, taille bornée pour l'affichage
|
||||
const previewSize = Math.min(state.size, 1024);
|
||||
const { canvas, width, height } = renderLogo({ size: previewSize, dpr: 2 });
|
||||
// Cadre transparent visible si bg = transparent
|
||||
stage.appendChild(canvas);
|
||||
document.getElementById("info").textContent =
|
||||
`Export : ${state.size} × ${Math.round((height / width) * state.size)} px`;
|
||||
}
|
||||
|
||||
// --- Export ---
|
||||
function exportPng() {
|
||||
const { canvas } = renderLogo({ size: state.size, dpr: 1 });
|
||||
const variant = [state.layout, state.fg, state.bg, `${state.size}px`].join("-");
|
||||
const filename = `rubis-logo-${variant}.png`;
|
||||
canvas.toBlob((blob) => {
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
setTimeout(() => URL.revokeObjectURL(url), 1000);
|
||||
}, "image/png");
|
||||
}
|
||||
|
||||
// --- Wiring ---
|
||||
function wireSegmented(containerId, key, type = "string") {
|
||||
const container = document.getElementById(containerId);
|
||||
container.addEventListener("click", (e) => {
|
||||
const btn = e.target.closest("button");
|
||||
if (!btn) return;
|
||||
container.querySelectorAll("button").forEach((b) => b.classList.remove("active"));
|
||||
btn.classList.add("active");
|
||||
const val = btn.dataset[key];
|
||||
state[key] = type === "number" ? Number(val) : val;
|
||||
updatePreview();
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById("text").addEventListener("input", (e) => {
|
||||
state.text = e.target.value || "Rubis.pro";
|
||||
updatePreview();
|
||||
});
|
||||
wireSegmented("layout", "layout");
|
||||
wireSegmented("fg", "fg");
|
||||
wireSegmented("bg", "bg");
|
||||
wireSegmented("weight", "weight", "number");
|
||||
|
||||
function setSize(value) {
|
||||
state.size = Number(value);
|
||||
document.getElementById("size").value = state.size;
|
||||
document.getElementById("size-val").textContent = `${state.size} × ${state.size} px`;
|
||||
const presets = document.getElementById("size-presets");
|
||||
presets.querySelectorAll("button").forEach((b) => {
|
||||
b.classList.toggle("active", Number(b.dataset.size) === state.size);
|
||||
});
|
||||
updatePreview();
|
||||
}
|
||||
document.getElementById("size").addEventListener("input", (e) => setSize(e.target.value));
|
||||
document.getElementById("size-presets").addEventListener("click", (e) => {
|
||||
const btn = e.target.closest("button");
|
||||
if (btn) setSize(btn.dataset.size);
|
||||
});
|
||||
document.getElementById("padding").addEventListener("change", (e) => {
|
||||
state.padding = e.target.checked;
|
||||
updatePreview();
|
||||
});
|
||||
document.getElementById("export-btn").addEventListener("click", exportPng);
|
||||
|
||||
// --- Font loading ---
|
||||
// On attend que Bricolage Grotesque soit chargée avant de rendre le canvas,
|
||||
// sinon le navigateur fallback en sans-serif et le rendu est faux.
|
||||
const status = document.getElementById("font-status");
|
||||
Promise.all([
|
||||
document.fonts.load('700 100px "Bricolage Grotesque"'),
|
||||
document.fonts.load('800 100px "Bricolage Grotesque"'),
|
||||
document.fonts.load('500 100px "Bricolage Grotesque"'),
|
||||
]).then(() => {
|
||||
status.textContent = "Police chargée — prêt à exporter.";
|
||||
status.classList.add("loaded");
|
||||
updatePreview();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
355
docs/og-default-source.html
Normal file
355
docs/og-default-source.html
Normal file
@ -0,0 +1,355 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>OG default source — Rubis.pro</title>
|
||||
<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=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
:root {
|
||||
--rubis: #9F1239;
|
||||
--rubis-deep: #771328;
|
||||
--rubis-light: #C9415C;
|
||||
--rubis-glow: #FBE4EA;
|
||||
--cream: #FAF7F2;
|
||||
--cream-2: #F4EFE7;
|
||||
--ink: #1A1410;
|
||||
--ink-2: #4A3F36;
|
||||
--ink-3: #8B7E73;
|
||||
--line: #E8E0D6;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: #2a2520;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 40px 20px;
|
||||
gap: 20px;
|
||||
font-family: "Inter", system-ui, sans-serif;
|
||||
}
|
||||
.instructions {
|
||||
max-width: 900px;
|
||||
color: #ddd;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
background: #1a1410;
|
||||
padding: 16px 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.instructions code {
|
||||
background: #3a3530;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: ui-monospace, Menlo, monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
.instructions a { color: #FBE4EA; }
|
||||
/*
|
||||
* #og : EXACTEMENT 1200×630 (specs Open Graph).
|
||||
* Pour exporter : Chrome DevTools → Inspecter cette div → clic droit
|
||||
* → "Capture node screenshot". Le PNG sortira pile à 1200×630.
|
||||
*/
|
||||
#og {
|
||||
width: 1200px;
|
||||
height: 630px;
|
||||
background: var(--cream);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-family: "Inter", system-ui, sans-serif;
|
||||
color: var(--ink);
|
||||
}
|
||||
/* Halo rubis discret en haut-droite */
|
||||
.halo {
|
||||
position: absolute;
|
||||
top: -200px;
|
||||
right: -200px;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, var(--rubis-glow) 0%, transparent 65%);
|
||||
pointer-events: none;
|
||||
}
|
||||
/* Triangle fantôme en bas (clin d'œil au gem) */
|
||||
.ghost-tri {
|
||||
position: absolute;
|
||||
bottom: -100px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
background: var(--rubis);
|
||||
opacity: 0.06;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding: 70px 80px;
|
||||
display: grid;
|
||||
grid-template-columns: 1.3fr 1fr;
|
||||
gap: 60px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ============ Brand lockup ============ */
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-family: "Bricolage Grotesque", sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: 28px;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--ink);
|
||||
line-height: 1;
|
||||
}
|
||||
.brand .gem {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.brand .suffix {
|
||||
color: var(--ink-3);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ============ Headline ============ */
|
||||
h1 {
|
||||
margin-top: 32px;
|
||||
font-family: "Bricolage Grotesque", sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: 70px;
|
||||
line-height: 1.02;
|
||||
letter-spacing: -0.035em;
|
||||
color: var(--ink);
|
||||
}
|
||||
h1 em {
|
||||
font-style: italic;
|
||||
color: var(--rubis);
|
||||
font-weight: 800;
|
||||
}
|
||||
.sub {
|
||||
margin-top: 24px;
|
||||
font-size: 22px;
|
||||
line-height: 1.45;
|
||||
color: var(--ink-2);
|
||||
max-width: 520px;
|
||||
}
|
||||
.sub b { color: var(--ink); font-weight: 700; }
|
||||
|
||||
.cta {
|
||||
margin-top: 32px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 18px;
|
||||
background: white;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
box-shadow: 0 4px 12px rgba(26, 20, 16, 0.06);
|
||||
}
|
||||
.cta .gem {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/* ============ Mock card ============ */
|
||||
.mock {
|
||||
background: white;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 12px 40px rgba(26, 20, 16, 0.10);
|
||||
overflow: hidden;
|
||||
}
|
||||
.mock-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 22px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: rgba(244, 239, 231, 0.4);
|
||||
}
|
||||
.mock-topbar .brand { font-size: 16px; }
|
||||
.mock-topbar .brand .gem { width: 18px; height: 18px; }
|
||||
.mock-topbar .label {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-weight: 600;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
.mock-body { padding: 24px 26px; }
|
||||
.mock-hero {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.mock-hero .gem-glow {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
filter: drop-shadow(0 4px 16px rgba(159, 18, 57, 0.35));
|
||||
}
|
||||
.mock-count {
|
||||
font-family: "Bricolage Grotesque", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
letter-spacing: -0.022em;
|
||||
line-height: 1;
|
||||
color: var(--ink);
|
||||
}
|
||||
.mock-count-sub {
|
||||
margin-top: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--ink-2);
|
||||
}
|
||||
.mock-count-sub b { color: var(--ink); font-weight: 700; }
|
||||
.mock-kpis {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 18px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.kpi-label {
|
||||
font-size: 9.5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
font-weight: 600;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
.kpi-value {
|
||||
margin-top: 4px;
|
||||
font-family: "Bricolage Grotesque", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
letter-spacing: -0.015em;
|
||||
color: var(--ink);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.kpi-delta {
|
||||
margin-top: 3px;
|
||||
font-size: 10.5px;
|
||||
color: var(--rubis);
|
||||
font-weight: 500;
|
||||
}
|
||||
.mock-activity {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-top: 14px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px dashed var(--line);
|
||||
font-size: 12px;
|
||||
}
|
||||
.mock-activity .text { color: var(--ink-2); }
|
||||
.mock-activity b { color: var(--ink); font-weight: 600; }
|
||||
.mock-activity time {
|
||||
color: var(--ink-3);
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 10.5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">
|
||||
<strong>Comment exporter en PNG 1200×630</strong> — ouvrir Chrome DevTools (<code>⌘⌥I</code>),
|
||||
sélectionner la div <code>#og</code>, clic droit dans l'arbre → <em>Capture node screenshot</em>.
|
||||
Le PNG sort pile à 1200×630. Remplacer ensuite
|
||||
<code>apps/landing/public/og-default.png</code>.
|
||||
</p>
|
||||
|
||||
<div id="og">
|
||||
<div class="halo"></div>
|
||||
<div class="ghost-tri"></div>
|
||||
|
||||
<div class="content">
|
||||
<div>
|
||||
<div class="brand">
|
||||
<svg class="gem" viewBox="0 0 100 100" fill="none">
|
||||
<polygon points="50,6 6,50 50,50" fill="#9F1239" fill-opacity="1"/>
|
||||
<polygon points="50,6 94,50 50,50" fill="#9F1239" fill-opacity="0.8"/>
|
||||
<polygon points="6,50 50,50 50,94" fill="#9F1239" fill-opacity="0.65"/>
|
||||
<polygon points="50,50 94,50 50,94" fill="#9F1239" fill-opacity="0.48"/>
|
||||
<polygon points="50,6 94,50 50,94 6,50" fill="none" stroke="#9F1239" stroke-width="1.6" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span>Rubis<span class="suffix">.pro</span></span>
|
||||
</div>
|
||||
|
||||
<h1>
|
||||
Vos factures relancées <em>toutes seules</em>.
|
||||
</h1>
|
||||
|
||||
<p class="sub">
|
||||
Le SaaS de relance pour TPE-PME françaises. <b>5 heures par semaine</b> récupérées, automatiquement.
|
||||
</p>
|
||||
|
||||
<span class="cta">
|
||||
<svg class="gem" viewBox="0 0 100 100" fill="none">
|
||||
<polygon points="50,6 6,50 50,50" fill="#9F1239" fill-opacity="1"/>
|
||||
<polygon points="50,6 94,50 50,50" fill="#9F1239" fill-opacity="0.8"/>
|
||||
<polygon points="6,50 50,50 50,94" fill="#9F1239" fill-opacity="0.65"/>
|
||||
<polygon points="50,50 94,50 50,94" fill="#9F1239" fill-opacity="0.48"/>
|
||||
<polygon points="50,6 94,50 50,94 6,50" fill="none" stroke="#9F1239" stroke-width="1.6" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
rubis.pro
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mock">
|
||||
<div class="mock-topbar">
|
||||
<div class="brand">
|
||||
<svg class="gem" viewBox="0 0 100 100" fill="none">
|
||||
<polygon points="50,6 6,50 50,50" fill="#9F1239" fill-opacity="1"/>
|
||||
<polygon points="50,6 94,50 50,50" fill="#9F1239" fill-opacity="0.8"/>
|
||||
<polygon points="6,50 50,50 50,94" fill="#9F1239" fill-opacity="0.65"/>
|
||||
<polygon points="50,50 94,50 50,94" fill="#9F1239" fill-opacity="0.48"/>
|
||||
<polygon points="50,6 94,50 50,94 6,50" fill="none" stroke="#9F1239" stroke-width="1.6" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span>Rubis<span class="suffix">.pro</span></span>
|
||||
</div>
|
||||
<span class="label">Tableau de bord</span>
|
||||
</div>
|
||||
<div class="mock-body">
|
||||
<div class="mock-hero">
|
||||
<svg class="gem-glow" viewBox="0 0 100 100" fill="none">
|
||||
<polygon points="50,6 6,50 50,50" fill="#9F1239" fill-opacity="1"/>
|
||||
<polygon points="50,6 94,50 50,50" fill="#9F1239" fill-opacity="0.8"/>
|
||||
<polygon points="6,50 50,50 50,94" fill="#9F1239" fill-opacity="0.65"/>
|
||||
<polygon points="50,50 94,50 50,94" fill="#9F1239" fill-opacity="0.48"/>
|
||||
<polygon points="50,6 94,50 50,94 6,50" fill="none" stroke="#9F1239" stroke-width="1.6" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="mock-count">124 rubis</div>
|
||||
<div class="mock-count-sub">≈ <b>24 h 48</b> libérées ce mois</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mock-kpis">
|
||||
<div>
|
||||
<div class="kpi-label">Encaissé</div>
|
||||
<div class="kpi-value">14 320 €</div>
|
||||
<div class="kpi-delta">+ 2 800 € vs avril</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="kpi-label">DSO*</div>
|
||||
<div class="kpi-value">38 j</div>
|
||||
<div class="kpi-delta">↘ −6 j depuis Rubis</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mock-activity">
|
||||
<span class="text">✓ Facture <b>F-2024-035</b> encaissée</span>
|
||||
<time>10:02</time>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user