2023-05-14 09:31:04 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
2023-06-02 14:40:42 +00:00
|
|
|
<head>
|
|
|
|
|
<title>PixivFE</title>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
|
<link href="/css/style.css" rel="stylesheet" />
|
|
|
|
|
<link href="/css/template.css" rel="stylesheet" />
|
|
|
|
|
<script>
|
|
|
|
|
// This is for image lazy loading
|
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
|
|
|
var lazyloadImages;
|
2023-05-14 09:31:04 +00:00
|
|
|
|
2023-06-02 14:40:42 +00:00
|
|
|
if ("IntersectionObserver" in window) {
|
|
|
|
|
lazyloadImages = document.querySelectorAll(".lazy");
|
|
|
|
|
var imageObserver = new IntersectionObserver(function (
|
|
|
|
|
entries,
|
|
|
|
|
observer
|
|
|
|
|
) {
|
|
|
|
|
entries.forEach(function (entry) {
|
|
|
|
|
if (entry.isIntersecting) {
|
|
|
|
|
var image = entry.target;
|
|
|
|
|
image.src = image.dataset.src;
|
|
|
|
|
image.classList.remove("lazy");
|
|
|
|
|
imageObserver.unobserve(image);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
2023-05-17 12:23:52 +00:00
|
|
|
|
2023-06-02 14:40:42 +00:00
|
|
|
lazyloadImages.forEach(function (image) {
|
|
|
|
|
imageObserver.observe(image);
|
2023-05-17 12:23:52 +00:00
|
|
|
});
|
2023-06-02 14:40:42 +00:00
|
|
|
} else {
|
|
|
|
|
var lazyloadThrottleTimeout;
|
|
|
|
|
lazyloadImages = document.querySelectorAll(".lazy");
|
2023-05-17 12:23:52 +00:00
|
|
|
|
2023-06-02 14:40:42 +00:00
|
|
|
function lazyload() {
|
|
|
|
|
if (lazyloadThrottleTimeout) {
|
|
|
|
|
clearTimeout(lazyloadThrottleTimeout);
|
|
|
|
|
}
|
2023-05-17 12:23:52 +00:00
|
|
|
|
2023-06-02 14:40:42 +00:00
|
|
|
lazyloadThrottleTimeout = setTimeout(function () {
|
|
|
|
|
var scrollTop = window.pageYOffset;
|
|
|
|
|
lazyloadImages.forEach(function (img) {
|
|
|
|
|
if (img.offsetTop < window.innerHeight + scrollTop) {
|
|
|
|
|
img.src = img.dataset.src;
|
|
|
|
|
img.classList.remove("lazy");
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
if (lazyloadImages.length == 0) {
|
|
|
|
|
document.removeEventListener("scroll", lazyload);
|
|
|
|
|
window.removeEventListener("resize", lazyload);
|
|
|
|
|
window.removeEventListener("orientationChange", lazyload);
|
|
|
|
|
}
|
|
|
|
|
}, 20);
|
2023-05-17 12:23:52 +00:00
|
|
|
}
|
|
|
|
|
|
2023-06-02 14:40:42 +00:00
|
|
|
document.addEventListener("scroll", lazyload);
|
|
|
|
|
window.addEventListener("resize", lazyload);
|
|
|
|
|
window.addEventListener("orientationChange", lazyload);
|
2023-05-17 12:23:52 +00:00
|
|
|
}
|
2023-06-02 14:40:42 +00:00
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
2023-05-17 12:23:52 +00:00
|
|
|
|
2023-06-02 14:40:42 +00:00
|
|
|
<body>
|
|
|
|
|
<nav class="navbar">
|
|
|
|
|
<ul class="navbar-list">
|
|
|
|
|
<li class="navbar-item">
|
2023-06-05 09:20:09 +00:00
|
|
|
<input type="checkbox" class="sidebar-toggler" id="sidebar-toggler" />
|
|
|
|
|
<label for="sidebar-toggler" class="sidebar-label">
|
|
|
|
|
<img
|
|
|
|
|
src="/assets/menu-thin.png"
|
|
|
|
|
alt="Menu"
|
|
|
|
|
width="30"
|
|
|
|
|
height="30"
|
|
|
|
|
/>
|
|
|
|
|
</label>
|
|
|
|
|
|
|
|
|
|
<div class="sidebar">
|
|
|
|
|
<ul class="sidebar-list">
|
2023-06-05 11:22:31 +00:00
|
|
|
<a class="sidebar-item" href="/discovery">
|
|
|
|
|
<img src="/assets/compass.png" alt="icon" />Discovery</a
|
|
|
|
|
>
|
2023-06-05 09:20:09 +00:00
|
|
|
<a class="sidebar-item" href="/ranking">
|
|
|
|
|
<img src="/assets/crown.png" alt="icon" />Ranking</a
|
|
|
|
|
>
|
|
|
|
|
<a class="sidebar-item" href="/newest">
|
|
|
|
|
<img src="/assets/sparkling.png" alt="icon" />Newest</a
|
|
|
|
|
>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
2023-06-02 14:40:42 +00:00
|
|
|
<a href="/" class="navbar-brand">
|
|
|
|
|
<img src="/favicon.ico" alt="PixivFE's logo" />
|
|
|
|
|
<b>PixivFE</b>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="navbar-item search-bar">
|
|
|
|
|
<form
|
|
|
|
|
class="search-form"
|
|
|
|
|
action="/tags"
|
|
|
|
|
method="post"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
name="name"
|
|
|
|
|
class="search-form-text"
|
|
|
|
|
placeholder="⌕ Search artworks..."
|
|
|
|
|
/>
|
|
|
|
|
<input type="submit" hidden />
|
|
|
|
|
</form>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="navbar-item">
|
|
|
|
|
<a href="#" class="navbar-button">
|
|
|
|
|
<img src="/assets/search.png" alt="Search" width="30" height="30" />
|
|
|
|
|
</a>
|
|
|
|
|
<a href="#" class="navbar-button">
|
|
|
|
|
<img
|
|
|
|
|
src="/assets/settings.png"
|
|
|
|
|
alt="Settings"
|
|
|
|
|
width="30"
|
|
|
|
|
height="30"
|
|
|
|
|
/>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</nav>
|
|
|
|
|
</body>
|
2023-05-17 12:09:04 +00:00
|
|
|
</html>
|
