Changes

2025-12-08 12:19:53 +00:00
parent 9eeb88e9ea
commit 81674f8094
5 changed files with 324 additions and 86 deletions
@@ -1,25 +1,5 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import GlitchText from './GlitchText';
-
-// Hacker-themed questions that any human would know
-const QUESTIONS = [
-  { q: "What key do you press to open a terminal? (Hint: between D and G)", answers: ["f", "f key"] },
-  { q: "Complete: The Matrix has you, ___", answers: ["neo"] },
-  { q: "What does 'www' stand for in a URL?", answers: ["world wide web", "worldwideweb"] },
-  { q: "What color is the Matrix rain?", answers: ["green"] },
-  { q: "What does 'ctrl+c' do?", answers: ["copy", "cancel", "stop", "interrupt"] },
-  { q: "What number comes after 0 in binary?", answers: ["1", "one"] },
-  { q: "What does 'IP' stand for in networking?", answers: ["internet protocol"] },
-  { q: "What key exits most programs? (3 letters)", answers: ["esc", "escape"] },
-  { q: "Red pill or blue pill - which reveals the truth?", answers: ["red", "red pill"] },
-  { q: "What symbol starts most terminal commands?", answers: ["$", "/", ">", "dollar", "slash"] },
-  { q: "What does 'USB' stand for?", answers: ["universal serial bus"] },
-  { q: "What is localhost's IP address?", answers: ["127.0.0.1", "localhost"] },
-  { q: "Complete: Hello, _____ (classic first program output)", answers: ["world"] },
-  { q: "What animal is Linux's mascot?", answers: ["penguin", "tux"] },
-  { q: "What does 'CPU' stand for?", answers: ["central processing unit"] },
-];

 const BYPASS_KEY = 'bypass-human-check';
 const VERIFIED_KEY = 'human-verified';
@@ -28,11 +8,40 @@ interface HumanVerificationProps {
  onVerified: () => void;
 }

+// Generate a simple math equation
+const generateEquation = () => {
+  const operators = ['+', '-', '*'] as const;
+  const operator = operators[Math.floor(Math.random() * operators.length)];
+  
+  let a: number, b: number, answer: number;
+  
+  switch (operator) {
+    case '+':
+      a = Math.floor(Math.random() * 50) + 1;
+      b = Math.floor(Math.random() * 50) + 1;
+      answer = a + b;
+      break;
+    case '-':
+      a = Math.floor(Math.random() * 50) + 20;
+      b = Math.floor(Math.random() * (a - 1)) + 1;
+      answer = a - b;
+      break;
+    case '*':
+      a = Math.floor(Math.random() * 12) + 2;
+      b = Math.floor(Math.random() * 12) + 2;
+      answer = a * b;
+      break;
+  }
+  
+  return { equation: `${a} ${operator} ${b}`, answer };
+};
+
 const HumanVerification = ({ onVerified }: HumanVerificationProps) => {
-  const [question] = useState(() => QUESTIONS[Math.floor(Math.random() * QUESTIONS.length)]);
-  const [answer, setAnswer] = useState('');
+  const [{ equation, answer }, setEquation] = useState(generateEquation);
+  const [userAnswer, setUserAnswer] = useState('');
  const [error, setError] = useState(false);
-  const [showHint, setShowHint] = useState(false);
+  const [attempts, setAttempts] = useState(0);
+  const canvasRef = useRef<HTMLCanvasElement>(null);

  // Check for bypass in URL
  useEffect(() => {
@@ -43,101 +52,208 @@ const HumanVerification = ({ onVerified }: HumanVerificationProps) => {
    }
  }, [onVerified]);

+  // Draw equation on canvas for added security
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    
+    // Get computed styles for theming
+    const computedStyle = getComputedStyle(document.documentElement);
+    const primaryColor = computedStyle.getPropertyValue('--primary').trim();
+    const hslMatch = primaryColor.match(/[\d.]+/g);
+    const primaryRGB = hslMatch 
+      ? `hsl(${hslMatch[0]}, ${hslMatch[1]}%, ${hslMatch[2]}%)`
+      : '#00ff00';
+    
+    // Clear canvas
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    
+    // Draw grid lines for terminal feel
+    ctx.strokeStyle = 'rgba(0, 255, 0, 0.1)';
+    ctx.lineWidth = 1;
+    for (let i = 0; i < canvas.width; i += 20) {
+      ctx.beginPath();
+      ctx.moveTo(i, 0);
+      ctx.lineTo(i, canvas.height);
+      ctx.stroke();
+    }
+    for (let i = 0; i < canvas.height; i += 20) {
+      ctx.beginPath();
+      ctx.moveTo(0, i);
+      ctx.lineTo(canvas.width, i);
+      ctx.stroke();
+    }
+    
+    // Draw border
+    ctx.strokeStyle = primaryRGB;
+    ctx.lineWidth = 2;
+    ctx.strokeRect(2, 2, canvas.width - 4, canvas.height - 4);
+    
+    // Draw equation with slight random positioning for anti-bot
+    const offsetX = Math.random() * 10 - 5;
+    const offsetY = Math.random() * 6 - 3;
+    
+    ctx.font = 'bold 48px monospace';
+    ctx.fillStyle = primaryRGB;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    
+    // Add subtle noise/distortion
+    const chars = equation.split('');
+    let xPos = canvas.width / 2 - (chars.length * 15) + offsetX;
+    
+    chars.forEach((char) => {
+      const yOffset = Math.random() * 4 - 2;
+      ctx.fillText(char, xPos, canvas.height / 2 + offsetY + yOffset);
+      xPos += 30;
+    });
+    
+    // Draw "= ?" at the end
+    ctx.fillText('= ?', xPos + 20, canvas.height / 2 + offsetY);
+    
+    // Add scanline effect
+    for (let y = 0; y < canvas.height; y += 3) {
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.15)';
+      ctx.fillRect(0, y, canvas.width, 1);
+    }
+  }, [equation]);
+
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
-    const normalizedAnswer = answer.toLowerCase().trim();
+    const parsed = parseInt(userAnswer, 10);
    
