parent
c3a14de15f
commit
396106adde
@ -1,276 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{number}}.{{title}}</title>
|
||||
<!-- 引入 Ace 编辑器相关脚本 -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript"
|
||||
charset="utf-8"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript"
|
||||
charset="utf-8"></script>
|
||||
<!-- 引入 jQuery -->
|
||||
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
|
||||
<!-- 引入 Font Awesome 图标库 -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
||||
<style>
|
||||
/* 全局样式重置 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
/* 容器样式 */
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* 导航栏样式 */
|
||||
.navbar {
|
||||
background-color: #ffffff;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
color: #3c3c3c;
|
||||
text-decoration: none;
|
||||
margin: 0 15px;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: #40a9ff;
|
||||
}
|
||||
|
||||
.navbar .login {
|
||||
background-color: #40a9ff;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar .login:hover {
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
/* 主要内容区域样式 */
|
||||
.part1 {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
background-color: #ffffff;
|
||||
margin: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 左侧题目描述区域 */
|
||||
.left_desc {
|
||||
width: 50%;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.left_desc h3 {
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.5em;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.left_desc pre {
|
||||
white-space: pre-wrap;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
background-color: #f5f5f5;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 右侧代码编辑器区域 */
|
||||
.right_code {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
/* 添加此行 */
|
||||
}
|
||||
|
||||
.ace_editor {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* 底部提交区域 */
|
||||
.part2 {
|
||||
padding: 15px;
|
||||
background-color: #ffffff;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
background-color: #52c41a;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-submit:hover {
|
||||
background-color: #389e0d;
|
||||
}
|
||||
|
||||
.result {
|
||||
flex-grow: 1;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
/* 难度标签样式 */
|
||||
.difficulty {
|
||||
display: inline-block;
|
||||
padding: 3px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
margin-left: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.easy {
|
||||
background-color: #52c41a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.medium {
|
||||
background-color: #faad14;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hard {
|
||||
background-color: #f5222d;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- 导航栏 -->
|
||||
<div class="navbar">
|
||||
<div>
|
||||
<a href="/"><i class="fas fa-home"></i> 首页</a>
|
||||
<a href="/all_questions"><i class="fas fa-list"></i> 题库</a>
|
||||
<a href="#"><i class="fas fa-trophy"></i> 竞赛</a>
|
||||
<a href="#"><i class="fas fa-comments"></i> 讨论</a>
|
||||
<a href="#"><i class="fas fa-briefcase"></i> 求职</a>
|
||||
</div>
|
||||
<a class="login" href="#"><i class="fas fa-user"></i> 登录</a>
|
||||
</div>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<div class="part1">
|
||||
<!-- 左侧题目描述 -->
|
||||
<div class="left_desc">
|
||||
<h3>
|
||||
<span id="number">{{number}}</span>.{{title}}
|
||||
<span class="difficulty {{star}}">{{star}}</span>
|
||||
</h3>
|
||||
<pre>{{desc}}</pre>
|
||||
</div>
|
||||
<!-- 右侧代码编辑器 -->
|
||||
<div class="right_code">
|
||||
<div id="code" class="ace_editor"><textarea class="ace_text-input">{{pre_code}}</textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部提交区域 -->
|
||||
<div class="part2">
|
||||
<div class="result"></div>
|
||||
<button class="btn-submit" onclick="submit()"><i class="fas fa-paper-plane"></i> 提交代码</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 初始化 Ace 编辑器
|
||||
var editor = ace.edit("code");
|
||||
editor.setTheme("ace/theme/monokai");
|
||||
editor.session.setMode("ace/mode/c_cpp");
|
||||
editor.setFontSize(16);
|
||||
editor.getSession().setTabSize(4);
|
||||
editor.setReadOnly(false);
|
||||
ace.require("ace/ext/language_tools");
|
||||
editor.setOptions({
|
||||
enableBasicAutocompletion: true,
|
||||
enableSnippets: true,
|
||||
enableLiveAutocompletion: true
|
||||
});
|
||||
|
||||
// 提交代码函数
|
||||
function submit() {
|
||||
var code = editor.getSession().getValue();
|
||||
var number = $("#number").text();
|
||||
var judge_url = "/judge/" + number;
|
||||
$.ajax({
|
||||
method: 'Post',
|
||||
url: judge_url,
|
||||
dataType: 'json',
|
||||
contentType: 'application/json;charset=utf-8',
|
||||
data: JSON.stringify({
|
||||
'code': code,
|
||||
'input': ''
|
||||
}),
|
||||
success: function (data) {
|
||||
show_result(data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 显示结果函数
|
||||
function show_result(data) {
|
||||
var result_div = $(".result");
|
||||
result_div.empty();
|
||||
var _status = data.status;
|
||||
var _reason = data.reason;
|
||||
var reason_label = $("<p>", { text: _reason });
|
||||
reason_label.appendTo(result_div);
|
||||
if (_status == 0) {
|
||||
var _stdout = data.stdout;
|
||||
var _stderr = data.stderr;
|
||||
var stdout_label = $("<pre>", { text: _stdout });
|
||||
var stderr_label = $("<pre>", { text: _stderr });
|
||||
stdout_label.appendTo(result_div);
|
||||
stderr_label.appendTo(result_div);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--PC版-->
|
||||
<div id="SOHUCS" sid={{number}}.{{title}}></div>
|
||||
<script charset="utf-8" type="text/javascript" src="https://cy-cdn.kuaizhan.com/upload/changyan.js"></script>
|
||||
<script type="text/javascript">
|
||||
window.changyan.api.config({
|
||||
appid: 'cyxvREibp',
|
||||
conf: 'prod_0eeee7deaa033b896c3fd301b0e2c3d3'
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
Loading…
Reference in new issue