-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
117 lines (100 loc) · 6.21 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
<!DOCTYPE html>
<html>
<head>
<title>Car config</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<script src="js/three.js-master/build/three.js"></script>
<script src="js/three.js-master/examples/js/loaders/GLTFLoader.js"></script>
<script src="js/three.js-master/examples/js/loaders/DRACOLoader.js"></script>
<script src="js/three.js-master/examples/js/controls/OrbitControls.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/modal.css" media="screen,projection" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<div id="hide">
</div>
<div class="changerowcontainer">
<div class="row" id="changerow">
<canvas> </canvas>
<div id="bodyDiv" class="col s4">
<h4 class="body">Body color</h4>
<button type="button" id="colorbtn" name="button" class="btn-small waves-effect waves-light green darken-4" onclick="changeColorBody('green')">Green</button>
<button type="button" id="colorbtn" name="button" class="btn-small waves-effect waves-light blueLang indigo darken-3" onclick="changeColorBody('blue')">Blue</button>
<button type="button" id="colorbtn" name="button" class="btn-small waves-effect waves-light yellowLang lime darken-3" onclick="changeColorBody('yellow')">Yellow</button>
<button type="button" id="colorbtn" name="button" class="btn-small waves-effect waves-light red darken-4" onclick="changeColorBody('red')">Red</button>
</div>
<div id="rimDiv"class="col s4">
<h4 class="rim">Rim color</h4>
<button type="button" id="colorbtn" name="button" class="btn-small waves-effect waves-light green darken-4" onclick="changeColorRim('green')">Green</button>
<button type="button" id="colorbtn" name="button" class="btn-small waves-effect waves-light blueLang indigo darken-3" onclick="changeColorRim('blue')">Blue</button>
<button type="button" id="colorbtn" name="button" class="btn-small waves-effect waves-light yellowLang lime darken-3" onclick="changeColorRim('yellow')">Yellow</button>
<button type="button" id="colorbtn" name="button" class="btn-small waves-effect waves-light red darken-4" onclick="changeColorRim('red')">Red</button>
<button type="button" id="colorbtn" name="button" class="btn-small waves-effect waves-light black" onclick="changeColorRim('black')">black</button>
</div>
<div id="leatherDiv" class="col s4">
<h4 class="leather">Leather color </h4>
<button type="button" id="colorbtn" name="button" class="btn-small waves-effect waves-light white whitecolor" style="color: black" onclick="changeColorLeather(0xffffff)">White</button>
<button type="button" id="colorbtn" name="button" class="btn-small waves-effect waves-light grey" onclick="changeColorLeather('grey')">Grey</button>
<button type="button" id="colorbtn" name="button" class="btn-small waves-effect waves-light black" onclick="changeColorLeather(0x7a797a)">Black</button>
</div>
<div id="detailsDiv" class="col s4">
<h4 class="details">Details color </h4>
<button type="button" id="colorbtn" name="button" class="btn-small waves-effect waves-light green darken-4" onclick="changeColorSmall('green')">Green</button>
<button type="button" id="colorbtn" name="button" class="btn-small waves-effect waves-light blueLang indigo darken-3" onclick="changeColorSmall('blue')">Blue</button>
</div>
</div>
</div>
<div id="langundoredobuttonscontainer">
<div id="langundoredobuttons">
<div class="col s4">
<h4 class="language"></h4>
<button type="button" id="langbtn" name="button" class="btn-small waves-effect waves-light white english" style="color: black" onclick="setLanguage('en')">En</button>
<button type="button" name="button" class="btn-small waves-effect waves-light white swedish" style="color: black" onclick="setLanguage('sv')">Se</button>
</div>
<div class="col s4">
<h4 class="undoredo"></h4>
<button type="button" id="undoredobtn" name="button" onclick="undo()"><i class="material-icons">undo</i></button>
<button type="button" id="undoredobtn" name="button" onclick="redo()"><i class="material-icons">redo</i></button>
</div>
<div class="col s4">
<!-- Trigger/Open The Modal -->
<button id="myBtn" class="undoredobtn" onclick="openModal()"><i class="material-icons">help_outline</i></button>
<!---
<embed src="takeFive.mp3" id="songbtn" loop="true" width="50" height="50"></embed>
-->
</div>
</div>
<canvas id="c"></canvas>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div id="modal-content" class="modal-content">
<span class="close">×</span>
<h4 id="modal-welcome" class="modal-welcome">Welcome to Car Configurator</h4>
<p id="modal-text" class="modal-text">Here you have the chance to visualize your dream car. We have lots of colors to choose
from. Click on the color you like best and check the car when it gets your newly chosen color.</p>
<button id="next" class="btn" onclick="nextBody()">Next</button>
</div>
</div>
</div>
<!--
<embed src="havet-ar-djupt.mp3" autostart="true" loop="true" width="2" height="0">
</embed>
-->
<!-- Importing the modal script -->
<script src="js/modal.js"></script>
<!-- Importing the language script -->
<script src="js/language.js"></script>
<!-- importing the model -->
<script src="js/car.js"></script>
</body>
</html>