diff --git a/css/style.css b/css/style.css index e40996a..b346eea 100644 --- a/css/style.css +++ b/css/style.css @@ -4,9 +4,20 @@ html, body { height : 100%; margin : 0; padding : 0; + font-family: Arial, Helvetica, sans-serif; + font-size: 16px; + text-align: center; +} + +#renderCanvas { + width : 100%; + height : 100%; + touch-action: none; + display: none; + z-index : 5; } -button:focus { +input:focus, select:focus, button:focus { outline: 0; } @@ -14,10 +25,7 @@ label { font-weight: bold; } -#renderCanvas { - width : 100%; - height : 100%; - touch-action: none; +#main { display: none; } @@ -183,4 +191,267 @@ label { #btNext:active, #btBack:active, #btBuild:active { transform: scale(0.95); +} + +/* ----------------------------------------------------------- */ + +#gui { + width: 100%; + height: 100%; + /*display: none;*/ + z-index: 10; +} + +#topButtons { + width: 12%; + height: 5%; + position: fixed; + left: 0; + top: 0; +} + +.cameraButtons { + float: left; + height: 100%; + margin: 1%; +} + +#helpLinesButton { + height: 100%; + float: left; + margin: 1%; +} + +#totalCostButton { + position: fixed; + left: 0; + bottom: 0; + height: 50px; + width: 200px; + font-size: 1.4em; + border: 1px solid black; + border-radius: 5px; +} + +#itemList { + position: fixed; + width: 50%; + height: 70%; + background: lightgrey url("../images/background.jpg") no-repeat center; + left: 25%; + top: 15%; + border: 1px solid black; + border-radius: 10px; + display: none; + z-index: 15; +} + +#itemListHeader { + position: relative; + width: 100%; + height: 10%; + top: 0; +} + +#closeItemList { + position: absolute; + top: 25%; + right: 2%; + background-color: red; + border: 1px solid black; + border-radius: 5px; + cursor: pointer; + font-size: 1.4em; +} + +#itemTableDiv { + width: 98%; + height: 80%; + border: 1px solid black; + margin: 0 1%; + overflow: scroll; + background-color: white; +} + +#itemTable tr { + background-color: rgb(230, 230, 230); +} + +#itemTable, #itemTable tr, #itemTable td { + border-collapse: collapse; +} + +#itemTable { + width: 100%; + vertical-align: top; +} + +#itemListFooter { + position: relative; + width: 100%; + height: 10%; + bottom: 0; +} + +#downloadItemListButton { + position: absolute; + right: 1%; + bottom: 25%; + border: 1px solid black; + background-color: white; + border-radius: 5px; + font-size: 1.3em; +} + +#moduleMenuToggleButton { + z-index: 20; + position: fixed; + top: 1%; + right: 0.5%; + border: 1px solid black; + border-radius: 5px; + height: 2%; + transform: rotate(180deg); + transition: transform 1s; +} + +#moduleMenu { + width: 15%; + height: 100%; + position: fixed; + left: 85%; + top: 0; + background: lightgrey url("../images/background.jpg") no-repeat center; + border: 1px solid black; + border-radius: 10px; + transition: left 1s; +} + +.poleButton { + border: 1px solid black; + border-radius: 5px; + background-color: white; + width: 25%; +} + +.menuHeader { + font-size: 1.5em; + padding: 2% 0; +} + +#glassTypeInfo { + padding-bottom: 2%; +} + +#glassButtons { + position: relative; +} + +#decreaseGlassWidth { + width: 10%; + position: absolute; + left: 0; + top: 40%; +} + +#increaseGlassWidth { + width: 10%; + transform: rotate(180deg); + position: absolute; + right: 0; + top: 40%; +} + +#glassButton { + width: 55%; + transform: scale(1.4, 1); +} + +#poleMenu { + position: fixed; + bottom: -5.5%; + left: 40%; + width: 15%; + height: 5%; + background: lightgrey; + border: 1px solid black; + border-radius: 5px; + transition: bottom 0.5s; +} + +#glassMenu { + position: fixed; + bottom: -5.5%; + left: 40%; + width: 20%; + height: 5%; + background-color: lightgrey; + border: 1px solid black; + border-radius: 5px; + transition: bottom 0.5s; +} + +.meshControlsButtonsDiv { + height: 80%; + float: left; + margin: 1%; +} + +.meshControlsButtons { + height: 100%; + border: 1px solid black; + border-radius: 5px; + background-color: white; +} + +#autoGenButton { + height: 100%; + border: 1px solid black; + border-radius: 5px; + background-color: white; + cursor: pointer; +} + +#glassMenuTypeSelect { + font-size: 1.5em; + margin: 2.4% 1%; +} + +#autoGenPoleSelect { + position: fixed; + width: 20%; + height: 50%; + left: 40%; + top: 25%; + background: lightgrey url("../images/background.jpg") no-repeat center; + border: 1px solid black; + border-radius: 10px; + z-index: 15; + display: none; +} + +#autoGenPoleSelectHeader { + width: 100%; + height: 10%; + font-size: 1.4em; +} + +.autoGenPoleRow { + width: 98%; + height: 43%; + padding: 1%; +} + +.autoGenPoleButton { + width: 25%; + border: 1px solid black; + border-radius: 5px; + background-color: white; +} +#autoGenFinishButton { + position: fixed; + left: 0; + top: 50%; + font-size: 1.5em; + display: none; } \ No newline at end of file diff --git a/index.html b/index.html index b9b876a..c606ac2 100644 --- a/index.html +++ b/index.html @@ -1,51 +1,169 @@ - - - + + + + Rekkverkskalkulator - Rekkverkskalkulator + + - + + - - + + + - - + + - - - - - - - - - - - + + + + + + + + + + - - + + - - + + - - - - + + + + + - - + + - + + + + + - - - - + + Denne nettleseren støtter ikke "canvas"-elementet! + + + + +
+
+
+
+ +
+
+
+

