Neues Design

This commit is contained in:
2025-03-15 21:38:20 +01:00
parent 1336c1d9e1
commit 6ec39ebd2c
5 changed files with 467 additions and 112 deletions

114
images.json Normal file
View File

@@ -0,0 +1,114 @@
[
{
"filename": "3cd96957d13bc14e9d6c47a972d7ca2b.jpg",
"url": "https://chan.sankakucomplex.com/post/show/5770720"
},
{
"filename": "4fb55b8507743b41538f97e92d9def8f.gif",
"url": "https://chan.sankakucomplex.com/post/show/1568530"
},
{
"filename": "6f8d095aca339fe60b90598a05655aca.jpg",
"url": "https://chan.sankakucomplex.com/post/show/5772819"
},
{
"filename": "85b856e658f55d5d204d66064c4d49051250230828_large.jpg",
"url": "http://www.crunchyroll.com/library/Riko_Suminoe/"
},
{
"filename": "87dcb49c41631974338c5c05ea16b5e4.jpg",
"url": "https://chan.sankakucomplex.com/post/show/5772776"
},
{
"filename": "515d1548-791e-4bd1-b624-c9f570b06a1c_details_big.jpeg",
"url": "https://addons.opera.com/de/themes/details/riko-suminoe/"
},
{
"filename": "7426e9b2061df290341acae3b8d35966.jpg",
"url": "https://chan.sankakucomplex.com/post/show/6164540"
},
{
"filename": "20004a72668b5cfb9929980139d1cfbe.jpg",
"url": "https://chan.sankakucomplex.com/post/show/5772825"
},
{
"filename": "26705.jpg",
"url": "http://www.nyusu.fm/es/ranking/2443/ako-vs-riko"
},
{
"filename": "84282.jpg",
"url": "https://hoshifluff.wordpress.com/2011/07/18/monday-suminoe-riko/"
},
{
"filename": "101775.jpg",
"url": "https://hoshifluff.wordpress.com/2011/07/18/monday-suminoe-riko/"
},
{
"filename": "103228.jpg",
"url": "https://hoshifluff.wordpress.com/2011/07/18/monday-suminoe-riko/"
},
{
"filename": "573485-riko_suminoe__profile_portrait__large.png",
"url": "http://www.animevice.com/riko-suminoe/18-18154/forums/"
},
{
"filename": "3369691647_41165d2ce5.jpg",
"url": "http://www.forumla.de/f-anime-manga-221/t-bewerte-den-anime-charakter-ueber-dir-206388/page16#post4316715"
},
{
"filename": "4180795298_5b588bd66d.jpg",
"url": "http://forums.bakabt.me/index.php?topic=29841.msg4609326#msg4609326"
},
{
"filename": "6343259033_35bdb68f68.jpg",
"url": "http://myanimelist.net/forum/?topicid=480369&show=180#msg20323187"
},
{
"filename": "adfe30ec-16fe-4c05-b7ef-2ac89dac64a2_details_big.jpeg",
"url": "https://addons.opera.com/de/themes/details/riko-suminoe/"
},
{
"filename": "cb4f20a6ae59ac058fd07d647b79ecc7d2308c48.png",
"url": "https://hoshifluff.wordpress.com/2011/07/18/monday-suminoe-riko/"
},
{
"filename": "dc2c23a0d2f26.jpg",
"url": "http://www.fairy-tail-pbf.pun.pl/viewtopic.php?pid=9077#p9077"
},
{
"filename": "japan_school_uniforms_japanese_1920x1080_knowledgehi.com.jpg",
"url": "http://www.knowledgehi.com/Countries/Japan/japan_school_uniforms_japanese_comedy_kiss_x_sis_anime_harem_anime_girls_suminoe_ako_suminoe_riko_bo_42785/download_1920x1080"
},
{
"filename": "kiss_x_sis___riko_suminoe_tag_by_braedesigns-d6m5suo.png",
"url": "http://braedesigns.deviantart.com/art/Kiss-x-Sis-Riko-Suminoe-Tag-400019280"
},
{
"filename": "kissxsis_01.jpg",
"url": "http://www.emptyblue.it/image.aspx?alt=KissXSis&url=http://www.emptyblue.it/data/wallpaper/KissXSis/kissxsis_01.jpg&dummy=1"
},
{
"filename": "riko.jpg",
"url": "https://thebutterflyboy.wordpress.com/2011/08/31/kiss-x-sis/"
},
{
"filename": "rikob.jpg",
"url": "http://forums.bakabt.me/index.php?topic=29841.msg4609382#msg4609382"
},
{
"filename": "Suminoe.Riko.full.193801.jpg",
"url": "http://www.zerochan.net/193801"
},
{
"filename": "Suminoe.Riko.full.239425.jpg",
"url": "http://www.zerochan.net/239425"
},
{
"filename": "Suminoe.Riko.full.713535.jpg",
"url": "http://www.zerochan.net/713535"
},
{
"filename": "tumblr_n47jqpdOCi1smmytpo1_400.gif",
"url": "http://wifflegif.com/gifs/515729-riko-suminoe-kiss-x-sis-gif"
}
]

