tenkuma/neoBeta
tenkuma/neoBeta
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Responsive UI, reworked project loading script and WIP automatic featured section.

Browse source
This commit is contained in:
天クマ 2025-03-28 17:56:04 -03:00
commit ed347bcfca
6 changed files with 88 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

1
featured.json Normal file
View file

@ -0,0 +1 @@
["aboukkit"]

8
index.html
View file

@ -2,8 +2,10 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="styles.css" media="screen">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="project.js"></script>
<script src="featured.js" defer></script>
<title>NBeta</title>
</head>
<body>
@ -23,7 +25,7 @@
<p>This is a project that aims to preserve Minecraft Beta mods and plugins through archives of documentation and JARs and showcase new plugins for beta.</p>
<div id="featured"><h2>featured projects</h2>
<div id="featuredHelper">
<div class="featuredProject">
<!-- <div class="featuredProject">
<a href="project.html?id=aboukkit">
<img src="images/projects/aboukkit.png">
<p>Aboukkit</p>
@ -41,7 +43,7 @@
<img src="images/projects/hats.png">
<p>Hats</p>
<p>by AleksandarHaralanov</p>
</div>
</div> -->
</div>
</div>
</main>

11
index.js Normal file
View file

@ -0,0 +1,11 @@
const featuredHelper = document.querySelector("#featuredHelper")
async function loadFeatured() {
const response = await fetch(`bananas.json`);
if (!response.ok) {
featuredHelper.innerHTML = `
<p>Oops! Failed to fetch featured projects...</p>
`
throw new Error("Failed to fetch featured projects JSON");
}
}

15
project.html
View file

@ -2,12 +2,12 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="styles.css" media="screen">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NBeta</title>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="MinecraftColorCodes.3.7.js"></script>
<script src="project.js" defer></script>
<!-- <script src="MinecraftColorCodes.3.7.js"></script> -->
<script src="project.js"></script>
</head>
<body>
<div id="everythingHelper">
@ -32,5 +32,14 @@
<main id="projectDescription">
</main>
</div>
<script>
const downloadButton = document.querySelector("#projectHeader button");
const header = document.querySelector("#projectHeader");
const headerTitle = document.querySelector("#projectHeader h1");
const subtitle = document.querySelector("#projectHeader p");
const main = document.querySelector("main");
const logo = document.querySelector("#projectHeader img");
loadProject(projectID, headerTitle, subtitle, main, logo);
</script>
</body>
</html>

62
project.js
View file

@ -1,42 +1,32 @@
const downloadButton = document.querySelector("#projectHeader button");
const header = document.querySelector("#projectHeader");
const headerTitle = document.querySelector("#projectHeader h1");
const subtitle = document.querySelector("#projectHeader p");
const main = document.querySelector("main");
const logo = document.querySelector("#projectHeader img");
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const projectID = urlParams.get('id');
function loadProject() {
var jsonXhr = new XMLHttpRequest();
jsonXhr.open("GET", "projects/" + projectID + "/project.json", true);
jsonXhr.onreadystatechange = function () {
if (jsonXhr.readyState === 4 && jsonXhr.status === 200) {
var jsonData = JSON.parse(jsonXhr.responseText);
headerTitle.innerText = jsonData.project.title;
subtitle.innerText = jsonData.project.subtitle;
console.log(jsonData);
}
};
var mdXhr = new XMLHttpRequest();
mdXhr.open("GET", "projects/" + projectID + "/description.md", true);
mdXhr.onreadystatechange = function () {
if (mdXhr.readyState === 4 && mdXhr.status === 200) {
const html = marked.parse(
mdXhr.responseText.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/,"")
)
main.appendChild(html.replaceColorCodes());
console.log(html.replaceColorCodes());
}
};
jsonXhr.send();
mdXhr.send();
logo.src = "projects/" + projectID + "/logo.png";
async function getProjectJSON(id = projectID) {
const response = await fetch(`projects/${id}/project.json`);
if (!response.ok) throw new Error("Failed to fetch project JSON");
return response.json();
}
loadProject();
async function getProjectDescription(obj, id = projectID) {
const response = await fetch(`projects/${id}/description.md`);
if (response.ok) {
const text = await response.text();
obj.innerHTML = marked.parse(text.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/, ""));
}
}
async function loadProject(id = projectID, objTitle, objSubtitle, objDescription, objLogo) {
try {
const jsonData = await getProjectJSON(id);
if (objTitle) objTitle.innerText = jsonData.project.title;
if (objSubtitle) objSubtitle.innerText = jsonData.project.subtitle;
if (objDescription) await getProjectDescription(objDescription, id);
if (objLogo) objLogo.src = `projects/${id}/logo.png`;
} catch (error) {
console.error("Error loading project:", error);
}
}

38
styles.css
View file

@ -1,7 +1,6 @@
* {
margin: 0;
padding: 0;
}
@font-face {
@ -13,6 +12,7 @@ body {
font-family: Minecraft, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: black;
color:white;
font-size : clamp(1.2rem, .2vw, 2rem);
}
header {
@ -79,6 +79,7 @@ button:hover {
#everythingHelper {
max-width: 60%;
margin: auto;
transform: .2s;
}
#headerLinks {
@ -140,7 +141,8 @@ button:hover {
}
#projectTitleSubtitle {
margin-top: auto;
margin-bottom: auto;
}
#projectHeader {
@ -161,6 +163,12 @@ button:hover {
cursor: pointer;
}
#projectHeader img {
outline: 2px solid gray;
width: 5vw;
height: 5vw;
}
#projectDescription li {
margin-left: 20px;
list-style-type: "> ";
@ -168,4 +176,30 @@ button:hover {
#projectDescription h1, h2 {
margin-bottom: 8px;
}
@media only screen and (max-width: 1280px) {
#everythingHelper {
max-width: 80%;
}
#linksBox {
flex-direction: column;
}
#linksBox * {
margin-left: auto;
margin-right: auto;
}
}
@media only screen and (max-width: 300px) {
#everythingHelper {
max-width: 90%;
}
}