Velg utforming på din terrasse

+
+
+
+
+

I neste steg kan du legge inn sidemål

+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+

Ser du ikke noe som likner?

+
+
+
+
+ +
+
+
+ +
+
+
+

Legg inn mål for din terrasse

+
+
+
+
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+ + +
+
+ + + + + +
+
+
+
+
+ +
@@ -115,13 +233,13 @@
- - - - - - - + + + + + + + @@ -170,5 +288,13 @@ - + + + + + + + + + \ No newline at end of file diff --git a/index_NEW.html b/index_NEW.html deleted file mode 100644 index 4b1dc61..0000000 --- a/index_NEW.html +++ /dev/null @@ -1,173 +0,0 @@ - - - - - Rekkverkskalkulator - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Denne nettleseren støtter ikke "canvas"-elementet! - - - - - -
-
-
-
- -
-
-
-

Velg utforming på din terrasse

-
-
-
-
-

I neste steg kan du legge inn sidemål

-
-
-
-
- -
-
- -
-
- -
-
- -
-
-
-
-

Ser du ikke noe som likner?

-
-
-
-
- -
-
-
- -
-
-
-

Legg inn mål for din terrasse

-
-
-
-
- -
-
-
-
- - -
-
- - -
-
- - -
-
- - -
- -
-
-
-
- - -
-
- - - - - -
-
-
-
-
- - - - - - - - - \ No newline at end of file diff --git a/index_OLD.html b/index_OLD.html new file mode 100644 index 0000000..b9b876a --- /dev/null +++ b/index_OLD.html @@ -0,0 +1,174 @@ + + + + + + Rekkverkskalkulator + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+
+ + + +
+
+ + +
+
+ + +
+ Glasstype: + +
+
+ + + +
+
+ + x 840mm +
+

fps:

+
+ +
+ + + +
+ + + +
+
+ + +
+
+
VarenrNobbnrArtikkelAntallPris
VarenrNobbnrArtikkelAntallPris
+ + + + + + + + + + + + +
VarenrNobbnrArtikkelAntallPris
+
+
+ +
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+ +
+
Velg stolpe
+
+ + + +
+
+ + +
+
+ + + + \ No newline at end of file diff --git a/js/app.js b/js/app.js index 79b5ffc..32457b9 100644 --- a/js/app.js +++ b/js/app.js @@ -63,9 +63,9 @@ function main() { terrace = new Terrace(); meshControls = new MeshControls(); gui = new GUI(); - gui.showLayoutSelection(); + //gui.showLayoutSelection(); - //initButtons(); + initButtons(); window.addEventListener("resize", function () { // Watch for browser/canvas resize events engine.resize(); @@ -587,6 +587,7 @@ function drawTerrace() { } measurements.style.display = "none"; document.getElementById("setup").style.display = "none"; + document.getElementById("main").style.display = "inline"; canvas.style.display = "inline"; terrace.displayTerrace(inputs); camera.focusPerspectiveCamera(); -- libgit2 0.21.4