added milestones to tokenroom
This commit is contained in:
sairaj mote
parent
f3291140e0
commit
e770648271
31
css/main.css
31
css/main.css
@ -353,7 +353,6 @@ section:nth-of-type(2) {
|
||||
|
||||
.project {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
||||
width: 100%;
|
||||
border-radius: 0.8rem;
|
||||
border: solid thin rgba(var(--text-color), 0.1);
|
||||
@ -412,7 +411,7 @@ section:nth-of-type(2) {
|
||||
gap: 1rem;
|
||||
flex: 1;
|
||||
}
|
||||
.project__link {
|
||||
.project__button {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
@ -423,6 +422,26 @@ section:nth-of-type(2) {
|
||||
border-radius: 1rem;
|
||||
letter-spacing: 0.05em;
|
||||
align-self: flex-end;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.project .project__hidden-details {
|
||||
grid-column: 1/-1;
|
||||
padding: 1rem;
|
||||
border-top: solid thin rgba(var(--text-color), 0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
.project .project__hidden-details .carousel {
|
||||
z-index: 2;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.project .project__hidden-details .milestone {
|
||||
width: min(100% - 1rem, 20rem);
|
||||
}
|
||||
.project .project__hidden-details .milestone__title {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
@ -458,6 +477,10 @@ section:nth-of-type(2) {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#methodology_wrapper {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#economics_section h2 {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
@ -692,8 +715,8 @@ section:nth-of-type(2) {
|
||||
opacity: 0.6;
|
||||
left: calc(100% - 50vw);
|
||||
}
|
||||
#poc_images {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
.project {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.hide-on-large {
|
||||
display: none !important;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -310,7 +310,6 @@ section {
|
||||
}
|
||||
.project {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
||||
width: 100%;
|
||||
border-radius: 0.8rem;
|
||||
border: solid thin rgba(var(--text-color), 0.1);
|
||||
@ -366,7 +365,7 @@ section {
|
||||
gap: 1rem;
|
||||
flex: 1;
|
||||
}
|
||||
&__link {
|
||||
&__button {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
@ -377,6 +376,26 @@ section {
|
||||
border-radius: 1rem;
|
||||
letter-spacing: 0.05em;
|
||||
align-self: flex-end;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.project__hidden-details {
|
||||
grid-column: 1/-1;
|
||||
padding: 1rem;
|
||||
border-top: solid thin rgba(var(--text-color), 0.5);
|
||||
overflow: hidden;
|
||||
.carousel {
|
||||
z-index: 2;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.milestone {
|
||||
width: min(calc(100% - 1rem), 20rem);
|
||||
&__title {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.badge {
|
||||
@ -410,6 +429,9 @@ section {
|
||||
}
|
||||
}
|
||||
}
|
||||
#methodology_wrapper {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#economics_section {
|
||||
h2 {
|
||||
margin-bottom: 3rem;
|
||||
@ -631,8 +653,8 @@ section {
|
||||
opacity: 0.6;
|
||||
left: calc(100% - 50vw);
|
||||
}
|
||||
#poc_images {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
.project {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.hide-on-large {
|
||||
display: none !important;
|
||||
|
||||
87
index.html
87
index.html
@ -24,11 +24,11 @@
|
||||
Services
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<!-- <li>
|
||||
<a href="#/news">
|
||||
News
|
||||
</a>
|
||||
</li>
|
||||
</li> -->
|
||||
</ul>
|
||||
</header>
|
||||
<article id="home" class="page">
|
||||
@ -240,16 +240,39 @@
|
||||
<div class="stat__title">Invested nights consumed</div>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#/tokenroom" class="project__link">Learn more</a>
|
||||
<button href="#/tokenroom" class="project__button" onclick="toggleDetails(event)">Show
|
||||
details</button>
|
||||
</div>
|
||||
<div class="project__hidden-details grid hidden">
|
||||
<h4>Milestones</h4>
|
||||
<ul id="tokenroom_milestones_wrapper" class="carousel"> </ul>
|
||||
<div class="carousel-controls flex gap-0-3">
|
||||
<button class="carousel-control"
|
||||
onclick="scrollCarousel('tokenroom_milestones_wrapper', 'left')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="carousel-control"
|
||||
onclick="scrollCarousel('tokenroom_milestones_wrapper', 'right')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<section id="methodology_section">
|
||||
<h2>
|
||||
Methodology
|
||||
</h2>
|
||||
<div id="methodology_wrapper" class="carousel"> </div>
|
||||
<ul id="methodology_wrapper" class="carousel"> </ul>
|
||||
<div class="carousel-controls flex gap-0-3">
|
||||
<button class="carousel-control" onclick="scrollCarousel('methodology_wrapper', 'left')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
|
||||
@ -654,6 +677,17 @@
|
||||
}
|
||||
})
|
||||
router.addRoute('', () => {
|
||||
const renderedTokenroomMilestones = tokenroomMilestones.map((milestone, index) => {
|
||||
const { label, title } = milestone
|
||||
return html`
|
||||
<li class="milestone">
|
||||
<div class="milestone__label">${label}</div>
|
||||
<h4 class="milestone__title">${title}</h4>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
renderElem(document.getElementById('tokenroom_milestones_wrapper'), html`${renderedTokenroomMilestones}`)
|
||||
|
||||
const teamMembersList = document.getElementById('team_members')
|
||||
teamMembers.sort((a, b) => a.name.localeCompare(b.name))
|
||||
const renderedTeamMembers = teamMembers.map(member => {
|
||||
@ -673,15 +707,41 @@
|
||||
const renderedMethodology = methodology.map((step, index) => {
|
||||
const { title, content } = step
|
||||
return html`
|
||||
<div class="milestone">
|
||||
<li class="milestone">
|
||||
<div class="milestone__label">${index + 1}</div>
|
||||
<h3 class="milestone__title">${title}</h3>
|
||||
<p class="milestone__description">${content}</p>
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
renderElem(document.getElementById('methodology_wrapper'), html`${renderedMethodology}`)
|
||||
})
|
||||
const tokenroomMilestones = [
|
||||
{
|
||||
label: '1st April 2023',
|
||||
title: `Token Room tokens created`,
|
||||
},
|
||||
{
|
||||
label: '5th April 2023',
|
||||
title: `Token Room started`,
|
||||
},
|
||||
{
|
||||
label: '7th April 2023',
|
||||
title: `Tokens totally sold`,
|
||||
},
|
||||
{
|
||||
label: '17th April 2023',
|
||||
title: `John's Investment`,
|
||||
},
|
||||
{
|
||||
label: '17th April 2023',
|
||||
title: `Multisig hits more than 15k USD`,
|
||||
},
|
||||
{
|
||||
label: '',
|
||||
title: `Smartcontract based market launched`,
|
||||
},
|
||||
]
|
||||
const methodology = [
|
||||
{
|
||||
title: `Identify a token project`,
|
||||
@ -864,7 +924,18 @@
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function toggleDetails(e) {
|
||||
const projectCard = e.target.closest('.project')
|
||||
const projectDetails = projectCard.querySelector('.project__hidden-details')
|
||||
const projectDetailsButton = e.target.closest('button')
|
||||
projectDetails.classList.toggle('hidden')
|
||||
projectDetailsButton.textContent = projectDetails.classList.contains('hidden') ? 'Show details' : 'Hide details'
|
||||
projectDetails.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
inline: 'center',
|
||||
block: 'nearest'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user