spelling-bee-practice/index.html at main · Vanish-Coder/spelling-bee-practice · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Spelling Bee Practice</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
  <!-- License popup -->
  <div id="licensePopup" class="popup">
    <div class="popup-content">
      <p>This site is under an GNU GPL-v3 License. No personal data is collected and cookies are sparingly used, only when necessary (such as for remembering user choices, never for tracking or analytics). The source code is open source and you can view it <a href="https://github.com/Vanish-Coder/spelling-bee-practice" target="_blank">here</a>.</p>
      <label style="display:inline-block; margin-top: 0.5rem;"><input type="checkbox" id="dontShowAgain"> Don't show again</label>
      <button id="closePopup" style="margin-top:0.5rem;">Got it</button>
    </div>
  </div>

  <div class="container">
    <h1>Spelling Bee Practice 🐝</h1>
    <h2>A site to help you prepare for spelling bees at a CCSS-CA (California's Common Core State Standards) 4th to 6th grade level.</h2>
    <p><em>Keyboard shortcuts: Enter = Check, Shift = Next Word</em></p>

    <div class="mode-selector">
      <label for="difficultyMode">Difficulty:</label>
      <select id="difficultyMode">
        <option value="easy">Easy</option>
        <option value="hard">Hard</option>
        <option value="practice" id="practiceOption">Practice (Locked)</option>
      </select>
    </div>

    <h3 id="practiceWarning" style="display: none; color: #f59e0b; margin: 1rem 0; font-size: 1rem;">Practice mode will be locked again when you have less than 10 words to practice.</h3>

    <button id="addToPractice" style="margin-bottom: 1rem; background: #8b5cf6; padding: 0.8rem 1.2rem; border: none; border-radius: 8px; color: white; font-size: 1rem; font-weight: 600; cursor: pointer;">+ Add This Word to Practice</button>

    <button id="clearCache" style="margin-bottom: 1rem; margin-left: 0.5rem; background: #ef4444; padding: 0.8rem 1.2rem; border: none; border-radius: 8px; color: white; font-size: 1rem; font-weight: 600; cursor: pointer;">🗑️ Clear Cache</button>

    <!-- SFX Toggle Button -->
    <button id="toggleSFX" style="margin-bottom: 1rem; margin-left: 0.5rem; background: #4f46e5; padding: 0.8rem 1.2rem; border: none; border-radius: 8px; color: white; font-size: 1rem; font-weight: 600; cursor: pointer;">SFX: On</button>

    <div class="buttons">
      <button id="sayWord">🔊 Say Word</button>
      <button id="saySlow">🔊 Say Slower</button>
      <button id="saySentence">🔊 Sentence</button>
      <button id="sayDefinition">🔊 Definition</button>
    </div>

    <input id="answer" type="text" placeholder="Type the spelling here..." />

    <div class="actions">
      <button id="check">Check</button>
      <button id="next">Next Word</button>
    </div>

    <p id="feedback"></p>
  </div>

  <script src="script.js"></script>
  <script>
    // License popup logic
    const popup = document.getElementById('licensePopup');
    const closeBtn = document.getElementById('closePopup');
    const dontShow = document.getElementById('dontShowAgain');

    if (!localStorage.getItem('dontShowLicense')) {
      popup.style.display = 'flex';
    }

    closeBtn.addEventListener('click', () => {
      if (dontShow.checked) {
        localStorage.setItem('dontShowLicense', 'true');
      }
      popup.style.display = 'none';
    });
  </script>
</body>
</html>