-
Notifications
You must be signed in to change notification settings - Fork 1
/
console.html
126 lines (122 loc) · 8.47 KB
/
console.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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Ps5</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/console.css">
</head>
<body>
<div id="loadingScreen" class="loadingScreen">
<div class="loadingCon">
<div class="logoClip">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400.53 80.19"><path id="Path_10" data-name="Path 10" d="M322.94,79.84h79.88V0H322.94Zm16-63.9h47.92V63.86H338.92Z" transform="translate(-2.29 0.35)"/><path id="Path_5" data-name="Path 5" d="M257.92-.35a39.94,39.94,0,1,0,39.94,39.94h0A40,40,0,0,0,257.92-.35Zm0,63.9a24,24,0,1,1,24-24,24,24,0,0,1-24,24Z" transform="translate(-2.29 0.35)"/><path id="Path_6" data-name="Path 6" d="M2.29,79.65H93.72L48-.35Zm27.53-16L48,31.85,66.19,63.67Z" transform="translate(-2.29 0.35)"/><path id="Path_8" data-name="Path 8" d="M125,78.66l28-28,27.95,28,11.3-11.3-28-28,28-27.95L180.92.15,153,28.11l-28-28-11.3,11.3,28,28-28,28Z" transform="translate(-2.29 0.35)"/></svg>
</div>
<div class="logoVierkant">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400.53 80.19"><path id="Path_10" data-name="Path 10" d="M322.94,79.84h79.88V0H322.94Zm16-63.9h47.92V63.86H338.92Z" transform="translate(-2.29 0.35)"/></svg>
</div>
</div>
</div>
<div class="stapTerugWrap geluidje">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#fff" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg>
<button type="button" name="button" class="terugBtn">Vorige stap</button>
</div>
<div class="cutomizeWrap" >
<div class="cutomizePreview" id="cutomizePreview" >
<div class="cutomizePreviewAchtergrond" ></div>
<div id="cutomizePreviewItem" >
<div class="previewItemImg"></div>
<svg version="1.1" class="previewItemLaag1" id="itemLaagPrim" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 960 560" xml:space="preserve">
<path class="st2" d="M678.7,496.6c-0.5-12.2-0.5-204.2-0.4-469.1c-0.1-0.2-0.3-0.5-0.5-0.8c-2.7-4.4-2.4-6.8-3.7-9.1
c-0.8-1.5-3.7-3.1-9.3-6.2c-5-2.7-7.4-3.9-7.2-3.9c1.3,0.4,2.6,0.8,3.8,1.2c-3.8-1.4-7.6-2.7-11.5-4.1c-17.5,2.7-35.1,5.5-52.6,8.2
c-1.3-0.6-2.5-1.2-3.8-1.8c-0.5-0.4-1.2-0.8-2.1-1.1c-2.2-0.7-4.1-0.3-4.9,0c-94,15.7-188.1,31.3-282.1,47c-2.4,1.3-4.2,2.7-5.7,3.5
c-1.1,0.6-3.1,1.8-4.7,4.1c-1.4,1.9-1.9,3.8-2.2,4.9c-0.3,2.6-0.7,5.1-1,7.7c-0.6,132.5-1.2,265-1.8,397.5c2.6,5,5.2,9.9,7.7,14.9
c4.7,3.2,9.4,6.4,14.2,9.7C420,510,529.1,520.9,638.1,531.7c2.5,0.2,4.9,0.5,7.4,0.7c2.3-1,4.7-2,7-3c5.6-2.4,11.3-4.7,16.8-6.9
c1.9-1.9,4.1-4.6,5.9-8.2C679.4,506.3,678.8,498.5,678.7,496.6z M432.7,240.8c1.2-4.6,3-5.1,4.3-4c1.3,1.1,2.2,4,2.2,4l6.8,21
l-4.8,0.1l-5-15.4c-0.6-1.8-1.3-2-1.7-0.6c-0.4,1.4-0.2,4,0.3,5.8l3.3,10.3l-5,0.1l-0.2-0.6c0,0-1-3-1.4-7.2
C431,250,431.4,244.8,432.7,240.8z M441,290.9c-1.1,4.7-3.4,5.5-4.8,3.4c-1.3-1.9-2.3-5.3-2.3-5.3l-4.4-13.7l4.8-0.1l3.2,9.9
c0.6,1.7,1.3,2,1.7,0.6c0.4-1.4,0.2-4-0.3-5.8l-1.6-4.7l4.3-0.1c0.1,0.3,0.1,0.6,0.2,0.9C442.6,280.8,442.4,285.9,441,290.9z
M444,273.2l-36.6,0.5c0.6-4.1,2.1-10.1,2.9-13.3c2.3-8.2,5.2-11,12-11.1c6.6-0.1,9.1,4.6,6.7,10.6l-12.3,0.2
c-1.4,0-2.8,0.3-3.1,1.9c-0.3,1.2,0.7,1.9,2.1,1.9l30.7-0.4L444,273.2z"/>
</svg>
<svg version="1.1" class="previewItemLaag2" id="itemLaagSecnd" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 960 560" xml:space="preserve">
<path class="st0" d="M677.9,519.1c-1.4,0.5-3.1,1.2-5,2.1c2.5-1,5-2,7.5-3C679.6,518.5,678.8,518.7,677.9,519.1z"/>
<path class="st1" d="M680.3,518.2c0.7-0.3,1.4-0.5,2.1-0.8c1.1-0.5,2.1-1.1,3.1-2.1c1.5-1.5,2.3-3,3.2-5.1c0.1-0.1,0.1-0.3,0.2-0.4
c0.5-1.4,1-2.7,1.5-4.1c0.4-1.5,0.8-3.2,1.1-5.1c0.1-14.8,0.2-37.6,0.2-65.4c0-4.1,0-8,0-11.7c-0.5-115.1-1-230.1-1.5-345.2
c0-2.7-0.1-5.4-0.1-8.2c-0.2-14.4-0.4-26.1-0.5-33.4c-0.2-2.4-0.7-5.3-1.8-8.5c-0.6-1.7-1.2-3.3-1.8-4.7c-0.5-1-1.3-2.5-2.6-4
c-2.6-3-5.6-4.6-11.7-7.1c-0.4-0.2-0.9-0.3-1.3-0.5c-3-1.1-6.1-2.2-9.1-3.3c-1.2-0.4-2.5-0.8-3.8-1.2c-0.2-0.1,2.2,1.1,7.2,3.9
c5.7,3.1,8.5,4.7,9.3,6.2c1.3,2.3,1,4.7,3.7,9.1c0.2,0.3,0.4,0.6,0.5,0.8c-0.1,264.9-0.1,456.9,0.4,469.1c0.1,1.9,0.6,9.7-3.5,17.7
c-1.8,3.6-4,6.3-5.9,8.2c1.2-0.5,2.4-0.9,3.5-1.4c2-0.9,3.7-1.6,5-2.1C678.8,518.7,679.6,518.5,680.3,518.2z"/>
</svg>
</div>
</div>
</div>
<div class="cutomizeSection" id="cutomizeSection" >
<div class="cutomizeSectionContainer">
<div class="cutomizeVoortgangWrap">
<div class="voortgangSlider">
<div class="voortgangInnerSlider"></div>
</div>
<div class="voortgangItems">
<div class="voortgangItemWrap">
<div class="voortgangItem" id="voortgangItem1"></div>
</div>
<div class="voortgangItemWrap">
<div class="voortgangItem" id="voortgangItem2"></div>
</div>
<div class="voortgangItemWrap">
<div class="voortgangItem" id="voortgangItem3"></div>
</div>
<div class="voortgangItemWrap">
<div class="voortgangItem" id="voortgangItem4"></div>
</div>
</div>
</div>
<h1>PS5 Console</h1>
<p>Selecteer de kleuren die je op je console wil hebben.</p>
<div class="custVlakWrap" >
<div class="custVlakHead geluidje" id="primWrap">
<div class="kleurSelected" id="kleurSelecPrim"></div>
<h2>Primary color</h2>
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg>
</div>
<div class="custVlakBody" id="primBody">
</div>
</div>
<div class="custVlakWrap" >
<div class="custVlakHead geluidje" id="secndWrap">
<div class="kleurSelected" id="kleurSelecSecnd"></div>
<h2>Secondary color</h2>
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg>
</div>
<div class="custVlakBody" id="secndBody">
</div>
</div>
<button type="button" name="button" class="volgendeBtn geluidje">Volgende stap</button>
</div>
</div>
</div>
<div class="menuWrap">
<div id="menuContainer" class="menuContainer">
<div id="menuBg" class="menuBg"></div>
<div id="menuBgRight"></div>
<ul>
<li class="navBtn"><a href="#">FAQ</a></li>
<li class="navBtn"><a href="#">Hoe werkt het?</a></li>
<li class="navBtn"><a href="#">Support</a></li>
<li class="navBtn"><a href="#">Demo's</a></li>
</ul>
</div>
<div id="menuIcon" class="menuIcon">
<div class="menuIconEl"></div>
<div class="menuIconEl"></div>
<div class="menuIconEl"></div>
</div>
<div class="menuItems"></div>
</div>
<script src="js/index.js"></script>
<script src="js/console.js"></script>
</body>
</html>