Compare View

switch
from
...
to
 
Commits (6)
@@ -42,46 +42,47 @@ @@ -42,46 +42,47 @@
42 <script src="js/Constants.js"></script> 42 <script src="js/Constants.js"></script>
43 43
44 </head> 44 </head>
45 -<body onload="main()">  
46 - <canvas id="renderCanvas"></canvas>  
47 - <a id="inputTabFix" href="" onClick="return false;"></a> 45 + <body onload="main()">
  46 + <canvas id="renderCanvas"></canvas>
  47 + <a id="inputTabFix" href="" onClick="return false;"></a>
48 48
49 - <!--<div id="moduleMenu">  
50 - <table id="moduleMenuRow1">  
51 - <tr>  
52 - <th class="moduleMenuHeader" colspan="6">Stolper</th>  
53 - </tr>  
54 - <tr>  
55 - <td colspan="1"></td>  
56 - <td colspan="1"></td>  
57 - <td colspan="1"></td>  
58 - <td colspan="1"></td>  
59 - <td colspan="1"></td>  
60 - <td colspan="1"></td>  
61 - </tr>  
62 - <tr>  
63 - <td class="poleButtonHeader" colspan="2">180* Stolpe</td>  
64 - <td class="poleButtonHeader" colspan="2">Endestolpe</td>  
65 - <td class="poleButtonHeader" colspan="2">Veggfeste</td>  
66 - </tr>  
67 - <tr>  
68 - <td class="poleButtonContainer" colspan="2"><input class="poleButton" type="image" src="images/menu_pole_180.png" onmousedown="addPoleFromMenu('180')" ondragstart="return false"/></td>  
69 - <td class="poleButtonContainer" colspan="2"><input class="poleButton" type="image" src="images/menu_pole_end.png" onmousedown="addPoleFromMenu('end')" ondragstart="return false"/></td>  
70 - <td class="poleButtonContainer" colspan="2"><input class="poleButton" type="image" src="images/menu_pole_end.png" onmousedown="addPoleFromMenu('wall')" ondragstart="return false"/></td>  
71 - </tr>  
72 - <tr>  
73 - <td colspan="1"></td>  
74 - <td class="poleButtonHeader" colspan="2">90* Stolpe</td>  
75 - <td class="poleButtonHeader" colspan="2">45* Stolpe</td>  
76 - <td colspan="1"></td>  
77 - </tr>  
78 - <tr>  
79 - <td colspan="1"></td>  
80 - <td class="poleButtonContainer" colspan="2"><input class="poleButton" type="image" src="images/menu_pole_90.png" onmousedown="addPoleFromMenu('90')" ondragstart="return false"/></td>  
81 - <td class="poleButtonContainer" colspan="2"><input class="poleButton" type="image" src="images/menu_pole_135.png" onmousedown="addPoleFromMenu('45')" ondragstart="return false"/></td>  
82 - <td colspan="1"></td>  
83 - </tr>  
84 - </table>  
85 - <p class ="moduleMenuHeader" id="fpsCounter">fps: </p>-->  
86 -</body> 49 + <!--<div id="moduleMenu">
  50 + <table id="moduleMenuRow1">
  51 + <tr>
  52 + <th class="moduleMenuHeader" colspan="6">Stolper</th>
  53 + </tr>
  54 + <tr>
  55 + <td colspan="1"></td>
  56 + <td colspan="1"></td>
  57 + <td colspan="1"></td>
  58 + <td colspan="1"></td>
  59 + <td colspan="1"></td>
  60 + <td colspan="1"></td>
  61 + </tr>
  62 + <tr>
  63 + <td class="poleButtonHeader" colspan="2">180* Stolpe</td>
  64 + <td class="poleButtonHeader" colspan="2">Endestolpe</td>
  65 + <td class="poleButtonHeader" colspan="2">Veggfeste</td>
  66 + </tr>
  67 + <tr>
  68 + <td class="poleButtonContainer" colspan="2"><input class="poleButton" type="image" src="images/menu_pole_180.png" onmousedown="addPoleFromMenu('180')" ondragstart="return false"/></td>
  69 + <td class="poleButtonContainer" colspan="2"><input class="poleButton" type="image" src="images/menu_pole_end.png" onmousedown="addPoleFromMenu('end')" ondragstart="return false"/></td>
  70 + <td class="poleButtonContainer" colspan="2"><input class="poleButton" type="image" src="images/menu_pole_end.png" onmousedown="addPoleFromMenu('wall')" ondragstart="return false"/></td>
  71 + </tr>
  72 + <tr>
  73 + <td colspan="1"></td>
  74 + <td class="poleButtonHeader" colspan="2">90* Stolpe</td>
  75 + <td class="poleButtonHeader" colspan="2">45* Stolpe</td>
  76 + <td colspan="1"></td>
  77 + </tr>
  78 + <tr>
  79 + <td colspan="1"></td>
  80 + <td class="poleButtonContainer" colspan="2"><input class="poleButton" type="image" src="images/menu_pole_90.png" onmousedown="addPoleFromMenu('90')" ondragstart="return false"/></td>
  81 + <td class="poleButtonContainer" colspan="2"><input class="poleButton" type="image" src="images/menu_pole_135.png" onmousedown="addPoleFromMenu('45')" ondragstart="return false"/></td>
  82 + <td colspan="1"></td>
  83 + </tr>
  84 + </table>
  85 + <p class ="moduleMenuHeader" id="fpsCounter">fps: </p>-->
  86 +
  87 + </body>
