mirror of
https://github.com/codeninjasuk/leaderboard.git
synced 2024-11-22 15:27:54 -05:00
Fixed Ranking and UI
This commit is contained in:
elvistony
parent
e9c9cc6702
commit
47e9b12ba1
20 changed files with 435 additions and 357 deletions
|
|
@ -11,7 +11,7 @@ html, body {
|
|||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background: rgb(20, 50, 74);
|
||||
background: rgb(89, 8, 36);
|
||||
}
|
||||
|
||||
.rating {
|
||||
338
assets/css/style.css
Normal file
338
assets/css/style.css
Normal file
|
|
@ -0,0 +1,338 @@
|
|||
html {
|
||||
--black: #21252a;
|
||||
--grey-1: #343A40;
|
||||
--grey-2: #495057;
|
||||
--grey-3: #868E96;
|
||||
--grey-4: #ADB5BD;
|
||||
--grey-5: #CED4DA;
|
||||
--grey-6: #DEE2E6;
|
||||
--grey-7: #E9ECEF;
|
||||
--grey-8: #F1F3F5;
|
||||
--grey-9: #F8F9FA;
|
||||
--trans-black: rgba(33, 37, 42, .9);
|
||||
--red: #e10600;
|
||||
--gold: #ffda65;
|
||||
--gold-dark: #a3862c;
|
||||
--bronze: #c99355;
|
||||
--bronze-dark: #80582c;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Inter UI", system-ui;
|
||||
color: var(--black);
|
||||
background: var(--black);
|
||||
}
|
||||
|
||||
.list {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: 3rem auto 3rem;
|
||||
border-radius: 0.4rem;
|
||||
box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.1), 0px 5px 12px rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.list {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.list__table {
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
color: var(--grey-3);
|
||||
border:none;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.list__header {
|
||||
padding: 2rem 2rem;
|
||||
background: white;
|
||||
border-top-left-radius: 0.4rem;
|
||||
border-top-right-radius: 0.4rem;
|
||||
}
|
||||
|
||||
.list__header h1,
|
||||
.list__header h5 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.list__header h5 {
|
||||
margin-bottom: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.list__footer {
|
||||
padding: 1rem 1rem;
|
||||
background: white;
|
||||
text-align: center;
|
||||
border-bottom-left-radius: 0.4rem;
|
||||
border-bottom-right-radius: 0.4rem;
|
||||
}
|
||||
|
||||
.list__value {
|
||||
display: block;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.list__label {
|
||||
font-size: 10px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.list__row {
|
||||
background: var(--grey-7);
|
||||
cursor: pointer;
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.list__row:hover,
|
||||
.list__row:focus {
|
||||
transform: scale(1.05);
|
||||
/* box-shadow: 0px 15px 28px rgba(0, 0, 0, 0.1), 0px 5px 12px rgba(0, 0, 0, 0.08); */
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.list__row:not(:last-of-type) .list__cell {
|
||||
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.first-place {
|
||||
color: var(--gold-dark);
|
||||
background: var(--grey-9);
|
||||
}
|
||||
|
||||
.first-place .list__cell:first-of-type {
|
||||
background: var(--gold);
|
||||
color: var(--gold-dark);
|
||||
}
|
||||
|
||||
.second-place {
|
||||
color: var(--grey-2);
|
||||
background: var(--grey-9);
|
||||
}
|
||||
|
||||
.second-place .list__cell:first-of-type {
|
||||
background: var(--grey-4);
|
||||
color: var(--grey-2);
|
||||
}
|
||||
|
||||
.third-place {
|
||||
color: var(--bronze-dark);
|
||||
background: var(--grey-9);
|
||||
}
|
||||
|
||||
.third-place .list__cell:first-of-type {
|
||||
background: var(--bronze);
|
||||
color: var(--bronze-dark);
|
||||
}
|
||||
|
||||
.list__cell {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.list__cell:first-of-type {
|
||||
text-align: center;
|
||||
padding: 1rem 0.2rem;
|
||||
background: var(--grey-5);
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--trans-black);
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.overlay.is-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
background: white;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
box-shadow: none;
|
||||
right: -500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
/*@media screen and (max-width: 650px) {
|
||||
flex-direction: column-reverse;
|
||||
justify-content: space-between;
|
||||
}*/
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.sidebar.is-open {
|
||||
right: 0;
|
||||
transition: all 300ms ease;
|
||||
box-shadow: 0px 0px 100px var(--black);
|
||||
}
|
||||
|
||||
.sidebar__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: var(--grey-9);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar__header,
|
||||
.sidebar__body {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.sidebar__title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--grey-4);
|
||||
}
|
||||
|
||||
.button {
|
||||
font-family: inherit;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button:focus,
|
||||
.button:active {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.button--close {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
color: var(--grey-5);
|
||||
}
|
||||
|
||||
.button--close:hover {
|
||||
color: var(--grey--4);
|
||||
}
|
||||
|
||||
.driver {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
left: 100px;
|
||||
-webkit-animation: fade 500ms ease 150ms forwards;
|
||||
animation: fade 500ms ease 150ms forwards;
|
||||
}
|
||||
|
||||
.driver__image {
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background-size: 85px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
border: 3px solid white;
|
||||
/* box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.12); */
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
.driver__content {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.driver__title {
|
||||
font-weight: 700;
|
||||
font-size: 1.6rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.driver__table {
|
||||
width: 100%;
|
||||
color: var(--grey-2);
|
||||
}
|
||||
|
||||
.driver__table small {
|
||||
color: var(--grey-4);
|
||||
}
|
||||
|
||||
.driver__table td {
|
||||
padding: 0.3rem 0.6rem 0.3rem 0;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.driver__table td img {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-badge{
|
||||
width: 35px;
|
||||
background: lightgray;
|
||||
padding: 5px;
|
||||
border-radius: 10px;
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.caps{
|
||||
font-variant: petite-caps;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.a-no-link{
|
||||
text-decoration: none;
|
||||
color: initial;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
BIN
assets/img/activity/build.png
Normal file
BIN
assets/img/activity/build.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
assets/img/activity/discover.png
Normal file
BIN
assets/img/activity/discover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
assets/img/activity/explore.png
Normal file
BIN
assets/img/activity/explore.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
assets/img/activity/project.png
Normal file
BIN
assets/img/activity/project.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
assets/img/activity/solve.png
Normal file
BIN
assets/img/activity/solve.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
BIN
assets/img/belts/White.png
Normal file
BIN
assets/img/belts/White.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
BIN
assets/img/belts/Yellow.png
Normal file
BIN
assets/img/belts/Yellow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
BIN
assets/img/impact.png
Normal file
BIN
assets/img/impact.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
BIN
assets/img/ninja-glasses.png
Normal file
BIN
assets/img/ninja-glasses.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
|
|
@ -31,50 +31,56 @@ tableRow.forEach(tableRow => {
|
|||
const sidebarBody = document.querySelector(".sidebar__body");
|
||||
sidebarBody.innerHTML = '';
|
||||
|
||||
const driverPlace = this.querySelector(".list__cell:nth-of-type(1) .list__value").innerHTML;
|
||||
const driverName = this.querySelector(".list__cell:nth-of-type(2) .list__value").innerHTML;
|
||||
const driverTeam = this.querySelector(".list__cell:nth-of-type(3) .list__value").innerHTML;
|
||||
const driverPoints = this.querySelector(".list__cell:nth-of-type(4) .list__value").innerHTML;
|
||||
const driverImage = this.dataset.image;
|
||||
const ninjaName = this.querySelector(".list__cell:nth-of-type(2) .list__value").innerHTML;
|
||||
const ninjaBelt = this.querySelector(".list__cell:nth-of-type(4) .list__value").innerHTML;
|
||||
const ninjaLevel = this.querySelector(".list__cell:nth-of-type(5) .list__value").innerHTML;
|
||||
const ninjaPicture = this.dataset.image;
|
||||
const ninjaActivity = this.dataset.activity;
|
||||
const driverDOB = this.dataset.dob;
|
||||
const driverCountry = this.dataset.country;
|
||||
const ninjaActivityImg = this.dataset.country;
|
||||
|
||||
const newDriver = document.createElement('div');
|
||||
newDriver.classList = 'driver';
|
||||
const newNinja = document.createElement('div');
|
||||
newNinja.classList = 'driver';
|
||||
|
||||
const driverContent = document.createElement('div');
|
||||
driverContent.classList = 'driver__content';
|
||||
const ninjaContent = document.createElement('div');
|
||||
ninjaContent.classList = 'driver__content';
|
||||
|
||||
const profile = document.createElement('div');
|
||||
profile.classList = 'driver__image';
|
||||
profile.style.backgroundImage = `url('${driverImage}')`;
|
||||
newDriver.appendChild(profile);
|
||||
profile.style.backgroundImage = `url('/assets/img/belts/${ninjaBelt}.png')`;
|
||||
newNinja.appendChild(profile);
|
||||
|
||||
const driverTitle = document.createElement('div');
|
||||
driverTitle.classList = 'driver__title';
|
||||
driverTitle.innerHTML = driverName;
|
||||
driverContent.appendChild(driverTitle);
|
||||
const ninjaTitle = document.createElement('div');
|
||||
ninjaTitle.classList = 'driver__title';
|
||||
ninjaTitle.innerHTML = ninjaName;
|
||||
ninjaContent.appendChild(ninjaTitle);
|
||||
|
||||
const driverInfo = document.createElement('div');
|
||||
driverInfo.innerHTML = `
|
||||
activityNames = {
|
||||
'Build 1':'build',
|
||||
'Build 2':'build',
|
||||
'Quest':'project',
|
||||
'Explore':'explore',
|
||||
'Adventure':'solve'
|
||||
}
|
||||
|
||||
const ninjaInfo = document.createElement('div');
|
||||
ninjaInfo.innerHTML = `
|
||||
<table class="driver__table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><small>Belt</small></td>
|
||||
<td>${driverTeam}</td>
|
||||
<td class="caps">${ninjaBelt}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><small>Level</small></td>
|
||||
<td>${driverPoints}</td>
|
||||
<td class="caps">${ninjaLevel}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><small>Activity</small></td>
|
||||
<td><img src="https://www.countryflags.io/${driverCountry}/shiny/24.png">${ninjaActivity}</td>
|
||||
<td><img class="activity-badge" src="/assets/img/activity/${activityNames[ninjaActivity]}.png"><span>${ninjaActivity}</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><small>Score</small></td>
|
||||
<td>${this.dataset.score} </td>
|
||||
<td class="caps">${this.dataset.score} </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><small>Latest Update</small></td>
|
||||
|
|
@ -83,10 +89,10 @@ tableRow.forEach(tableRow => {
|
|||
|
||||
</tbody>
|
||||
</table>`;
|
||||
driverContent.appendChild(driverInfo);
|
||||
ninjaContent.appendChild(ninjaInfo);
|
||||
|
||||
newDriver.appendChild(driverContent);
|
||||
sidebarBody.appendChild(newDriver);
|
||||
newNinja.appendChild(ninjaContent);
|
||||
sidebarBody.appendChild(newNinja);
|
||||
|
||||
});
|
||||
});
|
||||
53
assets/js/script.js
Normal file
53
assets/js/script.js
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
getText("https://docs.google.com/spreadsheets/d/e/2PACX-1vSscQfV-TdME-3KWkPSr_o3FphomzJ7o-TcTmCzCtY-grKUIzpI6GV0piJBy_hU_VH6OOWrbjhmfI9j/pub?gid=892912605&single=true&output=csv");
|
||||
var tab = document.getElementById('leaderboard_table')
|
||||
async function getText(file) {
|
||||
let myObject = await fetch(file);
|
||||
let myText = await myObject.text();
|
||||
let ninjas = Papa.parse(myText, {header:true}).data;
|
||||
console.log(ninjas);
|
||||
|
||||
var count = 0;
|
||||
|
||||
var n = ninjas.sort(function(a, b) {
|
||||
return b.Score - a.Score;
|
||||
})
|
||||
|
||||
Gen={
|
||||
'M':'m-ninja.png',
|
||||
'F':'f-ninja.png',
|
||||
'O':'o-ninja.png'
|
||||
}
|
||||
|
||||
const places = ['first','second','third'];
|
||||
|
||||
var prev_score = -1;
|
||||
ninjas.forEach(ninja => {
|
||||
if(ninja.Score!=prev_score){
|
||||
// Increment only if prev score changes
|
||||
count+=1
|
||||
}
|
||||
tr = document.createElement('tr');
|
||||
if(count <= 3){
|
||||
tr.classList.add(places[count-1]+'-place');
|
||||
console.log(count, places[count-1]);
|
||||
}
|
||||
tr.innerHTML = `<td class="list__cell caps"><span class="list__value">${count}</span></td>
|
||||
<td class="list__cell caps"><span class="list__value">${ninja.Ninja}</span><small class="list__label">Ninja</small></td>
|
||||
<td class="list__cell caps" style="text-align:center"><img style="width:50px;" src="/assets/img/belts/${ninja.Belt}.png"></td>
|
||||
<td class="list__cell caps"><span class="list__value">${ninja.Belt}</span><small class="list__label">Belt</small></td>
|
||||
<td class="list__cell caps"><span class="list__value">${ninja.Level}</span><small class="list__label">Level</small></td>
|
||||
`;
|
||||
//
|
||||
tr.classList.add('list__row')
|
||||
tr.dataset.image = `/assets/img/ninja-default.png`;
|
||||
tr.dataset.activity = ninja.Activity;
|
||||
tr.dataset.score = ninja.Score;
|
||||
|
||||
tr.dataset.remark = ninja.Remark;
|
||||
// count+=1;
|
||||
tab.appendChild(tr);
|
||||
prev_score = ninja.Score;
|
||||
});
|
||||
|
||||
formatTable()
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
getText("https://docs.google.com/spreadsheets/d/e/2PACX-1vSscQfV-TdME-3KWkPSr_o3FphomzJ7o-TcTmCzCtY-grKUIzpI6GV0piJBy_hU_VH6OOWrbjhmfI9j/pub?gid=892912605&single=true&output=csv");
|
||||
var tab = document.getElementById('leaderboard_table')
|
||||
async function getText(file) {
|
||||
let myObject = await fetch(file);
|
||||
let myText = await myObject.text();
|
||||
let ninjas = Papa.parse(myText, {header:true}).data;
|
||||
console.log(ninjas);
|
||||
|
||||
var count = 1;
|
||||
|
||||
var n = ninjas.sort(function(a, b) {
|
||||
return b.Score - a.Score;
|
||||
})
|
||||
|
||||
Gen={
|
||||
'M':'m-ninja.png',
|
||||
'F':'f-ninja.png',
|
||||
'O':'o-ninja.png'
|
||||
}
|
||||
|
||||
ninjas.forEach(ninja => {
|
||||
tr = document.createElement('tr');
|
||||
tr.innerHTML = `<td class="list__cell"><span class="list__value">${count}</span></td>
|
||||
<td class="list__cell"><span class="list__value">${ninja.Ninja}</span><small class="list__label">Ninja</small></td>
|
||||
<td class="list__cell"><span class="list__value">${ninja.Belt}</span><small class="list__label">Belt</small></td>
|
||||
<td class="list__cell"><span class="list__value">${ninja.Level}</span><small class="list__label">Level</small></td>`
|
||||
tr.classList.add('list__row')
|
||||
tr.dataset.image = `/assets/${Gen[ninja.Gen]}`;
|
||||
tr.dataset.activity = ninja.Activity;
|
||||
tr.dataset.score = ninja.Score;
|
||||
tr.dataset.remark = ninja.Remark;
|
||||
|
||||
// row = `<tr class="list__row" data-image="/assets/${Gen[ninja.Gen]}" data-activity="${ninja.Activity}" data-nationality="Swedish" data-dob="1990-09-02" data-country="se" data-remark="${ninja.Remarks}" data-score="${ninja.Score}">
|
||||
|
||||
// </tr>`;
|
||||
count+=1;
|
||||
tab.appendChild(tr);
|
||||
});
|
||||
|
||||
formatTable()
|
||||
}
|
||||
280
assets/style.css
280
assets/style.css
|
|
@ -1,280 +0,0 @@
|
|||
html {
|
||||
--black: #21252a;
|
||||
--grey-1: #343A40;
|
||||
--grey-2: #495057;
|
||||
--grey-3: #868E96;
|
||||
--grey-4: #ADB5BD;
|
||||
--grey-5: #CED4DA;
|
||||
--grey-6: #DEE2E6;
|
||||
--grey-7: #E9ECEF;
|
||||
--grey-8: #F1F3F5;
|
||||
--grey-9: #F8F9FA;
|
||||
--trans-black: rgba(33, 37, 42, .9);
|
||||
--red: #e10600;
|
||||
--gold: #ffda65;
|
||||
--gold-dark: #a3862c;
|
||||
--bronze: #c99355;
|
||||
--bronze-dark: #80582c;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Inter UI", system-ui;
|
||||
color: var(--black);
|
||||
background: var(--black);
|
||||
}
|
||||
|
||||
.list {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: 3rem auto 3rem;
|
||||
border-radius: 0.4rem;
|
||||
box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.1), 0px 5px 12px rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
.list {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.list__table {
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
color: var(--grey-3);
|
||||
}
|
||||
|
||||
body{
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.list__header {
|
||||
padding: 2rem 2rem;
|
||||
background: white;
|
||||
border-top-left-radius: 0.4rem;
|
||||
border-top-right-radius: 0.4rem;
|
||||
}
|
||||
.list__header h1, .list__header h5 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.list__header h5 {
|
||||
margin-bottom: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.list__footer{
|
||||
padding: 1rem 1rem;
|
||||
background: white;
|
||||
text-align: center;
|
||||
border-bottom-left-radius: 0.4rem;
|
||||
border-bottom-right-radius: 0.4rem;
|
||||
}
|
||||
|
||||
.list__value {
|
||||
display: block;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.wrapper{
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.list__label {
|
||||
font-size: 10px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.list__row {
|
||||
background: var(--grey-7);
|
||||
cursor: pointer;
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
.list__row:hover, .list__row:focus {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0px 15px 28px rgba(0, 0, 0, 0.1), 0px 5px 12px rgba(0, 0, 0, 0.08);
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
.list__row:not(:last-of-type) .list__cell {
|
||||
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.list__row:first-of-type {
|
||||
color: var(--gold-dark);
|
||||
background: var(--grey-9);
|
||||
}
|
||||
.list__row:first-of-type .list__cell:first-of-type {
|
||||
background: var(--gold);
|
||||
color: var(--gold-dark);
|
||||
}
|
||||
.list__row:nth-of-type(2) {
|
||||
color: var(--grey-2);
|
||||
background: var(--grey-9);
|
||||
}
|
||||
.list__row:nth-of-type(2) .list__cell:first-of-type {
|
||||
background: var(--grey-4);
|
||||
color: var(--grey-2);
|
||||
}
|
||||
.list__row:nth-of-type(3) {
|
||||
color: var(--bronze-dark);
|
||||
background: var(--grey-9);
|
||||
}
|
||||
.list__row:nth-of-type(3) .list__cell:first-of-type {
|
||||
background: var(--bronze);
|
||||
color: var(--bronze-dark);
|
||||
}
|
||||
.list__cell {
|
||||
padding: 1rem;
|
||||
}
|
||||
.list__cell:first-of-type {
|
||||
text-align: center;
|
||||
padding: 1rem 0.2rem;
|
||||
background: var(--grey-5);
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--trans-black);
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
.overlay.is-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
background: white;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
box-shadow: none;
|
||||
right: -500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
/*@media screen and (max-width: 650px) {
|
||||
flex-direction: column-reverse;
|
||||
justify-content: space-between;
|
||||
}*/
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
.sidebar.is-open {
|
||||
right: 0;
|
||||
transition: all 300ms ease;
|
||||
box-shadow: 0px 0px 100px var(--black);
|
||||
}
|
||||
.sidebar__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: var(--grey-9);
|
||||
align-items: center;
|
||||
}
|
||||
.sidebar__header, .sidebar__body {
|
||||
padding: 2rem;
|
||||
}
|
||||
.sidebar__title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--grey-4);
|
||||
}
|
||||
|
||||
.button {
|
||||
font-family: inherit;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button:focus, .button:active {
|
||||
outline: 0;
|
||||
}
|
||||
.button--close {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
color: var(--grey-5);
|
||||
}
|
||||
.button--close:hover {
|
||||
color: var(--grey--4);
|
||||
}
|
||||
|
||||
.driver {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
left: 100px;
|
||||
-webkit-animation: fade 500ms ease 150ms forwards;
|
||||
animation: fade 500ms ease 150ms forwards;
|
||||
}
|
||||
.driver__image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
/* background-size: 220px; */
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
border: 3px solid white;
|
||||
box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.12);
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
.driver__content {
|
||||
width: auto;
|
||||
}
|
||||
.driver__title {
|
||||
font-weight: 700;
|
||||
font-size: 1.6rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.driver__table {
|
||||
width: 100%;
|
||||
color: var(--grey-2);
|
||||
}
|
||||
.driver__table small {
|
||||
color: var(--grey-4);
|
||||
}
|
||||
.driver__table td {
|
||||
padding: 0.3rem 0.6rem 0.3rem 0;
|
||||
height: 2rem;
|
||||
}
|
||||
.driver__table td img {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
20
index.html
20
index.html
|
|
@ -6,18 +6,20 @@
|
|||
<!-- <meta http-equiv="refresh" content="10"> -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Code Ninjas Langley | Leaderboard</title>
|
||||
<link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon">
|
||||
<meta name="description" content="Check out the leaderboard to see where you rank amongst our leading ninjas!">
|
||||
<meta name="keywords" content="Leaderboard , Code Ninjas, Langley, Showcase, Games, Coding, Slough, Langley, Code Ninjas Langley">
|
||||
<link rel="stylesheet" href="/assets/style.css">
|
||||
<link rel="stylesheet" href="/assets/stars.css">
|
||||
<link rel="stylesheet" href="/assets/css/style.css">
|
||||
<link rel="stylesheet" href="/assets/css/stars.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="list">
|
||||
<div class="list__header">
|
||||
<h5>Code Ninjas Langley</h5>
|
||||
<h1><b>IMPACT</b> <span style="font-variant-caps:small-caps">leaderboard</span></h1>
|
||||
<div class="list__header" style="text-align: center;">
|
||||
<h5 style="color: brown;" class="caps"><a href="https://codeninjaslangley.co.uk" class="a-no-link" target="_blank">Code Ninjas Langley</a></h5>
|
||||
<img src="/assets/img/impact.png" style="width: 400;height: 90px;" alt="">
|
||||
<h2 style="font-variant-caps:small-caps; margin: 0px;">leaderboard</h2>
|
||||
</div>
|
||||
<div class="list__body">
|
||||
<table class="list__table" id="leaderboard_table">
|
||||
|
|
@ -146,7 +148,7 @@
|
|||
<div class="overlay"></div>
|
||||
<div class="sidebar">
|
||||
<div class="sidebar__header">
|
||||
<div class="sidebar__title">Ninja Information</div>
|
||||
<div class="sidebar__title">Ninja Stats</div>
|
||||
<button class="button button--close">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
|
|
@ -159,8 +161,8 @@
|
|||
</div>
|
||||
|
||||
|
||||
<script src="assets/papaparse.min.js"></script>
|
||||
<script src="assets/leaderboard.js"></script>
|
||||
<script src="assets/script.js"></script>
|
||||
<script src="assets/js/papaparse.min.js"></script>
|
||||
<script src="assets/js/leaderboard.js"></script>
|
||||
<script src="assets/js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue