<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tarot Card Simulation</title>
    <link href="https://fonts.googleapis.com/css2?family=Luxurious+Roman&display=swap" rel="stylesheet">
    <style>
        body {
            background-color: #eeeeee;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            font-family: "Luxurious Roman", serif;
        }
        #tarot-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
        }
        .card {
            width: 150px;
            height: 250px;
            background-color: #fff;
            border: 2px solid #333;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            position: relative;
            perspective: 1000px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            transition: transform 1s ease;
            text-align: center;
            font-size: 14px;
            color: #333;
			background-image:url(tarot/bos.jpg)
        }
        .card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 1s ease;
        }
        .card.reversed img {
            transform: rotateZ(180deg);
        }
        .card-info {
            position: absolute;
            bottom: 10px;
            width: 100%;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            padding: 5px;
            box-sizing: border-box;
        }
        #controls {
            margin-top: -10px;
        }
        textarea {
            width: 600px;
            height: 300px;
            border: 1px solid #333;
            padding: 10px;
            background-color: #fff;
            font-family: "Luxurious Roman", serif;
            font-size: 16px;
            margin-top: 20px;
            display: block;
        }
        select, input[type="range"] {
            margin: 5px;
        }
        #speech-controls {
            display: none;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body><h2>subscribe youtube.com/@orbisounds </h2>
    <div id="tarot-container">
        <div class="card" id="card1">
            <img src="tarot/bos.jpg" alt="Card Image">
            <div class="card-info" id="info1"></div>
        </div>
        <div class="card" id="card2">
            <img src="tarot/bos.jpg" alt="Card Image">
            <div class="card-info" id="info2"></div>
        </div>
        <div class="card" id="card3">
            <img src="tarot/bos.jpg" alt="Card Image">
            <div class="card-info" id="info3"></div>
        </div>
    </div>

<div id="controls">
        <button onclick="randomizeCards()">Randomize Cards</button>
    
    </div>

selectedCards = [];

cardElements.forEach((card, index) => {
                const randomCard = cards[Math.floor(Math.random() * cards.length)];
                const isReversed = Math.random() > 0.5;
                const cardImage = card.querySelector('img');
                const infoDiv = document.getElementById(`info${index + 1}`);

cardImage.src = randomCard.image;
                card.classList.toggle('reversed', isReversed);

const combinationId = selectedCards.map((_, index) => `Card${index + 1}${selectedCards[index].isReversed ? 'r' : 'u'}`).join('-');
            const fullText = [
                ...details,
                '',
                ...interpretations,
                '',
                'Final Interpretation:',
                `This combination suggests that ${interpretations.join(', ')}. Combination ID: ${combinationId}`
            ].join('\n');

document.getElementById('details').value = fullText;
        }

function showReady() {
            document.querySelectorAll('.card img').forEach(img => img.src = ''); // Hide the image temporarily
            document.getElementById('details').classList.add('hidden'); // Hide textarea
            document.getElementById('tarot-container').classList.add('hidden'); // Hide tarot container
             
        }
 
       
 
    </script>
</body>
</html>

About THIS CODE (CANVASOR.NET):