ПОЧТИ ГОТОВО
This commit is contained in:
@@ -1006,8 +1006,7 @@ export function PlayPage() {
|
||||
Выполнено
|
||||
</NeonButton>
|
||||
<NeonButton
|
||||
variant="outline"
|
||||
className="border-red-500/30 text-red-400 hover:bg-red-500/10"
|
||||
variant="danger"
|
||||
onClick={handleDrop}
|
||||
isLoading={isDropping}
|
||||
icon={<XCircle className="w-4 h-4" />}
|
||||
|
||||
192
frontend/src/pages/TeapotPage.tsx
Normal file
192
frontend/src/pages/TeapotPage.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
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 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' }} />
|
||||
</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" />
|
||||
|
||||
{/* 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"
|
||||
/>
|
||||
|
||||
{/* 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"
|
||||
/>
|
||||
|
||||
{/* 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 */}
|
||||
|
||||
{/* 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' }} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Glow effect */}
|
||||
<div className="absolute inset-0 bg-amber-400/20 rounded-full blur-3xl -z-10" />
|
||||
</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;
|
||||
}
|
||||
@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>
|
||||
)
|
||||
}
|
||||
@@ -10,3 +10,4 @@ export { LeaderboardPage } from './LeaderboardPage'
|
||||
export { ProfilePage } from './ProfilePage'
|
||||
export { UserProfilePage } from './UserProfilePage'
|
||||
export { NotFoundPage } from './NotFoundPage'
|
||||
export { TeapotPage } from './TeapotPage'
|
||||
|
||||
Reference in New Issue
Block a user