20240816選節目

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
            background: linear-gradient(to right, #505050, #333333); /* 背景漸層色 */
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 0;
        }
        .form {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: linear-gradient(135deg, #ff0000, #8a2be2, #ffff00); /* 紅紫黃漸層 */
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* 陰影效果 */
            margin-top: 50px;
        }
        .label {
            margin-bottom: 20px;
            font-size: 30px;
            font-weight: bold;
            background: linear-gradient(135deg, #ff8c00, #ff69b4); /* 橙粉漸層背景 */
            color: white;
            border: 1px solid #ddd; /* 邊框顏色 */
            border-radius: 5px;
            padding: 10px;
        }
        .btn {
            margin-top: 20px;
            padding: 30px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s; /* 動畫效果 */
        }
        .btn:hover {
            background-color: #45a049; /* 滑鼠懸停顏色 */
            transform: scale(1.05); /* 按鈕放大效果 */
        }
        .input {
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 5px;
            border: none;
            font-size: 20px;
            background: linear-gradient(135deg, #e0ffff, #add8e6); /* 淺藍漸層背景 */
            color: #333;
            transition: background-color 0.3s; /* 背景顏色過渡效果 */
        }
        .input:focus {
            background-color: #f0f0f0; /* 焦點背景顏色 */
            outline: none; /* 去除預設焦點邊框 */
        }
        .label2 {
            margin-top: 30px;
            font-size: 25px;
            font-weight: bold;
            background-color: #4682b4; /* 銀藍色背景 */
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* 陰影效果 */
            width: 300px; /* 固定寬度 */
            height: 100px; /* 固定高度 */
            overflow: auto; /* 內容溢出時顯示滾動條 */
            text-align: center; /* 文字居中 */
            margin: 0 auto; /* 水平居中 */
        }
        img {
            display: block;
            margin: 20px auto;
            border-radius: 10px; /* 圓角邊框 */
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* 陰影效果 */
        }
    </style>
</head>

<body>
    <img src="123.png" alt="logo" width="500">

    <div class="form">
        <label for="channel" class="label">請輸入頻道代碼:</label>
        <input type="text" id="channel" value="請輸入代碼" class="input">
        <button onclick="showChannelName()" class="btn">確定</button>
        <div id="result" class="label2">
            <p id="channelName"></p>
        </div>
    </div>

    <script>
        function showChannelName() {
            var channel = document.getElementById("channel").value;
            var channelName;

            switch (channel) {
                case "20":
                    channelName = "TLC 旅遊生活頻道";
                    break;
                case "65":
                    channelName = "HBO";
                    break;
                case "66":
                    channelName = "東森洋片台";
                    break;
                default:
                    channelName = "小孩按三小遙控器";
                    break;
            }

            document.getElementById("channelName").innerHTML = channelName;
        }
    </script>
</body>

</html>