m33n4n-site 0.1.0

package/src/components/password-gate.tsx

@@ -0,0 +1,178 @@
+'use client';
+
+import { useState, useEffect, type ReactNode } from 'react';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { ShieldAlert, Timer, Key } from 'lucide-react';
+import { Alert, AlertDescription, AlertTitle } from './ui/alert';
+import { Input } from './ui/input';
+import { Button } from './ui/button';
+import { useToast } from '@/hooks/use-toast';
+import { Separator } from './ui/separator';
+
+
+const CountdownTimer = ({ releaseDate }: { releaseDate: string }) => {
+  const calculateTimeLeft = () => {
+    const difference = +new Date(releaseDate) - +new Date();
+    let timeLeft = {};
+
+    if (difference > 0) {
+      timeLeft = {
+        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+        minutes: Math.floor((difference / 1000 / 60) % 60),
+        seconds: Math.floor((difference / 1000) % 60),
+      };
+    }
+    return timeLeft;
+  };
+
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  });
+
+  const timerComponents: ReactNode[] = [];
+
+  Object.keys(timeLeft).forEach((interval) => {
+    // @ts-ignore
+    if (!timeLeft[interval] && interval !== 'seconds') {
+      return;
+    }
+
+    timerComponents.push(
+      <div key={interval} className="flex flex-col items-center">
+        <span className="text-3xl font-bold font-code text-primary">
+            {/* @ts-ignore */}
+          {String(timeLeft[interval]).padStart(2, '0')}
+        </span>
+        <span className="text-xs text-muted-foreground uppercase">{interval}</span>
+      </div>
+    );
+  });
+
+  return (
+    <Card className="w-full max-w-md shadow-lg bg-card/80 backdrop-blur-sm border-primary/20 flex-1">
+        <CardHeader className="text-center">
+            <div className="mx-auto bg-primary/10 rounded-full p-3 w-fit mb-4">
+                <Timer className="w-8 h-8 text-primary" />
+            </div>
+            <CardTitle className="text-2xl font-headline text-primary">Content Locked</CardTitle>
+            <CardDescription>This write-up will be available after the countdown.</CardDescription>
+        </CardHeader>
+        <CardContent>
+            <div className="flex justify-center gap-4">
+                {timerComponents.length ? timerComponents : <span>Content is now available!</span>}
+            </div>
+        </CardContent>
+    </Card>
+  );
+};
+
+export default function PasswordGate({ 
+  children, 
+  image, 
+  releaseDate,
+  tokens,
+}: { 
+  children: ReactNode, 
+  image: ReactNode, 
+  releaseDate?: string,
+  tokens?: string[],
+}) {
+  const [isTimeUp, setIsTimeUp] = useState(!releaseDate || new Date(releaseDate) < new Date());
+  const [isUnlocked, setIsUnlocked] = useState(isTimeUp);
+  const [tokenInput, setTokenInput] = useState('');
+  const { toast } = useToast();
+
+   useEffect(() => {
+    if (isUnlocked) return;
+    if (!releaseDate) {
+        setIsTimeUp(true);
+        setIsUnlocked(true);
+        return;
+    };
+
+    const interval = setInterval(() => {
+      if (new Date(releaseDate) < new Date()) {
+        setIsTimeUp(true);
+        setIsUnlocked(true);
+        clearInterval(interval);
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [releaseDate, isUnlocked]);
+  
+  const handleTokenUnlock = () => {
+    if (tokens && tokens.includes(tokenInput)) {
+        setIsUnlocked(true);
+        toast({
+            title: "Access Granted",
+            description: "You have unlocked the write-up with a token.",
+        });
+    } else {
+        toast({
+            variant: "destructive",
+            title: "Access Denied",
+            description: "The token you entered is incorrect.",
+        });
+    }
+  };
+
+  if (!isUnlocked) {
+    return (
+        <div className="flex flex-col items-center justify-center py-12 gap-8">
+            {image}
+             <Alert variant="default" className="max-w-md border-blue-500/30 bg-blue-900/20">
+                <ShieldAlert className="h-4 w-4 text-blue-400" />
+                <AlertTitle className="text-blue-300">Terms of Service Notice</AlertTitle>
+                <AlertDescription>
+                To comply with Hack The Box's terms, write-ups for active challenges are time-locked. This content will be automatically available once the official release date is reached.
+                </AlertDescription>
+            </Alert>
+            
+            <div className="w-full max-w-4xl flex flex-col md:flex-row items-center justify-center gap-8">
+              <CountdownTimer releaseDate={releaseDate!} />
+              {tokens && tokens.length > 0 && (
+                <>
+                  <Separator orientation="vertical" className="h-48 hidden md:block" />
+                  <Separator orientation="horizontal" className="w-48 md:hidden" />
+                  
+                  <Card className="w-full max-w-md shadow-lg bg-card/80 backdrop-blur-sm border-primary/20 flex-1">
+                      <CardHeader className="text-center pb-4">
+                          <div className="mx-auto bg-primary/10 rounded-full p-3 w-fit mb-2">
+                              <Key className="w-6 h-6 text-primary" />
+                          </div>
+                          <CardTitle className="text-xl font-headline text-primary">Unlock with Token</CardTitle>
+                          <CardDescription>Have a token? Bypass the timer now.</CardDescription>
+                      </CardHeader>
+                      <CardContent>
+                          <div className="flex gap-2">
+                              <Input 
+                                  type="text"
+                                  placeholder="Enter your token..."
+                                  value={tokenInput}
+                                  onChange={(e) => setTokenInput(e.target.value)}
+                                  className="bg-background/50 border-primary/30"
+                                  onKeyDown={(e) => e.key === 'Enter' && handleTokenUnlock()}
+                              />
+                              <Button onClick={handleTokenUnlock} variant="outline" className="border-primary/50">
+                                  Unlock
+                              </Button>
+                          </div>
+                      </CardContent>
+                  </Card>
+                </>
+              )}
+            </div>
+        </div>
+    );
+  }
+
+  return <>{children}</>;
+}

package/src/components/portal-page.tsx

@@ -0,0 +1,471 @@
+'use client';
+import {
+  BookOpen,
+  ArrowDown,
+  Github,
+  Linkedin,
+  Key,
+  ChevronUp, 
+  ChevronDown, 
+  Mail,
+  Lock,
+} from 'lucide-react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { Badge } from './ui/badge';
+import { getPlaceholderImage } from '@/lib/placeholder-images';
+import { Button } from './ui/button';
+import { useState, useEffect, useMemo } from 'react';
+import Logo from './logo';
+import { Input } from './ui/input';
+import { useRouter } from 'next/navigation';
+import { Alert, AlertDescription } from './ui/alert';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
+import { Card, CardContent, CardHeader } from './ui/card';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useAuth } from '@/context/auth-context';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+
+
+const allTerminalContent = [
+    { command: "whoami", output: "m33n4n" },
+    { command: "id", output: "uid=1000(m33n4n) gid=1000(m33n4n) groups=1000(m33n4n),4(adm),27(sudo)", desktopOnly: true },
+    { command: "uname -a", output: "Linux m33n4n-host 5.4.0-generic #86-Ubuntu SMP x86_64 GNU/Linux", desktopOnly: true },
+    { command: "ps -ef | grep ssh", output: "root 1025 1 0 08:30 ? 00:00:00 /usr/sbin/sshd -D", desktopOnly: true },
+    { command: "nc -lvp 4444", output: "listening on [any] 4444 ..." }
+];
+
+const TerminalCommand = () => {
+    const [contentIndex, setContentIndex] = useState(0);
+    const [displayedCommand, setDisplayedCommand] = useState('');
+    const [displayedOutput, setDisplayedOutput] = useState('');
+    const [animationPhase, setAnimationPhase] = useState('typing'); // typing, outputting, clearing
+    const [isMobile, setIsMobile] = useState(false);
+
+    useEffect(() => {
+        const checkMobile = () => setIsMobile(window.innerWidth < 768);
+        checkMobile();
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);
+
+    const terminalContent = useMemo(() => {
+        if (isMobile) {
+            return allTerminalContent.filter(item => !item.desktopOnly);
+        }
+        return allTerminalContent;
+    }, [isMobile]);
+
+    useEffect(() => {
+        if (terminalContent.length === 0) return;
+
+        const currentItem = terminalContent[contentIndex % terminalContent.length];
+
+        const handleAnimation = () => {
+            switch (animationPhase) {
+                case 'typing':
+                    if (displayedCommand.length < currentItem.command.length) {
+                        setDisplayedCommand(currentItem.command.substring(0, displayedCommand.length + 1));
+                    } else {
+                        // Pause after typing command, then show output
+                        setTimeout(() => setAnimationPhase('outputting'), 1000);
+                    }
+                    break;
+                
+                case 'outputting':
+                    setDisplayedOutput(currentItem.output);
+                    // Pause with output shown, then clear
+                    setTimeout(() => setAnimationPhase('clearing'), 3000);
+                    break;
+                
+                case 'clearing':
+                    setDisplayedCommand('');
+                    setDisplayedOutput('');
+                    setContentIndex((prevIndex) => (prevIndex + 1));
+                    setAnimationPhase('typing');
+                    break;
+            }
+        };
+
+        const typingSpeed = animationPhase === 'typing' ? 120 : 50;
+        const timeout = setTimeout(handleAnimation, typingSpeed);
+
+        return () => clearTimeout(timeout);
+    }, [displayedCommand, animationPhase, contentIndex, terminalContent]);
+
+    if (terminalContent.length === 0) return null;
+
+    return (
+        <div className="w-full max-w-2xl bg-card border border-primary/20 rounded-lg p-4 font-code text-sm shadow-lg shadow-black/30 h-[110px]">
+            <div className="flex items-center space-x-2 text-xs text-muted-foreground mb-4">
+                <div className="flex space-x-1.5">
+                    <div className="w-3 h-3 rounded-full bg-red-500"></div>
+                    <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
+                    <div className="w-3 h-3 rounded-full bg-green-500"></div>
+                </div>
+                <span>terminal@m33n4n:~</span>
+            </div>
+            <div>
+                <span className="text-primary">$</span>
+                <span className="ml-2 text-white">{displayedCommand}</span>
+                {animationPhase === 'typing' && <span className="ml-1 h-4 w-1 animate-pulse bg-green-400"></span>}
+                {displayedOutput && (
+                    <div className="text-muted-foreground mt-2 whitespace-pre-wrap">{displayedOutput}</div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+const BlogAccessChallenge = ({ onUnlock }: { onUnlock: () => void }) => {
+    const [key, setKey] = useState('');
+    const [error, setError] = useState(false);
+    const correctKey = "LET_ME_IN";
+    const encodedKey = "TEVUX01FX0lO";
+    const [isMobile, setIsMobile] = useState(false);
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+
+    useEffect(() => {
+        const checkMobile = () => setIsMobile(window.innerWidth < 768);
+        checkMobile();
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);
+
+    const handleAccess = () => {
+        if (key === correctKey) {
+            setError(false);
+            onUnlock();
+            setIsDialogOpen(false);
+        } else {
+            setError(true);
+            setTimeout(() => setError(false), 2000);
+        }
+    };
+    
+    return (
+      <div className="w-full max-w-md mx-auto space-y-4">
+        <div className="text-center font-code text-sm text-muted-foreground">
+          <p>Decode the key to enter:</p>
+          <p className="text-primary font-bold tracking-wider">{encodedKey}</p>
+        </div>
+
+        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+          <div className="flex justify-center">
+            <DialogTrigger asChild>
+              <Button
+                variant="outline"
+                className="w-48 bg-white/10 backdrop-blur-sm border-white/20 text-white hover:bg-white/20 transition-all duration-300 group"
+              >
+                <Lock className="h-5 w-5 mr-2 transition-transform duration-300 group-hover:rotate-[-10deg]" />
+                Unlock
+              </Button>
+            </DialogTrigger>
+          </div>
+          <DialogContent className="sm:max-w-[425px] bg-card border-primary/30">
+            <DialogHeader>
+              <DialogTitle className="text-primary font-headline">Enter Access Key</DialogTitle>
+              <DialogDescription>
+                Enter the decoded key below to proceed.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="grid gap-4 py-4">
+               <div className="flex items-center gap-2">
+                <Input 
+                    type="text" 
+                    placeholder="Enter decoded key..."
+                    value={key}
+                    onChange={(e) => setKey(e.target.value)}
+                    onKeyDown={(e) => e.key === 'Enter' && handleAccess()}
+                    className="bg-background/80 font-code text-center border-primary/30 focus:border-primary"
+                />
+                 {isMobile ? (
+                    <Button variant="outline" size="icon" onClick={handleAccess} className="border-primary/30 hover:bg-primary/20">
+                        <Key className="h-5 w-5" />
+                    </Button>
+                ) : (
+                    <Button variant="outline" onClick={handleAccess} className="border-primary/30 hover:bg-primary/20">
+                        <Key className="h-5 w-5 mr-2" />
+                        Exploit
+                    </Button>
+                )}
+            </div>
+             {error && (
+                 <Alert variant="destructive" className="p-2 text-center text-xs">
+                    <AlertDescription>Invalid Key</AlertDescription>
+                </Alert>
+            )}
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+    );
+}
+
+const HackTheBoxIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <Image 
+  src="https://shadowv0id.vercel.app/hackthebox.png" 
+  alt="Hackthebox Logo"
+  width={24}
+  height={24}
+  {...props}
+/>
+);
+  
+const TryHackMeIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <Image 
+        src="https://tryhackme.com/img/favicon.png" 
+        alt="TryHackMe Logo"
+        width={24}
+        height={24}
+        {...props}
+    />
+);
+
+const socialLinks = [
+    { name: 'GitHub', href: '#', icon: Github },
+    { name: 'LinkedIn', href: '#', icon: Linkedin },
+    { name: 'HackTheBox', href: '#', icon: HackTheBoxIcon },
+    { name: 'TryHackMe', href: '#', icon: TryHackMeIcon },
+];
+
+const ContactCard = () => {
+    const [isOpen, setIsOpen] = useState(false);
+  
+    const pgpKey = `-----BEGIN PGP PUBLIC KEY BLOCK-----
+xjMEaTvlWxYJKwYBBAHaRw8BAQdAw5A1S92Fn/t06CFPALL7GHtRl0Bb+44b
+QtOr6XSDsPXNHE0zM040TiA8bjB0bTMzbjRuQHByb3Rvbi5tZT7CjAQQFgoA
+PgWCaTvlWwQLCQcICZBtZdEQaiarJQMVCAoEFgACAQIZAQKbAwIeARYhBMbQ
+b/zFZHNveV8Fxm1l0RBqJqslAAAI4AEA9gKonRldgEUxW997CsNtm2IuZ7Rm
+XblciHoC5A+/algBAMm0j+mjQwNLBjX6Ihg4l597BCJQSHZpIg8jFGcUe1YH
+zjgEaTvlWxIKKwYBBAGXVQEFAQEHQFHHHPIN77kFdjbyNhyZuJCF8giZHMEi
+9wRPUKXgK3hEAwEIB8J4BBgWCgAqBYJpO+VbCZBtZdEQaiarJQKbDBYhBMbQ
+b/zFZHNveV8Fxm1l0RBqJqslAABFngD7BcM0at5ucvsMuSy5IkSERRpzUxh2
+QKZbuijdUtLGX5sA/35+Eq7H9rrC1a8KMmSgdVej+D9rqXFrCpReD9Eap9QK
+=GR7J
+-----END PGP PUBLIC KEY BLOCK-----`;
+
+    return (
+      <Collapsible
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        className="fixed bottom-4 right-4 z-50 w-[300px]"
+      >
+        <Card className="bg-card/80 backdrop-blur-md border-primary/20 shadow-lg">
+          <CollapsibleTrigger asChild>
+            <Button variant="ghost" className="w-full justify-between p-4 h-auto">
+              <div className='flex items-center gap-2'>
+                <Mail className="h-5 w-5 text-primary" />
+                <span className="font-semibold text-primary">Contact Me (PGP)</span>
+              </div>
+              {isOpen ? <ChevronDown className="h-5 w-5" /> : <ChevronUp className="h-5 w-5" />}
+            </Button>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <CardContent className="p-4 pt-0 text-left">
+              <a href="mailto:not0day@proton.me" className="font-code text-primary hover:underline block mb-2 text-sm">
+                n0tm33n4n@proton.me
+              </a>
+              <pre className="mt-2 p-2 bg-black/20 rounded-md text-xs whitespace-pre-wrap break-words font-code text-muted-foreground overflow-x-auto">
+                {pgpKey}
+              </pre>
+            </CardContent>
+          </CollapsibleContent>
+        </Card>
+      </Collapsible>
+    );
+};
+
+export default function PortalPage() {
+  const router = useRouter();
+  const { isUnlocked, setUnlocked } = useAuth();
+  const [isRedirecting, setIsRedirecting] = useState(false);
+
+  const headerImage = getPlaceholderImage('first-image');
+  const secondImage = getPlaceholderImage('second-image');
+  const thirdImage = getPlaceholderImage('third-image');
+  const fourthImage = getPlaceholderImage('fourth-image');
+  const middleImage = getPlaceholderImage('middle-image');
+  const beforePasswdImage = getPlaceholderImage('before-passwd');
+  const afterPasswdImage = getPlaceholderImage('after-passwd');
+  const chevronDownImage = getPlaceholderImage('chevron-down');
+
+  const handleUnlock = () => {
+      setUnlocked(true);
+      setIsRedirecting(true);
+  };
+
+  useEffect(() => {
+    if (isRedirecting) {
+        const timer = setTimeout(() => {
+            router.push('/blog');
+        }, 1500); // Delay redirection to show the unlocked state
+        return () => clearTimeout(timer);
+    }
+  }, [isRedirecting, router]);
+
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen p-4 overflow-hidden">
+      <div className="absolute top-4 left-4 z-20">
+          <Logo showText={false} />
+      </div>
+      {/* Background Elements */}
+      <div className="absolute inset-0 z-0">
+        {middleImage && (
+            <>
+                <Image
+                    src={middleImage.imageUrl}
+                    alt="Background decorative element"
+                    fill
+                    sizes="100vw"
+                    priority
+                    className="object-cover opacity-40"
+                    data-ai-hint={middleImage.imageHint}
+                />
+                <div className="absolute inset-0 bg-black/60"></div>
+            </>
+        )}
+      </div>
+
+      {/* Foreground Content */}
+      <div className="relative z-10 w-full flex flex-col items-center">
+        {headerImage && (
+          <div className="relative w-48 h-40 mb-2 rounded-lg overflow-hidden shadow-lg mx-auto">
+            <Image
+              src={headerImage.imageUrl}
+              alt={'Header image'}
+              fill
+              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+              className="object-cover"
+              data-ai-hint={headerImage.imageHint}
+            />
+          </div>
+        )}
+        <div className="relative w-full max-w-3xl mt-[-3rem] mx-auto">
+          {secondImage && (
+            <div className="absolute bottom-7  left-[-90px] translate-y-1/3 hidden md:block">
+              <Image
+                src={secondImage.imageUrl}
+                alt="Decorative element"
+                width={150}
+                height={150}
+                className="object-contain"
+                data-ai-hint={secondImage.imageHint}
+              />
+            </div>
+          )}
+          <div className="relative z-10 w-full bg-card/70 backdrop-blur-md border border-primary/20 rounded-2xl p-4 shadow-2xl shadow-black/30">
+            <div className="text-center">
+              <h1 className="glitch font-glitch text-5xl font-bold" data-text="Welcome">
+                Welcome
+              </h1>
+              {/* <p className="text-xl text-muted-foreground mt-2">
+                Security Researcher &amp; Penetration Tester
+              </p> */}
+            </div>
+
+            <div className="my-2 relative h-28">
+              <AnimatePresence>
+                <motion.div
+                  key={isUnlocked ? 'unlocked' : 'locked'}
+                  initial={{ opacity: 0, scale: 0.9 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.9 }}
+                  transition={{ duration: 0.5 }}
+                  className="absolute inset-0 flex flex-col items-center justify-center"
+                >
+                  {isUnlocked && afterPasswdImage ? (
+                    <>
+                      <Image
+                        src={afterPasswdImage.imageUrl}
+                        alt="Challenge solved"
+                        width={100}
+                        height={100}
+                        className="object-contain"
+                        data-ai-hint={afterPasswdImage.imageHint}
+                      />
+                      <motion.p 
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        transition={{ delay: 0.5, duration: 0.5 }}
+                        className="text-primary font-bold mt-2"
+                      >
+                        Enjoy the blogs
+                      </motion.p>
+                    </>
+                  ) : beforePasswdImage ? (
+                    <Image
+                      src={beforePasswdImage.imageUrl}
+                      alt="Challenge to solve"
+                      width={100}
+                      height={100}
+                      className="object-contain"
+                      data-ai-hint={beforePasswdImage.imageHint}
+                    />
+                  ) : null}
+                </motion.div>
+              </AnimatePresence>
+            </div>
+
+
+            {!isUnlocked && (
+              <div className="my-4">
+                <BlogAccessChallenge onUnlock={handleUnlock} />
+              </div>
+            )}
+            
+            <div className="flex items-center justify-center gap-4 my-4">
+              {socialLinks.map(({ name, href, icon: Icon }) => (
+                <Link href={href} key={name} target="_blank" rel="noopener noreferrer">
+                  <Button variant="ghost" size="icon" className="group">
+                    <Icon className="h-6 w-6 text-muted-foreground transition-all duration-300 group-hover:text-primary group-hover:scale-110" />
+                    <span className="sr-only">{name}</span>
+                  </Button>
+                </Link>
+              ))}
+            </div>
+
+            <div className="mt-4 px-4 md:px-8">
+              <TerminalCommand />
+            </div>
+          </div>
+          {thirdImage && (
+            <div className="absolute bottom-7 right-[-90px] translate-y-1/3 hidden md:block">
+              <Image
+                src={thirdImage.imageUrl}
+                alt="Decorative element"
+                width={150}
+                height={150}
+                className="object-contain"
+                data-ai-hint={thirdImage.imageHint}
+              />
+            </div>
+          )}
+          {fourthImage && (
+            <div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/3 hidden md:block">
+              <Image
+                src={fourthImage.imageUrl}
+                alt="Decorative element"
+                width={100}
+                height={100}
+                className="object-contain"
+                data-ai-hint={fourthImage.imageHint}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+
+      <ContactCard />
+    </div>
+  );
+}