diff --git a/web/ui/src/app/home/home.component.html b/web/ui/src/app/home/home.component.html index 604d9e1..e017e97 100644 --- a/web/ui/src/app/home/home.component.html +++ b/web/ui/src/app/home/home.component.html @@ -1,3 +1,45 @@ -

- Home Works! -

+ +
+
+
+
+

Upload Your Data Sets and Generate the Model

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

Upload DataSet 1     

Upload DataSet 2     

Upload DataSet 3     

+ +
+
+
+
+
+
+ + diff --git a/web/ui/src/app/home/home.component.scss b/web/ui/src/app/home/home.component.scss index 5db1e17..83b8187 100644 --- a/web/ui/src/app/home/home.component.scss +++ b/web/ui/src/app/home/home.component.scss @@ -1,4 +1,242 @@ -// component styles are encapsulated and only applied to their components -* { - color: #FFEF00; +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 087e284..9ab402c 100644 --- a/web/ui/src/app/input/input.component.html +++ b/web/ui/src/app/input/input.component.html @@ -1,3 +1,35 @@ -

- Input Works! -

+ +
+
+
+
+

Upload Your Data and Get the Result

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

Input Your Data     

​
+ +
+
+
+
+
+
+ diff --git a/web/ui/src/app/input/input.component.scss b/web/ui/src/app/input/input.component.scss index b3afa74..83b8187 100644 --- a/web/ui/src/app/input/input.component.scss +++ b/web/ui/src/app/input/input.component.scss @@ -1,3 +1,242 @@ -* { - color: #f87c08; +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 f992e3e..10802d8 100644 --- a/web/ui/src/app/output/output.component.html +++ b/web/ui/src/app/output/output.component.html @@ -1,3 +1,31 @@ -

- Output goes here -

+ +
+
+
+
+

Recomended Movies

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

Your Output     

​
+
+
+
+
+
+ + diff --git a/web/ui/src/app/output/output.component.scss b/web/ui/src/app/output/output.component.scss index aedc28a..83b8187 100644 --- a/web/ui/src/app/output/output.component.scss +++ b/web/ui/src/app/output/output.component.scss @@ -1,3 +1,242 @@ -* { - color: #000000; +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; }