Simple Tarot Card Pull in HTML CSS JS

Get 1000000 0FP0EXP Token to remove widget entirely!



source code
old source code

get any 0FP0EXP Token to automatically turn off or 100000 0FP0EXP Token to remove this JavaScript Mining.

Get 500000 0FP0EXP Token to remove my NFTS advertisements!

Get 400000 0FP0EXP Token to remove this donation notification!

get 300000 0FP0EXP Token to remove this paypal donation.

View My Stats

Need referral links?

get 200000 0FP0EXP Token to remove my personal ADS.

word number: 4323

Time: 2026-01-18 21:19:23 +0800

Reference

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tarot Table with Log</title>
    <style>
        :root {
            --card-width: 100px;
            --card-height: 170px; 
            --bg-color: #1a1a1a;
            --card-back-pattern: repeating-linear-gradient(45deg, #2c3e50, #2c3e50 10px, #34495e 10px, #34495e 20px);
            --accent-color: #f1c40f;
            --panel-bg: #262626;
        }

        body {
            font-family: 'Georgia', serif;
            background-color: var(--bg-color);
            color: #ecf0f1;
            margin: 0;
            padding: 20px;
        }

        /* --- STICKY DASHBOARD --- */
        .dashboard {
            position: sticky;
            top: 10px;
            z-index: 1000;
            background-color: var(--panel-bg);
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.8);
            max-width: 800px;
            margin: 0 auto 30px auto;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .controls {
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        /* --- THE LOG AREA --- */
        .log-container {
            width: 100%;
        }

        #reading-log {
            width: 100%;
            height: 80px;
            background: #111;
            color: var(--accent-color);
            border: 1px solid #444;
            border-radius: 6px;
            padding: 10px;
            font-family: 'Courier New', monospace;
            resize: none;
            box-sizing: border-box;
        }

        button {
            background-color: var(--accent-color);
            border: none;
            padding: 10px 20px;
            font-size: 0.9rem;
            cursor: pointer;
            border-radius: 6px;
            color: #1a1a1a;
            font-weight: 800;
            transition: all 0.2s;
        }

        button.secondary {
            background-color: #444;
            color: white;
        }

        button:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }

        /* --- THE GRID LAYOUT --- */
        .card-spread {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
            gap: 15px;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            perspective: 1000px;
        }

        /* --- CARD STYLES --- */
        .card {
            height: var(--card-height);
            border-radius: 8px;
            cursor: pointer;
            position: relative;
            transition: transform 0.6s;
            transform-style: preserve-3d;
            box-shadow: 0 4px 8px rgba(0,0,0,0.5);
        }

        .card.flipped {
            transform: rotateY(180deg);
            cursor: default;
        }

        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 8px;
            overflow: hidden;
            border: 2px solid #34495e;
            box-sizing: border-box;
        }

        .card-back { background: var(--card-back-pattern); }

        .card-front {
            background-color: #fff;
            color: #222;
            transform: rotateY(180deg);
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .card-text { display: none; padding: 10px; font-size: 0.8rem; font-weight: bold; }

        /* Fallback */
        .card-front.image-failed .card-img { display: none; }
        .card-front.image-failed .card-text { display: block; }

    </style>
</head>
<body>

    <div class="dashboard">
        <div class="log-container">
            <textarea id="reading-log" readonly placeholder="Your drawn cards will appear here..."></textarea>
        </div>
        <div class="controls">
            <button onclick="initTable()">Reshuffle Deck</button>
            <button class="secondary" onclick="copyLog()">Copy Reading</button>
            <button class="secondary" onclick="clearLog()">Clear Log</button>
        </div>
    </div>

    <div class="card-spread" id="spread"></div>

<script>
    const tarotDeck = [
        { name: "The Fool", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/RWS_Tarot_00_Fool.jpg/500px-RWS_Tarot_00_Fool.jpg" }, { name: "The Magician", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/RWS_Tarot_01_Magician.jpg/500px-RWS_Tarot_01_Magician.jpg" }, { name: "The High Priestess", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/RWS_Tarot_02_High_Priestess.jpg/500px-RWS_Tarot_02_High_Priestess.jpg" }, { name: "The Empress", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/RWS_Tarot_03_Empress.jpg/500px-RWS_Tarot_03_Empress.jpg" },
        { name: "The Emperor", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/RWS_Tarot_04_Emperor.jpg/500px-RWS_Tarot_04_Emperor.jpg" }, { name: "The Hierophant", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/RWS_Tarot_05_Hierophant.jpg/500px-RWS_Tarot_05_Hierophant.jpg" }, { name: "The Lovers", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/RWS_Tarot_06_Lovers.jpg/500px-RWS_Tarot_06_Lovers.jpg" }, { name: "The Chariot", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/RWS_Tarot_07_Chariot.jpg/500px-RWS_Tarot_07_Chariot.jpg" },
        { name: "Strength", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/RWS_Tarot_08_Strength.jpg/500px-RWS_Tarot_08_Strength.jpg" }, { name: "The Hermit", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/RWS_Tarot_09_Hermit.jpg/500px-RWS_Tarot_09_Hermit.jpg" }, { name: "Wheel of Fortune", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/RWS_Tarot_10_Wheel_of_Fortune.jpg/500px-RWS_Tarot_10_Wheel_of_Fortune.jpg" }, { name: "Justice", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/RWS_Tarot_11_Justice.jpg/500px-RWS_Tarot_11_Justice.jpg" },
        { name: "The Hanged Man", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/RWS_Tarot_12_Hanged_Man.jpg/500px-RWS_Tarot_12_Hanged_Man.jpg" }, { name: "Death", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/RWS_Tarot_13_Death.jpg/500px-RWS_Tarot_13_Death.jpg" }, { name: "Temperance", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/RWS_Tarot_14_Temperance.jpg/500px-RWS_Tarot_14_Temperance.jpg" }, { name: "The Devil", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/RWS_Tarot_15_Devil.jpg/500px-RWS_Tarot_15_Devil.jpg" },
        { name: "The Tower", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/RWS_Tarot_16_Tower.jpg/500px-RWS_Tarot_16_Tower.jpg" }, { name: "The Star", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/RWS_Tarot_17_Star.jpg/500px-RWS_Tarot_17_Star.jpg" }, { name: "The Moon", img: "https://upload.wikimedia.org/wikipedia/commons/a/af/Major_18.jpg" }, { name: "The Sun", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/RWS_Tarot_19_Sun.jpg/500px-RWS_Tarot_19_Sun.jpg" },
        { name: "Judgement", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/RWS_Tarot_20_Judgement.jpg/500px-RWS_Tarot_20_Judgement.jpg" }, { name: "The World", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/RWS_Tarot_21_World.jpg/500px-RWS_Tarot_21_World.jpg" },
        { name: "Ace of Wands", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Wands01.jpg/500px-Wands01.jpg" }, { name: "Two of Wands", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Wands02.jpg/500px-Wands02.jpg" }, { name: "Three of Wands", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Wands03.jpg/500px-Wands03.jpg" }, { name: "Four of Wands", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Wands04.jpg/500px-Wands04.jpg" },
        { name: "Five of Wands", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Wands05.jpg/500px-Wands05.jpg" }, { name: "Six of Wands", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Wands06.jpg/500px-Wands06.jpg" }, { name: "Seven of Wands", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Wands07.jpg/500px-Wands07.jpg" }, { name: "Eight of Wands", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Wands08.jpg/500px-Wands08.jpg" },
        { name: "Nine of Wands", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Tarot_Nine_of_Wands.jpg/500px-Tarot_Nine_of_Wands.jpg" }, { name: "Ten of Wands", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Wands10.jpg/500px-Wands10.jpg" }, { name: "Page of Wands", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Wands11.jpg/500px-Wands11.jpg" }, { name: "Knight of Wands", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Wands12.jpg/500px-Wands12.jpg" },
        { name: "Queen of Wands", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Wands13.jpg/500px-Wands13.jpg" }, { name: "King of Wands", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Wands14.jpg/500px-Wands14.jpg" },
        { name: "Ace of Cups", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Cups01.jpg/500px-Cups01.jpg" }, { name: "Two of Cups", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Cups02.jpg/500px-Cups02.jpg" }, { name: "Three of Cups", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Cups03.jpg/500px-Cups03.jpg" }, { name: "Four of Cups", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Cups04.jpg/500px-Cups04.jpg" },
        { name: "Five of Cups", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Cups05.jpg/500px-Cups05.jpg" }, { name: "Six of Cups", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Cups06.jpg/500px-Cups06.jpg" }, { name: "Seven of Cups", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Cups07.jpg/500px-Cups07.jpg" }, { name: "Eight of Cups", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cups08.jpg/500px-Cups08.jpg" },
        { name: "Nine of Cups", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Cups09.jpg/500px-Cups09.jpg" }, { name: "Ten of Cups", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Cups10.jpg/500px-Cups10.jpg" }, { name: "Page of Cups", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Cups11.jpg/500px-Cups11.jpg" }, { name: "Knight of Cups", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Cups12.jpg/500px-Cups12.jpg" },
        { name: "Queen of Cups", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Cups13.jpg/500px-Cups13.jpg" }, { name: "King of Cups", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Cups14.jpg/500px-Cups14.jpg" },
        { name: "Ace of Swords", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Swords01.jpg/500px-Swords01.jpg" }, { name: "Two of Swords", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Swords02.jpg/500px-Swords02.jpg" }, { name: "Three of Swords", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Swords03.jpg/500px-Swords03.jpg" }, { name: "Four of Swords", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Swords04.jpg/500px-Swords04.jpg" },
        { name: "Five of Swords", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Swords05.jpg/500px-Swords05.jpg" }, { name: "Six of Swords", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Swords06.jpg/500px-Swords06.jpg" }, { name: "Seven of Swords", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Swords07.jpg/500px-Swords07.jpg" }, { name: "Eight of Swords", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Swords08.jpg/500px-Swords08.jpg" },
        { name: "Nine of Swords", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Swords09.jpg/500px-Swords09.jpg" }, { name: "Ten of Swords", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Swords10.jpg/500px-Swords10.jpg" }, { name: "Page of Swords", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Swords11.jpg/500px-Swords11.jpg" }, { name: "Knight of Swords", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Swords12.jpg/500px-Swords12.jpg" },
        { name: "Queen of Swords", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Swords13.jpg/500px-Swords13.jpg" }, { name: "King of Swords", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Swords14.jpg/500px-Swords14.jpg" },
        { name: "Ace of Pentacles", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Pents01.jpg/500px-Pents01.jpg" }, { name: "Two of Pentacles", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Pents02.jpg/500px-Pents02.jpg" }, { name: "Three of Pentacles", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Pents03.jpg/500px-Pents03.jpg" }, { name: "Four of Pentacles", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Pents04.jpg/500px-Pents04.jpg" },
        { name: "Five of Pentacles", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Pents05.jpg/500px-Pents05.jpg" }, { name: "Six of Pentacles", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Pents06.jpg/500px-Pents06.jpg" }, { name: "Seven of Pentacles", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Pents07.jpg/500px-Pents07.jpg" }, { name: "Eight of Pentacles", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Pents08.jpg/500px-Pents08.jpg" },
        { name: "Nine of Pentacles", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/Pents09.jpg/500px-Pents09.jpg" }, { name: "Ten of Pentacles", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Pents10.jpg/500px-Pents10.jpg" }, { name: "Page of Pentacles", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Pents11.jpg/500px-Pents11.jpg" }, { name: "Knight of Pentacles", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Pents12.jpg/500px-Pents12.jpg" },
        { name: "Queen of Pentacles", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/Pents13.jpg/500px-Pents13.jpg" }, { name: "King of Pentacles", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Pents14.jpg/500px-Pents14.jpg" }
    ];

    const spreadContainer = document.getElementById('spread');
    const logArea = document.getElementById('reading-log');

    function shuffle(array) {
        let currentIndex = array.length, randomIndex;
        while (currentIndex != 0) {
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex--;
            [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
        }
        return array;
    }

    function initTable() {
        spreadContainer.innerHTML = '';
        const shuffledDeck = shuffle([...tarotDeck]);

        shuffledDeck.forEach(cardData => {
            const cardEl = document.createElement('div');
            cardEl.classList.add('card');
            
            cardEl.innerHTML = `
                <div class="card-face card-back"></div>
                <div class="card-face card-front">
                    <img src="${cardData.img}" alt="${cardData.name}" class="card-img">
                    <h3 class="card-text">${cardData.name}</h3>
                </div>
            `;

            cardEl.addEventListener('click', function() {
                // If it's already flipped, don't do anything
                if (this.classList.contains('flipped')) return;

                this.classList.add('flipped');
                
                // Add to the log
                appendToLog(cardData.name);
            });

            // Error fallback for images
            const imgElement = cardEl.querySelector('.card-img');
            imgElement.addEventListener('error', function() {
                this.closest('.card-front').classList.add('image-failed');
            });

            spreadContainer.appendChild(cardEl);
        });
    }

    function appendToLog(name) {
        // Add name and a newline
        logArea.value += name + "\n";
        // Auto-scroll to the bottom of the log
        logArea.scrollTop = logArea.scrollHeight;
    }

    function clearLog() {
        logArea.value = "";
    }

    function copyLog() {
        if (logArea.value === "") return;
        
        logArea.select();
        document.execCommand('copy');
        alert("Reading copied to clipboard!");
    }

    initTable();
</script>
</body>
</html>