404lab 2.0.1 → 2.0.2

package/templates/MacOs.tsx

@@ -2,264 +2,168 @@
 
 import { useEffect, useRef, useState, KeyboardEvent } from "react";
 import { useRouter } from "next/navigation";
-import Link from "next/link";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "@/components/ui/cn";
 
 type OutputLine = {
-  type: "command" | "output" | "error";
+  type: "command" | "output" | "error" | "system" | "warning";
   text: string;
 };
 
-type CommandKey =
-  | "help"
-  | "exit"
-  | "close"
-  | "report"
-  | "commands"
-  | "clear"
-  | "cls"
-  | "about"
-  | "date"
-  | "echo";
-
-const COMMANDS: Record<
-  Exclude<CommandKey, "exit" | "close" | "clear" | "cls" | "date" | "echo">,
-  string
-> = {
-  help: `This page does not exist. Type <span class="text-yellow-300">commands</span> to see available commands.`,
-  report: `<span class="text-green-400">Report sent successfully.</span>`,
-  commands: `
-    <span class="text-yellow-300">help</span>,
-    <span class="text-yellow-300">about</span>,
-    <span class="text-yellow-300">date</span>,
-    <span class="text-yellow-300">echo</span>,
-    <span class="text-yellow-300">clear</span>,
-    <span class="text-yellow-300">exit</span>
-  `,
-  about: `<span class="text-cyan-400">Terminal 404</span> — Interactive MacOS-style terminal.`,
-};
-
-const bootScript = [
-  { text: "user@macbook ~ % pnpm run dev", tone: "text-emerald-400" },
-  { text: "> Starting development server...", tone: "text-white/60" },
-  { text: "✖ Error: Page Not Found (404)", tone: "text-red-400 font-semibold" },
-];
-
-const MacOs = () => {
+const MacOs = ({ className }: { className?: string }) => {
   const router = useRouter();
   const inputRef = useRef<HTMLInputElement>(null);
   const terminalRef = useRef<HTMLDivElement>(null);
 
-  const [printed, setPrinted] = useState<string[]>([]);
-  const [typing, setTyping] = useState("");
-  const [line, setLine] = useState(0);
-  const [char, setChar] = useState(0);
   const [bootDone, setBootDone] = useState(false);
-
   const [input, setInput] = useState("");
-  const [output, setOutput] = useState<OutputLine[]>([]);
+  const [output, setOutput] = useState<OutputLine[]>([
+    { type: "system", text: "Last login: " + new Date().toUTCString().split(' ').slice(0, 4).join(' ') + " on ttys001" },
+    { type: "system", text: "Restoring session... " },
+    { type: "error", text: "zsh: error 404: route not found" },
+    { type: "warning", text: "Available commands: help, clear, exit, date, whoami, ls, sudo" }
+  ]);
 
   useEffect(() => {
-    if (line >= bootScript.length) {
-      const t = setTimeout(() => {
-        setBootDone(true);
-        inputRef.current?.focus();
-      }, 400);
-      return () => clearTimeout(t);
-    }
+    const timer = setTimeout(() => setBootDone(true), 1200);
+    return () => clearTimeout(timer);
+  }, []);
 
-    if (char < bootScript[line].text.length) {
-      const t = setTimeout(() => {
-        setTyping((p) => p + bootScript[line].text[char]);
-        setChar((c) => c + 1);
-      }, 26);
-      return () => clearTimeout(t);
+  useEffect(() => {
+    if (bootDone && inputRef.current && window.self === window.top) {
+      inputRef.current.focus();
     }
-
-    const t = setTimeout(() => {
-      setPrinted((p) => [...p, typing]);
-      setTyping("");
-      setChar(0);
-      setLine((l) => l + 1);
-    }, 350);
-
-    return () => clearTimeout(t);
-  }, [char, line, typing]);
+  }, [bootDone]);
 
   useEffect(() => {
-    terminalRef.current?.scrollTo({
-      top: terminalRef.current.scrollHeight,
-      behavior: "smooth",
-    });
+    if (terminalRef.current) {
+      terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
+    }
   }, [output]);
 
   const runCommand = (cmd: string) => {
-    const trimmed = cmd.trim();
+    const trimmed = cmd.trim().toLowerCase();
     if (!trimmed) return;
 
-    const [raw, ...rest] = trimmed.split(" ");
-    const command = raw.toLowerCase() as CommandKey;
-    const args = rest.join(" ");
-
     setOutput((o) => [...o, { type: "command", text: cmd }]);
 
-    if (command === "clear" || command === "cls") {
-      setOutput([]);
-      setInput("");
-      return;
+    const commands: Record<string, () => void> = {
+      help: () => setOutput(o => [...o, { type: "output", text: "Available commands: help, clear, exit, date, whoami, ls, sudo" }]),
+      clear: () => setOutput([]),
+      exit: () => router.push("/"),
+      date: () => setOutput(o => [...o, { type: "output", text: new Date().toString() }]),
+      whoami: () => setOutput(o => [...o, { type: "output", text: "guest@macbook-pro" }]),
+      ls: () => setOutput(o => [...o, { type: "output", text: "Applications  Documents  Downloads  Public  Desktop  .hidden_404_key" }]),
+      sudo: () => setOutput(o => [...o, { type: "error", text: "Nice try, but you don't have root access to this void." }]),
+    };
+
+    if (commands[trimmed]) {
+      commands[trimmed]();
+    } else {
+      setOutput(o => [...o, { type: "error", text: `zsh: command not found: ${trimmed}` }]);
     }
-
-    if (command === "exit" || command === "close") {
-      router.push("/");
-      return;
-    }
-
-    if (command === "date") {
-      setOutput((o) => [
-        ...o,
-        { type: "output", text: new Date().toLocaleString() },
-      ]);
-      setInput("");
-      return;
-    }
-
-    if (command === "echo") {
-      setOutput((o) => [...o, { type: "output", text: args }]);
-      setInput("");
-      return;
-    }
-
-    if (!(command in COMMANDS)) {
-      setOutput((o) => [
-        ...o,
-        {
-          type: "error",
-          text: `Command not found. Type <span class="text-yellow-300">commands</span>.`,
-        },
-      ]);
-      setInput("");
-      return;
-    }
-
-    setOutput((o) => [
-      ...o,
-      { type: "output", text: COMMANDS[command as keyof typeof COMMANDS] },
-    ]);
-
     setInput("");
   };
 
-  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      runCommand(input);
-    }
-
-    if (e.ctrlKey && e.key.toLowerCase() === "l") {
-      e.preventDefault();
-      setOutput([]);
-      setInput("");
-    }
-  };
-
   return (
-    <main className="min-h-screen flex items-center justify-center bg-[#0b0b0f] px-2 sm:px-4 font-mono text-[#d4d4d4]">
-      <div className="w-full max-w-5xl rounded-2xl overflow-hidden border border-white/10 shadow-[0_60px_160px_-30px_rgba(0,0,0,0.9)]">
-        <div className="flex items-center gap-2 px-3 sm:px-4 py-2 bg-[#2a2a2e] border-b border-white/10">
-          <span className="h-3 w-3 rounded-full bg-red-500" />
-          <span className="h-3 w-3 rounded-full bg-yellow-400" />
-          <span className="h-3 w-3 rounded-full bg-green-500" />
-          <span className="ml-2 sm:ml-4 text-xs sm:text-sm text-white/60">
-            user@MacBook-Pro — zsh
-          </span>
-        </div>
-
-        <div
-          ref={terminalRef}
-          onClick={() => inputRef.current?.focus()}
-          className="p-3 sm:p-6 bg-[#0f0f14] text-xs sm:text-sm space-y-2 cursor-text min-h-[60vh] max-h-[80vh] overflow-y-auto"
-        >
-          {printed.map((l, i) => (
-            <p key={i} className={bootScript[i].tone}>
-              {l}
-            </p>
-          ))}
-
-          {!bootDone && (
-            <p className={bootScript[line]?.tone}>
-              {typing}
-              <span className="ml-1 inline-block h-4 w-2 bg-current animate-pulse" />
-            </p>
-          )}
-
-          {bootDone && (
-            <>
-              <p className="text-white/50 italic">
-                Tip: type{" "}
-                <span className="text-yellow-300 not-italic">commands</span> to
-                see available options
-              </p>
+    <main className={cn("min-h-screen flex items-center justify-center bg-[#0d1117] relative overflow-hidden font-mono", className)}>
+      <div className="absolute inset-0 z-0">
+        <div className="absolute top-[-10%] right-[-10%] w-[500px] h-[500px] bg-purple-600/10 rounded-full blur-[120px]" />
+        <div className="absolute bottom-[-10%] left-[-10%] w-[500px] h-[500px] bg-blue-600/10 rounded-full blur-[120px]" />
+      </div>
 
+      <motion.div 
+        initial={{ opacity: 0, y: 40, scale: 0.95 }}
+        animate={{ opacity: 1, y: 0, scale: 1 }}
+        transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
+        className="w-full max-w-4xl mx-4 z-10"
+      >
+        <div className="rounded-xl overflow-hidden shadow-[0_30px_100px_rgba(0,0,0,0.6)] border border-white/10 backdrop-blur-3xl bg-[#1c1c1e]/80">
+          <div className="flex items-center justify-between px-4 py-3 bg-white/5 border-b border-white/5">
+            <div className="flex items-center gap-2">
+              <div className="w-3.5 h-3.5 rounded-full bg-[#ff5f57] shadow-inner" />
+              <div className="w-3.5 h-3.5 rounded-full bg-[#febc2e] shadow-inner" />
+              <div className="w-3.5 h-3.5 rounded-full bg-[#28c840] shadow-inner" />
+            </div>
+            <div className="text-[13px] text-white/40 font-medium tracking-wide">
+              guest — zsh — 80×24
+            </div>
+            <div className="w-12" />
+          </div>
+
+          <div
+            ref={terminalRef}
+            onClick={() => inputRef.current?.focus()}
+            className="p-6 h-[500px] overflow-y-auto custom-scrollbar text-[14px] leading-relaxed selection:bg-blue-500/30"
+          >
+            <AnimatePresence>
               {output.map((line, i) => (
-                <div key={i}>
+                <motion.div 
+                  key={i}
+                  initial={{ opacity: 0, x: -5 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  className="mb-1"
+                >
                   {line.type === "command" && (
-                    <p className="text-emerald-400">
-                      user@macbook ~ % {line.text}
-                    </p>
+                    <div className="flex items-center gap-2">
+                      <span className="text-[#32d74b] font-bold">➜</span>
+                      <span className="text-[#64d2ff] font-bold">~</span>
+                      <span className="text-white">{line.text}</span>
+                    </div>
+                  )}
+                  {line.type === "output" && (
+                    <div className="text-white/80 pl-6">{line.text}</div>
+                  )}
+                  {line.type === "system" && (
+                    <div className="text-white/40 italic">{line.text}</div>
                   )}
-                  {line.type !== "command" && (
-                    <p
-                      className={
-                        line.type === "error" ? "text-red-400" : "text-white/70"
-                      }
-                      dangerouslySetInnerHTML={{ __html: line.text }}
-                    />
+                  {line.type === "error" && (
+                    <div className="text-[#ff453a] pl-6 font-medium">{line.text}</div>
                   )}
-                </div>
+                  {line.type === "warning" && (
+                    <div className="text-[#febc2e] pl-6">{line.text}</div>
+                  )}
+                </motion.div>
               ))}
+            </AnimatePresence>
 
-              <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-2 text-emerald-400">
-                <span className="whitespace-nowrap">user@macbook ~ %</span>
+            {bootDone && (
+              <div className="flex items-center gap-2 mt-1">
+                <span className="text-[#32d74b] font-bold">➜</span>
+                <span className="text-[#64d2ff] font-bold">~</span>
                 <input
                   ref={inputRef}
                   value={input}
                   onChange={(e) => setInput(e.target.value)}
-                  onKeyDown={onKeyDown}
-                  autoFocus
+                  onKeyDown={(e) => e.key === "Enter" && runCommand(input)}
+                  className="bg-transparent border-none outline-none flex-1 text-white caret-[#32d74b]"
                   spellCheck={false}
-                  className="
-                bg-transparent
-                border-0
-                outline-none
-                ring-0
-                shadow-none
-                focus:outline-none
-                focus:ring-0
-                focus:border-0
-                appearance-none
-                caret-emerald-400
-                flex-1
-                text-white
-                min-w-0
-                py-1
-                text-xs sm:text-sm
-              "
                 />
               </div>
-
-              <div className="mt-4 sm:mt-6">
-                <Link
-                  href="/"
-                  className="text-sky-400 hover:underline text-base sm:text-lg"
-                >
-                  → Return Home
-                </Link>
-              </div>
-            </>
-          )}
+            )}
+          </div>
         </div>
-      </div>
+
+      </motion.div>
+
+      <style jsx>{`
+        .custom-scrollbar::-webkit-scrollbar {
+          width: 8px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: 10px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+          background: rgba(255, 255, 255, 0.2);
+        }
+      `}</style>
     </main>
   );
 };
 
 export default MacOs;
+

package/templates/ModernPage.tsx

@@ -1,20 +1,82 @@
+"use client";
+
+import { motion } from "framer-motion";
 import Link from "next/link";
+import { cn } from "@/components/ui/cn";
 
-const ModernPage = () => {
+const ModernPage = ({ className }: { className?: string }) => {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-background">
-      <div className="surface rounded-2xl p-8 text-center">
-        <h1 className="text-7xl font-extrabold tracking-tight">404</h1>
-        <p className="mt-2 text-muted">This page could not be found.</p>
-        <Link
-          href="/"
-          className="mt-6 inline-block rounded-lg bg-foreground px-4 py-2 text-background"
-        >
-          Back to home
-        </Link>
+    <div
+      className={cn(
+        "min-h-screen bg-[#050505] flex items-center justify-center p-6 overflow-hidden relative font-sans",
+        className
+      )}
+    >
+      {/* Mesh Gradient Background */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-purple-900/20 blur-[120px] rounded-full animate-pulse" />
+        <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-blue-900/20 blur-[120px] rounded-full animate-pulse [animation-delay:2s]" />
       </div>
+
+      <motion.div 
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8, ease: "easeOut" }}
+        className="relative z-10 w-full max-w-2xl"
+      >
+        <div className="bg-white/[0.03] backdrop-blur-xl border border-white/10 rounded-[2.5rem] p-12 md:p-20 text-center shadow-2xl overflow-hidden group">
+          <div className="absolute inset-0 bg-gradient-to-br from-white/[0.05] to-transparent pointer-events-none" />
+          
+          <motion.div
+            initial={{ scale: 0.9, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            transition={{ delay: 0.2, duration: 0.5 }}
+            className="relative inline-block mb-8"
+          >
+            <h1 className="text-[8rem] md:text-[12rem] font-black leading-none tracking-tighter bg-gradient-to-b from-white to-white/20 bg-clip-text text-transparent select-none">
+              404
+            </h1>
+            <div className="absolute -inset-4 bg-white/5 blur-3xl rounded-full z-[-1] group-hover:bg-white/10 transition-colors" />
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.4 }}
+          >
+            <h2 className="text-2xl md:text-3xl font-bold text-white mb-4 tracking-tight">
+              Lost in the Digital Ether.
+            </h2>
+            <p className="text-gray-400 text-lg mb-12 max-w-md mx-auto leading-relaxed">
+              The page you are seeking has drifted beyond our reach. 
+              Let&apos;s navigate you back to solid ground.
+            </p>
+
+            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+              <Link
+                href="/"
+                className="w-full sm:w-auto px-10 py-4 bg-white text-black font-bold rounded-2xl hover:bg-gray-200 transition-all transform hover:-translate-y-1 active:scale-95 shadow-xl shadow-white/5"
+              >
+                Go Home
+              </Link>
+              <button className="w-full sm:w-auto px-10 py-4 border border-white/10 text-white font-bold rounded-2xl hover:bg-white/5 transition-all active:scale-95">
+                Take a Tour
+              </button>
+            </div>
+          </motion.div>
+        </div>
+        
+        <div className="mt-12 flex justify-center gap-8 text-[10px] text-white/20 font-bold uppercase tracking-[0.3em]">
+          <span>Security Verified</span>
+          <span>•</span>
+          <span>Node 404_X</span>
+          <span>•</span>
+          <span>Stable Connection</span>
+        </div>
+      </motion.div>
     </div>
   );
 };
 
 export default ModernPage;
+