PaiGram/resources/genshin/daily_material/example.html
SiHuaN 6e8f29786e
Add talent levels to daily materials
Co-authored-by: kotoriのねこ <minamiktr@outlook.com>
2022-10-28 23:36:59 +08:00

399 lines
21 KiB
HTML

<!DOCTYPE html>
<!--suppress HtmlUnknownTag, SpellCheckingInspection -->
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>每日素材</title>
<link type="text/css" href="./style.css" rel="stylesheet"/>
</head>
<body>
<main class="container">
<div class="title">今日素材表</div>
<div class="user-info">
<span>UID: 100206192</span>
<span>09-15 01:05 星期四</span>
</div>
<hr/>
<div class="box">
<div class="title">角色培养素材</div>
<div class="area">
<div class="area-head">
<span class="area-name">
<img src="./bg/area/0.png" alt="蒙德"/>
<div>蒙德</div>
</span>
<span class="material-name">
自由
</span>
<span class="materials">
<div class="material">
<div class="material-icon" style="background-image: url(../../background/rarity/half/2.png)">
<img alt="" src="../../assets/material/114003/icon.png"/>
</div>
<div class="material-star">
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
</div>
</div>
<div class="material">
<div class="material-icon" style="background-image: url(../../background/rarity/half/3.png)">
<img alt="" src="../../assets/material/114003/icon.png"/>
</div>
<div class="material-star">
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
</div>
</div>
<div class="material">
<div class="material-icon" style="background-image: url(../../background/rarity/half/4.png)">
<img alt="" src="../../assets/material/114003/icon.png"/>
</div>
<div class="material-star">
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
</div>
</div>
<div class="material">
<div class="material-icon" style="background-image: url(../../background/rarity/half/5.png)">
<img alt="" src="../../assets/material/114003/icon.png"/>
</div>
<div class="material-star">
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
</div>
</div>
</span>
</div>
<div class="area-content">
<div class="item character item-not-owned">
<div class="item-icon" style="background-image: url(../../background/rarity/full/5.png)">
<div>Lv.90</div>
<div style="background-color: rgba(255, 20, 147, 0.8); backdrop-filter: blur(3px);">6命</div>
<img src="../../assets/avatar/10000058/icon.png" alt="八重神子"/>
<div class="item-icon-character-talent">
<span>10/10/10</span>
</div>
</div>
<div class="item-name">
<div>八重神子</div>
</div>
</div>
<div class="item character">
<div class="item-icon" style="background-image: url(../../background/rarity/full/5.png)">
<div>Lv.90</div>
<div style="background-color: rgba(255, 20, 147, 0.8); backdrop-filter: blur(3px);">6命</div>
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
<div class="item-icon-character-talent">
<span>10/10/10</span>
</div>
</div>
<div class="item-name">
<div>神里绫华</div>
</div>
</div>
<div class="item character">
<div class="item-icon" style="background-image: url(../../background/rarity/full/5.png)">
<div>Lv.90</div>
<div style="background-color: rgba(255, 20, 147, 0.8); backdrop-filter: blur(3px);">6命</div>
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
<div class="item-icon-character-talent">
<span>10/10/10</span>
</div>
</div>
<div class="item-name">
<div>神里绫华</div>
</div>
</div>
<div class="item character">
<div class="item-icon" style="background-image: url(../../background/rarity/full/5.png)">
<div>Lv.90</div>
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
<div class="item-icon-character-talent">
<span>10/10/10</span>
</div>
</div>
<div class="item-name">
<div>神里绫华</div>
</div>
</div>
<div class="item character">
<div class="item-icon" style="background-image: url(../../background/rarity/full/5.png)">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="item-name">
<div>神里绫华</div>
</div>
</div>
<div class="item character">
<div class="item-icon" style="background-image: url(../../background/rarity/full/5.png)">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="item-name">
<div>神里绫华</div>
</div>
</div>
</div>
</div>
<div class="area">
<div class="area-head">
<span class="area-name">
<img src="./bg/area/0.png" alt="蒙德"/>
<div>蒙德</div>
</span>
<span class="material-name">
自由
</span>
<span class="materials">
<div class="material">
<div class="material-icon" style="background-image: url(../../background/rarity/half/2.png)">
<img alt="" src="../../assets/material/114003/icon.png"/>
</div>
<div class="material-star">
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
</div>
</div>
<div class="material">
<div class="material-icon" style="background-image: url(../../background/rarity/half/3.png)">
<img alt="" src="../../assets/material/114003/icon.png"/>
</div>
<div class="material-star">
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
</div>
</div>
<div class="material">
<div class="material-icon" style="background-image: url(../../background/rarity/half/4.png)">
<img alt="" src="../../assets/material/114003/icon.png"/>
</div>
<div class="material-star">
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
</div>
</div>
<div class="material">
<div class="material-icon" style="background-image: url(../../background/rarity/half/5.png)">
<img alt="" src="../../assets/material/114003/icon.png"/>
</div>
<div class="material-star">
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
</div>
</div>
</span>
</div>
<div class="area-content">
<div class="item character">
<div class="item-icon" style="background-image: url(../../background/rarity/full/5.png)">
<div>Lv.90</div>
<div style="background-color: rgba(255, 20, 147, 0.8); backdrop-filter: blur(3px);">6命</div>
<img src="../../assets/avatar/10000058/icon.png" alt="神里绫华"/>
<div class="item-icon-character-talent">
<span>10/10/10</span>
</div>
</div>
<div class="item-name">
<div>神里绫华</div>
</div>
</div>
<div class="item character">
<div class="item-icon" style="background-image: url(../../background/rarity/full/5.png)">
<div>Lv.90</div>
<div style="background-color: rgba(255, 20, 147, 0.8); backdrop-filter: blur(3px);">6命</div>
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
<div class="item-icon-character-talent">
<span>10/10/10</span>
</div>
</div>
<div class="item-name">
<div>神里绫华</div>
</div>
</div>
<div class="item character">
<div class="item-icon" style="background-image: url(../../background/rarity/full/5.png)">
<div>Lv.90</div>
<div style="background-color: rgba(255, 20, 147, 0.8); backdrop-filter: blur(3px);">6命</div>
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
<div class="item-icon-character-talent">
<span>10/10/10</span>
</div>
</div>
<div class="item-name">
<div>神里绫华</div>
</div>
</div>
<div class="item character">
<div class="item-icon" style="background-image: url(../../background/rarity/full/5.png)">
<div>Lv.90</div>
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
<div class="item-icon-character-talent">
<span>10/10/10</span>
</div>
</div>
<div class="item-name">
<div>神里绫华</div>
</div>
</div>
<div class="item character">
<div class="item-icon" style="background-image: url(../../background/rarity/full/5.png)">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="item-name">
<div>神里绫华</div>
</div>
</div>
<div class="item character">
<div class="item-icon" style="background-image: url(../../background/rarity/full/5.png)">
<img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
</div>
<div class="item-name">
<div>神里绫华</div>
</div>
</div>
</div>
</div>
</div>
<hr/>
<div class="box">
<div class="title">武器培养素材</div>
<div class="area">
<div class="area-head">
<span class="area-name">
<img src="./bg/area/2.png" alt="稻妻"/>
<div>稻妻</div>
</span>
<span class="material-name">
雾海云间
</span>
<span class="materials">
<div class="material">
<div class="material-icon" style="background-image: url(../../background/rarity/half/2.png)">
<img alt="" src="../../assets/material/114003/icon.png"/>
</div>
<div class="material-star">
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
</div>
</div>
<div class="material">
<div class="material-icon" style="background-image: url(../../background/rarity/half/3.png)">
<img alt="" src="../../assets/material/114003/icon.png"/>
</div>
<div class="material-star">
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
</div>
</div>
<div class="material">
<div class="material-icon" style="background-image: url(../../background/rarity/half/4.png)">
<img alt="" src="../../assets/material/114003/icon.png"/>
</div>
<div class="material-star">
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
</div>
</div>
<div class="material">
<div class="material-icon" style="background-image: url(../../background/rarity/half/5.png)">
<img alt="" src="../../assets/material/114003/icon.png"/>
</div>
<div class="material-star">
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
<img alt="star" src="../../background/rarity/star.webp"/>
</div>
</div>
</span>
</div>
<div class="area-content">
<div class="item weapon item-not-owned">
<div class="role">
<img src="../../assets/avatar/10000063/side.png" alt="申鹤"/>
</div>
<div class="item-icon" style="background-image: url(../../background/rarity/full/5.png)">
<div>Lv.90</div>
<div style="background-color: deepskyblue">精炼5</div>
<img src="../../assets/weapon/14501/awaken.png" alt="天空之刃"/>
</div>
<div class="item-name">
<div>天空之刃</div>
</div>
</div>
<div class="item weapon">
<div class="role">
<img src="../../assets/avatar/10000041/side.png" alt="神里绫华"/>
</div>
<div class="item-icon" style="background-image: url(../../background/rarity/full/5.png)">
<div>Lv.90</div>
<div style="background-color: deepskyblue">精炼5</div>
<img src="../../assets/weapon/14502/awaken.png" alt="天空之刃"/>
</div>
<div class="item-name">
<div>天空之刃</div>
</div>
</div>
<div class="item weapon">
<div class="role">
<img src="../../assets/avatar/10000067/side.png" alt="神里绫华"/>
</div>
<div class="item-icon" style="background-image: url(../../background/rarity/full/5.png)">
<div>Lv.90</div>
<div style="background-color: deepskyblue">精炼5</div>
<img src="../../assets/weapon/14502/awaken.png" alt="天空之刃"/>
</div>
<div class="item-name">
<div>天空之刃</div>
</div>
</div>
<div class="item weapon">
<div class="role">
<img src="../../assets/avatar/10000002/side.png" alt="神里绫华"/>
</div>
<div class="item-icon" style="background-image: url(../../background/rarity/full/5.png)">
<div>Lv.90</div>
<div style="background-color: deepskyblue">精炼5</div>
<img src="../../assets/weapon/14502/awaken.png" alt="天空之刃"/>
</div>
<div class="item-name">
<div>天空之刃</div>
</div>
</div>
<div class="item weapon">
<div class="item-icon" style="background-image: url(../../background/rarity/full/5.png)">
<img src="../../assets/weapon/14502/awaken.png" alt="天空之刃"/>
</div>
<div class="item-name">
<div>天空之刃</div>
</div>
</div>
<div class="item weapon">
<div class="item-icon" style="background-image: url(../../background/rarity/full/5.png)">
<img src="../../assets/weapon/14502/awaken.png" alt="天空之刃"/>
</div>
<div class="item-name">
<div>天空之刃</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>