BookNoteExtension/popup.html at main · AlekseyChirkin/BookNoteExtension · 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
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>BookNote Creator</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="term">
    <div class="term-bar">
      <span class="dot dot-red"></span>
      <span class="dot dot-amber"></span>
      <span class="dot dot-green"></span>
      <span class="term-name">BOOKNOTE_CREATOR</span>
    </div>

    <div class="term-body">
      <div class="status-line" id="statusLine" role="status" aria-live="polite">
        <span class="status-dot" id="statusDot"></span>
        <span id="statusText">поиск книги на странице…</span>
      </div>

      <form id="bookForm" class="form">
        <!-- Дата -->
        <div class="field">
          <label for="date">Дата чтения</label>
          <input type="date" id="date" autocomplete="off" required>
        </div>

        <!-- Полезность -->
        <div class="field">
          <label for="useful">Полезность</label>
          <select id="useful">
            <option value="">Не указано</option>
            <option value="yes">Да</option>
            <option value="no" selected>Нет</option>
          </select>
        </div>

        <!-- Звёзды -->
        <div class="field">
          <label for="ratingGroup">Моя оценка</label>
          <div class="rating" id="ratingGroup" role="radiogroup" aria-label="Моя оценка">
            <button type="button" class="star" data-value="1" aria-label="1 звезда">★</button>
            <button type="button" class="star" data-value="2" aria-label="2 звезды">★</button>
            <button type="button" class="star" data-value="3" aria-label="3 звезды">★</button>
            <button type="button" class="star" data-value="4" aria-label="4 звезды">★</button>
            <button type="button" class="star" data-value="5" aria-label="5 звёзд">★</button>
          </div>
          <input type="hidden" id="rating" value="">
        </div>

        <!-- Комментарий -->
        <div class="field">
          <label for="comment">Комментарий</label>
          <textarea id="comment" rows="3" placeholder="Ваши заметки о книге…"></textarea>
        </div>

        <button type="submit" id="saveBtn" disabled>Сохранить заметку</button>
        <div id="msg" class="msg" hidden></div>
      </form>
    </div>
  </div>
  <script src="popup.js"></script>
</body>
</html>