-    if (question.answers.some(a => normalizedAnswer === a.toLowerCase())) {
+    if (!isNaN(parsed) && parsed === answer) {
      localStorage.setItem(VERIFIED_KEY, 'true');
      onVerified();
    } else {
      setError(true);
-      setShowHint(true);
-      setTimeout(() => setError(false), 500);
+      setAttempts(prev => prev + 1);
+      setTimeout(() => {
+        setError(false);
+        // Generate new equation after 3 failed attempts
+        if (attempts >= 2) {
+          setEquation(generateEquation());
+          setAttempts(0);
+        }
+      }, 600);
+      setUserAnswer('');
    }
  };

+  const handleNewEquation = () => {
+    setEquation(generateEquation());
+    setUserAnswer('');
+    setError(false);
+  };
+
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      className="fixed inset-0 z-[100] bg-background flex items-center justify-center p-4"
    >
-      <div className="max-w-md w-full">
+      <div className="max-w-lg w-full">
        <motion.div
          initial={{ scale: 0.9, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ delay: 0.2 }}
          className="border-2 border-primary box-glow p-6 bg-background"
        >
-          {/* ASCII Art Header */}
-          <pre className="font-mono text-[8px] sm:text-[10px] text-primary text-center mb-4 leading-tight">
-{`╔═══════════════════════════════════════╗
-║     HUMAN VERIFICATION REQUIRED       ║
-╚═══════════════════════════════════════╝`}
-          </pre>
-
+          {/* Header */}
          <div className="text-center mb-6">
-            <GlitchText 
-              text="ACCESS CONTROL" 
-              className="font-minecraft text-xl text-primary text-glow-strong"
-            />
-            <p className="font-pixel text-xs text-foreground/60 mt-2">
-              Prove you are human to continue
+            <pre className="font-mono text-[10px] sm:text-xs text-primary leading-tight mb-4">
+{`┌─────────────────────────────────────┐
+│     SECURITY VERIFICATION v2.0      │
+│         ANTI-BOT PROTOCOL           │
+└─────────────────────────────────────┘`}
+            </pre>
+            <p className="font-mono text-sm text-foreground/70">
+              {'>'} Solve the equation to verify humanity
            </p>
          </div>

