<div class="raw-html-embed"><meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
    p {
        color: #813d29;
        line-height: normal;
    }

    h3 {
        color: #e36d01;
        text-align: center;
        /* white-space: nowrap; */
    }

    .tab-container {
        display: flex;
        background-color: #b9ac8f34;
        border-radius: 50px;
        padding: 4px;
        width: fit-content;
        margin: auto;
        box-shadow: 3px 8px 16px 0 rgba(255, 248, 228, 0.16), 1px 1px 2px 0 rgba(255, 248, 228, 0.32), inset 1px 2px 4px 0 rgba(69, 34, 1, 0.24);
    }

    .tab-buttons {
        display: flex;
    }

    .tab-button {
        padding: 10px 24px;
        border: none;
        border-radius: 50px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        background-color: transparent;
        color: #4d2c0f;
        transition: 0.3s;
    }

    .tab-button:hover {
        background-color: #e7e4dd;
    }

    .tab-button.active {
        color: #444141b5;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        background-image: linear-gradient(115deg, #f7f077, #f9c642);
        text-shadow: 1px 1px 0 rgba(69, 34, 1, 0.48);
    }

    .tab-button:hover:not(.active) {
        background-color: rgba(255, 255, 255, 0.2);
    }

    .tab-content {
        display: none;
    }

    .tab-content.active {
        display: block;
    }

    .step-line {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .step-line::before,
    .step-line::after {
        content: "";
        flex: 1;
        height: 1px;
        background-color: #e0c675;
    }

    .step-text {
        background-image: linear-gradient(to bottom, #fbc323, #fde397);
        text-shadow: 1px 1px 0 #fff8e4;
        padding: 0px 16px;
        border-radius: 999px;
        font-weight: bold;
        color: #2f2e2e;
        margin: 0 10px;
    }
    @media (max-width: 600px) {
        h3  {
            font-size: 14px !important;
            margin-top: 4px;
        }
    }
</style>

<script>
    function openTab(evt, tabName) {

        var tabcontent = document.getElementsByClassName("tab-content");
        for (var i = 0; i < tabcontent.length; i++) {
            tabcontent[i].classList.remove("active");
        }

        var tablinks = document.getElementsByClassName("tab-button");
        for (var i = 0; i < tablinks.length; i++) {
            tablinks[i].classList.remove("active");
        }

        document.getElementById(tabName).classList.add("active");
        evt.currentTarget.classList.add("active");
    }
</script>

<title>新增桌面捷徑教學</title>
<div style="max-width:100%;margin:20px auto;padding:24px;border:2px solid #f9c642;border-radius:12px;background-color:#ffffff;font-family:'Segoe UI',Arial,sans-serif;line-height:1.8;color:#000000;box-shadow:0 0 10px rgba(0,0,0,0.08);">


    <div class="tab-container">
        <div class="tab-buttons">
            <button class="tab-button active" onclick="openTab(event, 'tab1')">IOS</button>
            <button class="tab-button" onclick="openTab(event, 'tab2')">Android</button>
        </div>
    </div>


    <div id="tab1" class="tab-content active">
        <p style="font-size: 14px;text-align: center;margin-top: 10px;margin-bottom: 10px;">為了讓您有更好的使用者體驗，
            建議您將 iOS 版本升級為 17.0.1 以上。</p>
        <div class="step-line">
            <span class="step-text">第一步</span>
        </div>
        <h3>請將您 iPhone 手機的預設瀏覽器設定為 Safari 瀏覽器</h3>
        <img src="https://pfile.betrnk.fun/landing/img/jdw/game-screen(ios).png " alt="桌面" style="width: 50%; height: auto; margin: 20px auto; display: block;">
        <div class="step-line">
            <span class="step-text">下一步</span>
        </div>
        <h3>前往該頁面後，
            　點選下方工具列的「分享」按鈕
        </h3>
        <img src="https://pfile.betrnk.fun/landing/img/jdw/game-screen2(ios).png " alt="桌面" style="width: 50%; height: auto; margin: 20px auto; display: block;">
        <div class="step-line">
            <span class="step-text">下一步</span>
        </div>
        <h3>點選「加入主畫面」，就完成囉！
        </h3>
        <img src="https://pfile.betrnk.fun/landing/img/jdw/Add-to-mainscreen(ios).png " alt="桌面" style="width: 50%; height: auto; margin: 20px auto; display: block;">
    </div>


    <div id="tab2" class="tab-content">
        <div class="step-line" style="margin-top: 20px;">
            <span class="step-text">第一步</span>
        </div>
        <h3>請將您 Android 手機的預設瀏覽器設定為 Chrome 瀏覽器</h3>
        <img src="https://pfile.betrnk.fun/landing/img/jdw/game-screen.png " alt="桌面" style="width: 50%; height: auto; margin: 20px auto; display: block;">
        <div class="step-line">
            <span class="step-text">下一步</span>
        </div>
        <h3>按一下瀏覽器右上角「更多」圖示按鈕</h3>
        <img src="https://pfile.betrnk.fun/landing/img/jdw/game-screen1.png " alt="桌面" style="width: 50%; height: auto; margin: 20px auto; display: block;">
        <div class="step-line">
            <span class="step-text">下一步</span>
        </div>
        <h3>點選「加到主畫面」，再點選「安裝」，就完成囉！</h3>
        <img src="https://pfile.betrnk.fun/landing/img/jdw/game-screen3.png " alt="桌面" style="width: 50%; height: auto; margin: 20px auto; display: block;">
        <img src="https://pfile.betrnk.fun/landing/img/jdw/game-screen4.png " alt="桌面" style="width: 50%; height: auto; margin: 20px auto; display: block;">
    </div>
</div>
</div>

金斗雲

新增桌面捷徑教學