Skip to content

Commit 142ddf1

Browse files
committed
Merge branch 'dmahajan980-master'
Changes: Some UI changes Timer speed fix Static Leaderboard added
2 parents 014f4e2 + 9728298 commit 142ddf1

22 files changed

+291
-83
lines changed

README.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Blind Coding
2+
3+
## Bugs to be fixed/ Features to be added
4+
- [X] Timer is not working properly, fix it
5+
- [ ] When user gets a question correct, automatically redirect to next question
6+
- [ ] Add a live leaderboard
7+
- [ ] Change frontend
8+
- [ ] Add details in about section
9+
- [ ] Cursor does not goes up in the editor, fix it
10+
- [ ] Do Backend stuff - do not put keys as it is within the files
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.

blind_coding/db.sqlite3

3 KB
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.

blind_coding/main_app/templates/loggedIn.html

+25-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
77
<title>Blind Coding: A Coding Club event for APOGEE</title>
88
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700" rel="stylesheet">
9-
{% load staticfiles %}
9+
{% load static %}
1010
<link rel="stylesheet" href="../../static/css/style-1.css">
1111
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
1212
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
@@ -101,11 +101,11 @@ <h5>Question 1</h5>
101101
</div>
102102

103103
<div class="editor ">
104-
<textarea id="codeInput" class="no-copy-paste noselect" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="//Write your code here!"></textarea>
104+
<textarea id="codeInput" class="no-copy-paste noselect" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="// Write your code here!"></textarea>
105105
</div>
106106

107107
<div class="outputArea">
108-
<textarea id="compilerOutput" class="no-copy-paste noselect" autocorrect="off" autocapitalize="off" spellcheck="false" disabled placeholder="//Output will be shown here when you click 'Run'!"></textarea>
108+
<textarea id="compilerOutput" class="no-copy-paste noselect" autocorrect="off" autocapitalize="off" spellcheck="false" disabled placeholder="// Output will be shown here when you click 'Run'!"></textarea>
109109
</div>
110110

111111
<div class="options">
@@ -118,6 +118,28 @@ <h5>Question 1</h5>
118118
<span><i class="material-icons">star_border</i><span id="score">00</span></span>
119119
<span><i class="material-icons">timer</i><span id="timer">00:00</span></span>
120120
</div>
121+
<div class="leaderboard-icon">
122+
<i class="material-icons li">insert_chart</i>
123+
</div>
124+
<div class="leaderboard">
125+
<table>
126+
<tr>
127+
<th class="rank">Rank</th>
128+
<th class="name">Name</th>
129+
<th class="score">Points</th>
130+
</tr>
131+
<tr>
132+
<td class="rank">1</td class="rank">
133+
<td class="name">DM</td class="name">
134+
<td class="score">50</td class="score">
135+
</tr>
136+
<tr>
137+
<td class="rank">2</td class="rank">
138+
<td class="name">BK</td class="name">
139+
<td class="score">10</td class="score">
140+
</tr>
141+
</table>
142+
</div>
121143
<div id="footer">
122144
<p>&copy; Coding Club ,2019</p>
123145
<img src="../../static/assets/club-logo.svg" class="club-logo">

blind_coding/static/css/style-1.css

+112-28
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ outline: none;
9797
margin-top: 10px;
9898
margin-right: 10px;
9999
background: none;
100+
box-shadow: none;
100101
margin-top: 0;
101102
}
102103

@@ -106,13 +107,14 @@ outline: none;
106107
margin: 0;
107108
display: flex;
108109
justify-content: flex-end;
110+
margin-top: calc(3vh - 8px);
109111
}
110112

111113
.title {
112114
color: white;
113115
position: absolute;
114-
left: 40px;
115-
top: 20px;
116+
left: calc(3vh + 50px);
117+
top: 3vh;
116118
margin: 0;
117119
font-size: 25px;
118120
z-index: 2;
@@ -121,8 +123,21 @@ outline: none;
121123
#header ul li {
122124
font-size: 20px;
123125
color: #f5f5f5;
124-
margin: 5px 20px;
126+
padding: 10px 30px;
127+
border-radius: 25px;
128+
margin: 5px;
125129
cursor: pointer;
130+
transition: all 100ms linear;
131+
line-height: 100%;
132+
}
133+
134+
#header ul li:hover {
135+
background-color: rgba(57, 255, 216, 0.8);
136+
}
137+
138+
nav#header ul a {
139+
line-height: 100%;
140+
padding: 0;
126141
}
127142

128143
#main {
@@ -135,6 +150,7 @@ outline: none;
135150
flex-direction: column;
136151
color: white;
137152
font-size: 16px;
153+
padding: 25px 15px;
138154
sizing: expand;
139155
}
140156

@@ -148,7 +164,7 @@ outline: none;
148164
top: 10px;
149165
right: 10px;
150166
min-height: 83vh;
151-
border-radius: 10px;
167+
border-radius: 20px;
152168
}
153169
/* #main > nav {
154170
background: #D7E8D4;
@@ -169,19 +185,24 @@ outline: none;
169185
button {
170186
outline: none;
171187
font-size: 20px;
172-
padding: 0px 20px;
188+
padding: 15px 20px;
173189
width: 15vw;
174-
min-height: 7vh;
190+
/* min-height: 7vh; */
175191
display: flex;
176192
align-items: center;
177193
justify-content: center;
178194
color: whitesmoke;
179195
background-color: #0d0a26;
180196
border: 0.5px solid whitesmoke;
181-
border-radius: 5px;
197+
border-radius: 50px;
182198
margin: 10px 0;
183199
cursor: pointer;
184200
margin-right: 20px;
201+
transition: all 100ms linear;
202+
}
203+
204+
button:hover {
205+
background-color: rgba(57, 255, 216, 0.8);
185206
}
186207

