-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
236 lines (229 loc) · 13.4 KB
/
Copy pathindex.html
File metadata and controls
236 lines (229 loc) · 13.4 KB
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
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./css/reset.css" />
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<title>DREAMED PC</title>
</head>
<body>
<!--BLOQUE CABECERA-->
<header>
<h2>BUILD YOUR DREAMED PC!</h2>
</header>
<!--BLOQUE PRINCIPAL DE ELEMENTOS-->
<main>
<!--BLOQUE DE PRODUCTOS-->
<div id="leftSide">
<p class="mainTitle">PRODUCTS</p>
<div id="mainContainer">
<!--PROCESADORES-->
<div class="container">
<p class="title">CPU</p>
<div class="draggableRow">
<div class="draggableItem">
<a href="https://www.pccomponentes.com/amd-ryzen-7-5800x-38ghz" target="_blank">
<img id="product00" class="product" title="AMD Ryzen 7 5800X 3.8GHz (179€)"
src="./img/cpu/cpu1.jpg" alt="product"></a>
<p>179€</p>
</div>
<div class="draggableItem">
<a href="https://www.pccomponentes.com/intel-core-i7-14700k-34-56ghz-box" target="_blank">
<img id="product01" class="product" title="Intel Core i7-14700K 5.6GHz (429€)"
src="./img/cpu/cpu2.jpg" alt="product" draggable="true"></a>
<p>429€</p>
</div>
<div class="draggableItem">
<a href="https://www.pccomponentes.com/amd-ryzen-7-7800x3d-42-ghz-5-ghz" target="_blank">
<img id="product02" class="product" title="AMD Ryzen 7 7800X3D 4.2 GHz (354€)"
src="./img/cpu/cpu3.jpg" alt="product" draggable="true"></a>
<p>354€</p>
</div>
</div>
</div>
<!--MEMORIAS-->
<div class="container">
<p class="title">MEMORY</p>
<div class="draggableRow">
<div class="draggableItem" draggable="true">
<a href="https://www.pccomponentes.com/kingston-fury-beast-ddr4-3200-mhz-16gb-2x8gb-cl16"
target="_blank">
<img id="product03" class="product" title="Kingston FURY Beast DDR4 3200 MHz 16GB (39€)"
src="./img/memory/mem1.jpg" alt="product"></a>
<p>39€</p>
</div>
<div class="draggableItem">
<a href="https://www.pccomponentes.com/corsair-vengeance-lpx-ddr4-3600mhz-pc4-28800-32gb-2x16gb-cl18"
target="_blank"><img id="product04" class="product"
title="Corsair Vengeance LPX DDR4 3600MHz PC4-28800 32GB (72€)"
src="./img/memory/mem2.jpg" alt="product" draggable="true"></a>
<p>72€</p>
</div>
<div class="draggableItem">
<a href="https://www.pccomponentes.com/corsair-vengeance-rgb-pro-ddr4-3200-pc4-25600-32gb-2x16gb-cl16"
target="_blank"><img id="product05" class="product"
title="Corsair Vengeance RGB Pro DDR4 3200 PC4-25600 32GB (92€)"
src="./img/memory/mem3.jpg" alt="product" draggable="true"></a>
<p>92€</p>
</div>
</div>
</div>
<!--TARJETAS GRÁFICAS-->
<div class="container">
<p class="title">GRAPHIC CARD</p>
<div class="draggableRow">
<div class="draggableItem">
<a href="https://www.pccomponentes.com/msi-geforce-rtx-3060-ventus-2x-oc-lhr-12gb-gddr6?refurbished"
target="_blank"><img id="product06" class="product"
title="MSI GeForce RTX 3060 VENTUS (272€)" src="./img/graphic/card1.jpg"
alt="product" draggable="true"></a>
<p>272€</p>
</div>
<div class="draggableItem">
<a href="https://www.pccomponentes.com/zotac-gaming-geforce-rtx-3060-twin-edge-lhr-12gb-gddr6"
target="_blank"><img id="product07" class="product"
title="Zotac Gaming GeForce RTX 3060 (290€)" src="./img/graphic/card2.jpg"
alt="product" draggable="true"></a>
<p>290€</p>
</div>
<div class="draggableItem">
<a href="https://www.pccomponentes.com/msi-geforce-rtx-4080-super-ventus-3x-oc-16gb-gddr6x-dlss3"
target="_blank"><img id="product08" class="product"
title="MSI GeForce RTX 4080 SUPER VENTUS 3X (1050€)" src="./img/graphic/card3.jpg"
alt="product" draggable="true"></a>
<p>1050€</p>
</div>
</div>
</div>
<!--MONITORES-->
<div class="container">
<p class="title">SCREEN</p>
<div class="draggableRow">
<div class="draggableItem">
<a href="https://www.pccomponentes.com/lg-ultragear-24gq50f-b-238-led-fullhd-165hz-freesync-premium"
target="_blank"><img id="product09" class="product"
title="LG Ultragear 23.8''LED FullHD 165Hz (129€)" src="./img/monitor/screen1.jpg"
alt="product" draggable="true"></a>
<p>129€</p>
</div>
<div class="draggableItem">
<a href="https://www.pccomponentes.com/msi-g27c4x-27-led-fullhd-250hz-freesync-premium-curvo"
target="_blank"><img id="product10" class="product"
title="MSI G27C4X 27'' LED FullHD 250Hz Curvo (189€)"
src="./img/monitor/screen2.jpg" alt="product" draggable="true"></a>
<p>189€</p>
</div>
<div class="draggableItem">
<a href="https://www.pccomponentes.com/monitor-aoc-24b3ha2-238-led-ips-fullhd-100hz"
target="_blank"><img id="product11" class="product"
title="AOC 24B3HA2 23.8'' LED IPS FullHD 100Hz (80€)"
src="./img/monitor/screen3.jpg" alt="product" draggable="true"></a>
<p>80€</p>
</div>
</div>
</div>
<!--RATONES-->
<div class="container">
<p class="title">MOUSE</p>
<div class="draggableRow">
<div class="draggableItem">
<a href="https://www.pccomponentes.com/tempest-x8-keeper-rgb-raton-gaming-10000-dpi-negro"
target="_blank">
<img id="product12" class="product" title="Tempest X8 Keeper (20€)"
src="./img/mouse/mouse1.jpg" alt="product" draggable="true"></a>
<p>20€</p>
</div>
<div class="draggableItem">
<a href="https://www.pccomponentes.com/forgeon-perdition-rgb-raton-gaming-16000-dpi-negro"
target="_blank"><img id="product13" class="product" title="Forgeon Perdition (26€)"
src="./img/mouse/mouse2.jpg" alt="product" draggable="true"></a>
<p>26€</p>
</div>
<div class="draggableItem">
<a href="https://www.pccomponentes.com/logitech-g203-lightsync-2nd-gen-raton-gaming-8000dpi-rgb-negro"
target="_blank"><img id="product14" class="product"
title="Logitech G203 Lightsync (22€)" src="./img/mouse/mouse3.jpg" alt="product"
draggable="true"></a>
<p>22€</p>
</div>
</div>
</div>
<!--TECLADOS-->
<div class="container">
<p class="title">KEYBOARD</p>
<div class="draggableRow">
<div class="draggableItem">
<a href="https://www.pccomponentes.com/tempest-diablo-teclado-mecanico-gaming-rgb-switch-red"
target="_blank"> <img id="product15" class="product" title="Tempest Diablo (45€)"
src="./img/keyboard/keyb1.jpg" alt="product" draggable="true"></a>
<p>45€</p>
</div>
<div class="draggableItem">
<a href="https://www.pccomponentes.com/newskill-serike-v2-tkl-teclado-mecanico-gaming-rgb-blanco-newswitch-red"
target="_blank"> <img id="product16" class="product"
title="Newskill Serike V2 TKL (80€)" src="./img/keyboard/keyb2.jpg" alt="product"
draggable="true"></a>
<p>80€</p>
</div>
<div class="draggableItem">
<a href="https://www.pccomponentes.com/tempest-k20-beast-teclado-mecanico-gaming-rgb-tkl-negro"
target="_blank"> <img id="product17" class="product" title="Tempest K20 Beast (55€)"
src="./img/keyboard/keyb3.jpg" alt="product" draggable="true"></a>
<p>55€</p>
</div>
</div>
</div>
</div>
</div>
<!--BLOQUE ZONA DE LA DERECHA-->
<div class="rightZone">
<div id="intro">
<p>
Have you ever thought about which elements should have your dreamed pc? Now you can simulate
it!<br>
Hold your mouse over the product to see the info and then... Just try to drag and drop some of these
elements in the shopping cart to see the final price!<br>
(To delete something from CART you must drop the product in the original place).
</p>
</div>
<!--BLOQUE DE CESTA DE LA COMPRA-->
<div id="cart">
<p>SHOPPING CART</p>
<div id="selectedGrid">
<img id="cart0" class="cartProduct" src="./img/product.png" title="" alt="product" draggable="true">
<img id="cart1" class="cartProduct" src="./img/product.png" title="" alt="product" draggable="true">
<img id="cart2" class="cartProduct" src="./img/product.png" title="" alt="product" draggable="true">
<img id="cart3" class="cartProduct" src="./img/product.png" title="" alt="product" draggable="true">
<img id="cart4" class="cartProduct" src="./img/product.png" title="" alt="product" draggable="true">
<img id="cart5" class="cartProduct" src="./img/product.png" title="" alt="product" draggable="true">
</div>
</div>
<!--BLOQUE TICKET-->
<div id="ticket">
<p class="ticketTitle">TICKET</p>
<p>Selected products: </p>
<div id="ticketList"></div>
<div class="total">
<p>Total... <span id="totalPrice">0</span> €</p>
</div>
</div>
</div>
</main>
<!--BLOQUE CRÉDITOS-->
<footer>
<p>Project proposed by Mastermind courses (HTML, CSS & JS course), created and designed by Inma Quesada.</p>
<p>Info from all products taken from
<a href="https://www.pccomponentes.com/" target="_blank">PC Componentes.</a>
</p>
</footer>
<!--AÑADIMOS CÓDIGO JS-->
<script defer src="./javascript/DragDropTouch.js"></script>
<script defer src="./javascript/app.js"></script>
</body>
</html>