-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathadmin.html
155 lines (128 loc) · 9.67 KB
/
admin.html
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Магазин техніки apple</title>
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
<link rel="manifest" href="img/favicon/site.webmanifest">
<link rel="shortcut icon" href="img/favicon/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="img/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/admin.css">
</head>
<body class="page-admin modal-open">
<svg xmlns="http://www.w3.org/2000/svg" hidden>
<symbol id="icon-cart-bag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6.08,7.63l.1-1.79a4.61,4.61,0,0,1,2.52-4A6.81,6.81,0,0,1,12,1a7.28,7.28,0,0,1,2.35.38,4.84,4.84,0,0,1,3.47,4.48l.11,1.7" /><path d="M16.25,23H7.77a5.34,5.34,0,0,1-5.22-4.21L1.47,13.73A4.38,4.38,0,0,1,5.76,8.42H18.23a4.4,4.4,0,0,1,4.3,5.32l-1.08,5A5.31,5.31,0,0,1,16.25,23Z" /><line x1="16.99" y1="13.13" x2="17" y2="13.13" stroke-width="2.8" /><line x1="7.14" y1="13.13" x2="7.15" y2="13.13" stroke-width="2.8" /></symbol>
<symbol id="icon-cart-add" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4.29,3.71h1a6.72,6.72,0,0,1,6.54,5.18L16.29,28a6.7,6.7,0,0,0,6.53,5.18H36.46A6.72,6.72,0,0,0,43,28l2-8.34" /><path d="M18.63,45.73A3.76,3.76,0,1,0,19,38.21h-.32a3.76,3.76,0,0,0,0,7.52Z" /><path d="M39.61,45.73a3.76,3.76,0,0,0,.32-7.52h-.32a3.76,3.76,0,0,0,0,7.52Z" /><path d="M35.86,14a16,16,0,0,1-6.59,6.59A15.92,15.92,0,0,1,22.68,14" stroke-width="1.6" /><path d="M29.26,3.71V20.5" stroke-width="1.6" /></symbol>
<symbol id="icon-close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></symbol>
<symbol id="icon-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></symbol>
<symbol id="icon-heart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></symbol>
<symbol id="icon-facebook" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></symbol>
<symbol id="icon-youtube" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></symbol>
<symbol id="icon-instagram" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></symbol>
<symbol id="icon-fire" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.59,9.9c.37-3-.23-6.18-2.95-7.9A8.36,8.36,0,0,1,8.9,7c-1.59,1.6-3.23,3-4.2,5.53-1.28,3.67.26,7.42,4,9.51a4.86,4.86,0,0,1,1.86-3.51,4.17,4.17,0,0,0,1.55-2.69,7.41,7.41,0,0,1,4,6.15c6.4-3.4,4.68-10.49,1.63-14.11"></path></symbol>
<symbol id="icon-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></symbol>
<symbol id="icon-clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></symbol>
<symbol id="icon-edit" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></symbol>
<symbol id="icon-delete" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></symbol>
<symbol id="icon-save" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></symbol>
</svg>
<div class="box-view-products">
<div class="container">
<div class="box-view-products__header">
<h1 class="box-view-products__title">Каталог товарів</h1>
<div class="box-view-products__header-actions">
<a href="#" class="btn-light btn-primary btn-sm" data-toggle="modal" data-target="#modal-form-add">
<svg class='icon icon-plus'><use href='#icon-plus'></use></svg>
Добавити
</a>
</div>
</div>
<div class="box-view-products__content mt-3">
<div class="form-group form-group--icon mb-3 position-relative">
<svg class='icon icon-search'><use href='#icon-search'></use></svg>
<input type="text" class="form-control" placeholder="Знайти товар">
</div>
<div class="box-view-products__content-cards">
<div class="card card-373">
<div class="card-img-hold">
<img src="https://picsum.photos/id/24/250/160" class="card-img" alt="">
<span class="badge badge-publish badge-success">Опублікувати</span>
<div class="card-img-actions d-flex-center">
<a href="#" class="btn-light btn-light rounded-circle d-flex-center">
<svg class='icon icon-edit'><use href='#icon-edit'></use></svg>
</a>
<a href="#" class="btn-light btn-light rounded-circle d-flex-center">
<svg class='icon icon-delete'><use href='#icon-delete'></use></svg>
</a>
</div>
</div>
<div class="card-body">
<div class="card-body-text">
<a href="" class="card-title">Fleet - Travel shopping UI desgn kit</a>
<p class="card-meta">
<svg class='icon icon-clock'><use href='#icon-clock'></use></svg>
2 дні назад
</p>
</div>
<div class="card-body-price">
<span class="badge badge-success badge-price">$64</span>
</div>
</div>
</div>
</div>
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center my-4">
<li class="page-item"><a class="btn-light btn-outline-light btn-sm" href="#">1</a></li>
<li class="page-item"><a class="btn-light btn-outline-light btn-sm" href="#">2</a></li>
<li class="page-item"><a class="btn-light btn-outline-light btn-sm" href="#">3</a></li>
<li class="page-item"><a class="btn-light btn-outline-light btn-sm" href="#">4</a></li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade show" id="modal-form-add" aria-modal="true">
<div class="modal-dialog">
<form class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Добавити товар</h5>
<button type="button" class="close" data-dismiss="modal"><svg class='icon icon-close'><use href='#icon-close'></use></svg></button>
</div>
<div class="modal-body">
<div class="form-group mb-2">
<input type="text" class="form-control" placeholder="Назва товару" required>
</div>
<div class="form-group mb-2">
<input type="text" class="form-control" placeholder="Картинка (посилання)">
</div>
<div class="form-group mb-2">
<input type="number" class="form-control" placeholder="Ціна">
</div>
<div class="form-group mb-2">
<select class="form-control" name="publish">
<option value="publish" selected>Опублікувати</option>
<option value="unpublish">Приховати</option>
</select>
</div>
</div>
<div class="modal-footer mb-3">
<button type="button" class="btn-light btn-outline-danger btn-cancel btn-sm" data-dismiss="modal">Відмінити</button>
<button type="button" class="btn-light btn-primary">
<svg class='icon icon-save'><use href='#icon-save'></use></svg>
Зберегти
</button>
</div>
</form>
</div>
</div>
<script src="js/script.js" type="module" defer></script>
</body>
</html>