-
Notifications
You must be signed in to change notification settings - Fork 0
/
productDetails.html
209 lines (203 loc) · 13.3 KB
/
productDetails.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
206
207
208
209
<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css"
integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<link rel="stylesheet" href="./css/all.min.css" />
<link rel="stylesheet" href="./css/bootstrap.css" />
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<section class="details">
<div class="pathPage">
<a href="index.html">الرئيسية</a>
<span>/</span>
<a href="">كل المنتجات</a>
<span>/</span>
<p>تفاصيل المنتج</p>
</div>
<div class="item">
<div class="boxImgItem">
<img
id="img_show"
src="./images/itemImg.png"
alt=""
class="imgItem"
/>
</div>
<div class="imagesItem">
<div class="imgOne">
<img src="./images/cate1.png" class="def_img " alt="" />
</div>
<div class="imgOne =">
<img src="./images/itemImg.png" class="def_img active" alt="" />
</div>
<div class="imgOne">
<img src="./images/itemImg.png" class="def_img" alt="" />
</div>
<div class="imgOne">
<img src="./images/itemImg.png" class="def_img" alt="" />
</div>
<div class="imgOne">
<img src="./images/itemImg.png" class="def_img" alt="" />
</div>
<div class="imgOne">
<img src="./images/itemImg.png" class="def_img" alt="" />
</div>
<div class="imgOne">
<img src="./images/itemImg.png" class="def_img" alt="" />
</div>
</div>
<h2>موبايل آبل آيفون بشريحتين و 64 جيجا بالإضافة الى كاميرتين</h2>
<div class="countPay">
<svg
width="14"
height="17"
viewBox="0 0 14 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.5371 5.49419C7.68116 3.75666 9.02041 1.30425 9.07788 1.20231C9.16125 1.05725 9.161 0.878781 9.07719 0.733969C8.99341 0.589156 8.83878 0.5 8.67147 0.5C7.20138 0.5 6.05019 0.917688 5.24991 1.7415C3.88244 3.14916 3.94588 5.34 3.97294 6.27556C3.97594 6.37919 3.97853 6.46875 3.97853 6.53525C3.97853 7.22988 4.08997 7.87116 4.18831 8.43694C4.25169 8.80153 4.30641 9.11641 4.31613 9.36397C4.32653 9.62897 4.27816 9.68972 4.27609 9.69216C4.26919 9.70034 4.21169 9.73094 4.05622 9.73094C3.87891 9.73094 3.74819 9.673 3.63238 9.54316C3.18 9.03591 3.14872 7.65084 3.23522 6.89731C3.25069 6.76444 3.20866 6.63131 3.11969 6.53144C3.03075 6.43156 2.90338 6.37444 2.76963 6.37444C1.55259 6.37444 0.643188 8.36469 0.643188 10.1442C0.643188 10.9807 0.811438 11.8002 1.14328 12.5798C1.46409 13.3335 1.92156 14.0138 2.50303 14.6016C3.71403 15.8258 5.31069 16.5 6.99894 16.5C8.69397 16.5 10.2902 15.8353 11.4937 14.6284C12.694 13.4247 13.355 11.8321 13.355 10.1441C13.355 7.99031 11.6698 6.18328 10.5371 5.49419ZM6.99894 15.5625C4.06197 15.5625 1.58072 13.0812 1.58072 10.1441C1.58072 9.42984 1.75116 8.68006 2.04831 8.08709C2.11772 7.94856 2.18894 7.82972 2.25922 7.72959C2.26706 8.50294 2.38956 9.55716 2.93191 10.1662C3.22447 10.4948 3.61325 10.6684 4.05625 10.6684C4.47009 10.6684 4.78547 10.543 4.99353 10.2956C5.38253 9.83316 5.26313 9.14616 5.112 8.27637C5.02016 7.74794 4.91606 7.14897 4.91606 6.53522C4.91606 6.45512 4.91328 6.35934 4.91009 6.24837C4.88444 5.36219 4.83103 3.51816 5.92238 2.39475C6.41228 1.89041 7.09628 1.58347 7.96159 1.47844C7.86391 1.80281 7.77969 2.21459 7.77644 2.67566C7.76925 3.69153 8.15781 5.14406 10.0498 6.29513C10.9652 6.85203 12.4175 8.38944 12.4175 10.1442C12.4175 13.1318 9.98672 15.5625 6.99894 15.5625Z"
fill="#F55157"
/>
</svg>
<p>تم شراءه <span>250</span> مرة</p>
</div>
<a href="" class="shareItem">
<svg
width="16"
height="17"
viewBox="0 0 16 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.3845 10.4624C11.4516 10.4624 10.6164 10.888 10.0622 11.5551L6.45721 9.50838C6.56931 9.19291 6.63093 8.85371 6.63093 8.50021C6.63093 8.14679 6.56931 7.80758 6.45721 7.49211L10.0619 5.44486C10.616 6.11221 11.4514 6.53796 12.3844 6.53796C14.0486 6.53796 15.4026 5.18347 15.4026 3.51852C15.4028 1.85406 14.0488 0.5 12.3845 0.5C10.7201 0.5 9.36595 1.85406 9.36595 3.51845C9.36595 3.87195 9.42749 4.21122 9.53967 4.52676L5.93478 6.57408C5.38067 5.90708 4.54551 5.48162 3.61276 5.48162C1.94809 5.48162 0.59375 6.83568 0.59375 8.50014C0.59375 10.1645 1.94809 11.5186 3.61276 11.5186C4.54551 11.5186 5.3806 11.0931 5.93471 10.4262L9.53967 12.473C9.42749 12.7886 9.36588 13.1279 9.36588 13.4815C9.36588 15.1459 10.72 16.4999 12.3845 16.4999C14.0487 16.4999 15.4027 15.1458 15.4027 13.4815C15.4028 11.8168 14.0488 10.4624 12.3845 10.4624ZM12.3845 1.55626C13.4664 1.55626 14.3465 2.43648 14.3465 3.51845C14.3465 4.60098 13.4664 5.48162 12.3845 5.48162C11.3025 5.48162 10.4222 4.60098 10.4222 3.51845C10.4222 2.43648 11.3025 1.55626 12.3845 1.55626ZM3.61283 10.4624C2.53059 10.4624 1.65008 9.58211 1.65008 8.50021C1.65008 7.41817 2.53059 6.53796 3.61283 6.53796C4.69466 6.53796 5.57474 7.41817 5.57474 8.50021C5.57474 9.58211 4.69459 10.4624 3.61283 10.4624ZM12.3845 15.4437C11.3025 15.4437 10.4222 14.5634 10.4222 13.4816C10.4222 12.3992 11.3025 11.5187 12.3845 11.5187C13.4664 11.5187 14.3465 12.3992 14.3465 13.4816C14.3465 14.5634 13.4664 15.4437 12.3845 15.4437Z"
fill="#666666"
/>
</svg>
<p>مشاركة المنتج</p>
</a>
<h3>
موبايل ابل ايفون 11 بشريحتين لاتصال وذاكرة داخلية 64 جيجا ويدعم تقنية
شبكة الجيل الرابع ال تي اي مع تطبيق فيس تايم، بنفسجي، النسخة العالمية
</h3>
<a href="" class="more">عرض المزيد</a>
<div class="countItem">
<h4>حدد الكمية</h4>
<div class="counter hide">
<button class="inc" name="add">+</button>
<p class="amount" name="num-tv">1</p>
<button class="dec" name="del">-</button>
</div>
<h5>250.00 ر.س</h5>
</div>
<button class="payNow">الشراء السريع</button>
<button class="addTo">
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M2.54229 3.56614C2.53235 3.45612 2.54543 3.34524 2.58071 3.24056C2.61599 3.13588 2.67269 3.0397 2.74719 2.95814C2.82169 2.87658 2.91237 2.81144 3.01344 2.76686C3.11451 2.72228 3.22376 2.69924 3.33422 2.69922H12.976C13.0951 2.69927 13.2127 2.72606 13.32 2.77762C13.4274 2.82917 13.5218 2.90418 13.5962 2.99709C13.6707 3.09001 13.7234 3.19846 13.7504 3.31446C13.7773 3.43045 13.7779 3.55102 13.7521 3.66726L12.9374 7.33946C12.7972 7.97053 12.446 8.53491 11.9418 8.9394C11.4375 9.34388 10.8104 9.56426 10.1639 9.56415H5.67934C4.97022 9.56419 4.28673 9.29899 3.76321 8.82067C3.2397 8.34236 2.91402 7.68553 2.8502 6.97929L2.54229 3.56614ZM3.7069 3.83542L3.98186 6.87703C4.02017 7.30097 4.21573 7.69523 4.53008 7.98224C4.84443 8.26926 5.25481 8.42825 5.68048 8.42794H10.1651C10.5528 8.42785 10.929 8.29552 11.2314 8.05279C11.5338 7.81007 11.7444 7.47148 11.8285 7.09291L12.5522 3.83542H3.7069Z"
fill="#62D0B6"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0.192688 0.790757C0.192688 0.640087 0.252541 0.495589 0.359081 0.389049C0.46562 0.28251 0.610119 0.222656 0.760789 0.222656H2.75368C2.89265 0.222797 3.02674 0.273866 3.13059 0.3662C3.23444 0.458535 3.30084 0.58573 3.31724 0.723721L3.77399 4.58794C3.79162 4.73771 3.74903 4.88834 3.6556 5.00671C3.56216 5.12507 3.42554 5.20147 3.27577 5.2191C3.126 5.23673 2.97537 5.19414 2.857 5.10071C2.73864 5.00727 2.66224 4.87064 2.64461 4.72088L2.24808 1.35772H0.760789C0.610119 1.35772 0.46562 1.29787 0.359081 1.19133C0.252541 1.08479 0.192688 0.941426 0.192688 0.790757ZM5.30559 12.5311C5.45626 12.5311 5.60076 12.4713 5.7073 12.3647C5.81384 12.2582 5.87369 12.1137 5.87369 11.963C5.87369 11.8124 5.81384 11.6679 5.7073 11.5613C5.60076 11.4548 5.45626 11.3949 5.30559 11.3949C5.15492 11.3949 5.01042 11.4548 4.90388 11.5613C4.79735 11.6679 4.73749 11.8124 4.73749 11.963C4.73749 12.1137 4.79735 12.2582 4.90388 12.3647C5.01042 12.4713 5.15492 12.5311 5.30559 12.5311ZM5.30559 13.6673C5.5294 13.6673 5.75103 13.6232 5.9578 13.5376C6.16458 13.4519 6.35246 13.3264 6.51072 13.1681C6.66897 13.0099 6.79451 12.822 6.88016 12.6152C6.96581 12.4085 7.00989 12.1868 7.00989 11.963C7.00989 11.7392 6.96581 11.5176 6.88016 11.3108C6.79451 11.104 6.66897 10.9162 6.51072 10.7579C6.35246 10.5996 6.16458 10.4741 5.9578 10.3885C5.75103 10.3028 5.5294 10.2587 5.30559 10.2587C4.85358 10.2587 4.42009 10.4383 4.10047 10.7579C3.78085 11.0775 3.60129 11.511 3.60129 11.963C3.60129 12.415 3.78085 12.8485 4.10047 13.1681C4.42009 13.4878 4.85358 13.6673 5.30559 13.6673ZM10.4889 12.5311C10.6396 12.5311 10.7841 12.4713 10.8906 12.3647C10.9972 12.2582 11.057 12.1137 11.057 11.963C11.057 11.8124 10.9972 11.6679 10.8906 11.5613C10.7841 11.4548 10.6396 11.3949 10.4889 11.3949C10.3383 11.3949 10.1938 11.4548 10.0872 11.5613C9.98069 11.6679 9.92084 11.8124 9.92084 11.963C9.92084 12.1137 9.98069 12.2582 10.0872 12.3647C10.1938 12.4713 10.3383 12.5311 10.4889 12.5311ZM10.4889 13.6673C10.7128 13.6673 10.9344 13.6232 11.1411 13.5376C11.3479 13.4519 11.5358 13.3264 11.6941 13.1681C11.8523 13.0099 11.9779 12.822 12.0635 12.6152C12.1492 12.4085 12.1932 12.1868 12.1932 11.963C12.1932 11.7392 12.1492 11.5176 12.0635 11.3108C11.9779 11.104 11.8523 10.9162 11.6941 10.7579C11.5358 10.5996 11.3479 10.4741 11.1411 10.3885C10.9344 10.3028 10.7128 10.2587 10.4889 10.2587C10.0369 10.2587 9.60344 10.4383 9.28382 10.7579C8.9642 11.0775 8.78464 11.511 8.78464 11.963C8.78464 12.415 8.9642 12.8485 9.28382 13.1681C9.60344 13.4878 10.0369 13.6673 10.4889 13.6673Z"
fill="#62D0B6"
/>
</svg>
<p>أضف للسلة</p>
</button>
</div>
</section>
<section class="payType">
<div class="part">
<img src="./images/tmara.png" alt="tmara" />
<h3>ادفع 586 ر.س فقط علي 3 دفعات بدون رسوم</h3>
<a href="">أعرف أكثر</a>
</div>
<div class="part">
<img src="./images/Payemnt Icons.png" alt="Payemnt" />
<h3>سنقسط الدفع لمشترياتك علي أربع أقساط بدون تكلفة</h3>
<a href="">أعرف أكثر</a>
</div>
<div class="part">
<img src="./images/download.png" alt="Payemnt" />
<h3>
اليوم والباقي SAR ادفع ربع القيمة 11.77 .قسطه على 3 أشهر. بدون رسوم
</h3>
<a href="">أعرف أكثر</a>
</div>
</section>
<script src="./js/jquery-3.6.1.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
var del = document.getElementsByName("del");
const add = document.getElementsByName("add");
const val = document.getElementsByName("num-tv");
const counter = function (e) {};
const addcount = [];
for (i = 0; i <= add.length - 1; i++) {
addcount.push(i);
}
addcount.map((addone, index) => {
del[index].addEventListener("click", function () {
if (+val[index].innerText <= 1) {
val[index].innerText = "1";
} else if ((val[index].value = 1)) {
val[index].innerText = +val[index].innerText - 1;
}
});
add[index].addEventListener("click", function (e) {
e.preventDefault();
val[index].innerText = +val[index].innerText + 1;
counter();
});
});
</script>
<script>
const img_show = document.getElementById("img_show");
const def_img = document.getElementsByClassName("def_img");
const ahmed = function () {
// Remove "active" class from all elements with class "def_img"
for (let i = 0; i < def_img.length; i++) {
def_img[i].classList.remove("active");
}
// Add "active" class to the clicked element
this.classList.add("active");
// Set src and srcset of img_show
img_show.src = this.src;
img_show.srcset = this.srcset;
};
for (let i = 0; i < def_img.length; i++) {
def_img[i].addEventListener("click", ahmed);
}
</script>
</body>
</html>