-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
160 lines (134 loc) · 8.1 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<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>Mac Book Pro Configuration</title>
<link rel="shortcut icon" href="images/favicon.svg" type="image/x-icon">
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet">
</head>
<body>
<main class="max-w-screen-xl mx-auto px-12">
<section class="bg-white shadow-xl rounded-lg p-8 box-border my-24 border border-gray-200">
<div
class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-3 xl:grid-cols-3 gap-10 border-b border-gray-300 pb-12">
<!-- mac image -->
<div class="col-span-1">
<img class="rounded-lg" src="images/mac.jpg" alt="mac image">
</div>
<!-- mac information and configuration -->
<div class="col-span-2">
<!-- mac information title and decription -->
<div class="flex flex-col">
<h1 class="text-gray-700 font-semibold text-3xl">Customize your Blue 24-inch iMac with Apple M1
chip.</h1>
<p class="text-base text-gray-400 py-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam maxime nobis nihil velit id
unde laudantium voluptates perspiciatis quam alias.
</p>
</div>
<!-- mac memory infomation -->
<div class="flex flex-col">
<h3 class="text-xl text-gray-700 font-semibold py-4">Memory</h3>
<div class="flex items-center space-x-3">
<!-- 8gb -->
<button
class="text-sm py-2 px-4 rounded-md bg-green-700 text-white font-semibold focus:outline-none"
onclick="handleClick('memory',0)">8GB
unified memory</button>
<!-- 16gb -->
<button
class="text-sm py-2 px-4 rounded-md bg-green-700 text-white font-semibold focus:outline-none"
onclick="handleClick('memory',180)">16GB
unified memory</button>
</div>
</div>
<!-- mac storage information -->
<div class="flex flex-col">
<h3 class="text-xl text-gray-700 font-semibold py-4">Storage</h3>
<div class="flex items-center space-x-3">
<!-- 256gb ssd -->
<button
class="text-sm py-2 px-4 rounded-md bg-green-700 text-white font-semibold focus:outline-none"
onclick="handleClick('storage',0)">256GB
SSD storage</button>
<!-- 512gb ssd -->
<button
class="text-sm py-2 px-4 rounded-md bg-green-700 text-white font-semibold focus:outline-none"
onclick="handleClick('storage',100)">512GB
SSD storage</button>
<!-- 1Tb ssd -->
<button
class="text-sm py-2 px-4 rounded-md bg-green-700 text-white font-semibold focus:outline-none"
onclick="handleClick('storage',180)">1TB
SSD storage</button>
</div>
</div>
<!-- devlivery option -->
<div class="flex flex-col">
<h3 class="text-xl text-gray-700 font-semibold py-4">Memory</h3>
<div class="flex items-center space-x-3">
<!-- Free Delivery -->
<button
class="text-sm py-2 px-4 rounded-md bg-green-700 text-white font-semibold focus:outline-none"
onclick="handleClick('delivery',0)">Friday,Aug 25 Free Price Delivery</button>
<!-- Delevery for $20 -->
<button
class="text-sm py-2 px-4 rounded-md bg-green-700 text-white font-semibold focus:outline-none"
onclick="handleClick('delivery',20)">Friday,Aug 21 Delivery charge $20</button>
</div>
</div>
<!-- total pricing section -->
<div class="flex flex-col my-8">
<!-- best price div -->
<div class="flex items-center border-b border-gray-300 py-3">
<h3 class="text-xl text-gray-600 flex-grow">Best Price</h3>
<p class="text-xl text-gray-600 ">$ <span id="total_best_price">1299</span></p>
</div>
<!-- extra memory card -->
<div class="flex items-center border-b border-gray-300 py-3">
<h3 class="text-xl text-gray-600 flex-grow">Extra Memory Cost</h3>
<p class="text-xl text-gray-600 ">$ <span id="total_memory">0</span></p>
</div>
<!-- extra stroage cost -->
<div class="flex items-center border-b border-gray-300 py-3">
<h3 class="text-xl text-gray-600 flex-grow">Extra Storage Cost</h3>
<p class="text-xl text-gray-600 ">$ <span id="total_storage">0</span></p>
</div>
<!-- delivery charge -->
<div class="flex items-center border-b-2 border-gray-500 py-3">
<h3 class="text-xl text-gray-600 flex-grow">Delivery Charge</h3>
<p class="text-xl text-gray-600 ">$ <span id="total_delivery">0</span></p>
</div>
<!-- total price -->
<div class="flex items-center py-3">
<h3 class="text-xl text-gray-600 font-bold flex-grow">Total Price</h3>
<p class="text-xl text-gray-600 font-bold ">$ <span class="total_price">1299</span></p>
</div>
<!-- promo code -->
<div>
<h3 class="text-lg text-gray-500 py-2">Add Promo Code</h3>
<div class="flex">
<input type="text"
class="w-48 border border-gray-400 rounded-l-md focus:outline-none px-4 py-3"
id="promo_input_field" placeholder="promo (stevekaku)">
<button
class="text-sm py-3 px-6 bg-green-700 text-white font-semibold focus:outline-none rounded-r-md"
onclick="promoCodeApply(event)">Apply</button>
</div>
<p id="promo_error" class="text-red-500 font-semibold pt-2 text-lg"></p>
</div>
</div>
</div>
</div>
<!-- total price -->
<div class="flex justify-center py-4">
<h1 class="text-3xl text-gray-700 font-semibold">Total: $ <span class="total_price"
id="final_total_price">1299</span></h1>
</div>
</section>
</main>
<script src="js/app.js"></script>
</body>
</html>