|
|
<!DOCTYPE html> |
|
|
<html lang="zh"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>聊天界面</title> |
|
|
<link rel="icon" type="image/x-icon" href="./frontend/assets/favicon.ico" /> |
|
|
<link rel="stylesheet" href="./frontend/css/main.css"> |
|
|
<link rel="stylesheet" href="./frontend/css/message.css"> |
|
|
<link rel="stylesheet" href="./frontend/css/left-section/map-panel.css"> |
|
|
<link rel="stylesheet" href="./frontend/css/left-section/profile-panel.css"> |
|
|
<link rel="stylesheet" href="./frontend/css/right-section/api-panel.css"> |
|
|
<link rel="stylesheet" href="./frontend/css/right-section/settings-panel.css"> |
|
|
<link rel="stylesheet" href="./frontend/css/right-section/status-panel.css"> |
|
|
<link rel="stylesheet" href="./frontend/css/right-section/scene-panel.css"> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> |
|
|
<script src="https://d3js.org/d3.v7.min.js"></script> |
|
|
</head> |
|
|
<body> |
|
|
<div class="main-container"> |
|
|
|
|
|
<div class="left-section"> |
|
|
<div class="map-section"> |
|
|
<h3 class="map-title" data-i18n="map">地图</h3> |
|
|
<div id="map-container"> |
|
|
<div id="map"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="character-profiles"> |
|
|
<h3 class="profiles-title" data-i18n="characterProfiles">角色档案</h3> |
|
|
<div class="profiles-container"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="chat-container"> |
|
|
|
|
|
<div class="toolbar"> |
|
|
<div class="left-tools"> |
|
|
<button id="controlBtn" class="control-btn"> |
|
|
<i class="fas fa-play"></i> |
|
|
<span data-i18n="start">开始</span> |
|
|
</button> |
|
|
<button id="stopBtn" class="control-btn"> |
|
|
<i class="fas fa-stop"></i> |
|
|
<span data-i18n="stop">停止</span> |
|
|
</button> |
|
|
<button id="exportStoryBtn" class="control-btn"> |
|
|
<i class="fas fa-book"></i> |
|
|
<span data-i18n="exportStory">输出故事</span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="right-tools"> |
|
|
<button id="languageBtn" class="language-btn"> |
|
|
<i class="fas fa-language"></i> |
|
|
<span data-i18n="switchLang">EN/中</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="chat-messages"> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="input-area"> |
|
|
<button class="menu-btn"><i class="fas fa-bars"></i></button> |
|
|
<textarea placeholder="input"></textarea> |
|
|
<button class="send-btn"><i class="fas fa-paper-plane"></i></button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="right-section"> |
|
|
<div class="right-toolbar"> |
|
|
<button class="tab-btn active" data-target="status-panel" data-i18n="status">状态</button> |
|
|
<button class="tab-btn" data-target="settings-panel" data-i18n="settings">设定</button> |
|
|
<button class="tab-btn" data-target="scenes-panel" data-i18n="scenes"">场景</button> |
|
|
|
|
|
</div> |
|
|
<div class="right-content"> |
|
|
<div class="tab-panel active" id="status-panel"> |
|
|
<div class="status-container"> |
|
|
<div class="status-module" id="current-event"> |
|
|
<h3 data-i18n="currentEvent">当前事件</h3> |
|
|
<div class="module-content"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="status-module" id="current-location"> |
|
|
<h3 data-i18n="currentLocation">当前地点</h3> |
|
|
<div class="module-content"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="status-module" id="current-group"> |
|
|
<h3 data-i18n="currentGroup">当前分组</h3> |
|
|
<div class="module-content"> |
|
|
<div class="group-members"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="tab-panel" id="settings-panel"> |
|
|
<div class="settings-container"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div class="tab-panel" id="scenes-panel"> |
|
|
<div class="scenes-container"> |
|
|
<div class="scenes-header"> |
|
|
<h3 data-i18n="scenesList">场景列表</h3> |
|
|
|
|
|
</div> |
|
|
<div class="scene-buttons"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="./frontend/js/i18n.js"></script> |
|
|
<script src="./frontend/js/message.js"></script> |
|
|
<script src="./frontend/js/left-section/map-panel.js"></script> |
|
|
<script src="./frontend/js/left-section/profile-panel.js"></script> |
|
|
|
|
|
<script src="./frontend/js/right-section/api-panel.js"></script> |
|
|
<script src="./frontend/js/right-section/right-section.js"></script> |
|
|
<script src="./frontend/js/right-section/settings-panel.js"></script> |
|
|
<script src="./frontend/js/right-section/status-panel.js"></script> |
|
|
<script src="./frontend/js/right-section/scene-panel.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
