92 lines
1.8 KiB
Plaintext
92 lines
1.8 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Junk rare cube</title>
|
|
<style>
|
|
body {
|
|
background: #eee;
|
|
}
|
|
|
|
main {
|
|
background: white;
|
|
max-width: 920px;
|
|
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;
|
|
}
|
|
|
|
.color-section header {
|
|
text-align: center;
|
|
}
|
|
|
|
.color-W header {
|
|
background-color: #fff6eb;
|
|
}
|
|
|
|
.color-U header {
|
|
background-color: #49b0fd;
|
|
}
|
|
|
|
.color-B header {
|
|
background-color: #666;
|
|
color: white;
|
|
}
|
|
|
|
.color-R header {
|
|
background-color: #ff6868;
|
|
}
|
|
|
|
.color-G header {
|
|
background-color: #78ce59;
|
|
}
|
|
|
|
.color-MC header {
|
|
background: linear-gradient(to left, #f3ff6b, #ffb019);
|
|
}
|
|
|
|
.color-CL header {
|
|
background-color: #d2d2d2;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<h1>Junk rare cube</h1>
|
|
<h2>Using cards from <a href="https://www.cardmarket.com/en/Magic/Users/<%=user%>"><b><%= user %></b></a>
|
|
</h2>
|
|
</header>
|
|
<section class="columns">
|
|
<% for (const column in columns) { %>
|
|
<section class="color-section color-<%=column%>">
|
|
<header>
|
|
<h3><%=utils.colorNames[column]%></h3>
|
|
</header>
|
|
</section>
|
|
<% } %>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
|
|
</html> |