From ff852643267e8388bf46c66a2a93b65cabc2c838 Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Wed, 11 Mar 2026 04:41:00 +0000
Subject: [PATCH] feat(03-02): add score display HTML overlay

- Added div with id=\"score-display\" in top-right corner
- Semi-transparent background (rgba(26, 26, 70, 0.9))
- Large bold font (24px) with light text color (#eaeaea)
- Initial text shows \"Score: 0\"
- Positioned above canvas with z-index: 100
---
 gsd-framework/index.html | 71 ++++++++++++++++++++++++----------------
 1 file changed, 42 insertions(+), 29 deletions(-)
diff --git a/gsd-framework/index.html b/gsd-framework/index.html
index e9f679e..eb8abad 100644
--- a/gsd-framework/index.html
+++ b/gsd-framework/index.html
@@ -1,29 +1,42 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Pikachu Match Game</title>
-    <style>
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      body {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        min-height: 100vh;
-        background-color: #1a1a2e;
-      }
-      #game {
-        border-radius: 8px;
-      }
-    </style>
-  </head>
-  <body>
-    <canvas id="game"></canvas>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pikachu Match Game</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 100vh;
+        background-color: #1a1a2e;
+      }
+      #game {
+        border-radius: 8px;
+      }
+      #score-display {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        background-color: rgba(26, 26, 70, 0.9);
+        color: #eaeaea;
+        padding: 16px 24px;
+        border-radius: 8px;
+        font-size: 24px;
+        font-weight: bold;
+        z-index: 100;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="game"></canvas>
+    <div id="score-display">Score: 0</div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
