Chat with 11: 11111 - Enjoy intimate and lifelike conversations with Rubii AI Character Chatbots

Brief

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>沈霁角色信息 - 增长滑动版</title>
    <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">
    <style>
        /* --- 全局重置和基础 --- */
        *, *::before, *::after {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
        html {
          font-size: 18px; /* 增大基础字号 */
          height: 100%;
        }
        body {
          font-family: sans-serif;
          background-color: #1c1c2e;
          display: flex;
          justify-content: center;
          align-items: flex-start;
          padding-top: 20px;
          min-height: 100%;
          line-height: 1.7; /* 增大基础行高 */
          overflow: hidden;
        }

        /* --- 触发按钮 --- */
        .modal-trigger-button {
          padding: 14px 28px; /* 增大padding */
          margin-bottom: 20px;
          font-family: 'VT323', monospace;
          background-color: #6a0dad;
          color: white;
          border: 2px solid #ff00ff;
          box-shadow: 0 0 12px #ff00ff, 0 0 6px #ff00ff inset; /* 增强阴影 */
          cursor: pointer;
          font-size: 1.6em; /* 增大字体 */
          text-shadow: 0 0 4px white;
          border-radius: 6px;
          transition: transform 0.2s, box-shadow 0.2s;
        }
        .modal-trigger-button:hover {
          transform: scale(1.05);
          box-shadow: 0 0 18px #ff00ff, 0 0 12px #ff00ff inset, 0 0 7px #cc00cc;
        }

        /* --- 对话框遮罩层 --- */
        .modal-overlay {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.85);
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 1000;
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.25s ease, visibility 0.25s ease;
        }
        .modal-overlay.active {
          opacity: 1;
          visibility: visible;
        }
        /* --- 对话框主体 --- */
        .modal-dialog {
          background-color: #0a0418;
          border-radius: 10px; /* 增大圆角 */
          box-shadow: 0 0 40px rgba(255,0,255,0.65), 0 0 20px rgba(0,255,255,0.45) inset; /* 增强阴影 */
          width: clamp(320px, 90vw, 820px); /* 略微增大宽度 */
          /* 关键: 增大最大高度，目标约1.5个手机屏 */
          /* 假设手机屏高约600-800px, 1.5倍约900-1200px */
          /* 同时也要考虑桌面端不要过高 */
          max-height: min(150vh, 950px); /* 尝试用150vh，但最大不超过950px */
          overflow: hidden;
          display: flex;
          flex-direction: column;
          border: 3px solid #6a0dad; /* 略增边框 */
          transform: scale(0.95);
          transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .modal-overlay.active .modal-dialog {
          transform: scale(1);
        }
      /* --- 对话框头部 --- */
        .modal-header {
          padding: 12px 18px; /* 增大padding */
          background: linear-gradient(to bottom, rgba(40,25,75,0.95), rgba(30,20,55,0.95));
          color: #e0e0e0;
          border-bottom: 2px solid #6a0dad; /* 略增边框 */
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-family: 'VT323', monospace;
          text-shadow: 0 0 5px #ff00ff;
          flex-shrink: 0;
        }
        .modal-header h4 { margin: 0; font-size: 1.5em; color: #ff00ff; } /* 增大字体 */
        .modal-close-button { background: none; border: none; color: #d8d8e8; font-family: 'VT323', monospace; font-size: 2em; cursor: pointer; padding: 0 6px; line-height: 1; transition: color 0.2s, transform 0.2s; } /* 增大字体 */
        .modal-close-button:hover { color: #ff00ff; transform: rotate(90deg) scale(1.1); }
        /* --- 对话框内容区域 --- */
        .modal-content {
          flex-grow: 1;
          overflow-y: auto;
          overflow-x: hidden;
          padding: 0;
          position: relative;
          -webkit-overflow-scrolling: touch;
          background-color: var(--card-bg-card, rgba(16, 8, 32, 0.85));
        }
        .modal-content::-webkit-scrollbar { width: 10px; } /* 增大滚动条宽度 */
        .modal-content::-webkit-scrollbar-track { background: #0a0418; }
        .modal-content::-webkit-scrollbar-thumb { background-color: #6a0dad; border-radius: 5px; border: 1px solid #0a0418; }
        .modal-content::-webkit-scrollbar-thumb:hover { background-color: #ff00ff; }

        /* --- 角色卡片CSS --- */
        .modal-content { /* 确保CSS变量在此作用域内 */
          --bg-color-card: #0a0418;
          --card-bg-card: rgba(16, 8, 32, 0.85);
          --text-color-card: #e0e0e0;
          --border-color-card: #6a0dad;
          --glow-color-primary-card: #ff00ff;
          --glow-color-secondary-card: #00ffff;
          --scanline-bg-card: rgba(0, 0, 0, 0.07);
          --neon-pink-card: #ff40ff; --neon-blue-card: #40c4ff; --neon-green-card: #40ff80;
          --neon-yellow-card: #ffff40; --neon-orange-card: #ffab40; --neon-purple-card: #ab40ff;
          /* 增大卡片内字体 */
          --font-pixel-card: 'VT323', monospace;
          --font-mono-card: 'Roboto Mono', monospace;
        }
     #crt {
          width: 100%;
          position: relative;
          padding: 20px; /* 增大内边距 */
          animation: crtFlicker 0.12s infinite alternate;
          font-family: var(--font-mono-card);
          color: var(--text-color-card);
          display: flex;
          flex-direction: column;
        }
        .profile-card {
          position: relative;
          z-index: 2;
        }

        @keyframes crtFlicker { 0% { opacity: 0.97; } 100% { opacity: 1; } }

        .scanlines {
          position: absolute; top: 0; left: 0; right: 0; bottom: 0;
          pointer-events: none;
          background: repeating-linear-gradient( transparent, transparent 1px, var(--scanline-bg-card) 2px, var(--scanline-bg-card) 3px );
          z-index: 1; opacity: 0.6;
          animation: scanlineMove 100s linear infinite;
        }
        @keyframes scanlineMove { 0% { background-position-y: 0; } 100% { background-position-y: 100vh; } }

11111