js+css实现字符unicode编码大全查询代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js+css实现字符unicode编码大全查询代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unicode Explorer — 万国码浏览器</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400;500&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --bg-deep: #06080c;
            --bg: #0a0d14;
            --surface: #101420;
            --surface-2: #161b2a;
            --surface-hover: #1c2236;
            --border: #1e2540;
            --border-light: #2a3254;
            --accent: #22d3ee;
            --accent-dim: rgba(34, 211, 238, 0.1);
            --accent-2: #f472b6;
            --accent-3: #a78bfa;
            --success: #34d399;
            --warning: #fbbf24;
            --danger: #ef4444;
            --text: #e2e8f0;
            --text-sec: #94a3b8;
            --text-muted: #64748b;
            --radius: 6px;
            --radius-lg: 10px;
            --header-h: 56px;
            --sidebar-w: 276px;
            --detail-w: 340px;
            --font-display: 'Bebas Neue', cursive;
            --font-body: 'Noto Sans SC', 'DM Mono', sans-serif;
            --font-mono: 'DM Mono', monospace;
            --font-glyph: 'Noto Sans SC', 'Segoe UI Symbol', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
        }

        html, body {
            height: 100%; background: var(--bg-deep); color: var(--text);
            font-family: var(--font-body); font-size: 14px; line-height: 1.5; overflow: hidden;
        }

        ::-webkit-scrollbar { width: 5px; height: 5px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

        #app {
            display: grid;
            grid-template-rows: var(--header-h) 1fr;
            grid-template-columns: var(--sidebar-w) 1fr;
            height: 100vh;
        }

        /* ═══ HEADER ═══ */
        header {
            grid-column: 1 / -1; display: flex; align-items: center;
            padding: 0 20px; background: var(--bg);
            border-bottom: 1px solid var(--border); gap: 16px; z-index: 10;
        }
        .logo {
            font-family: var(--font-display); font-size: 26px;
            letter-spacing: 3px; color: var(--accent); white-space: nowrap; user-select: none;
        }
        .logo sub {
            font-family: var(--font-mono); font-size: 10px; letter-spacing: 0;
            color: var(--text-muted); vertical-align: baseline; margin-left: 6px;
        }
        .search-box { flex: 1; max-width: 480px; position: relative; }
        .search-box input {
            width: 100%; padding: 7px 12px 7px 34px; background: var(--surface);
            border: 1px solid var(--border); border-radius: var(--radius);
            color: var(--text); font-family: var(--font-mono); font-size: 13px; outline: none;
            transition: border-color .2s, box-shadow .2s;
        }
        .search-box input:focus {
            border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim);
        }
        .search-box input::placeholder { color: var(--text-muted); }
        .search-box::before {
            content: "\2315"; position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
            color: var(--text-muted); font-size: 17px; pointer-events: none;
        }
        .hdr-actions { display: flex; gap: 6px; }
        .btn {
            padding: 6px 13px; background: var(--surface); border: 1px solid var(--border);
            border-radius: var(--radius); color: var(--text-sec);
            font-family: var(--font-mono); font-size: 11.5px; cursor: pointer;
            transition: all .2s; white-space: nowrap;
        }
        .btn:hover { background: var(--surface-hover); border-color: var(--accent); color: var(--accent); }
        .btn-accent { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
        .sidebar-toggle {
            display: none; padding: 5px 9px; background: var(--surface);
            border: 1px solid var(--border); border-radius: var(--radius);
            color: var(--text); font-size: 17px; cursor: pointer;
        }

        /* ═══ SIDEBAR ═══ */
        aside {
            grid-row: 2; background: var(--bg); border-right: 1px solid var(--border);
            overflow-y: auto; padding: 8px 0; display: flex; flex-direction: column;
        }
        .sb-section { margin-bottom: 2px; }
        .sb-header {
            display: flex; align-items: center; padding: 7px 14px; cursor: pointer;
            user-select: none; transition: background .15s; font-size: 12.5px;
            font-weight: 500; color: var(--text-sec); gap: 6px;
        }
        .sb-header:hover { background: var(--surface); color: var(--text); }
        .sb-header .arr {
            font-size: 9px; transitio.........完整代码请登录后点击上方下载按钮下载查看