hantim/timothykim.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add tarot/planet/spectral pages, move balatro into balatro/
Build and Push Docker Image / build (push) Successful in 10s
Details

Browse Source
This commit is contained in:
Timothy Kim
2026-06-20 22:46:15 -04:00
parent dbeb311274
commit 4fcc8ba5ba
5 changed files with 830 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/balatro/spectral.html
+265
View File
@@ -0,0 +1,265 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Balatro Spectral</title>
<style>
:root{
--bg:#15171c; --bg2:#1d2027; --card:#252934; --line:#343a47;
--txt:#e8ebf2; --muted:#c3cad8; --accent:#76a6ff;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0; background:var(--bg); color:var(--txt);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
line-height:1.35; -webkit-font-smoothing:antialiased;
}
header{background:var(--bg); border-bottom:1px solid var(--line); padding:10px 12px}
.nav{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px}
.nav a{
font-size:12px; padding:6px 12px; border-radius:999px; text-decoration:none;
background:var(--bg2); border:1px solid var(--line); color:var(--muted);
}
.nav a.active{background:var(--accent); color:#15171c; border-color:transparent; font-weight:600}
.title{display:flex; align-items:baseline; gap:8px; margin:0 0 8px}
.title h1{font-size:18px; margin:0; letter-spacing:.3px}
.title .count{font-size:12px; color:var(--muted)}
.search{
width:100%; padding:9px 12px; font-size:16px; color:var(--txt);
background:var(--bg2); border:1px solid var(--line); border-radius:10px; outline:none;
}
.search:focus{border-color:#5566aa}
.search::-webkit-search-cancel-button{display:none}
main{padding:12px; max-width:1100px; margin:0 auto}
.grid{display:grid; gap:8px; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr))}
@media (max-width:520px){
.grid{grid-template-columns:repeat(3,1fr); gap:6px}
.card{padding:7px 5px 8px}
.card img{height:64px}
.name{font-size:12px}
.effect{font-size:11px}
}
.card{
display:flex; flex-direction:column; align-items:center; text-align:center;
background:var(--card); border:1px solid var(--line); border-radius:12px;
padding:9px 8px 10px; position:relative;
border-top:3px solid var(--accent); -webkit-tap-highlight-color:transparent;
}
.card[open]{background:#2c313e}
.card summary{
display:flex; flex-direction:column; align-items:center;
list-style:none; cursor:pointer; width:100%;
}
.card summary::-webkit-details-marker{display:none}
.card img{
width:auto; height:78px; image-rendering:pixelated;
filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));
}
.name{font-weight:600; font-size:13px; margin:6px 0 2px; line-height:1.2; min-height:2.4em}
.effect{font-size:11.5px; color:var(--muted); line-height:1.3; margin-top:6px}
.wiki{
margin-top:7px; font-size:11px; color:#69e6ff;
text-decoration:underline; text-underline-offset:2px; display:inline-block;
}
.card.nomatch{display:none}
@media (min-width:768px){
.grid{grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:14px}
.card{padding:14px 12px 16px}
.card img{width:142px; height:190px}
.name{font-size:15px}
.effect{font-size:13px}
}
.totop{
position:fixed; left:16px; bottom:calc(16px + env(safe-area-inset-bottom,0));
width:46px; height:46px; border-radius:50%; z-index:20;
background:rgba(37,41,52,.7);
border:1px solid var(--line); color:var(--txt); font-size:22px; line-height:46px;
text-align:center; text-decoration:none;
}
footer{text-align:center; color:var(--muted); font-size:11px; padding:18px 12px 30px}
footer a{color:var(--muted)}
.effect p{margin:0}
.effect b{font-weight:600}
.hl-chips,.hl-blue{color:#0093ff}
.hl-mult,.hl-red,.hl-xmult{color:#ff4c40}
.hl-cyan{color:#69e6ff}
.hl-gray,.hl-grey{color:#b1b1b1}
.hl-green{color:#35bd86}
.hl-orange{color:#ff8f00}
.hl-purple{color:#ca8cff}
.hl-sblue{color:#76a6ff}
.hl-yellow,.hl-edition{color:#f5b244}
.suit-diamond{color:#ffa300}
.suit-heart{color:#f83b2f}
.suit-spade{color:#8fb1b8}
.suit-club{color:#009cfd}
</style>
</head>
<body id="top">
<header>
<nav class="nav"><a href="/balatro/jokers.html">Jokers</a><a href="/balatro/tarot.html">Tarot</a><a href="/balatro/planet.html">Planet</a><a href="/balatro/spectral.html" class="active">Spectral</a></nav>
<div class="title"><h1>Balatro Spectral</h1><span class="count">18 spectral</span></div>
<input class="search" id="q" type="search" placeholder="Search name or effect..." autocomplete="off">
</header>
<main><div class="grid">
<details class="card" data-search="familiar destroy 1 random card in your hand, add 3 random enhanced face cards to your hand">
<summary>
<img loading="lazy" src="/media/balatro/images/Familiar.png" alt="Familiar" width="142" height="190">
<span class="name">Familiar</span>
</summary>
<div class="effect"><p>Destroy <span class="hl-orange">1</span> random card in your hand, add <span class="hl-orange">3</span> random <span class="hl-orange">Enhanced</span> <span class="hl-orange">face cards</span> to your hand</p></div>
<a class="wiki" href="https://balatrowiki.org/w/Familiar" target="_blank" rel="noopener">Wiki &#8599;</a>
</details>
<details class="card" data-search="grim destroy 1 random card in your hand, add 2 random enhanced aces to your hand">
<summary>
<img loading="lazy" src="/media/balatro/images/Grim.png" alt="Grim" width="142" height="190">
<span class="name">Grim</span>
</summary>
<div class="effect"><p>Destroy <span class="hl-orange">1</span> random card in your hand, add <span class="hl-orange">2</span> random <span class="hl-orange">Enhanced</span> <span class="hl-orange">Aces</span> to your hand</p></div>
<a class="wiki" href="https://balatrowiki.org/w/Grim" target="_blank" rel="noopener">Wiki &#8599;</a>
</details>
<details class="card" data-search="incantation destroy 1 random card in your hand, add 4 random enhanced numbered cards to your hand">
<summary>
<img loading="lazy" src="/media/balatro/images/Incantation.png" alt="Incantation" width="142" height="190">
<span class="name">Incantation</span>
</summary>
<div class="effect"><p>Destroy <span class="hl-orange">1</span> random card in your hand, add <span class="hl-orange">4</span> random <span class="hl-orange">Enhanced</span> <span class="hl-orange">numbered cards</span> to your hand</p></div>
<a class="wiki" href="https://balatrowiki.org/w/Incantation" target="_blank" rel="noopener">Wiki &#8599;</a>
</details>
<details class="card" data-search="talisman add a gold seal to 1 selected card in your hand">
<summary>
<img loading="lazy" src="/media/balatro/images/Talisman.png" alt="Talisman" width="142" height="190">
<span class="name">Talisman</span>
</summary>
<div class="effect"><p>Add a <span class="hl-orange">Gold Seal</span> to <span class="hl-orange">1</span> selected card in your hand</p></div>
<a class="wiki" href="https://balatrowiki.org/w/Talisman" target="_blank" rel="noopener">Wiki &#8599;</a>
</details>
<details class="card" data-search="aura add foil , holographic , or polychrome effect to 1 selected card in hand">
<summary>
<img loading="lazy" src="/media/balatro/images/Aura.png" alt="Aura" width="142" height="190">
<span class="name">Aura</span>
</summary>
<div class="effect"><p>Add <span class="hl-edition">Foil</span>, <span class="hl-edition">Holographic</span>, or <span class="hl-edition">Polychrome</span> effect to <span class="hl-orange">1</span> selected card in hand</p></div>
<a class="wiki" href="https://balatrowiki.org/w/Aura" target="_blank" rel="noopener">Wiki &#8599;</a>
</details>
<details class="card" data-search="wraith creates a random rare joker , sets money to $0">
<summary>
<img loading="lazy" src="/media/balatro/images/Wraith.png" alt="Wraith" width="142" height="190">
<span class="name">Wraith</span>
</summary>
<div class="effect"><p>Creates a random <span class="hl-red">Rare</span> <span class="hl-orange">Joker</span>, sets money to <b><span class="hl-yellow">$0</span></b></p></div>
<a class="wiki" href="https://balatrowiki.org/w/Wraith" target="_blank" rel="noopener">Wiki &#8599;</a>
</details>
<details class="card" data-search="sigil converts all cards in hand to a single random suit">
<summary>
<img loading="lazy" src="/media/balatro/images/Sigil.png" alt="Sigil" width="142" height="190">
<span class="name">Sigil</span>
</summary>
<div class="effect"><p>Converts all cards in hand to a single random <span class="hl-orange">suit</span></p></div>
<a class="wiki" href="https://balatrowiki.org/w/Sigil" target="_blank" rel="noopener">Wiki &#8599;</a>
</details>
<details class="card" data-search="ouija converts all cards in hand to a single random rank -1 hand size">
<summary>
<img loading="lazy" src="/media/balatro/images/Ouija.png" alt="Ouija" width="142" height="190">
<span class="name">Ouija</span>
</summary>
<div class="effect"><p>Converts all cards in hand to a single random <span class="hl-orange">rank</span><br><span class="hl-red">-1</span> hand size</p></div>
<a class="wiki" href="https://balatrowiki.org/w/Ouija" target="_blank" rel="noopener">Wiki &#8599;</a>
</details>
<details class="card" data-search="ectoplasm add negative to a random joker, -1 hand size">
<summary>
<img loading="lazy" src="/media/balatro/images/Ectoplasm.png" alt="Ectoplasm" width="142" height="190">
<span class="name">Ectoplasm</span>
</summary>
<div class="effect"><p>Add <span class="hl-edition">Negative</span> to a random <span class="hl-orange">Joker,</span> <span class="hl-red">-1</span> hand size</p></div>
<a class="wiki" href="https://balatrowiki.org/w/Ectoplasm" target="_blank" rel="noopener">Wiki &#8599;</a>
</details>
<details class="card" data-search="immolate destroys 5 random cards in hand, gain $20">
<summary>
<img loading="lazy" src="/media/balatro/images/Immolate.png" alt="Immolate" width="142" height="190">
<span class="name">Immolate</span>
</summary>
<div class="effect"><p>Destroys <span class="hl-orange">5</span> random cards in hand, gain <b><span class="hl-yellow">$20</span></b></p></div>
<a class="wiki" href="https://balatrowiki.org/w/Immolate" target="_blank" rel="noopener">Wiki &#8599;</a>
</details>
<details class="card" data-search="ankh create a copy of a random joker , destroy all other jokers (removes negative from copy)">
<summary>
<img loading="lazy" src="/media/balatro/images/Ankh.png" alt="Ankh" width="142" height="190">
<span class="name">Ankh</span>
</summary>
<div class="effect"><p>Create a copy of a random <span class="hl-orange">Joker</span>, destroy all other Jokers <br> <span class="hl-gray">(Removes <span class="hl-edition">Negative</span> from copy)</span></p></div>
<a class="wiki" href="https://balatrowiki.org/w/Ankh" target="_blank" rel="noopener">Wiki &#8599;</a>
</details>
<details class="card" data-search="deja vu add a red seal to 1 selected card in your hand">
<summary>
<img loading="lazy" src="/media/balatro/images/Deja_Vu.png" alt="Deja Vu" width="142" height="190">
<span class="name">Deja Vu</span>
</summary>
<div class="effect"><p>Add a <span class="hl-red">Red Seal</span> to <span class="hl-orange">1</span> selected card in your hand</p></div>
<a class="wiki" href="https://balatrowiki.org/w/Deja_Vu" target="_blank" rel="noopener">Wiki &#8599;</a>
</details>
<details class="card" data-search="hex add polychrome to a random joker , destroy all other jokers">
<summary>
<img loading="lazy" src="/media/balatro/images/Hex.png" alt="Hex" width="142" height="190">
<span class="name">Hex</span>
</summary>
<div class="effect"><p>Add <span class="hl-edition">Polychrome</span> to a random <span class="hl-orange">Joker</span>, destroy all other Jokers</p></div>
<a class="wiki" href="https://balatrowiki.org/w/Hex" target="_blank" rel="noopener">Wiki &#8599;</a>
</details>
<details class="card" data-search="trance add a blue seal to 1 selected card in your hand">
<summary>
<img loading="lazy" src="/media/balatro/images/Trance.png" alt="Trance" width="142" height="190">
<span class="name">Trance</span>
</summary>
<div class="effect"><p>Add a <span class="hl-blue">Blue Seal</span> to <span class="hl-orange">1</span> selected card in your hand</p></div>
<a class="wiki" href="https://balatrowiki.org/w/Trance" target="_blank" rel="noopener">Wiki &#8599;</a>
</details>
<details class="card" data-search="medium add a purple seal to 1 selected card in your hand">
<summary>
<img loading="lazy" src="/media/balatro/images/Medium.png" alt="Medium" width="142" height="190">
<span class="name">Medium</span>
</summary>
<div class="effect"><p>Add a <span class="hl-purple">Purple Seal</span> to <span class="hl-orange">1</span> selected card in your hand</p></div>
<a class="wiki" href="https://balatrowiki.org/w/Medium" target="_blank" rel="noopener">Wiki &#8599;</a>
</details>
<details class="card" data-search="cryptid create 2 copies of 1 selected card in your hand">
<summary>
<img loading="lazy" src="/media/balatro/images/Cryptid.png" alt="Cryptid" width="142" height="190">
<span class="name">Cryptid</span>
</summary>
<div class="effect"><p>Create <span class="hl-orange">2</span> copies of <span class="hl-orange">1</span> selected card in your hand</p></div>
<a class="wiki" href="https://balatrowiki.org/w/Cryptid" target="_blank" rel="noopener">Wiki &#8599;</a>
</details>
<details class="card" data-search="the soul creates a legendary joker (must have room)">
<summary>
<img loading="lazy" src="/media/balatro/images/The_Soul.png" alt="The Soul" width="142" height="190">
<span class="name">The Soul</span>
</summary>
<div class="effect"><p>Creates a <span class="hl-purple">Legendary</span> Joker <br> <span class="hl-gray">(Must have room)</span></p></div>
<a class="wiki" href="https://balatrowiki.org/w/The_Soul" target="_blank" rel="noopener">Wiki &#8599;</a>
</details>
<details class="card" data-search="black hole upgrade every poker hand by 1 level">
<summary>
<img loading="lazy" src="/media/balatro/images/Black_Hole.png" alt="Black Hole" width="142" height="190">
<span class="name">Black Hole</span>
</summary>
<div class="effect"><p>Upgrade every <span class="hl-purple">poker hand</span> by <span class="hl-orange">1</span> level</p></div>
<a class="wiki" href="https://balatrowiki.org/w/Black_Hole" target="_blank" rel="noopener">Wiki &#8599;</a>
</details>
</div></main>
<footer>Data &amp; art from <a href="https://balatrowiki.org/" target="_blank" rel="noopener">balatrowiki.org</a> &middot; tap a card for full details</footer>
<a class="totop" href="#top" aria-label="Scroll to top" title="Back to top">&uarr;</a>
<script>
// Only behaviour CSS can't do: live text search across the cards.
const cards = document.querySelectorAll('.card');
document.getElementById('q').addEventListener('input', e => {
const v = e.target.value.trim().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
cards.forEach(c => c.classList.toggle('nomatch', v && !c.dataset.search.includes(v)));
});
</script>
</body>
</html>