200 lines
10 KiB
HTML
200 lines
10 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>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.
|
|
|
|
// Brug nedenstående setting, når det er i spillet.
|
|
|
|
const jsonUrl = 'https://csaber.ovh/Hyperion/Public/raw/branch/main/info/changelog.json';
|
|
const teamUrl = 'https://csaber.ovh/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> |