yty16.github.io/browser.html at main · yty16/yty16.github.io · 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta name="theme-color" content="#000000">
    <meta name="description" content="元拓域 Toolbox - 联网浏览器">
    <title>元拓域 Toolbox · 浏览器</title>
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        :root {
            --bg: #000; --surface: #111; --surface2: #1a1a1a;
            --text: #fff; --text2: #999; --accent: #2563eb; --accent2: #3b82f6;
            --safe-top: env(safe-area-inset-top, 0px);
            --safe-bottom: env(safe-area-inset-bottom, 0px);
            --safe-left: env(safe-area-inset-left, 0px);
            --safe-right: env(safe-area-inset-right, 0px);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            -webkit-tap-highlight-color: transparent;
            -webkit-user-select: none; user-select: none;
            -webkit-font-smoothing: antialiased;
        }
        html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); touch-action: manipulation; }
        .browser-shell { display: flex; flex-direction: column; height: 100%; padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); }
        @media (shape: round) {
            .browser-shell { border-radius: 50%; overflow: hidden; }
        }
        .bar { display: flex; gap: 6px; padding: 6px; align-items: center; flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--surface2); }
        .search-input { flex: 1; min-width: 0; background: var(--bg); border: 1.5px solid var(--surface2); border-radius: 18px; color: var(--text); font-size: 14px; padding: 9px 14px; outline: none; font-family: inherit; -webkit-user-select: text; user-select: text; }
        .search-input:focus { border-color: var(--accent); }
        .engine-select { background: var(--surface2); border: 1.5px solid var(--surface2); border-radius: 14px; color: var(--text); font-size: 12px; padding: 8px 4px; font-family: inherit; outline: none; max-width: 88px; flex-shrink: 0; }
        .home-btn { background: var(--accent); color: #fff; border: none; border-radius: 50%; width: 38px; height: 38px; font-size: 18px; flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; -webkit-tap-highlight-color: transparent; }
        .home-btn:active { background: var(--accent2); transform: scale(0.9); }
        .frame-wrap { flex: 1; position: relative; background: #fff; }
        iframe { width: 100%; height: 100%; border: none; background: #fff; }
        .hint { font-size: 11px; color: var(--text2); text-align: center; padding: 5px; flex-shrink: 0; background: var(--surface); }
        .open-ext { color: var(--accent2); text-decoration: underline; cursor: pointer; }
        .status-msg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #888; font-size: 14px; text-align: center; }
    </style>
</head>
<body>
    <div class="browser-shell">
        <div class="bar">
            <input class="search-input" id="q" placeholder="搜索，或输入网址…" enterkeyhint="search" onkeydown="if(event.key==='Enter')doSearch()">
            <select class="engine-select" id="engine">
                <option value="ddg">DuckDuckGo</option>
                <option value="baidu">百度</option>
                <option value="bing">必应</option>
                <option value="google">Google</option>
                <option value="wiki">维基</option>
            </select>
            <button class="home-btn" onclick="goHome()" title="返回工具箱">⌂</button>
        </div>
        <div class="frame-wrap">
            <div class="status-msg" id="statusMsg">输入关键词搜索，或直接输入网址<br>（如 <span id="siteExample">example.com</span>）</div>
            <iframe id="frame" src="about:blank" referrerpolicy="no-referrer" sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox" style="display:none;"></iframe>
        </div>
        <div class="hint">部分网站禁止内嵌，会自动整页打开 · <span class="open-ext" onclick="openExternal()">整页打开当前页</span></div>
    </div>

    <script>
    (function() {
        var _hosts = ['yty16.github.io', 'yty16.pages.dev'];
        if (_hosts.indexOf(window.location.hostname) === -1) {
            document.body.innerHTML = '<div style="position:fixed;top:0;left:0;width:100%;height:100%;background:#000;display:flex;align-items:center;justify-content:center;color:#666;font-size:14px;text-align:center;padding:20px;">页面无法显示</div>';
            return;
        }

        var frame = document.getElementById('frame');
        var statusMsg = document.getElementById('statusMsg');
        var siteExample = document.getElementById('siteExample');
        if (siteExample) siteExample.textContent = window.location.hostname;
        var engines = {
            ddg:    { mode: 'iframe', url: function(q){ return 'https://html.duckduckgo.com/html/?q=' + encodeURIComponent(q); } },
            baidu:  { mode: 'page',   url: function(q){ return 'https://www.baidu.com/s?wd=' + encodeURIComponent(q); } },
            bing:   { mode: 'page',   url: function(q){ return 'https://www.bing.com/search?q=' + encodeURIComponent(q); } },
            google: { mode: 'page',   url: function(q){ return 'https://www.google.com/search?q=' + encodeURIComponent(q); } },
            wiki:   { mode: 'page',   url: function(q){ return 'https://zh.wikipedia.org/w/index.php?search=' + encodeURIComponent(q); } }
        };

        function isUrl(s) {
            return /^(https?:\/\/)?[\w-]+(\.[\w-]+)+/.test(s) && /\.[a-z]{2,}/i.test(s) && !/\s/.test(s);
        }

        function doSearch() {
            var raw = document.getElementById('q').value.trim();
            if (!raw) return;
            var key = document.getElementById('engine').value;
            if (isUrl(raw) && key !== 'wiki') {
                var url = raw.indexOf('://') === -1 ? 'https://' + raw : raw;
                window.location.href = url;
                return;
            }
            var eng = engines[key];
            var u = eng.url(raw);
            if (eng.mode === 'iframe') {
                statusMsg.style.display = 'none';
                frame.style.display = 'block';
                frame.src = u;
            } else {
                window.location.href = u;
            }
        }

        function goHome() {
            var inApp = /[?&]in_app=1/.test(window.location.search) ||
                        (navigator.userAgent && navigator.userAgent.indexOf('ToolboxWatch') !== -1);
            window.location.href = 'index.html' + (inApp ? '?in_app=1' : '');
        }

        function openExternal() {
            if (frame.src && frame.src !== 'about:blank') {
                window.location.href = frame.src;
            }
        }

        window.doSearch = doSearch;
        window.goHome = goHome;
        window.openExternal = openExternal;
    })();
    </script>
</body>
</html>