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 字符查询 - 全字符浏览与搜索</title>
    <style>
        :root {
            --bg: #f5f5f7;
            --bg-card: #ffffff;
            --bg-sidebar: #fafafa;
            --text: #1d1d1f;
            --text-secondary: #6e6e73;
            --border: #e0e0e5;
            --accent: #0071e3;
            --accent-hover: #0077ed;
            --accent-light: #e8f4fd;
            --cell-bg: #ffffff;
            --cell-hover: #e8f4fd;
            --cell-border: #e8e8ed;
            --cell-special: #f0f0f5;
            --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.15);
            --radius: 12px;
            --radius-sm: 8px;
            --radius-xs: 5px;
            --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', 'Monaco', 'Menlo', monospace;
        }

        [data-theme="dark"] {
            --bg: #1a1a1e;
            --bg-card: #252528;
            --bg-sidebar: #1e1e22;
            --text: #f0f0f2;
            --text-secondary: #a0a0a5;
            --border: #3a3a40;
            --accent: #4da6ff;
            --accent-hover: #66b3ff;
            --accent-light: #1a2d40;
            --cell-bg: #2a2a2e;
            --cell-hover: #1a3040;
            --cell-border: #35353a;
            --cell-special: #2e2e32;
            --shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
            --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background: var(--bg);
            color: var(--text);
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: background var(--transition), color var(--transition);
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            -webkit-user-select: none;
        }

        /* ========== Header ========== */
        .header {
            background: var(--bg-card);
            border-bottom: 1px solid var(--border);
            padding: 12px 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            flex-shrink: 0;
            z-index: 100;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
            transition: background var(--transition), border var(--transition);
            flex-wrap: wrap;
        }
        .header-logo {
            font-size: 1.3rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text);
            text-decoration: none;
        }
        .header-logo .icon {
            width: 34px;
            height: 34px;
            border-radius: 8px;
            background: linear-gradient(135deg, #0071e3, #5ac8fa);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 800;
            font-size: 1.1rem;
            flex-shrink: 0;
        }
        .search-wrapper {
            flex: 1;
            min-width: 180px;
            max-width: 420px;
            position: relative;
        }
        .search-input {
            width: 100%;
            padding: 10px 40px 10px 16px;
            border: 2px solid var(--border);
            border-radius: 24px;
            font-size: 0.95rem;
            background: var(--bg);
            color: var(--text);
            outline: none;
            transition: all var(--transition);
            font-family: inherit;
        }
        .search-input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
        }
        .search-input::placeholder {
            color: var(--text-secondary);
        }
        .search-icon {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-secondary);
            pointer-events: none;
            font-size: 1rem;
        }
        .header-actions {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-shrink: 0;
        }
        .btn {
            padding: 9px 16px;
            border-radius: 20px;
            border: none;
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 500;
            transition: all var(--transition);
            display: flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
            font-family: inherit;
            letter-spacing: -0.01em;
        }
        .btn-accent {
            background: var(--accent);
            color: #fff;
        }
        .btn-accent:hover {
            background: var(--accent-hover);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 113, 227, 0.3);
        }
        .btn-ghost {
            background: transparent;
            color: var(--text);
            border: 1.5px solid var(--border);
        }
        .btn-ghost:hover {
            background: var(--bg);
            border-color: var(--text-secondary);
        }
        .btn-sm {
            padding: 6px 12px;
            font-size: 0.8rem;
            border-radius: 16px;
        }
        .theme-toggle {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 1.5px solid var(--border);
            background: var(--bg-card);
            cursor: pointer;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all var(--transition);
            flex-shrink: 0;
        }
        .theme-toggle:hover {
            border-color: var(--accent);
            background: var(--accent-light);
        }

        /* ========== Main Layout ========== */
        .main-container {
            display: flex;
            flex: 1;
            overflow: hidden;
            position: relative;
        }

        /* ========== Sidebar ========== */
        .sidebar {
            width: 260px;
            min-width: 260px;
            background: var(--bg-sidebar);
            border-right: 1px solid var(--border);
            overflow-y: auto;
            overflow-x: hidden;
            flex-shrink: 0;
            transition: all var(--transition);
            padding: 8px 0;
            z-index: 50;
        }
        .sidebar::-webkit-scrollbar {
            width: 4px;
        }
        .sidebar::-webkit-scrollbar-thumb {
            background: var(--border);
            border-radius: 10px;
        }
        .sidebar-section {
            padding: 4px 12px;
        }
        .sidebar-section-title {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--text-secondary);
            padding: 10px 12px 6px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            border-radius: var(--radius-xs);
            transition: background var(--transition);
        }
        .sidebar-section-title:hover {
            background: var(--cell-special);
        }
        .sidebar-section-title .arrow {
            transition: transform var(--transition);
            font-size: 0.6rem;
            display: inline-block;
        }
        .sidebar-section.collapsed .block-list {
            display: none;
        }
        .sidebar-section.collapsed .arrow {
            transform: rotate(-90deg);
        }
        .block-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 1px;
        }
        .block-item {
            padding: 7px 12px;
            cursor: pointer;
            border-radius: var(--radius-xs);
            font-size: 0.82rem;
            transition: all var(--transition);
            color: var(--text);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            letter-spacing: -0.01em;
        }
        .block-item:hover {
            background: var(--accent-light);
            color: var(--accent);
        }
        .block-item.active {
            background: var(--accent);
            color: #fff;
            font-weight: 600;
        }
        .block-item .range {
            font-size: 0.65rem;
            color: var(--text-secondary);
            font-family: var(--font-mono);
            white-space: nowrap;
            opacity: 0.7;
        }
        .block-item.active .range {
            color: rgba(255, 255, 255, 0.8);
        }
        .block-item .count-badge {
            font-size: 0.6rem;
            background: var(--border);
            color: var(--text-secondary);
            padding: 2px 6px;
            border-radius: 10px;
            font-weight: 500;
            white-space: nowrap;
        }
        .block-item.active .count-badge {
            background: rgba(255, 255, 255, 0.3);
            color: #fff;
        }

        /* ========== Content ========== */
        .content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background: var(--bg);
            transition: background .........完整代码请登录后点击上方下载按钮下载查看