136 lines
3.6 KiB
HTML
136 lines
3.6 KiB
HTML
<!DOCTYPE html><html><head>
|
||
<title>random miku pics</title>
|
||
<meta name="og:title" content="random miku pics" />
|
||
<meta name="og:description" content="Infinite scroll of popular Hatsune Miku illustrations" />
|
||
<meta name="theme-color" content="#00FFFF" />
|
||
<meta name="og:image" content="https://api.miku.pics/img/random?size=thumb_mini&drawsource" />
|
||
<link rel="canonical" href="https://miku.pics/" />
|
||
<link rel="icon" type="image/x-icon" href="https://api.miku.pics/favicon.ico" />
|
||
<style>
|
||
body {
|
||
background-color: teal;
|
||
text-align: center;
|
||
font-family: sans-serif;
|
||
}
|
||
#bg {
|
||
position: fixed;
|
||
top: 8px;
|
||
left: 8px;
|
||
z-index: -1;
|
||
color: cyan;
|
||
user-select: none;
|
||
}
|
||
#ibtn {
|
||
position: fixed;
|
||
right: 10px;
|
||
top: 10px;
|
||
}
|
||
#info_modal_bg {
|
||
position: fixed;
|
||
top: 0px;
|
||
left: 0px;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #000000a6;
|
||
z-index: 1;
|
||
}
|
||
#info_modal {
|
||
position: fixed;
|
||
background-color: cyan;
|
||
width: 272px;
|
||
padding: 10px;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
border-radius: 6px;
|
||
text-align: left;
|
||
}
|
||
img {
|
||
margin: 10px;
|
||
vertical-align: middle;
|
||
box-shadow: 0px 0px 20px 0px black;
|
||
user-select: none;
|
||
}
|
||
.c {
|
||
display: inline-block;
|
||
position: relative;
|
||
}
|
||
.t {
|
||
position: absolute;
|
||
bottom: 9px;
|
||
right: 11px;
|
||
font-size: 10px;
|
||
filter: invert(1);
|
||
mix-blend-mode: difference;
|
||
user-select: text;
|
||
white-space: pre;
|
||
}
|
||
</style>
|
||
</head><body>
|
||
|
||
<div id="bg">javascript required</div>
|
||
<script>document.getElementById('bg').innerText = 'ミク'.repeat(39000);</script>
|
||
|
||
<button id="ibtn">ℹ</button>
|
||
|
||
<div id="info_modal_bg" style="display: none">
|
||
<div id="info_modal">
|
||
<p>
|
||
<a href="https://api.miku.pics/log" target="_blank">» Your history</a><br />
|
||
<a href="https://gitea.moe/lamp/random-miku-server" target="_blank">» Server repository</a>
|
||
</p>
|
||
<p>Please direct any questions or complaints to <a href="mailto:webmaster@miku.pics">webmaster@miku.pics</a></p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
|
||
async function loadImages(num) {
|
||
let ids = await fetch(`https://api.miku.pics/randomid?count=${num}`).then(r => r.text());
|
||
ids = ids.split(',');
|
||
for (let id of ids) {
|
||
let img = document.createElement("img");
|
||
img.src = `https://api.miku.pics/img/${id}?size=small`;
|
||
let a = document.createElement("a");
|
||
a.href = `https://www.pixiv.net/en/artworks/${id}`;
|
||
a.target = "_blank";
|
||
a.appendChild(img);
|
||
let c = document.createElement("div");
|
||
c.className = "c";
|
||
c.appendChild(a);
|
||
let t = document.createElement("div");
|
||
t.className = "t";
|
||
t.innerText = ' ' + id;
|
||
c.appendChild(t);
|
||
document.body.appendChild(c);
|
||
}
|
||
}
|
||
loadImages(16).then(function (){
|
||
onscroll = function x() {
|
||
//console.debug(document.body.scrollTop, document.body.clientHeight, document.body.scrollTop + document.body.clientHeight, document.body.scrollHeight); // ???????
|
||
//console.debug(innerHeight, scrollY, innerHeight + scrollY, document.body.offsetHeight, document.body.scrollHeight);
|
||
if ((innerHeight + scrollY) >= document.body.scrollHeight) {
|
||
//console.debug("bottom");
|
||
onscroll = null;
|
||
loadImages(16).then(() => onscroll = x);
|
||
}
|
||
};
|
||
});
|
||
|
||
|
||
let info_modal_bg = document.getElementById("info_modal_bg");
|
||
document.getElementById("ibtn").addEventListener("click", function(event) {
|
||
info_modal_bg.style = "display: block;";
|
||
});
|
||
info_modal_bg.addEventListener("click", function(event) {
|
||
if (this == event.target) info_modal_bg.style = "display: none;";
|
||
});
|
||
|
||
|
||
</script>
|
||
|
||
|
||
|
||
|
||
</body></html>
|