141 lines
3.5 KiB
Plaintext
141 lines
3.5 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Junk rare cube</title>
|
|
<style>
|
|
body {
|
|
background: #eee;
|
|
}
|
|
|
|
main {
|
|
background: white;
|
|
max-width: 1220px;
|
|
margin: 0 auto;
|
|
padding: 20pt;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
h2 {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.columns {
|
|
padding: 20pt 0;
|
|
display: flex;
|
|
}
|
|
|
|
.color-section {
|
|
flex: 1;
|
|
margin: 5px;
|
|
}
|
|
|
|
.color-section header {
|
|
text-align: center;
|
|
}
|
|
|
|
.color-W header.color-header {
|
|
background-color: #fff6eb;
|
|
}
|
|
|
|
.color-U header.color-header {
|
|
background-color: #49b0fd;
|
|
}
|
|
|
|
.color-B header.color-header {
|
|
background-color: #666;
|
|
color: white;
|
|
}
|
|
|
|
.color-R header.color-header {
|
|
background-color: #ff6868;
|
|
}
|
|
|
|
.color-G header.color-header {
|
|
background-color: #78ce59;
|
|
}
|
|
|
|
.color-MC header.color-header {
|
|
background: linear-gradient(to left, #f3ff6b, #ffb019);
|
|
}
|
|
|
|
.color-CL header.color-header {
|
|
background-color: #d2d2d2;
|
|
}
|
|
|
|
.color-L header.color-header {
|
|
background-color: #eeb445;
|
|
}
|
|
|
|
.type-section {
|
|
border: 1px solid #aaa;
|
|
border-radius: 5px;
|
|
font-size: 10pt;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.type-section header.type-header {
|
|
font-size: 12pt;
|
|
font-weight: bold;
|
|
border-bottom: 1px solid #ccc;
|
|
padding: 5px;
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style-type: none;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
ul li {
|
|
padding: 5px;
|
|
}
|
|
|
|
ul:last-child {
|
|
border-bottom: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<h1>Junk rare cube (<%=cards.length%> cards)</h1>
|
|
<h2>Using cards from <a href="https://www.cardmarket.com/en/Magic/Users/<%=user%>"><b><%= user %></b></a>
|
|
</h2>
|
|
</header>
|
|
<section class="columns">
|
|
<% Object.entries(cmccards).forEach(([color, colorcards]) => { %>
|
|
<section class="color-section color-<%=color%>">
|
|
<header class="color-header">
|
|
<h3><%=utils.prettyColor(color)%> (<%=utils.deepSum(colorcards)%>)</h3>
|
|
</header>
|
|
<% Object.entries(colorcards).sort((a, b) => color == "MC" || color == "L" ? utils.abcSort(a[0], b[0]) : utils.typeSort(a[0], b[0])).forEach(([type, typecards]) => { %>
|
|
<article class="type-section">
|
|
<header class="type-header"><%= color == "MC" || color == "L" ? utils.prettyColor(type) : type %>
|
|
(<%=utils.deepSum(typecards)%>)</header>
|
|
<section class="cards">
|
|
<% Object.entries(typecards).forEach(([cmc, finalcards]) => { %>
|
|
<ul>
|
|
<% finalcards.forEach(card => { %>
|
|
<li><%= card.name %></li>
|
|
<% }); %>
|
|
</ul>
|
|
<% }); %>
|
|
</section>
|
|
</article>
|
|
<% }); %>
|
|
</section>
|
|
<% }); %>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
|
|
</html> |