Lars Jørgen Fredheim / test

Compare View

switch
from
...
to
 
Commits (2)
Showing 3 changed files   Show diff stats
Inline Side-by-side
index_NEW.html
  Show/Hide comments   View file @39b7d24
... ... @@ -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
  Show/Hide comments   View file @39b7d24
... ... @@ -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
  Show/Hide comments   View file @39b7d24
... ... @@ -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
... ...