back1ng.github.io/index.html at master · Back1ng/back1ng.github.io · 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>🎯 Wordle Helper</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main class="wordle-helper">
    <header class="app-header">
      <h1>🎯 Wordle Helper</h1>
      <button id="reset-btn" class="reset-btn" aria-label="Сбросить все данные">🗑️ Сброс</button>
    </header>

    <details class="instructions" aria-label="Как пользоваться" open>
      <summary>Как пользоваться</summary>
      <div class="instructions-content">
        <ol class="instructions-list">
          <li>Введите 5-буквенное слово с клавиатуры или с кнопок внизу — буквы появятся в клетках.</li>
          <li>Кликайте по клеткам, чтобы отметить цвет: серый — буквы нет, жёлтый — есть, но не здесь, зелёный — точная позиция.</li>
          <li>Нажимайте на букву в клетке: 1 раз — жёлтая, 2 раза — зелёная, 3 раз — вернётся в исходное состояние.</li>
          <li>Если буква жёлтая, укажите запретные позиции в блоке ниже (цифры 1–5).</li>
          <li>Когда слово заполнено, нажмите «Добавить попытку» или клавишу Enter.</li>
        </ol>
        <div class="legend" aria-label="Обозначения цветов">
          <span class="legend-item"><span class="legend-dot legend-absent"></span> нет буквы</span>
          <span class="legend-item"><span class="legend-dot legend-present"></span> есть, но не здесь</span>
          <span class="legend-item"><span class="legend-dot legend-correct"></span> верная позиция</span>
        </div>
      </div>
    </details>

    <section class="history" aria-label="История попыток">
      <div id="attempts-container"></div>
    </section>

    <section class="current-attempt" aria-label="Текущая попытка">
      <div class="letter-grid" id="letter-grid">
        <!-- 5 cells generated by JS -->
      </div>

      <div class="controls">
        <button id="add-attempt" class="btn btn-primary" disabled>Добавить попытку</button>
      </div>
    </section>

    <section class="position-picker-container" id="position-picker-container" hidden>
      <h3>Буква "<span id="selected-letter"></span>" также НЕ на позициях:</h3>
      <div class="position-chips" id="position-chips">
        <!-- 5 position chips -->
      </div>
    </section>

    <section class="results" aria-label="Подходящие слова">
      <div class="results-header">
        <h2 id="results-title">Подходящие слова</h2>
        <span id="word-count" class="word-count">0</span>
      </div>
      <div id="word-list" class="word-list">
        <p class="empty-state">Введите первую попытку, чтобы увидеть подходящие слова</p>
      </div>
    </section>

    <section class="keyboard" aria-label="Виртуальная клавиатура">
      <div class="keyboard-row">
        <button data-key="й" class="key">й</button>
        <button data-key="ц" class="key">ц</button>
        <button data-key="у" class="key">у</button>
        <button data-key="к" class="key">к</button>
        <button data-key="е" class="key">е</button>
        <button data-key="н" class="key">н</button>
        <button data-key="г" class="key">г</button>
        <button data-key="ш" class="key">ш</button>
        <button data-key="щ" class="key">щ</button>
        <button data-key="з" class="key">з</button>
        <button data-key="х" class="key">х</button>
        <button data-key="ъ" class="key">ъ</button>
      </div>
      <div class="keyboard-row">
        <button data-key="ф" class="key">ф</button>
        <button data-key="ы" class="key">ы</button>
        <button data-key="в" class="key">в</button>
        <button data-key="а" class="key">а</button>
        <button data-key="п" class="key">п</button>
        <button data-key="р" class="key">р</button>
        <button data-key="о" class="key">о</button>
        <button data-key="л" class="key">л</button>
        <button data-key="д" class="key">д</button>
        <button data-key="ж" class="key">ж</button>
        <button data-key="э" class="key">э</button>
      </div>
      <div class="keyboard-row">
        <button id="backspace" class="key key-wide">←</button>
        <button data-key="я" class="key">я</button>
        <button data-key="ч" class="key">ч</button>
        <button data-key="с" class="key">с</button>
        <button data-key="м" class="key">м</button>
        <button data-key="и" class="key">и</button>
        <button data-key="т" class="key">т</button>
        <button data-key="ь" class="key">ь</button>
        <button data-key="б" class="key">б</button>
        <button data-key="ю" class="key">ю</button>
        <button id="submit" class="key key-wide key-enter">✓</button>
      </div>
    </section>
  </main>

  <script src="app.js"></script>
</body>
</html>