페이스북 클론 SNS 사이트

BFDI 에피소드 시청 사이트

BFDI 사이트를 만들어줘. 몇 개의 에피소드를 보여주는 서비스야(에피소드는 유튜브에서 가져와). 그런데 비디오 플레이어 메뉴를 비활성화하려고 해. 클릭하면 유튜브 메뉴가 나타나서 아마추어해 보이니까, 이런 일이 일어나지 않을 방법을 찾아봐. 여러 에피소드를 한 번에 모아서.

프리랜서와 대학생 대상 랜딩 페이지

Create a premium, modern, conversion-focused landing page for deevork targeting freelancers, coleege student, professional worker,, and business, with the goal of allow freelancer to post about their work(like fiverr ) and artwork like ( pinterest ). Design it with the polish of leading brands using soft and squaer based button.—clean typography, generous whitespace, refined gradients, subtle glassmorphism, premium visuals, and smooth, elegant animations including scroll reveals, staggered entrances, hover effects, ambient motion, and interactive microinteractions. Include a complete landing page structure (sticky navbar, hero, social proof, features, product showcase, benefits, testimonials, pricing, FAQ, CTA, and footer), ensuring it is fully responsive, accessible, mobile-first, visually stunning, and production-ready with compelling copy tailored to the brand.

다운로드 센터가 있는 운영체제 대시보드

무섭고도 놀라운 운영체제를 하나 만들어줘. 준비된 검색 엔진과 RAM 엔진, 앱 다운로드 센터, 그리고 Flappy Bird나 Cross Road Simulator 같은 게임, 사운드보드 같은 것들, HTML 코드까지 더 무섭고 멋진 것들을 담아줘.

React OTP 입력 컴포넌트

