make webpage txt using this "import React, { useState, useEffect } from 'react';
import { Clock, CheckCircle2, XCircle, HelpCircle, ChevronRight, AlertCircle, BookOpen, Calendar, ArrowRight, Menu } from 'lucide-react';

// Types
interface Question {
  word: string;
  question: string;
  options: string[];
  correct: string;
}

interface VocabItem {
  word: string;
  synonyms: string[];
}

const vocabList: VocabItem[] = [
  { word: "Abrogate", synonyms: ["cancel", "repeal", "revoke", "rescind", "repudiate", "annul", "nullify", "invalidate", "negate", "exterminate", "quash"] },
  { word: "Adulation", synonyms: ["flattery", "coax", "cajolery", "bootlicking", "wheedle", "obsequiousness", "sycophancy"] },
  { word: "Amicable", synonyms: ["friendly", "gregarious", "amiable", "affable", "courteous", "genial", "polite", "harmonious", "cordial"] },
  { word: "Ablution", synonyms: ["religious washing", "cleansing", "purification", "purgation", "baptism"] },
  { word: "Assertive", synonyms: ["domineering", "authoritative", "forceful", "aggressive", "commanding", "pushy"] },
  { word: "Alert", synonyms: ["watchful", "cautious", "careful", "meticulous", "vigilant", "attentive", "observant"] },
  { word: "Accede", synonyms: ["consent", "agree", "approve", "accept", "comply", "concede", "yield", "acquiesce"] },
  { word: "Acumen", synonyms: ["expertise", "adroit", "dextrous", "affichado", "maestro", "doyen", "perspicuity", "shrewdness"] },
  { word: "Accused", synonyms: ["indicted", "impeached", "charged", "arraigned", "prosecuted"] },
  { word: "Avarice", synonyms: ["greed", "cupidity", "voracity", "covetousness", "rapacious", "avid", "grasping"] },
  { word: "August", synonyms: ["majestic", "regal", "grand", "kingly", "courtly", "dignified", "stately", "noble"] },
  { word: "Apposite", synonyms: ["appropriate", "apt", "related", "relevant", "pertained", "germane", "suitable", "fitting"] },
  { word: "Accoutrement", synonyms: ["equipment", "tools", "paraphernalia", "apparatus", "gear", "tackle", "kit"] },
  { word: "Antipathy", synonyms: ["dislike", "disdain", "detestation", "abomination", "abhorrence", "loathsome", "aversion", "anathema", "hatred", "repugnance"] },
  { word: "Abysmal", synonyms: ["bottomless", "depthless", "immeasurable", "unfathomable", "terrible", "dreadful"] },
  { word: "Artful", synonyms: ["cunning", "sly", "canny", "crafty", "wily", "scheming", "foxlike", "vulpine", "clever", "shrewd", "insidious"] },
  { word: "Ancestors", synonyms: ["forefathers", "forebears", "progenitors", "predecessors", "antecedents"] },
  { word: "Appraise", synonyms: ["judge", "evaluate", "assess", "estimate", "value", "rate", "gauge"] },
  { word: "Accrue", synonyms: ["gather", "accumulate", "assimilate", "store", "hoard", "pileup", "amass", "stock"] },
  { word: "Audacious", synonyms: ["bold", "temerity", "heroic", "candid", "fearless", "brave", "daring", "intrepid"] },
  { word: "Affluence", synonyms: ["richness", "prosperity", "opulence", "wealth", "abundance", "plenty"] },
  { word: "Abstain", synonyms: ["refrain", "avoid", "forbear", "desist", "hold back", "withhold"] },
  { word: "Aversion", synonyms: ["dislike", "hatred", "repugnance", "antipathy", "disgust", "loathing"] },
  { word: "Autocratic", synonyms: ["dictatorial", "authoritarian", "tyrannical", "despotic", "oppressive", "domineering"] },
  { word: "Atrocity", synonyms: ["violence", "brutality", "barbarity", "heinousness", "outrage", "horror"] },
  { word: "Appear", synonyms: ["seem", "look", "emerge", "surface", "manifest", "show"] },
  { word: "Abuse", synonyms: ["scorn", "insult", "despise", "debase", "affront", "maltreat", "mistreat"] },
  { word: "Adorn", synonyms: ["beautify", "decorate", "garnish", "embellish", "ornate", "deck", "enhance"] },
  { word: "Abundant", synonyms: ["plentiful", "dime-a-dozen", "copious", "plethora", "lush", "bountiful", "ample"] },
  { word: "Anticipate", synonyms: ["hope", "expect", "foresee", "await", "predict", "forecast"] },
  { word: "Adverse", synonyms: ["unfavorable", "hostile", "detrimental", "harmful", "negative", "inimical"] },
  { word: "Apex", synonyms: ["top", "pinnacle", "acme", "supreme", "summit", "zenith", "culmination", "apotheosis", "paramount", "apogee"] },
  { word: "Inform", synonyms: ["notify", "tell", "advise", "apprise", "brief", "enlighten"] },
  { word: "Absurd", synonyms: ["ridiculous", "preposterous", "nonsensical", "ludicrous", "foolish", "silly"] },
  { word: "Adversity", synonyms: ["misfortune", "mishap", "tragedy", "calamity", "sufferings", "hardships", "affliction"] },
  { word: "Antagonist", synonyms: ["opponent", "rival", "contender", "adversary", "competitor", "foe"] },
  { word: "Absolve", synonyms: ["exonerate", "acquit", "exculpate", "clear", "pardon", "forgive"] },
  { word: "Ascription", synonyms: ["attribution", "assignment", "imputation", "credit", "acknowledgment"] },
  { word: "Advocate", synonyms: ["support", "encourage", "promote", "champion", "back", "endorse"] },
  { word: "Affection", synonyms: ["liking", "fondness", "admiration", "propensity", "penchant", "affinity"] },
  { word: "Affectation", synonyms: ["show off", "sham", "flaunt", "ostentation", "hypocrisy", "pretension"] },
  { word: "Assuage", synonyms: ["pacify", "placate", "alleviate", "mitigate", "appease", "mollify", "propitiate", "tranquilize"] },
  { word: "Adamant", synonyms: ["obdurate", "stubborn", "obstinate", "pig-headed", "mulish", "perverse", "intransigent", "refractory"] },
  { word: "Arable", synonyms: ["fertile", "cultivable", "productive", "fruitful", "rich"] },
  { word: "Acerbic", synonyms: ["bitter", "acrid", "acrimonious", "vitriolic", "acidic", "sarcastic"] },
  { word: "Affable", synonyms: ["friendly", "genial", "amiable", "cordial", "sociable", "gracious"] },
  { word: "Benevolent", synonyms: ["kind", "generous", "altruistic", "philanthropic", "compassionate", "gracious"] },
  { word: "Blister", synonyms: ["wound", "sore", "lesion", "blain", "vesicle"] },
  { word: "Battered", synonyms: ["destroyed", "damaged", "beaten", "worn", "bruised"] },
  { word: "Baleful", synonyms: ["harmful", "detrimental", "parlous", "perilous", "menacing", "jeopardy", "deleterious", "hazardous", "lethal", "noxious", "noisome"] }
];

