tv-search/index.html at main · ttrx2023/tv-search · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>家人看剧神器</title>
    <style>
        body { font-family: 'Microsoft YaHei', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; background: #eef2f7; }
        .card { background: white; padding: 50px; border-radius: 30px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); text-align: center; width: 90%; max-width: 500px; }
        input { width: 100%; padding: 20px; font-size: 24px; border: 3px solid #0078D4; border-radius: 15px; box-sizing: border-box; margin-bottom: 25px; outline: none; }
        .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        button { padding: 20px; font-size: 22px; cursor: pointer; border: none; border-radius: 15px; color: white; font-weight: bold; transition: 0.2s; }
        .search-btn { background: #0078D4; }
        .voice-btn { background: #cc0000; } /* YouTube 红 */
        button:active { transform: scale(0.95); opacity: 0.8; }
        #status { margin-top: 20px; font-size: 18px; color: #666; min-height: 1.5em; }
        .listening { animation: breathe 1.5s infinite; }
        @keyframes breathe { 0% { box-shadow: 0 0 0 0px rgba(204,0,0,0.4); } 100% { box-shadow: 0 0 0 20px rgba(204,0,0,0); } }
    </style>
</head>
<body>
    <div class="card">
        <h1 style="margin-top:0">想看什么电视剧？</h1>
        <input type="text" id="kw" placeholder="输入剧名" autocomplete="off">
        <div class="btns">
            <button class="search-btn" onclick="go()">🔍 搜索</button>
            <button class="voice-btn" id="vbtn" onclick="startV()">🎤 说话</button>
        </div>
        <div id="status">点击“说话”直接喊出剧名</div>
    </div>

    <script>
        const kw = document.getElementById('kw');
        const st = document.getElementById('status');
        const vbtn = document.getElementById('vbtn');

        function go() {
            const val = kw.value.trim();
            if (!val) return;

            // 1. YouTube 搜索链接 (最全)
            const ytUrl = `https://www.youtube.com/results?search_query=${encodeURIComponent(val)}`;
            // 2. 爱壹帆 搜索链接 (海外华人最常用)
            const iyfUrl = `https://www.iyf.tv/search/${encodeURIComponent(val)}`;

            // 同时打开两个，让家人选一个顺眼的
            window.open(ytUrl, '_blank');
            window.open(iyfUrl, '_blank');

            st.innerText = "已为您打开 YouTube 和 爱壹帆";
        }

        function startV() {
            if (!('webkitSpeechRecognition' in window)) {
                alert("请使用 Chrome 或 Edge 浏览器");
                return;
            }
            const rec = new webkitSpeechRecognition();
            rec.lang = 'zh-CN';
            rec.onstart = () => {
                vbtn.classList.add('listening');
                st.innerText = "正在听您说话...";
            };
            rec.onresult = (e) => {
                const res = e.results[0][0].transcript.replace(/[。？！]/g, "");
                kw.value = res;
                st.innerText = "识别到：" + res;
                setTimeout(go, 800); // 自动搜索
            };
            rec.onend = () => {
                vbtn.classList.remove('listening');
            };
            rec.onerror = () => { st.innerText = "没听清，请重新点我说话"; };
            rec.start();
        }

        // 回车搜索
        kw.onkeydown = (e) => { if(e.key === 'Enter') go(); };
    </script>
</body>
</html>