Luanti-Minetest/luanti-web
1
0
Fork 0
Code Issues Pull requests Projects Releases 6 Packages Wiki Activity Actions

first alpha (v0.1)

Browse source
This commit is contained in:
Rainer 2025-06-07 13:48:21 +02:00
commit 21d58c29f7
26 changed files with 15935 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

474
site_generator/templates/css.template Executable file
View file

@ -0,0 +1,474 @@
body { font-family: sans-serif; margin: 0; background-color: #333; color: #ddd; line-height: 1.6; }
header {
background-color: #222;
padding: 1em;
text-align: center;
border-bottom: 2px solid #4A2E0A;
}
header h1 { margin: 0; color: #FFD700; }
.header-separator {
width: 100px;
height: 2px;
background-color: #FFD700;
border: 0;
border-radius: 1px;
margin: 15px auto 10px auto;
}
nav {
margin-top: 15px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
}
nav ul li {
display: inline-block;
margin: 0 2px;
}
nav ul li a {
display: block;
padding: 8px 15px;
color: #ddd;
text-decoration: none;
font-weight: bold;
border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
}
nav ul li a:hover {
background-color: #555;
color: #FFC500;
text-decoration: none;
}
nav ul li.active a {
background-color: #FFA500;
color: #222;
}
a { color: #FFA500; text-decoration: none; }
a:hover { text-decoration: underline; color: #FFC500; }
.header-banner {
width: 100%;
height: 240px;
background-image: url('${css_banner_image_path}?v=${CACHE_BUSTER}');
background-size: cover;
background-position: center 45%;
border-bottom: 2px solid #4A2E0A;
}
.container {
max-width: 1000px;
margin: 20px auto;
padding: 20px;
background-color: #444;
border: 1px solid #555;
border-radius: 8px;
position: relative;
}
h2 { color: #FFD700; border-bottom: 1px solid #555; padding-bottom: 0.5em; }
h2.world-detail-title { text-align: center; font-size: 1.8em; }
h3 { color: #FFD700; margin-top: 1.5em; padding-bottom: 0.3em; border-bottom: 1px dotted #555;}
/* Welt-Übersicht */
a.world-preview {
display: block;
border: 1px solid #555;
margin-bottom: 20px;
padding: 15px;
background-color: #3a3a3a;
border-radius: 5px;
text-decoration: none;
color: #ddd;
}
a.world-preview:hover {
background-color: #4f4f4f;
text-decoration: none;
}
.world-preview .world-preview-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #666; padding-bottom: 10px; margin-bottom: 10px;}
.world-preview .world-preview-header h3 { border-bottom: none; margin: 0; padding: 0; font-size: 1.5em; color: #FFD700 !important; text-decoration: none !important; }
.world-preview .world-preview-header h3:hover { text-decoration: none !important; }
.world-preview .world-preview-header .online-status-badge { font-size: 0.9em; }
.world-preview .world-preview-content { display: flex; align-items: flex-start; }
.world-preview img { max-width: 180px; max-height: 135px; object-fit: cover; height: auto; margin-right: 15px; border: 1px solid #666; flex-shrink: 0; }
.world-preview-text p { color: #ccc !important; margin-top: 0; text-decoration: none !important; }
.world-preview-footer { font-size: 0.85em; color: #aaa; border-top: 1px solid #666; margin-top: 10px; padding-top: 10px; }
.online-status-badge { font-size: 0.8em; padding: 3px 8px; border-radius: 10px; color: white !important; margin-left: 10px; }
.online-status-badge.online { background-color: #3E8E41; } .online-status-badge.offline { background-color: #C0392B; }
/* Welt-Detailseite */
.page-nav-buttons { text-align: right; margin-top: 10px; margin-bottom: 15px; }
.page-nav-buttons .button { background-color: #555; color: #FFA500; border: 1px solid #666; padding: 5px 10px; margin-left: 5px; margin-bottom: 5px; border-radius: 3px; text-decoration: none; font-size: 0.9em; display: inline-block; }
.page-nav-buttons .button:hover { background-color: #666; color: #FFC500; }
.leaflet-map { width: 100%; height: 500px; border: 1px solid #666; margin-bottom: 5px; border-radius: 3px;}
.map-sub-info { display: flex; justify-content: space-between; align-items: center; font-size: 0.9em; color: #aaa; margin-bottom: 20px; padding: 5px 0; }
.map-sub-info .map-file-link { text-align: left; } .map-sub-info .map-last-update { text-align: right; }
.info-box { background-color: #3a3a3a; border: 1px solid #555; padding: 15px; margin-bottom: 20px; border-left: 5px solid #FFD700; border-radius: 3px;}
.info-box h3 { margin-top: 0; border-bottom: none; padding-bottom: 0.2em; }
/* Admin Sektion */
.admin-section h3 { margin-top: 2.5em !important; }
.admin-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.admin-box {
background-color: #303030;
padding: 15px;
border-radius: 5px;
border: 1px solid #4a4a4a;
flex: 1;
min-width: 280px;
}
.admin-contact-block { display: flex; align-items: center; }
.admin-skin-icon { width: 48px; height: 48px; margin-right: 15px; border: 1px solid #666; border-radius: 3px; flex-shrink: 0;}
.admin-text-details p { margin: 0.2em 0; }
.admin-player-name { font-weight: bold; color: #FFD700; font-size: 1.1em; }
.contact-links {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #555;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.contact-button {
background-color: #555;
color: #ddd;
border: 1px solid #666;
padding: 3px 8px;
font-size: 0.85em;
border-radius: 3px;
text-decoration: none;
position: relative;
}
.contact-button:hover {
background-color: #666;
color: #FFA500;
text-decoration: none;
}
.contact-links a[data-title]:hover::after {
content: attr(data-title);
position: absolute;
background-color: #222;
color: #fff;
padding: 3px 7px;
border-radius: 3px;
font-size: 0.7rem;
white-space: nowrap;
z-index: 100;
left: 50%;
bottom: 125%;
transform: translateX(-50%);
border: 1px solid #555;
}
.server-details p { margin: 0.5em 0; display: flex; align-items: center;} .server-details strong { min-width: 120px; display: inline-block; flex-shrink: 0;}
.status-text-colored.online { color: #7CFC00; font-weight: bold; }
.status-text-colored.offline { color: #FF4500; font-weight: bold; }
.info-separator { border: 0; height: 1px; background-color: #FFA500; margin: 15px 0; }
.copy-button { background: #555; border: 1px solid #666; color: #FFA500; padding: 1px 5px; margin-left: 8px; cursor: pointer; border-radius: 3px; font-size: 0.8em; vertical-align: middle;}
.copy-button:hover { background: #666; }
.player-list-container { margin-top: 1em; }
.player-list-grid { display: flex; flex-wrap: wrap; gap: 15px; box-sizing: border-box; }
.player-box { background-color: #303030; border: 1px solid #555; border-radius: 5px; padding: 10px; width: calc(33.333% - 10px); box-sizing: border-box; display: flex; flex-direction: column;}
.player-box.has-server-priv { border-left: 5px solid #FFD700; }
.player-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.player-identity { display: flex; align-items: center; }
.player-vitals { display: flex; gap: 10px; }
.player-icon { width: 40px; height: 40px; margin-right: 10px; border: 1px solid #666; border-radius: 3px; flex-shrink: 0;}
.player-name-status { display: flex; align-items: center; }
.player-name { font-weight: bold; margin-left: 5px; color: #FFD700; }
.privilege-separator {
height: 1px;
background-color: #555;
border: 0;
margin: 8px 0;
}
.player-attributes { font-size: 0.9em; line-height: 1.5; }
.player-attributes .icon { margin-right: 8px; cursor: help; font-size: 1.2em; }
.player-attributes .icon.privilege { opacity: 0.15; }
.player-attributes .icon.privilege.active { opacity: 1; }
.player-attributes .icon[data-title]:hover::after, .status-dot[data-title]:hover::after, .player-vitals .icon[data-title]:hover::after {
content: attr(data-title); position: absolute; background-color: #222; color: #fff;
padding: 3px 7px; border-radius: 3px; font-size: 0.85em; white-space: nowrap;
z-index: 100; margin-left: 5px; transform: translateY(-28px);
border: 1px solid #555;
}
footer { text-align: center; margin-top: 30px; padding: 20px; background-color: #222; color: #aaa; border-top: 2px solid #4A2E0A;}
.scrollable-mod-list { max-height: 20em; overflow-y: auto; border: 1px solid #555; padding: 10px; background-color: #303030; margin-top: 0.5em; border-radius: 3px; }
ul.mod-list, ul.mod-list ul { list-style-type: none; padding-left: 20px; } ul.mod-list > li { margin-bottom: 0.5em; }
ul.mod-list > li > ul > li { font-size: 0.9em; }
.status-dot { height: 10px; width: 10px; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: middle; background-color: #bbb; cursor: help;}
.status-dot.online { background-color: #7CFC00; }
.status-dot.offline { background-color: #FF4500; }
.status-dot.unknown { background-color: #FFA500; }
.status-text { vertical-align: middle; }
.status-text.status-loading { color: #ccc; font-style: italic; }
.status-text.status-online { color: #7CFC00; font-weight: bold; }
.status-text.status-offline { color: #FF4500; font-weight: bold; }
.status-text.status-unknown { color: #FFA500; font-weight: bold; }
.archive-controls { margin-bottom: 15px; } .archive-controls label { margin-right: 5px; }
.archive-controls select { padding: 5px; background-color: #555; color: #ddd; border: 1px solid #666; border-radius: 3px;}
.archive-image-container { margin-top: 10px; text-align: center; }
.archive-image-container img { max-width: 100%; border: 1px solid #666; background-color: #222; }
.archive-image-container p { color: #aaa; }
/* Stile für responsive Navigation & Burger-Menü */
.responsive-nav {
position: relative;
margin-bottom: 15px;
}
.burger-menu {
display: none;
width: 40px;
height: 40px;
background-color: #555;
border: 1px solid #666;
border-radius: 5px;
cursor: pointer;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding: 8px;
box-sizing: border-box;
position: absolute;
top: 0;
right: 0;
z-index: 101;
}
.burger-menu:hover {
background-color: #666;
}
.burger-menu span {
display: block;
width: 100%;
height: 3px;
background-color: #FFA500;
border-radius: 3px;
}
/* Stile für Live/Archiv Umschalter */
.section-header-flex {
display: flex;
justify-content: space-between;
align-items: center;
}
.map-toggle-controls {
display: flex;
gap: 5px;
}
.map-toggle-button {
background-color: #555;
color: #ddd;
border: 1px solid #666;
padding: 3px 8px;
font-size: 0.85em;
border-radius: 3px;
cursor: pointer;
}
.map-toggle-button:hover {
background-color: #666;
}
.map-toggle-button.active {
color: #FFA500;
border-color: #FFA500;
font-weight: bold;
}
/* Spielerliste Filter */
.filter-container {
position: relative;
}
.filter-dropdown-btn {
background-color: #555;
color: #ddd;
border: 1px solid #666;
padding: 3px 8px;
font-size: 0.85em;
border-radius: 3px;
cursor: pointer;
}
.filter-dropdown-btn:hover {
background-color: #666;
}
.filter-dropdown {
display: none;
position: absolute;
top: 100%;
right: 0;
background-color: #3a3a3a;
border: 1px solid #666;
border-radius: 5px;
padding: 10px;
z-index: 100;
min-width: 220px;
box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}
.filter-dropdown.show {
display: block;
}
.filter-option {
display: flex;
align-items: center;
margin-bottom: 8px;
cursor: pointer;
font-size: 0.9em;
font-weight: normal;
color: #ddd;
}
.filter-option:last-child {
margin-bottom: 0;
}
.filter-option input[type="checkbox"] {
margin-right: 8px;
}
.filter-option .icon {
font-size: 1.2em;
width: 20px;
text-align: center;
margin-right: 8px;
}
.filter-option .status-dot {
margin-left: 0;
margin-right: 8px;
}
/* Stile für "Weiterlesen"-Funktion */
.collapsible-text {
max-height: 250px;
overflow: hidden;
position: relative;
transition: max-height 0.5s ease-in-out;
}
.collapsible-text.expanded {
max-height: 10000px;
}
.collapsible-text::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background: linear-gradient(to bottom, rgba(68, 68, 68, 0), rgba(68, 68, 68, 1) 100%);
pointer-events: none;
transition: opacity 0.3s;
}
.collapsible-text.expanded::after {
opacity: 0;
}
.read-more-container {
text-align: right;
margin-top: 5px;
}
a.read-more-link {
font-size: 0.9em;
font-weight: bold;
}
/* Schließen-Button (X) */
.close-button-container {
position: absolute;
top: 15px;
right: 15px;
z-index: 10;
}
.close-button {
display: inline-flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
background-color: #555;
color: #ddd;
border: 1px solid #666;
border-radius: 50%;
text-decoration: none;
font-size: 1em;
line-height: 1;
}
.close-button:hover {
background-color: #C0392B;
color: white;
text-decoration: none;
}
/* Stile für "Nach oben"-Button */
.scroll-to-top-btn {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
background-color: #555;
color: #FFA500;
border: 1px solid #666;
border-radius: 50%;
width: 40px;
height: 40px;
text-align: center;
font-size: 24px;
line-height: 38px;
cursor: pointer;
transition: background-color 0.3s, opacity 0.3s;
}
.scroll-to-top-btn:hover {
background-color: #666;
text-decoration: none;
}
.scroll-to-top-btn.show {
display: block;
}
.leaflet-control-fullscreen a { background:#fff url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"%3E%3Cpath d="M4 14h6v6h4v-4h6v-4h-6v-4h-4v4H4zm17 2h12v-2H21zm0 4h12v-2H21zm5 1h7v-2h-7zM10 23h12v4h-4v-4h-4v4H10zm15 0h7v-2h-7z"/%3E%3C/svg%3E') no-repeat 0 0 !important; background-size: 16px 16px !important; }
.leaflet-control-fullscreen a.leaflet-fullscreen-on { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"%3E%3Cpath d="M7 13h2V7h6V5H7zm11-2h7v7h-2v-5h-5z"/%3E%3C/svg%3E') no-repeat 0 0 !important; background-size: 16px 16px !important; }
@media (max-width: 768px) {
/* Responsive Stile für Burger-Menü */
.responsive-nav {
height: 50px;
}
.burger-menu {
display: flex;
}
.page-nav-buttons {
display: none;
position: absolute;
top: 45px;
right: 0;
width: 200px;
background-color: #3a3a3a;
border: 1px solid #666;
border-radius: 5px;
z-index: 100;
padding: 5px;
box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}
.page-nav-buttons.menu-open {
display: flex;
flex-direction: column;
align-items: stretch;
}
.page-nav-buttons .button {
text-align: left;
margin: 5px;
width: auto;
}
.player-box { width: calc(50% - 10px); }
.page-nav-buttons .button { margin-top: 5px;}
/* Responsive Stile für Welt-Vorschau */
.world-preview .world-preview-content {
flex-direction: column;
}
.world-preview img {
width: 100%;
max-width: 100%;
height: auto;
margin-right: 0;
margin-bottom: 15px;
}
/* NEU: Responsive Höhe für Leaflet-Karte */
.leaflet-map {
height: auto; /* Deaktiviert die feste Höhe von 500px */
aspect-ratio: 1 / 1; /* Erzwingt ein quadratisches Seitenverhältnis */
max-height: 70vh; /* Stellt sicher, dass die Karte nicht den ganzen Bildschirm füllt */
}
}
@media (max-width: 480px) { .player-box { width: 100%; } }

9
site_generator/templates/html_footer.template Executable file
View file

@ -0,0 +1,9 @@
</div>
<footer>
<p>&copy; $(date '+%Y') ${SITE_TITLE} | Betreiber: ${SITE_OWNER_NAME} | <a href="impressum.html">Impressum</a> | <a href="datenschutz.html">Datenschutz</a></p>
</footer>
<a href="#" id="scrollToTopBtn" class="scroll-to-top-btn" title="Nach oben scrollen">▲</a>
</body>
</html>

54
site_generator/templates/html_header.template Executable file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${current_page_title} - ${SITE_TITLE}</title>
<link rel="stylesheet" href="${relative_path_prefix}/style.css?v=${CACHE_BUSTER}">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const scrollToTopBtn = document.getElementById('scrollToTopBtn');
// Scroll-Event nur für den "Nach oben"-Button
if (scrollToTopBtn) {
window.addEventListener('scroll', function() {
window.requestAnimationFrame(function() {
if (window.scrollY > 300) {
scrollToTopBtn.classList.add('show');
} else {
scrollToTopBtn.classList.remove('show');
}
});
});
// Klick-Event für den Scroll-To-Top Button
scrollToTopBtn.addEventListener('click', function(e) {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
}
});
</script>
</head>
<body>
<header>
<h1>${SITE_TITLE}</h1>
<div class="header-separator"></div>
<nav>
<ul>
<li class="${active_class_home}"><a href="${relative_path_prefix}/index.html">Startseite</a></li>
<li class="${active_class_worlds}"><a href="${relative_path_prefix}/worlds.html">Welten</a></li>
<li class="${active_class_downloads}"><a href="${relative_path_prefix}/downloads.html">Downloads</a></li>
</ul>
</nav>
</header>
<div class="header-banner"></div>
<div class="container">

3
site_generator/templates/world_detail_archive.template Executable file
View file

@ -0,0 +1,3 @@
<div class="archive-controls"><label for="archive-date-select-${current_world_key}">Archivdatum:</label><select id="archive-date-select-${current_world_key}"><option value="">-- Bitte wählen --</option></select><span id="archive-loading-error-${current_world_key}" style="color:red;margin-left:10px;"></span></div>
<div class="archive-image-container"><img id="archive-image-${current_world_key}" src="#" alt="Archivkarte" style="max-width:100%;border:1px solid #666;display:none;"><p id="archive-no-image-${current_world_key}" style="display:none;">Kein Bild für Auswahl.</p></div>
<script>(function(){const e=document.getElementById('archive-date-select-${current_world_key}'),t=document.getElementById('archive-image-${current_world_key}'),n=document.getElementById('archive-no-image-${current_world_key}'),o=document.getElementById('archive-loading-error-${current_world_key}'),a=${available_archive_dates_js_array},i='${archive_world_rel_to_webroot}';if(!e||!a||a.length===0)return void(e&&(e.disabled=!0,e.innerHTML='<option value="">Keine Archivdaten</option>'));a.forEach(a_date=>{const r=document.createElement('option');r.value=a_date,r.textContent=a_date,e.appendChild(r)}),e.addEventListener('change',function(){t.style.display='none',n.style.display='none',o.textContent='',this.value&&(t.onload=function(){t.style.display='block'},t.onerror=function(){n.style.display='block',o.textContent='Bild nicht geladen.'},t.src=i+'/'+this.value.replace(/-/g,'/')+'.png?v=${CACHE_BUSTER}&t='+new Date().getTime())})})();</script>

13
site_generator/templates/world_detail_map.template Executable file
View file

@ -0,0 +1,13 @@
<div id='mapid_${current_world_key}' class='leaflet-map'></div>
<div class='map-sub-info'>
${map_sub_info_link}
<span class='map-last-update'>Letzte Kartenaktualisierung: <span id='map-last-update-text-${current_world_key}'><em>wird geladen...</em></span></span>
</div>
<script>
var map_${current_world_key}=L.map('mapid_${current_world_key}',{fullscreenControl:true,fullscreenControlOptions:{position:'topleft',title:'Vollbild',titleCancel:'Vollbild verlassen'}});
var worldBounds=L.latLngBounds(L.latLng(${LEAFLET_BOUNDS_SOUTH},${LEAFLET_BOUNDS_WEST}),L.latLng(${LEAFLET_BOUNDS_NORTH},${LEAFLET_BOUNDS_EAST}));
map_${current_world_key}.fitBounds(worldBounds);
map_${current_world_key}.setMaxBounds(worldBounds);
map_${current_world_key}.setZoom(${LEAFLET_ZOOM_AFTER_FIT});
L.tileLayer('/${web_tiles_rel_path}/{z}/{x}/{y}.png?v=${CACHE_BUSTER}',{attribution:'&copy; ${SITE_TITLE} - ${WORLD_DISPLAY_NAME_PAGE}',minZoom:${min_zoom:-0},maxZoom:${max_zoom:-5},noWrap:true,bounds:worldBounds,tms:false}).addTo(map_${current_world_key});
</script>

374
site_generator/templates/world_detail_page.template Executable file
View file

@ -0,0 +1,374 @@
<div class='page-title-container'>
<h2 class='world-detail-title'>${WORLD_DISPLAY_NAME_PAGE}</h2>
</div>
<div class="close-button-container">
<a href="worlds.html" class="close-button" title="Zurück zur Weltenübersicht"><b>X</b></a>
</div>
<div class="responsive-nav">
<button id="burger-menu-toggle" class="burger-menu" aria-label="Menü öffnen/schließen">
<span></span>
<span></span>
<span></span>
</button>
<div class='page-nav-buttons' id="page-nav-buttons-container-${current_world_key}">
<a href='#server-info' class='button'>Server-Info</a>
<a href='#server-verbindung' class='button'>Verbindung</a>
<a href='#welt-admin' class='button'>Admin</a>
<a href='#beschreibung' class='button'>Beschreibung</a>
<a href='#spielregeln' class='button'>Spielregeln</a>
<a href='#weltradar' class='button'>Radar</a>
<a href='#mods' class='button'>Mods</a>
<a href='#spielerliste' class='button'>Spielerliste</a>
</div>
</div>
<div id='server-info' class='info-box server-details'>
<h3>Server-Info</h3>
<p><strong>Status:</strong> <span class='status-dot' id='status-dot-${current_world_key}'></span><span id='world-status-${current_world_key}' class='status-text status-loading'>${STATUS_TEXT_FALLBACK_PAGE}</span></p>
<p><strong>Spiel:</strong> <a href='https://content.luanti.org/packages/?type=game&q=${MT_GAMEID}' target='_blank' rel='noopener noreferrer'>${MT_GAMEID}</a></p>
<p><strong>Kreativmodus:</strong> <span class='status-text-colored ${creative_text_class}'>${creative_text}</span></p>
<p><strong>Schaden:</strong> <span class='status-text-colored ${damage_text_class}'>${damage_text}</span></p>
</div>
<div id='server-verbindung' class='info-box server-details'>
<h3>Server-Verbindung</h3>
<p><strong>Adresse:</strong> <span id='addr-${current_world_key}'>${SERVER_ADDRESS_PAGE}</span><button title='Adresse kopieren' class='copy-button' onclick='copyToClipboard("addr-${current_world_key}")'>📋</button></p>
<p><strong>Port:</strong> <span id='port-${current_world_key}'>${SERVER_PORT_PAGE}</span><button title='Port kopieren' class='copy-button' onclick='copyToClipboard("port-${current_world_key}")'>📋</button></p>
<p><strong>Passwort:</strong> <span id='pass-${current_world_key}'>${SERVER_ACCESS_INFO_PAGE}</span><button title='Info kopieren' class='copy-button' onclick='copyToClipboard("pass-${current_world_key}")'>📋</button></p>
</div>
<div id='welt-admin' class='admin-section'>
<h3>Welt-Admin</h3>
<div class='admin-grid'>
${ADMIN_BOXES_HTML}
</div>
</div>
<script>
// === Globale Variablen für Spielerliste ===
let masterPlayerData_${current_world_key} = {};
let playerFilters_${current_world_key} = {
activeOnly: false,
privileges: new Set()
};
function copyToClipboard(elementId) { const el = document.getElementById(elementId); if(el) { navigator.clipboard.writeText(el.innerText || el.textContent).then(() => { const btn = el.nextElementSibling; if(btn && btn.classList.contains('copy-button')) { const orig_btn_text = btn.innerHTML; btn.innerHTML = '✓'; setTimeout(() => { btn.innerHTML = orig_btn_text; }, 1500); } else { alert('Kopiert: ' + el.innerText); } }).catch(err => console.error('Fehler Kopieren: ', err));}}
function formatTimestampForDisplay(epochSeconds) { if (!epochSeconds || epochSeconds == 0) return 'unbekannt'; const date = new Date(epochSeconds * 1000); return date.toLocaleString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit'}) + ' Uhr';}
function fetchWorldStatus_${current_world_key}() {
const statusTextEl = document.getElementById('world-status-${current_world_key}');
const statusDotEl = document.getElementById('status-dot-${current_world_key}');
if (!statusTextEl || !statusDotEl) return;
const onlineStatusUrl = '/${web_online_status_rel_path}?v=${CACHE_BUSTER}&t=' + new Date().getTime();
const lastUpdateUrl = '/${web_last_update_rel_path}?v=${CACHE_BUSTER}&t=' + new Date().getTime();
Promise.all([
fetch(onlineStatusUrl).then(res => res.text()),
fetch(lastUpdateUrl).then(res => res.text())
]).then(([onlineStatusContent, lastUpdateContent]) => {
const dateObject = new Date(lastUpdateContent.trim());
const lastUpdateEpoch = !isNaN(dateObject.getTime()) ? Math.floor(dateObject.getTime() / 1000) : NaN;
const nowInSeconds = Math.floor(Date.now() / 1000);
if (!isNaN(lastUpdateEpoch) && (nowInSeconds - lastUpdateEpoch > 900)) {
statusDotEl.className = 'status-dot unknown';
statusTextEl.className = 'status-text status-unknown';
const formattedTime = formatTimestampForDisplay(lastUpdateEpoch);
statusTextEl.textContent = 'Unbekannt (seit: ' + formattedTime + ')';
return;
}
const onlineStatusParts = onlineStatusContent.split(' - ');
const currentStatus = onlineStatusParts[0].trim();
if (currentStatus === 'online') {
statusDotEl.className = 'status-dot online';
statusTextEl.className = 'status-text status-online';
statusTextEl.textContent = 'Online';
} else {
const offlineSince = onlineStatusParts.length > 1 ? onlineStatusParts.slice(1).join(' - ').trim() : 'unbekannt';
statusDotEl.className = 'status-dot offline';
statusTextEl.className = 'status-text status-offline';
statusTextEl.textContent = 'Offline (seit: ' + offlineSince + ')';
}
}).catch(error => {
console.error('Fehler beim Abrufen des Welt-Status (${current_world_key}):', error);
statusDotEl.className = 'status-dot offline';
statusTextEl.className = 'status-text status-offline';
statusTextEl.textContent = 'Status nicht abrufbar';
});
}
function fetchDataForElement(elementId, filePath, isRawText, prefixText, suffixText, isJsonPlayerList) {
const el = document.getElementById(elementId);
if (!el) { return; }
fetch('/' + filePath + '?v=${CACHE_BUSTER}&t=' + new Date().getTime())
.then(r => { if (!r.ok) throw new Error('Datei ' + filePath + ' nicht erreichbar (' + r.status + ')'); return r.text(); })
.then(t => {
let content = "";
if (t.trim() === "") {
content = (elementId.startsWith("map-last-update") ? "<em>unbekannt</em>" : "<em>Keine Daten verfügbar.</em>");
if (isJsonPlayerList) {
masterPlayerData_${current_world_key} = {};
applyPlayerFiltersAndRender_${current_world_key}();
}
} else {
if (isJsonPlayerList) {
masterPlayerData_${current_world_key} = JSON.parse(t);
applyPlayerFiltersAndRender_${current_world_key}();
return;
} else if (isRawText) {
const dv = document.createElement('div');
dv.textContent = t;
content = dv.innerHTML.replace(/\\n|\\r\\n|\\r/g, '<br>');
} else {
content = t.replace(/\\n|\\r\\n|\\r/g, '<br>');
}
}
el.innerHTML = (prefixText ? prefixText : '') + content + (suffixText ? suffixText : '');
}).catch(e => {
console.error('Fehler Laden ' + filePath + ':', e);
el.innerHTML = (prefixText ? prefixText : '') + '<em>nicht abrufbar</em>' + (suffixText ? suffixText : '');
});
}
function applyPlayerFiltersAndRender_${current_world_key}() {
const filteredData = {};
const now_epoch = Math.floor(Date.now() / 1000);
const twentyFourHoursInSeconds = 24 * 60 * 60;
for (const id in masterPlayerData_${current_world_key}) {
const player = masterPlayerData_${current_world_key}[id];
let passesFilter = true;
if (playerFilters_${current_world_key}.activeOnly) {
const isActive = player.last_login && (now_epoch - player.last_login < twentyFourHoursInSeconds);
if (!isActive) { passesFilter = false; }
}
if (passesFilter && playerFilters_${current_world_key}.privileges.size > 0) {
const playerPrivs = new Set(player.privilege ? player.privilege.toLowerCase().split(',') : []);
for (const requiredPriv of playerFilters_${current_world_key}.privileges) {
if (!playerPrivs.has(requiredPriv)) {
passesFilter = false;
break;
}
}
}
if (passesFilter) { filteredData[id] = player; }
}
const playerListContainer = document.getElementById('player-info-${current_world_key}');
if(playerListContainer) { playerListContainer.innerHTML = renderPlayerListHTML_${current_world_key}(filteredData); }
}
function renderPlayerListHTML_${current_world_key}(playerData) {
if (!playerData || Object.keys(playerData).length === 0) {
return "<p><em>Keine Spieler entsprechen den aktuellen Filtereinstellungen.</em></p>";
}
let html = "<div class='player-list-grid'>";
const now_epoch = Math.floor(Date.now() / 1000);
const twentyFourHoursInSeconds = 24 * 60 * 60;
for (const id in playerData) {
const p = playerData[id];
const privs = p.privilege ? p.privilege.toLowerCase().split(',') : [];
const hasServerPriv = privs.includes("server");
const playerBoxClass = "player-box" + (hasServerPriv ? " has-server-priv" : "");
let statusDotClass = "offline";
let lastLoginFormatted = 'unbekannt';
if (p.last_login) {
if ((now_epoch - p.last_login < twentyFourHoursInSeconds)) { statusDotClass = "online"; }
lastLoginFormatted = formatTimestampForDisplay(p.last_login);
}
const hasInteract = privs.includes('interact'); const hasShout = privs.includes('shout'); const hasFast = privs.includes('fast'); const hasFly = privs.includes('fly'); const hasGive = privs.includes('give'); const hasTeleport = privs.includes('teleport'); const hasAreas = privs.includes('areas'); const hasNoclip = privs.includes('noclip'); const hasSettime = privs.includes('settime'); const hasWeather = privs.includes('weather');
html += \`
<div class="\${playerBoxClass}">
<div class="player-header">
<div class="player-identity">
<img src="/images/players/\${encodeURIComponent(p.name)}.png?v=${CACHE_BUSTER}" class="player-icon" alt="\${p.name}" onerror="this.onerror=null;this.src='/${DEFAULT_PLAYER_SKIN_URL}?v=${CACHE_BUSTER}';">
<span class="player-name-status">
<span class="status-dot \${statusDotClass}" data-title="Letzter Login: \${lastLoginFormatted}"></span>
<strong class="player-name">\${p.name}</strong>
</span>
</div>
<div class="player-vitals">
<span class="icon" data-title="HP: \${p.hp !== undefined ? p.hp : '?'}">❤️</span>
<span class="icon" data-title="Atem: \${p.breath !== undefined ? p.breath : '?'}">💨</span>
<span class="icon" data-title="Ausdauer: \${p.stamina !== undefined ? p.stamina : '?'}">🍖</span>
</div>
</div>
<hr class="privilege-separator">
<div class="player-attributes">
<span class="icon privilege \${hasInteract ? 'active' : ''}" data-title="Interagieren">🖐️</span>
<span class="icon privilege \${hasShout ? 'active' : ''}" data-title="Rufen">📢</span>
<span class="icon privilege \${hasFast ? 'active' : ''}" data-title="Schnelles Laufen">🏃</span>
<span class="icon privilege \${hasFly ? 'active' : ''}" data-title="Fliegen">🕊️</span>
<span class="icon privilege \${hasGive ? 'active' : ''}" data-title="Geben">🎁</span>
<span class="icon privilege \${hasTeleport ? 'active' : ''}" data-title="Teleportieren">✨</span>
<span class="icon privilege \${hasAreas ? 'active' : ''}" data-title="Bereiche">🗺️</span>
<span class="icon privilege \${hasNoclip ? 'active' : ''}" data-title="Noclip">👻</span>
<span class="icon privilege \${hasSettime ? 'active' : ''}" data-title="Zeit setzen">🕒</span>
<span class="icon privilege \${hasWeather ? 'active' : ''}" data-title="Wetter">🌦️</span>
<span class="icon privilege \${hasServerPriv ? 'active' : ''}" data-title="Server-Admin">🛠️</span>
</div>
</div>\`;
}
html += "</div>";
return html;
}
document.addEventListener('DOMContentLoaded', function() {
// === Burger-Menü Logik ===
const burgerToggle = document.getElementById('burger-menu-toggle');
const navContainer = document.getElementById('page-nav-buttons-container-${current_world_key}');
if (burgerToggle && navContainer) {
burgerToggle.addEventListener('click', () => navContainer.classList.toggle('menu-open'));
navContainer.addEventListener('click', e => { if (e.target.classList.contains('button')) { navContainer.classList.remove('menu-open'); }});
}
// === Live/Archiv Umschalter Logik ===
const liveBtn = document.getElementById('toggle-live-btn-${current_world_key}');
const archiveBtn = document.getElementById('toggle-archive-btn-${current_world_key}');
const liveContainer = document.getElementById('live-map-container-${current_world_key}');
const archiveContainer = document.getElementById('archive-view-container-${current_world_key}');
const leafletMapExists = (typeof map_${current_world_key} !== 'undefined');
if (liveBtn && archiveBtn && liveContainer && archiveContainer) {
liveBtn.addEventListener('click', () => {
liveBtn.classList.add('active'); archiveBtn.classList.remove('active');
liveContainer.style.display = 'block'; archiveContainer.style.display = 'none';
if (leafletMapExists) { setTimeout(() => map_${current_world_key}.invalidateSize(), 10); }
});
archiveBtn.addEventListener('click', () => {
archiveBtn.classList.add('active'); liveBtn.classList.remove('active');
archiveContainer.style.display = 'block'; liveContainer.style.display = 'none';
});
}
// === Spieler-Filter Logik ===
const filterBtn = document.getElementById('player-filter-toggle-btn-${current_world_key}');
const filterDropdown = document.getElementById('player-filter-dropdown-${current_world_key}');
if(filterBtn && filterDropdown) {
filterBtn.addEventListener('click', (e) => { e.stopPropagation(); filterDropdown.classList.toggle('show'); });
filterDropdown.addEventListener('change', (e) => {
if (e.target.type === 'checkbox') {
const filterType = e.target.dataset.filter; const filterValue = e.target.dataset.priv;
if(filterType === 'active') { playerFilters_${current_world_key}.activeOnly = e.target.checked; }
else if(filterType === 'privilege') { if(e.target.checked) { playerFilters_${current_world_key}.privileges.add(filterValue); } else { playerFilters_${current_world_key}.privileges.delete(filterValue); } }
applyPlayerFiltersAndRender_${current_world_key}();
}
});
}
window.addEventListener('click', (e) => { if (filterDropdown && !filterBtn.contains(e.target) && !filterDropdown.contains(e.target)) { filterDropdown.classList.remove('show'); }});
// === "Weiterlesen"-Logik ===
document.querySelectorAll('.read-more-link').forEach(link => {
const targetId = link.dataset.target;
const targetElement = document.getElementById(targetId);
if (targetElement) {
if (targetElement.scrollHeight <= targetElement.clientHeight) {
link.parentElement.style.display = 'none';
} else {
link.addEventListener('click', function(e) {
e.preventDefault();
targetElement.classList.add('expanded');
link.parentElement.style.display = 'none';
});
}
}
});
// === Initiale Daten-Ladeaufrufe ===
fetchWorldStatus_${current_world_key}();
fetchDataForElement('player-info-${current_world_key}', '${web_players_txt_rel_path}', false, '', '', true);
fetchDataForElement('weather-info-${current_world_key}', '${web_weather_txt_rel_path}', true, '<p><strong>Wetter:</strong> ', '</p>');
fetchDataForElement('map-last-update-text-${current_world_key}', '${web_last_update_rel_path}', true, '', '');
});
// === Periodische Updates ===
setInterval(fetchWorldStatus_${current_world_key}, 60000);
setInterval(() => fetchDataForElement('map-last-update-text-${current_world_key}', '${web_last_update_rel_path}', true, '', ''), 60000);
setInterval(() => fetchDataForElement('player-info-${current_world_key}', '${web_players_txt_rel_path}', false, '', '', true), 70000);
setInterval(() => fetchDataForElement('weather-info-${current_world_key}', '${web_weather_txt_rel_path}', true, '<p><strong>Wetter:</strong> ', '</p>'), 300000);
</script>
<div id="description-text-wrapper">
<h3 id='beschreibung'>Beschreibung</h3>
<div id="description-text" class="collapsible-text">
${WORLD_LONG_DESCRIPTION_PAGE}
</div>
<div class="read-more-container">
<a href="#" class="read-more-link" data-target="description-text">weiterlesen</a>
</div>
</div>
<div id="gamerules-section">
<h3 id='spielregeln'>Spielregeln</h3>
<div id="gamerules-text-wrapper">
<div id="gamerules-text" class="collapsible-text">
${WORLD_GAME_RULES_PAGE}
</div>
<div class="read-more-container">
<a href="#" class="read-more-link" data-target="gamerules-text">weiterlesen</a>
</div>
</div>
</div>
<h3 id='weltradar' class="section-header-flex">
<span>Weltradar</span>
<div class="map-toggle-controls">
<button id="toggle-live-btn-${current_world_key}" class="map-toggle-button active">Live</button>
<button id="toggle-archive-btn-${current_world_key}" class="map-toggle-button">Archiv</button>
</div>
</h3>
<div id="live-map-container-${current_world_key}">${MAP_HTML}</div>
<div id="archive-view-container-${current_world_key}" style="display: none;">${ARCHIVE_HTML}</div>
<h3 id='mods'>Verwendete Mods</h3>
<div class='scrollable-mod-list'>${MODS_HTML}</div>
<h3 id='spielerliste' class="section-header-flex">
<span>Spielerliste</span>
<div class="filter-container">
<button id="player-filter-toggle-btn-${current_world_key}" class="filter-dropdown-btn">Filter ▾</button>
<div id="player-filter-dropdown-${current_world_key}" class="filter-dropdown">
<label class="filter-option">
<input type="checkbox" data-filter="active">
<span class="status-dot online"></span>
zuletzt aktiv
</label>
<hr class="privilege-separator">
<label class="filter-option">
<input type="checkbox" data-filter="privilege" data-priv="interact"> <span class="icon">🖐️</span> Interagieren
</label>
<label class="filter-option">
<input type="checkbox" data-filter="privilege" data-priv="shout"> <span class="icon">📢</span> Rufen
</label>
<label class="filter-option">
<input type="checkbox" data-filter="privilege" data-priv="fast"> <span class="icon">🏃</span> Schnell
</label>
<label class="filter-option">
<input type="checkbox" data-filter="privilege" data-priv="fly"> <span class="icon">🕊️</span> Fliegen
</label>
<label class="filter-option">
<input type="checkbox" data-filter="privilege" data-priv="give"> <span class="icon">🎁</span> Geben
</label>
<label class="filter-option">
<input type="checkbox" data-filter="privilege" data-priv="teleport"> <span class="icon">✨</span> Teleportieren
</label>
<label class="filter-option">
<input type="checkbox" data-filter="privilege" data-priv="areas"> <span class="icon">🗺️</span> Bereiche
</label>
<label class="filter-option">
<input type="checkbox" data-filter="privilege" data-priv="noclip"> <span class="icon">👻</span> Noclip
</label>
<label class="filter-option">
<input type="checkbox" data-filter="privilege" data-priv="settime"> <span class="icon">🕒</span> Zeit
</label>
<label class="filter-option">
<input type="checkbox" data-filter="privilege" data-priv="weather"> <span class="icon">🌦️</span> Wetter
</label>
<label class="filter-option">
<input type="checkbox" data-filter="privilege" data-priv="server"> <span class="icon">🛠️</span> Server
</label>
</div>
</div>
</h3>
<div id='player-info-${current_world_key}' class='player-list-container'>
<p><em>Spielerdaten werden geladen...</em></p>
</div>

15
site_generator/templates/worlds_overview_entry.template Executable file
View file

@ -0,0 +1,15 @@
<a href='${detail_page_filename}' class='world-preview'>
<div class='world-preview-header'>
<h3>${world_display_name_ov}</h3>
<span class='online-status-badge ${online_status_class}'>${online_status_text}</span>
</div>
<div class='world-preview-content'>
${preview_img_html}
<div class='world-preview-text'>
<p>${world_short_desc_ov}</p>
</div>
</div>
<div class='world-preview-footer'>
Welt-Admin: ${admin_name_ov}
</div>
</a>