Apexie-Website/src/index.html

556 lines
30 KiB
HTML

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="assets/img/favicon.png">
<link rel="shortcut icon" type="image/png" href="assets/img/favicon.png">
<title>Apexie's Home</title>
<link rel="manifest" href="manifest.json">
<!-- Embed stuff -->
<meta content="Apexie's Home" property="og:title" />
<meta
content="We want to deliver the best experiences to you and create the best place to find new friends and play with your friends."
property="og:description" />
<meta content="https://apexie.eu" property="og:url" />
<meta content="https://apexie.eu/assets/img/favicon.png" property="og:image" />
<meta content="#1A9EF1" data-react-helmet="true" name="theme-color" />
<!-- Apple web app capability and images -->
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-2048-2732.jpg"
media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-2732-2048.jpg"
media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-1668-2388.jpg"
media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-2388-1668.jpg"
media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-1536-2048.jpg"
media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-2048-1536.jpg"
media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-1668-2224.jpg"
media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-2224-1668.jpg"
media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-1620-2160.jpg"
media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-2160-1620.jpg"
media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-1284-2778.jpg"
media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-2778-1284.jpg"
media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-1170-2532.jpg"
media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-2532-1170.jpg"
media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-1125-2436.jpg"
media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-2436-1125.jpg"
media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-1242-2688.jpg"
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-2688-1242.jpg"
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-828-1792.jpg"
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-1792-828.jpg"
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-1242-2208.jpg"
media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-2208-1242.jpg"
media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-750-1334.jpg"
media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-1334-750.jpg"
media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-640-1136.jpg"
media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="assets/img/pwa/apple-splash-1136-640.jpg"
media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<!-- Main style + Bootstrap -->
<link rel="stylesheet" href="assets/css/style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
</head>
<body>
<!-- Main website structure (thanks to Bootstrap) -->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark py-3 fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="assets/img/favicon.png" alt="" width="30" height="30" class="d-inline-block align-text-top">
Apexie's Home
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/ApexieCommunity">GitHub</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://dsc.gg/apexie">Discord</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Projects
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#osustream">osu!stream revived</a></li>
<li><a class="dropdown-item" href="#plenus">Plenus</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="https://video.arcade.apexie.eu">Video to
Arcade</a></li>
<li>
<a class="dropdown-item" href="https://poggit.pmmp.io/p/KnockbackFFA">Knock</a>
</li>
<li>
<a class="dropdown-item" href="#" id="robux-gen-button">Robux Generator</a>
</li>
<li><a class="dropdown-item disabled" href="#">Coming soon...</a></li>
</ul>
</li>
<!-- Login button -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Profile
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" id="login_button">Login</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="#" id="alpha-preview-button">Alpha 1.2.6_10 Preview Access</a>
</li>
<li><a class="dropdown-item disabled" href="#">Coming soon...</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Coming soon...</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Showcase -->
<section class="bg-dark text-light p-5 p-lg-0 pt-lg-5 text-center text-sm-start">
<div class="container">
<div class="d-sm-flex align-items-center justify-content-between">
<div>
<h1>Join the <span class="text-warning"> best community ever </span></h1>
<p class="lead my-4">
We want to deliver the best experiences to you and
create the best place to find new friends and play with your friends.
</p>
<button class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#fun">
Start the fun
</button>
</div>
<img class="img-fluid w-50 d-none d-sm-block" width="477" height="517" src="assets/img/gaming.png"
alt="" />
</div>
</div>
</section>
<!-- Boxes -->
<section class="p-5">
<div class="container">
<div class="row text-center g-4">
<div class="col-md">
<div class="card bg-dark text-light">
<div class="card-body text-center">
<div class="h1 mb-3">
<i class="bi bi-controller"></i>
</div>
<h3 class="card-title mb-3">Gaming</h3>
<p class="card-text">
Our community mostly plays Minecraft, but we like to play other games too.
You can bring new games to life in our community.
</p>
<a href="https://dsc.gg/apexie" class="btn btn-primary">Join the fun</a>
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-dark text-light">
<div class="card-body text-center">
<div class="h1 mb-3">
<i class="bi bi-chat-left-dots"></i>
</div>
<h3 class="card-title mb-3">Chatting</h3>
<p class="card-text">
We also have fun by chatting with other people
in the community. You can talk about anything you want (except, you know...).
</p>
<a href="https://dsc.gg/apexie" class="btn btn-primary">Chat with us</a>
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-dark text-light">
<div class="card-body text-center">
<div class="h1 mb-3">
<i class="bi bi-code-square"></i>
</div>
<h3 class="card-title mb-3">Coding</h3>
<p class="card-text">
We love coding and also open source projects, and that's why we have a
GitHub page where we share most of our projects with you.
</p>
<a href="https://github.com/ApexieCommunity" class="btn btn-primary">Contribute</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Sections -->
<section id="osustream" class="p-5">
<div class="container">
<div class="row align-items-center justify-content-between">
<div class="col-md">
<img src="assets/img/osu!stream.jpg" class="img-fluid" alt="" />
</div>
<div class="col-md p-5">
<h2>osu!stream revived</h2>
<p class="lead">
The best take on an osu!stream port
that you can find.
</p>
<p>
This project tries to make the best osu!stream port for Android. Since the source code is
available on GitHub,
we decided to fork the project and optimize it to support multiple feature and to fix some of
the issues of the
original project.
</p>
<a href="https://github.com/ApexieCommunity/Website/raw/main/downloads/eu.apexie.osustream.apk"
class="btn btn-light mt-3">
<i class="bi bi-chevron-right"></i> Download
</a>
</div>
</div>
</div>
</section>
<section id="plenus" class="p-5 bg-dark text-light">
<div class="container">
<div class="row align-items-center justify-content-between">
<div class="col-md p-5">
<h2>Plenus</h2>
<p class="lead">
The best Discord bot that you can find.
It's simple to use and also open source.
</p>
<p>
With Plenus, you can take your Discord server to another level. It offers features like
role buttons, music, moderation, logs, and more. Plenus is also open source, that means we make
money
only from donations from the <a href="https://ko-fi.com/plenus" class="link-primary">Ko-fi
page</a>.
</p>
<a href="https://plenusbot.xyz" class="btn btn-light mt-3">
<i class="bi bi-chevron-right"></i> Learn more
</a>
</div>
<div class="col-md">
<img src="https://raw.githubusercontent.com/ApexieCommunity/Plenus/main/assets/logo.png"
class="img-fluid" alt="" />
</div>
</div>
</div>
</section>
<footer class="p-5 bg-dark text-white text-center position-relative">
<div class="container">
<p class="lead">Copyright &copy; 2022 Apexie Community</p>
<a href="#" class="position-absolute bottom-0 end-0 p-5">
<i class="bi bi-arrow-up-circle h1"></i>
</a>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="fun" tabindex="-1" aria-labelledby="socials" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="funLabel">Start the fun</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="lead">These are the main places where we have fun:</p>
<!-- Clickable Discord button -->
<a href="https://dsc.gg/apexie" class="btn btn-dark btn-lg">
<i class="bi bi-discord"></i>
Discord
</a>
<a href="https://github.com/ApexieCommunity" class="btn btn-dark btn-lg">
<i class="bi bi-github"></i>
GitHub
</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="sessionexpired" tabindex="-2" aria-labelledby="logintime" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="expiredLabel">Login expired</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="lead">Hi, it seems like your Discord session on this website has expired, would you like
to login again?</p>
</div>
<div class="modal-footer">
<!-- Yes -->
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="login-yes">
Yes
</button>
<!-- No -->
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="login-no">
No
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="login-dont-show">
Don't show this again
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="gdprconsent" tabindex="-2" aria-labelledby="gdpr" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="expiredLabel">GDPR Consent</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="lead">We use cookies in this website to give you the best experience on our
site. To find out more, read our
<a
href="https://www.privacypolicygenerator.info/live.php?token=p519PrZBe1HRup8NtyGsCRpByyUSCDM1">privacy
policy</a> and <a
href="https://www.cookiepolicygenerator.com/live.php?token=4XCEj5MsPl1JX41C4R5NtaZ2fRotqRGv">cookie
policy.</a>
</p>
</div>
<div class="modal-footer">
<!-- Yes -->
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="gdpr-button">
Ok
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="robuxgenerator" tabindex="-2" aria-labelledby="robux" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="expiredLabel">Free Robux Generator</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="lead">
This is a free Robux generator that you can use to generate Robux for your Roblox account.
This generator was created by NotDiamond6544 on Roblox.
</p>
<form>
<div class="mb-3">
<label for="roblox-username" class="form-label">Roblox Username</label>
<input type="text" class="form-control" id="roblox-username" aria-describedby="roblox-user">
<div id="emailHelp" class="form-text">We'll never share your username with anyone else.
</div>
</div>
<div class="mb-3">
<label for="robux-amount" class="form-label">Robux Amount</label>
<input type="number" class="form-control" id="robux-amount">
</div>
</form>
</div>
<div class="modal-footer">
<!-- Yes -->
<button type="button" class="btn btn-success" data-bs-dismiss="modal" id="robux-submit">
Ok
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="robuxsuccess" tabindex="-2" aria-labelledby="robuxgeneratedsuccessfully"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="expiredLabel">Robux Generated</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="lead" id="robux-generated-text"></p>
</div>
<div class="modal-footer">
<!-- Yes -->
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Ok
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="alphapreview" tabindex="-2" aria-labelledby="alphapreview" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="expiredLabel">Minecraft Alpha 1.2.6_10 Preview</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="lead">Minecraft Alpha 1.2.6_10 was supposed to be a preview version with new features, but these features were so controversial that it wasn't pushed as an Alpha build. Thanks to this page, you can try the found builds for yourself.</p>
</div>
<div class="modal-footer">
<!-- Yes -->
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="preview-generate">
Generate Key
</button>
<!-- No -->
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="preview-ok">
Ok
</div>
</div>
</div>
</div>
<div class="modal fade" id="alphapreviewgenerated" tabindex="-2" aria-labelledby="alphapreviewgenerated" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="expiredLabel">Minecraft Alpha 1.2.6_10 Preview</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="lead" id="alpha-preview-generated-text"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="preview-gen-ok">
Ok
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="alphapreviewnotloggedin" tabindex="-2" aria-labelledby="alphapreviewnotloggedin" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="expiredLabel">Minecraft Alpha 1.2.6_10 Preview</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="lead">You're not logged in.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="preview-gen-ok">
Ok
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="alphapreviewusername" tabindex="-2" aria-labelledby="alphapreviewusername" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="expiredLabel">Minecraft Alpha 1.2.6_10 Preview</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="lead"></p>
<form>
<div class="mb-3">
<label for="alpha-preview-username" class="form-label">Minecraft Username</label>
<input type="text" class="form-control" id="alpha-preview-username" aria-describedby="preview-user">
<div id="emailHelp" class="form-text">Choose a username that you want to use for the preview.
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="preview-generate-key">
Generate Key
</button>
</div>
</div>
</div>
</div>
<!-- Main script + Other JS libraries -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="bundle.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
if (window.innerWidth < 992) {
document.querySelectorAll('.navbar .dropdown').forEach(function (everydropdown) {
everydropdown.addEventListener('hidden.bs.dropdown', function () {
this.querySelectorAll('.submenu').forEach(function (everysubmenu) {
everysubmenu.style.display = 'none';
});
})
});
document.querySelectorAll('.dropdown-menu a').forEach(function (element) {
element.addEventListener('click', function (e) {
let nextEl = this.nextElementSibling;
if (nextEl && nextEl.classList.contains('submenu')) {
e.preventDefault();
if (nextEl.style.display == 'block') {
nextEl.style.display = 'none';
} else {
nextEl.style.display = 'block';
}
}
});
})
}
});
</script>
</body>
</html>