60afabb845
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.
132 lines
4.0 KiB
HTML
132 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>QR Code Modal</title>
|
|
|
|
<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
|
|
class="relative w-screen h-screen bg-[url('./hash30bg.png')] bg-no-repeat bg-cover bg-center"
|
|
>
|
|
<!-- QR Code Container -->
|
|
<div
|
|
class="absolute top-16 left-16 flex flex-col items-center justify-center w-fit"
|
|
>
|
|
<div
|
|
onclick="openModal()"
|
|
class="cursor-pointer transition-transform duration-300 hover:scale-105"
|
|
>
|
|
<img
|
|
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"
|
|
/>
|
|
</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>
|
|
|
|
<!-- Floating Buttons -->
|
|
<div class="fixed bottom-5 right-5 flex flex-col gap-2 z-40">
|
|
<button
|
|
class="bg-white/70 backdrop-blur-md shadow-md hover:bg-white/90 transition-all duration-300 px-4 py-2 rounded-full text-sm font-medium"
|
|
onclick="window.location.href='sponsorList/'"
|
|
>
|
|
Sponsor List
|
|
</button>
|
|
<button
|
|
class="bg-white/70 backdrop-blur-md shadow-md hover:bg-white/90 transition-all duration-300 px-4 py-2 rounded-full text-sm font-medium"
|
|
onclick="window.location.href='sponsorList/mobile/'"
|
|
>
|
|
Mobile List
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div
|
|
id="qrModal"
|
|
class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm"
|
|
>
|
|
<div class="relative max-w-md w-full mx-4 animate-[zoomIn_0.3s_ease-out]">
|
|
<button
|
|
onclick="closeModal()"
|
|
class="absolute -top-10 right-0 text-white text-3xl font-bold hover:scale-110 transition-transform"
|
|
>
|
|
×
|
|
</button>
|
|
<div
|
|
class="bg-white p-8 rounded-xl shadow-2xl flex flex-col items-center"
|
|
>
|
|
<h2 class="text-2xl font-bold mb-4 text-gray-800">Scan QR Code</h2>
|
|
<img
|
|
class="w-64 h-64 mb-4"
|
|
src="https://api.qrserver.com/v1/create-qr-code/?size=256x256&data=https://dinner.tootaio.com/20251108/sponsorList/mobile/"
|
|
alt="QR Code"
|
|
/>
|
|
<p class="text-gray-600 text-center">
|
|
Scan this QR code to view the sponsor list on your mobile device
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const modal = document.getElementById("qrModal");
|
|
function openModal() {
|
|
modal.classList.remove("hidden");
|
|
}
|
|
function closeModal() {
|
|
modal.classList.add("hidden");
|
|
}
|
|
window.onclick = (e) => e.target === modal && closeModal();
|
|
document.addEventListener(
|
|
"keydown",
|
|
(e) => e.key === "Escape" && closeModal()
|
|
);
|
|
</script>
|
|
|
|
<style>
|
|
@keyframes zoomIn {
|
|
from {
|
|
transform: scale(0.8);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|