Skip to content

P
pre-release-web
Commit 5bd57b3c authored by mercury233's avatar mercury233
Browse files
Options

Initial commit

parents
Hide whitespace changes
Inline Side-by-side
Showing with 302 additions and 0 deletions
index.html 0 → 100644
View file @ 5bd57b3c
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MyCard - 萌卡 - 先行卡下载</title>
<meta name="keywords" content="游戏王,萌卡,MyCard,YGOPro,先行卡,超先行卡" />
<meta name="description" content="MyCard为满足玩家提前使用先行卡的需求，支持先行卡。本页面下载补丁即可使用。" />
<meta name="viewport" content="width=device-width, initial-scale=0.1, maximum-scale=1, user-scalable=0">
<style>
body {
margin: 0;
padding: 0;
background-color: #c5d0e8;
}
nav {
display: flex;
align-items: center;
width: auto;
height: 66px;
background-color: #212529;
padding: 0 100px;
}
nav a {
color: #bdbcba;
text-decoration: none;
padding: 0 10px;
}
nav .logo {
display: flex;
align-items: center;
font-size: 20px;
font-weight: 700;
color: white;
}
nav .logo img {
width: 40px;
height: 40px;
margin-right: 10px;
}
nav .navbar-nav {
display: flex;
align-items: center;
}
nav .navbar-nav a:hover {
color: white;
}
header {
width: auto;
height: 200px;
padding: 20px 200px;
}
header p {
font-size: 20px;
font-weight: 700;
color: #212529;
}
main {
width: auto;
padding: 20px 200px;
background-color: #021123;
color: #c5d0e8;
}
#preTable {
width: 100%;
border: 0;
}
#preTable thead {
display: none;
}
#preList .img {
width: 240px;
height: 320px;
align-items: center;
text-align: center;
}
#preList .img img {
width: 200px;
min-height: 290px;
}
#preList .text {
vertical-align: top;
}
#preList .name {
font-size: 22px;
font-weight: bold;
}
#preList .time {
font-size: 12px;
color: #555555;
}
#preList .loading td {
width: 100%;
height: 80px;
text-align: center;
}
#preList .loading .loader {
width: 48px;
height: 48px;
border: 5px solid #FFF;
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#preList tr:nth-child(n+10) {
display: none;
}
#preList.expanded tr {
display: table-row;
}
#preTable tfoot {
display: none;
}
#preTable tfoot td {
height: 60px;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: #072549;
}
section.comment {
width: auto;
padding: 20px 200px;
background-color: white;
}
footer {
width: auto;
height: 240px;
padding: 20px 200px;
text-align: center;
background: #021123;
color: #c5d0e8;
}
footer img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<nav>
<a href="https://mycard.moe/" class="logo">
<img src="https://cdn02.moecube.com:444/store/remake/assets/img/mycardlogo.png" alt="Logo">
MyCard
</a>
<div class="navbar-nav">
<a href="https://mycard.moe/">首页</a>
<a href="https://shop387046095.taobao.com/" target="_blank">游戏周边❤</a>
<a href="https://ygobbs.com/">社区</a>
<a href="https://mycard.moe/ygopro/arena/index.html#/">决斗数据库</a>
<a href="https://event.ygobbs.com/">赛事系统</a>
<a href="https://accounts.moecube.com/profiles">用户中心</a>
<a href="https://accounts.moecube.com/signup">注册账号</a>
</div>
</nav>
<header>
<p>这里写MyCard先行卡的介绍，使用方法，论坛或页面下方反馈</p>
<p>更新时间：<span class="updateTime"></span></p>
<p>下载：<a href="https://cdn02.moecube.com:444/ygopro-super-pre/archive/ygopro-super-pre.ypk" class="download">扩展包</a></p>
</header>
<main>
<table id="preTable">
<thead>
<tr>
<th>卡图</th>
<th>效果</th>
</tr>
</thead>
<tbody id="preList">
<tr class="loading">
<td colspan="2">
<span class="loader"></span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
查看更多（共<span>0</span>张）
</td>
</tr>
</tfoot>
</table>
<template id="preRow">
<tr>
<td class="img">
<img src="" alt="" loading="lazy">
</td>
<td class="text">
<p class="name"></p>
<p class="overallString"></p>
<p class="desc"></p>
<p class="time">发布日期：<span class="createTime"></span><br>
最后更新：<span class="updateTime"></span></p>
</td>
</tr>
</template>
</main>
<section class="comment">
<div id="tcomment"></div>
</section>
<footer>
<img src="https://minio.mycard.moe:9000/ygobbs/original/3X/e/2/e26277ada0ab5608329faaf8eb4c3ac33054c7b1.jpg">
<p>关注MC微信公众号-决斗暗网</p>
</footer>
<script>
async function getPre() {
let res = await fetch('https://cdn02.moecube.com:444/ygopro-super-pre/data/test-release-v2.json');
let cards = await res.json();
let fragment = new DocumentFragment();
cards.forEach((card) => {
let row = document.getElementById('preRow').content.cloneNode(true);
row.querySelector('img').src = card.picUrl;
row.querySelector('img').alt = card.name;
row.querySelector('.name').innerText = card.name;
row.querySelector('.overallString').innerText = card.overallString;
row.querySelector('.desc').innerText = card.desc;
row.querySelector('.updateTime').innerText = formatDateFromUnixTimestamp(card.updateTime);
row.querySelector('.createTime').innerText = formatDateFromUnixTimestamp(card.createTime);
fragment.appendChild(row);
});
document.querySelector('.loading').remove();
document.getElementById('preList').appendChild(fragment);
if (cards.length > 10) {
document.querySelector('tfoot').style.display = 'table-footer-group';
document.querySelector('tfoot td span').innerText = cards.length;
document.querySelector('tfoot td').addEventListener('click', function () {
document.querySelector('#preList').classList.add('expanded');
document.querySelector('tfoot').remove();
});
}
}
async function getVersion() {
let res = await fetch('https://cdn02.moecube.com:444/ygopro-super-pre/data/version.txt');
let version = await res.text();
document.querySelector('header .updateTime').innerText = formatDateFromUnixTimestamp(version);
document.querySelector('a.download').href = document.querySelector('a.download').href + "?v=" + version;
}
getPre();
getVersion();
function formatDateFromUnixTimestamp(timestamp) {
var date = new Date(timestamp * 1000);
var year = date.getFullYear();
var month = ('0' + (date.getMonth() + 1)).slice(-2);
var day = ('0' + date.getDate()).slice(-2);
var hours = ('0' + date.getHours()).slice(-2);
var minutes = ('0' + date.getMinutes()).slice(-2);
var seconds = ('0' + date.getSeconds()).slice(-2);
var formattedDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
return formattedDate;
}
</script>
<script src="https://cdn.staticfile.org/twikoo/1.6.31/twikoo.min.js"></script>
<script>
twikoo.init({
envId: 'https://ygo233.com/tcomment',
el: '#tcomment',
path: 'mycard-pre'
})
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment