tutorial.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
    rel="stylesheet">
  <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <!-- extra css -->
  <link rel="stylesheet" href="./src/Styles/typing.css">
  <link rel="stylesheet" href="src/Styles/dropdown.css">
  <script src="./src/Scripts/typing.js"></script>
  <title>Canvas Editor Tutorial</title>
  <style>
    /* ===================
       Color Theme
    =================== */
    :root {
      --bg-primary: #1a1d23;
      --bg-secondary: #222832;
      --bg-tertiary: #2a2f3a;
      --bg-quaternary: #323947;
      --glass-bg: rgba(42, 47, 58, 0.8);
      --glass-bg-light: rgba(52, 59, 71, 0.6);
      --glass-border: rgba(255, 255, 255, 0.12);
      --glass-border-light: rgba(255, 255, 255, 0.18);
      --accent-primary: #4a9eff;
      --accent-secondary: #e85d9a;
      --accent-tertiary: #9d5ce8;
      --accent-success: #4dd4ac;
      --accent-warning: #f5a623;
      --gradient-primary: linear-gradient(135deg, #4a9eff 0%, #9d5ce8 50%, #e85d9a 100%);
      --gradient-secondary: linear-gradient(135deg, #e85d9a 0%, #9d5ce8 100%);
      --gradient-accent: linear-gradient(135deg, #4dd4ac 0%, #4a9eff 100%);
      --gradient-bg: linear-gradient(135deg, #1a1d23 0%, #2a2f3a 50%, #323947 100%);
      --text-primary: #f8f9fa;
      --text-secondary: #c8ced7;
      --text-muted: #8892a3;
      --text-accent: #4a9eff;
      --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.25);
      --shadow-medium: 0 8px 32px rgba(0, 0, 0, 0.3);
      --shadow-strong: 0 15px 50px rgba(0, 0, 0, 0.4);
      --shadow-glow: 0 0 20px rgba(74, 158, 255, 0.25);
      --shadow-glow-pink: 0 0 20px rgba(232, 93, 154, 0.25);
      --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 20px;
      --radius-full: 50px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: var(--gradient-bg);
      font-family: 'Inter', sans-serif;
      color: var(--text-primary);
      overflow-x: hidden;
      line-height: 1.6;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem;
      flex-grow: 1;
    }

    /* ===================
       Tutorial Sections
    =================== */
    .tutorial-section {
      background-color: var(--bg-tertiary);
      border-radius: var(--radius-md);
      padding: 2.5rem;
      margin-bottom: 2rem;
      box-shadow: var(--shadow-medium);
      transition: var(--transition-smooth);
      border: 1px solid var(--glass-border);
    }

    .tutorial-section:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-strong);
    }

    .tutorial-section h2 {
      font-weight: 700;
      color: var(--accent-primary);
      font-size: 2.2rem;
      margin-bottom: 1.5rem;
      border-bottom: 2px solid var(--glass-border-light);
      padding-bottom: 10px;
    }

    .tutorial-section p {
      color: var(--text-secondary);
      margin-bottom: 1rem;
      font-size: 1.1em;
    }

    .tutorial-section ul {
      list-style: none;
      padding-left: 0;
      margin-top: 1rem;
    }

    .tutorial-section ul li {
      position: relative;
      padding-left: 25px;
      margin-bottom: 10px;
      color: var(--text-secondary);
      font-size: 1.1em;
    }

    .tutorial-section ul li::before {
      content: "\f058";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      color: var(--accent-success);
      position: absolute;
      left: 0;
      top: 0;
    }

    .button {
      display: inline-block;
      padding: 10px 20px;
      margin: 8px 5px;
      border-radius: var(--radius-sm);
      color: var(--text-primary);
      font-weight: 600;
      text-align: center;
      background: var(--gradient-accent);
      box-shadow: var(--shadow-soft);
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
      transition: var(--transition-smooth);
      cursor: pointer;
    }

    .button:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-glow);
    }

    /* ===================
       Modal
    =================== */
    #modalOverlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      justify-content: center;
      align-items: center;
      z-index: 2000;
    }

    #modalContent {
      background: #1a1d23;
      padding: 20px;
      border-radius: 12px;
      max-width: 800px;
      width: 90%;
      position: relative;
      box-shadow: var(--shadow-strong);
      color: var(--text-primary);
      line-height: 1.6;
    }

    #closeModal {
      position: absolute;
      top: 10px;
      right: 15px;
      cursor: pointer;
      font-size: 24px;
      color: white;
    }

    .quiz-option {
      display: block;
      margin: 6px 0;
      padding: 10px;
      border-radius: 8px;
      background: var(--bg-quaternary);
      cursor: pointer;
      transition: var(--transition-fast);
    }

    .quiz-option:hover {
      background: var(--accent-primary);
      color: #fff;
    }

    .correct {
      background: #2e7d32 !important;
      color: #fff;
    }

    .incorrect {
      background: #c62828 !important;
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="container">
    <!-- Section 1 -->
    <section class="tutorial-section">
      <h2>Getting Started</h2>
      <p>Welcome to Canvas Editor! This guide will help you set up and start your first project.</p>
      <ul>
        <li>Download and Install: Get the latest version from our official website.</li>
        <li>First Launch: Familiarize yourself with the interface layout.</li>
        <li>Creating a New Canvas: Learn how to set custom dimensions and resolutions.</li>
      </ul>
      <div class="button-group">
        <span id="videoTutorial" class="button">Watch Video Tutorial</span>
        <span id="readDocs" class="button">Read Documentation</span>
      </div>
    </section>

    <!-- Section 2 -->
    <section class="tutorial-section">
      <h2>Basic Tools Explained</h2>
      <p>Master the fundamental tools for drawing, painting, and editing.</p>
      <ul>
        <li>Brush Tool: Adjust size, opacity, and hardness.</li>
        <li>Color Picker: Select and manage your color palette.</li>
        <li>Eraser Tool: Correct mistakes with precision.</li>
        <li>Selection Tools: Isolate areas for specific edits.</li>
      </ul>
      <div class="button-group">
        <span id="practiceExercises" class="button">Practice Exercises</span>
        <span id="advancedBrush" class="button">Advanced Brush Techniques</span>
      </div>
    </section>

    <!-- Section 3 -->
    <section class="tutorial-section">
      <h2>Layers and Blending Modes</h2>
      <p>Learn to use layers for non-destructive editing and experiment with blending modes.</p>
      <ul>
        <li>Adding and Deleting Layers: Organize your artwork efficiently.</li>
        <li>Layer Opacity and Blending: Control how layers interact.</li>
        <li>Grouping Layers: Keep your workspace tidy.</li>
      </ul>
      <div class="button-group">
        <span id="downloadProject" class="button">Download Layered Project</span>
        <span id="blendEffects" class="button">Explore Blending Effects</span>
      </div>
    </section>
  </div>

  <!-- Modal -->
  <div id="modalOverlay">
    <div id="modalContent">
      <span id="closeModal">&times;</span>
      <div id="modalBody"></div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const modal = document.getElementById('modalOverlay');
      const modalBody = document.getElementById('modalBody');
      const closeModal = document.getElementById('closeModal');

      function openModal(content) {
        modalBody.innerHTML = content;
        modal.style.display = 'flex';
      }

      closeModal.addEventListener('click', () => modal.style.display = 'none');
      modal.addEventListener('click', (e) => {
        if (e.target === modal) modal.style.display = 'none';
      });

      // Video Tutorial
      document.getElementById('videoTutorial').addEventListener('click', () => {
        openModal(`<iframe width="100%" height="400" 
          src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
          frameborder="0" allowfullscreen></iframe>`);
      });

      // Read Docs
      document.getElementById('readDocs').addEventListener('click', () => {
        openModal(`<iframe src="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial" 
          width="100%" height="500"></iframe>`);
      });

      // Download Project
      document.getElementById('downloadProject').addEventListener('click', () => {
        const link = document.createElement('a');
        link.href = 'sample-project.zip';
        link.download = 'sample-project.zip';
        link.click();
      });

      // Blend Effects
      document.getElementById('blendEffects').addEventListener('click', () => {
        openModal(`<img src="https://dummyimage.com/600x400/4a9eff/ffffff&text=Blending+Effects+Demo" 
          alt="Blending Effects Demo" style="width:100%; border-radius:8px;">`);
      });

      // ✅ Practice Exercises (interactive quiz)
      document.getElementById('practiceExercises').addEventListener('click', () => {
        openModal(`
          <h2 style="color:#4a9eff; margin-bottom:10px;">Practice Exercises</h2>
          <div class="quiz-question">
            <p><b>1. Which tool is best for selecting a specific area of an image?</b></p>
            <div class="quiz-option" data-correct="false">Brush Tool</div>
            <div class="quiz-option" data-correct="true">Selection Tool</div>
            <div class="quiz-option" data-correct="false">Eraser Tool</div>
          </div>
          <div class="quiz-question">
            <p><b>2. What does opacity control in the brush tool?</b></p>
            <div class="quiz-option" data-correct="true">Transparency of strokes</div>
            <div class="quiz-option" data-correct="false">Size of the brush</div>
            <div class="quiz-option" data-correct="false">Shape of the brush</div>
          </div>
          <div class="quiz-question">
            <p><b>3. Which tool would you use to remove unwanted parts of a drawing?</b></p>
            <div class="quiz-option" data-correct="false">Brush Tool</div>
            <div class="quiz-option" data-correct="true">Eraser Tool</div>
            <div class="quiz-option" data-correct="false">Color Picker</div>
          </div>
        `);

        // add option click handlers
        document.querySelectorAll('.quiz-option').forEach(option => {
          option.addEventListener('click', () => {
            if (option.dataset.correct === "true") {
              option.classList.add('correct');
            } else {
              option.classList.add('incorrect');
            }
          });
        });
      });

      // ✅ Advanced Brush Techniques
      document.getElementById('advancedBrush').addEventListener('click', () => {
        openModal(`
          <h2 style="color:#e85d9a; margin-bottom:10px;">Advanced Brush Techniques</h2>
          <p>Take your brush skills further:</p>
          <ul style="color:#c8ced7; margin-top:10px; line-height:1.6;">
            <li>Custom brush presets</li>
            <li>Blending and smudging effects</li>
            <li>Dynamic stroke pressure (pen tablets)</li>
            <li>Texture overlays and dual brush</li>
          </ul>
        `);
      });
    });
  </script>
</body>

</html>