<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ALT豪華福袋抽獎 - 虎爺財神廟</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft JhengHei", Arial, sans-serif;
}
body {
background-color: #f8f1e0;
color: #333;
min-height: 100vh;
position: relative;
}
.pattern-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none" stroke="%23d4af37" stroke-width="1" stroke-dasharray="5,5" opacity="0.2"/></svg>');
z-index: -1;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
background-color: #d70000;
color: #fff;
padding: 20px 0;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
border-bottom: 5px solid #d4af37;
}
.header-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><circle cx="60" cy="60" r="30" fill="none" stroke="%23ffffff" stroke-width="2" opacity="0.2"/><circle cx="60" cy="60" r="20" fill="none" stroke="%23d4af37" stroke-width="2" opacity="0.3"/></svg>');
opacity: 0.4;
}
.logo {
font-size: 2.8rem;
font-weight: bold;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
position: relative;
z-index: 1;
}
.logo span {
color: #d4af37;
}
.slogan {
font-size: 1.2rem;
margin-bottom: 10px;
position: relative;
z-index: 1;
}
.main-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 30px 0;
gap: 30px;
}
.temple-section {
width: 100%;
max-width: 600px;
display: flex;
flex-direction: column;
align-items: center;
}
.fortune-temple {
width: 100%;
background-color: #fff;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
padding: 30px;
text-align: center;
border: 3px solid #d4af37;
position: relative;
overflow: hidden;
margin-bottom: 30px;
}
.temple-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400"><path d="M300,50 L100,180 L500,180 Z" fill="%23d70000" opacity="0.05"/><rect x="150" y="180" width="300" height="200" fill="%23d70000" opacity="0.05"/><rect x="200" y="300" width="50" height="80" fill="%23333" opacity="0.05"/><rect x="350" y="300" width="50" height="80" fill="%23333" opacity="0.05"/></svg>');
background-position: center;
opacity: 0.3;
z-index: 0;
}
.tiger-god {
width: 180px;
height: 180px;
margin: 0 auto 20px;
position: relative;
z-index: 1;
}
.prize-showcase {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin: 20px 0;
}
.prize-item {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
padding: 15px;
width: 150px;
text-align: center;
border: 2px solid #d4af37;
transition: all 0.3s ease;
}
.prize-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.prize-icon {
width: 80px;
height: 80px;
margin: 0 auto 10px;
}
.prize-name {
font-weight: bold;
color: #d70000;
font-size: 0.9rem;
margin-bottom: 5px;
}
.prize-chance {
font-size: 0.8rem;
color: #666;
}
.fortune-bag {
width: 180px;
height: 220px;
margin: 20px auto;
cursor: pointer;
transition: transform 0.3s ease;
position: relative;
z-index: 2;
}
.fortune-bag:hover {
transform: scale(1.05);
}
.fortune-bag:active {
transform: scale(0.95);
}
.draw-button {
background-color: #d70000;
color: #fff;
border: none;
padding: 18px 50px;
font-size: 1.3rem;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
margin: 20px auto;
display: block;
box-shadow: 0 5px 0 #a00000;
position: relative;
overflow: hidden;
font-weight: bold;
}
.draw-button:hover {
background-color: #c00000;
transform: translateY(-3px);
box-shadow: 0 8px 0 #a00000;
}
.draw-button:active {
transform: translateY(2px);
box-shadow: 0 3px 0 #a00000;
}
.draw-button::after {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.draw-button:hover::after {
opacity: 1;
}
.info-section {
width: 100%;
max-width: 500px;
}
.prize-info {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
padding: 30px;
border: 3px solid #d4af37;
margin-bottom: 30px;
}
.info-title {
color: #d70000;
margin-bottom: 20px;
font-size: 1.8rem;
text-align: center;
padding-bottom: 15px;
border-bottom: 2px dashed #d4af37;
}
.prize-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
margin-top: 20px;
}
.grid-item {
background-color: #f9f9f9;
border-radius: 10px;
padding: 15px;
text-align: center;
border: 1px solid #eee;
transition: all 0.3s ease;
}
.grid-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
border-color: #d4af37;
}
.grid-icon {
font-size: 2rem;
color: #d70000;
margin-bottom: 10px;
}
.grid-title {
font-weight: bold;
margin-bottom: 5px;
color: #333;
}
.grid-desc {
font-size: 0.9rem;
color: #666;
}
.stats-section {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
padding: 20px;
border: 3px solid #d4af37;
}
.stats-title {
color: #d70000;
margin-bottom: 15px;
font-size: 1.5rem;
text-align: center;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.stat-item {
background-color: #f9f9f9;
border-radius: 10px;
padding: 15px;
text-align: center;
border: 1px solid #eee;
}
.stat-number {
font-size: 1.8rem;
font-weight: bold;
color: #d70000;
margin-bottom: 5px;
}
.stat-label {
font-size: 0.9rem;
color: #666;
}
.winner-list {
margin-top: 20px;
}
.winner-item {
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #eee;
}
.winner-item:last-child {
border-bottom: none;
}
.winner-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
font-weight: bold;
color: #d70000;
}
.winner-info {
flex: 1;
}
.winner-name {
font-weight: bold;
margin-bottom: 3px;
}
.winner-prize {
font-size: 0.9rem;
color: #d70000;
}
.winner-time {
font-size: 0.8rem;
color: #999;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1000;
align-items: center;
justify-content: center;
}
.modal-content {
background-color: #fff;
padding: 40px;
border-radius: 20px;
max-width: 600px;
width: 90%;
text-align: center;
position: relative;
box-shadow: 0 0 30px rgba(212, 175, 55, 0.7);
animation: modalAppear 0.5s ease;
border: 5px solid #d4af37;
}
@keyframes modalAppear {
from { transform: scale(0.8); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.close-modal {
position: absolute;
top: 15px;
right: 15px;
font-size: 1.5rem;
cursor: pointer;
color: #666;
transition: color 0.3s ease;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #f0f0f0;
}
.close-modal:hover {
color: #d70000;
background-color: #eee;
}
.congratulation-title {
font-size: 2.5rem;
color: #d70000;
margin-bottom: 30px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.prize-image-container {
width: 200px;
height: 200px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
}
.prize-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.prize-title {
font-size: 1.8rem;
font-weight: bold;
color: #333;
margin-bottom: 15px;
}
.prize-description {
color: #666;
margin-bottom: 30px;
line-height: 1.6;
}
.action-buttons {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.collect-btn {
background-color: #d4af37;
color: #fff;
border: none;
padding: 12px 30px;
font-size: 1.1rem;
border-radius: 30px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: bold;
}
.collect-btn:hover {
background-color: #b8952f;
transform: translateY(-2px);
}
.share-btn {
background-color: #3b5998;
color: #fff;
border: none;
padding: 12px 30px;
font-size: 1.1rem;
border-radius: 30px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: bold;
}
.share-btn:hover {
background-color: #2d4373;
transform: translateY(-2px);
}
.remaining-draws {
margin-top: 20px;
font-size: 1rem;
color: #666;
}
.footer {
text-align: center;
padding: 30px 0;
color: #666;
font-size: 0.9rem;
margin-top: 50px;
border-top: 1px solid #d4af37;
}
/* Animation for the fortune bag */
@keyframes shake {
0% { transform: rotate(0deg); }
25% { transform: rotate(-8deg) scale(1.05); }
50% { transform: rotate(0deg); }
75% { transform: rotate(8deg) scale(1.05); }
100% { transform: rotate(0deg); }
}
.shake {
animation: shake 0.5s ease-in-out;
}
/* Shine animation */
@keyframes shine {
0% {
background-position: -100% 0;
}
100% {
background-position: 200% 0;
}
}
.shine {
position: relative;
overflow: hidden;
}
.shine::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
animation: shine 2s infinite;
background-size: 200% 100%;
}
/* Confetti animation */
.confetti {
position: fixed;
width: 10px;
height: 10px;
opacity: 0;
animation: confetti-fall 5s ease-in-out forwards;
z-index: 999;
}
@keyframes confetti-fall {
0% {
opacity: 1;
transform: translateY(-100px) rotate(0deg);
}
100% {
opacity: 0;
transform: translateY(calc(100vh + 100px)) rotate(720deg);
}
}
/* Bag opening animation */
.bag-opening-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 900;
display: none;
align-items: center;
justify-content: center;
}
.bag-animation {
width: 300px;
height: 400px;
position: relative;
}
.bag-closed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
transition: all 0.5s ease;
}
.bag-opened {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.5s ease;
}
.prize-reveal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: all 0.8s ease;
width: 150px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
}
/* User tools */
.user-tools {
position: fixed;
top: 20px;
right: 20px;
display: flex;
gap: 10px;
z-index: 100;
}
.tool-button {
background-color: #fff;
border: 2px solid #d4af37;
color: #d70000;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.2rem;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.tool-button:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* Responsive design */
@media (max-width: 768px) {
.main-content {
flex-direction: column;
align-items: center;
}
.logo {
font-size: 2rem;
}
.slogan {
font-size: 1rem;
}
.tiger-god {
width: 150px;
height: 150px;
}
.fortune-bag {
width: 150px;
height: 180px;
}
.prize-grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.stats-grid {
grid-template-columns: 1fr;
}
.action-buttons {
flex-direction: column;
gap: 10px;
}
.collect-btn, .share-btn {
width: 100%;
}
}
</style>
</head>
<body>
<div class="pattern-bg"></div>
<div class="user-tools">
<div class="tool-button" onclick="toggleSound()" id="soundToggle">
🔊
</div>
<div class="tool-button" onclick="toggleFullscreen()">
⛶
</div>
</div>
<header>
<div class="header-pattern"></div>
<div class="container">
<h1 class="logo">ALT<span>豪華福袋</span></h1>
<p class="slogan">虎爺財神賜福，抽到豪華大獎！</p>
</div>
</header>
<div class="container">
<div class="main-content">
<div class="temple-section">
<div class="fortune-temple">
<div class="temple-bg"></div>
<div class="tiger-god">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<!-- 虎爺財神頭部 -->
<circle cx="100" cy="80" r="60" fill="#f89406" />
<!-- 虎爺財神臉部 -->
<circle cx="100" cy="75" r="50" fill="#ffcc80" />
<!-- 虎爺財神條紋 -->
<path d="M70,60 Q80,70 90,60" stroke="#000" stroke-width="3" fill="none" />
<path d="M110,60 Q120,70 130,60" stroke="#000" stroke-width="3" fill="none" />
<path d="M60,80 Q70,85 80,80" stroke="#000" stroke-width="3" fill="none" />
<path d="M120,80 Q130,85 140,80" stroke="#000" stroke-width="3" fill="none" />
<!-- 虎爺財神眼睛 -->
<circle cx="80" cy="70" r="5" fill="#000" />
<circle cx="120" cy="70" r="5" fill="#000" />
<!-- 虎爺財神鼻子 -->
<circle cx="100" cy="85" r="7" fill="#000" />
<!-- 虎爺財神嘴巴 -->
<path d="M90,95 Q100,105 110,95" stroke="#000" stroke-width="2" fill="none" />
<!-- 虎爺財神鬍鬚 -->
<line x1="65" y1="90" x2="85" y2="92" stroke="#000" stroke-width="2" />
<line x1="65" y1="95" x2="85" y2="95" stroke="#000" stroke-width="2" />
<line x1="65" y1="100" x2="85" y2="98" stroke="#000" stroke-width="2" />
<line x1="115" y1="92" x2="135" y2="90" stroke="#000" stroke-width="2" />
<line x1="115" y1="95" x2="135" y2="95" stroke="#000" stroke-width="2" />
<line x1="115" y1="98" x2="135" y2="100" stroke="#000" stroke-width="2" />
<!-- 虎爺財神帽子 -->
<path d="M45,50 Q100,10 155,50" fill="#d70000" />
<path d="M45,50 Q100,30 155,50" stroke="#d4af37" stroke-width="3" fill="none" />
<circle cx="100" cy="25" r="10" fill="#d4af37" />
<!-- 虎爺財神身體 -->
<rect x="70" y="140" width="60" height="50" fill="#d70000" />
<!-- 虎爺財神袖子 -->
<rect x="55" y="140" width="15" height="30" fill="#d70000" />
<rect x="130" y="140" width="15" height="30" fill="#d70000" />
<!-- 虎爺財神手 -->
<circle cx="55" cy="170" r="10" fill="#ffcc80" />
<circle cx="145" cy="170" r="10" fill="#ffcc80" />
<!-- 黃金元寶 -->
<path d="M85,180 L100,170 L115,180 L115,185 L85,185 Z" fill="#d4af37" />
</svg>
</div>
<div class="prize-showcase">
<div class="prize-item shine">
<div class="prize-icon">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="10" width="60" height="80" rx="10" fill="#f0f0f0" stroke="#333" stroke-width="2" />
<rect x="25" y="15" width="50" height="40" rx="5" fill="#333" />
<rect x="35" y="60" width="30" height="5" rx="2" fill="#333" />
<circle cx="50" cy="75" r="7" stroke="#333" stroke-width="2" fill="none" />
</svg>
</div>
<div class="prize-name">iPhone 16</div>
<div class="prize-chance">特等獎</div>
</div>
<div class="prize-item shine">
<div class="prize-icon">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="30" width="80" height="40" rx="5" fill="#f0f0f0" stroke="#333" stroke-width="2" />
<rect x="15" y="35" width="70" height="30" rx="3" fill="#333" />
<circle cx="25" cy="80" r="10" fill="#333" />
<circle cx="75" cy="80" r="10" fill="#333" />
</svg>
</div>
<div class="prize-name">PS5主機</div>
<div class="prize-chance">一等獎</div>
</div>
<div class="prize-item shine">
<div class="prize-icon">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path d="M20,80 L20,50 L50,40 L80,50 L80,80 Z" fill="#f0f0f0" stroke="#333" stroke-width="2" />
<circle cx="35" cy="80" r="10" fill="#333" />
<circle cx="65" cy="80" r="10" fill="#333" />
<rect x="40" y="50" width="20" height="10" rx="2" fill="#333" />
</svg>
</div>
<div class="prize-name">電動機車</div>
<div class="prize-chance">一等獎</div>
</div>
</div>
<div class="fortune-bag" onclick="shakeBag()">
<svg viewBox="0 0 150 180" xmlns="http://www.w3.org/2000/svg">
<!-- 福袋 -->
<path d="M20,60 Q75,-10 130,60 L130,160 Q75,180 20,160 Z" fill="#d70000" />
<path d="M20,60 Q75,-10 130,60 L130,160 Q75,180 20,160 Z" stroke="#d4af37" stroke-width="3" fill="none" />
<!-- 福袋繩子 -->
<path d="M55,60 Q75,45 95,60" stroke="#d4af37" stroke-width="4" fill="none" />
<!-- 福字 -->
<text x="75" y="110" font-family="Microsoft JhengHei" font-size="50" fill="#d4af37" text-anchor="middle">福</text>
<!-- 裝飾 -->
<circle cx="45" cy="90" r="8" fill="#d4af37" />
<circle cx="105" cy="90" r="8" fill="#
