--------------------General--------------------<br>
Request URL: https://ez168.me:443/sitemap.xml<br>
Request Method: GET<br>
Status Code: 000<br>
Remote Address: 104.23.243.254<br>
HTTP Version: 1.1<br>
TLS Version: TLSv1.3<br>
--------------------Request Headers--------------------<br>
cf-connecting-ip:216.73.216.31<br>
accept:*/*<br>
cf-visitor:{"scheme":"https"}<br>
user-agent:Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)<br>
x-forwarded-proto:https<br>
host:ez168.me<br>
x-forwarded-for:216.73.216.31<br>
cf-ray:9f0128277e81284b-CMH<br>
accept-encoding:gzip, br<br>
connection:Keep-Alive<br>
cdn-loop:cloudflare; loops=1<br>
cf-ipcountry:US<br>
--------------------Response Headers--------------------<br>
transfer-encoding:chunked<br>
server:ste<br>
content-type:text/xml; charset=utf-8<br>
connection:keep-alive<br>
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="圖檔及 API 測試範本-固定">
    <title>測試範本</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            line-height: 1.6;
        }
        header {
            background: #333;
            color: white;
            padding: 1rem;
            text-align: center;
        }
        section {
            padding: 2rem;
        }
        img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 1rem 0;
        }
        button {
            padding: 0.5rem 1rem;
            font-size: 1rem;
            background: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            margin-right: 0.5rem;
        }
        button:hover {
            background: #45a049;
        }
        #api-result, #auto-api-result, #post-api-result, #auto-post-api-result, #sil-result {
            margin-top: 1rem;
            padding: 1rem;
            background: #f4f4f4;
            border: 1px solid #ddd;
            white-space: pre-wrap;
            word-break: break-word;
        }
        #sil-container {
            margin-top: 1rem;
            text-align: center;
            min-height: 80px;
        }
    </style>
</head>
<body>
    <header>
        <h1>圖檔及 API 測試範本-固定</h1>
    </header>

    <section id="sil-test">
        <h2>SilService 測試區域</h2>
        <p>點擊按鈕後才動態載入 sil_service.js 並插入 silservice 元件。</p>
        <button id="load-sil-button">載入 SilService</button>
        <div id="sil-result">尚未載入 SilService。</div>
        <div id="sil-container"></div>
    </section>

    <section id="image-test">
        <h2>圖檔測試區域</h2>
        <p>以下是測試用的圖檔：</p>
        <img src="http://picture.ez168.me/images/pokemon00.png" alt="測試圖檔">
        <p>您可以替換上方的圖檔 URL，或上傳您自己的圖檔以進行測試。</p>
    </section>

    <section id="api-test">
        <h2>GET API 測試區域</h2>
        <p>點擊按鈕以測試 GET API 回應：</p>
        <button id="test-api-button">測試 GET API</button>
        <div id="api-result">GET API 回應將顯示於此處。</div>
    </section>

    <section id="post-api-test">
        <h2>POST API 測試區域</h2>
        <p>點擊按鈕以測試 POST API 回應：</p>
        <button id="test-post-api-button">測試 POST API</button>
        <div id="post-api-result">POST API 回應將顯示於此處。</div>
    </section>

    <section id="auto-api-test">
        <h2>自動執行 GET API 測試區域</h2>
        <p>此區域顯示頁面加載時自動執行的 GET API 回應：</p>
        <div id="auto-api-result">等待 GET API 回應中...</div>
    </section>

    <section id="auto-post-api-test">
        <h2>自動執行 POST API 測試區域</h2>
        <p>此區域顯示頁面加載時自動執行的 POST API 回應：</p>
        <div id="auto-post-api-result">等待 POST API 回應中...</div>
    </section>

    <script>
        (function () {
            const SIL_SCRIPT_ID = 'sil-service-script';
            const SIL_SCRIPT_BASE = 'https://c43496eef01114e9-80f5dd18087930ce.siltcha.com/js/sil_service.js';
            const SIL_DATA_ID = '0njAK_3hXxy04K9KEb7rUX8c2PINpmMJiOb-F7Q';

            function setSilResult(message) {
                document.getElementById('sil-result').innerText = message;
            }

            function sleep(ms) {
                return new Promise(resolve => setTimeout(resolve, ms));
            }

            async function reloadSilService() {
                const silContainer = document.getElementById('sil-container');

                setSilResult('準備載入 SilService ...');

                // 1. 清空舊元件
                silContainer.innerHTML = '';

                // 2. 移除舊 script，避免第三方 script 只初始化一次
                const oldScript = document.getElementById(SIL_SCRIPT_ID);
                if (oldScript) {
                    oldScript.parentNode.removeChild(oldScript);
                }

                // 3. 先插入 silservice 元件
                const sil = document.createElement('silservice');
                sil.setAttribute('data-sil-id', SIL_DATA_ID);
                silContainer.appendChild(sil);

                setSilResult('SilService 元件已插入，開始載入外部 script ...');

                // 4. 稍微等一下，讓 DOM 先進去
                await sleep(50);

                // 5. 再載入 script，並加 cache busting
                await new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.id = SIL_SCRIPT_ID;
                    script.src = SIL_SCRIPT_BASE + '?t=' + Date.now();
                    script.defer = true;

                    script.onload = function () {
                        resolve();
                    };

                    script.onerror = function () {
                        reject(new Error('script load failed'));
                    };

                    document.head.appendChild(script);
                });

                // 6. 再等一下給第三方初始化
                await sleep(500);

                setSilResult('SilService script 已載入，若畫面仍無顯示，代表該服務可能不支援按鈕後動態初始化。');
            }

            document.getElementById('load-sil-button').addEventListener('click', async () => {
                try {
                    await reloadSilService();
                } catch (error) {
                    setSilResult('SilService 載入失敗：' + error.message);
                }
            });

            // 手動 GET API 測試按鈕功能
            document.getElementById('test-api-button').addEventListener('click', () => {
                const apiEndpoint = 'https://jsonplaceholder.typicode.com/posts/1';
                fetch(apiEndpoint)
                    .then(response => response.json())
                    .then(data => {
                        document.getElementById('api-result').innerText = JSON.stringify(data, null, 2);
                    })
                    .catch(error => {
                        document.getElementById('api-result').innerText = 'GET API 請求失敗：' + error;
                    });
            });

            // 手動 POST API 測試按鈕功能
            document.getElementById('test-post-api-button').addEventListener('click', () => {
                const postApiEndpoint = 'https://jsonplaceholder.typicode.com/posts';
                const postData = { title: 'foo', body: 'bar', userId: 1 };
                fetch(postApiEndpoint, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(postData)
                })
                    .then(response => response.json())
                    .then(data => {
                        document.getElementById('post-api-result').innerText = JSON.stringify(data, null, 2);
                    })
                    .catch(error => {
                        document.getElementById('post-api-result').innerText = 'POST API 請求失敗：' + error;
                    });
            });

            // 自動執行的 GET API 請求
            window.addEventListener('load', () => {
                const autoApiEndpoint = 'https://jsonplaceholder.typicode.com/posts/2';
                fetch(autoApiEndpoint)
                    .then(response => response.json())
                    .then(data => {
                        document.getElementById('auto-api-result').innerText = JSON.stringify(data, null, 2);
                    })
                    .catch(error => {
                        document.getElementById('auto-api-result').innerText = 'GET API 請求失敗：' + error;
                    });
            });

            // 自動執行的 POST API 請求
            window.addEventListener('load', () => {
                const autoPostApiEndpoint = 'https://jsonplaceholder.typicode.com/posts';
                const autoPostData = { title: 'auto', body: 'test', userId: 2 };
                fetch(autoPostApiEndpoint, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(autoPostData)
                })
                    .then(response => response.json())
                    .then(data => {
                        document.getElementById('auto-post-api-result').innerText = JSON.stringify(data, null, 2);
                    })
                    .catch(error => {
                        document.getElementById('auto-post-api-result').innerText = 'POST API 請求失敗：' + error;
                    });
            });
        })();
    </script>
</body>
</html>

