<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Générateur d'icônes PWA</title>
<style>
body{font-family:Arial,sans-serif;background:#f0f4f8;padding:20px;text-align:center}
h2{color:#1a2a4a;margin-bottom:6px}
p{color:#666;font-size:13px;margin-bottom:20px}
canvas{display:none}
.card{background:#fff;border-radius:12px;padding:20px;max-width:400px;margin:0 auto;box-shadow:0 2px 12px rgba(0,0,0,.1)}
.preview{display:flex;gap:20px;justify-content:center;margin:16px 0;flex-wrap:wrap}
.prev-box{text-align:center}
.prev-box img{border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.2);display:block}
.prev-box span{font-size:11px;color:#888;margin-top:6px;display:block}
.btn{display:inline-block;background:#27ae60;color:#fff;border:none;
padding:12px 22px;border-radius:8px;cursor:pointer;font-size:14px;
font-weight:bold;margin:6px;text-decoration:none;transition:.2s}
.btn:hover{background:#1e8449}
.btn.blue{background:#2196F3}.btn.blue:hover{background:#1976D2}
.step{background:#eef5ff;border-left:4px solid #2196F3;padding:10px 14px;
border-radius:0 8px 8px 0;text-align:left;font-size:12px;color:#333;
margin-top:16px;line-height:1.7}
.step b{color:#1a2a4a}
</style>
</head>
<body>
<div class="card">
<h2>🖼️ Icônes PWA — PropImmo</h2>
<p>Cliquez pour télécharger les deux icônes nécessaires à l'installation.</p>
<div class="preview">
<div class="prev-box">
<img id="prev192" width="96" height="96">
<span>icon-192.png</span>
</div>
<div class="prev-box">
<img id="prev512" width="128" height="128">
<span>icon-512.png</span>
</div>
</div>
<canvas id="c192" width="192" height="192"></canvas>
<canvas id="c512" width="512" height="512"></canvas>
<div>
<button class="btn" onclick="dl('c192','icon-192.png')">⬇️ icon-192.png</button>
<button class="btn" onclick="dl('c512','icon-512.png')">⬇️ icon-512.png</button>
</div>
<div class="step">
<b>Où placer ces fichiers ?</b><br>
Déposez <code>icon-192.png</code> et <code>icon-512.png</code>
dans le <b>même dossier</b> que votre <code>index.html</code>,
<code>manifest.json</code> et <code>service-worker.js</code>.
</div>
</div>
<script>
function drawIcon(canvasId, size) {
const c = document.getElementById(canvasId);
const ctx = c.getContext('2d');
const s = size;
// Fond bleu marine
ctx.fillStyle = '#1a2a4a';
roundRect(ctx, 0, 0, s, s, s * 0.18);
ctx.fill();
// Carré bleu centré (immeuble stylisé)
const bx = s * 0.2, by = s * 0.28, bw = s * 0.6, bh = s * 0.48;
ctx.fillStyle = '#2196F3';
roundRect(ctx, bx, by, bw, bh, s * 0.04);
ctx.fill();
// Fenêtres blanches
ctx.fillStyle = '#fff';
const wSize = s * 0.1, wGap = s * 0.07, cols = 3, rows = 3;
const startX = bx + (bw - cols * wSize - (cols - 1) * wGap) / 2;
const startY = by + (bh - rows * wSize - (rows - 1) * wGap) / 2;
for (let r = 0; r < rows; r++) {
for (let cc = 0; cc < cols; cc++) {
if (r === rows - 1 && cc === 1) {
// Porte centrale
ctx.fillStyle = '#1a2a4a';
roundRect(ctx,
startX + cc * (wSize + wGap),
startY + r * (wSize + wGap),
wSize, wSize, s * 0.01);
ctx.fill();
ctx.fillStyle = '#fff';
} else {
ctx.fillStyle = '#fff';
roundRect(ctx,
startX + cc * (wSize + wGap),
startY + r * (wSize + wGap),
wSize, wSize, s * 0.01);
ctx.fill();
}
}
}
// Toit triangulaire
ctx.fillStyle = '#2196F3';
ctx.beginPath();
ctx.moveTo(bx - s * 0.04, by + s * 0.02);
ctx.lineTo(s / 2, by - s * 0.12);
ctx.lineTo(bx + bw + s * 0.04, by + s * 0.02);
ctx.closePath();
ctx.fill();
// Texte "PI"
ctx.fillStyle = '#fff';
ctx.font = `bold ${s * 0.11}px Arial`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('PropImmo', s / 2, by + bh + s * 0.1);
}
function roundRect(ctx, x, y, w, h, r) {
ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.lineTo(x + w - r, y);
ctx.quadraticCurveTo(x + w, y, x + w, y + r);
ctx.lineTo(x + w, y + h - r);
ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
ctx.lineTo(x + r, y + h);
ctx.quadraticCurveTo(x, y + h, x, y + h - r);
ctx.lineTo(x, y + r);
ctx.quadraticCurveTo(x, y, x + r, y);
ctx.closePath();
}
function dl(canvasId, filename) {
const c = document.getElementById(canvasId);
const a = document.createElement('a');
a.href = c.toDataURL('image/png');
a.download = filename;
a.click();
}
// Génère et affiche
drawIcon('c192', 192);
drawIcon('c512', 512);
document.getElementById('prev192').src = document.getElementById('c192').toDataURL();
document.getElementById('prev512').src = document.getElementById('c512').toDataURL();
</script>
</body>
</html>
