PaiGram/resources/genshin/abyss/example.html
2023-03-15 19:44:18 +08:00

520 lines
28 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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"/>
</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>
</div>
<div>
<div>时间: 2022年10月上</div>
<div>最深抵达: 12-3</div>
</div>
</div>
<div class="most-played">
<div class="caption">出战次数</div>
<div class="characters">
<div class="character">
<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>
</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>
</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>
<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>
<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="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>
<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>
<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>
<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="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>
</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>
</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>
<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>
<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>
</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>
</div>
</div>
</div>
</body>
</html>