import { useState, useEffect, useCallback, useRef } from "react"; import OTPInput from "./components/OTPInput"; import CountdownTimer from "./components/CountdownTimer"; import Confetti from "./components/Confetti"; import MethodSelector, { VerifyMethod, METHODS } from "./components/MethodSelector"; import { cn } from "./utils/cn"; /* ─── Constants ───────────────────────────────────────────── */ const CORRECT_OTP = "123456"; const TIMER_DURATION = 30; type VerifyState = "idle" | "verifying" | "error" | "success"; /* ─── Tiny helpers ────────────────────────────────────────── */ function SuccessCheckIcon() { return ( <svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2.5"> <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" className="animate-success-check" /> </svg> ); } function LockIcon({ pulse }: { pulse?: boolean }) { return ( <svg className={cn("w-8 h-8 text-[#F15A24]", pulse && "animate-pulse")} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.8" > <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" /> </svg> ); } /* ─── Main App ────────────────────────────────────────────── */ export default function App() { const [state, setState] = useState<VerifyState>("idle"); const [method, setMethod] = useState<VerifyMethod>("email"); const [countdown, setCountdown] = useState(TIMER_DURATION); const [canResend, setCanResend] = useState(false); const [resending, setResending] = useState(false); const [otpKey, setOtpKey] = useState(0); const [attempts, setAttempts] = useState(0); const timerRef = useRef<ReturnType<typeof setInterval> | null>(null); /* ── Timer ── */ const startTimer = useCallback(() => { setCountdown(TIMER_DURATION); setCanResend(false); if (timerRef.current) clearInterval(timerRef.current); timerRef.current = setInterval(() => { setCountdown(prev => { if (prev <= 1) { clearInterval(timerRef.current!); setCanResend(true); return 0; } return prev - 1; }); }, 1000); }, []); useEffect(() => { startTimer(); return () => { if (timerRef.current) clearInterval(timerRef.current); }; }, [startTimer]); /* ── OTP submit ── */ const handleOTPComplete = useCallback((otp: string) => { setState("verifying"); setTimeout(() => { if (otp === CORRECT_OTP) { setState("success"); if (timerRef.current) clearInterval(timerRef.current); } else { setState("error"); setAttempts(a => a + 1); setTimeout(() => { setState("idle"); setOtpKey(k => k + 1); }, 820); } }, 1300); }, []); /* ── Method change ── */ const handleMethodChange = useCallback((m: VerifyMethod) => { if (state === "verifying" || state === "success") return; setMethod(m); setState("idle"); setOtpKey(k => k + 1); setAttempts(0); startTimer(); }, [state, startTimer]); /* ── Resend ── */ const handleResend = useCallback(() => { if (!canResend || resending) return; setResending(true); setAttempts(0); setTimeout(() => { setResending(false); setOtpKey(k => k + 1); setState("idle"); startTimer(); }, 1600); }, [canResend, resending, startTimer]); const isDisabled = state === "verifying" || state === "success"; const activeMethod = METHODS.find(m => m.id === method)!; return ( <div className="min-h-screen flex items-center justify-center p-4 relative overflow-hidden" style={{ backgroundColor: "#FAF8F5", fontFamily: "'Inter', system-ui, sans-serif" }} > {/* Subtle background texture blobs */} <div className="absolute inset-0 pointer-events-none overflow-hidden"> <div className="absolute -top-32 -right-32 w-[500px] h-[500px] rounded-full opacity-30" style={{ background: "radial-gradient(circle, #F8E8E0 0%, transparent 70%)" }} /> <div className="absolute -bottom-40 -left-40 w-[600px] h-[600px] rounded-full opacity-20" style={{ background: "radial-gradient(circle, #EDE9E2 0%, transparent 70%)" }} /> </div> {/* Confetti */} <Confetti show={state === "success"} /> {/* ── Card ── */} <div className="relative w-full max-w-[440px] animate-fade-in-up" style={{ animationDuration: "0.5s" }} > {/* Brand strip at top */} <div className="flex items-center justify-center mb-8"> <div className="flex items-center gap-2.5"> <div className="w-8 h-8 rounded-xl flex items-center justify-center" style={{ backgroundColor: "#111111" }} > <svg viewBox="0 0 20 20" fill="none" className="w-4 h-4"> <path d="M10 2L2 7v6l8 5 8-5V7L10 2z" fill="#F15A24" /> </svg> </div> <span className="text-sm font-semibold tracking-tight" style={{ color: "#111111" }}> Vertex </span> </div> </div> {/* Main floating card */} <div className="rounded-[28px] bg-white p-8 sm:p-10" style={{ boxShadow: "0 4px 6px rgba(0,0,0,0.03), 0 12px 36px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.02)", }} > {/* ── Icon badge ── */} <div className="flex justify-center mb-7"> <div className={cn( "relative w-16 h-16 rounded-[20px] flex items-center justify-center transition-all duration-400", state === "success" ? "bg-green-50" : state === "error" ? "bg-red-50" : "bg-[#FFF3EE]" )} > {state === "verifying" && ( <div className="absolute inset-0 rounded-[20px] border-2 border-[#F15A24] border-t-transparent animate-spin-slow opacity-40" /> )} {state === "success" ? <SuccessCheckIcon /> : state === "error" ? ( <svg className="w-8 h-8 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2"> <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" /> </svg> ) : <LockIcon pulse={state === "verifying"} />} </div> </div> {/* ── Headline ── */} <div className="text-center mb-8"> <h1 className="text-[1.6rem] font-bold leading-tight tracking-tight mb-1.5" style={{ color: "#111111" }} > {state === "success" ? "You're verified" : "Verify your identity"} </h1> <p className="text-sm leading-relaxed" style={{ color: "#7D7D7D" }} > {state === "success" ? ( "Authentication successful. Welcome back." ) : state === "verifying" ? ( <span className="inline-flex items-center gap-2"> <span className="w-1.5 h-1.5 rounded-full bg-[#F15A24] animate-pulse inline-block" /> Checking your code… </span> ) : ( <> Enter the 6-digit code sent to{" "} <span className="font-medium" style={{ color: "#111111" }}> {activeMethod.destination} </span> </> )} </p> </div> {/* ── Method selector ── */} {state !== "success" && ( <div className="mb-8 animate-slide-in-tab"> <MethodSelector