-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathtest.html
205 lines (201 loc) · 11.7 KB
/
test.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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<div class="header__top bg-black">
<div class="container mx-auto">
<div class="flex flex-row justify-between text-[13px]">
<div class="flex flex-row items-center gap-10">
<div class="flex flex-row items-center gap-2 hidden md:block">
<i class="far fa-clock text-[11px]"></i>
<span data-i18n="header.open_time"></span>
</div>
<div class="flex-row items-center gap-5 text-[11px] hidden md:flex">
<a href="#" class="hover:text-white hover:bg-blue-600 w-8 h-8 flex items-center justify-center"><i
class="fab fa-facebook-f"></i></a>
<a href="#" class="hover:text-white hover:bg-blue-400 w-8 h-8 flex items-center justify-center"><i
class="fab fa-twitter"></i></a>
<a href="#" class="hover:text-white hover:bg-tumblr w-8 h-8 flex items-center justify-center"><i
class="fab fa-tumblr"></i></a>
<a href="#" class="hover:text-white hover:bg-vimeo w-8 h-8 flex items-center justify-center"><i
class="fab fa-vimeo-v"></i></a>
</div>
<div class="flex flex-row items-center gap-5">
<div class="flex items-center gap-1 cursor-pointer text-green-500" id="lang-vi">
<img src="../../assets/images/viet-nam.png" alt="Vietnam Flag" class="w-5 h-5" />
<span class="hover:text-green-500">VI</span>
</div>
<div class="flex items-center gap-1 cursor-pointer" id="lang-en">
<img src="../../assets/images/united-kingdom.png" alt="English Flag" class="w-4 h-4" />
<span class="hover:text-green-500">EN</span>
</div>
</div>
</div>
<div class="flex flex-row gap-5" id="login-register">
<a href="/src/pages/login.html" class="hover:text-green-500 flex items-center justify-center gap-1"><i class="fas fa-user"></i>
<span data-i18n="header.login"></span></a>
<a href="/src/pages/register.html" class="hover:text-green-500 flex items-center justify-center gap-1"><i
class="fas fa-user-plus"></i> <span data-i18n="header.register"></span></a>
</div>
<div class="flex items-center hidden relative" id="user-info">
<div class="flex flex-row items-center gap-5">
<div class="relative flex items-center gap-5 cursor-pointer hover:text-green-500">
<span id="user-name"></span>
<i class="fas fa-caret-down"></i>
</div>
</div>
<div class="text-[13px] absolute left-0 top-[32px] w-auto text-nowrap hidden border border-main bg-white shadow-lg z-[1]" id="user-action">
<ul class="divide-y divide-gray-200">
<li class="hover:bg-main hover:text-white transition-colors duration-300 p-3">
<a href="/src/pages/purchase-history.html"><i class="fas fa-receipt mr-1"></i><span data-i18n="header.purchase_history"></span></a>
</li>
<li class="hover:bg-main hover:text-white transition-colors duration-300 p-3">
<a href="#" id="logout"><i class="fas fa-sign-out-alt mr-1"></i><span data-i18n="header.logout"></span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="header__mid bg-cover bg-center text-[13px] p-5 md:p-0 bg-[url('../../assets/images/bg-header.png')]">
<div class="container mx-auto">
<div class="flex flex-row items-center">
<div class="logo basis-full md:basis-5/12 flex flex-row items-center">
<a href="../pages/home.html" class="flex flex-row justify-center items-center w-full">
<img src="../../assets/images/logo.webp" alt="logo" />
</a>
<img src="../../assets/images/beside_logo.webp" alt="Green Shop" class="hidden md:block" />
</div>
<div class="basis-1/12 hidden md:block"></div>
<div class="basis-5/12 flex flex-col items-center hidden md:block">
<div class="header__hotline text-center mb-1">
<i class="fas fa-phone-alt"></i>
<span data-i18n="header.support"></span>:
<a href="#" class="hover:text-green-500">(04) 6674 2332</a>
<span> - </span>
<a href="#" class="hover:text-green-500">(04) 3786 8904</a>
</div>
<div class="header__search w-full">
<form action="#" method="GET" class="flex flex-row items-center">
<input type="text" name="search" data-placeholder="search"
class="w-full h-10 px-5 border border-solid border-grey-300 rounded-l-[50px] focus:outline-none" />
<button type="submit"
class="w-10 h-10 bg-white rounded-r-[50px] flex items-center justify-center border border-solid border-border">
<i class="fas fa-search"></i>
</button>
</form>
</div>
</div>
<div class="basis-1/12 flex justify-end mt-[25px] hidden md:block ml-[20px]" id="cart-header">
<div class="group relative flex flex-row items-center gap-3">
<a href="../pages/cart.html" class="hover:text-green-500 flex items-center justify-center gap-2 text-gray-600">
<i class="fas fa-shopping-basket text-[18px]"></i>
<span class="cart-count bg-main text-white rounded-full px-2 py-1 text-[12px]" id="quantity-card-header"></span>
<span data-i18n="header.products"></span>
</a>
<div id="cart-header-content" class="absolute hidden group-hover:block top-[27px] left-[-100px] p-[10px] bg-white text-center shadow-lg rounded-lg min-w-max z-[1]">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header__bottom bg-main text-white">
<div class="container">
<nav class="flex flex-row justify-between items-center">
<div class="nav__menu hidden md:block">
<ul class="flex flex-row">
<li class="px-[20px] py-[13px]"><i class="fas fa-bars"></i></li>
<li class="px-[20px] py-[13px] bg-active"><a href="../pages/home.html" class="hover:text-white"><span data-i18n="header.home"></span></a></li>
<li class="px-[20px] py-[13px] hover:text-white hover:bg-active"><a href="#"><span data-i18n="header.about"></span></a></li>
<li class="group relative px-[20px] py-[13px] hover:text-white hover:bg-active">
<a href="/src/pages/product.html"><span data-i18n="header.products"></span> <i class="fas fa-caret-down"></i></a>
<ul
class="absolute hidden group-hover:block bg-white text-black top-[50px] text-[14px] left-0 min-w-max z-[1]">
<li class="hover:text-white hover:bg-active px-[20px] py-[13px]"><a href="#"><i
class="fas fa-caret-right mr-3"></i><span data-i18n="header.promo_product_1"></span></a></li>
<li class="hover:text-white hover:bg-active px-[20px] py-[13px]"><a href="#"><i
class="fas fa-caret-right mr-3"></i><span data-i18n="header.promo_product_1"></span></a></li>
<li class="hover:text-white hover:bg-active px-[20px] py-[13px]"><a href="#"><i
class="fas fa-caret-right mr-3"></i><span data-i18n="header.promo_product_1"></span></a></li>
</ul>
</li>
<li class="group relative px-[20px] py-[13px] hover:text-white hover:bg-active">
<a href="#"><span data-i18n="header.new_products"></span> <i class="fas fa-caret-down"></i></a>
<ul
class="absolute hidden group-hover:block bg-white text-black top-[50px] text-[14px] left-0 min-w-max z-[1]">
<li class="hover:text-white hover:bg-active px-[20px] py-[13px]"><a href="#"><i
class="fas fa-caret-right mr-3"></i><span data-i18n="header.promo_product_1"></span></a></li>
<li class="hover:text-white hover:bg-active px-[20px] py-[13px]"><a href="#"><i
class="fas fa-caret-right mr-3"></i><span data-i18n="header.promo_product_1"></span></a></li>
<li class="hover:text-white hover:bg-active px-[20px] py-[13px]"><a href="#"><i
class="fas fa-caret-right mr-3"></i><span data-i18n="header.promo_product_1"></span></a></li>
</ul>
</li>
<li class="px-[20px] py-[13px] hover:text-white hover:bg-active"><a href="/src/pages/news.html"><span data-i18n="header.news"></span></a></li>
<li class="px-[20px] py-[13px] hover:text-white hover:bg-active"><a href="/src/pages/contact.html"><span data-i18n="header.contact"></span></a></li>
</ul>
</div>
</nav>
<div class="menu-bar__mobile flex flex-row justify-between items-center md:hidden">
<div id="mobile-menu-toggle" class="py-[15px]">
<i class="fas fa-bars cursor-pointer"></i>
</div>
<div class="flex flex-row items-center gap-5">
<div class="flex flex-row items-center gap-3">
<form class="hidden" id="search-form">
<input type="text" id="search-input" name="search" data-placeholder="search"
class="text-black h-5 px-5 w-40 border-solid border-border rounded-[50px] focus:outline-none" />
</form>
<i id="search-icon" class="fas fa-search"></i>
</div>
<div class="relative">
<div class="absolute flex justify-center items-center bg-white left-2 top-[-1px] rounded-full h-4 w-4 text-black text-[10px]">0</div>
<i class="fas fa-shopping-basket"></i>
</div>
</div>
</div>
</div>
<div id="mobile-menu" class="hidden bg-white text-gray-500 text-[14px]">
<ul>
<li class="px-[20px] py-[10px] border-t border-solid border-brown-50 text-main">
<a><span data-i18n="header.home"></span></a>
</li>
<li class="px-[20px] py-[10px] border-t border-solid border-brown-50">
<a><span data-i18n="header.about"></span></a>
</li>
<li class="px-[20px] py-[10px] border-t border-solid border-brown-50">
<a class="flex flex-row justify-between">
<span data-i18n="header.products"></span>
<div id="mobile-icon-down">
<i class="fas fa-caret-down"></i>
</div>
<div id="mobile-icon-up" class="hidden">
<i class="fas fa-caret-up"></i>
</div>
</a>
</li>
<li id="mobile-child-product" class="hidden">
<ul>
<li class="pl-[30px] pr-[15px] py-[10px] border-t border-solid border-brown-50">
<a><span data-i18n="header.promo_product_1"></span></a>
</li>
<li class="pl-[30px] pr-[15px] py-[10px] border-t border-solid border-brown-50">
<a><span data-i18n="header.promo_product_1"></span></a>
</li>
<li class="pl-[30px] pr-[15px] py-[10px] border-t border-solid border-brown-50">
<a><span data-i18n="header.promo_product_1"></span></a>
</li>
</ul>
</li>
<li class="px-[20px] py-[10px] border-t border-solid border-brown-50">
<a><span data-i18n="header.news"></span></a>
</li>
<li class="px-[20px] py-[10px] border-t border-solid border-brown-50">
<a href="/src/pages/contact.html"><span data-i18n="header.contact"></span></a>
</li>
</ul>
</div>
</div>
<div id="toast" class="fixed top-5 right-[-300px] bg-white px-7 py-5 rounded-lg shadow-lg flex items-center opacity-0 transition-all duration-500 ease-in-out">
<div class="flex items-center justify-center h-5 w-5 rounded-full text-[15px]" id="icon">
</div>
<span class="ml-3"></span>
</div>