-
Notifications
You must be signed in to change notification settings - Fork 1
/
controller.html
127 lines (119 loc) · 13.6 KB
/
controller.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
<!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/controller.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" class="terugBtn" name="button">Vorige stap</button>
</div>
<div class="cutomizeWrap" >
<div class="cutomizePreview" id="cutomizePreview" >
<div class="cutomizePreviewAchtergrond" ></div>
<div id="cutomizePreviewItem" >
<div class="previewItemImg"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 528.6 341.05" class="previewItemLaag1" id="itemLaagPrim"><g id="Laag_2" data-name="Laag 2"><g id="Laag_1-2" data-name="Laag 1"><path d="M528.43,240.36c-.85-24.94-1.68-49.46-8.2-82.83-6.37-32.52-14.78-56.29-20.68-72.74a568.73,568.73,0,0,0-26-61,303.1,303.1,0,0,0-80-16.83,4.12,4.12,0,0,1-1.46,1.94c-2,1.44-4.55.28-4.67.22-14.33-2.16-32-4.44-52.33-6.16A678.7,678.7,0,0,0,263.66.08c-38.4.63-105.3,5.45-114.47,8.12-1.25.36-5.05,1.74-9.15.67-1.34-.35-4.84-1.51-4.85-1.52C95,13.7,85.68,15.75,85.68,15.75,72.17,18.7,55.39,23.06,55.2,23.11c-.42,1-18.79,40.25-31.4,78.58A480.43,480.43,0,0,0,6.11,174.3a449.25,449.25,0,0,0-6,79.85c.2,10.3.75,18.9,1.24,25a114.88,114.88,0,0,0,7.76,31.68c3.48,8.61,6.57,16,14.12,22.25,1.5,1.24,13.65,11.1,21.4,7a10.21,10.21,0,0,0,4.25-4.85c6.67-13.86,15.5-42.23,17-47.06,4-11.76,9.21-25.9,15.86-41.72,8.59-20.46,16-35.09,23-48.82,10.6-20.9,16-31.54,23-40.68,11.69-15.5,18.56-23.37,18.56-23.37,5.68-6.49,10.25-11.19,15-19.61,3-5.21,5.25-9.26,6.44-15.07,1.42-7,.3-11.82-2.77-25.94-3.81-17.58-5.59-26.4-5.71-26.78-.52-1.56-6.13-18.44-5.63-27.67a10.37,10.37,0,0,1,2.17-6.22,9.86,9.86,0,0,1,5-3.08,34.62,34.62,0,0,0-1.51,11.51c.22,5.37,1.68,9,2.91,12.83.64,2,1.81,8.17,4.14,20.54,5,26.6,5.08,31.06,9,40.56,3.62,8.75,6.59,12.26,10,14.6,6.36,4.3,13.41,4,16.92,3.89,13.75-.46,32.44-.2,56.66.41l67.81-.83a24.37,24.37,0,0,0,14.18-2.3,24.64,24.64,0,0,0,9.52-8.89c3.28-5,2.94-7.83,7-23,1.3-4.93,1.18-4,2.42-8.69,3.66-13.83,3.07-15.78,6.13-28.86,3.22-13.79,5.74-19.61,3.34-28.58-.25-1-.51-1.74-.69-2.25a6.29,6.29,0,0,1,4.22,1.16,6.67,6.67,0,0,1,2.23,4.37c1.11,6.15-.62,12.75-1.59,16.54s-1.65,7.75-2.79,11.54C363.51,67.17,359.51,81,362.08,96.2a50.81,50.81,0,0,0,4.28,14c3,6.23,6.13,9.26,13.41,18.25,3.72,4.61,7.19,9.41,10.84,14.07C402,157,417.14,182,429.89,208.23c3.51,7.22.5,1.61,18.78,43.6,7.82,18,12.58,28.68,17.73,44.44,3.38,10.34,5.66,19,7.09,24.83.17.84,3.48,16.37,13.78,18.94s20.07-9.76,24.37-15.21c6.55-8.29,10.48-18,13.59-36.07A234.42,234.42,0,0,0,528.43,240.36ZM85.66,60a5.73,5.73,0,0,1,1.67-4,5.86,5.86,0,0,1,4-1.67,40.45,40.45,0,0,1,15.73,0A5.71,5.71,0,0,1,112.81,60V74.52a5.72,5.72,0,0,1-1.65,4l-7.87,7.93a5.7,5.7,0,0,1-8.11,0l-7.87-7.93a5.76,5.76,0,0,1-1.65-4Zm-4.58,48a5.72,5.72,0,0,1-4,1.65H62.58a5.72,5.72,0,0,1-4-1.67,5.86,5.86,0,0,1-1.67-4,40.45,40.45,0,0,1,0-15.73,5.71,5.71,0,0,1,5.71-5.71H77.06a5.73,5.73,0,0,1,4,1.66L89,92a5.7,5.7,0,0,1,0,8.11Zm31.73,24.22a5.69,5.69,0,0,1-1.67,4,5.84,5.84,0,0,1-4,1.68,40.45,40.45,0,0,1-15.73,0,5.71,5.71,0,0,1-5.71-5.71V117.76a5.74,5.74,0,0,1,1.65-4l7.87-7.94a5.72,5.72,0,0,1,8.11,0l7.87,7.94a5.7,5.7,0,0,1,1.65,4ZM142.14,104a5.86,5.86,0,0,1-1.67,4,5.72,5.72,0,0,1-4,1.67H122a5.72,5.72,0,0,1-4-1.65L110,100.15A5.7,5.7,0,0,1,110,92l7.93-7.86a5.73,5.73,0,0,1,4-1.66h14.48a5.71,5.71,0,0,1,5.71,5.71,40.45,40.45,0,0,1,0,15.73Zm248.24,9.31A17.22,17.22,0,1,1,407.6,96.05,17.22,17.22,0,0,1,390.38,113.27Zm38.72,38.82a17.22,17.22,0,1,1,17.22-17.22A17.22,17.22,0,0,1,429.1,152.09Zm0-77.31a17.22,17.22,0,1,1,17.22-17.22A17.22,17.22,0,0,1,429.1,74.78Zm38.7,38.49A17.22,17.22,0,1,1,485,96.05,17.21,17.21,0,0,1,467.8,113.27Z"/></g></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 444.62 256.63" class="previewItemLaag2" id="itemLaagSecnd"><g id="Laag_2" data-name="Laag 2"><g id="Laag_1-2" data-name="Laag 1"><path d="M443.25,250.62c-10.3-2.57-13.61-18.1-13.77-18.94-1.43-5.83-3.72-14.49-7.1-24.83-5.15-15.75-9.91-26.46-17.73-44.43-18.28-42-15.27-36.38-18.78-43.61C373.12,92.58,358,67.59,346.6,53.07,343,48.41,339.47,43.61,335.75,39c-7.28-9-10.41-12-13.41-18.26a50.25,50.25,0,0,1-4.27-14,55.79,55.79,0,0,1-.7-6.51L317.24,0c-.27,2.49-1.93,15.23-13.15,23.88a34.49,34.49,0,0,1-18.78,7q-33,.06-66,0-34.34-.08-68.69-.27a31,31,0,0,1-19.85-11.27,30.09,30.09,0,0,1-6.17-16.1c-.13.21-.26.43-.4.64a27.75,27.75,0,0,1-.6,5.58c-1.18,5.81-3.48,9.87-6.43,15.07-4.78,8.42-9.35,13.12-15,19.61,0,0-4,4.6-11.11,13.66a113.9,113.9,0,0,0-12.09,15.6c-1.14,1.77-3.24,5.16-15.55,29.34l-2.77,5.45c-7,13.73-14.35,28.36-22.95,48.82C31,172.81,25.82,187,21.81,198.72c-1.49,4.83-10.31,33.19-17,47.05a10.24,10.24,0,0,1-4.24,4.85c-.19.1-.39.19-.58.27,4.67.36,8.53.92,11.44,1.44,5,.87,8,1.75,12,.7A18.37,18.37,0,0,0,32,247.66c4.57-12.16,20.46-53.94,35.68-84.25A62.1,62.1,0,0,1,80.32,146c3.6-3.47,16.78-16.14,36-15.84a45.07,45.07,0,0,1,17.71,4q73.25-.74,146.5-.81h34.61a31.93,31.93,0,0,1,10.47-3.48c13.25-1.92,24,5.5,28.44,8.58,19.21,13.28,27.05,36.57,33.54,55.81,6.15,18.26,15.32,35.41,21.47,53.67a13.08,13.08,0,0,0,4.56,6.71c4.78,3.42,11.21,1.88,20.85-.57a96.78,96.78,0,0,0,10.2-3.2A11.31,11.31,0,0,1,443.25,250.62ZM137,107.86a30.05,30.05,0,1,1,30-30A30.05,30.05,0,0,1,137,107.86Zm168.58,0a30.05,30.05,0,1,1,30-30A30,30,0,0,1,305.6,107.86Z"/></g></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 228.67 60.1" class="previewItemLaag3" id="itemLaagJoy"><g id="Laag_2" data-name="Laag 2"><g id="Laag_1-2" data-name="Laag 1"><circle cx="30.05" cy="30.05" r="30.05"/><circle cx="198.62" cy="30.05" r="30.05"/></g></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 428.93 111.75" class="previewItemLaag4" id="itemLaagBtn"><g id="Laag_2" data-name="Laag 2"><g id="Laag_1-2" data-name="Laag 1"><path d="M21,42.18H6.48A5.71,5.71,0,0,0,.77,47.89,41.31,41.31,0,0,0,0,55.36a40.71,40.71,0,0,0,.77,8.26,5.84,5.84,0,0,0,1.68,4,5.69,5.69,0,0,0,4,1.67H21a5.7,5.7,0,0,0,4-1.65l7.94-7.87a5.72,5.72,0,0,0,0-8.11L25,43.84A5.71,5.71,0,0,0,21,42.18Z" /><path d="M29.57,77.42V91.9a5.71,5.71,0,0,0,5.71,5.71,40.4,40.4,0,0,0,15.72,0,5.81,5.81,0,0,0,4-1.68,5.65,5.65,0,0,0,1.67-4V77.42a5.7,5.7,0,0,0-1.65-4L47.2,65.46a5.73,5.73,0,0,0-8.12,0L31.22,73.4A5.7,5.7,0,0,0,29.57,77.42Z"/><path d="M56.71,34.18V19.7A5.71,5.71,0,0,0,51,14a40.4,40.4,0,0,0-15.72,0,5.83,5.83,0,0,0-4,1.68,5.65,5.65,0,0,0-1.67,4V34.18a5.72,5.72,0,0,0,1.65,4l7.86,7.93a5.71,5.71,0,0,0,8.12,0l7.86-7.93A5.72,5.72,0,0,0,56.71,34.18Z" /><path d="M65.86,42.18H80.33A5.71,5.71,0,0,1,86,47.89a40.35,40.35,0,0,1,.78,7.47A39.93,39.93,0,0,1,86,63.62a5.81,5.81,0,0,1-1.67,4,5.7,5.7,0,0,1-4,1.67H65.86a5.7,5.7,0,0,1-4-1.65L53.9,59.81a5.72,5.72,0,0,1,0-8.11l7.94-7.86A5.71,5.71,0,0,1,65.86,42.18Z"/><circle cx="373.01" cy="17.22" r="17.22" /><circle cx="411.71" cy="55.71" r="17.22"/><circle cx="373.01" cy="94.53" r="17.22" /><circle cx="334.28" cy="55.71" r="17.22"/></g></g></svg>
</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 Controller</h1>
<p>Selecteer de kleuren die je op je controller 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>
<div class="custVlakWrap">
<div class="custVlakHead geluidje" id="thumbsWrap">
<div class="kleurSelected" id="kleurSelecThumb"></div>
<h2>Joysticks</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="thumbsBody">
</div>
</div>
<div class="custVlakWrap">
<div class="custVlakHead geluidje" id="btnWrap">
<div class="kleurSelected" id="kleurSelecBtn"></div>
<h2>Buttons</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="btnBody">
</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/controller.js"></script>
</body>
</html>