function App() {
  const [view, setView] = useState<'home' | 'instructions' | 'quiz'>('home');
  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
  const [score, setScore] = useState(0);
  const [correctCount, setCorrectCount] = useState(0);
  const [incorrectCount, setIncorrectCount] = useState(0);
  const [timeLeft, setTimeLeft] = useState(600); // 10 minutes
  const [selectedAnswer, setSelectedAnswer] = useState<string | null>(null);
  const [isAnswerSubmitted, setIsAnswerSubmitted] = useState(false);
  const [questionStatus, setQuestionStatus] = useState<string[]>([]);
  const [questions, setQuestions] = useState<Question[]>([]);
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  // Initialize questions
  useEffect(() => {
    if (view === 'quiz') {
      const allSynonyms = vocabList.reduce((acc, item) => acc.concat(item.synonyms), []);
      
      const generateQuestions = () => {
        return vocabList.map(item => {
          const correct = item.synonyms[Math.floor(Math.random() * item.synonyms.length)];
          const distractorPool = allSynonyms.filter(syn => !item.synonyms.includes(syn));
          const distractors = shuffle(distractorPool.slice()).slice(0, 3);
          const options = shuffle([correct, ...distractors]);
          return {
            word: item.word,
            question: `Which of the following is a synonym for "${item.word}"?`,
            options,
            correct
          };
        });
      };

      const shuffledQuestions = shuffle(generateQuestions());
      setQuestions(shuffledQuestions);
      setQuestionStatus(new Array(shuffledQuestions.length).fill('Unattempted'));
    }
  }, [view]);

  // Timer
  useEffect(() => {
    let timer: NodeJS.Timeout;
    if (view === 'quiz' && timeLeft > 0) {
      timer = setInterval(() => {
        setTimeLeft((prev) => {
          if (prev <= 1) {
            clearInterval(timer);
            return 0;
          }
          return prev - 1;
        });
      }, 1000);
    }
    return () => clearInterval(timer);
  }, [view, timeLeft]);

  // Utility function to shuffle array
  function shuffle<T>(array: T[]): T[] {
    const newArray = [...array];
    for (let i = newArray.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
    }
    return newArray;
  }

  const handleSubmit = () => {
    if (!selectedAnswer) {
      alert('Please select an answer');
      return;
    }

    const currentQuestion = questions[currentQuestionIndex];
    const isCorrect = selectedAnswer === currentQuestion.correct;

    setScore((prev) => prev + (isCorrect ? 2 : -0.5));
    setCorrectCount((prev) => prev + (isCorrect ? 1 : 0));
    setIncorrectCount((prev) => prev + (isCorrect ? 0 : 1));

    const newStatus = [...questionStatus];
    newStatus[currentQuestionIndex] = isCorrect ? 'Correct' : 'Incorrect';
    setQuestionStatus(newStatus);

    setIsAnswerSubmitted(true);
  };

  const handleNext = () => {
    setCurrentQuestionIndex((prev) => prev + 1);
    setSelectedAnswer(null);
    setIsAnswerSubmitted(false);
  };

  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  };

  const startQuiz = () => {
    setView('quiz');
    setTimeLeft(600);
    setScore(0);
    setCorrectCount(0);
    setIncorrectCount(0);
    setCurrentQuestionIndex(0);
  };

  if (view === 'home') {
    return (
      <div className="min-h-screen bg-gray-50 p-4 md:p-8">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-3xl md:text-4xl font-bold text-gray-800 mb-8">SSC CGL Vocabulary Quiz Series</h1>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="bg-white rounded-lg shadow-sm p-6 border-2 border-blue-500">
              <div className="flex items-center mb-4">
                <Calendar className="w-6 h-6 text-blue-600 mr-2" />
                <h2 className="text-xl font-semibold">Day 1 Quiz</h2>
              </div>
              <p className="text-gray-600 mb-4">Master essential vocabulary with our comprehensive Day 1 quiz covering 50 important words.</p>
              <button
                onClick={() => setView('instructions')}
                className="w-full bg-blue-600 text-white rounded-lg py-2 px-4 flex items-center justify-center hover:bg-blue-700 transition-colors"
              >
                Start Quiz <ArrowRight className="w-4 h-4 ml-2" />
              </button>
            </div>

            <div className="bg-white rounded-lg shadow-sm p-6 border-2 border-gray-200">
              <div className="flex items-center mb-4">
                <Calendar className="w-6 h-6 text-gray-400 mr-2" />
                <h2 className="text-xl font-semibold text-gray-400">Day 2 Quiz (Coming Soon)</h2>
              </div>
              <p className="text-gray-400 mb-4">The next set of vocabulary words will be available soon.</p>
              <button
                disabled
                className="w-full bg-gray-100 text-gray-400 rounded-lg py-2 px-4 cursor-not-allowed"
              >
                Coming Soon
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (view === 'instructions') {
    return (
      <div className="min-h-screen bg-gray-50 p-4 md:p-8">
        <div className="max-w-4xl mx-auto">
          <div className="bg-white rounded-lg shadow-sm p-6 md:p-8">
            <div className="flex items-center mb-6">
              <BookOpen className="w-8 h-8 text-blue-600 mr-3" />
              <h1 className="text-2xl md:text-3xl font-bold">Quiz Instructions</h1>
            </div>

            <div className="space-y-4 text-gray-700 mb-8">
              <p className="font-semibold text-xl text-gray-800">Important Guidelines:</p>
              <ul className="list-disc pl-5 space-y-2">
                <li>The quiz contains questions from Day 1 vocabulary words</li>
                <li>Total duration: 10 minutes</li>
                <li>Each correct answer: +2 marks</li>
                <li>Each incorrect answer: -0.5 marks</li>
                <li>Questions must be attempted sequentially</li>
                <li>The quiz will auto-submit when the time is up</li>
              </ul>
            </div>

            <button
              onClick={startQuiz}
              className="w-full md:w-auto bg-blue-600 text-white rounded-lg py-3 px-6 font-semibold hover:bg-blue-700 transition-colors flex items-center justify-center"
            >
              Start Quiz Now <ArrowRight className="w-5 h-5 ml-2" />
            </button>
          </div>
        </div>
      </div>
    );
  }

  if (questions.length === 0) return <div>Loading...</div>;

  const currentQuestion = questions[currentQuestionIndex];
  const isLastQuestion = currentQuestionIndex === questions.length - 1;

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col md:flex-row">
      {/* Mobile Header */}
      <div className="md:hidden bg-white border-b p-4 flex items-center justify-between">
        <h1 className="text-lg font-semibold">SSC Vocabulary Quiz</h1>
        <button
          onClick={() => setIsSidebarOpen(!isSidebarOpen)}
          className="p-2 hover:bg-gray-100 rounded-lg"
        >
          <Menu className="w-6 h-6" />
        </button>
      </div>

      {/* Main Content */}
      <div className="flex-1 p-4 md:p-6 md:order-1">
        {/* Header */}
        <div className="bg-white rounded-lg shadow-sm p-4 mb-6">
          <h1 className="text-xl md:text-2xl font-bold text-gray-800">Day 1: SSC CGL Tier-II Vocabulary Quiz</h1>
          <div className="text-sm text-gray-500 mt-1">October 26, 2023</div>
          
          <div className="flex justify-between items-center mt-4">
            <div className="flex items-center space-x-2">
              <Clock className="w-5 h-5 text-blue-600" />
              <span className="font-semibold">
                Time Left: {formatTime(timeLeft)}
              </span>
            </div>
            <div className="flex items-center space-x-2">
              <span className="font-semibold text-blue-600">
                Score: {score}
              </span>
            </div>
          </div>
        </div>

        {/* Question Card */}
        <div className="bg-white rounded-lg shadow-sm p-4 md:p-6 mb-6">
          <div className="flex items-center justify-between mb-4">
            <span className="text-sm font-medium text-gray-500">
              Question {currentQuestionIndex + 1} of {questions.length}
            </span>
            <span className="text-sm font-medium text-gray-500">
              Marks: +2 for correct, -0.5 for incorrect
            </span>
          </div>

          <h2 className="text-lg md:text-xl font-semibold text-gray-800 mb-6">
            {currentQuestion.question}
          </h2>

          <div className="space-y-3">
            {currentQuestion.options.map((option, index) => (
              <div
                key={index}
                className={`p-3 md:p-4 rounded-lg border-2 cursor-pointer transition-all ${
                  selectedAnswer === option
                    ? 'border-blue-500 bg-blue-50'
                    : 'border-gray-200 hover:border-blue-200'
                }`}
                onClick={() => !isAnswerSubmitted && setSelectedAnswer(option)}
              >
                <label className="flex items-center cursor-pointer">
                  <input
                    type="radio"
                    name="answer"
                    value={option}
                    checked={selectedAnswer === option}
                    onChange={() => setSelectedAnswer(option)}
                    disabled={isAnswerSubmitted}
                    className="hidden"
                  />
                  <span className="text-gray-700">{option}</span>
                </label>
              </div>
            ))}
          </div>

          {isAnswerSubmitted && (
            <div className={`mt-6 p-4 rounded-lg ${
              selectedAnswer === currentQuestion.correct
                ? 'bg-green-50 text-green-700'
                : 'bg-red-50 text-red-700'
            }`}>
              {selectedAnswer === currentQuestion.correct ? (
                <div className="flex items-center">
                  <CheckCircle2 className="w-5 h-5 mr-2" />
                  <span>Correct!</span>
                </div>
              ) : (
                <div className="flex items-center">
                  <XCircle className="w-5 h-5 mr-2" />
                  <span>Incorrect! The correct answer is: {currentQuestion.correct}</span>
                </div>
              )}
            </div>
          )}

          <div className="mt-6 flex justify-end space-x-4">
            {!isAnswerSubmitted ? (
              <button
                onClick={handleSubmit}
                className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
              >
                Submit Answer
              </button>
            ) : !isLastQuestion && (
              <button
                onClick={handleNext}
                className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center"
              >
                Next Question
                <ChevronRight className="w-4 h-4 ml-2" />
              </button>
            )}
          </div>
        </div>
      </div>

      {/* Sidebar */}
      <div className={`
        fixed md:static inset-0 bg-white md:w-80 transform transition-transform duration-200 ease-in-out
        ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'}
        md:translate-x-0 z-50 md:border-l border-gray-200
      `}>
        <div className="p-4 md:p-6">
          <div className="md:hidden flex justify-end">
            <button
              onClick={() => setIsSidebarOpen(false)}
              className="p-2 hover:bg-gray-100 rounded-lg"
            >
              ✕
            </button>
          </div>

          <h3 className="text-lg font-semibold mb-4">Question Navigation</h3>
          <div className="grid grid-cols-5 gap-2 mb-6">
            {questionStatus.map((status, index) => (
              <div
                key={index}
                className={`w-8 h-8 flex items-center justify-center rounded-full text-sm ${
                  status === 'Unattempted'
                    ? 'bg-gray-100 text-gray-600'
                    : status === 'Correct'
                    ? 'bg-green-100 text-green-600'
                    : 'bg-red-100 text-red-600'
                }`}
              >
                {index + 1}
              </div>
            ))}
          </div>

          <div className="space-y-4">
            <div className="flex items-center">
              <CheckCircle2 className="w-5 h-5 text-green-600 mr-2" />
              <span>Correct: {correctCount}</span>
            </div>
            <div className="flex items-center">
              <XCircle className="w-5 h-5 text-red-600 mr-2" />
              <span>Incorrect: {incorrectCount}</span>
            </div>
            <div className="flex items-center">
              <HelpCircle className="w-5 h-5 text-gray-600 mr-2" />
              <span>Unattempted: {questions.length - (correctCount + incorrectCount)}</span>
            </div>
          </div>

          {timeLeft === 0 && (
            <div className="mt-6 p-4 bg-yellow-50 rounded-lg">
              <div className="flex items-center text-yellow-800">
                <AlertCircle className="w-5 h-5 mr-2" />
                <span>Time's up! Quiz completed.</span>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default App;"