diff --git a/web/ui/src/app/app.component.html b/web/ui/src/app/app.component.html index cccf35a..3cbd8f0 100644 --- a/web/ui/src/app/app.component.html +++ b/web/ui/src/app/app.component.html @@ -14,5 +14,4 @@

Hello from {{api.title}}!

diff --git a/web/ui/src/app/app.component.scss b/web/ui/src/app/app.component.scss index 895a09a..e0edc03 100644 --- a/web/ui/src/app/app.component.scss +++ b/web/ui/src/app/app.component.scss @@ -25,3 +25,5 @@ footer { text-align: center; font-size: 0.8em; } + + diff --git a/web/ui/src/app/home/home.component.html b/web/ui/src/app/home/home.component.html index e017e97..958c997 100644 --- a/web/ui/src/app/home/home.component.html +++ b/web/ui/src/app/home/home.component.html @@ -1,5 +1,4 @@ - -
+
@@ -40,6 +39,5 @@

Upload Your Data Sets and Generate the Model

-
- +
diff --git a/web/ui/src/app/home/home.component.scss b/web/ui/src/app/home/home.component.scss index 83b8187..e69de29 100644 --- a/web/ui/src/app/home/home.component.scss +++ b/web/ui/src/app/home/home.component.scss @@ -1,242 +0,0 @@ -html, -body { - width: 100%; - height: 100%; -} - -body { - font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif; -} - -.text-vertical-center { - display: table-cell; - text-align: center; - vertical-align: middle; -} - -.text-vertical-center h1 { - margin: 0; - padding: 0; - font-size: 4.5em; - font-weight: 700; -} - -/* Custom Button Styles */ - -.btn-dark { - border-radius: 0; - color: #fff; - background-color: rgba(0,0,0,0.4); -} - -.btn-dark:hover, -.btn-dark:focus, -.btn-dark:active { - color: #fff; - background-color: rgba(0,0,0,0.7); -} - -.btn-light { - border-radius: 0; - color: #333; - background-color: rgb(255,255,255); -} - -.btn-light:hover, -.btn-light:focus, -.btn-light:active { - color: #333; - background-color: rgba(255,255,255,0.8); -} - -/* Custom Horizontal Rule */ - -hr.small { - max-width: 100px; -} - -/* Side Menu */ - -#sidebar-wrapper { - z-index: 1000; - position: fixed; - right: 0; - width: 250px; - height: 100%; - transform: translateX(250px); - overflow-y: auto; - background: #222; - -webkit-transition: all 0.4s ease 0s; - -moz-transition: all 0.4s ease 0s; - -ms-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} - -.sidebar-nav { - position: absolute; - top: 0; - width: 250px; - margin: 0; - padding: 0; - list-style: none; -} - -.sidebar-nav li { - text-indent: 20px; - line-height: 40px; -} - -.sidebar-nav li a { - display: block; - text-decoration: none; - color: #999; -} - -.sidebar-nav li a:hover { - text-decoration: none; - color: #fff; - background: rgba(255,255,255,0.2); -} - -.sidebar-nav li a:active, -.sidebar-nav li a:focus { - text-decoration: none; -} - -.sidebar-nav > .sidebar-brand { - height: 55px; - font-size: 18px; - line-height: 55px; -} - -.sidebar-nav > .sidebar-brand a { - color: #999; -} - -.sidebar-nav > .sidebar-brand a:hover { - color: #fff; - background: none; -} - -#menu-toggle { - z-index: 1; - position: fixed; - top: 0; - right: 0; -} - -#sidebar-wrapper.active { - right: 250px; - width: 250px; - -webkit-transition: all 0.4s ease 0s; - -moz-transition: all 0.4s ease 0s; - -ms-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} - -.toggle { - margin: 5px 5px 0 0; -} - -/* Header */ - -.header { - display: table; - position: relative; - width: 100%; - height: 100%; - background: url(../img/bg.jpg) no-repeat center center scroll; - -webkit-background-size: cover; - -moz-background-size: cover; - background-size: cover; - -o-background-size: cover; -} - -/* About */ - -.about { - padding: 50px 0; -} - -/* Services */ - -.services { - padding: 50px 0; -} - -.service-item { - margin-bottom: 30px; -} - -/* Callout */ - -.callout { - display: table; - width: 100%; - height: 400px; - color: #fff; - background: url(../img/callout.jpg) no-repeat center center scroll; - -webkit-background-size: cover; - -moz-background-size: cover; - background-size: cover; - -o-background-size: cover; -} - -/* Portfolio */ - -.portfolio { - padding: 50px 0; -} - -.portfolio-item { - margin-bottom: 30px; -} - -.img-portfolio { - margin: 0 auto; -} - -.img-portfolio:hover { - opacity: 0.8; -} - -/* Call to Action */ - -.call-to-action { - padding: 50px 0; -} - -.call-to-action .btn { - margin: 10px; -} - -/* Map */ - -.map { - height: 500px; -} - -@media(max-width:768px) { - .map { - height: 75%; - } -} - -.map iframe { - pointer-events: none; -} - -/* Footer */ - -footer { - padding: 100px 0; -} - -#to-top { - display: none; - position: fixed; - bottom: 5px; - right: 5px; -} diff --git a/web/ui/src/app/input/input.component.html b/web/ui/src/app/input/input.component.html index 9ab402c..81397e8 100644 --- a/web/ui/src/app/input/input.component.html +++ b/web/ui/src/app/input/input.component.html @@ -1,5 +1,4 @@ - -
+
@@ -31,5 +30,5 @@

Upload Your Data and Get the Result

-
- +
+ diff --git a/web/ui/src/app/input/input.component.scss b/web/ui/src/app/input/input.component.scss index 83b8187..e69de29 100644 --- a/web/ui/src/app/input/input.component.scss +++ b/web/ui/src/app/input/input.component.scss @@ -1,242 +0,0 @@ -html, -body { - width: 100%; - height: 100%; -} - -body { - font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif; -} - -.text-vertical-center { - display: table-cell; - text-align: center; - vertical-align: middle; -} - -.text-vertical-center h1 { - margin: 0; - padding: 0; - font-size: 4.5em; - font-weight: 700; -} - -/* Custom Button Styles */ - -.btn-dark { - border-radius: 0; - color: #fff; - background-color: rgba(0,0,0,0.4); -} - -.btn-dark:hover, -.btn-dark:focus, -.btn-dark:active { - color: #fff; - background-color: rgba(0,0,0,0.7); -} - -.btn-light { - border-radius: 0; - color: #333; - background-color: rgb(255,255,255); -} - -.btn-light:hover, -.btn-light:focus, -.btn-light:active { - color: #333; - background-color: rgba(255,255,255,0.8); -} - -/* Custom Horizontal Rule */ - -hr.small { - max-width: 100px; -} - -/* Side Menu */ - -#sidebar-wrapper { - z-index: 1000; - position: fixed; - right: 0; - width: 250px; - height: 100%; - transform: translateX(250px); - overflow-y: auto; - background: #222; - -webkit-transition: all 0.4s ease 0s; - -moz-transition: all 0.4s ease 0s; - -ms-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} - -.sidebar-nav { - position: absolute; - top: 0; - width: 250px; - margin: 0; - padding: 0; - list-style: none; -} - -.sidebar-nav li { - text-indent: 20px; - line-height: 40px; -} - -.sidebar-nav li a { - display: block; - text-decoration: none; - color: #999; -} - -.sidebar-nav li a:hover { - text-decoration: none; - color: #fff; - background: rgba(255,255,255,0.2); -} - -.sidebar-nav li a:active, -.sidebar-nav li a:focus { - text-decoration: none; -} - -.sidebar-nav > .sidebar-brand { - height: 55px; - font-size: 18px; - line-height: 55px; -} - -.sidebar-nav > .sidebar-brand a { - color: #999; -} - -.sidebar-nav > .sidebar-brand a:hover { - color: #fff; - background: none; -} - -#menu-toggle { - z-index: 1; - position: fixed; - top: 0; - right: 0; -} - -#sidebar-wrapper.active { - right: 250px; - width: 250px; - -webkit-transition: all 0.4s ease 0s; - -moz-transition: all 0.4s ease 0s; - -ms-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} - -.toggle { - margin: 5px 5px 0 0; -} - -/* Header */ - -.header { - display: table; - position: relative; - width: 100%; - height: 100%; - background: url(../img/bg.jpg) no-repeat center center scroll; - -webkit-background-size: cover; - -moz-background-size: cover; - background-size: cover; - -o-background-size: cover; -} - -/* About */ - -.about { - padding: 50px 0; -} - -/* Services */ - -.services { - padding: 50px 0; -} - -.service-item { - margin-bottom: 30px; -} - -/* Callout */ - -.callout { - display: table; - width: 100%; - height: 400px; - color: #fff; - background: url(../img/callout.jpg) no-repeat center center scroll; - -webkit-background-size: cover; - -moz-background-size: cover; - background-size: cover; - -o-background-size: cover; -} - -/* Portfolio */ - -.portfolio { - padding: 50px 0; -} - -.portfolio-item { - margin-bottom: 30px; -} - -.img-portfolio { - margin: 0 auto; -} - -.img-portfolio:hover { - opacity: 0.8; -} - -/* Call to Action */ - -.call-to-action { - padding: 50px 0; -} - -.call-to-action .btn { - margin: 10px; -} - -/* Map */ - -.map { - height: 500px; -} - -@media(max-width:768px) { - .map { - height: 75%; - } -} - -.map iframe { - pointer-events: none; -} - -/* Footer */ - -footer { - padding: 100px 0; -} - -#to-top { - display: none; - position: fixed; - bottom: 5px; - right: 5px; -} diff --git a/web/ui/src/app/output/output.component.html b/web/ui/src/app/output/output.component.html index 10802d8..2e09a2c 100644 --- a/web/ui/src/app/output/output.component.html +++ b/web/ui/src/app/output/output.component.html @@ -1,5 +1,4 @@ - -
+
@@ -26,6 +25,4 @@

Recomended Movies

-
- - +
diff --git a/web/ui/src/app/output/output.component.scss b/web/ui/src/app/output/output.component.scss index 83b8187..e69de29 100644 --- a/web/ui/src/app/output/output.component.scss +++ b/web/ui/src/app/output/output.component.scss @@ -1,242 +0,0 @@ -html, -body { - width: 100%; - height: 100%; -} - -body { - font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif; -} - -.text-vertical-center { - display: table-cell; - text-align: center; - vertical-align: middle; -} - -.text-vertical-center h1 { - margin: 0; - padding: 0; - font-size: 4.5em; - font-weight: 700; -} - -/* Custom Button Styles */ - -.btn-dark { - border-radius: 0; - color: #fff; - background-color: rgba(0,0,0,0.4); -} - -.btn-dark:hover, -.btn-dark:focus, -.btn-dark:active { - color: #fff; - background-color: rgba(0,0,0,0.7); -} - -.btn-light { - border-radius: 0; - color: #333; - background-color: rgb(255,255,255); -} - -.btn-light:hover, -.btn-light:focus, -.btn-light:active { - color: #333; - background-color: rgba(255,255,255,0.8); -} - -/* Custom Horizontal Rule */ - -hr.small { - max-width: 100px; -} - -/* Side Menu */ - -#sidebar-wrapper { - z-index: 1000; - position: fixed; - right: 0; - width: 250px; - height: 100%; - transform: translateX(250px); - overflow-y: auto; - background: #222; - -webkit-transition: all 0.4s ease 0s; - -moz-transition: all 0.4s ease 0s; - -ms-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} - -.sidebar-nav { - position: absolute; - top: 0; - width: 250px; - margin: 0; - padding: 0; - list-style: none; -} - -.sidebar-nav li { - text-indent: 20px; - line-height: 40px; -} - -.sidebar-nav li a { - display: block; - text-decoration: none; - color: #999; -} - -.sidebar-nav li a:hover { - text-decoration: none; - color: #fff; - background: rgba(255,255,255,0.2); -} - -.sidebar-nav li a:active, -.sidebar-nav li a:focus { - text-decoration: none; -} - -.sidebar-nav > .sidebar-brand { - height: 55px; - font-size: 18px; - line-height: 55px; -} - -.sidebar-nav > .sidebar-brand a { - color: #999; -} - -.sidebar-nav > .sidebar-brand a:hover { - color: #fff; - background: none; -} - -#menu-toggle { - z-index: 1; - position: fixed; - top: 0; - right: 0; -} - -#sidebar-wrapper.active { - right: 250px; - width: 250px; - -webkit-transition: all 0.4s ease 0s; - -moz-transition: all 0.4s ease 0s; - -ms-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} - -.toggle { - margin: 5px 5px 0 0; -} - -/* Header */ - -.header { - display: table; - position: relative; - width: 100%; - height: 100%; - background: url(../img/bg.jpg) no-repeat center center scroll; - -webkit-background-size: cover; - -moz-background-size: cover; - background-size: cover; - -o-background-size: cover; -} - -/* About */ - -.about { - padding: 50px 0; -} - -/* Services */ - -.services { - padding: 50px 0; -} - -.service-item { - margin-bottom: 30px; -} - -/* Callout */ - -.callout { - display: table; - width: 100%; - height: 400px; - color: #fff; - background: url(../img/callout.jpg) no-repeat center center scroll; - -webkit-background-size: cover; - -moz-background-size: cover; - background-size: cover; - -o-background-size: cover; -} - -/* Portfolio */ - -.portfolio { - padding: 50px 0; -} - -.portfolio-item { - margin-bottom: 30px; -} - -.img-portfolio { - margin: 0 auto; -} - -.img-portfolio:hover { - opacity: 0.8; -} - -/* Call to Action */ - -.call-to-action { - padding: 50px 0; -} - -.call-to-action .btn { - margin: 10px; -} - -/* Map */ - -.map { - height: 500px; -} - -@media(max-width:768px) { - .map { - height: 75%; - } -} - -.map iframe { - pointer-events: none; -} - -/* Footer */ - -footer { - padding: 100px 0; -} - -#to-top { - display: none; - position: fixed; - bottom: 5px; - right: 5px; -} diff --git a/web/ui/src/style/app.scss b/web/ui/src/style/app.scss index d73ea23..a32e94c 100644 --- a/web/ui/src/style/app.scss +++ b/web/ui/src/style/app.scss @@ -6,3 +6,245 @@ body { a { color: #03A9F4; } + +html, +body { + width: 100%; + height: 100%; +} + +body { + font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif; +} + +.text-vertical-center { + display: table-cell; + text-align: center; + vertical-align: middle; +} + +.text-vertical-center h1 { + margin: 0; + padding: 0; + font-size: 4.5em; + font-weight: 700; +} + +/* Custom Button Styles */ + +.btn-dark { + border-radius: 0; + color: #fff; + background-color: rgba(0,0,0,0.4); +} + +.btn-dark:hover, +.btn-dark:focus, +.btn-dark:active { + color: #fff; + background-color: rgba(0,0,0,0.7); +} + +.btn-light { + border-radius: 0; + color: #333; + background-color: rgb(255,255,255); +} + +.btn-light:hover, +.btn-light:focus, +.btn-light:active { + color: #333; + background-color: rgba(255,255,255,0.8); +} + +/* Custom Horizontal Rule */ + +hr.small { + max-width: 100px; +} + +/* Side Menu */ + +#sidebar-wrapper { + z-index: 1000; + position: fixed; + right: 0; + width: 250px; + height: 100%; + transform: translateX(250px); + overflow-y: auto; + background: #222; + -webkit-transition: all 0.4s ease 0s; + -moz-transition: all 0.4s ease 0s; + -ms-transition: all 0.4s ease 0s; + -o-transition: all 0.4s ease 0s; + transition: all 0.4s ease 0s; +} + +.sidebar-nav { + position: absolute; + top: 0; + width: 250px; + margin: 0; + padding: 0; + list-style: none; +} + +.sidebar-nav li { + text-indent: 20px; + line-height: 40px; +} + +.sidebar-nav li a { + display: block; + text-decoration: none; + color: #999; +} + +.sidebar-nav li a:hover { + text-decoration: none; + color: #fff; + background: rgba(255,255,255,0.2); +} + +.sidebar-nav li a:active, +.sidebar-nav li a:focus { + text-decoration: none; +} + +.sidebar-nav > .sidebar-brand { + height: 55px; + font-size: 18px; + line-height: 55px; +} + +.sidebar-nav > .sidebar-brand a { + color: #999; +} + +.sidebar-nav > .sidebar-brand a:hover { + color: #fff; + background: none; +} + +#menu-toggle { + z-index: 1; + position: fixed; + top: 0; + right: 0; +} + +#sidebar-wrapper.active { + right: 250px; + width: 250px; + -webkit-transition: all 0.4s ease 0s; + -moz-transition: all 0.4s ease 0s; + -ms-transition: all 0.4s ease 0s; + -o-transition: all 0.4s ease 0s; + transition: all 0.4s ease 0s; +} + +.toggle { + margin: 5px 5px 0 0; +} + +/* Header */ + +.header { + display: table; + position: relative; + width: 100%; + height: 100%; + -webkit-background-size: cover; + -moz-background-size: cover; + background-size: cover; + -o-background-size: cover; +} + +/* About */ + +.about { + padding: 50px 0; +} + +/* Services */ + +.services { + padding: 50px 0; +} + +.service-item { + margin-bottom: 30px; +} + +/* Callout */ + +.callout { + display: table; + width: 100%; + height: 400px; + color: #fff; + -webkit-background-size: cover; + -moz-background-size: cover; + background-size: cover; + -o-background-size: cover; +} + +/* Portfolio */ + +.portfolio { + padding: 50px 0; +} + +.portfolio-item { + margin-bottom: 30px; +} + +.img-portfolio { + margin: 0 auto; +} + +.img-portfolio:hover { + opacity: 0.8; +} + +/* Call to Action */ + +.call-to-action { + padding: 50px 0; +} + +.call-to-action .btn { + margin: 10px; +} + +/* Map */ + +.map { + height: 500px; +} + +@media(max-width:768px) { + .map { + height: 75%; + } +} + +.map iframe { + pointer-events: none; +} + +/* Footer */ + +footer { + padding: 100px 0; +} + +#to-top { + display: none; + position: fixed; + bottom: 5px; + right: 5px; +} +