87 </html> 88 </html>
88 \ No newline at end of file 89 \ No newline at end of file
@@ -48,23 +48,35 @@ @@ -48,23 +48,35 @@
48 48
49 <div id="layoutSelection"> 49 <div id="layoutSelection">
50 <div class="centeredContent"> 50 <div class="centeredContent">
51 - <div class="headline">Velg utforming på terrasse</div> 51 + <div class="headline">Velg utforming på din terrasse</div>
52 <div class="preamble">I neste steg kan du legge inn sidemål</div> 52 <div class="preamble">I neste steg kan du legge inn sidemål</div>
53 - <div id="divider"></div>  
54 - <div id="row1"> 53 +
  54 + <div id="layoutRow">
55 <input id="btLayout1" class="layoutButton" type="image" src="images/terrace_square.png"> 55 <input id="btLayout1" class="layoutButton" type="image" src="images/terrace_square.png">
56 <input id="btLayout2" class="layoutButton" type="image" src="images/terrace_l_shape.png"> 56 <input id="btLayout2" class="layoutButton" type="image" src="images/terrace_l_shape.png">
57 <input id="btLayout3" class="layoutButton" type="image" src="images/terrace_triangle.png"> 57 <input id="btLayout3" class="layoutButton" type="image" src="images/terrace_triangle.png">
58 <input id="btLayout4" class="layoutButton" type="image" src="images/terrace_diamond.png"> 58 <input id="btLayout4" class="layoutButton" type="image" src="images/terrace_diamond.png">
59 </div> 59 </div>
  60 +
  61 + <button id="btNext"><span>Neste</span></button>
  62 +
60 </div> 63 </div>
61 </div> 64 </div>
62 65
63 - <button id="btNext">Neste</button> 66 + <div id="layout1" style="visibility: hidden">
  67 + <div class="centeredContent">
  68 + <div class="headline">Oppgi sidelengder på din terrasse</div>
  69 +
  70 +
  71 + </div>
  72 + </div>
  73 +
  74 +
64 75
65 <canvas id="renderCanvas"> 76 <canvas id="renderCanvas">
66 Denne nettleseren støtter ikke "canvas"-elementet! 77 Denne nettleseren støtter ikke "canvas"-elementet!
67 </canvas> 78 </canvas>
  79 +
68 <a id="inputTabFix" href="" onClick="return false;"></a> 80 <a id="inputTabFix" href="" onClick="return false;"></a>
69 81
70 </div> 82 </div>
@@ -84,6 +84,10 @@ class Glass { @@ -84,6 +84,10 @@ class Glass {
84 } 84 }
85 } 85 }
86 86
  87 + isMesh(mesh) {
  88 + return mesh === this.glass || mesh === this.handrail;
  89 + }
  90 +
