mirror of
https://github.com/woodchen-ink/random-api-go.git
synced 2025-07-18 13:52:02 +08:00
87 lines
2.3 KiB
HTML
87 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-cmn-Hans">
|
|
|
|
<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">
|
|
<link rel="stylesheet" href="https://cdn-r2.czl.net/frame/czlfonts/slice/font.css" media="all">
|
|
<link rel="stylesheet" href="https://cdn-r2.czl.net/frame/prose.css" media="all">
|
|
<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;
|
|
padding: 20px;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
main {
|
|
padding: 1vw;
|
|
max-width: 1000px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
</style>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.2/markdown-it.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="overlay">
|
|
<main>
|
|
<div id="markdown-content" class="prose prose-dark">
|
|
</div>
|
|
</main>
|
|
</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>
|