Files
2023-08-25 13:31:04 +05:30

175 lines
7.8 KiB
HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>戳泡泡</title>
<link rel="stylesheet" href="style/picnic.min.css">
<link rel="stylesheet" type="text/css" href="style/main.css">
<link rel="stylesheet" type="text/css" href="style/font.css">
<link rel="icon" href="favicon.png">
<script src="scripts/launchgame.js"></script>
<script src="scripts/downloader.js"></script>
<script src="scripts/addbeatmaplist.js"></script>
<script src="scripts/settings.js"></script>
<script src="scripts/jsloader.js"></script>
</head>
<body>
<div class="game-area" id="game-area" hidden>
</div>
<div class="pause-menu" id="pause-menu" hidden>
<div class="paused-title">paused</div>
<div class="button-list">
<div class="pausebutton continue" id="pausebtn-continue">
<div class="inner">Continue</div>
</div>
<div class="pausebutton retry" id="pausebtn-retry">
<div class="inner">Retry</div>
</div>
<div class="pausebutton quit" id="pausebtn-quit">
<div class="inner">Quit</div>
</div>
</div>
</div>
<nav id="main-nav">
<div class="nav-link">
<a href="index.html" class="brand">Osaka Salmon University!</a>
<a href="new.html" class="pseudo button">最新</a>
<a href="hot.html" class="pseudo button">热门</a>
<a href="genre.html" class="pseudo button active">分类</a>
</div>
<div class="nav-search">
<form action="search.html">
<input type="text" name="q" placeholder="谱面关键词或sid"/>
<input type="image" class="search-button" src="research.svg">
</form>
</div>
<div class="nav-tool">
<a href="local.html" class="pseudo button">收藏夹</a>
<a href="faq.html" class="pseudo button">常见问题</a>
<a href="settings.html" class="pseudo button">设置</a>
<a onclick="document.documentElement.requestFullscreen();" class="pseudo button">进入全屏</a>
</div>
</nav>
<div class="main-page" id="main-page">
<div class="main-content">
<div class="sort-nav">
<div class="title">风格</div>
<div class="selitem" genre="1">全部</div>
<div class="selitem" genre="4">游戏</div>
<div class="selitem" genre="8">动漫</div>
<div class="selitem" genre="16">摇滚</div>
<div class="selitem" genre="32">流行</div>
<div class="selitem" genre="128">新奇</div>
<div class="selitem" genre="1024">电子</div>
<div class="selitem" genre="2+64+256">其它</div>
</div>
<div class="sort-nav">
<div class="title">语言</div>
<div class="selitem" lang="1">全部</div>
<div class="selitem" lang="16">汉语</div>
<div class="selitem" lang="4">英语</div>
<div class="selitem" lang="8">日语</div>
<div class="selitem" lang="32">器乐</div>
<div class="selitem" lang="64">韩语</div>
<div class="selitem" lang="128">法语</div>
<div class="selitem" lang="256">德语</div>
<div class="selitem" lang="2048">意大利语</div>
<div class="selitem" lang="512">瑞典语</div>
<div class="selitem" lang="2+1024">其它</div>
</div>
<hr>
<div class="beatmap-list" id="beatmap-list">
<!-- to be filled in script -->
</div>
<div class="button" style="width:100%; margin-bottom: 10px;" id="btnmore">加载更多</div>
<div class="text">推荐使用最新版本 Firefox 或 Chrome.</div>
<div class="text">内测版v1.4.3. <a href="https://github.com/111116/osu">Github</a></div>
<div class="text"><a href="https://osu.sayobot.cn/">Sayobot</a>提供谱面</div>
</div>
<!-- <div class="side-panel">
to be activated in script
</div> -->
<div class="statuslines" id="statuslines">
<div class="progress" id="script-progress">
Scripts
<div class="lds-dual-ring"></div>
</div>
<div class="progress" id="skin-progress">
Skin
<div class="lds-dual-ring"></div>
</div>
<div class="progress" id="sound-progress">
Hitsounds
<div class="lds-dual-ring"></div>
</div>
</div>
</div>
<script>
let btns = document.getElementsByClassName("selitem");
function search(genre, lang) {
// clear list
list = document.getElementById("beatmap-list");
document.getElementById("btnmore").innerText = "查看更多";
while (list.firstChild) {
list.removeChild(list.firstChild);
}
addBeatmapList("https://api.sayobot.cn/beatmaplist?0=20&1=0&2=4&5=1&7=" + genre + "&8=" + lang);
var cur = 20;
document.getElementById("btnmore").onclick = function() {
if (typeof(window.list_endid) == "undefined") {
addBeatmapList("https://api.sayobot.cn/beatmaplist?0=20&1="+cur+"&2=4&5=1&7=" + genre + "&8=" + lang);
}
else {
if (window.list_endid == 0)
document.getElementById("btnmore").innerText = "已经没有更多了哦!";
else
addBeatmapList("https://api.sayobot.cn/beatmaplist?0=20&1="+window.list_endid+"&2=4&5=1&7=" + genre + "&8=" + lang);
}
cur += 20;
}
// update buttons state
for (let i=0; i<btns.length; ++i) {
let g = eval(btns[i].getAttribute("genre"));
let l = eval(btns[i].getAttribute("lang"));
if (g==genre || l==lang) {
btns[i].classList.add("active");
}
else {
btns[i].classList.remove("active");
}
}
}
let curgenre = 1;
let curlang = 1;
search(curgenre, curlang);
for (let i=0; i<btns.length; ++i) {
btns[i].onclick = function() {
let g = eval(btns[i].getAttribute("genre"));
let l = eval(btns[i].getAttribute("lang"));
if (g) curgenre = g;
if (l) curlang = l;
search(curgenre, curlang);
}
}
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-169262247-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-169262247-1');
</script>
</body>
</html>
<!-- attribution -->
<!-- play icon made by https://www.flaticon.com/authors/those-icons -->
<!-- search icon made by https://www.flaticon.com/authors/good-ware -->