From 60afabb8458e9a75160e8d007661018d66613755 Mon Sep 17 00:00:00 2001
From: xiaomai <xiaomai@ramatex.com.my>
Date: Sun, 9 Nov 2025 12:12:42 +0800
Subject: [PATCH] feat(ui): add QR code to sponsor list and improve styling

This commit enhances the user interface for the sponsor list pages.

- A QR code linking to the mobile view is now displayed on the main sponsor list page.
- The QR code on the landing page now has a pulsing animation to draw attention.
- Readability of the sponsor list is improved by increasing font sizes and adjusting title colors.
- The 'Special Thanks' banner has been moved to the top for better visibility.
---
 20251108/index.html             | 24 +++++++++++++++++++++++-
 20251108/sponsorList/index.html | 27 ++++++++++++++++++++++++---
 2 files changed, 47 insertions(+), 4 deletions(-)
diff --git a/20251108/index.html b/20251108/index.html
index 0927c38..0fac12d 100644
--- a/20251108/index.html
+++ b/20251108/index.html
@@ -7,6 +7,28 @@
 
     <script src="/analysis.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+
+    <style>
+      /* QR Code 脉冲动画 */
+      @keyframes qr-pulse {
+        0% {
+          transform: scale(1);
+          box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
+        }
+        70% {
+          transform: scale(1.08);
+          box-shadow: 0 0 30px 10px rgba(255, 255, 255, 0);
+        }
+        100% {
+          transform: scale(1);
+          box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+        }
+      }
+
+      .qr-pulse {
+        animation: qr-pulse 2s ease-in-out infinite;
+      }
+    </style>
   </head>
   <body class="bg-gray-100">
     <div
@@ -21,7 +43,7 @@
           class="cursor-pointer transition-transform duration-300 hover:scale-105"
         >
           <img
-            class="size-48 ring-8 ring-white shadow-lg"
+            class="size-32 ring-8 ring-white shadow-lg qr-pulse border-8 border-white"
             src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://dinner.tootaio.com/20251108/sponsorList/mobile/"
             alt="Mobile Sponsor List QR"
           />
diff --git a/20251108/sponsorList/index.html b/20251108/sponsorList/index.html
index e35e0ee..f8213e1 100644
--- a/20251108/sponsorList/index.html
+++ b/20251108/sponsorList/index.html
@@ -31,6 +31,7 @@
       }
     </style>
   </head>
+
   <body>
     <div id="app" class="w-screen h-screen overflow-clip select-none">
       <div class="flex w-full h-full">
@@ -38,6 +39,26 @@
         <div
           class="flex-8 relative bg-linear-to-b from-pink-900 to-pink-500 px-6"
         >
+          <!-- QR Code Container -->
+          <div
+            class="absolute z-99 top-16 left-16 flex flex-col items-center justify-center w-fit"
+          >
+            <div
+              class="cursor-pointer transition-transform duration-300 hover:scale-105"
+            >
+              <img
+                class="size-32 ring-8 ring-white shadow-lg"
+                src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://dinner.tootaio.com/20251108/sponsorList/mobile/"
+                alt="Mobile Sponsor List QR"
+              />
+            </div>
+            <div
+              class="text-2xl font-bold mt-4 text-black bg-white/50 px-4 py-2 rounded-full"
+            >
+              Scan for sponsor list!
+            </div>
+          </div>
+
           <!-- 上：可滚动 / 填满剩余空间 -->
           <div class="absolute inset-0 overflow-hidden">
             <div class="sponsor-marquee-track">
@@ -68,7 +89,7 @@
                     class="backdrop-blur-xl bg-linear-to-br from-white/20 to-white/10 border border-white/30 rounded-2xl p-8 shadow-2xl"
                   >
                     <div
-                      :class="['text-center font-bold mb-4', (value.titleFontSize || 'text-4xl')]"
+                      :class="['text-center font-bold mb-4 text-amber-400', (value.titleFontSize || 'text-4xl')]"
                     >
                       {{ formatRm(key) }}
                     </div>
@@ -78,7 +99,7 @@
                       <div
                         v-for="sponsor in value.list"
                         :key="sponsor"
-                        class="text-2xl border-white border px-4 py-2 rounded-md shadow-md text-white"
+                        class="text-4xl border-white border px-4 py-2 rounded-md shadow-md text-white"
                       >
                         {{sponsor}}
                       </div>
@@ -91,7 +112,7 @@
 
           <!-- 下：特别鸣谢 -->
           <div
-            class="absolute bottom-0 left-0 right-0 bg-white/30 backdrop-blur-md rounded-t-xl border-t border-white/40 shadow-lg"
+            class="absolute top-0 left-0 right-0 bg-white/30 backdrop-blur-md rounded-t-xl border-t border-white/40 shadow-lg"
           >
             <div class="flex items-center">
               <div class="p-6 text-3xl font-bold text-nowrap">特别鸣谢：</div>
