Spaces:
Sleeping
Sleeping
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>神思庭 · 全息世界多模态智能体</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <!-- Google Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;700&family=Noto+Sans+SC:wght@300;400;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body class="theater-mode"> | |
| <!-- AIS Logo & Theater Controls --> | |
| <div id="ais-top-bar"> | |
| <a href="https://shensist.top/" target="_blank" class="logo-link"> | |
| <div class="logo-section"> | |
| <div class="logo-circle"> | |
| <img src="assets/logo_ts.webp" alt="AIS Logo" class="logo-img"> | |
| </div> | |
| <div class="title-group"> | |
| <div class="logo-title">神思庭 · 创世</div> | |
| <div class="logo-subtitle">全息世界多模态智能体</div> | |
| </div> | |
| </div> | |
| </a> | |
| <div id="top-bar-controls"> | |
| <button id="toggle-archives" class="control-btn" title="查看档案"> | |
| <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"> | |
| <path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Background Theater Layer --> | |
| <div id="theater-stage"> | |
| <!-- Background Video (Representing the Genesis MV) --> | |
| <div class="video-overlay"></div> | |
| <video id="bg-video" autoplay muted loop playsinline> | |
| <source src="https://assets.mixkit.co/videos/preview/mixkit-digital-animation-of-abstract-shapes-4414-large.mp4" type="video/mp4"> | |
| </video> | |
| </div> | |
| <!-- Interactive Layer --> | |
| <main id="aui-container"> | |
| <!-- Sidebar Actor Gallery (Moved to Left) --> | |
| <aside id="actor-gallery" class="glass-panel"> | |
| <h3>唤醒山海灵兽</h3> | |
| <div id="actor-list"> | |
| <!-- Data-driven actors will be injected here --> | |
| </div> | |
| </aside> | |
| <!-- Floating Interaction Panel --> | |
| <section id="main-interface" class="glass-panel"> | |
| <div id="actor-portrait-container"> | |
| <img id="actor-portrait" src="assets/(九尾狐)@mmmmmmmm1.foxqueenah.webp" alt="Actor Portrait" class="actor-portrait"> | |
| </div> | |
| <div class="header"> | |
| <h1 id="agent-name">神思庭 · AI山海造物主</h1> | |
| <p id="agent-status-text">全息频率已就绪</p> | |
| </div> | |
| <div id="response-area"> | |
| <p id="agent-text">欢迎来到全息世界。在这里,传说不再是故纸堆里的文字。</p> | |
| </div> | |
| <div class="interaction-footer"> | |
| <div id="voice-trigger" class="pulse-container"> | |
| <div class="ring"></div> | |
| <div class="ring"></div> | |
| <div class="ring"></div> | |
| <button id="listen-btn" title="点击开始对话"> | |
| <svg viewBox="0 0 24 24" fill="white" width="32" height="32"> | |
| <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/> | |
| <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Lingjing Archives Panel (Hidden by default) --> | |
| <div id="archives-panel" class="glass-panel side-panel"> | |
| <div class="panel-header"> | |
| <h2>灵境档案</h2> | |
| <div class="header-actions"> | |
| <button id="toggle-fullscreen" class="panel-btn" title="全屏查看"> | |
| <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"> | |
| <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/> | |
| </svg> | |
| </button> | |
| <button id="toggle-archives-btn" class="panel-btn archives-opener-icon" title="查看档案"> | |
| <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"> | |
| <path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"/> | |
| </svg> | |
| </button> | |
| <button id="close-archives" class="panel-btn" title="关闭">✕</button> | |
| </div> | |
| </div> | |
| <div class="tabs"> | |
| <button class="tab-btn active" data-tab="lyrics">歌词</button> | |
| <button class="tab-btn" data-tab="novel">小说</button> | |
| <button class="tab-btn" data-tab="music">音乐</button> | |
| <button class="tab-btn" data-tab="video">视频</button> | |
| </div> | |
| <div class="tab-content"> | |
| <div id="content-lyrics" class="content-view active">正在加载档案频率...</div> | |
| <div id="content-novel" class="content-view">正在读取山海经脉...</div> | |
| <div id="content-music" class="content-view"> | |
| <div class="music-module-container"> | |
| <div id="music-list" class="music-list"> | |
| <!-- Tracks will be injected here --> | |
| </div> | |
| <div class="music-player-widget"> | |
| <div class="progress-bar-container"> | |
| <span id="current-time" class="time-label">00:00</span> | |
| <input type="range" id="music-progress" value="0" step="0.1" class="progress-slider"> | |
| <span id="total-time" class="time-label">00:00</span> | |
| </div> | |
| <div class="player-controls-compact"> | |
| <button id="music-stop" class="player-btn" title="停止"> | |
| <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><rect x="6" y="6" width="12" height="12"/></svg> | |
| </button> | |
| <button id="music-play" class="player-btn large" title="播放"> | |
| <svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M8 5v14l11-7z"/></svg> | |
| </button> | |
| <button id="music-pause" class="player-btn large" title="暂停" style="display:none;"> | |
| <svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg> | |
| </button> | |
| <button id="music-next" class="player-btn" title="下一曲"> | |
| <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="content-video" class="content-view">正在同步灵境剧院...</div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Global Music Player (The Official Soundtrack) --> | |
| <audio id="mv-audio"> | |
| <source src="assets/shensist_genesis_mv.mp3" type="audio/mp3"> | |
| </audio> | |
| <!-- Copyright Footer --> | |
| <footer> | |
| <p>© 2026 神思庭艺术智能工作室 (AIS) | 著作权人:金威 | 版权所有,未经授权禁止商业使用 | <a href="https://shensist.top/" target="_blank">shensist.top</a></p> | |
| </footer> | |
| <!-- Scripts --> | |
| <script src="assets/database.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> | |