Skip to content

Instantly share code, notes, and snippets.

@monsterxcn

monsterxcn/dash.svg

Last active August 22, 2021 07:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save monsterxcn/d933cafcdc6662c6bdcbd561fe921e8c to your computer and use it in GitHub Desktop.
Save monsterxcn/d933cafcdc6662c6bdcbd561fe921e8c to your computer and use it in GitHub Desktop.
Download ZIP
派蒙特调诸葛签的 HTML 模板，整理修改自 genshin.pub F12
Display the source blob
Display the rendered blob
Raw
dash.svg
<svg width="1" height="293" viewBox="0 0 1 293" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="0.5" y1="2.18557e-08" x2="0.499987" y2="293" stroke="#880702" stroke-dasharray="4 4"/>
</svg>
Raw
intp.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Genshin Alamanacs Interpretation</title>
<style>
@font-face {
font-family: 'GenshinCN';
src: url(./zh-cn.ttf);
}
body {
font-family: 'GenshinCN';
background-color: #f0f0f0;
}
.container {
height: 360px;
width: 300px;
margin-left: calc(50% - 150px);
margin-top: 20px;
background: #e3d8aa;
box-shadow: 2px 2px 2px 1px rgb(0 0 0/20%);
position: relative;
}
.container>div {
position: absolute;
height: calc(100% - 15px);
width: calc(100% - 15px);
left: 5px;
top: 5px;
box-sizing: border-box;
border: 1px solid #711b0f;
background: #e3d8aa;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.dash {
position: absolute;
margin-top: 32px;
width: 2px;
height: 280px;
background-image: url(dash.svg);
}
img {
position: absolute;
width: 80px;
left: -5px;
bottom: 45px;
}
.left {
width: 20px;
height: auto;
margin: 0 auto;
line-height: 24px;
font-size: 20px;
word-wrap: break-word;
position: absolute;
color: #711b0f;
left: 26px;
top: 45px;
}
.top {
width: 30px;
height: auto;
margin: 0 auto;
word-wrap: break-word;
position: absolute;
left: calc(50% - 15px);
top: 25px;
font-size: 30px;
line-height: 30px;
color: #711b0f;
}
.main {
margin: 0 auto;
font-size: 18px;
display: flex;
top: 75px;
width: 50%;
height: 72%;
line-height: 25px;
position: relative;
color: #be0a13;
word-wrap: break-word;
writing-mode: vertical-rl;
align-items: center;
}
.right {
position: absolute;
right: 26px;
width: 20px;
height: auto;
margin: 0 auto;
line-height: 24px;
font-size: 20px;
word-wrap: break-word;
color: #711b0f;
}
</style>
</head>
<body>
<div class="container">
<div>
<img src="./keli.png" />
<!-- 这只可莉自行下载 -->
<!-- https://cdn.jsdelivr.net/gh/monsterxcn/MyBucket/genshin-html/keli.png -->
<div class="left">派蒙特调 诸葛签</div>
<div class="dash" style="left: 70px;"></div>
<div class="top">解</div>
<div class="dash" style="right: 70px;"></div>
<div class="main">[main]</div>
<div class="right" style="top: 45px">第[number]签</div>
<div class="right" style="bottom: 50px">[lucky]</div>
</div>
</div>
</body>
</html>
Raw
poem.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Genshin Alamanacs</title>
<style>
@font-face {
font-family: 'GenshinCN';
src: url(./zh-cn.ttf);
}
body {
font-family: 'GenshinCN';
background-color: #f0f0f0;
}
.container {
height: 360px;
width: 300px;
margin-left: calc(50% - 150px);
margin-top: 20px;
background: #e3d8aa;
box-shadow: 2px 2px 2px 1px rgb(0 0 0/20%);
position: relative;
}
.container>div {
position: absolute;
height: calc(100% - 15px);
width: calc(100% - 15px);
left: 5px;
top: 5px;
box-sizing: border-box;
border: 1px solid #711b0f;
background: #e3d8aa;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.dash {
position: absolute;
margin-top: 32px;
width: 2px;
height: 280px;
background-image: url(dash.svg);
}
img {
position: absolute;
width: 80px;
left: -5px;
bottom: 45px;
}
.left {
width: 20px;
height: auto;
margin: 0 auto;
line-height: 24px;
font-size: 20px;
word-wrap: break-word;
position: absolute;
color: #711b0f;
left: 26px;
top: 45px;
}
.top {
width: 30px;
height: auto;
margin: 0 auto;
word-wrap: break-word;
position: absolute;
left: calc(50% - 15px);
top: 25px;
font-size: 30px;
line-height: 30px;
color: #711b0f;
}
.main {
margin: 0 auto;
font-size: 20px;
display: flex;
top: 105px;
width: 50%;
height: 65%;
line-height: 30px;
position: relative;
color: #be0a13;
word-wrap: break-word;
writing-mode: vertical-rl;
align-items: center;
}
.right {
position: absolute;
right: 26px;
width: 20px;
height: auto;
margin: 0 auto;
line-height: 24px;
font-size: 20px;
word-wrap: break-word;
color: #711b0f;
}
</style>
</head>
<body>
<div class="container">
<div>
<img src="./keli.png" />
<!-- 这只可莉自行下载 -->
<!-- https://cdn.jsdelivr.net/gh/monsterxcn/MyBucket/genshin-html/keli.png -->
<div class="left">派蒙特调 诸葛签</div>
<div class="dash" style="left: 70px;"></div>
<div class="top">签文</div>
<div class="dash" style="right: 70px;"></div>
<div class="main">[main]</div>
<div class="right" style="top: 45px">第[number]签</div>
<div class="right" style="bottom: 50px">[lucky]</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment