362 lines
12 KiB
HTML
362 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Riko.moe</title>
|
|
<link rel="shortcut icon" href="favicon.ico">
|
|
|
|
<!-- Open Graph Tags -->
|
|
<meta property="og:title" content="Riko.moe">
|
|
<meta property="og:description" content="Zufällige Bilder von Riko Suminoe">
|
|
<meta property="og:image" content="https://riko.moe/images/riko.jpg">
|
|
<meta property="og:url" content="https://riko.moe">
|
|
<meta property="og:type" content="website">
|
|
|
|
<!-- Analytics Script -->
|
|
<script defer src="https://stats.ponywave.de/script.js" data-website-id="8a75dd9e-79e9-419f-971a-fd6d819ba537"></script>
|
|
|
|
<style>
|
|
/* Basis-Styling aus style.css */
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
overflow-x: hidden; /* Verhindert horizontales Scrollen */
|
|
}
|
|
|
|
body {
|
|
font: 14px/1.3 verdana, arial, helvetica, sans-serif;
|
|
background-color: #f5f5f5;
|
|
color: #333;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
h1 { font-size: 1.5em; margin-top: 20px; }
|
|
h2 { font-size: 1.2em; }
|
|
a:link { color: #33c; text-decoration: none; }
|
|
a:visited { color: #339; }
|
|
a:hover { text-decoration: underline; }
|
|
p { max-width: 60em; }
|
|
a img { border: none; }
|
|
.pic-center { text-align: center; margin: 20px 0; }
|
|
.text-center { text-align: center; }
|
|
|
|
/* Container für den Hauptinhalt */
|
|
.container {
|
|
flex: 1;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Button-Styling */
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 10px 20px;
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
.btn:hover {
|
|
background-color: #45a049;
|
|
}
|
|
|
|
/* Modal-Styling */
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1000;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
}
|
|
.modal-content {
|
|
margin: auto;
|
|
display: block;
|
|
max-width: 90%;
|
|
max-height: 90%;
|
|
}
|
|
.close {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 35px;
|
|
color: #f1f1f1;
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
transition: 0.3s;
|
|
cursor: pointer;
|
|
}
|
|
.close:hover {
|
|
color: #bbb;
|
|
}
|
|
|
|
/* Spoiler/Accordion für Sources */
|
|
.spoiler {
|
|
background-color: #eee;
|
|
color: #444;
|
|
cursor: pointer;
|
|
padding: 18px;
|
|
width: 100%;
|
|
border: none;
|
|
text-align: left;
|
|
outline: none;
|
|
font-size: 15px;
|
|
transition: 0.4s;
|
|
border-radius: 4px;
|
|
margin-bottom: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
.active, .spoiler:hover {
|
|
background-color: #ccc;
|
|
}
|
|
.panel {
|
|
padding: 0 18px;
|
|
background-color: white;
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.2s ease-out;
|
|
border-radius: 0 0 4px 4px;
|
|
margin-bottom: 20px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
}
|
|
.panel ol {
|
|
padding: 20px 40px;
|
|
}
|
|
|
|
/* Footer-Styling */
|
|
footer {
|
|
background-color: #333;
|
|
color: white;
|
|
text-align: center;
|
|
padding: 15px;
|
|
border-top: 5px solid #4CAF50;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
margin-top: auto;
|
|
}
|
|
footer a {
|
|
color: #b8ffbe; /* Hellere Farbe für bessere Lesbarkeit */
|
|
margin: 0 10px;
|
|
text-decoration: none;
|
|
}
|
|
footer a:hover {
|
|
text-decoration: underline;
|
|
color: white;
|
|
}
|
|
|
|
/* Responsive Anpassungen */
|
|
@media screen and (max-width: 768px) {
|
|
.container {
|
|
padding: 10px;
|
|
}
|
|
.modal-content {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Bild-Thumbnail */
|
|
.thumbnail {
|
|
cursor: pointer;
|
|
height: 400px; /* Fixe Höhe für das Bild */
|
|
width: auto;
|
|
object-fit: contain; /* Behält das Seitenverhältnis bei */
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
transition: transform 0.3s;
|
|
}
|
|
.thumbnail:hover {
|
|
transform: scale(1.02);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="text-center">
|
|
<h1>Riko.moe</h1>
|
|
<p style="font-size: x-large;">Klicke auf das Bild, um es zu vergrößern</p>
|
|
</div>
|
|
|
|
<!-- Bild-Container -->
|
|
<div class="pic-center">
|
|
<img id="randomImage" class="thumbnail" alt="Cute Riko <3" onclick="openModal()">
|
|
</div>
|
|
|
|
<div class="text-center" style="margin: 20px 0;">
|
|
<button class="btn" onclick="loadRandomImage()">Neues zufälliges Bild laden</button>
|
|
</div>
|
|
|
|
<!-- Sources Spoiler -->
|
|
<button class="spoiler">Quellen anzeigen</button>
|
|
<div class="panel">
|
|
<ol id="sourcesList">
|
|
<!-- Quellen werden dynamisch aus der JSON-Datei geladen -->
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal für Bildvergrößerung -->
|
|
<div id="imageModal" class="modal">
|
|
<span class="close" onclick="closeModal()">×</span>
|
|
<img class="modal-content" id="modalImage">
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div>
|
|
<a href="#" onclick="toggleSources(); return false;">Quellen</a> |
|
|
<a href="riko.zip">Alle Bilder herunterladen</a> |
|
|
<a href="https://yagyuu.moe" target="_blank">Yagyuu.moe</a> |
|
|
<a href="mailto:kontakt@yagyuu.de?subject=[Riko.moe]">Kontakt</a>
|
|
</div>
|
|
<div style="margin-top: 10px; font-size: 0.8em;">
|
|
© <span id="currentYear"></span> Riko.moe - Mit ♥ erstellt
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Pfad zum Bilderordner
|
|
const imagePath = "images/";
|
|
let images = []; // Liste der Bilddateien
|
|
|
|
// Funktion zum Laden der Bilderliste aus der JSON-Datei
|
|
function loadImageList() {
|
|
fetch('images.json')
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Netzwerkantwort war nicht ok');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
// Extrahiere die Dateinamen aus den JSON-Einträgen
|
|
images = data.map(entry => entry.filename);
|
|
|
|
// Lade ein zufälliges Bild, nachdem die Liste geladen wurde
|
|
loadRandomImage();
|
|
|
|
// Lade die Quellen
|
|
loadSources(data);
|
|
})
|
|
.catch(error => {
|
|
console.error('Problem beim Laden der Bilderliste:', error);
|
|
// Fallback zu einem Standardbild, falls die Liste nicht geladen werden kann
|
|
const imgElement = document.getElementById("randomImage");
|
|
imgElement.src = imagePath + "riko.jpg";
|
|
imgElement.style.display = "inline-block";
|
|
});
|
|
}
|
|
|
|
// Funktion zum Laden der Quellen
|
|
function loadSources(data) {
|
|
const sourcesList = document.getElementById("sourcesList");
|
|
sourcesList.innerHTML = ''; // Leere die Liste
|
|
|
|
// Sortiere die Einträge nach Dateinamen
|
|
data.sort((a, b) => a.filename.localeCompare(b.filename));
|
|
|
|
// Füge jeden Eintrag zur Liste hinzu
|
|
data.forEach(entry => {
|
|
const listItem = document.createElement('li');
|
|
if (entry.url) {
|
|
const link = document.createElement('a');
|
|
link.href = entry.url;
|
|
link.target = "_blank";
|
|
link.textContent = entry.filename;
|
|
listItem.appendChild(link);
|
|
} else {
|
|
// Wenn keine URL vorhanden ist, zeige nur den Dateinamen
|
|
listItem.textContent = entry.filename;
|
|
}
|
|
sourcesList.appendChild(listItem);
|
|
});
|
|
}
|
|
|
|
// Funktion zum Laden eines zufälligen Bildes
|
|
function loadRandomImage() {
|
|
if (images.length === 0) {
|
|
console.error('Keine Bilder in der Liste');
|
|
return;
|
|
}
|
|
|
|
const randomIndex = Math.floor(Math.random() * images.length);
|
|
const randomImage = images[randomIndex];
|
|
const imgElement = document.getElementById("randomImage");
|
|
imgElement.src = imagePath + randomImage;
|
|
|
|
// Stellen Sie sicher, dass das Bild geladen ist, bevor Sie es anzeigen
|
|
imgElement.onload = function() {
|
|
imgElement.style.display = "inline-block";
|
|
};
|
|
}
|
|
|
|
// Modal-Funktionen
|
|
function openModal() {
|
|
const modal = document.getElementById("imageModal");
|
|
const img = document.getElementById("randomImage");
|
|
const modalImg = document.getElementById("modalImage");
|
|
|
|
modal.style.display = "block";
|
|
modalImg.src = img.src;
|
|
}
|
|
|
|
function closeModal() {
|
|
const modal = document.getElementById("imageModal");
|
|
modal.style.display = "none";
|
|
}
|
|
|
|
// Spoiler/Accordion-Funktion
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const acc = document.getElementsByClassName("spoiler");
|
|
|
|
for (let i = 0; i < acc.length; i++) {
|
|
acc[i].addEventListener("click", function() {
|
|
this.classList.toggle("active");
|
|
const panel = this.nextElementSibling;
|
|
|
|
if (panel.style.maxHeight) {
|
|
panel.style.maxHeight = null;
|
|
} else {
|
|
panel.style.maxHeight = panel.scrollHeight + "px";
|
|
}
|
|
});
|
|
}
|
|
|
|
// Aktuelles Jahr für das Copyright setzen
|
|
document.getElementById("currentYear").textContent = new Date().getFullYear();
|
|
|
|
// Lade die Bilderliste beim Seitenstart
|
|
loadImageList();
|
|
});
|
|
|
|
// Funktion zum Umschalten der Sources über den Footer-Link
|
|
function toggleSources() {
|
|
const spoiler = document.querySelector(".spoiler");
|
|
spoiler.click();
|
|
|
|
// Scrolle zu den Sources
|
|
spoiler.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
|
|
// Schließe das Modal, wenn außerhalb geklickt wird
|
|
window.onclick = function(event) {
|
|
const modal = document.getElementById("imageModal");
|
|
if (event.target == modal) {
|
|
closeModal();
|
|
}
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |