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="/analysis.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></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> </head>
<body class="bg-gray-100"> <body class="bg-gray-100">
<div <div
@@ -21,7 +43,7 @@
class="cursor-pointer transition-transform duration-300 hover:scale-105" class="cursor-pointer transition-transform duration-300 hover:scale-105"
> >
<img <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/" src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://dinner.tootaio.com/20251108/sponsorList/mobile/"
alt="Mobile Sponsor List QR" alt="Mobile Sponsor List QR"
/> />

27
20251108/sponsorList/index.html
View File

@@ -31,6 +31,7 @@
} }
</style> </style>
</head> </head>
<body> <body>
<div id="app" class="w-screen h-screen overflow-clip select-none"> <div id="app" class="w-screen h-screen overflow-clip select-none">
<div class="flex w-full h-full"> <div class="flex w-full h-full">
@@ -38,6 +39,26 @@
<div <div
class="flex-8 relative bg-linear-to-b from-pink-900 to-pink-500 px-6" 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="absolute inset-0 overflow-hidden">
<div class="sponsor-marquee-track"> <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" 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 <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) }} {{ formatRm(key) }}
</div> </div>
@@ -78,7 +99,7 @@
<div <div
v-for="sponsor in value.list" v-for="sponsor in value.list"
:key="sponsor" :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}} {{sponsor}}
</div> </div>
@@ -91,7 +112,7 @@
<!-- 下：特别鸣谢 --> <!-- 下：特别鸣谢 -->
<div <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="flex items-center">
<div class="p-6 text-3xl font-bold text-nowrap">特别鸣谢：</div> <div class="p-6 text-3xl font-bold text-nowrap">特别鸣谢：</div>