mb/tarot-cartes
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

init

Browse source
This commit is contained in:
JOLIMAITRE Matthieu 2024-02-04 17:30:56 +01:00
commit adc618f153
31 changed files with 769 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

72
models/base/card.html Normal file
View file

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../card-format.css">
<title>Card</title>
<script src="../colorize.js"></script>
<script> const card = { "num": 1, "suite": 'heart' }; </script>
</head>
<body>
<div id="card">
<div id="top">
<div style="margin: 1rem; margin-left: 0.6rem; display: grid;">
<div style="display: grid; width: 1.8rem; grid-template-columns: auto; place-items: center;">
<h1 style="margin: 0;"></h1>
<img id="suite-icon" style="width: 20px;">
</div>
</div>
</div>
<style>
img {
filter: var(--color-mask-filters);
}
#suite {
position: fixed;
display: grid;
place-items: center;
width: 70mm;
height: 121mm;
}
#suite img {
margin: 0.8rem;
}
.suite-column {
display: grid;
place-items: center;
margin: -0.5rem;
rotate: 0.5turn;
}
#suite img:nth-child(2n) {
rotate: 0.5turn;
}
.suite-column:nth-child(2) {
rotate: 0turn;
}
.suite-column:nth-child(2) img:nth-child(2n) {
rotate: 0;
}
</style>
<div id="suite">
<img style="width: 40px;">
<div style="display: grid; grid-template-columns: auto auto auto; place-items: center;">
<div class="suite-column"></div>
<div class="suite-column"></div>
<div class="suite-column"></div>
</div>
</div>
<script src="../suite.js"></script>
</div>
<script src="../reverse.js"></script>
</body>
</html>