112 lines
4.8 KiB
HTML
112 lines
4.8 KiB
HTML
<!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 rel="stylesheet" href="styles.css">
|
||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- 顶部标题栏 -->
|
||
<header class="header">
|
||
<div class="title-section">
|
||
<i class="fas fa-code header-icon"></i>
|
||
<h1>代码解释与修复助手</h1>
|
||
</div>
|
||
<p class="subtitle">帮助编程学习者理解代码并提供修复建议的AI工具</p>
|
||
</header>
|
||
|
||
<!-- 主要内容区域 -->
|
||
<div class="main-content">
|
||
<!-- 左侧输入面板 -->
|
||
<div class="panel input-panel">
|
||
<div class="panel-header">
|
||
<h2><i class="fas fa-edit"></i> 代码输入</h2>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="codeInput"><i class="fas fa-code"></i> 请输入您的代码：</label>
|
||
<textarea id="codeInput" placeholder="在此输入您需要分析的代码..."></textarea>
|
||
</div>
|
||
|
||
<div class="options-container">
|
||
<div class="form-group">
|
||
<label for="languageSelect"><i class="fas fa-language"></i> 编程语言：</label>
|
||
<select id="languageSelect">
|
||
<option value="python">Python</option>
|
||
<option value="javascript">JavaScript</option>
|
||
<option value="typescript">TypeScript</option>
|
||
<option value="java">Java</option>
|
||
<option value="cpp">C++</option>
|
||
<option value="c">C</option>
|
||
<option value="go">Go</option>
|
||
<option value="rust">Rust</option>
|
||
<option value="ruby">Ruby</option>
|
||
<option value="php">PHP</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="taskTypeSelect"><i class="fas fa-tasks"></i> 任务类型：</label>
|
||
<select id="taskTypeSelect">
|
||
<option value="explain">代码解释</option>
|
||
<option value="fix">代码修复</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group" id="depthGroup">
|
||
<label for="depthSelect"><i class="fas fa-depth-chart"></i> 详细程度：</label>
|
||
<select id="depthSelect">
|
||
<option value="basic">基础</option>
|
||
<option value="detailed" selected>详细</option>
|
||
<option value="comprehensive">全面</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="button-group">
|
||
<button id="startBtn" class="btn btn-primary">
|
||
<i class="fas fa-play"></i> 开始分析
|
||
</button>
|
||
<button id="clearBtn" class="btn btn-secondary">
|
||
<i class="fas fa-trash"></i> 清空
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧结果面板 -->
|
||
<div class="panel result-panel">
|
||
<div class="panel-header">
|
||
<h2><i class="fas fa-clipboard-check"></i> 分析结果</h2>
|
||
<div id="statusIndicator" class="status status-idle">
|
||
<i class="fas fa-circle"></i> 就绪
|
||
</div>
|
||
</div>
|
||
|
||
<div class="result-container">
|
||
<div id="loadingIndicator" class="loading" style="display: none;">
|
||
<div class="spinner"></div>
|
||
<p>正在分析代码...请稍候</p>
|
||
</div>
|
||
|
||
<div id="resultContent" class="result-content">
|
||
<div class="empty-state">
|
||
<i class="fas fa-lightbulb"></i>
|
||
<p>输入代码并点击"开始分析"按钮，获取AI分析结果</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部信息 -->
|
||
<footer class="footer">
|
||
<p>© 2026 代码解释与修复助手 | 基于硅基流动AI服务</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html> |