-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcart.html
103 lines (96 loc) · 8.06 KB
/
cart.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
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles/fonts.css">
<link rel="stylesheet" href="./styles/cart.css">
<link rel="shortcut icon" href="./imgs/fh-favicon.ico">
<script src="https://unpkg.com/jalali-moment/dist/jalali-moment.browser.js"></script>
<title>سبد خرید</title>
</head>
<script type="module" src="./js/cart.js" defer></script>
<body>
<header class="header">
<header-site></header-site>
</header>
<main>
<section class="msg-section">
<div class="container">
<div class="total-container-msg padding-container">
<div class="container-msg-logout">
<p class="msg-text">برای مشاهده سبد خرید لطفا لاگین کنید</p>
<a href="./auth.html" class="msg-link transition-color-3s">رفتن به صفحه لاگین؟</a>
</div>
<div class="container-msg-go-to-courses-page">
<p class="msg-text">دوره ای در سبد خرید شما وجود ندارد</p>
<a href="./courses.html" class="msg-link transition-color-3s">رفتن به صفحه دوره ها ؟</a>
</div>
</div>
</div>
</section>
<section class="calculations-and-courses-section">
<div class="container">
<div class="total-container-calculations-and-courses padding-container">
<h1 class="title-page">سبد خرید شما</h1>
<div class="container-calculations-and-courses">
<div class="total-container-courses"></div>
<div class="total-container-calculations">
<div class="container-calculations border-radius">
<span class="payment-information-title align-items-center">
<svg viewBox="0 0 20 20" fill="none" class="payment-information-title__svg ml-svg">
<path fill="currentColor" d="M18.333 5v2.017c0 1.316-.833 2.15-2.15 2.15h-2.85V3.342c0-.925.759-1.675 1.684-1.675a3.35 3.35 0 0 1 2.341.975c.6.608.975 1.441.975 2.358Z"></path><path fill="currentColor" d="M1.667 5.833V17.5A.83.83 0 0 0 3 18.167L4.425 17.1a.84.84 0 0 1 1.1.083l1.383 1.392a.84.84 0 0 0 1.184 0l1.4-1.4a.826.826 0 0 1 1.083-.075L12 18.167a.835.835 0 0 0 1.333-.667V3.333c0-.916.75-1.666 1.667-1.666H5C2.5 1.667 1.667 3.158 1.667 5v.833Z" opacity="0.4"></path><path fill="currentColor" d="M10 8.125H5a.63.63 0 0 1-.625-.625A.63.63 0 0 1 5 6.875h5a.63.63 0 0 1 .625.625.63.63 0 0 1-.625.625Zm-.625 3.333h-3.75A.63.63 0 0 1 5 10.833a.63.63 0 0 1 .625-.625h3.75a.63.63 0 0 1 .625.625.63.63 0 0 1-.625.625Z"></path>
</svg>
اطلاعات پرداخت
</span>
<div class="container-discount-code">
<label for="" class="container-discount-code__label">کد تخفیف</label>
<div class="container-discount-code-input border-radius space-between">
<input type="text" class="container-discount-code-input__input" placeholder="کد تخفیف را وارد کنید">
<button class="apply-the-code-btn transition-bg-3s cursor-pointer">اعمال کد</button>
<div class="loading center">
<span class="loading__circle"></span>
<span class="loading__circle loading__circle--mid"></span>
<span class="loading__circle"></span>
</div>
</div>
</div>
<div class="container-sums">
<div class="container-total-sum space-between">
<span class="sum-title">جمع کل</span>
<span class="total-sum"></span>
</div>
<div class="container-off space-between">
<span class="off-title">تخفیف</span>
<span class="total-off"></span>
</div>
</div>
<div class="container-the-amount-payable space-between">
<span class="container-the-amount-payable__title">مبلغ قابل پرداخت</span>
<div class="container-the-amount-payable-info align-items-center">
<span class="container-the-amount-payable-info__price ml-svg"></span>
<svg data-name="Layer 2" viewBox="0 0 51.29 27.19" width="51" height="27" class="container-the-amount-payable-info__svg">
<path d="M36.48 22.85c1.78-.83 2.93-1.81 3.45-2.94h-1.65c-2.53 0-4.69-.66-6.47-1.97-.59.68-1.23 1.2-1.93 1.55s-1.54.53-2.5.53c-1.03 0-1.87-.18-2.51-.53-.65-.35-1.14-.96-1.5-1.83-.35-.87-.56-2.08-.63-3.62-.02-.28-.04-.6-.04-.97s-.01-.72-.04-1.07c-.14-3.42-.28-6.26-.42-8.51l-5.8 1.37c.73 1.64 1.34 3.34 1.83 5.08.49 1.75.74 3.58.74 5.5 0 1.6-.37 3.12-1.11 4.57-.74 1.46-1.85 2.64-3.32 3.57-1.48.93-3.27 1.39-5.38 1.39s-3.82-.45-5.21-1.34C2.61 22.74 1.6 21.6.96 20.22c-.63-1.38-.95-2.84-.95-4.36 0-1.2.13-2.28.4-3.25.27-.97.63-1.93 1.07-2.87l2.39 1.34c-.38.92-.65 1.71-.83 2.39-.18.68-.26 1.48-.26 2.39 0 1.76.49 3.19 1.48 4.29s2.63 1.65 4.92 1.65c1.55 0 2.87-.32 3.96-.95 1.09-.63 1.9-1.44 2.43-2.43.53-.98.79-1.98.79-2.99 0-2.65-.82-5.82-2.46-9.5l1.69-3.52L22.38.79c.16-.05.39-.07.67-.07.54 0 .98.19 1.32.56s.53.88.58 1.51c.14 2.04.27 5.02.39 8.94.02.38.04.75.04 1.13s.01.71.04 1.02c.05 1.03.22 1.78.53 2.25s.81.7 1.51.7c.84 0 1.52-.18 2.04-.53.52-.35.97-1 1.37-1.93.75-1.71 1.33-2.96 1.74-3.75.41-.79.94-1.46 1.58-2.04.64-.57 1.44-.86 2.37-.86 1.83 0 3.27.94 4.31 2.83s1.69 4.06 1.95 6.53c1.57-.02 2.77-.13 3.61-.33.83-.2 1.41-.49 1.72-.88.32-.39.47-.89.47-1.5 0-.75-.16-1.67-.49-2.76-.33-1.09-.69-2.1-1.09-3.04l2.43-1.23c1.22 3.1 1.83 5.44 1.83 7.04 0 1.83-.67 3.18-2 4.04-1.34.87-3.53 1.34-6.58 1.41-.49 2.21-1.8 3.93-3.92 5.19-2.12 1.25-4.68 1.98-7.69 2.16l-1.2-2.88c2.6-.14 4.8-.63 6.58-1.46ZM10.38 5.66l.11 3.31-3.2.28-.46-3.31 3.55-.28Zm25.1 10.83c.88.28 1.81.42 2.8.42h1.93c-.16-1.67-.55-3.08-1.16-4.26-.61-1.17-1.38-1.76-2.32-1.76-.75 0-1.42.45-2.02 1.34-.6.89-1.11 1.92-1.53 3.1.66.49 1.42.88 2.3 1.16ZM43.64.21C45.06.07 46.43 0 47.74 0c.96 0 1.67.02 2.11.07l-.21 2.81c-.42-.05-1.08-.07-1.97-.07-1.2 0-2.44.07-3.73.21s-2.44.32-3.45.53L39.86.81c1.1-.26 2.36-.46 3.78-.6Z" data-name="Layer 1" style="fill: currentcolor;"></path>
</svg>
</div>
</div>
<button class="payment-btn transition-bg-3s border-radius">پرداخت سفارش</button>
<div class="loading center">
<span class="loading__circle"></span>
<span class="loading__circle loading__circle--mid"></span>
<span class="loading__circle"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer-section">
<div class="total-container-footer padding-container">
<footer-site></footer-site>
</div>
</footer>
</body>
</html>