187208
button:focus {
@@ -207,7 +228,7 @@ header, footer, .left,.right {
207228

208229
.language {
209230
height: 7vh;
210-
margin: 10px 0;
231+
margin: 0 0 5px 0;
211232
}
212233

213234
#langSelect {
@@ -225,17 +246,19 @@ header, footer, .left,.right {
225246

226247
.select-wrapper input.select-dropdown {
227248
color: whitesmoke !important;
249+
padding: 0 20px !important;
250+
box-sizing: border-box !important;
228251
}
229252

230253
.editor {
231254
height: 36vh;
232255
}
233256

234257
.editor textarea {
235-
padding: 10px;
258+
padding: 20px;
236259
width: 100%;
237260
height: 100%;
238-
border-radius: 10px;
261+
border-radius: 20px;
239262
resize: none;
240263
box-sizing: border-box;
241264
font-family: 'Montserrat', sans-serif;
@@ -253,10 +276,10 @@ textarea:focus {
253276
}
254277

255278
#compilerOutput {
256-
padding: 10px;
279+
padding: 20px;
257280
width: 100%;
258281
height: 100%;
259-
border-radius: 10px;
282+
border-radius: 20px;
260283
font-family: 'Montserrat', sans-serif;
261284
box-sizing: border-box;
262285
color: white;
@@ -293,20 +316,53 @@ textarea:focus {
293316

294317
}
295318

319+
.leaderboard-icon {
320+
padding: 20px;
321+
position: absolute;
322+
bottom: 10px;
323+
left: 15px;
324+
cursor: pointer;
325+
background: black;
326+
border: 0.5px solid whitesmoke;
327+
border-radius: 50%;
328+
display: flex;
329+
}
330+
331+
.leaderboard-icon .material-icons {
332+
font-size: 24px;
333+
/* transform: scale(1.2); */
334+
color: white;
335+
}
336+
337+
.leaderboard {
338+
height: 75vh;
339+
width: 90vh;
340+
background: black;
341+
border: 0.5px solid whitesmoke;
342+
border-radius: 20px;
343+
position: absolute;
344+
bottom: 13vh;
345+
left: 15px;
346+
padding: 20px;
347+
display: none;
348+
overflow-y:scroll;
349+
}
350+
296351
.scoreboard {
297352
position: absolute;
298353
display: flex;
299354
justify-content: center;
300355
align-items: center;
301-
left: 10px;
356+
left: 100px;
302357
bottom: 10px;
303-
width: 20vw;
304-
height: 10vh;
358+
width: auto;
359+
height: auto;
305360
background: black;
306361
border: 0.5px solid whitesmoke;
307-
border-radius: 7px;
362+
border-radius: 50px;
308363
color: white;
309364
font-size: 20px;
365+
padding: 10px 25px;
310366
}
311367

312368
.scoreboard > span {
@@ -324,14 +380,42 @@ textarea:focus {
324380
color: #bbb;
325381
}
326382

383+
table {
384+
color: white;
385+
}
386+
387+
tr {
388+
height: auto;
389+
}
390+
391+
tr:nth-child(1) {
392+
border-bottom: 1px solid white;
393+
}
394+
395+
tr th {
396+
padding: 15px 5px;
397+
}
398+
399+
tr td {
400+
padding: 10px 5px;
401+
}
402+
403+
tr td, tr th {
404+
text-align: center;
405+
}
406+
407+
.rank, .score {
408+
width: 20px;
409+
}
410+
327411
/* Sidenav */
328412

329413
.hamburger {
330414
cursor: pointer;
331415
width: 28px;
332416
position: absolute;
333-
top: 20px;
334-
left: 5px;
417+
top: 3vh;
418+
left: 3vh;
335419
z-index: 10;
336420
}
337421
.hamburger .line {
@@ -456,8 +540,8 @@ textarea:focus {
456540
left: 50%;
457541
transform: translate(-50%, -50%);
458542
background: white;
459-
width: 5px;
460-
height: 30px;
543+
width: 4px;
544+
height: 24px;
461545
}
462546

463547
.h-line {
@@ -466,8 +550,8 @@ textarea:focus {
466550
left: 50%;
467551
transform: translate(-50%, -50%);
468552
background: white;
469-
width: 30px;
470-
height: 5px;
553+
width: 24px;
554+
height: 4px;
471555
}
472556

473557
#sidenav ul {
@@ -483,23 +567,23 @@ textarea:focus {
483567
display: flex;
484568
align-items: center;
485569
margin: 0;
486-
padding: 15px;
487-
height: 15vh;
570+
padding: 0 15px;
571+
height: 11vh;
488572
width: 100%;
489573
box-sizing: border-box;
490574
}
491575

492576
a {
493-
font-size: 17px;
494-
margin: 0 10px;
577+
font-size: 1.4rem;
578+
margin-left: 10px;
495579
text-decoration: none;
496580
color: white !important;
497581
transition: 0.2s ease-in-out;
498582
cursor: pointer
499583
}
500584

501-
a:hover {
502-
border-bottom: 0.3px solid whitesmoke;
585+
#header ul a li:hover {
586+
background-color: rgba(255, 40, 0, 1);
503587
}
504588

505589
#codeInput{

0 commit comments

Comments
 (0)