242 lines
9.6 KiB
TypeScript
242 lines
9.6 KiB
TypeScript
import { useState } from 'react'
|
||
import { Link } from 'react-router-dom'
|
||
import { NeonButton } from '@/components/ui'
|
||
import { Home, Sparkles, Coffee } from 'lucide-react'
|
||
|
||
export function TeapotPage() {
|
||
const [isPoured, setIsPoured] = useState(false)
|
||
|
||
return (
|
||
<div className="min-h-[70vh] flex flex-col items-center justify-center text-center px-4">
|
||
{/* Background effects */}
|
||
<div className="fixed inset-0 overflow-hidden pointer-events-none">
|
||
<div className="absolute top-1/4 -left-32 w-96 h-96 bg-amber-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>
|
||
|
||
{/* 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>
|
||
|
||
{/* 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>
|
||
|
||
{/* 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"
|
||
/>
|
||
|
||
{/* Cup rim */}
|
||
<ellipse cx="40" cy="15" rx="30" ry="8" fill="url(#cupGradient)" stroke="#f59e0b" strokeWidth="2" />
|
||
|
||
{/* 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'
|
||
}}
|
||
/>
|
||
|
||
{/* 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>
|
||
|
||
{/* 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>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 418 text */}
|
||
<div className="relative mb-4">
|
||
<h1 className="text-8xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-amber-400 via-orange-400 to-red-400">
|
||
418
|
||
</h1>
|
||
<div className="absolute inset-0 text-8xl font-bold text-amber-500/20 blur-xl">
|
||
418
|
||
</div>
|
||
</div>
|
||
|
||
<h2 className="text-2xl font-bold text-white mb-3">
|
||
I'm a teapot
|
||
</h2>
|
||
|
||
<p className="text-gray-400 mb-2 max-w-md">
|
||
Сервер отказывается варить кофе, потому что он чайник.
|
||
</p>
|
||
<p className="text-gray-500 text-sm mb-8 max-w-md">
|
||
RFC 2324, Hyper Text Coffee Pot Control Protocol
|
||
</p>
|
||
|
||
{/* Fun fact */}
|
||
<div className="glass rounded-xl p-4 mb-8 max-w-md border border-amber-500/20">
|
||
<div className="flex items-center gap-2 text-amber-400 mb-2">
|
||
<Coffee className="w-4 h-4" />
|
||
<span className="text-sm font-semibold">Fun fact</span>
|
||
</div>
|
||
<p className="text-gray-400 text-sm">
|
||
Это настоящий HTTP-код ответа из первоапрельской шутки 1998 года.
|
||
Нажми на чайник!
|
||
</p>
|
||
</div>
|
||
|
||
{/* Button */}
|
||
<Link to="/">
|
||
<NeonButton size="lg" icon={<Home className="w-5 h-5" />}>
|
||
На главную
|
||
</NeonButton>
|
||
</Link>
|
||
|
||
{/* Decorative sparkles */}
|
||
<div className="absolute top-1/4 left-1/4 opacity-20">
|
||
<Sparkles className="w-6 h-6 text-amber-400 animate-pulse" />
|
||
</div>
|
||
<div className="absolute bottom-1/3 right-1/4 opacity-20">
|
||
<Sparkles className="w-4 h-4 text-orange-400 animate-pulse" style={{ animationDelay: '1s' }} />
|
||
</div>
|
||
|
||
{/* Custom animations */}
|
||
<style>{`
|
||
@keyframes steam {
|
||
0% {
|
||
transform: translateY(0) scaleX(1);
|
||
opacity: 0.5;
|
||
}
|
||
50% {
|
||
transform: translateY(-10px) scaleX(1.2);
|
||
opacity: 0.3;
|
||
}
|
||
100% {
|
||
transform: translateY(-20px) scaleX(0.8);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
.animate-steam {
|
||
animation: steam 2s ease-in-out infinite;
|
||
}
|
||
`}</style>
|
||
</div>
|
||
)
|
||
}
|