Skip to content

Commit cb94b1e

Browse files
SysSn13SysSn13
committed
added FAQ
1 parent bc9aea0 commit cb94b1e

File tree

2 files changed

+192
-10
lines changed

2 files changed

+192
-10
lines changed

‎public/stylesheets/main.css

+95-6
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,15 @@ body {
22
margin: 0;
33
color: rgba(0, 0, 0, 0.65);
44
font-size: 14px;
5-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
5+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
6+
"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica,
7+
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
8+
"Segoe UI Symbol";
69
font-variant: tabular-nums;
710
line-height: 1.5;
811
background-color: #fff;
9-
-webkit-font-feature-settings: 'tnum';
10-
font-feature-settings: 'tnum';
12+
-webkit-font-feature-settings: "tnum";
13+
font-feature-settings: "tnum";
1114
}
1215

1316
#forkMe {
@@ -18,7 +21,7 @@ body {
1821
position: fixed;
1922
text-align: center;
2023
text-decoration: none;
21-
letter-spacing: .06em;
24+
letter-spacing: 0.06em;
2225
background-color: #337ab7;
2326
padding: 0.5em 5em 0.4em 5em;
2427
text-shadow: 0 0 0.75em #444;
@@ -32,7 +35,7 @@ body {
3235
}
3336

3437
#forkMe:before {
35-
content: '';
38+
content: "";
3639
top: 0;
3740
left: 0;
3841
right: 0;
@@ -82,4 +85,90 @@ a {
8285
background-color: #337ab7 !important;
8386
border-color: #337ab7 !important;
8487
box-shadow: 0 0 0 0.25rem #e9edf1 !important;
85-
}
88+
}
89+
90+
th,
91+
td {
92+
font-size: medium;
93+
}
94+
/* FAQ */
95+
96+
:root {
97+
--color-text: hsl(207, 10%, 40%);
98+
--color-text-muted: hsl(213, 10%, 40%);
99+
--color-skyblue: rgb(90, 149, 205);
100+
}
101+
102+
.accordion {
103+
max-width: 42rem;
104+
padding: 1.2rem 0;
105+
border-radius: 1rem;
106+
background: white;
107+
/* box-shadow: 0 0 5rem lightgrey; */
108+
}
109+
110+
.accordion__heading {
111+
margin-bottom: 1rem;
112+
padding: 0 1.4rem;
113+
}
114+
115+
.accordion__item:not(:last-child) {
116+
border-bottom: 1px solid lightgrey;
117+
}
118+
119+
.accordion__btn {
120+
display: flex;
121+
justify-content: space-between;
122+
align-items: center;
123+
width: 100%;
124+
padding: 1.2rem 1.4rem;
125+
background: white;
126+
border: none;
127+
outline: none;
128+
color: var(--color-text);
129+
font-size: medium;
130+
text-align: left;
131+
cursor: pointer;
132+
transition: 0.1s;
133+
}
134+
.accordion__btn:hover {
135+
color: var(--color-skyblue);
136+
background: hsl(248, 53%, 97%);
137+
}
138+
139+
.accordion__item--active .accordion__btn {
140+
color: var(--color-skyblue);
141+
border-bottom: 2px solid var(--color-skyblue);
142+
background: hsl(248, 53%, 97%);
143+
}
144+
145+
.fa-lightbulb {
146+
padding-right: 1rem;
147+
}
148+
.accordion__icon {
149+
border-radius: 50%;
150+
transform: rotate(0deg);
151+
transition: 0.3s ease-in-out;
152+
opacity: 0.9;
153+
}
154+
.accordion__item--active .accordion__icon {
155+
transform: rotate(135deg);
156+
}
157+
158+
.accordion__content {
159+
font-weight: 300;
160+
max-height: 0;
161+
opacity: 0;
162+
color: var(--color-text-muted);
163+
transform: translateX(16px);
164+
transition: max-height 0.5s ease, opacity 0.5s, transform 0.5s;
165+
}
166+
.accordion__content p {
167+
padding: 1rem 1.8rem;
168+
}
169+
170+
.accordion__item--active .accordion__content {
171+
opacity: 1;
172+
transform: translateX(0px);
173+
max-height: 100vh;
174+
}

‎views/index.ejs

