242 lines
7.0 KiB
TypeScript
242 lines
7.0 KiB
TypeScript
import type { CardFaceProps } from "./types";
|
|
|
|
/** 卡面：深黑底色 + 深红光晕与锐利几何线条 */
|
|
export function RedeyeFace(_: CardFaceProps) {
|
|
return (
|
|
<>
|
|
{/* 深黑底色 */}
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{
|
|
background: "linear-gradient(145deg, #0a0505 0%, #120808 45%, #0d0404 100%)",
|
|
}}
|
|
/>
|
|
|
|
{/* 红色主光晕：左上 */}
|
|
<div
|
|
className="absolute -left-8 -top-8 size-56 rounded-full opacity-25 blur-3xl"
|
|
style={{
|
|
background: "radial-gradient(circle, #cc1020 0%, #7a0810 50%, transparent 75%)",
|
|
}}
|
|
/>
|
|
|
|
{/* 红色副光晕：右下 */}
|
|
<div
|
|
className="absolute -bottom-10 -right-6 size-44 rounded-full opacity-15 blur-3xl"
|
|
style={{
|
|
background: "radial-gradient(circle, #e01828 0%, transparent 70%)",
|
|
}}
|
|
/>
|
|
|
|
{/* 顶部红色高光边 */}
|
|
<div
|
|
className="absolute inset-x-0 top-0 h-[1.5px]"
|
|
style={{
|
|
background:
|
|
"linear-gradient(to right, transparent 5%, #cc1020 25%, #ff2233 50%, #cc1020 75%, transparent 95%)",
|
|
}}
|
|
/>
|
|
|
|
{/* 左侧竖向红线 */}
|
|
<div
|
|
className="absolute bottom-0 left-5 top-0 w-px opacity-40"
|
|
style={{
|
|
background:
|
|
"linear-gradient(to bottom, transparent, #cc1020 20%, #ff2233 50%, #cc1020 80%, transparent)",
|
|
}}
|
|
/>
|
|
|
|
{/* 右侧双竖线 */}
|
|
<div
|
|
className="absolute bottom-3 right-4 top-3 w-px opacity-30"
|
|
style={{
|
|
background:
|
|
"linear-gradient(to bottom, transparent, #993010 30%, #cc2010 60%, transparent)",
|
|
}}
|
|
/>
|
|
<div
|
|
className="absolute bottom-3 right-[18px] top-3 w-px opacity-15"
|
|
style={{
|
|
background:
|
|
"linear-gradient(to bottom, transparent, #993010 30%, #cc2010 60%, transparent)",
|
|
}}
|
|
/>
|
|
|
|
{/* 红色横向扫描线组 */}
|
|
<div
|
|
className="absolute inset-x-0 opacity-[0.06]"
|
|
style={{
|
|
top: "30%",
|
|
height: "1px",
|
|
background:
|
|
"linear-gradient(to right, transparent 0%, #ff2233 40%, #ff5566 60%, transparent 100%)",
|
|
}}
|
|
/>
|
|
<div
|
|
className="absolute inset-x-0 opacity-[0.04]"
|
|
style={{
|
|
top: "32%",
|
|
height: "1px",
|
|
background: "linear-gradient(to right, transparent 10%, #ff2233 50%, transparent 90%)",
|
|
}}
|
|
/>
|
|
|
|
{/* 电路板风格折角线：左上 */}
|
|
<svg
|
|
className="absolute left-6 top-3 opacity-20"
|
|
width="40"
|
|
height="28"
|
|
viewBox="0 0 40 28"
|
|
fill="none"
|
|
>
|
|
<polyline points="0,28 0,8 12,0 40,0" stroke="#ff2233" strokeWidth="1" fill="none" />
|
|
<circle cx="12" cy="0" r="1.5" fill="#ff2233" />
|
|
</svg>
|
|
|
|
{/* 电路板风格折角线：右下 */}
|
|
<svg
|
|
className="absolute bottom-3 right-6 opacity-20"
|
|
width="40"
|
|
height="28"
|
|
viewBox="0 0 40 28"
|
|
fill="none"
|
|
>
|
|
<polyline points="40,0 40,20 28,28 0,28" stroke="#cc1020" strokeWidth="1" fill="none" />
|
|
<circle cx="28" cy="28" r="1.5" fill="#cc1020" />
|
|
</svg>
|
|
|
|
{/* 风格菱形 */}
|
|
<svg
|
|
className="absolute opacity-[0.12]"
|
|
style={{ right: "28px", top: "50%", transform: "translateY(-50%)" }}
|
|
width="32"
|
|
height="32"
|
|
viewBox="0 0 32 32"
|
|
fill="none"
|
|
>
|
|
<polygon points="16,1 31,16 16,31 1,16" stroke="#ff2233" strokeWidth="1.5" fill="none" />
|
|
<polygon points="16,7 25,16 16,25 7,16" stroke="#ff2233" strokeWidth="1" fill="none" />
|
|
<circle cx="16" cy="16" r="2" fill="#ff2233" />
|
|
</svg>
|
|
|
|
{/* 徽标 — 八角框 + 内部对角交叉 + 中心菱形 */}
|
|
<svg
|
|
className="absolute opacity-60"
|
|
style={{
|
|
left: "50%",
|
|
top: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
filter: "drop-shadow(0 0 6px #cc102088)",
|
|
}}
|
|
width="56"
|
|
height="56"
|
|
viewBox="0 0 56 56"
|
|
fill="none"
|
|
>
|
|
{/* 外八角轮廓 */}
|
|
<polygon
|
|
points="16,2 40,2 54,16 54,40 40,54 16,54 2,40 2,16"
|
|
stroke="#cc1020"
|
|
strokeWidth="1.5"
|
|
fill="#0d0404"
|
|
fillOpacity="0.85"
|
|
/>
|
|
{/* 内八角 */}
|
|
<polygon
|
|
points="20,8 36,8 48,20 48,36 36,48 20,48 8,36 8,20"
|
|
stroke="#cc1020"
|
|
strokeWidth="0.75"
|
|
strokeOpacity="0.5"
|
|
fill="none"
|
|
/>
|
|
{/* 对角线：左上 → 右下 */}
|
|
<line
|
|
x1="16"
|
|
y1="16"
|
|
x2="40"
|
|
y2="40"
|
|
stroke="#cc1020"
|
|
strokeWidth="1"
|
|
strokeOpacity="0.7"
|
|
/>
|
|
{/* 对角线：右上 → 左下 */}
|
|
<line
|
|
x1="40"
|
|
y1="16"
|
|
x2="16"
|
|
y2="40"
|
|
stroke="#cc1020"
|
|
strokeWidth="1"
|
|
strokeOpacity="0.7"
|
|
/>
|
|
{/* 横向中轴 */}
|
|
<line
|
|
x1="6"
|
|
y1="28"
|
|
x2="50"
|
|
y2="28"
|
|
stroke="#cc1020"
|
|
strokeWidth="0.75"
|
|
strokeOpacity="0.4"
|
|
/>
|
|
{/* 纵向中轴 */}
|
|
<line
|
|
x1="28"
|
|
y1="6"
|
|
x2="28"
|
|
y2="50"
|
|
stroke="#cc1020"
|
|
strokeWidth="0.75"
|
|
strokeOpacity="0.4"
|
|
/>
|
|
{/* 中心菱形 */}
|
|
<polygon
|
|
points="28,18 38,28 28,38 18,28"
|
|
stroke="#ff2233"
|
|
strokeWidth="1.25"
|
|
fill="#1a0505"
|
|
fillOpacity="0.9"
|
|
/>
|
|
{/* 中心圆点 */}
|
|
<circle cx="28" cy="28" r="3" fill="#ff2233" />
|
|
<circle cx="28" cy="28" r="1.5" fill="#ff6677" />
|
|
{/* 四个顶点刻度点 */}
|
|
<circle cx="28" cy="6" r="1.25" fill="#cc1020" fillOpacity="0.8" />
|
|
<circle cx="50" cy="28" r="1.25" fill="#cc1020" fillOpacity="0.8" />
|
|
<circle cx="28" cy="50" r="1.25" fill="#cc1020" fillOpacity="0.8" />
|
|
<circle cx="6" cy="28" r="1.25" fill="#cc1020" fillOpacity="0.8" />
|
|
</svg>
|
|
|
|
{/* 噪点 SVG filter */}
|
|
<svg className="absolute size-0">
|
|
<filter id="arasaka-noise">
|
|
<feTurbulence
|
|
type="fractalNoise"
|
|
baseFrequency="0.8"
|
|
numOctaves="4"
|
|
stitchTiles="stitch"
|
|
/>
|
|
<feColorMatrix type="saturate" values="0" />
|
|
<feBlend in="SourceGraphic" mode="overlay" result="blend" />
|
|
<feComposite in="blend" in2="SourceGraphic" operator="in" />
|
|
</filter>
|
|
</svg>
|
|
|
|
{/* 噪点层 */}
|
|
<div
|
|
className="absolute inset-0 opacity-[0.1] mix-blend-overlay"
|
|
style={{ filter: "url(#arasaka-noise)" }}
|
|
/>
|
|
|
|
{/* 底部红色压边 */}
|
|
<div
|
|
className="absolute inset-x-0 bottom-0 h-px opacity-30"
|
|
style={{
|
|
background:
|
|
"linear-gradient(to right, transparent 10%, #7a0810 40%, #cc1020 60%, transparent 90%)",
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
}
|