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