Spaces:

prernajeet01
/

candle

Sleeping

App Files Files Community

prernajeet01 commited on Apr 16, 2025

Commit

ddbf128

verified ·

1 Parent(s): e575b23

Delete index.html

Browse files

Files changed (1) hide show

index.html +0 -503

index.html DELETED Viewed

@@ -1,503 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Candlestick Pattern Quiz</title>
-  <style>
-    :root {
-      --primary: #4338ca;
-      --secondary: #fbbf24;
-      --success: #10b981;
-      --danger: #ef4444;
-      --dark: #1f2937;
-      --light: #f3f4f6;
-    }
-    body {
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-      background-color: #f8fafc;
-      margin: 0;
-      padding: 0;
-      color: var(--dark);
-    }
-    .container {
-      max-width: 800px;
-      margin: 0 auto;
-      padding: 20px;
-    }
-    .header {
-      background-color: var(--primary);
-      color: white;
-      padding: 20px;
-      text-align: center;
-      border-radius: 10px;
-      margin-bottom: 20px;
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    }
-    .progress-container {
-      background-color: white;
-      border-radius: 8px;
-      padding: 15px;
-      margin-bottom: 20px;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .progress-bar {
-      height: 10px;
-      background-color: #e2e8f0;
-      border-radius: 5px;
-      overflow: hidden;
-      flex-grow: 1;
-      margin: 0 15px;
-    }
-    .progress {
-      height: 100%;
-      background-color: var(--secondary);
-      width: 0%;
-      transition: width 0.3s ease;
-    }
-    .quiz-container {
-      background-color: white;
-      border-radius: 8px;
-      padding: 20px;
-      margin-bottom: 20px;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-    }
-    .pattern-image {
-      max-width: 100%;
-      height: auto;
-      border-radius: 8px;
-      margin-bottom: 20px;
-      display: block;
-      margin: 0 auto 20px;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-    .options {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 10px;
-      margin-bottom: 20px;
-    }
-    .option {
-      background-color: var(--light);
-      border: 2px solid #e2e8f0;
-      border-radius: 8px;
-      padding: 15px;
-      cursor: pointer;
-      transition: all 0.2s ease;
-      font-weight: 500;
-    }
-    .option:hover {
-      background-color: #e2e8f0;
-      transform: translateY(-2px);
-    }
-    .selected {
-      border-color: var(--primary);
-      background-color: rgba(67, 56, 202, 0.1);
-    }
-    .correct {
-      border-color: var(--success);
-      background-color: rgba(16, 185, 129, 0.1);
-    }
-    .incorrect {
-      border-color: var(--danger);
-      background-color: rgba(239, 68, 68, 0.1);
-    }
-    .button {
-      background-color: var(--primary);
-      color: white;
-      border: none;
-      padding: 12px 24px;
-      border-radius: 8px;
-      cursor: pointer;
-      font-weight: 600;
-      transition: all 0.2s ease;
-      display: inline-block;
-    }
-    .button:hover {
-      background-color: #3730a3;
-      transform: translateY(-2px);
-    }
-    .button:disabled {
-      background-color: #cbd5e1;
-      cursor: not-allowed;
-      transform: none;
-    }
-    .explanation {
-      background-color: #f1f5f9;
-      border-left: 4px solid var(--primary);
-      padding: 15px;
-      border-radius: 0 8px 8px 0;
-      margin-bottom: 20px;
-      display: none;
-    }
-    .signal {
-      display: inline-block;
-      padding: 6px 12px;
-      border-radius: 4px;
-      color: white;
-      font-weight: 600;
-      margin-bottom: 10px;
-    }
-    .buy {
-      background-color: var(--success);
-    }
-    .sell {
-      background-color: var(--danger);
-    }
-    .results {
-      text-align: center;
-      display: none;
-    }
-    .score {
-      font-size: 36px;
-      font-weight: 700;
-      color: var(--primary);
-      margin-bottom: 10px;
-    }
-    .cash-reward {
-      background-color: var(--secondary);
-      color: var(--dark);
-      padding: 10px 20px;
-      border-radius: 8px;
-      font-size: 24px;
-      font-weight: 700;
-      display: inline-block;
-      margin: 20px 0;
-    }
-    .pattern-list {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-      gap: 15px;
-      margin-top: 20px;
-    }
-    .pattern-card {
-      background-color: white;
-      border-radius: 8px;
-      padding: 15px;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-    }
-    .pattern-card h3 {
-      margin-top: 0;
-      color: var(--primary);
-    }
-    .pattern-card img {
-      max-width: 100%;
-      border-radius: 4px;
-      margin-bottom: 10px;
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <div class="header">
-      <h1>Candlestick Pattern Quiz Game</h1>
-      <p>Test your knowledge of candlestick patterns and earn reward points!</p>
-    </div>
-    <div class="progress-container">
-      <span>Question: <span id="current-question">1</span>/<span id="total-questions">10</span></span>
-      <div class="progress-bar">
-        <div class="progress" id="progress"></div>
-      </div>
-      <span>Score: <span id="score">0</span></span>
-    </div>
-    <div class="quiz-container" id="quiz">
-      <img src="/api/placeholder/600/300" alt="Candlestick Pattern" class="pattern-image" id="pattern-image">
-      <h2>What candlestick pattern is shown above?</h2>
-      <div class="options" id="options">
-        <!-- Options will be inserted here -->
-      </div>
-      <div class="explanation" id="explanation">
-        <!-- Explanation will be inserted here -->
-      </div>
-      <button class="button" id="next-btn" disabled>Next Question</button>
-    </div>
-    <div class="results" id="results">
-      <h2>Quiz Complete!</h2>
-      <p>Your final score:</p>
-      <div class="score" id="final-score">0/10</div>
-      <div class="cash-reward">
-        Reward: $<span id="cash-reward">0.00</span>
-      </div>
-      <p>You've earned points that can be converted to cash rewards!</p>
-      <button class="button" id="restart-btn">Try Again</button>
-    </div>
-  </div>
-  <script>
-    const candlestickPatterns = [
-      {
-        name: "Doji",
-        image: "doji.png",
-        signal: "neutral",
-        explanation: "A Doji forms when the opening and closing prices are virtually equal. It represents indecision in the market and can signal a potential reversal or continuation depending on previous price action."
-      },
-      {
-        name: "Hammer",
-        image: "hammer.png",
-        signal: "buy",
-        explanation: "The Hammer is a bullish reversal pattern that forms during a downtrend. It has a small body at the top with a long lower shadow (at least twice the size of the body). This indicates that sellers drove prices down during the session but buyers were able to push the price back up by closing."
-      },
-      {
-        name: "Shooting Star",
-        image: "shooting_star.png",
-        signal: "sell",
-        explanation: "The Shooting Star is a bearish reversal pattern that forms during an uptrend. It has a small body at the bottom with a long upper shadow. This signals that buyers pushed prices up during the session, but sellers took control and drove the price back down."
-      },
-      {
-        name: "Bullish Engulfing",
-        image: "bullish_engulfing.png",
-        signal: "buy",
-        explanation: "A Bullish Engulfing pattern forms when a small bearish candle is followed by a larger bullish candle that completely 'engulfs' the previous day's body. This indicates strong buying pressure and often signals a bullish reversal."
-      },
-      {
-        name: "Bearish Engulfing",
-        image: "bearish_engulfing.png",
-        signal: "sell",
-        explanation: "A Bearish Engulfing pattern forms when a small bullish candle is followed by a larger bearish candle that completely 'engulfs' the previous day's body. This indicates strong selling pressure and often signals a bearish reversal."
-      },
-      {
-        name: "Morning Star",
-        image: "morning_star.png",
-        signal: "buy",
-        explanation: "The Morning Star is a bullish reversal pattern consisting of three candles: a large bearish candle, followed by a small-bodied candle (star) that gaps down, followed by a large bullish candle that closes above the midpoint of the first candle. This shows a shift from selling to buying pressure."
-      },
-      {
-        name: "Evening Star",
-        image: "evening_star.png",
-        signal: "sell",
-        explanation: "The Evening Star is a bearish reversal pattern consisting of three candles: a large bullish candle, followed by a small-bodied candle (star) that gaps up, followed by a large bearish candle that closes below the midpoint of the first candle. This shows a shift from buying to selling pressure."
-      },
-      {
-        name: "Three White Soldiers",
-        image: "three_white_soldiers.png",
-        signal: "buy",
-        explanation: "The Three White Soldiers pattern consists of three consecutive bullish candles, each opening within the previous candle's body and closing above the previous candle's high. It signals strong buying pressure and often indicates a bullish reversal."
-      }
-    ];
-    // Quiz questions
-    const questions = [];
-    // Generate 10 questions using the available patterns
-    for (let i = 0; i < 10; i++) {
-      // Cycle through the patterns if we need more than 8 questions
-      const patternIndex = i % candlestickPatterns.length;
-      const currentPattern = candlestickPatterns[patternIndex];
-      // Create options (all patterns except the correct one)
-      const otherOptions = candlestickPatterns
-        .filter(pattern => pattern.name !== currentPattern.name)
-        .map(pattern => pattern.name);
-      // Randomly select 3 incorrect options
-      const shuffledOptions = otherOptions.sort(() => 0.5 - Math.random()).slice(0, 3);
-      // Add the correct answer and shuffle again
-      shuffledOptions.push(currentPattern.name);
-      const finalOptions = shuffledOptions.sort(() => 0.5 - Math.random());
-      questions.push({
-        pattern: currentPattern,
-        options: finalOptions,
-        correctAnswer: currentPattern.name
-      });
-    }
-    // Quiz state
-    let currentQuestionIndex = 0;
-    let score = 0;
-    let selectedOption = null;
-    let answered = false;
-    // DOM Elements
-    const quizContainer = document.getElementById('quiz');
-    const resultsContainer = document.getElementById('results');
-    const patternImage = document.getElementById('pattern-image');
-    const optionsContainer = document.getElementById('options');
-    const explanationContainer = document.getElementById('explanation');
-    const nextButton = document.getElementById('next-btn');
-    const restartButton = document.getElementById('restart-btn');
-    const currentQuestionSpan = document.getElementById('current-question');
-    const totalQuestionsSpan = document.getElementById('total-questions');
-    const scoreSpan = document.getElementById('score');
-    const finalScoreSpan = document.getElementById('final-score');
-    const cashRewardSpan = document.getElementById('cash-reward');
-    const progressBar = document.getElementById('progress');
-    // Initialize quiz
-    function initQuiz() {
-      totalQuestionsSpan.textContent = questions.length;
-      displayQuestion();
-      nextButton.addEventListener('click', nextQuestion);
-      restartButton.addEventListener('click', restartQuiz);
-    }
-    // Display current question
-    function displayQuestion() {
-      const question = questions[currentQuestionIndex];
-      // Update progress indicators
-      currentQuestionSpan.textContent = currentQuestionIndex + 1;
-      progressBar.style.width = `${((currentQuestionIndex + 1) / questions.length) * 100}%`;
-      // Set image (placeholder for now, would be replaced with actual images)
-      patternImage.src = `/api/placeholder/600/300`;
-      patternImage.alt = `${question.pattern.name} Pattern`;
-      // Clear previous options and explanation
-      optionsContainer.innerHTML = '';
-      explanationContainer.style.display = 'none';
-      explanationContainer.innerHTML = '';
-      // Add options
-      question.options.forEach(option => {
-        const optionElement = document.createElement('div');
-        optionElement.className = 'option';
-        optionElement.textContent = option;
-        optionElement.addEventListener('click', () => selectOption(optionElement, option));
-        optionsContainer.appendChild(optionElement);
-      });
-      // Reset state for new question
-      selectedOption = null;
-      answered = false;
-      nextButton.disabled = true;
-    }
-    // Handle option selection
-    function selectOption(optionElement, option) {
-      if (answered) return;
-      // Clear previous selection
-      const allOptions = document.querySelectorAll('.option');
-      allOptions.forEach(opt => opt.className = 'option');
-      // Mark as selected
-      optionElement.className = 'option selected';
-      selectedOption = option;
-      // Enable next button
-      nextButton.disabled = false;
-      // Check answer
-      checkAnswer();
-    }
-    // Check if answer is correct
-    function checkAnswer() {
-      if (answered) return;
-      const question = questions[currentQuestionIndex];
-      const correct = selectedOption === question.correctAnswer;
-      // Mark options as correct/incorrect
-      const options = document.querySelectorAll('.option');
-      options.forEach(option => {
-        if (option.textContent === question.correctAnswer) {
-          option.className = 'option correct';
-        } else if (option.textContent === selectedOption && !correct) {
-          option.className = 'option incorrect';
-        }
-      });
-      // Update score if correct
-      if (correct) {
-        score++;
-        scoreSpan.textContent = score;
-      }
-      // Display explanation
-      const pattern = question.pattern;
-      let explanationHTML = '';
-      if (correct) {
-        explanationHTML += '<h3>Correct! 🎉</h3>';
-      } else {
-        explanationHTML += `<h3>Incorrect</h3>`;
-        explanationHTML += `<p>The correct answer is: <strong>${question.correctAnswer}</strong></p>`;
-      }
-      explanationHTML += `<div class="signal ${pattern.signal === 'buy' ? 'buy' : pattern.signal === 'sell' ? 'sell' : ''}">${pattern.signal.toUpperCase()}</div>`;
-      explanationHTML += `<p>${pattern.explanation}</p>`;
-      explanationContainer.innerHTML = explanationHTML;
-      explanationContainer.style.display = 'block';
-      answered = true;
-    }
-    // Move to next question
-    function nextQuestion() {
-      currentQuestionIndex++;
-      if (currentQuestionIndex < questions.length) {
-        displayQuestion();
-      } else {
-        showResults();
-      }
-    }
-    // Show final results
-    function showResults() {
-      quizContainer.style.display = 'none';
-      resultsContainer.style.display = 'block';
-      finalScoreSpan.textContent = `${score}/${questions.length}`;
-      // Calculate cash reward ($0.50 per correct answer)
-      const cashReward = (score * 0.5).toFixed(2);
-      cashRewardSpan.textContent = cashReward;
-    }
-    // Restart the quiz
-    function restartQuiz() {
-      currentQuestionIndex = 0;
-      score = 0;
-      scoreSpan.textContent = '0';
-      quizContainer.style.display = 'block';
-      resultsContainer.style.display = 'none';
-      displayQuestion();
-    }
-    // Start the quiz
-    initQuiz();
-  </script>
-</body>
-</html>