wood/Random-Api
1
0
Fork 0
mirror of https://github.com/woodchen-ink/Random-Api.git synced 2025-07-18 05:52:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

更新下API页面

Browse Source
This commit is contained in:
wood 2024-04-17 01:59:20 +08:00
parent 7e069e9991
commit c684d136dc
1 changed files with 35 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
index.html
View File

@ -1,38 +1,46 @@
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<html lang="zh-cmn-Hans" class="mdui-theme-dark">
<head>
<title>随机文件api-wood</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" size="32x32" href="https://cdn-img-r2.czl.net/woodchenink/2024/1/14/blackwood.jpg">
<link rel="shortcut icon" size="32x32" href="https://cdn-r2.czl.net/woodchenink/2024/1/14/blackwood.jpg">
<style>
html,
body {
margin: 0;
color: #424242;
font-weight: 300;
font-family: "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "PingFang SC", "Microsoft YaHei",
"Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", "sans-serif";
background-image: url(https://random-api.czl.net/pic/all);
background-size: cover;
height: 100%;
/* 确保 body 高度充满整个视窗 */
position: relative;
/* 为蒙版定位提供参照 */
}
.overlay {
position: absolute;
/* 绝对定位，相对于最近的相对定位元素（这里是 body） */
top: 0;
left: 0;
width: 100%;
/* 蒙版宽度覆盖整个视窗宽度 */
height: 100%;
/* 蒙版高度覆盖整个视窗高度 */
background-color: rgba(0, 0, 0, 0.801);
/* 半透明黑色蒙版，透明度可以根据需求调整 */
z-index: 1;
/* 确保蒙版层位于最上方 */
}
* {
box-sizing: border-box;
}
header {
padding: 40vh 0 8vh 0;
text-align: center;
font-weight: 100;
display: positive;
/* flex-direction: column; */
/* align-items: center; */
justify-content: space-between;
height: 100vh;
overflow: hidden;
background: #6495ED;
}
#scroll-down {
background-color: transparent;
margin-top: 2rem;
@ -77,25 +85,20 @@
object-fit: cover;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/mdui@2.0.3/mdui.css">
<script src="https://unpkg.com/mdui@2.0.3/mdui.global.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdui/2.1.1/mdui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdui/2.1.1/mdui.global.js"></script>
<script src="https://cdnjs.czl.net/ajax/libs/markdown-it/13.0.2/markdown-it.min.js"></script>
</head>
<body class="mdui-prose">
<mdui-layout>
<header>
<section>
<h1>Random-Api / 随机文件API </h1>
<h3>wood</h3>
</section>
<button id="scroll-down"></button>
</header>
<main style="margin:20px auto;">
<div id="markdown-content">
</div>
</main>
</mdui-layout>
<div class="overlay">
<mdui-layout>
<main style="margin:20px auto;">
<div id="markdown-content">
</div>
</main>
</mdui-layout>
</div>
<!-- 渲染markdown -->
<script>
// 创建带有配置的 markdown-it 实例
@ -114,4 +117,4 @@
</script>
</body>
</html>
</html>