<!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>Fuksus Loading</title>
<link rel="stylesheet" href="style/main.css">
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.js"
integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script src="script/main.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body x-data="Main()" x-init="listen">
<!-- Background video-->
<div id="video-container">
<iframe src="https://www.youtube.com/embed/5P7i9jV9jew?autoplay=1&mute=1&controls=0&loop=1"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<img id="cursor" class="w-[28px] absolute z-[1000] pointer-events-none scale-110" src="./img/cursor.png">
<!-- Background video-->
<div class="container">
<!-- Navigation -->
<nav class="flex items-center mb-20">
<img src="./img/logo2.png" alt="" class="mr-10">
<template x-for="button in buttons">
<div class="button px-5 py-2 rounded-md ml-3 font-medium" :class="button.selected ? 'selected':''"
x-text="button.label" @click="button.selected = selectBtn(button.selected)">Forside</div>
</template>
</nav>
<!-- Navigation -->
<!-- Home -->
<div class="home" x-show="buttons[0].selected" x-transition:enter.duration.1000ms>
<div class="text-white text-4xl font-medium mb-5">HYPERION REBOOTED</div>
<div class="text-white/60 max-w-4xl text-xl font-normal min-[1024px]:w-[400px] min-[2550px]:w-fit"><h1 id="userName">Velkommen, <span></span>!</h1></div>
<!-- Discord Widget -->
<div class="bg-white w-fit p-5 rounded-xl mt-10 flex gap-5 items-center">
<div class="bg-black w-[80px] h-[80px] rounded-xl flex justify-center">
<img class="w-[30px]" src="./img/discord-logo.svg" alt="Discord Logo">
</div>
<div>
<div class="text-xl text-black font-medium">Hyperion Discord</div>
<div class="text-black/80" x-text="memberCount + ' online members'"></div>
</div>
<a class="cursor-none bg-[#6536EA] hover:bg-[#4F2DAE] text-sm font-medium inline-flex gap-2 px-4 py-2 rounded-md text-white uppercase ml-10 transition duration-300 ease-in-out"
:href="DiscordInviteLink" target="_blank"
@click="window.invokeNative('openUrl', DiscordInviteLink);">Åben <img src="./img/arrow.svg" alt=""
x-transition></a>
</div>
<!-- Discord Widget -->
</div>
<!-- Home -->
<div x-show="buttons[1].selected" x-transition:enter.duration.1000ms>
<div class="text-white text-4xl font-medium mb-5">Nyheder</div>
<div class="text-white/60 max-w-4xl text-xl font-normal mb-8 min-[1024px]:w-[700px] min-[2550px]:w-fit">Her
kan du se en liste over de seneste nyheder fra teamet!</div>
<div id="newscontainer" class="w-fit h-[600px] overflow-y-auto rounded-xl flex flex-col gap-5">
<template id="newstemplate">
<div
class="bg-white p-5 w-fit h-fit rounded-xl hover:bg-[#F2F2F2] transition duration-300 ease-in-out">
<span class="text-black font-medium text-xl" id="newslabel"></span>
<div class="text-black w-[600px] mb-3" id="newsdesc"></div>
<img class="w-full rounded-xl" id="newsimage" alt="">
<div class="inline-flex gap-3">
<div class="text-sm text-black bg-black/10 rounded-md mt-4 w-fit px-3 py-1.5" id="newsdate">
</div>
<div class="text-sm text-white bg-[#6536EA] rounded-md mt-4 w-fit px-3 py-1.5"
id="newsauthor"></div>
</div>
</div>
</template>
</div>
</div>
<div class="team" x-show="buttons[2].selected" x-transition:enter.duration.1000ms>
<div class="text-white text-4xl font-medium mb-5">Team</div>
<div class="text-white/60 max-w-4xl text-xl font-normal mb-8 min-[1024px]:w-[700px] min-[2550px]:w-fit">
Holdet bag Hyperion Rebooted.</div>
<div id="teamcontainer" class="inline-flex flex-wrap w-[600px] gap-3 overflow-y-auto h-[630px]">
<template id="teamtemplate">
<div class="bg-black/50 member h-fit w-fit px-8 py-5 rounded-xl hover:bg-[#6536EA] transition duration-300 ease-in-out"
@click="copyToClipboard(member.discord)">
<img class="w-48 mb-5" id="memberimg" alt="">
<div class="discord text-xl text-white" id="membername"></div>
<div class="role text-md text-white/60" id="memberrole"></div>
</div>
</template>
</div>
</div>
</div>
<div class="bg1" style="background-image: url(img/about-img.png)" x-show="buttons[0].selected"
x-transition:enter.duration.1000ms x-transition:leave.duration.400ms></div>
<div class="bg1" style="background-image: url(img/news-img.png)" x-show="buttons[1].selected"
x-transition:enter.duration.1000ms x-transition:leave.duration.400ms></div>
<div class="bg1" style="background-image: url(img/team-img.png)" x-show="buttons[2].selected"
x-transition:enter.duration.1000ms x-transition:leave.duration.400ms></div>
<div class="music-container" :class="musicOpen ? 'active':''">
<img src="./img/music.png" alt="">
<div class="circle" @click="musicOpen = !musicOpen">
<div class="bar1"></div>
<div class="bar2" :class="musicOpen ? 'active':''"></div>
</div>
<div class="visualizer">
<div class="bar" :class="isMusicPlaying ? 'active':''"></div>
<div class="bar" :class="isMusicPlaying ? 'active2':''"></div>
<div class="bar" :class="isMusicPlaying ? 'active3':''"></div>
</div>
<div class="info" x-show="musicOpen" x-transition:enter.duration.2800ms x-transition:leave.duration.50ms>
<div>
<div class="label font-normal text-lg overflow-hidden" x-text="musicList[currentSong].label"></div>
<div class="author overflow-hidden" x-text="musicList[currentSong].author"></div>
<img src="./img/back.svg" alt="" class="back" @click="prev()">
<img src="./img/pause.svg" alt="" class="pause" x-show="isMusicPlaying" @click="pause()">
<img src="./img/play.svg" alt="" class="play" x-show="!isMusicPlaying" @click="play()">
<img src="./img/forward.svg" alt="" class="forward" @click="next()">
</div>
</div>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', () => {
document.querySelector('#userName > span').innerText = window.nuiHandoverData.name;
});
</script>
<script>
// Brug øverste setting på lokal test, udenfor spillet.
// const jsonUrl = 'https://corsproxy.io/?https%3A%2F%2Fgit.thnght.pro%2FHyperion%2FPublic%2Fraw%2Fbranch%2Fmain%2Finfo%2Fchangelog.json';
// const teamUrl = 'https://corsproxy.io/?https%3A%2F%2Fgit.thnght.pro%2FHyperion%2FPublic%2Fraw%2Fbranch%2Fmain%2Finfo%2Fstaff.json';
// Brug nedenstående setting, når det er i spillet.
const jsonUrl = 'https://git.thnght.pro/Hyperion/Public/raw/branch/main/info/changelog.json';
const teamUrl = 'https://git.thnght.pro/Hyperion/Public/raw/branch/main/info/staff.json';
const newsContainer = document.getElementById('newscontainer');
const newsTemplate = document.getElementById('newstemplate');
fetch(jsonUrl)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
data.forEach(newsItem => {
const clone = document.importNode(newsTemplate.content, true);
clone.getElementById('newslabel').textContent = newsItem.label;
clone.getElementById('newsdesc').textContent = newsItem.desc;
clone.getElementById('newsimage').src = newsItem.img;
clone.getElementById('newsdate').textContent = newsItem.date;
clone.getElementById('newsauthor').textContent = newsItem.author;
newsContainer.appendChild(clone);
});
})
.catch(error => {
console.error('Error fetching data:', error);
});
const teamContainer = document.getElementById('teamcontainer');
const teamTemplate = document.getElementById('teamtemplate');
fetch(teamUrl)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
data.forEach(teamItem => {
const clone = document.importNode(teamTemplate.content, true);
clone.getElementById('memberimg').src = teamItem.img;
clone.getElementById('membername').textContent = teamItem.discord;
clone.getElementById('memberrole').textContent = teamItem.role;
teamContainer.appendChild(clone);
});
})
.catch(error => {
console.error('Error fetching data:', error);
});
</script>
</body>
</html>