226 lines
7.7 KiB
Plaintext
226 lines
7.7 KiB
Plaintext
html
|
|
head
|
|
title='Moe Counter!'
|
|
meta(name='viewport', content='width=device-width, initial-scale=1')
|
|
link(rel='icon', type='image/png', href='favicon.png')
|
|
link(rel='stylesheet', href='https://unpkg.com/normalize.css')
|
|
link(rel='stylesheet', href='https://unpkg.com/bamboo.css')
|
|
link(rel='stylesheet', href='style.css')
|
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
script(async, src='https://www.googletagmanager.com/gtag/js?id=G-2RLWN5JXRL')
|
|
script.
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'G-2RLWN5JXRL');
|
|
|
|
function _evt_push(type, category, label){
|
|
gtag('event', type, {
|
|
'event_category' : category,
|
|
'event_label' : label
|
|
});
|
|
}
|
|
script(async, src='https://unpkg.com/party-js@2/bundle/party.min.js')
|
|
|
|
style.
|
|
html {
|
|
scroll-padding: 50px 0;
|
|
}
|
|
|
|
body
|
|
h1#main_title(style='margin-top: 0.5em;')
|
|
i Moe Counter!
|
|
|
|
h3 How to use
|
|
p Set a unique id for your counter, replace
|
|
code :name
|
|
| in the url, that's all.
|
|
|
|
h5 SVG address
|
|
code #{site}/@:name
|
|
|
|
h5 Img tag
|
|
code <img src="#{site}/@:name" alt=":name" />
|
|
|
|
h5 Markdown
|
|
code 
|
|
|
|
h5 e.g.
|
|
<img src="#{site}/@index" alt="Moe Count!" />
|
|
|
|
details#themes
|
|
summary#more_theme(onclick='_evt_push("click", "normal", "more_theme")')
|
|
h3(style='display: inline-block; margin: 0; cursor: pointer;') More theme✨
|
|
p(style='margin: 0;') Just use the query parameters <code>theme</code>, like this: <code>#{site}/@:name?theme=moebooru</code>
|
|
h5 asoul
|
|
<img src="#{site}/@demo?theme=asoul" alt="A-SOUL" />
|
|
h5 moebooru
|
|
<img src="#{site}/@demo?theme=moebooru" alt="Moebooru" />
|
|
h5 moebooru-h
|
|
<img src="#{site}/@demo?theme=moebooru-h" alt="Moebooru-Hentai" />
|
|
h5 rule34
|
|
<img src="#{site}/@demo?theme=rule34" alt="Rule34" />
|
|
h5 gelbooru
|
|
<img src="#{site}/@demo?theme=gelbooru" alt="Gelbooru" />
|
|
h5 gelbooru-h
|
|
<img src="#{site}/@demo?theme=gelbooru-h" alt="Gelbooru-Hentai" />
|
|
|
|
h3 Credits
|
|
ul
|
|
li
|
|
a(href='https://glitch.com/', target='_blank', rel='nofollow') Glitch
|
|
li
|
|
a(href='https://space.bilibili.com/703007996', target='_blank', title='A-SOUL_Official') A-SOUL
|
|
li
|
|
a(href='https://github.com/moebooru/moebooru', target='_blank', rel='nofollow') moebooru
|
|
li
|
|
a(href='javascript:alert("!!! NSFW LINK !!!\\nPlease enter the url manually")') rule34.xxx
|
|
| NSFW
|
|
li
|
|
a(href='javascript:alert("!!! NSFW LINK !!!\\nPlease enter the url manually")') gelbooru.com
|
|
| NSFW
|
|
li
|
|
a(href='https://icons8.com/icon/80355/star', target='_blank', rel='nofollow') Icons8
|
|
|
|
h3 Tool
|
|
.tool
|
|
table
|
|
thead
|
|
tr
|
|
th Param
|
|
th Value
|
|
tbody
|
|
tr
|
|
td
|
|
code name
|
|
td
|
|
input#name(type='text', placeholder=':name')
|
|
tr
|
|
td
|
|
code theme
|
|
td
|
|
select#theme
|
|
option(value='asoul') asoul
|
|
option(value='moebooru') moebooru
|
|
option(value='moebooru-h') moebooru-h
|
|
option(value='rule34') rule34
|
|
option(value='gelbooru') gelbooru
|
|
option(value='gelbooru-h') gelbooru-h
|
|
tr
|
|
td
|
|
code pixelated
|
|
td
|
|
input#pixelated(type='checkbox', checked, style='margin: .5rem .75rem;')
|
|
tr
|
|
td
|
|
code padding
|
|
td
|
|
input#padding(type='number', value='7', min='1', max='32', step='1', oninput='this.value = this.value.replace(/[^0-9]/g, "")')
|
|
tr
|
|
td
|
|
code darkmode
|
|
td
|
|
select#darkmode(name="darkmode")
|
|
option(value="auto", selected) auto
|
|
option(value="1") yes
|
|
option(value="0") no
|
|
|
|
button#get(style='margin-bottom: 1em;', onclick='_evt_push("click", "normal", "get_counter")') Generate
|
|
|
|
div
|
|
code#code(style='visibility: hidden; display: inline-block; margin-bottom: 1em;')
|
|
img#result(style='display: block;')
|
|
|
|
script.
|
|
var btn = document.getElementById('get'),
|
|
img = document.getElementById('result'),
|
|
code = document.getElementById('code')
|
|
|
|
btn.addEventListener('click', throttle(function() {
|
|
var $name = document.getElementById('name'),
|
|
$theme = document.getElementById('theme'),
|
|
$pixelated = document.getElementById('pixelated'),
|
|
$padding = document.getElementById('padding'),
|
|
$darkmode = document.getElementById('darkmode')
|
|
|
|
var name = $name.value ? $name.value.trim() : ''
|
|
var theme = $theme.value || 'moebooru'
|
|
var pixelated = $pixelated.checked ? '1' : '0'
|
|
var padding = $padding.value || '7'
|
|
var darkmode = $darkmode.value || 'auto'
|
|
|
|
if(!name) {
|
|
alert('Please input counter name.')
|
|
return
|
|
}
|
|
|
|
party.confetti(this, { count: party.variation.range(20, 40) });
|
|
|
|
img.src = `#{site}/@${name}?theme=${theme}&pixelated=${pixelated}&padding=${padding}&darkmode=${darkmode}`
|
|
code.textContent = img.src
|
|
code.style.visibility = 'visible'
|
|
|
|
img.onload = function() {
|
|
img.scrollIntoView({block:'start', behavior: 'smooth'})
|
|
}
|
|
}, 500))
|
|
|
|
code.addEventListener('click', function(e) {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
|
|
var target = e.target
|
|
var range, selection
|
|
|
|
if (document.body.createTextRange) {
|
|
range = document.body.createTextRange()
|
|
range.moveToElementText(target)
|
|
range.select()
|
|
} else if (window.getSelection) {
|
|
selection = window.getSelection()
|
|
range = document.createRange()
|
|
range.selectNodeContents(target)
|
|
selection.removeAllRanges()
|
|
selection.addRange(range)
|
|
}
|
|
})
|
|
|
|
var $main_title = document.querySelector('#main_title i'),
|
|
$themes = document.querySelector('#themes'),
|
|
$more_theme = document.querySelector('#more_theme')
|
|
$main_title.addEventListener('click', throttle(function() {
|
|
party.sparkles(document.documentElement, { count: party.variation.range(40, 100) });
|
|
}, 1000))
|
|
$more_theme.addEventListener('click', function() {
|
|
if (!$themes.hasAttribute('open')) {
|
|
party.sparkles($more_theme.querySelector('h3'), { count: party.variation.range(20, 40) });
|
|
$themes.scrollIntoView({block:'start', behavior: 'smooth'})
|
|
}
|
|
})
|
|
|
|
function throttle(fn, threshhold, scope) {
|
|
threshhold || (threshhold = 250)
|
|
var last
|
|
var deferTimer
|
|
return function () {
|
|
var context = scope || this
|
|
var now = +new Date
|
|
var args = arguments
|
|
if (last && now < last + threshhold) {
|
|
// hold on to it
|
|
clearTimeout(deferTimer)
|
|
deferTimer = setTimeout(function () {
|
|
last = now
|
|
fn.apply(context, args)
|
|
}, threshhold)
|
|
} else {
|
|
last = now
|
|
fn.apply(context, args)
|
|
}
|
|
}
|
|
}
|
|
|
|
p(style='margin-top: 2em;')
|
|
a(href='https://github.com/journey-ad/Moe-Counter', target='_blank', onclick='_evt_push("click", "normal", "go_github")') source code
|