mirror of
https://github.com/journey-ad/Moe-Counter.git
synced 2025-02-12 17:04:29 +01:00
refactor(web): Improve performance
This commit is contained in:
parent
2922452f9d
commit
74cad48f28
195
assets/script.js
195
assets/script.js
@ -3,117 +3,114 @@
|
|||||||
const img = document.getElementById('result');
|
const img = document.getElementById('result');
|
||||||
const code = document.getElementById('code');
|
const code = document.getElementById('code');
|
||||||
|
|
||||||
btn.addEventListener('click', throttle(() => {
|
const elements = {
|
||||||
const $name = document.getElementById('name'),
|
name: document.getElementById('name'),
|
||||||
$theme = document.getElementById('theme'),
|
theme: document.getElementById('theme'),
|
||||||
$padding = document.getElementById('padding'),
|
padding: document.getElementById('padding'),
|
||||||
$offset = document.getElementById('offset'),
|
offset: document.getElementById('offset'),
|
||||||
$scale = document.getElementById('scale'),
|
scale: document.getElementById('scale'),
|
||||||
$pixelated = document.getElementById('pixelated'),
|
pixelated: document.getElementById('pixelated'),
|
||||||
$darkmode = document.getElementById('darkmode')
|
darkmode: document.getElementById('darkmode'),
|
||||||
|
|
||||||
const name = $name.value.trim();
|
|
||||||
if (!name) {
|
|
||||||
alert('Please input counter name.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
party.confetti(btn, { count: party.variation.range(20, 40) });
|
|
||||||
|
|
||||||
const params = {
|
|
||||||
name,
|
|
||||||
theme: $theme.value || 'moebooru',
|
|
||||||
padding: $padding.value || '7',
|
|
||||||
offset: $offset.value || '0',
|
|
||||||
scale: $scale.value || '1',
|
|
||||||
pixelated: $pixelated.checked ? '1' : '0',
|
|
||||||
darkmode: $darkmode.value || 'auto',
|
|
||||||
}
|
|
||||||
|
|
||||||
const query = new URLSearchParams(params).toString();
|
|
||||||
const imgSrc = `${__global_data.site}/@${name}?${query}`;
|
|
||||||
img.src = imgSrc
|
|
||||||
|
|
||||||
img.onload = () => {
|
|
||||||
img.scrollIntoView({ block: 'start', behavior: 'smooth' });
|
|
||||||
|
|
||||||
code.textContent = imgSrc;
|
|
||||||
code.style.visibility = 'visible';
|
|
||||||
}
|
|
||||||
|
|
||||||
img.onerror = () => {
|
|
||||||
fetch(imgSrc)
|
|
||||||
.then(async (res) => {
|
|
||||||
if (!res.ok) {
|
|
||||||
const { message } = await res.json();
|
|
||||||
alert(message);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
};
|
};
|
||||||
}, 500));
|
|
||||||
|
|
||||||
code.addEventListener('click', (e) => {
|
btn.addEventListener('click', throttle(handleButtonClick, 500));
|
||||||
e.preventDefault()
|
code.addEventListener('click', selectCodeText);
|
||||||
e.stopPropagation()
|
|
||||||
|
|
||||||
const target = e.target;
|
|
||||||
if (document.body.createTextRange) {
|
|
||||||
const range = document.body.createTextRange();
|
|
||||||
range.moveToElementText(target);
|
|
||||||
range.select();
|
|
||||||
} else if (window.getSelection) {
|
|
||||||
const selection = window.getSelection();
|
|
||||||
const range = document.createRange();
|
|
||||||
range.selectNodeContents(target);
|
|
||||||
selection.removeAllRanges();
|
|
||||||
selection.addRange(range);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const mainTitle = document.querySelector('#main_title i');
|
const mainTitle = document.querySelector('#main_title i');
|
||||||
const themes = document.querySelector('#themes');
|
const themes = document.querySelector('#themes');
|
||||||
const moreTheme = document.querySelector('#more_theme');
|
const moreTheme = document.querySelector('#more_theme');
|
||||||
|
|
||||||
mainTitle.addEventListener('click', throttle(() => {
|
mainTitle.addEventListener('click', throttle(() => party.sparkles(document.documentElement, { count: party.variation.range(40, 100) }), 1000));
|
||||||
party.sparkles(document.documentElement, { count: party.variation.range(40, 100) });
|
moreTheme.addEventListener('click', scrollToThemes);
|
||||||
}, 1000));
|
|
||||||
|
|
||||||
moreTheme.addEventListener('click', () => {
|
function handleButtonClick() {
|
||||||
|
const { name, theme, padding, offset, scale, pixelated, darkmode } = elements;
|
||||||
|
const nameValue = name.value.trim();
|
||||||
|
|
||||||
|
if (!nameValue) {
|
||||||
|
alert('Please input counter name.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
name: nameValue,
|
||||||
|
theme: theme.value || 'moebooru',
|
||||||
|
padding: padding.value || '7',
|
||||||
|
offset: offset.value || '0',
|
||||||
|
scale: scale.value || '1',
|
||||||
|
pixelated: pixelated.checked ? '1' : '0',
|
||||||
|
darkmode: darkmode.value || 'auto'
|
||||||
|
};
|
||||||
|
|
||||||
|
const query = new URLSearchParams(params).toString();
|
||||||
|
const imgSrc = `${__global_data.site}/@${nameValue}?${query}`;
|
||||||
|
|
||||||
|
img.src = `${imgSrc}&_=${Math.random()}`;
|
||||||
|
btn.setAttribute('disabled', '');
|
||||||
|
|
||||||
|
img.onload = () => {
|
||||||
|
img.scrollIntoView({ block: 'start', behavior: 'smooth' });
|
||||||
|
code.textContent = imgSrc;
|
||||||
|
code.style.visibility = 'visible';
|
||||||
|
party.confetti(btn, { count: party.variation.range(20, 40) });
|
||||||
|
btn.removeAttribute('disabled');
|
||||||
|
};
|
||||||
|
|
||||||
|
img.onerror = async () => {
|
||||||
|
try {
|
||||||
|
const res = await fetch(imgSrc);
|
||||||
|
if (!res.ok) {
|
||||||
|
const { message } = await res.json();
|
||||||
|
alert(message);
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
btn.removeAttribute('disabled');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectCodeText(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
const target = e.target;
|
||||||
|
const range = document.createRange();
|
||||||
|
const selection = window.getSelection();
|
||||||
|
|
||||||
|
range.selectNodeContents(target);
|
||||||
|
selection.removeAllRanges();
|
||||||
|
selection.addRange(range);
|
||||||
|
}
|
||||||
|
|
||||||
|
function scrollToThemes() {
|
||||||
if (!themes.hasAttribute('open')) {
|
if (!themes.hasAttribute('open')) {
|
||||||
party.sparkles(moreTheme.querySelector('h3'), { count: party.variation.range(20, 40) });
|
party.sparkles(moreTheme.querySelector('h3'), { count: party.variation.range(20, 40) });
|
||||||
themes.scrollIntoView({ block: 'start', behavior: 'smooth' });
|
themes.scrollIntoView({ block: 'start', behavior: 'smooth' });
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
|
||||||
function throttle(fn, threshold = 250) {
|
function throttle(fn, threshold = 250) {
|
||||||
let last;
|
let last, deferTimer;
|
||||||
let deferTimer;
|
|
||||||
return function (...args) {
|
return function (...args) {
|
||||||
const context = this;
|
|
||||||
const now = Date.now();
|
const now = Date.now();
|
||||||
if (last && now < last + threshold) {
|
if (last && now < last + threshold) {
|
||||||
clearTimeout(deferTimer);
|
clearTimeout(deferTimer);
|
||||||
deferTimer = setTimeout(() => {
|
deferTimer = setTimeout(() => {
|
||||||
last = now;
|
last = now;
|
||||||
fn.apply(context, args);
|
fn.apply(this, args);
|
||||||
}, threshold);
|
}, threshold);
|
||||||
} else {
|
} else {
|
||||||
last = now;
|
last = now;
|
||||||
fn.apply(context, args);
|
fn.apply(this, args);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
// Lazy Load
|
||||||
(() => {
|
(() => {
|
||||||
function lazyLoad(options = {}) {
|
function lazyLoad(options = {}) {
|
||||||
const {
|
const { selector = 'img[data-src]:not([src])', loading = '', failed = '', rootMargin = '200px', threshold = 0.01 } = options;
|
||||||
selector = 'img[data-src]:not([src])',
|
|
||||||
loading = '',
|
|
||||||
failed = '',
|
|
||||||
rootMargin = '200px',
|
|
||||||
threshold = 0.01
|
|
||||||
} = options;
|
|
||||||
|
|
||||||
const images = document.querySelectorAll(selector);
|
const images = document.querySelectorAll(selector);
|
||||||
|
|
||||||
@ -123,17 +120,9 @@
|
|||||||
const img = entry.target;
|
const img = entry.target;
|
||||||
observer.unobserve(img);
|
observer.unobserve(img);
|
||||||
|
|
||||||
if (failed) {
|
img.onerror = failed ? () => { img.src = failed; img.setAttribute('data-failed', ''); } : null;
|
||||||
const handleError = () => {
|
|
||||||
img.onerror = null;
|
|
||||||
img.src = failed;
|
|
||||||
img.setAttribute('data-failed', '');
|
|
||||||
};
|
|
||||||
img.onerror = handleError;
|
|
||||||
}
|
|
||||||
|
|
||||||
img.removeAttribute('data-loading');
|
|
||||||
img.src = img.getAttribute('data-src');
|
img.src = img.getAttribute('data-src');
|
||||||
|
img.removeAttribute('data-loading');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}, { rootMargin, threshold });
|
}, { rootMargin, threshold });
|
||||||
@ -154,33 +143,28 @@
|
|||||||
rootMargin: '200px',
|
rootMargin: '200px',
|
||||||
threshold: 0.01
|
threshold: 0.01
|
||||||
};
|
};
|
||||||
if (document.readyState === 'loading') {
|
|
||||||
document.addEventListener("DOMContentLoaded", () => lazyLoad(lazyLoadOptions));
|
document.readyState === 'loading'
|
||||||
} else {
|
? document.addEventListener("DOMContentLoaded", () => lazyLoad(lazyLoadOptions))
|
||||||
lazyLoad(lazyLoadOptions);
|
: lazyLoad(lazyLoadOptions);
|
||||||
}
|
|
||||||
})();
|
})();
|
||||||
|
|
||||||
// back to top
|
// Back to top
|
||||||
(() => {
|
(() => {
|
||||||
let isShow = false;
|
let isShow = false, lock = false;
|
||||||
let lock = false;
|
|
||||||
const btn = document.querySelector('.back-to-top');
|
const btn = document.querySelector('.back-to-top');
|
||||||
|
|
||||||
const handleScroll = () => {
|
const handleScroll = () => {
|
||||||
if (lock) return;
|
if (lock) return;
|
||||||
|
|
||||||
if (document.body.scrollTop >= 1000) {
|
if (document.body.scrollTop >= 1000) {
|
||||||
if (!isShow) {
|
if (!isShow) {
|
||||||
btn.classList.add('load');
|
btn.classList.add('load');
|
||||||
isShow = true;
|
isShow = true;
|
||||||
}
|
}
|
||||||
} else {
|
} else if (isShow) {
|
||||||
if (isShow) {
|
|
||||||
btn.classList.remove('load');
|
btn.classList.remove('load');
|
||||||
isShow = false;
|
isShow = false;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleClick = () => {
|
const handleClick = () => {
|
||||||
@ -206,3 +190,8 @@
|
|||||||
window.addEventListener('scroll', handleScroll);
|
window.addEventListener('scroll', handleScroll);
|
||||||
btn.addEventListener('click', handleClick);
|
btn.addEventListener('click', handleClick);
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
// Prevent gesture
|
||||||
|
(() => {
|
||||||
|
document.addEventListener('gesturestart', e => e.preventDefault());
|
||||||
|
})();
|
||||||
|
113
assets/style.css
113
assets/style.css
@ -1,113 +0,0 @@
|
|||||||
html {
|
|
||||||
scroll-padding: 50px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
img[data-loading],
|
|
||||||
img[data-failed] {
|
|
||||||
width: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 800px) {
|
|
||||||
body {
|
|
||||||
max-width: min(90%, 800px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
details>summary {
|
|
||||||
list-style: none
|
|
||||||
}
|
|
||||||
|
|
||||||
details>summary::-webkit-details-marker,details>summary::marker {
|
|
||||||
display: none
|
|
||||||
}
|
|
||||||
|
|
||||||
summary:before {
|
|
||||||
border-bottom: 6px solid transparent;
|
|
||||||
border-left: 10px solid var(--b-txt);
|
|
||||||
border-top: 6px solid transparent;
|
|
||||||
content: "";
|
|
||||||
display: inline-block;
|
|
||||||
height: 0;
|
|
||||||
margin-right: 10px;
|
|
||||||
position: relative;
|
|
||||||
transition: .2s;
|
|
||||||
width: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
details[open] summary:before {
|
|
||||||
transform: rotate(90deg)
|
|
||||||
}
|
|
||||||
|
|
||||||
h2, h3, h4, h5 {
|
|
||||||
margin-top: 1.5em;
|
|
||||||
margin-bottom: .6em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-to-top {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 2;
|
|
||||||
right: -108px;
|
|
||||||
bottom: 0;
|
|
||||||
width: 108px;
|
|
||||||
height: 150px;
|
|
||||||
background: url('./img/back-to-top.png?v=1') no-repeat 0 0; /* artwork from https://www.pixiv.net/artworks/83996495 */
|
|
||||||
background-size: 108px 450px;
|
|
||||||
opacity: 0.6;
|
|
||||||
transition: opacity 0.3s, right 0.8s;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.back-to-top:hover {
|
|
||||||
background-position: 0 -150px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.back-to-top.load {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
.back-to-top.ani-leave {
|
|
||||||
background-position: 0 -150px;
|
|
||||||
animation: ani-leave 390ms ease-in-out;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
}
|
|
||||||
.back-to-top.leaved {
|
|
||||||
pointer-events: none;
|
|
||||||
background: none;
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
.back-to-top.ending {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.back-to-top.ending::after {
|
|
||||||
opacity: 1;
|
|
||||||
transition-delay: 0.35s;
|
|
||||||
}
|
|
||||||
.back-to-top::after {
|
|
||||||
content: '';
|
|
||||||
position: fixed;
|
|
||||||
z-index: 2;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 108px;
|
|
||||||
height: 150px;
|
|
||||||
background: url('./img/back-to-top.png?v=1') no-repeat 0 0;
|
|
||||||
background-size: 108px 450px;
|
|
||||||
background-position: 0 -300px;
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes ani-leave {
|
|
||||||
0% {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateX(108px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 900px) {
|
|
||||||
iframe {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
235
assets/style.less
Normal file
235
assets/style.less
Normal file
@ -0,0 +1,235 @@
|
|||||||
|
html {
|
||||||
|
scroll-padding: 50px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main_title {
|
||||||
|
margin-top: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#themes {
|
||||||
|
margin-top: 2em;
|
||||||
|
|
||||||
|
& > p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#more_theme h3 {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#get {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#code {
|
||||||
|
visibility: hidden;
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#result {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github {
|
||||||
|
margin-top: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"][role="switch"] {
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
|
||||||
|
& + label {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 3.6em;
|
||||||
|
height: 1.8em;
|
||||||
|
margin: 0;
|
||||||
|
background: grey;
|
||||||
|
display: block;
|
||||||
|
border-radius: 1.8em;
|
||||||
|
position: relative;
|
||||||
|
transition: 0.3s;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0.1em;
|
||||||
|
left: 0.1em;
|
||||||
|
width: 1.6em;
|
||||||
|
height: 1.6em;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 1.6em;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 12.5%;
|
||||||
|
font-size: 0.54em;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
display: block;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "ON";
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "OFF";
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:checked + label {
|
||||||
|
background: var(--b-btn-bg);
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
left: calc(100% - 0.1em);
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active:after {
|
||||||
|
width: 2.34em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img[data-loading],
|
||||||
|
img[data-failed] {
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
details > summary {
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
&::-webkit-details-marker,
|
||||||
|
&::marker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
summary::before {
|
||||||
|
border-bottom: 6px solid transparent;
|
||||||
|
border-left: 10px solid var(--b-txt);
|
||||||
|
border-top: 6px solid transparent;
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
height: 0;
|
||||||
|
margin-right: 10px;
|
||||||
|
position: relative;
|
||||||
|
transition: 0.2s;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
details[open] summary::before {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5 {
|
||||||
|
margin: 1.5em 0 0.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-to-top {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 2;
|
||||||
|
right: -108px;
|
||||||
|
bottom: 0;
|
||||||
|
width: 108px;
|
||||||
|
height: 150px;
|
||||||
|
background: url("./img/back-to-top.png?v=1") no-repeat 0 0;
|
||||||
|
background-size: 108px 450px;
|
||||||
|
opacity: 0.6;
|
||||||
|
transition: opacity 0.3s, right 0.8s;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-position: 0 -150px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: fixed;
|
||||||
|
z-index: 2;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 108px;
|
||||||
|
height: 150px;
|
||||||
|
background: url("./img/back-to-top.png?v=1") no-repeat 0 0;
|
||||||
|
background-size: 108px 450px;
|
||||||
|
background-position: 0 -300px;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.load {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ani-leave {
|
||||||
|
background-position: 0 -150px;
|
||||||
|
animation: ani-leave 390ms ease-in-out forwards;
|
||||||
|
|
||||||
|
@keyframes ani-leave {
|
||||||
|
0% {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(108px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.leaved,
|
||||||
|
&.ending {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.leaved {
|
||||||
|
background: none;
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ending::after {
|
||||||
|
opacity: 1;
|
||||||
|
transition-delay: 0.35s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 800px) {
|
||||||
|
body {
|
||||||
|
max-width: ~"min(90%, 800px)";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 900px) {
|
||||||
|
iframe {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
@ -1,11 +1,12 @@
|
|||||||
html
|
html
|
||||||
head
|
head
|
||||||
title='Moe Counter!'
|
title='Moe Counter!'
|
||||||
meta(name='viewport', content='width=device-width, initial-scale=1')
|
meta(name='viewport', content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no')
|
||||||
link(rel='icon', type='image/png', href='favicon.png')
|
link(rel='icon', type='image/png', href='favicon.png')
|
||||||
link(rel='stylesheet', href='https://unpkg.com/normalize.css')
|
link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/normalize.css')
|
||||||
link(rel='stylesheet', href='https://unpkg.com/bamboo.css')
|
link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/bamboo.css')
|
||||||
link(rel='stylesheet', href='style.css')
|
link(rel='stylesheet/less', href='style.less')
|
||||||
|
script(less, src='https://cdn.jsdelivr.net/npm/less')
|
||||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||||
script(async, src='https://www.googletagmanager.com/gtag/js?id=G-2RLWN5JXRL')
|
script(async, src='https://www.googletagmanager.com/gtag/js?id=G-2RLWN5JXRL')
|
||||||
script.
|
script.
|
||||||
@ -26,7 +27,7 @@ html
|
|||||||
var __global_data = { site: "#{site}" };
|
var __global_data = { site: "#{site}" };
|
||||||
|
|
||||||
body
|
body
|
||||||
h1#main_title(style='margin-top: 0.5em;')
|
h1#main_title
|
||||||
i Moe Counter!
|
i Moe Counter!
|
||||||
|
|
||||||
h3 How to use
|
h3 How to use
|
||||||
@ -46,10 +47,10 @@ html
|
|||||||
h5 e.g.
|
h5 e.g.
|
||||||
img(src=`${site}/@index` alt="Moe Counter!")
|
img(src=`${site}/@index` alt="Moe Counter!")
|
||||||
|
|
||||||
details#themes(style='margin-top: 2em;')
|
details#themes
|
||||||
summary#more_theme(onclick='_evt_push("click", "normal", "more_theme")')
|
summary#more_theme(onclick='_evt_push("click", "normal", "more_theme")')
|
||||||
h3(style='display: inline-block; margin: 0; cursor: pointer;') More theme✨
|
h3 More theme✨
|
||||||
p(style='margin: 0;') Just use the query parameters <code>theme</code>, like this: <code>#{site}/@:name?theme=moebooru</code>
|
p Just use the query parameters <code>theme</code>, like this: <code>#{site}/@:name?theme=moebooru</code>
|
||||||
each theme in Object.keys(themeList)
|
each theme in Object.keys(themeList)
|
||||||
div.item(data-theme=theme)
|
div.item(data-theme=theme)
|
||||||
h5 #{theme}
|
h5 #{theme}
|
||||||
@ -107,7 +108,9 @@ html
|
|||||||
td: code pixelated
|
td: code pixelated
|
||||||
td Enable pixelated mode, Enum 0/1, default is
|
td Enable pixelated mode, Enum 0/1, default is
|
||||||
code 1
|
code 1
|
||||||
td: input#pixelated(type='checkbox', checked, style='margin: .5rem .75rem;')
|
td
|
||||||
|
input#pixelated(type='checkbox', role='switch', checked)
|
||||||
|
label(for='pixelated'): span
|
||||||
tr
|
tr
|
||||||
td: code darkmode
|
td: code darkmode
|
||||||
td Enable dark mode, Enum 0/1/auto, default is
|
td Enable dark mode, Enum 0/1/auto, default is
|
||||||
@ -117,16 +120,16 @@ html
|
|||||||
option(value="1") yes
|
option(value="1") yes
|
||||||
option(value="0") no
|
option(value="0") no
|
||||||
|
|
||||||
button#get(style='margin-bottom: 1em;', onclick='_evt_push("click", "normal", "get_counter")') Generate
|
button#get(onclick='_evt_push("click", "normal", "get_counter")') Generate
|
||||||
|
|
||||||
div
|
div
|
||||||
code#code(style='visibility: hidden; display: inline-block; margin-bottom: 1em;')
|
code#code
|
||||||
img#result(style='display: block;')
|
img#result
|
||||||
|
|
||||||
p(style='margin-top: 2em;')
|
p.github
|
||||||
a(href='https://github.com/journey-ad/Moe-Counter', target='_blank', onclick='_evt_push("click", "normal", "go_github")') source code
|
a(href='https://github.com/journey-ad/Moe-Counter', target='_blank', onclick='_evt_push("click", "normal", "go_github")') source code
|
||||||
|
|
||||||
div.back-to-top
|
div.back-to-top
|
||||||
|
|
||||||
script(async, src='https://unpkg.com/party-js@2/bundle/party.min.js')
|
script(async, src='https://cdn.jsdelivr.net/npm/party-js@2/bundle/party.min.js')
|
||||||
script(async, src='script.js')
|
script(async, src='script.js')
|
||||||
|
Loading…
x
Reference in New Issue
Block a user