© Coding Club ,2019
diff --git a/blind_coding/static/css/style-1.css b/blind_coding/static/css/style-1.css
index 833945a..f30cb81 100644
--- a/blind_coding/static/css/style-1.css
+++ b/blind_coding/static/css/style-1.css
@@ -97,6 +97,7 @@ outline: none;
margin-top: 10px;
margin-right: 10px;
background: none;
+ box-shadow: none;
margin-top: 0;
}
@@ -106,13 +107,14 @@ outline: none;
margin: 0;
display: flex;
justify-content: flex-end;
+ margin-top: calc(3vh - 8px);
}
.title {
color: white;
position: absolute;
- left: 40px;
- top: 20px;
+ left: calc(3vh + 50px);
+ top: 3vh;
margin: 0;
font-size: 25px;
z-index: 2;
@@ -121,8 +123,21 @@ outline: none;
#header ul li {
font-size: 20px;
color: #f5f5f5;
- margin: 5px 20px;
+ padding: 10px 30px;
+ border-radius: 25px;
+ margin: 5px;
cursor: pointer;
+ transition: all 100ms linear;
+ line-height: 100%;
+}
+
+#header ul li:hover {
+ background-color: rgba(57, 255, 216, 0.8);
+}
+
+nav#header ul a {
+ line-height: 100%;
+ padding: 0;
}
#main {
@@ -135,6 +150,7 @@ outline: none;
flex-direction: column;
color: white;
font-size: 16px;
+ padding: 25px 15px;
sizing: expand;
}
@@ -148,7 +164,7 @@ outline: none;
top: 10px;
right: 10px;
min-height: 83vh;
- border-radius: 10px;
+ border-radius: 20px;
}
/* #main > nav {
background: #D7E8D4;
@@ -169,19 +185,24 @@ outline: none;
button {
outline: none;
font-size: 20px;
- padding: 0px 20px;
+ padding: 15px 20px;
width: 15vw;
- min-height: 7vh;
+ /* min-height: 7vh; */
display: flex;
align-items: center;
justify-content: center;
color: whitesmoke;
background-color: #0d0a26;
border: 0.5px solid whitesmoke;
- border-radius: 5px;
+ border-radius: 50px;
margin: 10px 0;
cursor: pointer;
margin-right: 20px;
+ transition: all 100ms linear;
+}
+
+button:hover {
+ background-color: rgba(57, 255, 216, 0.8);
}
button:focus {
@@ -207,7 +228,7 @@ header, footer, .left,.right {
.language {
height: 7vh;
- margin: 10px 0;
+ margin: 0 0 5px 0;
}
#langSelect {
@@ -225,6 +246,8 @@ header, footer, .left,.right {
.select-wrapper input.select-dropdown {
color: whitesmoke !important;
+ padding: 0 20px !important;
+ box-sizing: border-box !important;
}
.editor {
@@ -232,10 +255,10 @@ header, footer, .left,.right {
}
.editor textarea {
- padding: 10px;
+ padding: 20px;
width: 100%;
height: 100%;
- border-radius: 10px;
+ border-radius: 20px;
resize: none;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
@@ -253,10 +276,10 @@ textarea:focus {
}
#compilerOutput {
- padding: 10px;
+ padding: 20px;
width: 100%;
height: 100%;
- border-radius: 10px;
+ border-radius: 20px;
font-family: 'Montserrat', sans-serif;
box-sizing: border-box;
color: white;
@@ -293,20 +316,52 @@ textarea:focus {
}
+.leaderboard-icon {
+ padding: 20px;
+ position: absolute;
+ bottom: 10px;
+ left: 15px;
+ cursor: pointer;
+ background: black;
+ border: 0.5px solid whitesmoke;
+ border-radius: 50%;
+ display: flex;
+}
+
+.leaderboard-icon .material-icons {
+ font-size: 24px;
+ /* transform: scale(1.2); */
+ color: white;
+}
+
+.leaderboard {
+ height: 75vh;
+ width: 90vh;
+ background: black;
+ border: 0.5px solid whitesmoke;
+ border-radius: 20px;
+ position: absolute;
+ bottom: 13vh;
+ left: 15px;
+ padding: 20px;
+ display: none;
+}
+
.scoreboard {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
- left: 10px;
+ left: 100px;
bottom: 10px;
- width: 20vw;
- height: 10vh;
+ width: auto;
+ height: auto;
background: black;
border: 0.5px solid whitesmoke;
- border-radius: 7px;
+ border-radius: 50px;
color: white;
font-size: 20px;
+ padding: 10px 25px;
}
.scoreboard > span {
@@ -324,14 +379,42 @@ textarea:focus {
color: #bbb;
}
+table {
+ color: white;
+}
+
+tr {
+ height: auto;
+}
+
+tr:nth-child(1) {
+ border-bottom: 1px solid white;
+}
+
+tr th {
+ padding: 15px 5px;
+}
+
+tr td {
+ padding: 10px 5px;
+}
+
+tr td, tr th {
+ text-align: center;
+}
+
+.rank, .score {
+ width: 20px;
+}
+
/* Sidenav */
.hamburger {
cursor: pointer;
width: 28px;
position: absolute;
- top: 20px;
- left: 5px;
+ top: 3vh;
+ left: 3vh;
z-index: 10;
}
.hamburger .line {
@@ -456,8 +539,8 @@ textarea:focus {
left: 50%;
transform: translate(-50%, -50%);
background: white;
- width: 5px;
- height: 30px;
+ width: 4px;
+ height: 24px;
}
.h-line {
@@ -466,8 +549,8 @@ textarea:focus {
left: 50%;
transform: translate(-50%, -50%);
background: white;
- width: 30px;
- height: 5px;
+ width: 24px;
+ height: 4px;
}
#sidenav ul {
@@ -483,23 +566,23 @@ textarea:focus {
display: flex;
align-items: center;
margin: 0;
- padding: 15px;
- height: 15vh;
+ padding: 0 15px;
+ height: 11vh;
width: 100%;
box-sizing: border-box;
}
a {
- font-size: 17px;
- margin: 0 10px;
+ font-size: 1.4rem;
+ margin-left: 10px;
text-decoration: none;
color: white !important;
transition: 0.2s ease-in-out;
cursor: pointer
}
-a:hover {
- border-bottom: 0.3px solid whitesmoke;
+#header ul a li:hover {
+ background-color: rgba(255, 40, 0, 1);
}
#codeInput{
diff --git a/blind_coding/static/css/style.css b/blind_coding/static/css/style.css
index a32bef0..117cf79 100644
--- a/blind_coding/static/css/style.css
+++ b/blind_coding/static/css/style.css
@@ -6,16 +6,16 @@ body, html {
background-attachment: fixed;
background-size: cover;
box-sizing: border-box;
- font-family: 'Montserrat', sans-serif;
+ font-family: "Red Hat Display", 'Montserrat', sans-serif;
overflow: hidden;
}
#apogeeLogo {
position: absolute;
- top: 20px;
- left: 25px;
- width: 200px;
- height: 95px;
+ top: 1vw;
+ left: 2vw;
+ width: 160px;
+ height: 80px;
}
.backdrop {
@@ -86,7 +86,7 @@ body, html {
#header {
width: 100%;
- margin-top: 10px;
+ margin-top: 3vh;
margin-right: 10px;
}
@@ -96,13 +96,21 @@ body, html {
margin: 0;
display: flex;
justify-content: flex-end;
+ padding-right: 3vw;
}
#header ul li {
font-size: 20px;
color: #f5f5f5;
- margin: 5px 20px;
+ padding: 10px 30px;
+ border-radius: 25px;
+ margin: 5px;
cursor: pointer;
+ transition: all 100ms linear;
+}
+
+#header ul li:hover {
+ background-color: rgba(57, 255, 216, 0.8);
}
#content {
@@ -112,8 +120,12 @@ body, html {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- display: flex;
- flex-flow: column;
+ /* display: flex;
+ flex-flow: column; */
+}
+
+#content a, #header a {
+ text-decoration: none;
}
.row {
@@ -122,19 +134,25 @@ body, html {
#content button {
outline: none;
- font-size: 20px;
- padding: 0px 20px;
- width: 15vw;
+ font-size: 1.15rem;
+ padding: 0px 40px;
+ width: auto;
min-height: 7vh;
display: flex;
align-items: center;
justify-content: center;
color: whitesmoke;
- background-color: #0d0a26;
- border: 0.5px solid whitesmoke;
- border-radius: 5px;
+ background-color: rgba(15, 10, 38, 0.8);
+ border: 1px solid whitesmoke;
+ font-family: "Red Hat Display", 'Montserrat', sans-serif;
+ border-radius: 3.5vh;
margin: 10px 0;
cursor: pointer;
+ transition: all 100ms linear;
+}
+
+#content button:hover {
+ background-color: rgba(57, 255, 216, 0.8);
}
#content button:focus {
@@ -152,12 +170,20 @@ body, html {
.title {
font-size: 45px;
font-weight: bold;
+ margin-bottom: 0;
}
.descrip {
width: 90%;
+ line-height: 1.7;
+ font-size: 1.05rem;
+ margin-bottom: 4vh;
}
+/* br:nth-child(2) {
+ display: none;
+} */
+
#event-logo {
position: relative;
margin-top: 70px;
@@ -184,8 +210,8 @@ body, html {
.club-logo {
position: absolute;
- bottom: 10px;
- right: 10px;
+ bottom: 2vw;
+ right: 2vw;
width: 70px;
height: 70px;
}
\ No newline at end of file
diff --git a/blind_coding/static/js/app.js b/blind_coding/static/js/app.js
index 2eb2ffc..fd4bbaa 100644
--- a/blind_coding/static/js/app.js
+++ b/blind_coding/static/js/app.js
@@ -29,7 +29,20 @@ inp.addEventListener('select', function() {
if (ctrlDown && (e.keyCode == cKey)) console.log("Document catch Ctrl+C");
if (ctrlDown && (e.keyCode == vKey)) console.log("Document catch Ctrl+V");
});
-
+
+ let i = 0;
+ $('.leaderboard-icon').click(function() {
+ $('.leaderboard').fadeToggle();
+ if (i === 0) {
+ $('.li').html('cancel');
+ i = 1
+ // insert_chart
+ }
+ else {
+ $('.li').html('insert_chart')
+ i = 0;
+ }
+ })
});
const languages = ['c','java','cpp','cpp14','python2','python3'];
@@ -138,7 +151,6 @@ const sendRequest = (method,url,data) => {
ourRequest.setRequestHeader("X-CSRFToken", csrf_token);
ourRequest.onload = function() {
if (ourRequest.status >= 200 && ourRequest.status < 400) {
- // console.log('output: ');
if(url == 'runCode/'){
let recievedData = JSON.parse(ourRequest.responseText);
setOutput(recievedData);
@@ -284,6 +296,7 @@ document.addEventListener('DOMContentLoaded', function() {
});
let hamburger = document.querySelector(".hamburger");
+ const title = document.querySelector('.title')
hamburger.onclick = function(e){
e.preventDefault;
@@ -291,38 +304,74 @@ hamburger.onclick = function(e){
hamburger.classList.remove("active");
hamburger.style.transform = 'translateX(0)';
document.getElementById('sidenav').style.transform = 'translateX(-100%)';
+ title.style.left = 'calc(3vh + 50px)'
}else{
hamburger.classList.add("active");
hamburger.style.transform = 'translateX(21vw)';
document.getElementById('sidenav').style.transform = 'translateX(0)';
+ title.style.left = '3vh'
}
}
-function Submit() {
+// function Submit() {
-}
-
-let start = 0;
-let timerInterval;
-function startClock() {
- timerInterval = setInterval(increaseTime, 1000);
- function increaseTime() {
- ++start;
- if(start >= 60) {
- if(start%60>=10) {
- document.getElementById('timer').innerHTML = "0" + Number(Math.floor(start/60)) + ':' + Number(start%60);
- } else {
- document.getElementById('timer').innerHTML = "0" + Number(Math.floor(start/60)) + ':0' + Number(start%60);
- }
- } else if(start < 60 && start >= 10){
- document.getElementById('timer').innerHTML = '00:' + Number(start);
- } else if(start < 10) {
- document.getElementById('timer').innerHTML = '00:0' + Number(start%60);
- }
-// console.log('Elapsed time: ',start);
+// }
+
+// let start = 0;
+// let timerInterval;
+let timerCont = document.getElementById('timer');
+// function increaseTime()
+// function startClock() {
+// timerInterval = setInterval(function() {
+// start++;
+// if(start >= 60) {
+// if(start%60>=10) {
+// timerCont.innerHTML = "0" + Number(Math.floor(start/60)) + ':' + Number(start%60);
+// } else {
+// timerCont.innerHTML = "0" + Number(Math.floor(start/60)) + ':0' + Number(start%60);
+// }
+// } else if(start < 60 && start >= 10){
+// timerCont.innerHTML = '00:' + Number(start);
+// } else if(start < 10) {
+// timerCont.innerHTML = '00:0' + Number(start%60);
+// }
+// }, 1000);
+// }
+
+// function stopClock() {
+// clearInterval(timerInterval);
+// }
+
+let s = 0, m = 0;
+function increaseTime() {
+
+ setInterval(function() {
+ if (s > 59){
+ s -= 60;
+ m += 1;
+ }
+
+ if (m < 10) {
+ if (s < 10) {
+ timerCont.innerHTML = '0' + m + ':0' + s;
+ }
+ else {
+ timerCont.innerHTML = '0' + m + ':' + s;
+ }
+ }
+ else {
+ if (s < 10) {
+ timerCont.innerHTML = m + ':0' + s;
+ }
+ else {
+ timerCont.innerHTML = + m + ':' + s;
+ }
}
+
+ s++;
+ }, 1000)
+
+
}
-function stopClock() {
- clearInterval(timerInterval);
-}
\ No newline at end of file
+increaseTime()
\ No newline at end of file
diff --git a/blind_coding/static/main/app.js b/blind_coding/static/main/app.js
index 2509cc8..91bd2f8 100644
--- a/blind_coding/static/main/app.js
+++ b/blind_coding/static/main/app.js
@@ -118,4 +118,4 @@ const getQuestion = (queNum) => {
// sample input:
// sample output:
// score of that question
-};
+};
\ No newline at end of file
diff --git a/blind_coding/static/main/css/style-1.css b/blind_coding/static/main/css/style-1.css
index d67e850..c9962e4 100644
--- a/blind_coding/static/main/css/style-1.css
+++ b/blind_coding/static/main/css/style-1.css
@@ -60,3 +60,17 @@ header, footer, .left,.right {
.run,.submit{
width: 10vw;
}
+
+#header ul li {
+ font-size: 20px;
+ color: #f5f5f5;
+ padding: 10px 30px;
+ border-radius: 25px;
+ margin: 5px;
+ cursor: pointer;
+ transition: all 100ms linear;
+}
+
+#header ul li:hover {
+ background-color: rgba(57, 255, 216, 0.8);
+}
\ No newline at end of file
diff --git a/blind_coding/static/main/index.html b/blind_coding/static/main/index.html
index fb6824d..b5638e7 100644
--- a/blind_coding/static/main/index.html
+++ b/blind_coding/static/main/index.html
@@ -5,7 +5,11 @@
@@ -22,15 +26,15 @@
- Blind Coding
This APOGEE, test your competitive coding skills and accuracy! This APOGEE, test your competitive coding skills and accuracy! This APOGEE, test your competitive coding skills and accuracy!
+ 
+ 