+97-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<link rel="stylesheet" href="/stylesheets/tablestyle.css">
22
<link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
3+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
34
<section class="content mt-5">
45
<div class="mb-4 text-center">
5-
<h2 style="font-weight: bold;">Leetcode Rating Predictor</h2>
6-
<div class="text-muted">
6+
<h1 style="font-weight: bold;">Leetcode Rating Predictor</h1>
7+
<h5 class="text-muted">
78
<i>Get your rating changes right after the completion of Leetcode contests</i>
8-
</div>
9+
</h5>
910
</div>
1011
<div class="container">
1112
<div class="d-flex justify-content-around">
@@ -87,6 +88,82 @@
8788
</div>
8889
</section>
8990

91+
<br>
92+
93+
<section>
94+
95+
<div class="accordion m-auto">
96+
<h3 class="accordion__heading text-center">Frequently Asked Questions</h2>
97+
98+
<div class="accordion__item">
99+
<button class="accordion__btn">
100+
101+
<span class="accordion__caption"><i class="far fa-lightbulb"></i>What is Leetcode Rating Predictor?</span>
102+
<span class="accordion__icon"><i class="fa fa-plus"></i></span>
103+
</button>
104+
105+
<div class="accordion__content">
106+
<p>It takes about 4-5 days for leetcode to update the contest ratings of participants. So you have to wait for a long time to know your rating changes. This application predicts accurate leetcode rating changes for all the contestants within a few minutes of completion of the contest.
107+
108+
</p>
109+
</div>
110+
</div>
111+
112+
113+
114+
<div class="accordion__item">
115+
<button class="accordion__btn">
116+
117+
<span class="accordion__caption"><i class="far fa-lightbulb"></i>Is it 100 percent accurate?</span>
118+
<span class="accordion__icon"><i class="fa fa-plus"></i></span>
119+
</button>
120+
121+
<div class="accordion__content">
122+
<p>
123+
It implements leetcode's latest rating prediction algorithm. Rating predictions are very close to the original rating but the accuracy may not be 100% due to changes in contest rankings after the completion of contest (leetcode rejudges some submissons).
124+
</p>
125+
</div>
126+
</div>
127+
128+
<div class="accordion__item">
129+
<button class="accordion__btn">
130+
131+
<span class="accordion__caption"><i class="far fa-lightbulb"></i>How much time does it take to predict ratings?</span>
132+
<span class="accordion__icon"><i class="fa fa-plus"></i></span>
133+
</button>
134+
135+
<div class="accordion__content">
136+
<p>It takes around 15 minutes after the completion of contest to make predictions. Sometimes leetcode takes more time to update the final rankings. So it also rejudges the ratings after 1 hour of the contest. </p>
137+
</div>
138+
</div>
139+
<div class="accordion__item">
140+
<button class="accordion__btn">
141+
142+
<span class="accordion__caption"><i class="far fa-lightbulb"></i>How to use the chrome-extension?</span>
143+
<span class="accordion__icon"><i class="fa fa-plus"></i></span>
144+
</button>
145+
146+
<div class="accordion__content">
147+
<p>You need to install <a href="https://chrome.google.com/webstore/detail/lc-predictor/jfhgaegpgiepniiebglgjhhfnjcibphh"
148+
target="_blank">LC Predictor extension</a> from Chrome Web Store. After installing the extension you will see the rating changes on the Leetcode contest ranking pages.
149+
</p>
150+
</div>
151+
</div>
152+
153+
<div class="accordion__item">
154+
<button class="accordion__btn">
155+
<span class="accordion__caption"><i class="far fa-lightbulb"></i>How can I contribute?</span>
156+
<span class="accordion__icon"><i class="fa fa-plus"></i></span>
157+
</button>
158+
159+
<div class="accordion__content">
160+
<p>You can contribute by creating issues, feature/ pull requests in the <a href="https://github.com/SysSn13/leetcode-rating-predictor" target="_blank"> GitHub Repo</a>. Any meaningful contributions you make are greatly appreciated.
161+
</p>
162+
</div>
163+
</div>
164+
</div>
165+
166+
</section>
90167
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
91168
<script>
92169
(function () {
@@ -111,5 +188,21 @@
111188
localizeDate()
112189
dataTable.on('datatable.page', localizeDate)
113190
dataTable.on('datatable.perpage', localizeDate)
114-
})()
191+
})();
192+
193+
194+
(function(){
195+
const accItems = document.querySelectorAll(".accordion__item");
196+
197+
accItems.forEach((acc) => acc.addEventListener("click", toggleAcc));
198+
199+
function toggleAcc() {
200+
accItems.forEach((item) => item != this ? item.classList.remove("accordion__item--active") : null
201+
);
202+
203+
if (this.classList != "accordion__item--active") {
204+
this.classList.toggle("accordion__item--active");
205+
}
206+
}
207+
})()
115208
</script>

0 commit comments

Comments
 (0)