353
index.html Normal file
View File

@@ -0,0 +1,353 @@
<!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 */
body {
font: 14px/1.3 verdana, arial, helvetica, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
color: #333;
min-height: 100vh;
position: relative;
}
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 {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* 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;
}
.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;
}
.panel ol {
padding: 20px 40px;
}
/* Footer-Styling */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 15px;
border-top: 5px solid #4CAF50;
position: absolute;
bottom: 0;
width: 100%;
box-sizing: border-box;
}
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%;
}
body {
padding-bottom: 120px; /* Angepasster Platz für den Footer auf mobilen Geräten */
}
}
/* 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()">&times;</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;">
&copy; <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>

View File

@@ -1,55 +0,0 @@
<?php
// Indicate the location of your images
$root = '';
// use if specifying path from root
//$root = $_SERVER['DOCUMENT_ROOT'];
$path = 'images/';
function getImagesFromDir($path) {
$images = array();
if ( $img_dir = @opendir($path) ) {
while ( false !== ($img_file = readdir($img_dir)) ) {
// checks for gif, jpg, png and jpeg
if ( preg_match("/(\.gif|\.jpg|\.png\.jpeg)$/", $img_file) ) {
$images[] = $img_file;
}
}
closedir($img_dir);
}
return $images;
}
function getRandomFromArray($ar) {
mt_srand( (double)microtime() * 1000000 ); // php 4.2+ not needed
$num = array_rand($ar);
return $ar[$num];
}
// Obtain list of images from directory
$imgList = getImagesFromDir($root . $path);
$img = getRandomFromArray($imgList);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Riko.moe</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<div class="text-center"><p style="font-size:xx-large;">Press F5 for another pic!</p></div>
<!-- image displays here -->
<div class="pic-center">
<img src="<?php echo $path . $img ?>" height="700" alt="Cute Riko <3" />
</div>
</body>
<!-- Footer begins -->
<a href="sources.php">Sources</a> | <a href="riko.zip">Download all pictures</a> | <a href="https://yagyuu.moe" target="_blank">Yagyuu.moe</a> | <a href="mailto:miku2000@outlook.de?subject=[Riko.moe]">Mail me</a>
<!-- Footer ends -->
</html>

View File

@@ -1,45 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Riko.moe | Image Sources</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<ol>
<li><a href="https://chan.sankakucomplex.com/post/show/5770720" target="_blank">3cd96957d13bc14e9d6c47a972d7ca2b.jpg</a></li>
<li><a href="https://chan.sankakucomplex.com/post/show/1568530" target="_blank">4fb55b8507743b41538f97e92d9def8f.gif</a></li>
<li><a href="https://chan.sankakucomplex.com/post/show/5772819" target="_blank">6f8d095aca339fe60b90598a05655aca.jpg</a></li>
<li><a href="http://www.crunchyroll.com/library/Riko_Suminoe/" target="_blank">85b856e658f55d5d204d66064c4d49051250230828_large.jpg</a></li>
<li><a href="https://chan.sankakucomplex.com/post/show/5772776" target="_blank">87dcb49c41631974338c5c05ea16b5e4.jpg</a></li>
<li><a href="https://addons.opera.com/de/themes/details/riko-suminoe/" target="_blank">515d1548-791e-4bd1-b624-c9f570b06a1c_details_big.jpeg</a></li>
<li><a href="https://chan.sankakucomplex.com/post/show/6164540" target="_blank">7426e9b2061df290341acae3b8d35966.jpg</a></li>
<li><a href="https://chan.sankakucomplex.com/post/show/5772825" target="_blank">20004a72668b5cfb9929980139d1cfbe.jpg</a></li>
<li><a href="http://www.nyusu.fm/es/ranking/2443/ako-vs-riko" target="_blank">26705.jpg</a></li>
<li><a href="https://hoshifluff.wordpress.com/2011/07/18/monday-suminoe-riko/" target="_blank">84282.jpg</a></li>
<li><a href="https://hoshifluff.wordpress.com/2011/07/18/monday-suminoe-riko/" target="_blank">101775.jpg</a></li>
<li><a href="https://hoshifluff.wordpress.com/2011/07/18/monday-suminoe-riko/" target="_blank">103228.jpg</a></li>
<li><a href="http://www.animevice.com/riko-suminoe/18-18154/forums/" target="_blank">573485-riko_suminoe__profile_portrait__large.png</a></li>
<li><a href="http://www.forumla.de/f-anime-manga-221/t-bewerte-den-anime-charakter-ueber-dir-206388/page16#post4316715" target="_blank">3369691647_41165d2ce5.jpg</a></li>
<li><a href="http://forums.bakabt.me/index.php?topic=29841.msg4609326#msg4609326" target="_blank">4180795298_5b588bd66d.jpg</a></li>
<li><a href="http://myanimelist.net/forum/?topicid=480369&show=180#msg20323187" target="_blank">6343259033_35bdb68f68.jpg</a></li>
<li><a href="https://addons.opera.com/de/themes/details/riko-suminoe/" target="_blank">adfe30ec-16fe-4c05-b7ef-2ac89dac64a2_details_big.jpeg</a></li>
<li><a href="https://hoshifluff.wordpress.com/2011/07/18/monday-suminoe-riko/" target="_blank">cb4f20a6ae59ac058fd07d647b79ecc7d2308c48.png</a></li>
<li><a href="http://www.fairy-tail-pbf.pun.pl/viewtopic.php?pid=9077#p9077" target="_blank">dc2c23a0d2f26.jpg</a></li>
<li><a href="http://www.knowledgehi.com/Countries/Japan/japan_school_uniforms_japanese_comedy_kiss_x_sis_anime_harem_anime_girls_suminoe_ako_suminoe_riko_bo_42785/download_1920x1080" target="_blank">japan_school_uniforms_japanese_1920x1080_knowledgehi.com.jpg</a></li>
<li><a href="http://braedesigns.deviantart.com/art/Kiss-x-Sis-Riko-Suminoe-Tag-400019280" target="_blank">kiss_x_sis___riko_suminoe_tag_by_braedesigns-d6m5suo.png</a></li>
<li><a href="http://www.emptyblue.it/image.aspx?alt=KissXSis&url=http://www.emptyblue.it/data/wallpaper/KissXSis/kissxsis_01.jpg&dummy=1" target="_blank">kissxsis_01.jpg</a></li>
<li><a href="https://thebutterflyboy.wordpress.com/2011/08/31/kiss-x-sis/" target="_blank">riko.jpg</a></li>
<li><a href="http://forums.bakabt.me/index.php?topic=29841.msg4609382#msg4609382" target="_blank">rikob.jpg</a></li>
<li><a href="http://www.zerochan.net/193801" target="_blank">Suminoe.Riko.full.193801.jpg</a></li>
<li><a href="http://www.zerochan.net/239425" target="_blank">Suminoe.Riko.full.239425.jpg</a></li>
<li><a href="http://www.zerochan.net/713535" target="_blank">Suminoe.Riko.full.713535.jpg</a></li>
<li><a href="http://wifflegif.com/gifs/515729-riko-suminoe-kiss-x-sis-gif" target="_blank">tumblr_n47jqpdOCi1smmytpo1_400.gif</a></li>
</ol>
<p><a href="https://riko.moe/">Back</a>...</p>
</body>
</html>

View File

@@ -1,12 +0,0 @@
body { font: 14px/1.3 verdana, arial, helvetica, sans-serif; }
h1 { font-size:1.3em; }
h2 { font-size:1.2em; }
a:link { color:#33c; }
a:visited { color:#339; }
p { max-width: 60em; }
/* so linked image won't have border */
a img { border:none; }
.pic-center { text-align: center; }
.text-center {text-align: center;}