improve the site a bit, make it work on mobile and have a better user

experience with fonts
This commit is contained in:
Soph :3 2025-09-30 13:24:59 +03:00
parent 7e47f784d0
commit 25808e0d08

View file

@ -1,208 +1,248 @@
<div id="app"> <html>
<header <head>
style=" <meta name="viewport" content="width=device-width, initial-scale=1" />
display: flex; <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet" />
align-items: center; <title>LV modpakas serveris</title>
background: linear-gradient( </head>
90deg, <body></body>
#b22234 0%, <div id="app">
#ffffff 50%, <header
#b22234 100%
);
padding: 1rem;
"
>
<img
src="https://upload.wikimedia.org/wikipedia/commons/8/84/Flag_of_Latvia.svg"
alt="Latvian Flag"
style="height: 40px; margin-right: 1rem"
/>
<h1 style="margin: 0; font-family: &quot;Segoe UI&quot;, sans-serif">
LV Modpaka's serveris
</h1>
</header>
<nav
style="display: flex; gap: 1rem; background: #eee; padding: 0.5rem 1rem"
>
<button
v-on:click="page = 'home'"
:class="{active: page === 'home'}"
style="
border: none;
background: none;
cursor: pointer;
font-size: 1rem;
"
>
Mājas
</button>
<button
v-on:click="page = 'docs'"
:class="{active: page === 'docs'}"
style="
border: none;
background: none;
cursor: pointer;
font-size: 1rem;
"
>
Dokumentācija
</button>
</nav>
<main style="padding: 2rem">
<section v-if="page === 'home'">
<div
style="display: flex; align-items: center; margin-bottom: 2rem"
>
<a href="/LV%20Modpaka.zip" target="_blank">
<h2 style="margin: 0">Lejupielādē šeit!</h2>
</a>
</div>
<h3>Galvanās fīčas</h3>
<ul>
<li>
<strong>Veiktspējas modifikācijas:</strong> Mēs izmantojam
<em>Sodium</em> un <em>Lithium</em>, lai nodrošinātu
vienmērīgu spēles gaitu, kā arī <em>C2ME</em> un
<em>EntityCulling</em>, lai nodrošinātu ātrdarbību pat tad,
ja spēlē piedalās daudz spēlētāju un ir daudz būvju.
</li>
<li>
<strong>Tehnoloģijas un automatizācija:</strong>
Modifikācijas, piemēram, <em>CC: Tweaked</em> (programmējami
datori), <em>Simple Copper Pipes</em>,
<em>Large Fluid Tank</em> un <em>Energized Power</em>, ļauj
jums būvēt visdažādākās mašīnas un ierīces.
</li>
<li>
<strong>Dekorēšana un dzīves kvalitāte:</strong>
<em>Cooking for Blockheads</em> padara virtuves patiesi
lietderīgas, <em>Vanilla Backpacks</em> un
<em>Item Collectors</em> palīdz ar uzglabāšanu, bet
<em>Jade</em> sniedz informāciju par visu, ko tu apskati.
</li>
<li>
<strong>Pasaule un izpēte:</strong>
<em>Oh The Biomes You'll Go</em> un
<em>Serene Seasons</em> pievieno jaunas biomas un sezonas
izmaiņas, tādējādi pasaule šķiet svaiga un dzīva.
</li>
<li>
<strong>Jautras papildfunkcijas:</strong> Vēlies sēdēt uz
kāpnēm? <em>Sit!</em> ļauj to darīt.
<em>Mutant Monsters</em> pievieno dažus jaunos savvaļas
mobus, un <em>Xaero's Minimap</em> palīdz tev nekad
neapmaldīties.
</li>
<li>
<strong>Anti-Grief & Server Tools:</strong>
<em>Anti-Xray</em> un
<em>Convenient MobGriefing</em> nodrošina taisnīgumu un
jautrību visiem.
</li>
</ul>
<h3>Kapēc pievienoties?</h3>
<p>
Mēs izveidojām šo modpack, lai tas būtu vieta, kur tu vari
izpaust savu radošumu ar tehnoloģiju palīdzību, būvēt skaistas
bāzes un izpētīt pasauli, kas pastāvīgi mainās. Neatkarīgi no
tā, vai tev patīk automatizācija, lauksaimniecība, dekorēšana
vai vienkārši atpūta, šeit tu atradīsi kaut ko sev piemērotu.
Turklāt mēs cenšamies nodrošināt draudzīgu vidi bez kavēšanās,
lai jūs varētu patiesi baudīt spēli kopā ar citiem.
Pievienojieties mums un redziet, ko jūs varat uzcelt!
</p>
<div
style=" style="
display: flex;
align-items: center;
background: linear-gradient(
90deg,
#b22234 0%,
#ffffff 50%,
#b22234 100%
);
padding: 1rem;
"
>
<img
src="https://upload.wikimedia.org/wikipedia/commons/8/84/Flag_of_Latvia.svg"
alt="Latvian Flag"
style="height: 40px; margin-right: 1rem"
/>
<h1
style="
margin: 0;
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
"
>
LV Modpaka's serveris
</h1>
</header>
<nav
style="
display: flex;
gap: 1rem;
background: #eee;
padding: 0.5rem 1rem;
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
"
>
<button
v-on:click="page = 'home'"
:class="{active: page === 'home'}"
style="
border: none;
background: none;
cursor: pointer;
font-size: 1rem;
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
"
>
Mājas
</button>
<button
v-on:click="page = 'docs'"
:class="{active: page === 'docs'}"
style="
border: none;
background: none;
cursor: pointer;
font-size: 1rem;
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
"
>
Dokumentācija
</button>
</nav>
<main style="padding: 2rem; font-family: 'Inter', 'Segoe UI', Arial, sans-serif;">
<section v-if="page === 'home'">
<div
style="
display: flex;
align-items: center;
margin-bottom: 2rem;
"
>
<a href="/LV%20Modpaka.zip" target="_blank">
<h2 style="margin: 0">Lejupielādē šeit!</h2>
</a>
</div>
<h3>Galvanās fīčas</h3>
<ul>
<li>
<strong>Veiktspējas modifikācijas:</strong> Mēs
izmantojam <em>Sodium</em> un <em>Lithium</em>, lai
nodrošinātu vienmērīgu spēles gaitu, kā arī
<em>C2ME</em> un <em>EntityCulling</em>, lai
nodrošinātu ātrdarbību pat tad, ja spēlē piedalās
daudz spēlētāju un ir daudz būvju.
</li>
<li>
<strong>Tehnoloģijas un automatizācija:</strong>
Modifikācijas, piemēram,
<em>CC: Tweaked</em> (programmējami datori),
<em>Simple Copper Pipes</em>,
<em>Large Fluid Tank</em> un
<em>Energized Power</em>, ļauj jums būvēt
visdažādākās mašīnas un ierīces.
</li>
<li>
<strong>Dekorēšana un dzīves kvalitāte:</strong>
<em>Cooking for Blockheads</em> padara virtuves
patiesi lietderīgas, <em>Vanilla Backpacks</em> un
<em>Item Collectors</em> palīdz ar uzglabāšanu, bet
<em>Jade</em> sniedz informāciju par visu, ko tu
apskati.
</li>
<li>
<strong>Pasaule un izpēte:</strong>
<em>Oh The Biomes You'll Go</em> un
<em>Serene Seasons</em> pievieno jaunas biomas un
sezonas izmaiņas, tādējādi pasaule šķiet svaiga un
dzīva.
</li>
<li>
<strong>Jautras papildfunkcijas:</strong> Vēlies
sēdēt uz kāpnēm? <em>Sit!</em> ļauj to darīt.
<em>Mutant Monsters</em> pievieno dažus jaunos
savvaļas mobus, un <em>Xaero's Minimap</em> palīdz
tev nekad neapmaldīties.
</li>
<li>
<strong>Anti-Grief & Server Tools:</strong>
<em>Anti-Xray</em> un
<em>Convenient MobGriefing</em> nodrošina taisnīgumu
un jautrību visiem.
</li>
</ul>
<h3>Kapēc pievienoties?</h3>
<p>
Mēs izveidojām šo modpack, lai tas būtu vieta, kur tu
vari izpaust savu radošumu ar tehnoloģiju palīdzību,
būvēt skaistas bāzes un izpētīt pasauli, kas pastāvīgi
mainās. Neatkarīgi no tā, vai tev patīk automatizācija,
lauksaimniecība, dekorēšana vai vienkārši atpūta, šeit
tu atradīsi kaut ko sev piemērotu. Turklāt mēs cenšamies
nodrošināt draudzīgu vidi bez kavēšanās, lai jūs varētu
patiesi baudīt spēli kopā ar citiem. Pievienojieties
mums un redziet, ko jūs varat uzcelt!
</p>
<div
style="
margin-top: 2rem; margin-top: 2rem;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
padding-top: 1rem; padding-top: 1rem;
" ? "
> >
<strong>labs ass serveris bruh dont fw me</strong> <strong>labs ass serveris bruh dont fw me</strong>
</div> </div>
</section> </section>
<section v-if="page === 'docs'"> <section v-if="page === 'docs'">
<h2>Modu Dokumentācija</h2> <h2>Modu Dokumentācija</h2>
<p>Atrodi linkus priekš visiem mūsu modiem šeit:</p> <p>Atrodi linkus priekš visiem mūsu modiem šeit:</p>
<ul> <ul>
<li v-for="mod in mods" :key="mod.name"> <li v-for="mod in mods" :key="mod.name">
<a :href="mod.link" target="_blank">{{ mod.name }}</a> <a :href="mod.link" target="_blank"
</li> >{{ mod.name }}</a
</ul> >
</section> </li>
</main> </ul>
</div> </section>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script> </main>
<script src="/fast-toml.js"></script> </div>
<script type="module"> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
new Vue({ <script src="/fast-toml.js"></script>
el: "#app", <script type="module">
data: { new Vue({
page: "home", el: "#app",
mods: [], data: {
}, page: "home",
created: function () { mods: [],
var self = this; },
// Fetch index.toml created: function () {
fetch("modpack/index.toml") var self = this;
.then(function (response) { // Fetch index.toml
return response.text(); fetch("modpack/index.toml")
}) .then(function (response) {
.then(function (indexTomlText) { return response.text();
var indexData = TOML.parse(indexTomlText); })
// indexData.files is an array of mod file objects .then(function (indexTomlText) {
var modFiles = (indexData.files || []).filter(function (f) { var indexData = TOML.parse(indexTomlText);
return ( // indexData.files is an array of mod file objects
f.file && var modFiles = (indexData.files || []).filter(
f.file.startsWith("mods/") && function (f) {
f.file.endsWith(".pw.toml") return (
); f.file &&
}); f.file.startsWith("mods/") &&
f.file.endsWith(".pw.toml")
);
},
);
// For each mod file, fetch and parse its TOML // For each mod file, fetch and parse its TOML
var modPromises = modFiles.map(function (modFile) { var modPromises = modFiles.map(function (modFile) {
var modTomlPath = "modpack/" + modFile.file; var modTomlPath = "modpack/" + modFile.file;
return fetch(modTomlPath) return fetch(modTomlPath)
.then(function (response) { .then(function (response) {
return response.text(); return response.text();
}) })
.then(function (modTomlText) { .then(function (modTomlText) {
var modData = TOML.parse(modTomlText); var modData = TOML.parse(modTomlText);
var modrinth = var modrinth =
modData.update && modData.update.modrinth; modData.update &&
if (modData.side == "server") { modData.update.modrinth;
return null; if (modData.side == "server") {
} return null;
if (modrinth && modrinth["mod-id"]) { }
return { if (modrinth && modrinth["mod-id"]) {
name: return {
modData.name || modrinth["mod-id"], name:
link: modData.name ||
"https://modrinth.com/mod/" + modrinth["mod-id"],
modrinth["mod-id"], link:
}; "https://modrinth.com/mod/" +
} else { modrinth["mod-id"],
// fallback: just show name, no link };
return { } else {
name: modData.name || modFile.file, // fallback: just show name, no link
link: "#", return {
}; name:
} modData.name ||
}) modFile.file,
.catch(function (err) { link: "#",
// If mod TOML fails, skip it };
return null; }
})
.catch(function (err) {
// If mod TOML fails, skip it
return null;
});
}); });
});
Promise.all(modPromises).then(function (modsArr) { Promise.all(modPromises).then(function (modsArr) {
// Filter out nulls (failed loads) // Filter out nulls (failed loads)
self.mods = modsArr.filter(function (m) { self.mods = modsArr.filter(function (m) {
return m; return m;
});
});
}); });
}); },
}); });
}, </script>
}); </body>
</script> </html>