feat(admin): 复刻登录页 — boot 过渡动画 + 角色表单
- 搬入 framer-motion，复刻参考项目登录体验 - AICoreEffect：点芯片启动神经链接进度，S-core 数据流点亮，100% 解锁 - AIBanner：青色数据流 + 紫色神经网络背景 - LoginCharacters：四只卡通角色，眼睛跟随鼠标，输密码时遮眼/偷看 - 表单去掉验证码，接现有 login api；账号密码 + 密码显示切换 - 品牌名换 sundynix admin，登录按钮用青蓝渐变 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Blizzard
Generated
+44
-2
@@ -11,6 +11,7 @@
|
|||||||
"@tailwindcss/typography": "^0.5.20",
|
"@tailwindcss/typography": "^0.5.20",
|
||||||
"@tailwindcss/vite": "^4.3.3",
|
"@tailwindcss/vite": "^4.3.3",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
|
"framer-motion": "^12.42.2",
|
||||||
"lucide-react": "^1.24.0",
|
"lucide-react": "^1.24.0",
|
||||||
"react": "^19.2.7",
|
"react": "^19.2.7",
|
||||||
"react-dom": "^19.2.7",
|
"react-dom": "^19.2.7",
|
||||||
@@ -1327,6 +1328,33 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/framer-motion": {
|
||||||
|
"version": "12.42.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.42.2.tgz",
|
||||||
|
"integrity": "sha512-5XY9luDiu0oHfHBjpDthFMh0ES+122w6p/papSJBweMkO8Sn+PW2QaEgRblQBpWFnuvZS5qvarpt/hO2pjGmnw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"motion-dom": "^12.42.2",
|
||||||
|
"motion-utils": "^12.39.0",
|
||||||
|
"tslib": "^2.4.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@emotion/is-prop-valid": "*",
|
||||||
|
"react": "^18.0.0 || ^19.0.0",
|
||||||
|
"react-dom": "^18.0.0 || ^19.0.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@emotion/is-prop-valid": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"react": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"react-dom": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/fsevents": {
|
"node_modules/fsevents": {
|
||||||
"version": "2.3.3",
|
"version": "2.3.3",
|
||||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||||
@@ -2588,6 +2616,21 @@
|
|||||||
],
|
],
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/motion-dom": {
|
||||||
|
"version": "12.42.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.42.2.tgz",
|
||||||
|
"integrity": "sha512-5gIMWLp/PycBtJRJWRgjxke5n8dlvkSn2DrYW+tr3XcqAZY1xZh6BJyooJXCM8wdfM7wfMjkBJNLge1CKPUIRA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"motion-utils": "^12.39.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/motion-utils": {
|
||||||
|
"version": "12.39.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.39.0.tgz",
|
||||||
|
"integrity": "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/ms": {
|
"node_modules/ms": {
|
||||||
"version": "2.1.3",
|
"version": "2.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||||
@@ -3072,8 +3115,7 @@
|
|||||||
"version": "2.8.1",
|
"version": "2.8.1",
|
||||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||||
"license": "0BSD",
|
"license": "0BSD"
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"node_modules/typescript": {
|
"node_modules/typescript": {
|
||||||
"version": "6.0.3",
|
"version": "6.0.3",
|
||||||
|
|||||||
@@ -13,6 +13,7 @@
|
|||||||
"@tailwindcss/typography": "^0.5.20",
|
"@tailwindcss/typography": "^0.5.20",
|
||||||
"@tailwindcss/vite": "^4.3.3",
|
"@tailwindcss/vite": "^4.3.3",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
|
"framer-motion": "^12.42.2",
|
||||||
"lucide-react": "^1.24.0",
|
"lucide-react": "^1.24.0",
|
||||||
"react": "^19.2.7",
|
"react": "^19.2.7",
|
||||||
"react-dom": "^19.2.7",
|
"react-dom": "^19.2.7",
|
||||||
|
|||||||
@@ -1,97 +0,0 @@
|
|||||||
import { useEffect, useRef } from 'react'
|
|
||||||
|
|
||||||
/** 登录页背景：青蓝粒子网络（呼应 logo 的节点网络），纯 canvas 无依赖 */
|
|
||||||
export function LoginBackdrop() {
|
|
||||||
const ref = useRef<HTMLCanvasElement>(null)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const canvas = ref.current
|
|
||||||
if (!canvas) return
|
|
||||||
const ctx = canvas.getContext('2d')
|
|
||||||
if (!ctx) return
|
|
||||||
|
|
||||||
const reduce = window.matchMedia(
|
|
||||||
'(prefers-reduced-motion: reduce)',
|
|
||||||
).matches
|
|
||||||
const dpr = Math.min(window.devicePixelRatio || 1, 2)
|
|
||||||
let w = 0
|
|
||||||
let h = 0
|
|
||||||
let raf = 0
|
|
||||||
const dots: { x: number; y: number; vx: number; vy: number }[] = []
|
|
||||||
|
|
||||||
const resize = () => {
|
|
||||||
w = canvas.clientWidth
|
|
||||||
h = canvas.clientHeight
|
|
||||||
canvas.width = w * dpr
|
|
||||||
canvas.height = h * dpr
|
|
||||||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
|
|
||||||
}
|
|
||||||
|
|
||||||
const init = () => {
|
|
||||||
dots.length = 0
|
|
||||||
const n = Math.min(64, Math.floor((w * h) / 16000))
|
|
||||||
for (let i = 0; i < n; i++) {
|
|
||||||
dots.push({
|
|
||||||
x: Math.random() * w,
|
|
||||||
y: Math.random() * h,
|
|
||||||
vx: (Math.random() - 0.5) * 0.28,
|
|
||||||
vy: (Math.random() - 0.5) * 0.28,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const frame = () => {
|
|
||||||
ctx.clearRect(0, 0, w, h)
|
|
||||||
for (const p of dots) {
|
|
||||||
p.x += p.vx
|
|
||||||
p.y += p.vy
|
|
||||||
if (p.x < 0 || p.x > w) p.vx *= -1
|
|
||||||
if (p.y < 0 || p.y > h) p.vy *= -1
|
|
||||||
}
|
|
||||||
for (let i = 0; i < dots.length; i++) {
|
|
||||||
for (let j = i + 1; j < dots.length; j++) {
|
|
||||||
const a = dots[i]
|
|
||||||
const b = dots[j]
|
|
||||||
const d = Math.hypot(a.x - b.x, a.y - b.y)
|
|
||||||
if (d < 130) {
|
|
||||||
ctx.strokeStyle = `rgba(56,189,248,${(1 - d / 130) * 0.16})`
|
|
||||||
ctx.lineWidth = 1
|
|
||||||
ctx.beginPath()
|
|
||||||
ctx.moveTo(a.x, a.y)
|
|
||||||
ctx.lineTo(b.x, b.y)
|
|
||||||
ctx.stroke()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
for (const p of dots) {
|
|
||||||
ctx.fillStyle = 'rgba(56,189,248,0.55)'
|
|
||||||
ctx.beginPath()
|
|
||||||
ctx.arc(p.x, p.y, 1.4, 0, Math.PI * 2)
|
|
||||||
ctx.fill()
|
|
||||||
}
|
|
||||||
if (!reduce) raf = requestAnimationFrame(frame)
|
|
||||||
}
|
|
||||||
|
|
||||||
const onResize = () => {
|
|
||||||
resize()
|
|
||||||
init()
|
|
||||||
}
|
|
||||||
|
|
||||||
resize()
|
|
||||||
init()
|
|
||||||
frame()
|
|
||||||
window.addEventListener('resize', onResize)
|
|
||||||
return () => {
|
|
||||||
cancelAnimationFrame(raf)
|
|
||||||
window.removeEventListener('resize', onResize)
|
|
||||||
}
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<canvas
|
|
||||||
ref={ref}
|
|
||||||
aria-hidden="true"
|
|
||||||
className="absolute inset-0 h-full w-full"
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,168 @@
|
|||||||
|
import { motion } from 'framer-motion'
|
||||||
|
|
||||||
|
/** 登录背景：左青色数据流 + 右紫色神经网络 + 中央连线（呼应 logo）。搬自参考项目。 */
|
||||||
|
export default function AIBanner() {
|
||||||
|
const dataParticles = Array.from({ length: 100 }).map((_, i) => ({
|
||||||
|
id: `dp-${i}`,
|
||||||
|
y: 10 + Math.random() * 80,
|
||||||
|
size: Math.random() > 0.8 ? 6 : Math.random() * 3 + 1.5,
|
||||||
|
isSquare: Math.random() > 0.6,
|
||||||
|
duration: Math.random() * 2 + 1.5,
|
||||||
|
delay: Math.random() * 3,
|
||||||
|
opacity: Math.random() * 0.7 + 0.3,
|
||||||
|
}))
|
||||||
|
|
||||||
|
const neuralNodes = [
|
||||||
|
{ x: 10, y: 50 }, { x: 30, y: 25 }, { x: 35, y: 75 },
|
||||||
|
{ x: 55, y: 45 }, { x: 75, y: 15 }, { x: 70, y: 85 },
|
||||||
|
{ x: 90, y: 55 }, { x: 80, y: 40 }, { x: 50, y: 90 },
|
||||||
|
{ x: 20, y: 95 }, { x: 95, y: 20 }, { x: 45, y: 10 },
|
||||||
|
{ x: 85, y: 75 }, { x: 15, y: 20 },
|
||||||
|
]
|
||||||
|
const neuralLines = [
|
||||||
|
[0, 1], [0, 2], [1, 3], [2, 3], [1, 4], [3, 4],
|
||||||
|
[3, 6], [2, 5], [3, 5], [5, 6], [4, 7], [6, 7],
|
||||||
|
[2, 8], [5, 8], [0, 9], [2, 9], [4, 10], [7, 10],
|
||||||
|
[1, 11], [4, 11], [6, 12], [5, 12], [0, 13], [1, 13],
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="absolute inset-0 h-full w-full overflow-hidden bg-[#080d17]">
|
||||||
|
<div className="pointer-events-none absolute left-[15%] top-1/2 h-[800px] w-[800px] -translate-y-1/2 rounded-full bg-cyan-600/15 blur-[150px] mix-blend-screen" />
|
||||||
|
<div className="pointer-events-none absolute right-[15%] top-1/2 h-[800px] w-[800px] -translate-y-1/2 rounded-full bg-fuchsia-600/15 blur-[150px] mix-blend-screen" />
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="pointer-events-none absolute inset-y-0 left-0 w-[65%]"
|
||||||
|
style={{
|
||||||
|
maskImage:
|
||||||
|
'linear-gradient(to right, black 0%, black 60%, transparent 100%)',
|
||||||
|
WebkitMaskImage:
|
||||||
|
'linear-gradient(to right, black 0%, black 60%, transparent 100%)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{dataParticles.map((p) => (
|
||||||
|
<motion.div
|
||||||
|
key={p.id}
|
||||||
|
className={`absolute bg-cyan-400 ${p.isSquare ? 'rounded-sm' : 'rounded-full'}`}
|
||||||
|
style={{
|
||||||
|
width: p.size,
|
||||||
|
height: p.size,
|
||||||
|
top: `${p.y}%`,
|
||||||
|
boxShadow: p.isSquare
|
||||||
|
? '0 0 12px 3px rgba(6,182,212,0.9)'
|
||||||
|
: '0 0 8px 2px rgba(6,182,212,0.6)',
|
||||||
|
}}
|
||||||
|
initial={{ x: '-10vw', opacity: 0 }}
|
||||||
|
animate={{ x: '75vw', opacity: [0, p.opacity, p.opacity, 0] }}
|
||||||
|
transition={{
|
||||||
|
duration: p.duration * 3.5,
|
||||||
|
repeat: Infinity,
|
||||||
|
delay: p.delay,
|
||||||
|
ease: 'linear',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
<div className="absolute left-0 top-1/2 flex h-[80%] w-full -translate-y-1/2 flex-col justify-between opacity-70">
|
||||||
|
{Array.from({ length: 20 }).map((_, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={`streak-${i}`}
|
||||||
|
className="h-[2px] bg-gradient-to-r from-transparent via-cyan-400 to-transparent"
|
||||||
|
style={{
|
||||||
|
width: `${Math.random() * 40 + 20}%`,
|
||||||
|
filter: 'drop-shadow(0 0 5px rgba(6,182,212,0.8))',
|
||||||
|
}}
|
||||||
|
initial={{ x: '-50%', opacity: 0 }}
|
||||||
|
animate={{ x: '150%', opacity: [0, 1, 1, 0] }}
|
||||||
|
transition={{
|
||||||
|
duration: 7 + Math.random() * 6,
|
||||||
|
repeat: Infinity,
|
||||||
|
delay: Math.random() * 4,
|
||||||
|
ease: 'linear',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pointer-events-none absolute inset-y-0 right-0 flex w-[45%] items-center justify-end pr-[5%]">
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
className="h-[80%] w-full max-w-[500px] overflow-visible"
|
||||||
|
style={{ filter: 'drop-shadow(0 0 10px rgba(217,70,239,0.6))' }}
|
||||||
|
>
|
||||||
|
{neuralLines.map((line, i) => {
|
||||||
|
const n1 = neuralNodes[line[0]]
|
||||||
|
const n2 = neuralNodes[line[1]]
|
||||||
|
return (
|
||||||
|
<motion.line
|
||||||
|
key={`line-${i}`}
|
||||||
|
x1={n1.x}
|
||||||
|
y1={n1.y}
|
||||||
|
x2={n2.x}
|
||||||
|
y2={n2.y}
|
||||||
|
stroke="rgba(217,70,239,0.5)"
|
||||||
|
strokeWidth="0.5"
|
||||||
|
initial={{ pathLength: 0, opacity: 0 }}
|
||||||
|
animate={{ pathLength: [0, 1, 1, 0], opacity: [0, 1, 1, 0] }}
|
||||||
|
transition={{
|
||||||
|
duration: 10,
|
||||||
|
repeat: Infinity,
|
||||||
|
ease: 'easeInOut',
|
||||||
|
delay: i * 0.3,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
{neuralNodes.map((node, i) => (
|
||||||
|
<motion.circle
|
||||||
|
key={`node-${i}`}
|
||||||
|
cx={node.x}
|
||||||
|
cy={node.y}
|
||||||
|
r="1.5"
|
||||||
|
fill="#d946ef"
|
||||||
|
animate={{ r: [1.5, 2.5, 1.5], opacity: [0.4, 0.9, 0.4] }}
|
||||||
|
transition={{ duration: 4.5, repeat: Infinity, delay: i * 0.4 }}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pointer-events-none absolute left-0 top-1/2 flex h-[600px] w-full -translate-y-1/2 items-center justify-center opacity-60 mix-blend-screen">
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 200 100"
|
||||||
|
preserveAspectRatio="none"
|
||||||
|
className="h-full w-full overflow-visible"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="elegant-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" stopColor="#06b6d4" stopOpacity="0" />
|
||||||
|
<stop offset="25%" stopColor="#06b6d4" stopOpacity="0.8" />
|
||||||
|
<stop offset="50%" stopColor="#8b5cf6" stopOpacity="0.5" />
|
||||||
|
<stop offset="75%" stopColor="#d946ef" stopOpacity="0.8" />
|
||||||
|
<stop offset="100%" stopColor="#d946ef" stopOpacity="0" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
{Array.from({ length: 4 }).map((_, i) => (
|
||||||
|
<motion.path
|
||||||
|
key={`line-${i}`}
|
||||||
|
d={`M -20 ${30 + i * 10} C 60 ${10 + i * 5}, 140 ${90 - i * 5}, 220 ${70 - i * 10}`}
|
||||||
|
fill="none"
|
||||||
|
stroke="url(#elegant-grad)"
|
||||||
|
strokeWidth={0.2 + i * 0.05}
|
||||||
|
animate={{
|
||||||
|
strokeDasharray: ['0, 400', '400, 0'],
|
||||||
|
opacity: [0.3, 0.7, 0.3],
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 16 + i * 4,
|
||||||
|
repeat: Infinity,
|
||||||
|
ease: 'easeInOut',
|
||||||
|
delay: i * 2,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,305 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import { motion, AnimatePresence } from 'framer-motion'
|
||||||
|
import { Cpu, ArrowRight } from 'lucide-react'
|
||||||
|
import AIBanner from './ai-banner'
|
||||||
|
|
||||||
|
/** 登录前的 boot 过渡：点击芯片 → 神经链接进度 → 解锁。搬自参考项目。 */
|
||||||
|
export default function AICoreEffect({ onUnlock }: { onUnlock: () => void }) {
|
||||||
|
const [synced, setSynced] = useState(false)
|
||||||
|
const [progress, setProgress] = useState(0)
|
||||||
|
|
||||||
|
const handleSync = () => {
|
||||||
|
if (synced || progress > 0) return
|
||||||
|
let p = 0
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
p += 1
|
||||||
|
setProgress(p)
|
||||||
|
if (p >= 100) {
|
||||||
|
clearInterval(interval)
|
||||||
|
setSynced(true)
|
||||||
|
setTimeout(() => onUnlock(), 800)
|
||||||
|
}
|
||||||
|
}, 25)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
{!synced && (
|
||||||
|
<motion.div
|
||||||
|
className="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden bg-[#080d17]"
|
||||||
|
exit={{ opacity: 0, scale: 1.05 }}
|
||||||
|
transition={{ duration: 0.8, ease: 'easeInOut' }}
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 opacity-50">
|
||||||
|
<AIBanner />
|
||||||
|
</div>
|
||||||
|
<div className="absolute inset-0 z-10 bg-[#080d17]/70 backdrop-blur-sm" />
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={`pointer-events-none absolute left-1/2 top-1/2 z-[15] flex h-[800px] w-[800px] -translate-x-1/2 -translate-y-1/2 items-center justify-center mix-blend-screen transition-all duration-1000 ${progress > 0 ? 'scale-[1.05] opacity-100' : 'scale-100 opacity-90'}`}
|
||||||
|
>
|
||||||
|
<svg viewBox="-20 0 140 100" className="h-full w-full overflow-visible">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="logo-cyan" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" stopColor="#06b6d4" />
|
||||||
|
<stop offset="100%" stopColor="#3b82f6" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="logo-purple" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" stopColor="#8b5cf6" />
|
||||||
|
<stop offset="100%" stopColor="#d946ef" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="logo-s" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stopColor="#06b6d4" />
|
||||||
|
<stop offset="40%" stopColor="#ffffff" />
|
||||||
|
<stop offset="60%" stopColor="#ffffff" />
|
||||||
|
<stop offset="100%" stopColor="#d946ef" />
|
||||||
|
</linearGradient>
|
||||||
|
<filter id="logo-glow">
|
||||||
|
<feGaussianBlur stdDeviation="1.2" result="coloredBlur" />
|
||||||
|
<feMerge>
|
||||||
|
<feMergeNode in="coloredBlur" />
|
||||||
|
<feMergeNode in="SourceGraphic" />
|
||||||
|
</feMerge>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<g opacity="0.7">
|
||||||
|
<path
|
||||||
|
d="M 50 10 L 20 25 L 20 75 L 50 90"
|
||||||
|
fill="none"
|
||||||
|
stroke="url(#logo-cyan)"
|
||||||
|
strokeWidth="0.5"
|
||||||
|
opacity="0.8"
|
||||||
|
/>
|
||||||
|
{Array.from({ length: 60 }).map((_, i) => {
|
||||||
|
const x = 22 + Math.random() * 25
|
||||||
|
const y = 25 + Math.random() * 50
|
||||||
|
return (
|
||||||
|
<motion.circle
|
||||||
|
key={`dot-${i}`}
|
||||||
|
cx={x}
|
||||||
|
cy={y}
|
||||||
|
r={Math.random() > 0.7 ? 1 : 0.5}
|
||||||
|
fill="#06b6d4"
|
||||||
|
animate={{ opacity: [0.2, 1, 0.2] }}
|
||||||
|
transition={{
|
||||||
|
duration: 1 + Math.random() * 2,
|
||||||
|
repeat: Infinity,
|
||||||
|
delay: Math.random() * 2,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
{Array.from({ length: 40 }).map((_, i) => (
|
||||||
|
<motion.circle
|
||||||
|
key={`inc-${i}`}
|
||||||
|
cx={-20}
|
||||||
|
cy={30 + Math.random() * 40}
|
||||||
|
r={Math.random() > 0.5 ? 1.5 : 0.8}
|
||||||
|
fill="#06b6d4"
|
||||||
|
animate={{ x: [0, 45], opacity: [0, 1, 0] }}
|
||||||
|
transition={{
|
||||||
|
duration: 1.5 + Math.random() * 1.5,
|
||||||
|
repeat: Infinity,
|
||||||
|
ease: 'linear',
|
||||||
|
delay: Math.random() * 2,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g opacity="0.7">
|
||||||
|
<path
|
||||||
|
d="M 50 10 L 80 25 L 80 75 L 50 90"
|
||||||
|
fill="none"
|
||||||
|
stroke="url(#logo-purple)"
|
||||||
|
strokeWidth="0.5"
|
||||||
|
opacity="0.8"
|
||||||
|
/>
|
||||||
|
{Array.from({ length: 20 }).map((_, i) => {
|
||||||
|
const x = 52 + Math.random() * 25
|
||||||
|
const y = 25 + Math.random() * 50
|
||||||
|
return (
|
||||||
|
<g key={`n-${i}`}>
|
||||||
|
<motion.circle
|
||||||
|
cx={x}
|
||||||
|
cy={y}
|
||||||
|
r="0.8"
|
||||||
|
fill="#d946ef"
|
||||||
|
animate={{ opacity: [0.3, 1, 0.3] }}
|
||||||
|
transition={{
|
||||||
|
duration: 1.5 + Math.random() * 2,
|
||||||
|
repeat: Infinity,
|
||||||
|
delay: Math.random() * 2,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1={x}
|
||||||
|
y1={y}
|
||||||
|
x2={50}
|
||||||
|
y2={50}
|
||||||
|
stroke="#d946ef"
|
||||||
|
strokeWidth="0.1"
|
||||||
|
opacity="0.4"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
{Array.from({ length: 20 }).map((_, i) => {
|
||||||
|
const startY = 30 + Math.random() * 40
|
||||||
|
const endY = 20 + Math.random() * 60
|
||||||
|
return (
|
||||||
|
<motion.g
|
||||||
|
key={`out-${i}`}
|
||||||
|
animate={{ x: [0, 35], opacity: [0, 1, 0] }}
|
||||||
|
transition={{
|
||||||
|
duration: 2 + Math.random() * 2,
|
||||||
|
repeat: Infinity,
|
||||||
|
ease: 'linear',
|
||||||
|
delay: Math.random() * 2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<circle cx={80} cy={endY} r="1.2" fill="#d946ef" />
|
||||||
|
<line
|
||||||
|
x1={50}
|
||||||
|
y1={startY}
|
||||||
|
x2={80}
|
||||||
|
y2={endY}
|
||||||
|
stroke="#d946ef"
|
||||||
|
strokeWidth="0.2"
|
||||||
|
opacity="0.5"
|
||||||
|
/>
|
||||||
|
</motion.g>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g filter="url(#logo-glow)">
|
||||||
|
{Array.from({ length: 80 }).map((_, i) => {
|
||||||
|
const offset = (i - 40) * 0.25
|
||||||
|
const isCenter = Math.abs(offset) < 3
|
||||||
|
return (
|
||||||
|
<motion.path
|
||||||
|
key={`s-${i}`}
|
||||||
|
d={`M ${70 + offset} 25 L ${45 + offset} 25 C ${25 + offset} 25, ${25 + offset} 45, ${45 + offset} 50 C ${75 + offset} 60, ${75 + offset} 80, ${55 + offset} 80 L ${30 + offset} 80`}
|
||||||
|
fill="none"
|
||||||
|
stroke="url(#logo-s)"
|
||||||
|
strokeWidth={isCenter ? '0.8' : '0.3'}
|
||||||
|
animate={{
|
||||||
|
strokeDasharray: ['0, 300', '300, 0'],
|
||||||
|
opacity: [0.1, isCenter ? 1 : 0.5, 0.1],
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration:
|
||||||
|
progress > 0
|
||||||
|
? 0.6 + Math.random() * 0.5
|
||||||
|
: 2.5 + Math.random() * 2,
|
||||||
|
repeat: Infinity,
|
||||||
|
delay: Math.random() * 3,
|
||||||
|
ease: 'linear',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="pointer-events-none absolute inset-0 z-20 opacity-10"
|
||||||
|
style={{
|
||||||
|
backgroundImage:
|
||||||
|
'repeating-linear-gradient(transparent, transparent 2px, #000 2px, #000 4px)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="relative z-30 mt-[450px] flex flex-col items-center">
|
||||||
|
<div className="relative flex h-32 w-32 items-center justify-center">
|
||||||
|
<svg className="absolute inset-0 h-full w-full -rotate-90">
|
||||||
|
<circle
|
||||||
|
cx="64"
|
||||||
|
cy="64"
|
||||||
|
r="60"
|
||||||
|
fill="none"
|
||||||
|
stroke="rgba(6,182,212,0.1)"
|
||||||
|
strokeWidth="1"
|
||||||
|
/>
|
||||||
|
<motion.circle
|
||||||
|
cx="64"
|
||||||
|
cy="64"
|
||||||
|
r="60"
|
||||||
|
fill="none"
|
||||||
|
stroke="#06b6d4"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeDasharray={377}
|
||||||
|
strokeDashoffset={377 - (377 * progress) / 100}
|
||||||
|
style={{ filter: 'drop-shadow(0 0 10px rgba(6,182,212,0.8))' }}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<motion.svg
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
className={`absolute inset-2 h-[calc(100%-16px)] w-[calc(100%-16px)] transition-colors duration-500 ${progress > 0 ? 'text-fuchsia-500' : 'text-cyan-500/30'}`}
|
||||||
|
animate={{ rotate: progress > 0 ? 360 : 0 }}
|
||||||
|
transition={{ duration: 10, repeat: Infinity, ease: 'linear' }}
|
||||||
|
>
|
||||||
|
<polygon
|
||||||
|
points="50 5, 95 25, 95 75, 50 95, 5 75, 5 25"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1"
|
||||||
|
/>
|
||||||
|
</motion.svg>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={handleSync}
|
||||||
|
disabled={progress > 0}
|
||||||
|
className="group relative z-10 flex h-16 w-16 cursor-pointer items-center justify-center rounded-full border border-cyan-500/50 bg-slate-900 text-cyan-400 shadow-[0_0_15px_rgba(6,182,212,0.2)] transition-all hover:scale-110 hover:bg-cyan-950 hover:shadow-[0_0_30px_rgba(6,182,212,0.6)] disabled:cursor-not-allowed disabled:opacity-100"
|
||||||
|
>
|
||||||
|
<Cpu
|
||||||
|
className={`h-8 w-8 transition-transform ${progress > 0 && progress < 100 ? 'animate-pulse text-fuchsia-400' : ''} ${progress === 100 ? 'text-white drop-shadow-[0_0_10px_white]' : ''}`}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-10 text-center font-mono">
|
||||||
|
<div className="mb-4 text-sm uppercase tracking-[0.4em] text-cyan-400 drop-shadow-md">
|
||||||
|
{progress === 0
|
||||||
|
? 'Core Synchronization Required'
|
||||||
|
: progress < 100
|
||||||
|
? 'Establishing Neural Link...'
|
||||||
|
: 'Link Established'}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{progress === 0 && (
|
||||||
|
<motion.div
|
||||||
|
className="flex items-center justify-center gap-2 text-xs tracking-widest text-slate-400"
|
||||||
|
animate={{ opacity: [0.3, 1, 0.3] }}
|
||||||
|
transition={{ duration: 1.5, repeat: Infinity }}
|
||||||
|
>
|
||||||
|
<ArrowRight className="h-3 w-3 text-fuchsia-400" /> INITIATE BOOT
|
||||||
|
SEQUENCE
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{progress > 0 && (
|
||||||
|
<div className="text-3xl font-bold tabular-nums tracking-[0.2em] text-white drop-shadow-[0_0_10px_rgba(255,255,255,0.5)]">
|
||||||
|
{progress}%
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{synced && (
|
||||||
|
<motion.div
|
||||||
|
className="pointer-events-none fixed inset-0 z-[110] bg-gradient-to-r from-cyan-400 to-fuchsia-400 mix-blend-screen"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: [0, 1, 0] }}
|
||||||
|
transition={{ duration: 1, ease: 'easeOut' }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,424 @@
|
|||||||
|
import { useState, useEffect, useRef } from 'react'
|
||||||
|
|
||||||
|
interface PupilProps {
|
||||||
|
size?: number
|
||||||
|
maxDistance?: number
|
||||||
|
pupilColor?: string
|
||||||
|
forceLookX?: number
|
||||||
|
forceLookY?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
const Pupil = ({
|
||||||
|
size = 12,
|
||||||
|
maxDistance = 5,
|
||||||
|
pupilColor = 'black',
|
||||||
|
forceLookX,
|
||||||
|
forceLookY,
|
||||||
|
}: PupilProps) => {
|
||||||
|
const [mouseX, setMouseX] = useState(0)
|
||||||
|
const [mouseY, setMouseY] = useState(0)
|
||||||
|
const ref = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const h = (e: MouseEvent) => {
|
||||||
|
setMouseX(e.clientX)
|
||||||
|
setMouseY(e.clientY)
|
||||||
|
}
|
||||||
|
window.addEventListener('mousemove', h)
|
||||||
|
return () => window.removeEventListener('mousemove', h)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const calc = () => {
|
||||||
|
if (!ref.current) return { x: 0, y: 0 }
|
||||||
|
if (forceLookX !== undefined && forceLookY !== undefined)
|
||||||
|
return { x: forceLookX, y: forceLookY }
|
||||||
|
const r = ref.current.getBoundingClientRect()
|
||||||
|
const cx = r.left + r.width / 2
|
||||||
|
const cy = r.top + r.height / 2
|
||||||
|
const dx = mouseX - cx
|
||||||
|
const dy = mouseY - cy
|
||||||
|
const dist = Math.min(Math.sqrt(dx * dx + dy * dy), maxDistance)
|
||||||
|
const a = Math.atan2(dy, dx)
|
||||||
|
return { x: Math.cos(a) * dist, y: Math.sin(a) * dist }
|
||||||
|
}
|
||||||
|
const p = calc()
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className="rounded-full"
|
||||||
|
style={{
|
||||||
|
width: size,
|
||||||
|
height: size,
|
||||||
|
backgroundColor: pupilColor,
|
||||||
|
transform: `translate(${p.x}px, ${p.y}px)`,
|
||||||
|
transition: 'transform 0.1s ease-out',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
interface EyeBallProps {
|
||||||
|
size?: number
|
||||||
|
pupilSize?: number
|
||||||
|
maxDistance?: number
|
||||||
|
eyeColor?: string
|
||||||
|
pupilColor?: string
|
||||||
|
isBlinking?: boolean
|
||||||
|
forceLookX?: number
|
||||||
|
forceLookY?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
const EyeBall = ({
|
||||||
|
size = 48,
|
||||||
|
pupilSize = 16,
|
||||||
|
maxDistance = 10,
|
||||||
|
eyeColor = 'white',
|
||||||
|
pupilColor = 'black',
|
||||||
|
isBlinking = false,
|
||||||
|
forceLookX,
|
||||||
|
forceLookY,
|
||||||
|
}: EyeBallProps) => {
|
||||||
|
const [mouseX, setMouseX] = useState(0)
|
||||||
|
const [mouseY, setMouseY] = useState(0)
|
||||||
|
const ref = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const h = (e: MouseEvent) => {
|
||||||
|
setMouseX(e.clientX)
|
||||||
|
setMouseY(e.clientY)
|
||||||
|
}
|
||||||
|
window.addEventListener('mousemove', h)
|
||||||
|
return () => window.removeEventListener('mousemove', h)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const calc = () => {
|
||||||
|
if (!ref.current) return { x: 0, y: 0 }
|
||||||
|
if (forceLookX !== undefined && forceLookY !== undefined)
|
||||||
|
return { x: forceLookX, y: forceLookY }
|
||||||
|
const r = ref.current.getBoundingClientRect()
|
||||||
|
const cx = r.left + r.width / 2
|
||||||
|
const cy = r.top + r.height / 2
|
||||||
|
const dx = mouseX - cx
|
||||||
|
const dy = mouseY - cy
|
||||||
|
const dist = Math.min(Math.sqrt(dx * dx + dy * dy), maxDistance)
|
||||||
|
const a = Math.atan2(dy, dx)
|
||||||
|
return { x: Math.cos(a) * dist, y: Math.sin(a) * dist }
|
||||||
|
}
|
||||||
|
const p = calc()
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className="flex items-center justify-center rounded-full transition-all duration-150"
|
||||||
|
style={{
|
||||||
|
width: size,
|
||||||
|
height: isBlinking ? 2 : size,
|
||||||
|
backgroundColor: eyeColor,
|
||||||
|
overflow: 'hidden',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{!isBlinking && (
|
||||||
|
<div
|
||||||
|
className="rounded-full"
|
||||||
|
style={{
|
||||||
|
width: pupilSize,
|
||||||
|
height: pupilSize,
|
||||||
|
backgroundColor: pupilColor,
|
||||||
|
transform: `translate(${p.x}px, ${p.y}px)`,
|
||||||
|
transition: 'transform 0.1s ease-out',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
isTyping?: boolean
|
||||||
|
showPassword?: boolean
|
||||||
|
passwordLength?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function LoginCharacters({
|
||||||
|
isTyping = false,
|
||||||
|
showPassword = false,
|
||||||
|
passwordLength = 0,
|
||||||
|
}: Props) {
|
||||||
|
const [mouseX, setMouseX] = useState(0)
|
||||||
|
const [mouseY, setMouseY] = useState(0)
|
||||||
|
const [isPrimaryBlink, setIsPrimaryBlink] = useState(false)
|
||||||
|
const [isDarkBlink, setIsDarkBlink] = useState(false)
|
||||||
|
const [isLooking, setIsLooking] = useState(false)
|
||||||
|
const [isPrimaryPeek, setIsPrimaryPeek] = useState(false)
|
||||||
|
const primaryRef = useRef<HTMLDivElement>(null)
|
||||||
|
const darkRef = useRef<HTMLDivElement>(null)
|
||||||
|
const yellowRef = useRef<HTMLDivElement>(null)
|
||||||
|
const orangeRef = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const h = (e: MouseEvent) => {
|
||||||
|
setMouseX(e.clientX)
|
||||||
|
setMouseY(e.clientY)
|
||||||
|
}
|
||||||
|
window.addEventListener('mousemove', h)
|
||||||
|
return () => window.removeEventListener('mousemove', h)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const schedule = (): ReturnType<typeof setTimeout> =>
|
||||||
|
setTimeout(
|
||||||
|
() => {
|
||||||
|
setIsPrimaryBlink(true)
|
||||||
|
setTimeout(() => {
|
||||||
|
setIsPrimaryBlink(false)
|
||||||
|
schedule()
|
||||||
|
}, 150)
|
||||||
|
},
|
||||||
|
Math.random() * 4000 + 3000,
|
||||||
|
)
|
||||||
|
const t = schedule()
|
||||||
|
return () => clearTimeout(t)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const schedule = (): ReturnType<typeof setTimeout> =>
|
||||||
|
setTimeout(
|
||||||
|
() => {
|
||||||
|
setIsDarkBlink(true)
|
||||||
|
setTimeout(() => {
|
||||||
|
setIsDarkBlink(false)
|
||||||
|
schedule()
|
||||||
|
}, 150)
|
||||||
|
},
|
||||||
|
Math.random() * 4000 + 3000,
|
||||||
|
)
|
||||||
|
const t = schedule()
|
||||||
|
return () => clearTimeout(t)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isTyping) {
|
||||||
|
setIsLooking(true)
|
||||||
|
const t = setTimeout(() => setIsLooking(false), 800)
|
||||||
|
return () => clearTimeout(t)
|
||||||
|
} else setIsLooking(false)
|
||||||
|
}, [isTyping])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (passwordLength > 0 && showPassword) {
|
||||||
|
const t = setTimeout(
|
||||||
|
() => {
|
||||||
|
setIsPrimaryPeek(true)
|
||||||
|
setTimeout(() => setIsPrimaryPeek(false), 800)
|
||||||
|
},
|
||||||
|
Math.random() * 3000 + 2000,
|
||||||
|
)
|
||||||
|
return () => clearTimeout(t)
|
||||||
|
} else setIsPrimaryPeek(false)
|
||||||
|
}, [passwordLength, showPassword, isPrimaryPeek])
|
||||||
|
|
||||||
|
const calcPos = (ref: React.RefObject<HTMLDivElement | null>) => {
|
||||||
|
if (!ref.current) return { faceX: 0, faceY: 0, bodySkew: 0 }
|
||||||
|
const r = ref.current.getBoundingClientRect()
|
||||||
|
const cx = r.left + r.width / 2
|
||||||
|
const cy = r.top + r.height / 3
|
||||||
|
const dx = mouseX - cx
|
||||||
|
const dy = mouseY - cy
|
||||||
|
return {
|
||||||
|
faceX: Math.max(-15, Math.min(15, dx / 20)),
|
||||||
|
faceY: Math.max(-10, Math.min(10, dy / 30)),
|
||||||
|
bodySkew: Math.max(-6, Math.min(6, -dx / 120)),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const pp = calcPos(primaryRef)
|
||||||
|
const bp = calcPos(darkRef)
|
||||||
|
const yp = calcPos(yellowRef)
|
||||||
|
const op = calcPos(orangeRef)
|
||||||
|
const hiding = passwordLength > 0 && !showPassword
|
||||||
|
const showing = passwordLength > 0 && showPassword
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative w-full" style={{ height: 300 }}>
|
||||||
|
<div
|
||||||
|
ref={primaryRef}
|
||||||
|
className="absolute bottom-0 transition-all duration-700 ease-in-out"
|
||||||
|
style={{
|
||||||
|
left: '12%',
|
||||||
|
width: '33%',
|
||||||
|
height: isTyping || hiding ? '110%' : '100%',
|
||||||
|
backgroundColor: '#10b981',
|
||||||
|
borderRadius: '10px 10px 0 0',
|
||||||
|
zIndex: 1,
|
||||||
|
transform: showing
|
||||||
|
? 'skewX(0deg)'
|
||||||
|
: isTyping || hiding
|
||||||
|
? `skewX(${(pp.bodySkew || 0) - 12}deg) translateX(40px)`
|
||||||
|
: `skewX(${pp.bodySkew || 0}deg)`,
|
||||||
|
transformOrigin: 'bottom center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="absolute flex gap-8 transition-all duration-700 ease-in-out"
|
||||||
|
style={{
|
||||||
|
left: showing ? 20 : isLooking ? 55 : 45 + pp.faceX,
|
||||||
|
top: showing ? 35 : isLooking ? 65 : 40 + pp.faceY,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<EyeBall
|
||||||
|
size={18}
|
||||||
|
pupilSize={7}
|
||||||
|
maxDistance={5}
|
||||||
|
eyeColor="white"
|
||||||
|
pupilColor="#064e3b"
|
||||||
|
isBlinking={isPrimaryBlink}
|
||||||
|
forceLookX={showing ? (isPrimaryPeek ? 4 : -4) : isLooking ? 3 : undefined}
|
||||||
|
forceLookY={showing ? (isPrimaryPeek ? 5 : -4) : isLooking ? 4 : undefined}
|
||||||
|
/>
|
||||||
|
<EyeBall
|
||||||
|
size={18}
|
||||||
|
pupilSize={7}
|
||||||
|
maxDistance={5}
|
||||||
|
eyeColor="white"
|
||||||
|
pupilColor="#064e3b"
|
||||||
|
isBlinking={isPrimaryBlink}
|
||||||
|
forceLookX={showing ? (isPrimaryPeek ? 4 : -4) : isLooking ? 3 : undefined}
|
||||||
|
forceLookY={showing ? (isPrimaryPeek ? 5 : -4) : isLooking ? 4 : undefined}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
ref={darkRef}
|
||||||
|
className="absolute bottom-0 transition-all duration-700 ease-in-out"
|
||||||
|
style={{
|
||||||
|
left: '44%',
|
||||||
|
width: '22%',
|
||||||
|
height: '77%',
|
||||||
|
backgroundColor: '#0f766e',
|
||||||
|
borderRadius: '8px 8px 0 0',
|
||||||
|
zIndex: 2,
|
||||||
|
transform: showing
|
||||||
|
? 'skewX(0deg)'
|
||||||
|
: isLooking
|
||||||
|
? `skewX(${(bp.bodySkew || 0) * 1.5 + 10}deg) translateX(20px)`
|
||||||
|
: isTyping || hiding
|
||||||
|
? `skewX(${(bp.bodySkew || 0) * 1.5}deg)`
|
||||||
|
: `skewX(${bp.bodySkew || 0}deg)`,
|
||||||
|
transformOrigin: 'bottom center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="absolute flex gap-6 transition-all duration-700 ease-in-out"
|
||||||
|
style={{
|
||||||
|
left: showing ? 10 : isLooking ? 32 : 26 + bp.faceX,
|
||||||
|
top: showing ? 28 : isLooking ? 12 : 32 + bp.faceY,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<EyeBall
|
||||||
|
size={16}
|
||||||
|
pupilSize={6}
|
||||||
|
maxDistance={4}
|
||||||
|
eyeColor="white"
|
||||||
|
pupilColor="#042f2e"
|
||||||
|
isBlinking={isDarkBlink}
|
||||||
|
forceLookX={showing ? -4 : isLooking ? 0 : undefined}
|
||||||
|
forceLookY={showing ? -4 : isLooking ? -4 : undefined}
|
||||||
|
/>
|
||||||
|
<EyeBall
|
||||||
|
size={16}
|
||||||
|
pupilSize={6}
|
||||||
|
maxDistance={4}
|
||||||
|
eyeColor="white"
|
||||||
|
pupilColor="#042f2e"
|
||||||
|
isBlinking={isDarkBlink}
|
||||||
|
forceLookX={showing ? -4 : isLooking ? 0 : undefined}
|
||||||
|
forceLookY={showing ? -4 : isLooking ? -4 : undefined}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
ref={orangeRef}
|
||||||
|
className="absolute bottom-0 transition-all duration-700 ease-in-out"
|
||||||
|
style={{
|
||||||
|
left: '0%',
|
||||||
|
width: '44%',
|
||||||
|
height: '50%',
|
||||||
|
backgroundColor: '#f59e0b',
|
||||||
|
borderRadius: '120px 120px 0 0',
|
||||||
|
zIndex: 3,
|
||||||
|
transform: showing ? 'skewX(0deg)' : `skewX(${op.bodySkew || 0}deg)`,
|
||||||
|
transformOrigin: 'bottom center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="absolute flex gap-8 transition-all duration-200 ease-out"
|
||||||
|
style={{
|
||||||
|
left: showing ? '20%' : `calc(34% + ${op.faceX || 0}px)`,
|
||||||
|
top: showing ? '42%' : `calc(45% + ${op.faceY || 0}px)`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Pupil
|
||||||
|
size={12}
|
||||||
|
maxDistance={5}
|
||||||
|
pupilColor="#78350f"
|
||||||
|
forceLookX={showing ? -5 : undefined}
|
||||||
|
forceLookY={showing ? -4 : undefined}
|
||||||
|
/>
|
||||||
|
<Pupil
|
||||||
|
size={12}
|
||||||
|
maxDistance={5}
|
||||||
|
pupilColor="#78350f"
|
||||||
|
forceLookX={showing ? -5 : undefined}
|
||||||
|
forceLookY={showing ? -4 : undefined}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
ref={yellowRef}
|
||||||
|
className="absolute bottom-0 transition-all duration-700 ease-in-out"
|
||||||
|
style={{
|
||||||
|
left: '56%',
|
||||||
|
width: '26%',
|
||||||
|
height: '58%',
|
||||||
|
backgroundColor: '#84cc16',
|
||||||
|
borderRadius: '70px 70px 0 0',
|
||||||
|
zIndex: 4,
|
||||||
|
transform: showing ? 'skewX(0deg)' : `skewX(${yp.bodySkew || 0}deg)`,
|
||||||
|
transformOrigin: 'bottom center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="absolute flex gap-6 transition-all duration-200 ease-out"
|
||||||
|
style={{
|
||||||
|
left: showing ? '14%' : `calc(37% + ${yp.faceX || 0}px)`,
|
||||||
|
top: showing ? '15%' : `calc(17% + ${yp.faceY || 0}px)`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Pupil
|
||||||
|
size={12}
|
||||||
|
maxDistance={5}
|
||||||
|
pupilColor="#3f6212"
|
||||||
|
forceLookX={showing ? -5 : undefined}
|
||||||
|
forceLookY={showing ? -4 : undefined}
|
||||||
|
/>
|
||||||
|
<Pupil
|
||||||
|
size={12}
|
||||||
|
maxDistance={5}
|
||||||
|
pupilColor="#3f6212"
|
||||||
|
forceLookX={showing ? -5 : undefined}
|
||||||
|
forceLookY={showing ? -4 : undefined}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="absolute h-[4px] w-16 rounded-full bg-[#3f6212] transition-all duration-200 ease-out"
|
||||||
|
style={{
|
||||||
|
left: showing ? '7%' : `calc(28% + ${yp.faceX || 0}px)`,
|
||||||
|
top: showing ? '38%' : `calc(38% + ${yp.faceY || 0}px)`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
+62
-47
@@ -3,13 +3,17 @@ import { Navigate, useNavigate } from 'react-router-dom'
|
|||||||
import { Eye, EyeOff, Loader2 } from 'lucide-react'
|
import { Eye, EyeOff, Loader2 } from 'lucide-react'
|
||||||
import { getToken } from '@/api/client'
|
import { getToken } from '@/api/client'
|
||||||
import { login } from '@/api/auth'
|
import { login } from '@/api/auth'
|
||||||
import { LoginBackdrop } from '@/components/login-backdrop'
|
import AIBanner from '@/components/login/ai-banner'
|
||||||
|
import AICoreEffect from '@/components/login/ai-core-effect'
|
||||||
|
import LoginCharacters from '@/components/login/login-characters'
|
||||||
|
|
||||||
export default function LoginPage() {
|
export default function LoginPage() {
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
|
const [booted, setBooted] = useState(false)
|
||||||
const [username, setUsername] = useState('')
|
const [username, setUsername] = useState('')
|
||||||
const [password, setPassword] = useState('')
|
const [password, setPassword] = useState('')
|
||||||
const [showPwd, setShowPwd] = useState(false)
|
const [showPwd, setShowPwd] = useState(false)
|
||||||
|
const [pwdFocused, setPwdFocused] = useState(false)
|
||||||
const [error, setError] = useState('')
|
const [error, setError] = useState('')
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false)
|
||||||
|
|
||||||
@@ -18,7 +22,7 @@ export default function LoginPage() {
|
|||||||
const onSubmit = async (e: FormEvent) => {
|
const onSubmit = async (e: FormEvent) => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
if (!username || !password) {
|
if (!username || !password) {
|
||||||
setError('请输入用户名和密码')
|
setError('请输入账号和密码')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
setError('')
|
setError('')
|
||||||
@@ -34,80 +38,88 @@ export default function LoginPage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const fieldCls =
|
const fieldCls =
|
||||||
'h-11 w-full rounded-xl border border-white/10 bg-white/5 px-3.5 text-[14px] text-white outline-none transition-colors placeholder:text-white/25 focus:border-[#38bdf8]/60 focus:bg-white/[0.08]'
|
'h-12 w-full rounded-xl border border-slate-200 bg-slate-50/50 px-3.5 text-[14px] text-slate-900 outline-none transition-all placeholder:text-slate-400 focus:border-[#22d3ee] focus:bg-white focus:ring-2 focus:ring-cyan-500/20'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-[#0b1117] p-6">
|
<div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-[#080d17] p-6">
|
||||||
<LoginBackdrop />
|
<div className="absolute inset-0 z-0">
|
||||||
|
<AIBanner />
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* 品牌光晕（呼应 logo 青→蓝→紫） */}
|
{/* boot 过渡动画，完成后解锁进入登录表单 */}
|
||||||
<div className="pointer-events-none absolute -left-32 -top-24 h-[420px] w-[420px] rounded-full bg-[#22d3ee]/12 blur-[110px]" />
|
{!booted && <AICoreEffect onUnlock={() => setBooted(true)} />}
|
||||||
<div className="pointer-events-none absolute -bottom-28 -right-24 h-[420px] w-[420px] rounded-full bg-[#9333ea]/12 blur-[110px]" />
|
|
||||||
|
|
||||||
<div className="relative z-10 grid w-full max-w-[880px] overflow-hidden rounded-3xl border border-white/10 bg-white/[0.03] shadow-2xl backdrop-blur-xl lg:grid-cols-2">
|
<div className="relative z-10 grid w-full max-w-[900px] overflow-hidden rounded-[2rem] shadow-[0_0_50px_rgba(0,0,0,0.5)] ring-1 ring-white/10 lg:grid-cols-2">
|
||||||
{/* 左：品牌区 */}
|
{/* 左：品牌 + 角色 */}
|
||||||
<div className="relative hidden flex-col justify-between p-10 lg:flex">
|
<div className="relative hidden flex-col justify-between overflow-hidden bg-slate-900/40 p-10 text-white backdrop-blur-md lg:flex">
|
||||||
<div className="flex items-center gap-2.5">
|
<div className="relative z-20 flex items-center gap-2.5">
|
||||||
<img
|
<img
|
||||||
src={`${import.meta.env.BASE_URL}logo-mark.webp`}
|
src={`${import.meta.env.BASE_URL}logo-mark.webp`}
|
||||||
alt=""
|
alt=""
|
||||||
width={34}
|
width={28}
|
||||||
height={34}
|
height={28}
|
||||||
style={{ borderRadius: '22%' }}
|
style={{ borderRadius: '22%' }}
|
||||||
/>
|
/>
|
||||||
<span className="font-mono text-[15px] font-semibold text-white">
|
<span className="font-mono text-[15px] font-semibold tracking-tight">
|
||||||
sundynix <em className="not-italic text-[#38bdf8]">admin</em>
|
sundynix <em className="not-italic text-[#38bdf8]">admin</em>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div
|
||||||
<h2 className="text-[27px] font-semibold leading-snug tracking-tight text-white">
|
className="relative z-20 mt-auto flex items-end justify-center"
|
||||||
事件驱动的
|
style={{ height: 300 }}
|
||||||
<br />
|
>
|
||||||
AI Agent 工作台
|
<LoginCharacters
|
||||||
</h2>
|
isTyping={pwdFocused}
|
||||||
<p className="mt-3 text-[14px] text-white/45">内容管理控制台</p>
|
showPassword={showPwd}
|
||||||
|
passwordLength={password.length}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="font-mono text-[11px] tracking-wide text-white/25">
|
<div className="relative z-20 mt-10 font-mono text-[11px] tracking-wide text-white/35">
|
||||||
© 2026 SUNDYNIX AGENTIX
|
© 2026 SUNDYNIX AGENTIX
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="pointer-events-none absolute right-0 top-0 h-[400px] w-[400px] -translate-y-1/2 translate-x-1/4 rounded-full bg-cyan-500/10 blur-[80px]" />
|
||||||
|
<div className="pointer-events-none absolute bottom-0 left-0 h-[300px] w-[300px] -translate-x-1/4 translate-y-1/4 rounded-full bg-fuchsia-500/10 blur-[60px]" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 右：表单区 */}
|
{/* 右：登录表单 */}
|
||||||
<div className="flex flex-col justify-center bg-white/[0.02] px-8 py-12 sm:px-10">
|
<div className="relative flex flex-col items-center justify-center bg-white/95 px-8 py-16 backdrop-blur-2xl sm:px-12">
|
||||||
{/* 移动端 logo */}
|
<div className="w-full max-w-[340px]">
|
||||||
<div className="mb-8 flex items-center gap-2.5 lg:hidden">
|
<div className="mb-8 flex items-center justify-center gap-2.5 lg:hidden">
|
||||||
<img
|
<img
|
||||||
src={`${import.meta.env.BASE_URL}logo-mark.webp`}
|
src={`${import.meta.env.BASE_URL}logo-mark.webp`}
|
||||||
alt=""
|
alt=""
|
||||||
width={30}
|
width={28}
|
||||||
height={30}
|
height={28}
|
||||||
style={{ borderRadius: '22%' }}
|
style={{ borderRadius: '22%' }}
|
||||||
/>
|
/>
|
||||||
<span className="font-mono text-[14px] font-semibold text-white">
|
<span className="font-mono text-[15px] font-semibold text-slate-900">
|
||||||
sundynix <em className="not-italic text-[#38bdf8]">admin</em>
|
sundynix admin
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1 className="text-[22px] font-semibold tracking-tight text-white">
|
<div className="mb-9 text-center">
|
||||||
欢迎回来
|
<h1 className="mb-2 text-[28px] font-bold tracking-tight text-slate-900">
|
||||||
|
欢迎回来！
|
||||||
</h1>
|
</h1>
|
||||||
<p className="mt-1.5 text-[13.5px] text-white/45">
|
<p className="text-[13.5px] text-slate-500">
|
||||||
登录内容管理控制台
|
请输入管理员账号与密码
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<form onSubmit={onSubmit} className="mt-8 space-y-4">
|
<form onSubmit={onSubmit} className="space-y-5">
|
||||||
{error && (
|
{error && (
|
||||||
<div className="flex items-center gap-2 rounded-xl border border-red-400/30 bg-red-500/10 px-3.5 py-2.5 text-[13px] text-red-300">
|
<div className="flex items-center gap-2 rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-[13px] text-red-600">
|
||||||
<span className="size-1.5 rounded-full bg-red-400" />
|
<span className="size-1.5 rounded-full bg-red-500" />
|
||||||
{error}
|
{error}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="mb-1.5 block text-[13px] text-white/55">
|
<label className="mb-2 block text-[13px] font-semibold text-slate-700">
|
||||||
用户名
|
账号
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
@@ -115,13 +127,13 @@ export default function LoginPage() {
|
|||||||
onChange={(e) => setUsername(e.target.value)}
|
onChange={(e) => setUsername(e.target.value)}
|
||||||
autoComplete="username"
|
autoComplete="username"
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
placeholder="管理员账号"
|
placeholder="请输入管理员账号"
|
||||||
className={fieldCls}
|
className={fieldCls}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="mb-1.5 block text-[13px] text-white/55">
|
<label className="mb-2 block text-[13px] font-semibold text-slate-700">
|
||||||
密码
|
密码
|
||||||
</label>
|
</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
@@ -129,6 +141,8 @@ export default function LoginPage() {
|
|||||||
type={showPwd ? 'text' : 'password'}
|
type={showPwd ? 'text' : 'password'}
|
||||||
value={password}
|
value={password}
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
onFocus={() => setPwdFocused(true)}
|
||||||
|
onBlur={() => setPwdFocused(false)}
|
||||||
autoComplete="current-password"
|
autoComplete="current-password"
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
placeholder="••••••••"
|
placeholder="••••••••"
|
||||||
@@ -139,12 +153,12 @@ export default function LoginPage() {
|
|||||||
onClick={() => setShowPwd((v) => !v)}
|
onClick={() => setShowPwd((v) => !v)}
|
||||||
tabIndex={-1}
|
tabIndex={-1}
|
||||||
aria-label={showPwd ? '隐藏密码' : '显示密码'}
|
aria-label={showPwd ? '隐藏密码' : '显示密码'}
|
||||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-white/35 transition-colors hover:text-white/70"
|
className="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 transition-colors hover:text-slate-600"
|
||||||
>
|
>
|
||||||
{showPwd ? (
|
{showPwd ? (
|
||||||
<Eye className="size-[18px]" />
|
<Eye className="h-5 w-5" />
|
||||||
) : (
|
) : (
|
||||||
<EyeOff className="size-[18px]" />
|
<EyeOff className="h-5 w-5" />
|
||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -153,11 +167,11 @@ export default function LoginPage() {
|
|||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
className="mt-2 flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-[#22d3ee] to-[#3b82f6] text-[14.5px] font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-60"
|
className="mt-2 flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-[#22d3ee] to-[#3b82f6] text-[15px] font-bold text-white shadow-lg shadow-cyan-600/20 transition-all hover:opacity-90 disabled:opacity-60"
|
||||||
>
|
>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<>
|
<>
|
||||||
<Loader2 className="size-[18px] animate-spin" /> 登录中…
|
<Loader2 className="h-5 w-5 animate-spin" /> 登录中…
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
'登 录'
|
'登 录'
|
||||||
@@ -167,5 +181,6 @@ export default function LoginPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user