/* Start custom CSS */<!-- 放置於頁面內容部分，不要放在 header -->
<div id="content-container" style="text-align: center; margin-bottom: 20px;">
    <div id="card-container" style="margin-bottom: 20px; max-width: 800px; margin: 0 auto;">
        <img id="card-image" src="https://apafu.com/wp-content/uploads/2024/10/開開心心-幸福永遠跟著你.jpg" alt="禱告神，並點選圖片" style="max-width: 100%; height: auto; margin-bottom: 10px;">
        <p id="card-text" style="font-size: 18px; font-weight: bold;">靜下心來禱告神<br>確認後點祝福卡</p>
    </div>
    
    <!-- 按鈕區域 -->
    <div style="text-align: center; margin-top: 20px;">
        <button id="draw-button" onclick="drawRandomCard()" style="padding: 10px 30px; font-size: 18px; background-color: #D69DAF; color: white; border: none; border-radius: 2px; cursor: pointer;">
            點取祝福卡
        </button>
    </div>
</div>

<script>
    function drawRandomCard() {
        // 設定圖片和文字的對應陣列
        var cards = [
            {
                img: "https://apafu.com/wp-content/uploads/2024/10/當信主耶穌你和你一家都必得救－正方.png",
                text: "當信主耶穌，你和你一家都必得救。"
            },
            {
                img: "https://apafu.com/wp-content/uploads/2024/10/20221019恐懼.jpg",
                text: "因為我深信無論是死，是生，是天使，是掌權的，是有能的，是現在的事，是將來的事，是高處的，是低處的，是別的受造之物，都不能叫我們與神的愛隔絕；這愛是在我們的主基督耶穌裡的。羅馬書8:38-39"
            },
            {
                img: "https://apafu.com/wp-content/uploads/2024/10/神的浪漫.jpg",
                text: "如經上所記： 「上帝為愛他的人所預備的 是眼睛未曾看見，耳朵未曾聽見， 人心也未曾想到的。」哥林多前書2:9"
            }
        ];
        // 隨機選擇一張卡片
        var randomIndex = Math.floor(Math.random() * cards.length);
        var selectedCard = cards[randomIndex];

        // 更新圖片和文字內容
        document.getElementById("card-image").src = selectedCard.img;
        document.getElementById("card-text").innerText = selectedCard.text;

        // 更改按鈕文字為「重新點選」
        document.getElementById("draw-button").innerText = "重新點選";
    }
</script>/* End custom CSS */