Files
xrpl-dev-portal/template/page-community.html.jinja

372 lines
18 KiB
Django/Jinja

{% extends "base.html.jinja" %}
{% block head %}
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
{% endblock %}
{% block bodyclasses %}no-sidebar{% endblock %}
{% block mainclasses %}landing page-community{% endblock %}
{% block breadcrumbs %}{% endblock %}
{% block main %}
<section class="text-center" id="community-heading" style="position: relative;">
<div class="d-lg-block d-none">
<img alt="People sitting at a conference" class="parallax one" width="152px" height="102px" src="./assets/img/community/community-one.png">
<img alt="Person speaking at a conference" class="parallax two" src="./assets/img/community/community-two.png">
<img alt="Person sitting and speaking" class="parallax three" src="./assets/img/community/community-three.png">
<img alt="People chatting" class="parallax four" width="120px" height="160px" src="./assets/img/community/community-four.png">
<img alt="Person speaking at Apex" class="parallax five" src="./assets/img/community/community-five.png">
</div>
<div class="mx-auto text-left col-lg-6 text-md-center hero-title" >
<div class="d-flex flex-column-reverse align-items-center sm-align-items-start">
<img src="../assets/img/icons/arrow-down.svg" class="bounce-arrow" alt="Down Arrow" />
<h1 class="mb-0 main-title">
{% trans %}A Global Blockchain {% endtrans %}
<br class="until-sm"/>
{% trans %}Community of {% endtrans %}
<span class="builders-wrap">Builders</span>
<br class="until-sm" />
{% trans %} and Innovators{% endtrans %}
</h1>
<h6 class="mb-3 eyebrow">{% trans %}XRPL Community{% endtrans %}</h6>
</div>
</div>
</section>
<section id="community-table" class="hot-topics">
<h6 class="eyebrow-convo">{% trans %}Join the Conversation{% endtrans %}</h6>
<h4 >Hot Topics Happening Now</h4>
<table>
<tr>
<td class="td-img"><img class="discord-icon" alt="discord icon"></td>
<td>{% trans %}AMA with Edge Wallet: Learn more about Edge Wallet and how they are building on the XRP Ledger.{% endtrans %}</td>
<td>
<a href="https://discord.com/channels/886050993802985492/950893687313940582/1162480612209332345" target="_blank" class="text-external-link"><span class="external-link-contribute"></span></a>
</td>
</tr>
<tr>
<td class="td-img"><img class="twitter-icon" alt="twitter icon"></td>
<td>{% trans %}Clawback: A newly proposed feature that adds to the XRP Ledger's token asset control capabilities.{% endtrans %}</td>
<td>
<a href="https://x.com/RippleXDev/status/1708889238471950610?s=20" target="_blank" class="text-external-link"><span class="external-link-contribute"></span></a>
</td>
</tr>
<tr>
<td class="td-img"><img class="youtube-icon" alt="youtube icon"></td>
<td>{% trans %}APEX 2023: View keynote sessions from the annual developer summit where developers, contributors, and thought leaders come together to learn, build, and celebrate all things XRP Ledger.{% endtrans %}</td>
<td>
<a href="https://www.youtube.com/playlist?list=PLJQ55Tj1hIVZBdGc33An5Is6IFMxw3D7u" target="_blank" class="text-external-link"><span class="external-link-contribute"></span></a>
</td>
</tr>
<tr class="final-tr">
<td class="td-img"><img class="xrpl-icon" alt="xrpl icon"></td>
<td>{% trans %}Deep Dive into XRPL DeFi Course: Learn about the inner workings of decentralized finance including safety and security, auto-bridging, pathfinding, liquidity pools, and more.{% endtrans %}</td>
<td>
<a href="https://learn.xrpl.org/course/deep-dive-into-xrpl-defi/" target="_blank" class="text-external-link"><span class="external-link-contribute"></span></a>
</td>
</tr>
</table>
</section>
<section class="xrpl-events-section">
<div class="header-div">
<div class="header">
<h6 class="events-text">{% trans %}XRPL Events{% endtrans %}</h6>
<h4 class="events-text">{% trans %}Check out global events hosted <br class="d-none-sm" /> by the XRPL community{% endtrans %}</h4>
</div>
<p class="description">{% trans %}Meet the XRPL community at meetups, hackathons, blockchain conferences, and more across global regions.{% endtrans %}</p>
<a class="cd-none-sm btn btn-primary btn-arrow view-all-events-btn" target="_blank" href="events.html">{% trans %}View All Events{% endtrans %}</a>
</div>
<div class="upcoming-event" id="upcoming-events-section">
<p class="upcoming-label">{% trans %}UPCOMING EVENT{% endtrans %}</p>
<div id="days-count" class="days-count">13</div>
<div class="days-word">{% trans %}days{% endtrans %}</div>
<div class="num-separator"></div>
<h5 id="upcoming-event-name" class="event-name">{% trans %}XRPL Warsaw Meetup 2023{% endtrans %}</h5>
<p class="mb-2 event-details d-flex icon"> <span class="icon-location"> </span><span id="upcoming-event-date">September 08-09, 2023</span></p>
<p class="event-location d-flex icon"> <span class="icon-date" id="upcoming-event-location"> </span><span id="location-tag"> Warsaw, Poland </span></p>
</div>
<a target="_blank" class="cd-none-lg btn btn-primary btn-arrow view-all-events-btn" href="events.html">{% trans %}View All Events{% endtrans %}</a>
</section>
<section class="carousel">
<div class="image-container">
<img id="left-image" src="" alt="Left Event Image">
<div class="center-image-wrapper">
<img id="center-image" src="" alt="Featured Event Image">
<div class="event-info">
<span class="name" id="event-name"></span>
<div class="flex-align">
<span class="icon-location"> </span>
<span id="event-location"></span>
</div>
<div class="flex-align">
<span class="icon-date"> </span>
<span id="event-date"> </span>
</div>
</div>
</div>
<img id="right-image" src="" alt="Right Event Image">
</div>
<div class="arrow-wrapper">
<button class="arrow-button left-arrow" id="prev-btn">
<img alt="left arrow">
</button>
<button class="arrow-button right-arrow" id="next-btn">
<img alt="right arrow">
</button>
</div>
</section>
<section class="community-funding">
<a target="_blank" class="cd-none-lg btn btn-primary btn-arrow view-all-events-btn get-funding-btn" href="developer-funding.html">{% trans %}Get Funding{% endtrans %}</a>
<div class="stats">
<div class="stacked-stats">
<div class="stat">
<span class="small-text">{% trans %}funding been awarded{% endtrans %}</span>
<div id="staticImage" class="number gradient-num" >
<span class="surround-gradient">$</span>
13
<span class="surround-gradient">M+</span>
</div>
<div class=" ml-8 stat-separator"></div>
</div>
<div class="stat">
<span class="small-text">{% trans %}teams awarded globally{% endtrans %}</span>
<div class="number gradient-num-two" >120
<span class="surround-gradient-two">+</span>
</div>
<div class="ml-14 stat-separator"></div>
</div>
</div>
<div class="stat">
<span class="small-text">{% trans %}countries represented{% endtrans %}</span>
<div class="number gradient-num-three">28
<span class="surround-gradient-three">+</span>
</div>
<div class="ml-19 stat-separator"></div>
</div>
</div>
<div class="funding-section">
<span class="funding-text">{% trans %}XRPL Developer Funding{% endtrans %}</span>
<h2>{% trans %}Funding Opportunities for Blockchain Businesses{% endtrans %}</h2>
<p>{% trans %}If you're a software developer or team looking to build your next blockchain business on the XRP Ledger (XRPL), numerous funding opportunities like grants and hackathons await your innovation.{% endtrans %}</p>
<a class="cd-none-sm btn btn-primary btn-arrow view-all-events-btn" target="_blank" href="developer-funding.html">{% trans %}Get Funding{% endtrans %}</a>
</div>
</section>
<section class="community-spotlight-wrapper">
<div class="community-spotlight">
<h6 class="funding-text">{% trans %}XRPL Community Spotlight{% endtrans %}</h6>
<h2 class="spotlight-subtitle">{% trans %}Showcase your blockchain project, application, or product{% endtrans %}</h2>
<p class="spotlight-description">{% trans %}Get featured on the Developer Reflections blog or Ecosystem page, and amplify your innovation within the blockchain community.{% endtrans %}</p>
<a target="_blank" class="w-222 btn btn-primary btn-arrow view-all-events-btn" data-tf-popup="ssHZA7Ly" data-tf-iframe-props="title=Developer Reflections" data-tf-medium="snippet">{% trans %}Submit Your Project{% endtrans %}</a>
</div>
<div class="projects-wrapper">
<div class="project-card top-left">
<div class="card-image">
<img class="middle-image" src="./assets/img/community/blockdaemon.png" />
</div>
<div class="card-details">
<h6 class="project-title">Blockdaemon</h6>
<p class="project-description">{% trans %}Your go-to independent blockchain infrastructure provider, offering secure and scalable blockchain services, including wallets, nodes, staking, protocols, and integrations for developers and institutions alike.{% endtrans %}</p>
<a href="https://xrpl.org/blog/2023/blockdaemon.html" target="_blank" class="view-project external-link">{% trans %}View Project{% endtrans %}</a>
</div>
</div>
<div class="project-card bottom-right">
<div class="card-image">
<img class="middle-image-two" src="./assets/img/community/xrp-cafe.png" />
</div>
<div class="card-details">
<h6 class="project-title">XRPCafe</h6>
<p class="project-description">{% trans %}A premier NFT marketplace dedicated to fostering mass adoption of the XRP Ledger.{% endtrans %}</p>
<a href="https://xrpl.org/blog/2023/xrpcafe.html" target="_blank" class="view-project external-link">{% trans %}View Project{% endtrans %}</a>
</div>
</div>
</div>
</section>
<section class="bottom-cards-section">
<div class="com-card">
<img class="top-left-img" />
<div class="card-content">
<h6 class="card-title">{% trans %}Contribute to Consensus{% endtrans %} </h6>
<h6 class="card-subtitle">{% trans %}Run an XRP Ledger network node{% endtrans %} </h6>
<p class="card-description">{% trans %}Thank you for your interest in contributing to XRPL.org. {% endtrans %}</p>
<div class="card-links">
<a class="com-card-link" target="_blank" href="the-rippled-server.html">{% trans %}The Rippled Server{% endtrans %}</a>
<a class="com-card-link" href="run-rippled-as-a-validator.html" target="_blank">{% trans %}Join UNL{% endtrans %} </a>
<a class="com-card-link" target="_blank" href="install-rippled.html">{% trans %}Install & Configure {% endtrans %}</a>
<a class="com-card-link" target="_blank" href="troubleshoot-the-rippled-server.html">{% trans %}Troubleshooting{% endtrans %}</a>
</div>
</div>
</div>
<div class="com-card">
<img class="bottom-right-img" />
<div class="card-content">
<h6 class="card-title">{% trans %}XRPL Careers {% endtrans %}</h6>
<h6 class="card-subtitle">{% trans %}Discover your next career opportunity in the XRPL community {% endtrans %}</h6>
<p class="card-description">{% trans %}Teams across the XRPL community are looking for talented individuals to help build their next innovation.{% endtrans %} </p>
<div class="card-links">
<a class="com-card-link" target="_blank" href="https://jobs.xrpl.org/jobs">{% trans %}View Open Roles{% endtrans %}</a>
</div>
</div>
</div>
<div class="com-card">
<img class="top-right-img" />
<div class="card-content">
<h6 class="card-title">{% trans %}Contribute to XRPL.org{% endtrans %} </h6>
<h6 class="card-subtitle">{% trans %}A Community-Driven Resource for All Things XRPL.org {% endtrans %}</h6>
<p class="card-description">{% trans %}Contribute to XRPL.org, the go-to resource for XRP Ledger. This open-source portal welcomes contributions from anyone for suggested changes.{% endtrans %} </p>
<div class="card-links">
<a class="com-card-link" target="_blank" href="https://github.com/XRPLF/xrpl-dev-portal/blob/master/CONTRIBUTING.md">{% trans %}Read Contributor Guidelines{% endtrans %} </a>
</div>
</div>
</div>
</section>
{% endblock %}
{% block analytics %}
<script type="application/javascript">
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
"event": "page_info",
"page_type": "Splash Page",
"page_group": "Community"
})
</script>
{% endblock analytics %}
{% block endbody %}
<script type="application/javascript" src="{{currentpage.prefix}}assets/js/contribute-carousel.js"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
const events = [
{ "name": "New Horizon: Innovate Without Limits: New Horizons Await",
"description": "Join our EVM-compatible chain launch for a chance to win $50,000 in prizes! Unleash your creativity in DeFi and NFTs, with judging criteria focused on novelty, impact, and community engagement.",
"type": "hackathon",
"link": "https://newhorizon.devpost.com/",
"location": "Virtual",
"date": "October 19, 2023 - December 22, 2023",
"image": "Hackathons.png",
"end_date": "December 22, 2023",
"start_date": "October 19, 2023"
},
{
"name": "XRPL Community Report Launch Party",
"description": "Celebrate the XRPL Community Report launch at 7pm! Join blockchain enthusiasts, connect with experts, and discover opportunities in the XRP Ledger ecosystem. Limited space available, so register now for a night of celebration and networking!",
"type": "meetup",
"link": "https://www.eventbrite.fr/e/billets-xrpl-community-report-launch-party-753788370307",
"location": "Paris, France",
"date": "November 28, 7pm - 9pm",
"image": "paris.png",
"end_date": "November 28, 2023",
"start_date": "November 28, 2023"
},
{
"name": "XRPL Toronto Meetup Community - Celebrate with Us!",
"description": "To connect the blockchain community, showcase campus ambassador projects, and celebrate the year's progress with a holiday theme.",
"type": "meetup",
"link": "https://www.meetup.com/xrpl-toronto-community-meetup/events/294766059",
"location": "Downtown, Toronto",
"date": "December 7th, 6pm - 9pm",
"image": "event-meetup-toronto@2x.jpg",
"end_date": "December 7, 2023",
"start_date": "December 7, 2023"
},
{
name: "XRPL Grants Info Session: Decentralized Exchange (DEX) Focused",
description:
"Watch the recorded information session and Q&A on applying to XRPL Grants Wave 7. This session will provide a general overview of the XRPL Grants application for Wave 7, with a focus on Decentralized Exchange (DEX) projects.",
type: "info-session",
link: "https://www.youtube.com/watch?v=BbGu0QC5WEE",
location: "Virtual - Zoom",
date: "September 06, 2023",
image: "InfoSessions.png",
end_date: "September 06, 2023",
start_date: "September 06, 2023",
},
{
name: "APEX 2024: The XRPL Developer Summit",
description:
"Apex XRPL Developer Summit is the annual event where developers, contributors, and thought leaders come together to learn, build, share, network, and celebrate all things XRP Ledger.",
type: "conference",
link: "http://apexdevsummit.com",
location: "Amsterdam",
date: "June 11 - 13, 2024",
image: "Conference.png",
end_date: "June 13, 2024",
start_date: "June 11, 2024",
},
{
name: "XRPL Developers Reddit AMA: Real World Assets",
description:
"Join us for a live chat on Reddit and learn more about how developers are building real world assets with confidence on the XRP Ledger.",
type: "ama",
link: "https://xrplresources.org/rwa-ama?utm_source=web&utm_medium=web&utm_campaign=bwc",
location: "Virtual - Reddit",
date: "October 17, 2023",
image: "AMAs.png",
end_date: "October 17, 2023",
start_date: "October 17, 2023",
},
];
// Function to convert string date to Date object
const parseDate = (dateString) => {
const [monthDay, year] = dateString.split(", ");
const [month, day] = monthDay.split(" ");
const months = {
"January": 0, "February": 1, "March": 2, "April": 3,
"May": 4, "June": 5, "July": 6, "August": 7,
"September": 8, "October": 9, "November": 10, "December": 11
};
return new Date(year, months[month], day);
};
// Get today's date (without time)
const today = new Date();
today.setHours(0, 0, 0, 0);
// Find the closest future event
let closestEvent = null;
let minDaysDiff = Infinity;
events.forEach(event => {
const eventEndDate = parseDate(event.start_date);
const diffTime = eventEndDate - today;
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
if (diffDays >= 0 && diffDays < minDaysDiff) {
closestEvent = event;
minDaysDiff = diffDays;
}
});
if (closestEvent) {
document.getElementById('days-count').textContent = `${minDaysDiff}`;
document.getElementById('upcoming-event-name').textContent = closestEvent.name;
document.getElementById('upcoming-event-date').textContent = closestEvent.date;
document.getElementById('location-tag').textContent = closestEvent.location;
} else {
console.log('No upcoming events found. Hiding upcoming events section');
document.getElementById('upcoming-events-section').style = 'display:none'
}
});
</script>
<script src="//embed.typeform.com/next/embed.js"></script>
{% endblock %}