Tootaio/dinner.tootaio.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): add QR code to sponsor list and improve styling

Browse Source 
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.
This commit is contained in:
xiaomai
2025-11-09 12:12:42 +08:00
parent 871e66a13a
commit 60afabb845
2 changed files with 47 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
20251108/index.html
View File

@@ -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"
/>

27
20251108/sponsorList/index.html
View File

@@ -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>