diff --git a/src/_theme.scss b/src/_theme.scss index 776b96f..f397f5e 100644 --- a/src/_theme.scss +++ b/src/_theme.scss @@ -1,8 +1,11 @@ -$background-color:#151515; +$background-color: #151515; $white: #ffffff; -$green: #33CE93; -$text-color:#c8c8c8; -$cyan:#47D1BC; -$label-color:#9F9F9F; - -$button-color:#D1D1D1 \ No newline at end of file +$green: #33ce93; +$text-color: #c8c8c8; +$cyan: #47d1bc; +$label-color: #9f9f9f; +$button-color: #d1d1d1; +$step-color: #a3a3a3; +$heading-color: #363636; +$content-color: #868686; +$segment-section: #f7f7f7; diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html index 9e135fc..36465e9 100644 --- a/src/app/pages/dashboard/dashboard.component.html +++ b/src/app/pages/dashboard/dashboard.component.html @@ -8,4 +8,19 @@
- \ No newline at end of file + + +
+ +
\ No newline at end of file diff --git a/src/app/pages/dashboard/dashboard.component.scss b/src/app/pages/dashboard/dashboard.component.scss index 1d0a898..45603bf 100644 --- a/src/app/pages/dashboard/dashboard.component.scss +++ b/src/app/pages/dashboard/dashboard.component.scss @@ -1,3 +1,5 @@ +@import "../../../theme"; + header { background-color: $background-color; display: flex; @@ -41,3 +43,97 @@ header { } } } + +li { + display: flex; + flex-direction: column; + + .upfold { + display: flex; + flex-direction: column; + justify-content: center; + background-color: $segment-section; + padding: 15px; + border-style: solid; + border: 2px solid $white; + + background-image: url("../../../assets/lock-closed.svg"); + background-repeat: no-repeat; + background-size: 10px; + background-position: 25px; + + span { + text-align: center; + color: $step-color; + font-size: 11px; + font-family: "Poppins", sans-serif; + font-weight: 500; + } + h3 { + text-align: center; + color: lighten($color: $heading-color, $amount: 20%); + font-size: 21.5px; + font-family: "Oswald", sans-serif; + font-weight: 300; + } + } + + img { + padding: 22px 107px; + display: none; + } + p { + color: $content-color; + text-align: center; + font-family: "Poppins", sans-serif; + font-size: 12px; + line-height: 25px; + display: none; + padding: 5px 30px; + } + button { + border-radius: 25px; + height: 45px; + font-size: 14px; + font-family: "Poppins", sans-serif; + border: none; + margin: 25px 20px; + font-weight: 600; + background-color: $green; + display: none; + color: $white; + } +} + +.active { + .upfold { + background-image: url("../../../assets/lock-open.svg"); + } + img, + p, + button { + display: block; + animation: fadein 0.8s; + } + @keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + div { + padding-top: 32px; + background-color: $white; + animation: slideup 0.3s; + } + @keyframes slideup { + from { + transform: translateY(300px); + } + to { + transform: translateY(0px); + } + } +} diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts index 843c80f..d2e6cbc 100644 --- a/src/app/pages/dashboard/dashboard.component.ts +++ b/src/app/pages/dashboard/dashboard.component.ts @@ -1,15 +1,72 @@ import { Component, OnInit } from '@angular/core'; @Component({ - selector: 'app-dashboard', - templateUrl: './dashboard.component.html', - styleUrls: ['./dashboard.component.scss'] + selector: 'app-dashboard', + templateUrl: './dashboard.component.html', + styleUrls: ['./dashboard.component.scss'] }) export class DashboardComponent implements OnInit { - constructor() { } + selectedSegment: number = 0; - ngOnInit(): void { - } + selectedSteps = [{ + step: 1, + heading: 'Skill Information', + imageSrc: 'assets/skill information.svg', + content: "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", + redirectText: "Let's start now!", + redirectUrl: '/welcome' + }, { + step: 2, + heading: 'Preliminary Round', + imageSrc: 'assets/Preliminary Round.svg', + content: "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", + redirectText: 'Lets do this!', + redirectUrl: '' + }, { + step: 3, + heading: 'Technical Interview', + imageSrc: 'assets/Technical Interview.svg', + content: "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", + redirectText: 'Schedule meeting!', + redirectUrl: '' + }, { + step: 4, + heading: 'Assignment', + imageSrc: 'assets/Assignment.svg', + content: "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", + redirectText: 'Show details!', + redirectUrl: '' + }, { + step: 5, + heading: 'Final Interview', + imageSrc: 'assets/Final Interview.svg', + content: "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", + redirectText: 'Schedule meeting!', + redirectUrl: '' + }, { + step: 6, + heading: 'Closing Docs', + imageSrc: 'assets/Closing Docs.svg', + content: "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", + redirectText: 'Upload docs!', + redirectUrl: '' + }, { + step: 7, + heading: 'Joining Letter', + imageSrc: 'assets/Joining Letter.svg', + content: "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", + redirectText: 'Show details', + redirectUrl: '' + }, { + step: 8, + heading: 'Celebrations', + imageSrc: 'assets/Celebrations.svg', + content: "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", + redirectText: 'Join Workex', + redirectUrl: '' + }] + ngOnInit(): void { + } } diff --git a/src/assets/Assignment.svg b/src/assets/Assignment.svg new file mode 100644 index 0000000..fead865 --- /dev/null +++ b/src/assets/Assignment.svg @@ -0,0 +1,237 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/Celebrations.svg b/src/assets/Celebrations.svg new file mode 100644 index 0000000..e93d86a --- /dev/null +++ b/src/assets/Celebrations.svg @@ -0,0 +1,445 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/Closing Docs.svg b/src/assets/Closing Docs.svg new file mode 100644 index 0000000..f4f9656 --- /dev/null +++ b/src/assets/Closing Docs.svg @@ -0,0 +1,234 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/Final Interview.svg b/src/assets/Final Interview.svg new file mode 100644 index 0000000..68ca13a --- /dev/null +++ b/src/assets/Final Interview.svg @@ -0,0 +1,239 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/Joining Letter.svg b/src/assets/Joining Letter.svg new file mode 100644 index 0000000..340fa1e --- /dev/null +++ b/src/assets/Joining Letter.svg @@ -0,0 +1,269 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/Preliminary Round.svg b/src/assets/Preliminary Round.svg new file mode 100644 index 0000000..bf67103 --- /dev/null +++ b/src/assets/Preliminary Round.svg @@ -0,0 +1,145 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/Technical Interview.svg b/src/assets/Technical Interview.svg new file mode 100644 index 0000000..39206af --- /dev/null +++ b/src/assets/Technical Interview.svg @@ -0,0 +1,394 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/lock-closed.svg b/src/assets/lock-closed.svg new file mode 100644 index 0000000..2d33317 --- /dev/null +++ b/src/assets/lock-closed.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/lock-open.svg b/src/assets/lock-open.svg new file mode 100644 index 0000000..a253e6d --- /dev/null +++ b/src/assets/lock-open.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/skill information.svg b/src/assets/skill information.svg new file mode 100644 index 0000000..6498a4c --- /dev/null +++ b/src/assets/skill information.svg @@ -0,0 +1,139 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +