From cf1b06b5c9c6e10659306fcb495fda2768e4321f Mon Sep 17 00:00:00 2001
From: Alexander Schmidt <alexander@schmidt.eco>
Date: Wed, 25 Mar 2026 09:52:22 +0100
Subject: [PATCH] feat: Monero coin favicon with paid indicator

- Official Monero coin logo as SVG favicon
- Dynamic green dot badge on favicon when invoice is paid
- Paid status shown both in page content and browser tab
---
 app.js      | 40 ++++++++++++++++++++++++++++++++++++----
 favicon.svg |  4 ++++
 index.html  |  2 +-
 3 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 favicon.svg

diff --git a/app.js b/app.js
index 32c4f50..dd44b51 100644
--- a/app.js
+++ b/app.js
@@ -550,6 +550,7 @@
             })
           });
         }
+        showPaidStatus({ amount: xmrAmount, tx_hash: txHash });
       } else {
         proofResult.className = 'proof-result active error';
         proofResult.textContent = I18n.t('proof_no_match');
@@ -567,12 +568,43 @@
       .then(function (res) { return res.json(); })
       .then(function (data) {
         if (data.verified) {
-          paymentStatus.className = 'payment-status paid';
-          paymentStatus.innerHTML = '<div class="paid-badge">' + I18n.t('status_paid') +
-            '</div><div class="paid-detail">' + data.amount.toFixed(6) + ' XMR — TX ' +
-            data.tx_hash.substring(0, 8) + '...</div>';
+          showPaidStatus(data);
         }
       })
       .catch(function () {});
   }
+
+  function showPaidStatus(data) {
+    paymentStatus.className = 'payment-status paid';
+    paymentStatus.innerHTML = '<div class="paid-badge">' + I18n.t('status_paid') +
+      '</div><div class="paid-detail">' + data.amount.toFixed(6) + ' XMR — TX ' +
+      data.tx_hash.substring(0, 8) + '...</div>';
+    setPaidFavicon();
+  }
+
+  function setPaidFavicon() {
+    var canvas = document.createElement('canvas');
+    canvas.width = 32;
+    canvas.height = 32;
+    var ctx = canvas.getContext('2d');
+
+    // Draw Monero logo
+    var img = new Image();
+    img.onload = function () {
+      ctx.drawImage(img, 0, 0, 32, 32);
+      // Green dot (bottom-right)
+      ctx.beginPath();
+      ctx.arc(25, 25, 7, 0, Math.PI * 2);
+      ctx.fillStyle = '#fff';
+      ctx.fill();
+      ctx.beginPath();
+      ctx.arc(25, 25, 5.5, 0, Math.PI * 2);
+      ctx.fillStyle = '#4caf50';
+      ctx.fill();
+      // Set favicon
+      var link = document.getElementById('favicon');
+      link.href = canvas.toDataURL('image/png');
+    };
+    img.src = 'favicon.svg';
+  }
 })();
diff --git a/favicon.svg b/favicon.svg
new file mode 100644
index 0000000..8818c18
--- /dev/null
+++ b/favicon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304.39 304.39">
+  <circle cx="152.2" cy="152.2" r="152.2" fill="#f26821"/>
+  <path d="m 270.75,190.58 h -0.72 -37.14 v -104.12 l -80.69,80.69 -80.69,-80.69 v 104.12 h -37.14 -0.72 a 124.61,124.61 0 0 0 12.42,26.92 h 52.36 v -66.05 l 53.77,53.77 53.77,-53.77 v 66.05 h 52.36 a 124.61,124.61 0 0 0 12.42,-26.92 z" fill="#fff"/>
+</svg>
diff --git a/index.html b/index.html
index 42b5b15..bf2ee66 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>xmrpay.link — Monero Invoice Generator</title>
   <meta name="description" content="Create Monero payment requests in seconds. No account, no backend, no KYC.">
-  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⛏️</text></svg>">
+  <link rel="icon" id="favicon" href="favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="style.css">