-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div className="border border-primary/30 p-4 bg-background/50">
-              <p className="font-pixel text-[10px] text-foreground/60 mb-2">&gt; QUERY:</p>
-              <p className="font-minecraft text-sm text-primary">{question.q}</p>
-            </div>
+          {/* Canvas with equation */}
+          <div className="mb-6 flex justify-center">
+            <canvas
+              ref={canvasRef}
+              width={320}
+              height={100}
+              className="border border-primary/30 rounded"
+            />
+          </div>

-            <div>
+          {/* Input form */}
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="relative">
+              <span className="absolute left-3 top-1/2 -translate-y-1/2 text-primary font-mono">
+                {'>'}_
+              </span>
              <input
                type="text"
-                value={answer}
-                onChange={(e) => setAnswer(e.target.value)}
-                placeholder="&gt; Enter response..."
+                inputMode="numeric"
+                pattern="-?[0-9]*"
+                value={userAnswer}
+                onChange={(e) => setUserAnswer(e.target.value.replace(/[^0-9-]/g, ''))}
+                placeholder="Enter answer"
                autoFocus
                className={`w-full bg-background border-2 ${
                  error ? 'border-destructive animate-pulse' : 'border-primary/50'
-                } p-3 font-pixel text-sm text-foreground placeholder:text-foreground/30 focus:outline-none focus:border-primary transition-colors`}
+                } p-3 pl-12 font-mono text-lg text-foreground placeholder:text-foreground/30 focus:outline-none focus:border-primary transition-colors`}
              />
            </div>

            <AnimatePresence>
-              {showHint && (
-                <motion.p
+              {error && (
+                <motion.div
                  initial={{ opacity: 0, y: -10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0 }}
-                  className="font-pixel text-[10px] text-destructive"
+                  className="font-mono text-sm text-destructive flex items-center gap-2"
                >
-                  ERROR: Invalid response. Retry required.
-                </motion.p>
+                  <span>✗</span>
+                  <span>INCORRECT - {3 - attempts} attempts remaining</span>
+                </motion.div>
              )}
            </AnimatePresence>

-            <button
-              type="submit"
-              className="w-full font-minecraft text-sm py-3 border-2 border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all duration-300 box-glow"
-            >
-              EXECUTE
-            </button>
+            <div className="flex gap-3">
+              <button
+                type="submit"
+                disabled={!userAnswer}
+                className="flex-1 font-minecraft text-sm py-3 border-2 border-primary bg-primary/20 text-primary hover:bg-primary/40 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 box-glow"
+              >
+                [VERIFY]
+              </button>
+              <button
+                type="button"
+                onClick={handleNewEquation}
+                className="px-4 py-3 border-2 border-primary/50 text-primary/70 hover:border-primary hover:text-primary transition-all font-mono text-sm"
+              >
+                ↻
+              </button>
+            </div>
          </form>

-          <div className="mt-6 pt-4 border-t border-primary/20">
-            <p className="font-pixel text-[8px] text-foreground/30 text-center">
-              // Anti-bot verification protocol v1.0
+          {/* Footer */}
+          <div className="mt-6 pt-4 border-t border-primary/20 space-y-2">
+            <div className="flex justify-between text-[10px] font-mono text-foreground/40">
+              <span>Protocol: MATH-VERIFY-2.0</span>
+              <span>Encryption: ACTIVE</span>
+            </div>
+            <p className="font-mono text-[10px] text-foreground/30 text-center">
+              // This verification helps protect against automated access
            </p>
          </div>
        </motion.div>

-        {/* Decorative terminal lines */}
-        <div className="mt-4 font-mono text-[10px] text-primary/50">
-          <p>&gt; Awaiting human verification...</p>
-          <p className="animate-pulse">&gt; _</p>
+        {/* Terminal decoration */}
+        <div className="mt-4 font-mono text-[10px] text-primary/50 space-y-1">
+          <p>{'>'} Awaiting verification input...</p>
+          <p className="animate-pulse">{'>'} _</p>
        </div>
      </div>
    </motion.div>
@@ -145,4 +261,4 @@ const HumanVerification = ({ onVerified }: HumanVerificationProps) => {
 };

 export default HumanVerification;
-export { VERIFIED_KEY, BYPASS_KEY };
+export { VERIFIED_KEY, BYPASS_KEY };