mirror of
https://github.com/woodchen-ink/Random-Api.git
synced 2025-07-18 22:12:03 +08:00
123 lines
3.5 KiB
HTML
123 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-cmn-Hans" class="mdui-theme-dark">
|
||
|
||
<head>
|
||
<title>随机文件api</title>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<link rel="shortcut icon" size="32x32" href="https://cdn-r2.czl.net/2023/06/20/649168ebc2b5d.png">
|
||
<style>
|
||
html,
|
||
body {
|
||
height: 100%;
|
||
margin: 0;
|
||
font-weight: 300;
|
||
background-image: url(https://random-api.czl.net/pic/all);
|
||
background-size: cover;
|
||
overflow: auto;
|
||
/* 确保页面可以滚动 */
|
||
}
|
||
|
||
.overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
z-index: 2;
|
||
/* 确保其位于内容之上 */
|
||
overflow-y: auto;
|
||
/* 允许蒙版内部滚动 */
|
||
}
|
||
|
||
#markdown-content {
|
||
position: relative;
|
||
z-index: 3;
|
||
/* 确保内容可以被访问和滚动 */
|
||
background-color: transparent;
|
||
/* 可选，视你的需求而定 */
|
||
}
|
||
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
#scroll-down {
|
||
background-color: transparent;
|
||
margin-top: 2rem;
|
||
width: 2rem;
|
||
height: 2rem;
|
||
border-radius: 50%;
|
||
border: 2px solid #424242;
|
||
cursor: pointer;
|
||
animation: bounce 2s infinite 2s;
|
||
}
|
||
|
||
#scroll-down::before {
|
||
display: block;
|
||
content: "";
|
||
transform: rotate(-45deg) translate(0.15rem, 0.15rem);
|
||
width: 0.4rem;
|
||
height: 0.4rem;
|
||
border: 2px solid #424242;
|
||
border-width: 0px 0 2px 2px;
|
||
}
|
||
|
||
main {
|
||
padding: 1vw;
|
||
}
|
||
|
||
section {
|
||
padding: 1rem;
|
||
}
|
||
|
||
section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
/* height: 100vh; */
|
||
/* 使section占据整个视窗高度，你可以根据需要调整这个值 */
|
||
}
|
||
|
||
img {
|
||
width: 150px;
|
||
height: 200px;
|
||
object-fit: cover;
|
||
}
|
||
</style>
|
||
<link rel="stylesheet" href="https://mirrors.sustech.edu.cn/cdnjs/ajax/libs/mdui/2.1.1/mdui.min.css">
|
||
<script src="https://mirrors.sustech.edu.cn/cdnjs/ajax/libs/mdui/2.1.1/mdui.global.js"></script>
|
||
<script src="https://mirrors.sustech.edu.cn/cdnjs/ajax/libs/markdown-it/13.0.2/markdown-it.min.js"></script>
|
||
</head>
|
||
|
||
<body class="mdui-prose">
|
||
<div class="overlay">
|
||
<mdui-layout>
|
||
<main style="margin:20px auto;">
|
||
<div id="markdown-content">
|
||
</div>
|
||
</main>
|
||
</mdui-layout>
|
||
</div>
|
||
<!-- 渲染markdown -->
|
||
<script>
|
||
// 创建带有配置的 markdown-it 实例
|
||
var md = window.markdownit({
|
||
html: true
|
||
});
|
||
|
||
// 异步加载 index.md 文件内容
|
||
fetch('./index.md')
|
||
.then(response => response.text())
|
||
.then(markdownText => {
|
||
// 渲染 Markdown 内容
|
||
document.getElementById('markdown-content').innerHTML = md.render(markdownText);
|
||
})
|
||
.catch(error => console.error('Error loading index.md:', error));
|
||
</script>
|
||
</body>
|
||
|
||
</html> |