Skip to content

Commit 26662b3

Browse files
BipinKalraBipinKalra
committed
result modals
1 parent 2c14d61 commit 26662b3

File tree

3 files changed

+213
-5
lines changed

3 files changed

+213
-5
lines changed

‎examples/views/online-cb/eligibility-test-modals.hbs

Lines changed: 205 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
<div class="row no-gutters">
1+
<div class="row no-gutters a-ocb">
2+
{{!-- First Modal --}}
23
<div class="col-lg-8">
34
<div class="br-10 overflow-hidden">
4-
<div class="bg-gradient-dpink px-md-5 px-4 py-4 position-relative"
5+
<div class="bg-gradient-dpink px-md-5 px-4 py-5 position-relative"
56
style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;">
67
<div class="row no-gutters align-items-center white">
78
<div class="border round border-white all-center s-100x100">
@@ -25,7 +26,7 @@
2526
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/clock-small.svg" class="mr-2">
2627
<span>Timed</span>
2728
</div>
28-
<div class="font-sm">
29+
<div class="font-sm med-grey">
2930
The questions are timed, you will get 30 seconds for one question.
3031
</div>
3132
</div>
@@ -34,7 +35,7 @@
3435
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/files-small.svg" class="mr-2">
3536
<span>Questions</span>
3637
</div>
37-
<div class="font-sm">
38+
<div class="font-sm med-grey">
3839
There will be 10 skill based MCQ questions.
3940
</div>
4041
</div>
@@ -43,7 +44,7 @@
4344
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/repeat-small.svg" class="mr-2">
4445
<span>Retake</span>
4546
</div>
46-
<div class="font-sm">
47+
<div class="font-sm med-grey">
4748
Not happy with the results? Retake to improve your scores.
4849
</div>
4950
</div>
@@ -54,4 +55,203 @@
5455
</div>
5556
</div>
5657
</div>
58+
59+
{{!-- Test Passed Modal --}}
60+
<div class="col-lg-8 mt-5">
61+
<div class="br-10 overflow-hidden">
62+
<div class="bg-gradient-dpink px-md-5 px-4 py-5 position-relative"
63+
style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;">
64+
<div class="row no-gutters align-items-center white">
65+
<div class="border round border-white all-center s-100x100">
66+
<img src="https://minio.codingblocks.com/amoeba/e2c13faa-f538-48d4-8ca1-88728a07c51a.svg">
67+
</div>
68+
<div class="flex-1 pl-4">
69+
<div style="font-size: 2rem;">Skill Assessment Report</div>
70+
<div class="mt-1 bold" style="font-size: 2rem;">Frontend Development</div>
71+
</div>
72+
</div>
73+
</div>
74+
<div class="bg-white p-md-5 p-4">
75+
<div class="row no-gutters align-items-center justify-content-between pb-5 mb-5 border-bottom">
76+
<div class="flex-1">
77+
<div class="row no-gutters align-items-center">
78+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/tick_solid.svg">
79+
<div class="flex-1 pl-4">
80+
<div class="font-mdxl green bold">Congratulations</div>
81+
<div class="font-md mt-2">You are eligible for this course</div>
82+
</div>
83+
</div>
84+
</div>
85+
<div>
86+
<ul class="divided-list">
87+
<li class="px-5">
88+
<div class="font-mdxl green bold mb-2">10</div>
89+
<div class="font-md">Questions</div>
90+
</li>
91+
<li class="px-5">
92+
<div class="font-mdxl green bold mb-2">07</div>
93+
<div class="font-md">Correct</div>
94+
</li>
95+
</ul>
96+
</div>
97+
</div>
98+
<div class="t-align-c">
99+
<button class="button-dashed button-orange">Take free trial</button>
100+
<button class="button-solid button-orange ml-4">Buy this course</button>
101+
</div>
102+
</div>
103+
</div>
104+
</div>
105+
106+
{{!-- Test Failed Modal --}}
107+
<div class="col-lg-8 mt-5">
108+
<div class="br-10 overflow-hidden">
109+
<div class="bg-gradient-dpink px-md-5 px-4 py-5 position-relative"
110+
style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;">
111+
<div class="row no-gutters align-items-center white">
112+
<div class="border round border-white all-center s-100x100">
113+
<img src="https://minio.codingblocks.com/amoeba/e2c13faa-f538-48d4-8ca1-88728a07c51a.svg">
114+
</div>
115+
<div class="flex-1 pl-4">
116+
<div style="font-size: 2rem;">Skill Assessment Report</div>
117+
<div class="mt-1 bold" style="font-size: 2rem;">Frontend Development</div>
118+
</div>
119+
</div>
120+
</div>
121+
<div class="bg-white p-md-5 p-4">
122+
<div class="row no-gutters align-items-center justify-content-between pb-5 mb-5 border-bottom">
123+
<div class="flex-1">
124+
<div class="row no-gutters align-items-center">
125+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/tick_solid.svg">
126+
<div class="flex-1 pl-4">
127+
<div class="font-mdxl green bold">Congratulations</div>
128+
<div class="font-md mt-2">You are eligible for this course</div>
129+
</div>
130+
</div>
131+
</div>
132+
<div>
133+
<ul class="divided-list">
134+
<li class="px-5">
135+
<div class="font-mdxl green bold mb-2">10</div>
136+
<div class="font-md">Questions</div>
137+
</li>
138+
<li class="px-5">
139+
<div class="font-mdxl green bold mb-2">07</div>
140+
<div class="font-md">Correct</div>
141+
</li>
142+
</ul>
143+
</div>
144+
</div>
145+
<div class="mb-5">
146+
<div class="font-mds med-grey">BASED ON YOUR TEST RESULTS</div>
147+
<div class="font-mds mt-1 bold">We recommend you these courses instead!</div>
148+
</div>
149+
150+
<div class="row c-card-carousel">
151+
<div class="col-5">
152+
<div class="br-10 overflow-hidden">
153+
<div class="row no-gutters justify-content-between align-items-center bg-gradient-pink py-4 px-lg-5 px-4">
154+
<div class="flex-1 pr-4 white" style="max-width: calc(100% - 75px);">
155+
<div class="card-xs chars-spaced">BEGINNERS COURSE</div>
156+
<h5 class="bold mt-1 text-ellipses">Android App Dev.</h5>
157+
<div class="row no-gutters align-items-center mt-2">
158+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/pos-rating-small.svg" class="mr-1">
159+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/pos-rating-small.svg" class="mr-1">
160+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/pos-rating-small.svg" class="mr-1">
161+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/pos-rating-small.svg" class="mr-1">
162+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/neg-rating-small.svg" class="mr-1">
163+
<div class="flex-1 card-md ml-1 d-sm-flex d-none">
164+
<strong>4.8/5.0,</strong>
165+
&nbsp;435&nbsp;ratings
166+
</div>
167+
<div class="col-12 card-md mt-2 d-sm-none">
168+
<strong>4.8/5.0,</strong>
169+
&nbsp;435&nbsp;ratings
170+
</div>
171+
</div>
172+
<div class="divider-h my-4 bg-med-grey"></div>
173+
<div class="card-sm bold">Starting from</div>
174+
<div class="v-align-ma">
175+
<span class="mr-sm-4 mr-2 font-lg bold">&#8377;&nbsp;3499</span>
176+
<span class="font-sm bold med-grey"><del>&#8377;&nbsp;12999</del></span>
177+
</div>
178+
</div>
179+
<div class="s-70x70 round border p-2 all-center border-2 border-white bg-inherit">
180+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/android.svg">
181+
</div>
182+
</div>
183+
</div>
184+
</div>
185+
<div class="col-5">
186+
<div class="br-10 overflow-hidden">
187+
<div class="row no-gutters justify-content-between align-items-center bg-gradient-pink py-4 px-lg-5 px-4">
188+
<div class="flex-1 pr-4 white" style="max-width: calc(100% - 75px);">
189+
<div class="card-xs chars-spaced">BEGINNERS COURSE</div>
190+
<h5 class="bold mt-1 text-ellipses">Android App Dev.</h5>
191+
<div class="row no-gutters align-items-center mt-2">
192+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/pos-rating-small.svg" class="mr-1">
193+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/pos-rating-small.svg" class="mr-1">
194+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/pos-rating-small.svg" class="mr-1">
195+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/pos-rating-small.svg" class="mr-1">
196+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/neg-rating-small.svg" class="mr-1">
197+
<div class="flex-1 card-md ml-1 d-sm-flex d-none">
198+
<strong>4.8/5.0,</strong>
199+
&nbsp;435&nbsp;ratings
200+
</div>
201+
<div class="col-12 card-md mt-2 d-sm-none">
202+
<strong>4.8/5.0,</strong>
203+
&nbsp;435&nbsp;ratings
204+
</div>
205+
</div>
206+
<div class="divider-h my-4 bg-med-grey"></div>
207+
<div class="card-sm bold">Starting from</div>
208+
<div class="v-align-ma">
209+
<span class="mr-sm-4 mr-2 font-lg bold">&#8377;&nbsp;3499</span>
210+
<span class="font-sm bold med-grey"><del>&#8377;&nbsp;12999</del></span>
211+
</div>
212+
</div>
213+
<div class="s-70x70 round border p-2 all-center border-2 border-white bg-inherit">
214+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/android.svg">
215+
</div>
216+
</div>
217+
</div>
218+
</div>
219+
<div class="col-5">
220+
<div class="br-10 overflow-hidden">
221+
<div class="row no-gutters justify-content-between align-items-center bg-gradient-pink py-4 px-lg-5 px-4">
222+
<div class="flex-1 pr-4 white" style="max-width: calc(100% - 75px);">
223+
<div class="card-xs chars-spaced">BEGINNERS COURSE</div>
224+
<h5 class="bold mt-1 text-ellipses">Android App Dev.</h5>
225+
<div class="row no-gutters align-items-center mt-2">
226+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/pos-rating-small.svg" class="mr-1">
227+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/pos-rating-small.svg" class="mr-1">
228+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/pos-rating-small.svg" class="mr-1">
229+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/pos-rating-small.svg" class="mr-1">
230+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/neg-rating-small.svg" class="mr-1">
231+
<div class="flex-1 card-md ml-1 d-sm-flex d-none">
232+
<strong>4.8/5.0,</strong>
233+
&nbsp;435&nbsp;ratings
234+
</div>
235+
<div class="col-12 card-md mt-2 d-sm-none">
236+
<strong>4.8/5.0,</strong>
237+
&nbsp;435&nbsp;ratings
238+
</div>
239+
</div>
240+
<div class="divider-h my-4 bg-med-grey"></div>
241+
<div class="card-sm bold">Starting from</div>
242+
<div class="v-align-ma">
243+
<span class="mr-sm-4 mr-2 font-lg bold">&#8377;&nbsp;3499</span>
244+
<span class="font-sm bold med-grey"><del>&#8377;&nbsp;12999</del></span>
245+
</div>
246+
</div>
247+
<div class="s-70x70 round border p-2 all-center border-2 border-white bg-inherit">
248+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/android.svg">
249+
</div>
250+
</div>
251+
</div>
252+
</div>
253+
</div>
254+
</div>
255+
</div>
256+
</div>
57257
</div>

‎sass/styles/applications/online-cb/_application.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,5 @@
1313
@import "form-input.scss";
1414
@import "hamburger-nav.scss";
1515
@import "img-card.scss";
16+
@import "divided-list-horizontal.scss";
1617
}

‎sass/styles/applications/online-cb/divided-list-horizontal.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.divided-list {
2+
& > * {
3+
&:not(:last-child) {
4+
border-right: solid 1px $hover-grey;
5+
}
6+
}
7+
}

0 commit comments

Comments
 (0)