Skip to content

Instantly share code, notes, and snippets.

@Redlnn

Redlnn/1.html

Created December 23, 2023 09:14
Show Gist options
  • Save Redlnn/a7d719c11d37b9e71a2f1ba6c3fa6aa4 to your computer and use it in GitHub Desktop.
Save Redlnn/a7d719c11d37b9e71a2f1ba6c3fa6aa4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
1.html
<html>
<head>
<style>
/* 临时的 start */
main {
padding: 20px;
height: calc(100% - var(--footer-height) - var(--powered-height));
overflow: hidden;
}
hr {
margin: 10px 0 20px;
}
/* 临时的 end */
:root {
--footer-height: 200px;
--footer-padding: 20px;
--ad-height: 100px;
--qrcode-height: 120px;
--powered-height: 25px;
}
* {
margin: 0;
box-sizing: border-box;
}
html {
height: 100vh;
width: 100vw;
}
body {
height: 100%;
width: 100%;
background-image: url(./40884c2901856af61431735a6893f824.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
main {
background-color: #fafafac0;
backdrop-filter: blur(10px);
}
footer {
height: var(--footer-height);
width: 100%;
background-color: #eeeeeec0;
backdrop-filter: blur(10px);
display: grid;
grid-template-columns: 1fr min-content;
grid-template-rows: min-content;
grid-template-areas: 'left right';
padding: var(--footer-padding);
color: #666;
font-size: 16px;
}
.right {
height: calc(var(--footer-height) - 2 * var(--footer-padding));
grid-area: right;
display: flex;
flex-direction: column;
background-color: #88888850;
padding: 8px 8px 0;
border-radius: 8px;
}
.right .qrcode-text {
height: calc(var(--footer-height) - 2 * var(--footer-padding) - var(--qrcode-height) - 8px);
font-size: 12px;
text-align: center;
line-height: 12px;
display: flex;
justify-content: center;
align-items: center;
}
.right .qrcode-area {
display: grid;
grid-template-columns: 1fr min-content;
grid-template-rows: min-content;
grid-template-areas: '. .';
overflow: hidden;
grid-area: right;
}
.right .qrcode {
height: var(--qrcode-height);
border-radius: 5px;
}
.right .qrcode:last-child {
margin-left: 8px;
}
.left {
grid-area: left;
height: 160px;
margin-right: 15px;
}
.left .footer-text {
height: calc(var(--footer-height) - 2 * var(--footer-padding) - var(--ad-height));
display: flex;
flex-direction: column;
justify-content: center;
}
.ad {
height: var(--ad-height);
grid-area: ad;
overflow: hidden;
border-radius: 5px;
}
.ad-img {
position: relative;
border-radius: 5px;
}
.ad-img::before {
content: 'AD';
position: absolute;
left: 0;
bottom: 0;
z-index: 100;
background-color: #88888850;
font-size: 12px;
line-height: 12px;
padding: 3px 5px;
border-top-right-radius: 5px;
}
.ad-img img {
max-height: var(--ad-height);
border-radius: 5px;
}
.ad-text {
position: relative;
height: 100%;
font-size: 14px;
background-color: #88888830;
padding: 10px;
border-radius: 5px;
}
.ad-text::before {
content: '一言';
position: absolute;
left: 0;
bottom: 0;
z-index: 100;
background-color: #88888850;
font-size: 12px;
line-height: 12px;
padding: 3px 5px;
border-top-right-radius: 5px;
}
.text-area {
height: calc(var(--ad-height) - 3 * 10px);
overflow: hidden;
}
.ad-text p {
line-height: 1.5em;
}
.powered {
width: 100%;
height: var(--powered-height);
line-height: var(--powered-height);
text-align: center;
font-size: 12px;
background-color: #ddddddc0;
backdrop-filter: blur(10px);
}
</style>
</head>
<body>
<main>
<h1>Markdown</h1>
<hr />
<p style="height: 200px">正文</p>
</main>
<footer>
<section class="left">
<div class="footer-text">
<p style="font-weight: bold; margin-bottom: 2px">该图片由 ABot 生成</p>
<p style="font-size: 14px">2023年12月22日 星期五 下午4:00</p>
</div>
<section class="ad">
<!-- <div class="ad-img">
<img src="./111418ab3v9bh8jit32hyj.gif" />
</div> -->
<div class="ad-text">
<div class="text-area">
<p>人是要整活的——没活了，可不就是死了么？避弊盗利非小人不可为，须纳其弊方承其禾。</p>
<p>当你重新踏上旅途之后，一定要记得旅途本身的意义</p>
<p>当你重新踏上旅途之后，一定要记得旅途本身的意义</p>
<p>当你重新踏上旅途之后，一定要记得旅途本身的意义</p>
<p>当你重新踏上旅途之后，一定要记得旅途本身的意义</p>
</div>
</div>
</section>
</section>
<section class="right">
<div class="qrcode-area">
<img
class="qrcode"
src="data:image/png;base64,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"
/>
<img
class="qrcode"
src="data:image/png;base64,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"
/>
</div>
<div class="qrcode-text">
<p>扫描二维码将 ABot 添加至你的群聊/频道</p>
</div>
</section>
</footer>
<section class="powered">Powered by Avilla</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment