technoshop-cms/index.html at main · Rootdiv/technoshop-cms · 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
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CMS Techno Shop</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script type="module" src="js/index.js"></script>
  </head>
  <body>
    <div class="container">
      <h1 class="mb-3">Приложение для управления товарами</h1>
      <button type="button" class="modal-open-btn btn btn-success d-block mb-3 ms-auto">Добавить товар</button>
      <div class="table-responsive">
        <table class="table table-bordered">
          <thead class="table-light wrapper-sort">
            <tr>
              <th>
                <button class="btn-sort btn btn-link w-100 h-100 text-decoration-none" data-sort="id">id</button>
              </th>
              <th>
                <button class="btn-sort btn btn-link w-100 h-100 text-decoration-none" data-sort="title">
                  Наименование товара
                </button>
              </th>
              <th>
                <button class="btn-sort btn btn-link w-100 h-100 text-decoration-none" data-sort="category">
                  Категория
                </button>
              </th>
              <th>
                <button class="btn-sort btn btn-link w-100 h-100 text-decoration-none" data-sort="price">
                  Стоимость
                </button>
              </th>
            </tr>
          </thead>
          <tbody class="table-group-divider table-goods"></tbody>
        </table>

        <div class="modal">
          <div class="modal-dialog">
            <form class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" name="header">Добавить новый товар</h5>
                <button type="button" class="btn-close" aria-label="Закрыть модальное окно"></button>
              </div>
              <div class="modal-body">
                <div class="row g-3">
                  <div class="col-12 col-sm-6">
                    <input type="text" class="form-control" name="title" placeholder="Наименование"
                      aria-label="Наименование товара" required />
                  </div>
                  <div class="col-12 col-sm-6">
                    <input type="text" class="form-control" name="category" list="category" placeholder="Категория"
                      aria-label="Категория товара(eng/rus)" required />
                    <datalist id="category"></datalist>
                  </div>
                  <div class="col-12">
                    <textarea type="text" class="form-control" name="description" placeholder="Описание"
                      aria-label="Описание товара" rows="5" required></textarea>
                  </div>
                  <div class="col-12 col-sm-6">
                    <input type="number" class="form-control" name="display" step="0.01" placeholder="Экран"
                      aria-label="Размер экрана" />
                  </div>
                  <div class="col-12 col-sm-6">
                    <input type="number" class="form-control" min="1" step="1" name="price" placeholder="Цена"
                      aria-label="Цена товара" required />
                  </div>
                </div>
                <hr />
                <label tabindex="0" for="image" class="btn btn-primary d-block mx-auto">Добавить изображение</label>
                <input class="visually-hidden" tabindex="-1" type="file" name="image" id="image"
                  accept="image/jpeg, image/png" />
                <input type="hidden" name="imagesave" />
                <div class="wrapper-preview">
                  <img class="preview" />
                </div>
              </div>
              <div class="modal-footer">
                <input type="hidden" name="id" />
                <button type="submit" class="btn btn-primary modal-submit-btn">Добавить товар</button>
              </div>
            </form>
          </div>
        </div>

        <svg style="display: none">
          <symbol id="edit" viewBox="0 0 30 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path
              d="m8.75 21.266 5.516-.018 12.04-11.926c.473-.472.733-1.1.733-1.767 0-.667-.26-1.295-.733-1.768l-1.982-1.982c-.945-.945-2.594-.94-3.532-.004L8.75 15.73v5.537ZM22.556 5.573l1.986 1.978-1.996 1.978-1.982-1.981 1.992-1.976ZM11.25 16.77l7.538-7.466 1.982 1.982-7.536 7.464-1.984.006v-1.986Z" />
            <path
              d="M6.25 26.25h17.5c1.379 0 2.5-1.121 2.5-2.5V12.915l-2.5 2.5v8.335H10.197c-.032 0-.066.012-.098.012-.042 0-.083-.01-.125-.012H6.25V6.25h8.559l2.5-2.5H6.25a2.503 2.503 0 0 0-2.5 2.5v17.5c0 1.379 1.121 2.5 2.5 2.5Z" />
          </symbol>
          <symbol id="delete" viewBox="0 0 30 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M12.75 6h4.5a2.25 2.25 0 0 0-4.5 0Zm-1.5 0a3.75 3.75 0 0 1 7.5 0h7.5a.75.75 0 1 1 0 1.5h-1.581l-1.791 15.516A4.5 4.5 0 0 1 18.408 27h-6.816a4.5 4.5 0 0 1-4.47-3.984L5.331 7.5H3.75a.75.75 0 0 1 0-1.5h7.5Zm2.25 6a.75.75 0 1 0-1.5 0v9a.75.75 0 1 0 1.5 0v-9Zm3.75-.75a.75.75 0 0 0-.75.75v9a.75.75 0 1 0 1.5 0v-9a.75.75 0 0 0-.75-.75Z" />
          </symbol>
        </svg>
      </div>
    </div>
  </body>
</html>