mirror of
https://github.com/woodchen-ink/Random-Api.git
synced 2025-07-18 14:02:03 +08:00
120 lines
3.7 KiB
HTML
120 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
||
<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-r2.czl.net/woodchenink/2024/1/14/blackwood.jpg">
|
||
<style>
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
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;
|
||
}
|
||
|
||
#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://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">
|
||
<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('https://random-api.pages.dev/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> |