mirror of
https://github.com/Grasscutters/Grasscutter.git
synced 2025-12-14 16:04:40 +01:00
Add gacha details page.
This commit is contained in:
121
data/gacha_details.html
Normal file
121
data/gacha_details.html
Normal file
@@ -0,0 +1,121 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user