PamGram/resources/genshin/abyss/example.html

520 lines
28 KiB
HTML
Raw Permalink Normal View History

2022-07-26 10:07:31 +00:00
<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8">
<title>abyss-example</title>
<link type="text/css" href="./style.css" rel="stylesheet"/>
<link type="text/css" href="../../styles/public.css" rel="stylesheet"/>
2022-07-26 10:07:31 +00:00
</head>
<body>
<div class="container">
<div class="overview">
<div class="title">挑战回顾</div>
<div class="summarize">
<div>
<div>UID: 100206192</div>
<div class="star">
<span>36 (9-9-9-9)</span>
</div>
2022-07-26 10:07:31 +00:00
</div>
<div>
<div>时间: 2022年10月上</div>
<div>最深抵达: 12-3</div>
2022-07-26 10:07:31 +00:00
</div>
</div>
<div class="most-played">
<div class="caption">出战次数</div>
<div class="characters">
<div class="character">
2023-03-15 11:44:18 +00:00
<div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">15次</div>
</div>
<i class="four-star"></i>
<div class="character">
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">15次</div>
</div>
<i class="four-star"></i>
<div class="character">
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">15次</div>
</div>
<i class="four-star"></i>
<div class="character">
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">15次</div>
</div>
2022-07-26 10:07:31 +00:00
</div>
</div>
<div>
<div class="caption">战斗数据</div>
<div class="ranks">
<div style="background-color: rgb(61 76 86 / 60%);">
<div class="rank">战斗次数: 12</div>
<div class="rank">
<span>最多击破999</span>
<img src="../../assets/avatar/10000002/side.png" alt="神里绫华"/>
</div>
</div>
<div>
<div class="rank">
<span>最强一击: 999,999</span>
<img src="../../assets/avatar/10000002/side.png" alt="神里绫华"/>
</div>
<div class="rank">
<span>最多承伤: 114,514</span>
<img src="../../assets/avatar/10000002/side.png" alt="神里绫华"/>
</div>
</div>
<div style="background-color: rgb(61 76 86 / 60%);">
<div class="rank">
<span>元素爆发: 26</span>
<img src="../../assets/avatar/10000002/side.png" alt="神里绫华"/>
</div>
<div class="rank">
<span>元素战技: 48</span>
<img src="../../assets/avatar/10000002/side.png" alt="神里绫华"/>
</div>
</div>
2022-07-26 10:07:31 +00:00
</div>
</div>
</div>
<div class="floors">
<div class="floor" style="background-image: url('./background/floor1.png');background-color: #374952;">
<div class="head">
<div class="floor-name">
<div class="floor-num"></div>
<div>深境螺旋第一层</div>
</div>
<div class="star">
<span>9/9</span>
</div>
</div>
<div class="hr"></div>
<div class="chamber">
<div class="chamber-info">
<div>
第 1 间 <span style="color: #A3A3A3">2022-10-01 10:02:05</span>
</div>
<div class="stars">
<div class="star"></div>
<div class="star dim-star"></div>
<div class="star dim-star"></div>
</div>
</div>
<div class="battles">
<div class="battle">
<div class="character">
<div style="background-color: var(--red)">6命</div>
2023-03-15 11:44:18 +00:00
<div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div style="background-color: var(--red)">5命</div>
2023-03-15 11:44:18 +00:00
<div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div style="background-color: var(--green)">4命</div>
2023-03-15 11:44:18 +00:00
<div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div style="background-color: var(--green)">3命</div>
2023-03-15 11:44:18 +00:00
<div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="battle-info">上半</div>
</div>
<div class="battle">
<div class="character">
<div style="background-color: var(--blue)">2命</div>
2023-03-15 11:44:18 +00:00
<div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div style="background-color: var(--blue)">1命</div>
2023-03-15 11:44:18 +00:00
<div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
2023-03-15 11:44:18 +00:00
<div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="battle-info">下半</div>
</div>
</div>
</div>
<div class="hr"></div>
<div class="chamber">
<div class="chamber-info">
<div>
第 2 间 <span style="color: #A3A3A3">2022-10-01 10:02:05</span>
</div>
<div class="stars">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
</div>
<div class="battles">
<div class="battle">
<div class="character">
<div style="background-color: var(--red)">6命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div style="background-color: var(--red)">6命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div style="background-color: var(--red)">6命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div style="background-color: var(--red)">6命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="battle-info">上半</div>
</div>
<div class="battle">
<div class="character">
<div style="background-color: var(--red)">6命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div style="background-color: var(--red)">6命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div style="background-color: var(--red)">6命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div style="background-color: var(--red)">6命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="battle-info">下半</div>
</div>
</div>
</div>
<div class="hr"></div>
<div class="chamber">
<div class="chamber-info">
<div>
第 3 间 <span style="color: #A3A3A3">2022-10-01 10:02:05</span>
</div>
<div class="stars">
<div class="star"></div>
<div class="star"></div>
<div class="star dim-star"></div>
</div>
</div>
<div class="battles">
<div class="battle">
<div class="character">
<div style="background-color: var(--red)">6命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div style="background-color: var(--green)">4命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div style="background-color: var(--blue)">2命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
</div>
</div>
</div>
2022-07-26 10:07:31 +00:00
</div>
<div class="floor" style="background-image: url('./background/floor1.png');background-color: #374952;">
<div class="head">
<div class="floor-name">
<div class="floor-num">
<div>1</div>
</div>
<span>深境螺旋第一层</span>
2022-07-26 10:07:31 +00:00
</div>
<div class="star">
<span>9/9</span>
2022-07-26 10:07:31 +00:00
</div>
</div>
<div class="hr"></div>
<div class="chamber">
<div class="chamber-info">
<div>
第 1 间 <span style="color: #A3A3A3">2022-10-01 10:02:05</span>
</div>
<div class="stars">
<div class="star"></div>
<div class="star dim-star"></div>
<div class="star dim-star"></div>
</div>
2022-07-26 10:07:31 +00:00
</div>
<div class="battles">
<div class="battle">
<div class="character">
<div style="background-color: var(--red)">6命</div>
2023-03-15 11:44:18 +00:00
<div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div style="background-color: var(--red)">5命</div>
2023-03-15 11:44:18 +00:00
<div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div style="background-color: var(--green)">4命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div style="background-color: var(--green)">3命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="battle-info">上半</div>
</div>
<div class="battle">
<div class="character">
<div style="background-color: var(--blue)">2命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div style="background-color: var(--blue)">1命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="battle-info">下半</div>
</div>
2022-07-26 10:07:31 +00:00
</div>
</div>
<div class="hr"></div>
<div class="chamber">
<div class="chamber-info">
<div>
第 2 间 <span style="color: #A3A3A3">2022-10-01 10:02:05</span>
</div>
<div class="stars">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
</div>
<div class="battles">
<div class="battle">
<div class="character">
<div style="background-color: var(--red)">6命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div style="background-color: var(--red)">6命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div style="background-color: var(--red)">6命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div style="background-color: var(--red)">6命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="battle-info">上半</div>
</div>
<div class="battle">
<div class="character">
<div style="background-color: var(--red)">6命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div style="background-color: var(--red)">6命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div style="background-color: var(--red)">6命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div style="background-color: var(--red)">6命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="battle-info">下半</div>
</div>
</div>
</div>
<div class="hr"></div>
<div class="chamber">
<div class="chamber-info">
<div>
第 3 间 <span style="color: #A3A3A3">2022-10-01 10:02:05</span>
</div>
<div class="stars">
<div class="star"></div>
<div class="star"></div>
<div class="star dim-star"></div>
</div>
</div>
<div class="battles">
<div class="battle">
<div class="character">
<div style="background-color: var(--red)">6命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div style="background-color: var(--green)">4命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div style="background-color: var(--blue)">2命</div>
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
<div class="character">
<div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="caption">Lv.90</div>
</div>
</div>
2022-07-26 10:07:31 +00:00
</div>
</div>
</div>
</div>
</div>
</body>
</html>