Oronemu/game-marathon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

teapot

Browse Source
This commit is contained in:
Oronemu
2025-12-17 21:38:43 +07:00
parent 790b2d6083
commit 3920a9bf8c
1 changed files with 144 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

239
frontend/src/pages/TeapotPage.tsx
View File

@@ -14,96 +14,158 @@ export function TeapotPage() {
<div className="absolute bottom-1/4 -right-32 w-96 h-96 bg-orange-500/5 rounded-full blur-[100px]" />
</div>
{/* Teapot ASCII art / SVG */}
<div
className={`relative mb-8 cursor-pointer transition-transform duration-300 ${isPoured ? 'rotate-[-30deg]' : 'hover:rotate-[-10deg]'}`}
onClick={() => setIsPoured(!isPoured)}
>
{/* Steam animation */}
<div className={`absolute -top-8 left-1/2 -translate-x-1/2 flex gap-2 transition-opacity duration-500 ${isPoured ? 'opacity-100' : 'opacity-50'}`}>
<div className="w-2 h-8 bg-gradient-to-t from-gray-400/50 to-transparent rounded-full animate-steam" style={{ animationDelay: '0s' }} />
<div className="w-2 h-10 bg-gradient-to-t from-gray-400/50 to-transparent rounded-full animate-steam" style={{ animationDelay: '0.3s' }} />
<div className="w-2 h-6 bg-gradient-to-t from-gray-400/50 to-transparent rounded-full animate-steam" style={{ animationDelay: '0.6s' }} />
{/* Teapot and Cup container */}
<div className="relative mb-8 flex items-start">
{/* Teapot */}
<div
className="relative cursor-pointer transition-transform duration-500 ease-out"
style={{
transform: isPoured ? 'rotate(15deg)' : 'rotate(0deg)',
transformOrigin: '80px 130px'
}}
onClick={() => setIsPoured(!isPoured)}
>
{/* Steam animation */}
<div className={`absolute -top-8 left-1/2 -translate-x-1/2 flex gap-2 transition-opacity duration-500 ${isPoured ? 'opacity-0' : 'opacity-50'}`}>
<div className="w-2 h-8 bg-gradient-to-t from-gray-400/50 to-transparent rounded-full animate-steam" style={{ animationDelay: '0s' }} />
<div className="w-2 h-10 bg-gradient-to-t from-gray-400/50 to-transparent rounded-full animate-steam" style={{ animationDelay: '0.3s' }} />
<div className="w-2 h-6 bg-gradient-to-t from-gray-400/50 to-transparent rounded-full animate-steam" style={{ animationDelay: '0.6s' }} />
</div>
{/* Teapot SVG - expanded viewBox to show full handle */}
<svg width="180" height="140" viewBox="-15 0 175 140" className="drop-shadow-2xl overflow-visible">
{/* Gradients */}
<defs>
<linearGradient id="teapotGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stopColor="#fde047" />
<stop offset="50%" stopColor="#fbbf24" />
<stop offset="100%" stopColor="#f59e0b" />
</linearGradient>
<linearGradient id="lidGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stopColor="#fef08a" />
<stop offset="100%" stopColor="#fbbf24" />
</linearGradient>
</defs>
{/* Handle - behind body */}
<path
d="M 25 70 Q -5 70 -5 90 Q -5 110 25 110"
fill="none"
stroke="#f59e0b"
strokeWidth="8"
strokeLinecap="round"
/>
<path
d="M 25 70 Q -5 70 -5 90 Q -5 110 25 110"
fill="none"
stroke="url(#teapotGradient)"
strokeWidth="5"
strokeLinecap="round"
/>
{/* Body */}
<ellipse cx="80" cy="90" rx="55" ry="40" fill="url(#teapotGradient)" stroke="#f59e0b" strokeWidth="3" />
{/* Lid */}
<ellipse cx="80" cy="55" rx="35" ry="10" fill="url(#lidGradient)" stroke="#f59e0b" strokeWidth="2" />
<ellipse cx="80" cy="50" rx="25" ry="7" fill="url(#lidGradient)" stroke="#f59e0b" strokeWidth="2" />
<circle cx="80" cy="42" r="8" fill="#fbbf24" stroke="#f59e0b" strokeWidth="2" />
{/* Spout */}
<path
d="M 135 85 Q 150 75 155 60 Q 158 50 150 45"
fill="none"
stroke="#f59e0b"
strokeWidth="8"
strokeLinecap="round"
/>
<path
d="M 135 85 Q 150 75 155 60 Q 158 50 150 45"
fill="none"
stroke="url(#teapotGradient)"
strokeWidth="5"
strokeLinecap="round"
/>
{/* Face */}
<circle cx="65" cy="85" r="5" fill="#292524" />
<circle cx="95" cy="85" r="5" fill="#292524" />
<circle cx="67" cy="83" r="2" fill="white" />
<circle cx="97" cy="83" r="2" fill="white" />
<path d="M 70 100 Q 80 110 90 100" fill="none" stroke="#292524" strokeWidth="3" strokeLinecap="round" />
{/* Blush */}
<ellipse cx="55" cy="95" rx="8" ry="5" fill="#fca5a5" opacity="0.5" />
<ellipse cx="105" cy="95" rx="8" ry="5" fill="#fca5a5" opacity="0.5" />
</svg>
{/* Glow effect */}
<div className="absolute inset-0 bg-amber-400/20 rounded-full blur-3xl -z-10" />
</div>
{/* Teapot */}
<svg width="160" height="140" viewBox="0 0 160 140" className="drop-shadow-2xl">
{/* Body */}
<ellipse cx="80" cy="90" rx="55" ry="40" fill="url(#teapotGradient)" stroke="#f59e0b" strokeWidth="3" />
{/* Cup - positioned to the right and below */}
<div className="relative ml-[20px] mt-[125px]">
<svg width="100" height="70" viewBox="0 0 95 70" className="drop-shadow-xl">
<defs>
<linearGradient id="cupGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stopColor="#fef3c7" />
<stop offset="100%" stopColor="#fde68a" />
</linearGradient>
<linearGradient id="teaInCupGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stopColor="#d97706" />
<stop offset="100%" stopColor="#92400e" />
</linearGradient>
</defs>
{/* Lid */}
<ellipse cx="80" cy="55" rx="35" ry="10" fill="url(#lidGradient)" stroke="#f59e0b" strokeWidth="2" />
<ellipse cx="80" cy="50" rx="25" ry="7" fill="url(#lidGradient)" stroke="#f59e0b" strokeWidth="2" />
<circle cx="80" cy="42" r="8" fill="#fbbf24" stroke="#f59e0b" strokeWidth="2" />
{/* Cup body */}
<path
d="M 10 15 L 15 60 Q 20 68 40 68 Q 60 68 65 60 L 70 15 Z"
fill="url(#cupGradient)"
stroke="#f59e0b"
strokeWidth="2"
/>
{/* Spout */}
<path
d="M 135 85 Q 150 75 155 60 Q 158 50 150 45"
fill="none"
stroke="#f59e0b"
strokeWidth="8"
strokeLinecap="round"
/>
<path
d="M 135 85 Q 150 75 155 60 Q 158 50 150 45"
fill="none"
stroke="url(#teapotGradient)"
strokeWidth="5"
strokeLinecap="round"
/>
{/* Cup rim */}
<ellipse cx="40" cy="15" rx="30" ry="8" fill="url(#cupGradient)" stroke="#f59e0b" strokeWidth="2" />
{/* Handle */}
<path
d="M 25 70 Q 0 70 0 90 Q 0 110 25 110"
fill="none"
stroke="#f59e0b"
strokeWidth="8"
strokeLinecap="round"
/>
<path
d="M 25 70 Q 0 70 0 90 Q 0 110 25 110"
fill="none"
stroke="url(#teapotGradient)"
strokeWidth="5"
strokeLinecap="round"
/>
{/* Tea in cup - fills up when pouring */}
<ellipse
cx="40"
cy="20"
rx="25"
ry="6"
fill="url(#teaInCupGradient)"
className={`transition-all duration-1000 ${isPoured ? 'opacity-100' : 'opacity-30'}`}
style={{
transform: isPoured ? 'translateY(0)' : 'translateY(15px)',
transformOrigin: 'center'
}}
/>
{/* Face */}
<circle cx="65" cy="85" r="5" fill="#292524" /> {/* Left eye */}
<circle cx="95" cy="85" r="5" fill="#292524" /> {/* Right eye */}
<circle cx="67" cy="83" r="2" fill="white" /> {/* Left eye shine */}
<circle cx="97" cy="83" r="2" fill="white" /> {/* Right eye shine */}
<path d="M 70 100 Q 80 110 90 100" fill="none" stroke="#292524" strokeWidth="3" strokeLinecap="round" /> {/* Smile */}
{/* Handle */}
<path
d="M 70 25 Q 85 25 85 40 Q 85 55 70 55"
fill="none"
stroke="#f59e0b"
strokeWidth="5"
strokeLinecap="round"
/>
<path
d="M 70 25 Q 85 25 85 40 Q 85 55 70 55"
fill="none"
stroke="url(#cupGradient)"
strokeWidth="3"
strokeLinecap="round"
/>
</svg>
{/* Blush */}
<ellipse cx="55" cy="95" rx="8" ry="5" fill="#fca5a5" opacity="0.5" />
<ellipse cx="105" cy="95" rx="8" ry="5" fill="#fca5a5" opacity="0.5" />
{/* Gradients */}
<defs>
<linearGradient id="teapotGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stopColor="#fde047" />
<stop offset="50%" stopColor="#fbbf24" />
<stop offset="100%" stopColor="#f59e0b" />
</linearGradient>
<linearGradient id="lidGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stopColor="#fef08a" />
<stop offset="100%" stopColor="#fbbf24" />
</linearGradient>
</defs>
</svg>
{/* Tea drops when pouring */}
{isPoured && (
<div className="absolute top-12 right-0">
<div className="w-2 h-2 rounded-full bg-amber-600 animate-drop" style={{ animationDelay: '0s' }} />
<div className="w-1.5 h-1.5 rounded-full bg-amber-500 animate-drop ml-1" style={{ animationDelay: '0.2s' }} />
<div className="w-2 h-2 rounded-full bg-amber-600 animate-drop" style={{ animationDelay: '0.4s' }} />
{/* Steam from cup when filled */}
<div className={`absolute -top-4 left-1/2 -translate-x-1/2 flex gap-1 transition-opacity duration-1000 ${isPoured ? 'opacity-60' : 'opacity-0'}`}>
<div className="w-1 h-4 bg-gradient-to-t from-gray-400/40 to-transparent rounded-full animate-steam" style={{ animationDelay: '0.5s' }} />
<div className="w-1 h-5 bg-gradient-to-t from-gray-400/40 to-transparent rounded-full animate-steam" style={{ animationDelay: '0.8s' }} />
<div className="w-1 h-3 bg-gradient-to-t from-gray-400/40 to-transparent rounded-full animate-steam" style={{ animationDelay: '1.1s' }} />
</div>
)}
{/* Glow effect */}
<div className="absolute inset-0 bg-amber-400/20 rounded-full blur-3xl -z-10" />
</div>
</div>
{/* 418 text */}
@@ -173,19 +235,6 @@ export function TeapotPage() {
.animate-steam {
animation: steam 2s ease-in-out infinite;
}
@keyframes drop {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(60px);
opacity: 0;
}
}
.animate-drop {
animation: drop 0.6s ease-in infinite;
}
`}</style>
</div>
)