Compare View
Commits (2)
Showing
3 changed files
Show diff stats
index_NEW.html
... | ... | @@ -48,23 +48,35 @@ |
48 | 48 | |
49 | 49 | <div id="layoutSelection"> |
50 | 50 | <div class="centeredContent"> |
51 | - <div class="headline">Velg utforming på terrasse</div> | |
51 | + <div class="headline">Velg utforming på din terrasse</div> | |
52 | 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 | 55 | <input id="btLayout1" class="layoutButton" type="image" src="images/terrace_square.png"> |
56 | 56 | <input id="btLayout2" class="layoutButton" type="image" src="images/terrace_l_shape.png"> |
57 | 57 | <input id="btLayout3" class="layoutButton" type="image" src="images/terrace_triangle.png"> |
58 | 58 | <input id="btLayout4" class="layoutButton" type="image" src="images/terrace_diamond.png"> |
59 | 59 | </div> |
60 | + | |
61 | + <button id="btNext"><span>Neste</span></button> | |
62 | + | |
60 | 63 | </div> |
61 | 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 | 76 | <canvas id="renderCanvas"> |
66 | 77 | Denne nettleseren støtter ikke "canvas"-elementet! |
67 | 78 | </canvas> |
79 | + | |
68 | 80 | <a id="inputTabFix" href="" onClick="return false;"></a> |
69 | 81 | |
70 | 82 | </div> | ... | ... |
js/app.js
... | ... | @@ -25,6 +25,8 @@ var glassEnds = []; |
25 | 25 | var shoppingCart = []; |
26 | 26 | var totalCost = 0; |
27 | 27 | |
28 | +var layoutSelected = undefined; | |
29 | + | |
28 | 30 | function main() { |
29 | 31 | canvas = document.getElementById("renderCanvas"); |
30 | 32 | var engine = new BABYLON.Engine(canvas, true); |
... | ... | @@ -490,17 +492,26 @@ function addEverything() { |
490 | 492 | this.addToCart(glassTypes[i]); |
491 | 493 | } |
492 | 494 | |
493 | -/* | |
494 | 495 | function initButtons() { |
495 | - document.getElementById("btLayout1").onclick = function () { selectedLayout(1); }; | |
496 | - document.getElementById("btLayout2").onclick = function () { selectedLayout(2); }; | |
497 | - document.getElementById("btLayout3").onclick = function () { selectedLayout(3); }; | |
498 | - 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() }; | |
499 | 501 | } |
500 | 502 | |
501 | 503 | function selectedLayout(num) { |
502 | - console.log("Layout #" + num + " selected."); | |
503 | -}*/ | |
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 | +} | |
504 | 515 | |
505 | 516 | // GUI |
506 | 517 | ... | ... |
style.css
... | ... | @@ -17,36 +17,63 @@ button:focus { |
17 | 17 | outline: 0; |
18 | 18 | } |
19 | 19 | |
20 | +input:focus { | |
21 | + outline: none; | |
22 | +} | |
23 | + | |
20 | 24 | #layoutSelection { |
21 | 25 | position: absolute; |
22 | 26 | left: 50%; |
23 | - top: 10%; | |
27 | + top: 50%; | |
28 | + width: 750px; | |
29 | + height: 600px; | |
24 | 30 | } |
25 | 31 | |
26 | 32 | #btNext { |
27 | 33 | position: relative; |
28 | - left: 90%; | |
29 | - top: 90%; | |
34 | + left: 42%; | |
30 | 35 | border: none; |
31 | 36 | color: white; |
32 | - padding: 14px 28px; | |
37 | + padding: 10px; | |
38 | + margin: 10px; | |
39 | + width: 100px; | |
33 | 40 | cursor: pointer; |
34 | - background-color: #4CAF50; | |
41 | + background-color: #05AE0E; | |
35 | 42 | font-size: 1em; |
36 | 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 | 77 | padding: 20px; |
51 | 78 | } |
52 | 79 | |
... | ... | @@ -62,8 +89,10 @@ button:focus { |
62 | 89 | position: relative; |
63 | 90 | text-align: center; |
64 | 91 | left: -50%; |
92 | + top: -40%; | |
65 | 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 | 98 | .headline { |
... | ... | @@ -77,6 +106,7 @@ button:focus { |
77 | 106 | font-family: Arial, Helvetica, sans-serif; |
78 | 107 | font-style: normal; |
79 | 108 | font-size: 1em; |
109 | + color: dimgrey; | |
80 | 110 | padding-top: 10px; |
81 | 111 | padding-bottom: 30px |
82 | 112 | } |
... | ... | @@ -84,4 +114,11 @@ button:focus { |
84 | 114 | .layoutButton { |
85 | 115 | width: 150px; |
86 | 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 | 125 | \ No newline at end of file | ... | ... |