439 lines
24 KiB
HTML
439 lines
24 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">Blockchain Network Partners </h4>
|
|
<ul id="partners">
|
|
<li>
|
|
FLO Blockchain
|
|
</li>
|
|
<li>
|
|
Bitcoin Blockchain
|
|
</li>
|
|
<li>
|
|
Polygon Blockchain
|
|
</li>
|
|
<li>
|
|
Lightening Network
|
|
</li>
|
|
</section>
|
|
<section id="socials_section">
|
|
<h4 class="section-header">Socials</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 fill="#1d9bf0"
|
|
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>
|
|
<span>Twitter</span>
|
|
</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" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 40 40"
|
|
style="enable-background:new 0 0 40 40;" xml:space="preserve">
|
|
<style type="text/css">
|
|
.st0 {
|
|
fill: url(#SVGID_1_);
|
|
}
|
|
|
|
.st1 {
|
|
fill: #FFFFFF;
|
|
}
|
|
</style>
|
|
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-277.375" y1="406.6018"
|
|
x2="-277.375" y2="407.5726"
|
|
gradientTransform="matrix(40 0 0 -39.7778 11115.001 16212.334)">
|
|
<stop offset="0" style="stop-color:#0062E0"></stop>
|
|
<stop offset="1" style="stop-color:#19AFFF"></stop>
|
|
</linearGradient>
|
|
<path class="st0"
|
|
d="M16.7,39.8C7.2,38.1,0,29.9,0,20C0,9,9,0,20,0s20,9,20,20c0,9.9-7.2,18.1-16.7,19.8l-1.1-0.9h-4.4L16.7,39.8z">
|
|
</path>
|
|
<path class="st1"
|
|
d="M27.8,25.6l0.9-5.6h-5.3v-3.9c0-1.6,0.6-2.8,3-2.8h2.6V8.2c-1.4-0.2-3-0.4-4.4-0.4c-4.6,0-7.8,2.8-7.8,7.8V20 h-5v5.6h5v14.1c1.1,0.2,2.2,0.3,3.3,0.3c1.1,0,2.2-0.1,3.3-0.3V25.6H27.8z">
|
|
</path>
|
|
</svg>
|
|
<span>
|
|
Facebook
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://instagram.com/projectbsv?igshid=ZDdkNTZiNTM=" target="_blank">
|
|
<svg class="icon" viewBox="0 0 132 132" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<defs>
|
|
<linearGradient id="b">
|
|
<stop offset="0" stop-color="#3771c8"></stop>
|
|
<stop stop-color="#3771c8" offset=".128"></stop>
|
|
<stop offset="1" stop-color="#60f" stop-opacity="0"></stop>
|
|
</linearGradient>
|
|
<linearGradient id="a">
|
|
<stop offset="0" stop-color="#fd5"></stop>
|
|
<stop offset=".1" stop-color="#fd5"></stop>
|
|
<stop offset=".5" stop-color="#ff543e"></stop>
|
|
<stop offset="1" stop-color="#c837ab"></stop>
|
|
</linearGradient>
|
|
<radialGradient id="c" cx="158.429" cy="578.088" r="65" xlink:href="#a"
|
|
gradientUnits="userSpaceOnUse"
|
|
gradientTransform="matrix(0 -1.98198 1.8439 0 -1031.402 454.004)" fx="158.429"
|
|
fy="578.088"></radialGradient>
|
|
<radialGradient id="d" cx="147.694" cy="473.455" r="65" xlink:href="#b"
|
|
gradientUnits="userSpaceOnUse"
|
|
gradientTransform="matrix(.17394 .86872 -3.5818 .71718 1648.348 -458.493)"
|
|
fx="147.694" fy="473.455"></radialGradient>
|
|
</defs>
|
|
<path fill="url(#c)"
|
|
d="M65.03 0C37.888 0 29.95.028 28.407.156c-5.57.463-9.036 1.34-12.812 3.22-2.91 1.445-5.205 3.12-7.47 5.468C4 13.126 1.5 18.394.595 24.656c-.44 3.04-.568 3.66-.594 19.188-.01 5.176 0 11.988 0 21.125 0 27.12.03 35.05.16 36.59.45 5.42 1.3 8.83 3.1 12.56 3.44 7.14 10.01 12.5 17.75 14.5 2.68.69 5.64 1.07 9.44 1.25 1.61.07 18.02.12 34.44.12 16.42 0 32.84-.02 34.41-.1 4.4-.207 6.955-.55 9.78-1.28 7.79-2.01 14.24-7.29 17.75-14.53 1.765-3.64 2.66-7.18 3.065-12.317.088-1.12.125-18.977.125-36.81 0-17.836-.04-35.66-.128-36.78-.41-5.22-1.305-8.73-3.127-12.44-1.495-3.037-3.155-5.305-5.565-7.624C116.9 4 111.64 1.5 105.372.596 102.335.157 101.73.027 86.19 0H65.03z"
|
|
transform="translate(1.004 1)"></path>
|
|
<path fill="url(#d)"
|
|
d="M65.03 0C37.888 0 29.95.028 28.407.156c-5.57.463-9.036 1.34-12.812 3.22-2.91 1.445-5.205 3.12-7.47 5.468C4 13.126 1.5 18.394.595 24.656c-.44 3.04-.568 3.66-.594 19.188-.01 5.176 0 11.988 0 21.125 0 27.12.03 35.05.16 36.59.45 5.42 1.3 8.83 3.1 12.56 3.44 7.14 10.01 12.5 17.75 14.5 2.68.69 5.64 1.07 9.44 1.25 1.61.07 18.02.12 34.44.12 16.42 0 32.84-.02 34.41-.1 4.4-.207 6.955-.55 9.78-1.28 7.79-2.01 14.24-7.29 17.75-14.53 1.765-3.64 2.66-7.18 3.065-12.317.088-1.12.125-18.977.125-36.81 0-17.836-.04-35.66-.128-36.78-.41-5.22-1.305-8.73-3.127-12.44-1.495-3.037-3.155-5.305-5.565-7.624C116.9 4 111.64 1.5 105.372.596 102.335.157 101.73.027 86.19 0H65.03z"
|
|
transform="translate(1.004 1)"></path>
|
|
<path fill="#fff"
|
|
d="M66.004 18c-13.036 0-14.672.057-19.792.29-5.11.234-8.598 1.043-11.65 2.23-3.157 1.226-5.835 2.866-8.503 5.535-2.67 2.668-4.31 5.346-5.54 8.502-1.19 3.053-2 6.542-2.23 11.65C18.06 51.327 18 52.964 18 66s.058 14.667.29 19.787c.235 5.11 1.044 8.598 2.23 11.65 1.227 3.157 2.867 5.835 5.536 8.503 2.667 2.67 5.345 4.314 8.5 5.54 3.054 1.187 6.543 1.996 11.652 2.23 5.12.233 6.755.29 19.79.29 13.037 0 14.668-.057 19.788-.29 5.11-.234 8.602-1.043 11.656-2.23 3.156-1.226 5.83-2.87 8.497-5.54 2.67-2.668 4.31-5.346 5.54-8.502 1.18-3.053 1.99-6.542 2.23-11.65.23-5.12.29-6.752.29-19.788 0-13.036-.06-14.672-.29-19.792-.24-5.11-1.05-8.598-2.23-11.65-1.23-3.157-2.87-5.835-5.54-8.503-2.67-2.67-5.34-4.31-8.5-5.535-3.06-1.187-6.55-1.996-11.66-2.23-5.12-.233-6.75-.29-19.79-.29zm-4.306 8.65c1.278-.002 2.704 0 4.306 0 12.816 0 14.335.046 19.396.276 4.68.214 7.22.996 8.912 1.653 2.24.87 3.837 1.91 5.516 3.59 1.68 1.68 2.72 3.28 3.592 5.52.657 1.69 1.44 4.23 1.653 8.91.23 5.06.28 6.58.28 19.39s-.05 14.33-.28 19.39c-.214 4.68-.996 7.22-1.653 8.91-.87 2.24-1.912 3.835-3.592 5.514-1.68 1.68-3.275 2.72-5.516 3.59-1.69.66-4.232 1.44-8.912 1.654-5.06.23-6.58.28-19.396.28-12.817 0-14.336-.05-19.396-.28-4.68-.216-7.22-.998-8.913-1.655-2.24-.87-3.84-1.91-5.52-3.59-1.68-1.68-2.72-3.276-3.592-5.517-.657-1.69-1.44-4.23-1.653-8.91-.23-5.06-.276-6.58-.276-19.398s.046-14.33.276-19.39c.214-4.68.996-7.22 1.653-8.912.87-2.24 1.912-3.84 3.592-5.52 1.68-1.68 3.28-2.72 5.52-3.592 1.692-.66 4.233-1.44 8.913-1.655 4.428-.2 6.144-.26 15.09-.27zm29.928 7.97c-3.18 0-5.76 2.577-5.76 5.758 0 3.18 2.58 5.76 5.76 5.76 3.18 0 5.76-2.58 5.76-5.76 0-3.18-2.58-5.76-5.76-5.76zm-25.622 6.73c-13.613 0-24.65 11.037-24.65 24.65 0 13.613 11.037 24.645 24.65 24.645C79.617 90.645 90.65 79.613 90.65 66S79.616 41.35 66.003 41.35zm0 8.65c8.836 0 16 7.163 16 16 0 8.836-7.164 16-16 16-8.837 0-16-7.164-16-16 0-8.837 7.163-16 16-16z">
|
|
</path>
|
|
</svg>
|
|
<span>
|
|
Instagram
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://iris.to/projectb" target="_blank">
|
|
<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>
|
|
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"></path>
|
|
</svg>
|
|
<span>
|
|
Iris
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://t.me/ProjectBSV" target="_blank">
|
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
width="1000px" height="1000px" viewBox="0 0 1000 1000" version="1.1">
|
|
<defs>
|
|
<linearGradient x1="50%" y1="0%" x2="50%" y2="99.2583404%" id="linearGradient-1">
|
|
<stop stop-color="#2AABEE" offset="0%"></stop>
|
|
<stop stop-color="#229ED9" offset="100%"></stop>
|
|
</linearGradient>
|
|
</defs>
|
|
<g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<circle id="Oval" fill="url(#linearGradient-1)" cx="500" cy="500" r="500"></circle>
|
|
<path
|
|
d="M226.328419,494.722069 C372.088573,431.216685 469.284839,389.350049 517.917216,369.122161 C656.772535,311.36743 685.625481,301.334815 704.431427,301.003532 C708.567621,300.93067 717.815839,301.955743 723.806446,306.816707 C728.864797,310.92121 730.256552,316.46581 730.922551,320.357329 C731.588551,324.248848 732.417879,333.113828 731.758626,340.040666 C724.234007,419.102486 691.675104,610.964674 675.110982,699.515267 C668.10208,736.984342 654.301336,749.547532 640.940618,750.777006 C611.904684,753.448938 589.856115,731.588035 561.733393,713.153237 C517.726886,684.306416 492.866009,666.349181 450.150074,638.200013 C400.78442,605.66878 432.786119,587.789048 460.919462,558.568563 C468.282091,550.921423 596.21508,434.556479 598.691227,424.000355 C599.00091,422.680135 599.288312,417.758981 596.36474,415.160431 C593.441168,412.561881 589.126229,413.450484 586.012448,414.157198 C581.598758,415.158943 511.297793,461.625274 375.109553,553.556189 C355.154858,567.258623 337.080515,573.934908 320.886524,573.585046 C303.033948,573.199351 268.692754,563.490928 243.163606,555.192408 C211.851067,545.013936 186.964484,539.632504 189.131547,522.346309 C190.260287,513.342589 202.659244,504.134509 226.328419,494.722069 Z"
|
|
id="Path-3" fill="#FFFFFF"></path>
|
|
</g>
|
|
</svg>
|
|
<span>
|
|
Telegram
|
|
</span>
|
|
</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> |