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