diff --git a/css/src/style.scss b/css/src/style.scss index 44e1705..60e6b1a 100644 --- a/css/src/style.scss +++ b/css/src/style.scss @@ -3,6 +3,8 @@ padding: 0; } body{ + margin: 0; + padding: 0; // background-color: ; font-family: sans-serif; } @@ -13,11 +15,13 @@ body{ #canvas{ height: 100%; } + nav{ position: absolute; top: 10px; left: 10px; } + .absolute{ position: absolute; top:0; @@ -34,13 +38,37 @@ nav{ .sliders{ position: absolute; - top: 7vh; + top: 20vh; left: 2vw; width: 20vw; } #formula{ position: absolute; - top: -5vh; + top: 71.5vh; width: 90vw; } + +.score{ + position: absolute; + top: 7vh; + left: 2vw; + width: 20vw; +} + +.lightbox{ + padding: 2em; + position: absolute; + top:0; + left: 50%; + transform: translateX(-50%) translateY(-100%); + z-index: 10; + width: 50%; + height: 40%; + background-color: #BBB; + transition: all 1s; + &.active{ + top:50%; + transform: translateX(-50%) translateY(-50%); + } +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..7ab2693 --- /dev/null +++ b/css/style.css @@ -0,0 +1,77 @@ +* { + margin: 0; + padding: 0; +} + +body { + margin: 0; + padding: 0; + font-family: sans-serif; +} + +#container { + height: 100vh; + position: relative; +} + +#canvas { + height: 100%; +} + +nav { + position: absolute; + top: 10px; + left: 10px; +} + +.absolute { + position: absolute; + top: 0; + left: 0; +} + +.plot { + position: absolute; + top: 2vh; + right: 2vw; + width: 20vw; + height: 10vw; +} + +.sliders { + position: absolute; + top: 20vh; + left: 2vw; + width: 20vw; +} + +#formula { + position: absolute; + top: 71.5vh; + width: 90vw; +} + +.score { + position: absolute; + top: 7vh; + left: 2vw; + width: 20vw; +} + +.lightbox { + padding: 2em; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%) translateY(-100%); + z-index: 10; + width: 50%; + height: 40%; + background-color: #BBB; + transition: all 1s; +} + +.lightbox.active { + top: 50%; + transform: translateX(-50%) translateY(-50%); +} diff --git a/css/style.min.css b/css/style.min.css index 44ca842..c44b7b9 100644 --- a/css/style.min.css +++ b/css/style.min.css @@ -1 +1 @@ -*{margin:0;padding:0}body{font-family:sans-serif}#container{height:100vh;position:relative}#canvas{height:100%}nav{position:absolute;top:10px;left:10px}.absolute{position:absolute;top:0;left:0}.plot{position:absolute;top:2vh;right:2vw;width:20vw;height:10vw}.sliders{position:absolute;top:7vh;left:2vw;width:20vw}#formula{position:absolute;top:-5vh;width:90vw} +*{margin:0;padding:0}body{margin:0;padding:0;font-family:sans-serif}#container{height:100vh;position:relative}#canvas{height:100%}nav{position:absolute;top:10px;left:10px}.absolute{position:absolute;top:0;left:0}.plot{position:absolute;top:2vh;right:2vw;width:20vw;height:10vw}.sliders{position:absolute;top:20vh;left:2vw;width:20vw}#formula{position:absolute;top:71.5vh;width:90vw}.score{position:absolute;top:7vh;left:2vw;width:20vw}.lightbox{padding:2em;position:absolute;top:0;left:50%;transform:translateX(-50%) translateY(-100%);z-index:10;width:50%;height:40%;background-color:#BBB;transition:all 1s}.lightbox.active{top:50%;transform:translateX(-50%) translateY(-50%)} diff --git a/index.html b/index.html index 93b5153..c8ab5b1 100644 --- a/index.html +++ b/index.html @@ -16,47 +16,45 @@ RL exhibit - prototype + + +
- - - - - - - - - - - - - - + + + + + + + - + -
-

Learning Rate {{learning_rate}}

- -

Discount Factor {{discount_factor}}

- -

Epsilon {{epsilon}}

- -

Current Score

-

{{score}}

+
+

Learning Rate {{machine.learning_rate}}

+ +

Discount Factor {{machine.discount_factor}}

+ +

Epsilon {{machine.epsilon}}

+
+ +
+

Current Score

+

{{machine.score}}

+
+ +
- + +