BililiveRecorder/BililiveRecorder.Web/embeded/index.html
2022-08-25 22:39:54 +08:00

157 lines
4.5 KiB
HTML

<!DOCTYPE html>
<html class="enable-dark">
<head>
<meta charset=utf-8>
<meta content="width=device-width,initial-scale=1" name=viewport>
<title>B站录播姬 __VERSION__</title>
<style>
html {
font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", SimHei, sans-serif;
}
@media (prefers-color-scheme: dark) {
html.enable-dark {
background-color: #292a2d;
color: #eee;
}
html.enable-dark a {
color: #eee;
}
html.enable-dark .card {
background-color: #444546;
color: #eee;
}
}
.links {
margin: auto;
max-width: 240px;
}
.group h2 {
margin-bottom: 0;
}
.group {
margin: 40px 0;
}
a {
text-decoration: none;
color: black;
}
.card:hover {
box-shadow: 0px 0px 8px 2px #4682b4;
}
.card {
color: #000;
background: #eee;
margin: 5px 0;
padding: 0 10px;
border: 2px solid lightblue;
border-radius: 5px;
transition: 0.1s ease-out;
}
@media (min-width: 769px) {
.links {
display: flex;
justify-content: space-evenly;
max-width: 840px;
}
.card {
width: 230px;
}
}
.name {
font-size: 1.1em;
margin: 1rem 0 0 0;
}
.path {
font-family: monospace;
}
</style>
</head>
<body>
<h1 style="text-align: center">B站录播姬</h1>
<p style="text-align: center;font-family:'Courier New', Courier, monospace;" title="__FULL_VERSION__">
__VERSION__
</p>
<p style="text-align: center;"><a href="https://rec.danmuji.org">https://rec.danmuji.org</a></p>
<div>
<div class="links">
<div class="group">
<h2>录播姬管理界面</h2>
<p>&nbsp;</p>
<a href="./ui/">
<div class="card">
<p class="name">B站录播姬 WebUI</p>
<p class="path">/ui</p>
</div>
</a>
<a href="./file/">
<div class="card">
<p class="name">录播文件浏览器</p>
<p class="path">/file</p>
</div>
</a>
<a href="./player/">
<div class="card">
<p class="name">视频播放器</p>
<p class="path">/player</p>
</div>
</a>
</div>
<div class="group">
<h2>REST API</h2>
<p>API 路径: <span style="font-family: monospace;">/api</span></p>
<a href="./swagger">
<div class="card">
<p class="name">Swagger UI</p>
<p class="path">/swagger</p>
</div>
</a>
</div>
<div class="group">
<h2>GraphQL API</h2>
<p>API 路径: <span style="font-family: monospace;">/graphql</span></p>
<a href="./graphql/graphiql">
<div class="card">
<p class="name">GraphiQL</p>
<p class="path">/graphql/graphiql</p>
</div>
</a>
<a href="./graphql/playground">
<div class="card">
<p class="name">Playground</p>
<p class="path">/graphql/playground</p>
</div>
</a>
<a href="./graphql/altair">
<div class="card">
<p class="name">Altair</p>
<p class="path">/graphql/altair</p>
</div>
</a>
<a href="./graphql/voyager">
<div class="card">
<p class="name">Voyager</p>
<p class="path">/graphql/voyager</p>
</div>
</a>
</div>
</div>
</div>
</body>
</html>