Grasscutter/data/gacha_details.html
2022-05-11 12:02:45 -07:00

122 lines
4.3 KiB
HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<style>
body {
background-color: #f0f0f0;
}
p {
font-weight:300;
}
a,a:hover {
text-decoration:none !important;
color:#626976;
}
.content {
padding:3rem 0;
}
.container {
color:#626976;
position: relative;
}
h2 {
font-size:20px;
}
h3 {
font-size:16px;
}
</style>
<title>Banner Details</title>
<script type="text/javascript" src="/gacha/mappings"></script>
</head>
<body>
<div class="content">
<div class="container">
<h2 class="mb-5">{{TITLE}}</h2>
<h3 class="">{{AVAILABLE_FIVE_STARS}}</h3>
<hr />
<ul id="5-star-list">
</ul>
<h3 class="">{{AVAILABLE_FOUR_STARS}}</h3>
<hr />
<ul id="4-star-list">
</ul>
<h3 class="">{{AVAILABLE_THREE_STARS}}</h3>
<hr />
<ul id="3-star-list">
</ul>
</div>
</div>
<footer>
<div class="copyright">
<div class="container">
<div class="row">
<div class="col-md-6">
<span>
Template by BecodReyes. All rights reserved.
</span>
</div>
<div class="col-md-6">
<ul style="float:right">
<li class="list-inline-item">
<a href="https://github.com/Grasscutters/Grasscutter">Github</a>
</li>
<li class="list-inline-item">·</li>
<li class="list-inline-item">
<a href="https://github.com/Grasscutters/Grasscutter/blob/stable/LICENSE">License</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<script>
fiveStarItems = {{FIVE_STARS}};
fourStarItems = {{FOUR_STARS}};
threeStarItems = {{THREE_STARS}};
var lang = new window.URLSearchParams(window.location.search).get("lang");
function getNameForId(itemId) {
if (mappings[lang] != null && mappings[lang][itemId] != null) {
return mappings[lang][itemId][0];
}
else if (mappings["en-us"] != null && mappings["en-us"][itemId] != null) {
return mappings["en-us"][itemId][0];
}
return itemId.toString();
}
fiveStarList = document.getElementById("5-star-list");
fourStarList = document.getElementById("4-star-list");
threeStarList = document.getElementById("3-star-list");
fiveStarItems.forEach(element => {
var entry = document.createElement("li");
entry.innerHTML = getNameForId(element);
fiveStarList.appendChild(entry);
});
fourStarItems.forEach(element => {
var entry = document.createElement("li");
entry.innerHTML = getNameForId(element);
fourStarList.appendChild(entry);
});
threeStarItems.forEach(element => {
var entry = document.createElement("li");
entry.innerHTML = getNameForId(element);
threeStarList.appendChild(entry);
});
</script>
</body>
</html>