87 getYRotation() { 91 getYRotation() {
88 return this.mesh.rotationQuaternion.toEulerAngles().y; 92 return this.mesh.rotationQuaternion.toEulerAngles().y;
89 } 93 }
@@ -119,7 +123,6 @@ class Glass { @@ -119,7 +123,6 @@ class Glass {
119 } 123 }
120 124
121 delete() { 125 delete() {
122 - // TODO: Hva skjer med segment på stolpe?  
123 this.removeSegment(); 126 this.removeSegment();
124 this.dispose(); 127 this.dispose();
125 } 128 }
@@ -128,28 +131,7 @@ class Glass { @@ -128,28 +131,7 @@ class Glass {
128 if(x === 0 && z === 0) { 131 if(x === 0 && z === 0) {
129 return false; 132 return false;
130 } 133 }
131 - if(this.end1.connectedMesh && this.end2.connectedMesh) {  
132 - return false;  
133 - }  
134 - else if(this.end1.connectedMesh) {  
135 - if(Math.abs(x) > 70 || Math.abs(z) > 70) {  
136 - removeConnection(this.end1.connectedMesh, this.end1);  
137 - this.removeSegment();  
138 - }  
139 - else {  
140 - return false;  
141 - }  
142 - }  
143 - else if(this.end2.connectedMesh) {  
144 - if(Math.abs(x) > 70 || Math.abs(z) > 70) {  
145 - removeConnection(this.end2.connectedMesh, this.end2);  
146 - this.removeSegment();  
147 - }  
148 - else {  
149 - return false;  
150 - }  
151 - }  
152 - return true; 134 + return !(this.end1.connectedMesh || this.end2.connectedMesh);
153 } 135 }
154 136
155 translate(x, z) { 137 translate(x, z) {
@@ -158,8 +140,8 @@ class Glass { @@ -158,8 +140,8 @@ class Glass {
158 return; 140 return;
159 } 141 }
160 142
161 - var minDistanceToEdgeX = 0;  
162 - var minDistanceToEdgeZ = 0; 143 + var minDistanceToEdgeX = 19;
  144 + var minDistanceToEdgeZ = 19;
163 var rayXZLength = 150; 145 var rayXZLength = 150;
164 146
165 var yRot = this.getYRotation(); 147 var yRot = this.getYRotation();
@@ -252,7 +234,7 @@ class Glass { @@ -252,7 +234,7 @@ class Glass {
252 } 234 }
253 235
254 placeGlassOnPole(pole) { 236 placeGlassOnPole(pole) {
255 - if(pole.getChildren().length === 1) { 237 + if(pole.containerClass.type === POLE_END || pole.containerClass.type === WALL_MOUNT) {
256 this.attachGlassToHolder(pole.getChildren()[0]); 238 this.attachGlassToHolder(pole.getChildren()[0]);
257 } 239 }
258 else { 240 else {
@@ -326,7 +308,6 @@ class Glass { @@ -326,7 +308,6 @@ class Glass {
326 this.mesh.position = holder.absolutePosition.clone(); 308 this.mesh.position = holder.absolutePosition.clone();
327 var rotation = holder.rotationQuaternion.multiply(holder.parent.rotationQuaternion) 309 var rotation = holder.rotationQuaternion.multiply(holder.parent.rotationQuaternion)
328 .multiply(closestEnd.rotationQuaternion); 310 .multiply(closestEnd.rotationQuaternion);
329 - // TODO: Finn riktig offset på holdere.  
330 if(holder.name === "pole135.holder1") { 311 if(holder.name === "pole135.holder1") {
331 rotation.multiplyInPlace(new BABYLON.Quaternion(0, -0.9238795325112866, 0, 0.3826834323650897)); 312 rotation.multiplyInPlace(new BABYLON.Quaternion(0, -0.9238795325112866, 0, 0.3826834323650897));
332 } 313 }
@@ -346,7 +327,6 @@ class Glass { @@ -346,7 +327,6 @@ class Glass {
346 } 327 }
347 this.mesh.markAsDirty(); 328 this.mesh.markAsDirty();
348 this.onTerrace = true; 329 this.onTerrace = true;
349 - console.log("hei");  
350 330
351 setTimeout(() => { 331 setTimeout(() => {
352 this.checkForSegment(holder); 332 this.checkForSegment(holder);
js/MeshControls.js
@@ -104,15 +104,8 @@ class MeshControls { @@ -104,15 +104,8 @@ class MeshControls {
104 104
105 onPointerDown() { 105 onPointerDown() {
106 var pickInfo = scene.pick(scene.pointerX, scene.pointerY, (mesh) => { 106 var pickInfo = scene.pick(scene.pointerX, scene.pointerY, (mesh) => {
107 - if (this.meshClass instanceof Glass) {  
108 - if (mesh === this.meshClass.glass || mesh === this.meshClass.handrail) {  
109 - return true;  
110 - }  
111 - }  
112 - else {  
113 - if (mesh === this.meshClass.mesh || mesh === this.meshClass.mesh.getChildren()[1]) {  
114 - return true;  
115 - } 107 + if(this.meshClass.isMesh(mesh)) {
  108 + return true;
116 } 109 }
117 }); 110 });
118 111
@@ -100,7 +100,7 @@ class Segment { @@ -100,7 +100,7 @@ class Segment {
100 100
101 if(this.lengthTextPlane) { 101 if(this.lengthTextPlane) {
102 this.lengthTextPlane.material.diffuseTexture.getContext().clearRect(0, 0, 128, 32); 102 this.lengthTextPlane.material.diffuseTexture.getContext().clearRect(0, 0, 128, 32);
103 - this.lengthTextPlane.material.diffuseTexture.drawText(length.toFixed(2) + "mm", 0, 26, "20px Verdana", "red", "white"); 103 + this.lengthTextPlane.material.diffuseTexture.drawText(length.toFixed(2) + "mm", 0, 26, "19px Verdana", "red", "white");
104 this.lengthTextPlane.position = new BABYLON.Vector3(planeX, 5, planeZ); 104 this.lengthTextPlane.position = new BABYLON.Vector3(planeX, 5, planeZ);
105 105
106 if(ends.dir === "x") { 106 if(ends.dir === "x") {
@@ -156,7 +156,7 @@ class Segment { @@ -156,7 +156,7 @@ class Segment {
156 else { 156 else {
157 var dt = new BABYLON.DynamicTexture("segmentText", {width: 128, height: 32}, scene); 157 var dt = new BABYLON.DynamicTexture("segmentText", {width: 128, height: 32}, scene);
158 dt.hasAlpha = true; 158 dt.hasAlpha = true;
159 - dt.drawText(length.toFixed(2) + "mm", 0, 26, "20px Verdana", "red", "white"); 159 + dt.drawText(length.toFixed(2) + "mm", 0, 26, "19px Verdana", "red", "white");
160 160
161 this.lengthTextPlane = BABYLON.MeshBuilder.CreatePlane("segmentTextPlane", {width: 512, height: 128}, scene); 161 this.lengthTextPlane = BABYLON.MeshBuilder.CreatePlane("segmentTextPlane", {width: 512, height: 128}, scene);
162 this.lengthTextPlane.material = new BABYLON.StandardMaterial("segmentPlaneMat2", scene); 162 this.lengthTextPlane.material = new BABYLON.StandardMaterial("segmentPlaneMat2", scene);
@@ -279,13 +279,19 @@ class Segment { @@ -279,13 +279,19 @@ class Segment {
279 } 279 }
280 280
281 addElement(mesh, connectedMesh) { 281 addElement(mesh, connectedMesh) {
282 - if(connectedMesh === this.elements[0]) {  
283 - this.elements.unshift(mesh); 282 + try {
  283 + if(connectedMesh === this.elements[0]) {
  284 + this.elements.unshift(mesh);
  285 + }
  286 + else if(connectedMesh === this.elements[this.elements.length - 1]) {
  287 + this.elements.push(mesh);
  288 + }
  289 + this.drawLength();
284 } 290 }
285 - else if(connectedMesh === this.elements[this.elements.length - 1]) {  
286 - this.elements.push(mesh); 291 + catch(e) {
  292 + console.log("Noe gikk galt");
  293 + console.log(e);
287 } 294 }
288 - this.drawLength();  
289 } 295 }
290 296
291 removeElement(meshId) { 297 removeElement(meshId) {
@@ -25,6 +25,8 @@ var glassEnds = []; @@ -25,6 +25,8 @@ var glassEnds = [];
25 var shoppingCart = []; 25 var shoppingCart = [];
26 var totalCost = 0; 26 var totalCost = 0;
27 27
  28 +var layoutSelected = undefined;
  29 +
28 function main() { 30 function main() {
29 canvas = document.getElementById("renderCanvas"); 31 canvas = document.getElementById("renderCanvas");
30 var engine = new BABYLON.Engine(canvas, true); 32 var engine = new BABYLON.Engine(canvas, true);
@@ -171,7 +173,6 @@ function onMouseMove(event) { @@ -171,7 +173,6 @@ function onMouseMove(event) {
171 } 173 }
172 else { 174 else {
173 pointerMeshClass.mesh.position = current; 175 pointerMeshClass.mesh.position = current;
174 - console.log(current);  
175 } 176 }
176 177
177 pointerMeshStartingPoint = current; 178 pointerMeshStartingPoint = current;
@@ -307,11 +308,13 @@ function addGlass(glass) { @@ -307,11 +308,13 @@ function addGlass(glass) {
307 308
308 function placeGlass(meshClass) { 309 function placeGlass(meshClass) {
309 meshControls.show(meshClass); 310 meshControls.show(meshClass);
  311 + meshClass.mesh.markAsDirty();
310 meshClass.collect(); 312 meshClass.collect();
311 } 313 }
312 314
313 function placePole(meshClass) { 315 function placePole(meshClass) {
314 meshControls.show(meshClass); 316 meshControls.show(meshClass);
  317 + meshClass.mesh.markAsDirty();
315 meshClass.collect(); 318 meshClass.collect();
316 } 319 }
317 320
@@ -489,17 +492,26 @@ function addEverything() { @@ -489,17 +492,26 @@ function addEverything() {
489 this.addToCart(glassTypes[i]); 492 this.addToCart(glassTypes[i]);
490 } 493 }
491 494
492 -/*  
493 function initButtons() { 495 function initButtons() {
494 - document.getElementById("btLayout1").onclick = function () { selectedLayout(1); };  
495 - document.getElementById("btLayout2").onclick = function () { selectedLayout(2); };  
496 - document.getElementById("btLayout3").onclick = function () { selectedLayout(3); };  
497 - document.getElementById("btLayout4").onclick = function () { selectedLayout(4); }; 496 + document.getElementById("btLayout1").onclick = function () { selectedLayout(1) };
  497 + document.getElementById("btLayout2").onclick = function () { selectedLayout(2) };
  498 + document.getElementById("btLayout3").onclick = function () { selectedLayout(3) };
  499 + document.getElementById("btLayout4").onclick = function () { selectedLayout(4) };
  500 + document.getElementById("btNext").onclick = function () { initLayoutMeasurements() };
498 } 501 }
499 502
500 function selectedLayout(num) { 503 function selectedLayout(num) {
501 - console.log("Layout #" + num + " selected.");  
502 -}*/ 504 + layoutSelected = num;
  505 +}
  506 +
  507 +function initLayoutMeasurements() {
  508 + if (layoutSelected) {
  509 + console.log("Layout " + layoutSelected + " selected.");
  510 + document.getElementById("layoutSelection").style.display = "none";
  511 + } else {
  512 + console.log("Layout not selected.");
  513 + }
  514 +}
503 515
504 // GUI 516 // GUI
505 517
@@ -60,7 +60,27 @@ class Pole { @@ -60,7 +60,27 @@ class Pole {
60 camera.setPerspectiveCameraTarget(this.mesh.position.clone(), 500); 60 camera.setPerspectiveCameraTarget(this.mesh.position.clone(), 500);
61 } 61 }
62 ) 62 )
63 - ) 63 + );
  64 +
  65 + if(this.type === WALL_MOUNT) {
  66 + var wall = this.mesh.getChildren()[1];
  67 + wall.actionManager = new BABYLON.ActionManager(scene);
  68 + wall.actionManager.registerAction(
  69 + new BABYLON.ExecuteCodeAction(
  70 + BABYLON.ActionManager.OnPickTrigger, () => {
  71 + if(meshControls.meshClass !== this) {
  72 + meshControls.show(this);
  73 + }
  74 +
  75 + camera.setPerspectiveCameraTarget(this.mesh.position.clone(), 500);
  76 + }
  77 + )
  78 + );
  79 + }
  80 + }
  81 +
  82 + isMesh(mesh) {
  83 + return mesh === this.mesh || (this.type === WALL_MOUNT && mesh === this.mesh.getChildren()[1]);
64 } 84 }
65 85
66 getYRotation() { 86 getYRotation() {
@@ -86,6 +106,9 @@ class Pole { @@ -86,6 +106,9 @@ class Pole {
86 106
87 updateHoverCursor(cursor) { 107 updateHoverCursor(cursor) {
88 this.mesh.actionManager.hoverCursor = cursor; 108 this.mesh.actionManager.hoverCursor = cursor;
  109 + if(this.type === WALL_MOUNT) {
  110 + this.mesh.getChildren()[1].actionManager.hoverCursor = cursor;
  111 + }
89 } 112 }
90 113
91 rotate(amount) { 114 rotate(amount) {
@@ -183,37 +206,13 @@ class Pole { @@ -183,37 +206,13 @@ class Pole {
183 } 206 }
184 if(this.type === POLE_END || this.type === WALL_MOUNT) { 207 if(this.type === POLE_END || this.type === WALL_MOUNT) {
185 if(this.holder1.connectedMesh) { 208 if(this.holder1.connectedMesh) {
186 - if(Math.abs(x) < 70 && Math.abs(z) < 70) {  
187 - return false;  
188 - }  
189 - else {  
190 - removeConnection(this.holder1, this.holder1.connectedMesh);  
191 - this.removeSegment(this.holder1);  
192 - } 209 + return false;
193 } 210 }
194 } 211 }
195 else { 212 else {
196 - if(this.holder1.connectedMesh && this.holder2.connectedMesh) { 213 + if(this.holder1.connectedMesh || this.holder2.connectedMesh) {
197 return false; 214 return false;
198 } 215 }
199 - else if(this.holder1.connectedMesh) {  
200 - if(Math.abs(x) > 70 || Math.abs(z) > 70) {  
201 - removeConnection(this.holder1, this.holder1.connectedMesh);  
202 - this.removeSegment(this.holder1);  
203 - }  
204 - else {  
205 - return false;  
206 - }  
207 - }  
208 - else if(this.holder2.connectedMesh) {  
209 - if(Math.abs(x) > 70 || Math.abs(z) > 70) {  
210 - removeConnection(this.holder2, this.holder2.connectedMesh);  
211 - this.removeSegment(this.holder2);  
212 - }  
213 - else {  
214 - return false;  
215 - }  
216 - }  
217 } 216 }
218 return true; 217 return true;
219 } 218 }
@@ -321,6 +320,7 @@ class Pole { @@ -321,6 +320,7 @@ class Pole {
321 addConnection(holder, glassEnd); 320 addConnection(holder, glassEnd);
322 321
323 this.mesh.markAsDirty(); 322 this.mesh.markAsDirty();
  323 + this.onTerrace = true;
324 324
325 setTimeout(() => { 325 setTimeout(() => {
326 this.checkForSegment(holder, glassEnd.parent); 326 this.checkForSegment(holder, glassEnd.parent);
js/pole/PoleProvider.js
@@ -257,7 +257,7 @@ class PoleProvider { @@ -257,7 +257,7 @@ class PoleProvider {
257 257
258 let holder1 = BABYLON.MeshBuilder.CreateBox("holder1", {size: 10}, scene); 258 let holder1 = BABYLON.MeshBuilder.CreateBox("holder1", {size: 10}, scene);
259 holder1.position.x -= 34.69; 259 holder1.position.x -= 34.69;
260 - holder1.position.y -= 6; 260 + holder1.position.y = 0;
261 holder1.isVisible = false; 261 holder1.isVisible = false;
262 this.wallMount.addChild(holder1); 262 this.wallMount.addChild(holder1);
263 263
@@ -347,7 +347,7 @@ class PoleProvider { @@ -347,7 +347,7 @@ class PoleProvider {
347 wallMount.addLODLevel(this.lodDistance, poleLod); 347 wallMount.addLODLevel(this.lodDistance, poleLod);
348 } 348 }
349 349
350 - wallMount.getChildren()[0].isVisible = true; // Holder 350 + //wallMount.getChildren()[0].isVisible = true; // Holder
351 wallMount.getChildren()[1].isVisible = true; // Wall 351 wallMount.getChildren()[1].isVisible = true; // Wall
352 352
353 wallMount.position.y = 0; 353 wallMount.position.y = 0;
@@ -17,36 +17,63 @@ button:focus { @@ -17,36 +17,63 @@ button:focus {
17 outline: 0; 17 outline: 0;
18 } 18 }
19 19
  20 +input:focus {
  21 + outline: none;
  22 +}
  23 +
20 #layoutSelection { 24 #layoutSelection {
21 position: absolute; 25 position: absolute;
22 left: 50%; 26 left: 50%;
23 - top: 10%; 27 + top: 50%;
  28 + width: 750px;
  29 + height: 600px;
24 } 30 }
25 31
26 #btNext { 32 #btNext {
27 position: relative; 33 position: relative;
28 - left: 90%;  
29 - top: 90%; 34 + left: 42%;
30 border: none; 35 border: none;
31 color: white; 36 color: white;
32 - padding: 14px 28px; 37 + padding: 10px;
  38 + margin: 10px;
  39 + width: 100px;
33 cursor: pointer; 40 cursor: pointer;
34 - background-color: #4CAF50; 41 + background-color: #05AE0E;
35 font-size: 1em; 42 font-size: 1em;
36 border-radius: 5px; 43 border-radius: 5px;
  44 + transition: all 0.2s ease-in-out;
  45 +}
  46 +
  47 +#btNext:hover span {
  48 + padding-right: 15px;
  49 +}
  50 +
  51 +#btNext span {
  52 + cursor: pointer;
  53 + display: inline-block;
  54 + position: relative;
  55 + transition: 0.5s;
  56 +}
  57 +
  58 +#btNext span:after {
  59 + content: '\00bb';
  60 + position: absolute;
  61 + opacity: 0;
  62 + top: 0;
  63 + right: -10px;
  64 + transition: 0.5s;
37 } 65 }
38 66
39 -#btNext:hover {  
40 - background-color: #46a049; 67 +#btNext:hover span:after {
  68 + opacity: 1;
  69 + right: 0;
41 } 70 }
42 71
43 -#divider {  
44 - width: 100%;  
45 - height: 3px;  
46 - background-color: black; 72 +#btNext:active {
  73 + transform: scale(0.95);
47 } 74 }
48 75
49 -#row1 { 76 +#layoutRow {
50 padding: 20px; 77 padding: 20px;
51 } 78 }
52 79
@@ -62,8 +89,10 @@ button:focus { @@ -62,8 +89,10 @@ button:focus {
62 position: relative; 89 position: relative;
63 text-align: center; 90 text-align: center;
64 left: -50%; 91 left: -50%;
  92 + top: -40%;
65 background: white; 93 background: white;
66 - border-radius: 20px; 94 + border-radius: 10px;
  95 + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
67 } 96 }
68 97
69 .headline { 98 .headline {
@@ -77,6 +106,7 @@ button:focus { @@ -77,6 +106,7 @@ button:focus {
77 font-family: Arial, Helvetica, sans-serif; 106 font-family: Arial, Helvetica, sans-serif;
78 font-style: normal; 107 font-style: normal;
79 font-size: 1em; 108 font-size: 1em;
  109 + color: dimgrey;
80 padding-top: 10px; 110 padding-top: 10px;
81 padding-bottom: 30px 111 padding-bottom: 30px
82 } 112 }
@@ -84,4 +114,11 @@ button:focus { @@ -84,4 +114,11 @@ button:focus {
84 .layoutButton { 114 .layoutButton {
85 width: 150px; 115 width: 150px;
86 height: 150px; 116 height: 150px;
  117 + padding: 10px;
  118 + transition: all .2s ease-in-out;
  119 +}
  120 +
  121 +.layoutButton:hover {
  122 + cursor: pointer;
  123 + transform: scale(1.1);
87 } 124 }
88 \ No newline at end of file 125 \ No newline at end of file