337 lines
16 KiB
HTML
337 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Project B</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
|
|
</head>
|
|
|
|
<body class="hidden">
|
|
<header id="main_header">
|
|
<a href="">
|
|
<h4>Project B</h4>
|
|
</a>
|
|
<ul>
|
|
<li>
|
|
<a href="#/services">
|
|
Services
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#/news">
|
|
News
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</header>
|
|
<article id="home" class="page">
|
|
<section id="above_fold" class="gap-4">
|
|
<img id="hero_illustration" src="assets/svg/cityscape.svg" alt="">
|
|
<div class="grid gap-0-5">
|
|
<h2>Real estate tokenization through the power of Blockchain technology.</h2>
|
|
<p>A global reference of tokenization aiming financial inclusiveness</p>
|
|
</div>
|
|
</section>
|
|
<section id="payment_section" class="gap-1-5">
|
|
<div class="grid">
|
|
<h4>International Payments</h4>
|
|
<h2>Pay with Bitcoin</h2>
|
|
</div>
|
|
<p>
|
|
Explore the world with seamless property rentals,
|
|
powered by Bitcoin payments from anywhere on the globe!
|
|
</p>
|
|
<img id="bitcoin_lineart" src="assets/svg/bitcoin line art.svg" alt="">
|
|
</section>
|
|
<section id="el_salvador_section">
|
|
<img src="assets/svg/el-salvador.svg" alt="" id="el_salvador_map">
|
|
<div class="grid">
|
|
<h4>Why</h4>
|
|
<h2>El Salvador?</h2>
|
|
</div>
|
|
</section>
|
|
<section class="gap-2">
|
|
<h4 class="section-header">Proof of Concept</h4>
|
|
<p>
|
|
A tokenized room at El Zonte beach, El Salvador
|
|
</p>
|
|
<div id="poc_images">
|
|
<img src="assets/poc/poc3.jpg" class="span-2" alt="">
|
|
<img src="assets/poc/poc1.jpg" class="span-2" alt="">
|
|
<img src="assets/poc/poc6.jpg" alt="">
|
|
<img src="assets/poc/poc2.jpg" class="span-2" alt="">
|
|
<img src="assets/poc/poc5.jpg" alt="">
|
|
</div>
|
|
<ul id="poc_stats">
|
|
<li class="stat">
|
|
<div class="stat__number">1030</div>
|
|
<div class="stat__title">Nights invested</div>
|
|
</li>
|
|
<li class="stat">
|
|
<div class="stat__number">20</div>
|
|
<div class="stat__title">Nights consumed</div>
|
|
</li>
|
|
<li class="stat">
|
|
<div class="stat__number">4</div>
|
|
<div class="stat__title">Invested nights consumed</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section>
|
|
<h4 class="section-header">Team</h4>
|
|
<ul id="team_members"></ul>
|
|
<dialog id="member_details">
|
|
<img src="" alt="" id="member_image">
|
|
<h2 id="member_name">Sairaj Mote</h2>
|
|
<p id="member_title">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam voluptatum aliquam unde dignissimos
|
|
hic non quae dolores quibusdam illo excepturi dolore repellat asperiores, nihil vel libero
|
|
architecto veniam et dicta?
|
|
</p>
|
|
</dialog>
|
|
</section>
|
|
<section>
|
|
<h4 class="section-header">Partners</h4>
|
|
</section>
|
|
<section>
|
|
<h4 class="section-header">Get in Touch</h4>
|
|
<ul id="social_links">
|
|
<li>
|
|
<a href="https://twitter.com/ProjectBSV" target="_blank">
|
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 248 204">
|
|
<path
|
|
d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://www.facebook.com/profile.php?id=100091526117221&mibextid=ZbWKwL"
|
|
target="_blank">
|
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"
|
|
fill="none">
|
|
<path
|
|
d="M10.3389 0.0400085C4.83887 0.0400085 0.338867 4.54804 0.338867 10.1003C0.338867 15.1203 3.99887 19.287 8.77887 20.04V13.0119H6.23887V10.1003H8.77887V7.88138C8.77887 5.36129 10.2689 3.97575 12.5589 3.97575C13.6489 3.97575 14.7889 4.16652 14.7889 4.16652V6.64643H13.5289C12.2889 6.64643 11.8989 7.41953 11.8989 8.2127V10.1003H14.6789L14.2289 13.0119H11.8989V20.04C14.2553 19.6664 16.4011 18.4592 17.9488 16.6365C19.4965 14.8137 20.3442 12.4955 20.3389 10.1003C20.3389 4.54804 15.8389 0.0400085 10.3389 0.0400085Z" />
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://instagram.com/projectbsv?igshid=ZDdkNTZiNTM=" target="_blank">
|
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
|
|
<path
|
|
d="M295.42,6c-53.2,2.51-89.53,11-121.29,23.48-32.87,12.81-60.73,30-88.45,57.82S40.89,143,28.17,175.92c-12.31,31.83-20.65,68.19-23,121.42S2.3,367.68,2.56,503.46,3.42,656.26,6,709.6c2.54,53.19,11,89.51,23.48,121.28,12.83,32.87,30,60.72,57.83,88.45S143,964.09,176,976.83c31.8,12.29,68.17,20.67,121.39,23s70.35,2.87,206.09,2.61,152.83-.86,206.16-3.39S799.1,988,830.88,975.58c32.87-12.86,60.74-30,88.45-57.84S964.1,862,976.81,829.06c12.32-31.8,20.69-68.17,23-121.35,2.33-53.37,2.88-70.41,2.62-206.17s-.87-152.78-3.4-206.1-11-89.53-23.47-121.32c-12.85-32.87-30-60.7-57.82-88.45S862,40.87,829.07,28.19c-31.82-12.31-68.17-20.7-121.39-23S637.33,2.3,501.54,2.56,348.75,3.4,295.42,6m5.84,903.88c-48.75-2.12-75.22-10.22-92.86-17-23.36-9-40-19.88-57.58-37.29s-28.38-34.11-37.5-57.42c-6.85-17.64-15.1-44.08-17.38-92.83-2.48-52.69-3-68.51-3.29-202s.22-149.29,2.53-202c2.08-48.71,10.23-75.21,17-92.84,9-23.39,19.84-40,37.29-57.57s34.1-28.39,57.43-37.51c17.62-6.88,44.06-15.06,92.79-17.38,52.73-2.5,68.53-3,202-3.29s149.31.21,202.06,2.53c48.71,2.12,75.22,10.19,92.83,17,23.37,9,40,19.81,57.57,37.29s28.4,34.07,37.52,57.45c6.89,17.57,15.07,44,17.37,92.76,2.51,52.73,3.08,68.54,3.32,202s-.23,149.31-2.54,202c-2.13,48.75-10.21,75.23-17,92.89-9,23.35-19.85,40-37.31,57.56s-34.09,28.38-57.43,37.5c-17.6,6.87-44.07,15.07-92.76,17.39-52.73,2.48-68.53,3-202.05,3.29s-149.27-.25-202-2.53m407.6-674.61a60,60,0,1,0,59.88-60.1,60,60,0,0,0-59.88,60.1M245.77,503c.28,141.8,115.44,256.49,257.21,256.22S759.52,643.8,759.25,502,643.79,245.48,502,245.76,245.5,361.22,245.77,503m90.06-.18a166.67,166.67,0,1,1,167,166.34,166.65,166.65,0,0,1-167-166.34"
|
|
transform="translate(-2.5 -2.5)" />
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</article>
|
|
<article id="news" class="page hidden">
|
|
<h2>News</h2>
|
|
<ul id="news_list"></ul>
|
|
</article>
|
|
<script>
|
|
const { html, render: renderElem } = uhtml;
|
|
class Router {
|
|
constructor(options = {}) {
|
|
const { routes = {}, state = {}, routingStart, routingEnd } = options
|
|
this.routes = routes
|
|
this.state = state
|
|
this.routingStart = routingStart
|
|
this.routingEnd = routingEnd
|
|
window.addEventListener('hashchange', e => this.routeTo(window.location.hash))
|
|
}
|
|
addRoute(route, callback) {
|
|
this.routes[route] = callback
|
|
}
|
|
async routeTo(path) {
|
|
let page
|
|
let wildcards = []
|
|
let queryString
|
|
let params
|
|
[path, queryString] = path.split('?');
|
|
if (path.includes('#'))
|
|
path = path.split('#')[1];
|
|
if (path.includes('/'))
|
|
[, page, ...wildcards] = path.split('/')
|
|
else
|
|
page = path
|
|
this.state = { page, wildcards }
|
|
if (queryString) {
|
|
params = new URLSearchParams(queryString)
|
|
this.state.params = Object.fromEntries(params)
|
|
}
|
|
if (this.routingStart) {
|
|
this.routingStart(this.state)
|
|
}
|
|
if (this.routes[page]) {
|
|
await this.routes[page](this.state)
|
|
this.state.lastPage = page
|
|
} else {
|
|
this.routes['404'](this.state)
|
|
}
|
|
if (this.routingEnd) {
|
|
this.routingEnd(this.state)
|
|
}
|
|
}
|
|
}
|
|
const router = new Router({
|
|
routingStart(state) {
|
|
if ("scrollRestoration" in history) {
|
|
history.scrollRestoration = "manual";
|
|
}
|
|
window.scrollTo(0, 0);
|
|
},
|
|
routingEnd(state) {
|
|
console.log(state)
|
|
const pages = document.querySelectorAll('.page')
|
|
pages.forEach(page => {
|
|
if (page.id === (state.page === '' ? 'home' : state.page)) {
|
|
page.classList.remove('hidden')
|
|
document.querySelector(`[href="#/${page.id}"]`)?.classList.add('active')
|
|
} else {
|
|
page.classList.add('hidden')
|
|
document.querySelector(`[href="#/${page.id}"]`)?.classList.remove('active')
|
|
}
|
|
})
|
|
}
|
|
})
|
|
router.addRoute('', () => {
|
|
const teamMembersList = document.getElementById('team_members')
|
|
teamMembers.sort((a, b) => a.name.localeCompare(b.name))
|
|
const renderedTeamMembers = teamMembers.map(member => {
|
|
const { image, name, title } = member
|
|
return html`
|
|
<li class="team-member">
|
|
<img src="${image}" alt=${`${name} profile picture`} loading="lazy">
|
|
<p class="team-member__name">${name},</p>
|
|
<p class="team-member__title">${title}</p>
|
|
</li>
|
|
`
|
|
})
|
|
renderElem(teamMembersList, html`${renderedTeamMembers}`)
|
|
document.getElementById('team_members').addEventListener('click', e => {
|
|
|
|
})
|
|
})
|
|
|
|
const teamMembers = [
|
|
{
|
|
name: 'Carlos Javier Castellanos Flores',
|
|
title: 'Principal director and shareholder',
|
|
image: 'assets/people/carlos.jpg'
|
|
},
|
|
{
|
|
name: 'John Giannakos',
|
|
title: 'Shareholder',
|
|
image: 'assets/people/john.jpg'
|
|
},
|
|
{
|
|
name: 'Iris Avalos',
|
|
title: 'Principal director',
|
|
image: 'assets/people/Iris-Avalos.jpg'
|
|
},
|
|
{
|
|
name: 'Puneet Sondh',
|
|
title: 'Principal director',
|
|
image: 'assets/people/Puneet Sondh.jpg'
|
|
},
|
|
{
|
|
name: 'Erika Pérez Cañas',
|
|
title: 'Principal director',
|
|
image: 'assets/people/erika pérez cañas.jpg'
|
|
},
|
|
]
|
|
|
|
const news = [
|
|
{
|
|
headline: 'Pilot project launched at El Zonte, El Salvador',
|
|
date: '24 Jun 2023',
|
|
content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
|
|
link: '#'
|
|
},
|
|
{
|
|
headline: 'Pilot project launched at El Zonte, El Salvador',
|
|
date: '24 Jun 2023',
|
|
content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
|
|
link: '#'
|
|
},
|
|
{
|
|
headline: 'Pilot project launched at El Zonte, El Salvador',
|
|
date: '24 Jun 2023',
|
|
content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
|
|
link: '#'
|
|
},
|
|
{
|
|
headline: 'Pilot project launched at El Zonte, El Salvador',
|
|
date: '24 Jun 2023',
|
|
content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
|
|
link: '#'
|
|
},
|
|
{
|
|
headline: 'Pilot project launched at El Zonte, El Salvador',
|
|
date: '24 Jun 2023',
|
|
content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
|
|
link: '#'
|
|
},
|
|
{
|
|
headline: 'Pilot project launched at El Zonte, El Salvador',
|
|
date: '24 Jun 2023',
|
|
content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
|
|
link: '#'
|
|
},
|
|
{
|
|
headline: 'Pilot project launched at El Zonte, El Salvador',
|
|
date: '24 Jun 2023',
|
|
content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
|
|
link: '#'
|
|
},
|
|
{
|
|
headline: 'Pilot project launched at El Zonte, El Salvador',
|
|
date: '24 Jun 2023',
|
|
content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
|
|
link: '#'
|
|
},
|
|
{
|
|
headline: 'Pilot project launched at El Zonte, El Salvador',
|
|
date: '24 Jun 2023',
|
|
content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
|
|
link: '#'
|
|
},
|
|
]
|
|
|
|
router.addRoute('news', () => {
|
|
const newsList = document.getElementById('news_list')
|
|
const renderedNews = news.map((item, index) => {
|
|
const { headline, date, content, link } = item
|
|
return html`
|
|
<li>
|
|
<a class="news-item" href=${link} style=${`--delay: ${index * 0.1}s`}>
|
|
<div class="news-item__icon">
|
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M22,3l-1.67,1.67L18.67,3L17,4.67L15.33,3l-1.66,1.67L12,3l-1.67,1.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3v16 c0,1.1,0.9,2,2,2l16,0c1.1,0,2-0.9,2-2V3z M11,19H4v-6h7V19z M20,19h-7v-2h7V19z M20,15h-7v-2h7V15z M20,11H4V8h16V11z"/></g></svg>
|
|
</div>
|
|
<p class="news-item__date">${date}</p>
|
|
<h4 class="news-item__headline">${headline}</h4>
|
|
${content ? html`<p class="news-item__content">${content}</p>` : ''}
|
|
</a>
|
|
</li>
|
|
`
|
|
})
|
|
renderElem(newsList, html`${renderedNews}`)
|
|
})
|
|
window.onload = () => {
|
|
document.body.classList.remove('hidden')
|
|
router.routeTo(window.location.hash)
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |