[解决冲突]oj/urls.py

2015-08-21 21:03:33 +08:00
parent 1824b1d69a cd14d7525e
commit 78a135d916
34 changed files with 4614 additions and 230 deletions
--- a/template/404.html
+++ b/template/404.html
@@ -0,0 +1,151 @@
+{% extends "oj_base.html" %}
+{% block css_block %}
+    <style>
+        pre {
+            position: relative;
+            padding: 10px;
+            border: none;
+            overflow: auto;
+            line-height: 1.3;
+            max-height: 500px;
+        }
+
+        .hljs {
+            display: block;
+            padding: 0.5em;
+            background: #fdf6e3;
+            color: #657b83;
+        }
+
+        .hljs-comment,
+        .hljs-template_comment,
+        .diff .hljs-header,
+        .hljs-doctype,
+        .hljs-pi,
+        .lisp .hljs-string,
+        .hljs-javadoc {
+            color: #93a1a1;
+        }
+
+        /* Solarized Green */
+        .hljs-keyword,
+        .hljs-winutils,
+        .method,
+        .hljs-addition,
+        .css .hljs-tag,
+        .hljs-request,
+        .hljs-status,
+        .nginx .hljs-title {
+            color: #859900;
+        }
+
+        /* Solarized Cyan */
+        .hljs-number,
+        .hljs-command,
+        .hljs-string,
+        .hljs-tag .hljs-value,
+        .hljs-rules .hljs-value,
+        .hljs-phpdoc,
+        .tex .hljs-formula,
+        .hljs-regexp,
+        .hljs-hexcolor,
+        .hljs-link_url {
+            color: #2aa198;
+        }
+
+        /* Solarized Blue */
+        .hljs-title,
+        .hljs-localvars,
+        .hljs-chunk,
+        .hljs-decorator,
+        .hljs-built_in,
+        .hljs-identifier,
+        .vhdl .hljs-literal,
+        .hljs-id,
+        .css .hljs-function {
+            color: #268bd2;
+        }
+
+        /* Solarized Yellow */
+        .hljs-attribute,
+        .hljs-variable,
+        .lisp .hljs-body,
+        .smalltalk .hljs-number,
+        .hljs-constant,
+        .hljs-class .hljs-title,
+        .hljs-parent,
+        .haskell .hljs-type,
+        .hljs-link_reference {
+            color: #b58900;
+        }
+
+        /* Solarized Orange */
+        .hljs-preprocessor,
+        .hljs-preprocessor .hljs-keyword,
+        .hljs-pragma,
+        .hljs-shebang,
+        .hljs-symbol,
+        .hljs-symbol .hljs-string,
+        .diff .hljs-change,
+        .hljs-special,
+        .hljs-attr_selector,
+        .hljs-subst,
+        .hljs-cdata,
+        .clojure .hljs-title,
+        .css .hljs-pseudo,
+        .hljs-header {
+            color: #cb4b16;
+        }
+
+        /* Solarized Red */
+        .hljs-deletion,
+        .hljs-important {
+            color: #dc322f;
+        }
+
+        /* Solarized Violet */
+        .hljs-link_label {
+            color: #6c71c4;
+        }
+
+        .tex .hljs-formula {
+            background: #eee8d5;
+        }
+    </style>
+{% endblock %}
+{% block body %}
+    <div class="container">
+        <h2>404 - Page Not Found</h2>
+        <hr>
+        <div class="article fmt">
+
+<pre><code class="cpp"><span class="hljs-comment">// C</span>
+<span class="hljs-preprocessor">#<span class="hljs-keyword">include</span> &lt;stdio.h&gt;</span>
+<span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span><span class="hljs-params">()</span>
+</span>{
+    <span class="hljs-built_in">printf</span>(<span class="hljs-string">"404 - Page Not Found"</span>);
+    <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
+}</code></pre>
+<pre><code class="cpp"><span class="hljs-comment">// C++</span>
+<span class="hljs-preprocessor">#<span class="hljs-keyword">include</span> &lt;iostream&gt;</span>
+<span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span><span class="hljs-params">()</span>
+</span>{
+    std::<span class="hljs-built_in">cout</span> &lt;&lt; <span class="hljs-string">"404 - Page Not Found"</span> &lt;&lt; std::endl;
+    <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
+}</code></pre>
+<pre><code class="java"><span class="hljs-comment">// Java</span>
+<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Main</span>
+</span>{
+    <span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">void</span> <span class="hljs-title">main</span><span class="hljs-params">(String[] args)</span>
+    </span>{
+        System.out.println(<span class="hljs-string">"404 - Page Not Found"</span>);
+    }
+}</code></pre>
+<pre><code class="js"><span class="hljs-comment">// JavaScript</span>
+<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"404 - Page Not Found"</span>)</code></pre>
+<pre><code class="python"><span class="hljs-comment">// Python</span>
+<span class="hljs-keyword">print</span> <span class="hljs-string">"404 - Page Not Found"</span></code></pre>
+
+                </div>
+    </div>
+{% endblock %}
--- a/template/500.html
+++ b/template/500.html
@@ -0,0 +1,151 @@
+{% extends "oj_base.html" %}
+{% block css_block %}
+    <style>
+        pre {
+            position: relative;
+            padding: 10px;
+            border: none;
+            overflow: auto;
+            line-height: 1.3;
+            max-height: 500px;
+        }
+
+        .hljs {
+            display: block;
+            padding: 0.5em;
+            background: #fdf6e3;
+            color: #657b83;
+        }
+
+        .hljs-comment,
+        .hljs-template_comment,
+        .diff .hljs-header,
+        .hljs-doctype,
+        .hljs-pi,
+        .lisp .hljs-string,
+        .hljs-javadoc {
+            color: #93a1a1;
+        }
+
+        /* Solarized Green */
+        .hljs-keyword,
+        .hljs-winutils,
+        .method,
+        .hljs-addition,
+        .css .hljs-tag,
+        .hljs-request,
+        .hljs-status,
+        .nginx .hljs-title {
+            color: #859900;
+        }
+
+        /* Solarized Cyan */
+        .hljs-number,
+        .hljs-command,
+        .hljs-string,
+        .hljs-tag .hljs-value,
+        .hljs-rules .hljs-value,
+        .hljs-phpdoc,
+        .tex .hljs-formula,
+        .hljs-regexp,
+        .hljs-hexcolor,
+        .hljs-link_url {
+            color: #2aa198;
+        }
+
+        /* Solarized Blue */
+        .hljs-title,
+        .hljs-localvars,
+        .hljs-chunk,
+        .hljs-decorator,
+        .hljs-built_in,
+        .hljs-identifier,
+        .vhdl .hljs-literal,
+        .hljs-id,
+        .css .hljs-function {
+            color: #268bd2;
+        }
+
+        /* Solarized Yellow */
+        .hljs-attribute,
+        .hljs-variable,
+        .lisp .hljs-body,
+        .smalltalk .hljs-number,
+        .hljs-constant,
+        .hljs-class .hljs-title,
+        .hljs-parent,
+        .haskell .hljs-type,
+        .hljs-link_reference {
+            color: #b58900;
+        }
+
+        /* Solarized Orange */
+        .hljs-preprocessor,
+        .hljs-preprocessor .hljs-keyword,
+        .hljs-pragma,
+        .hljs-shebang,
+        .hljs-symbol,
+        .hljs-symbol .hljs-string,
+        .diff .hljs-change,
+        .hljs-special,
+        .hljs-attr_selector,
+        .hljs-subst,
+        .hljs-cdata,
+        .clojure .hljs-title,
+        .css .hljs-pseudo,
+        .hljs-header {
+            color: #cb4b16;
+        }
+
+        /* Solarized Red */
+        .hljs-deletion,
+        .hljs-important {
+            color: #dc322f;
+        }
+
+        /* Solarized Violet */
+        .hljs-link_label {
+            color: #6c71c4;
+        }
+
+        .tex .hljs-formula {
+            background: #eee8d5;
+        }
+    </style>
+{% endblock %}
+{% block body %}
+    <div class="container">
+        <h2>500 - Server Error</h2>
+        <hr>
+        <div class="article fmt">
+
+<pre><code class="cpp"><span class="hljs-comment">// C</span>
+<span class="hljs-preprocessor">#<span class="hljs-keyword">include</span> &lt;stdio.h&gt;</span>
+<span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span><span class="hljs-params">()</span>
+</span>{
+    <span class="hljs-built_in">printf</span>(<span class="hljs-string">"500 - Server Error"</span>);
+    <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
+}</code></pre>
+<pre><code class="cpp"><span class="hljs-comment">// C++</span>
+<span class="hljs-preprocessor">#<span class="hljs-keyword">include</span> &lt;iostream&gt;</span>
+<span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span><span class="hljs-params">()</span>
+</span>{
+    std::<span class="hljs-built_in">cout</span> &lt;&lt; <span class="hljs-string">"500 - Server Error"</span> &lt;&lt; std::endl;
+    <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
+}</code></pre>
+<pre><code class="java"><span class="hljs-comment">// Java</span>
+<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Main</span>
+</span>{
+    <span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">void</span> <span class="hljs-title">main</span><span class="hljs-params">(String[] args)</span>
+    </span>{
+        System.out.println(<span class="hljs-string">"500 - Server Error"</span>);
+    }
+}</code></pre>
+<pre><code class="js"><span class="hljs-comment">// JavaScript</span>
+<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"500 - Server Error"</span>)</code></pre>
+<pre><code class="python"><span class="hljs-comment">// Python</span>
+<span class="hljs-keyword">print</span> <span class="hljs-string">"500 - Server Error"</span></code></pre>
+
+                </div>
+    </div>
+{% endblock %}
--- a/template/admin/admin.html
+++ b/template/admin/admin.html
@@ -1,3 +1,4 @@
+{% verbatim %}
 <!DOCTYPE html>
 <html>
 <head>
@@ -8,10 +9,6 @@

    <title>在线评测系统 - 后台管理</title>

-    <!-- custom css begin -->
-    {% block css_block %}{% endblock %}
-    <!-- custom css end -->
-
    <!-- global css begin -->
    <link href="/static/css/admin.css" rel="stylesheet">
    <!-- global css end -->
@@ -70,7 +67,13 @@
        <!-- admin left begin-->
        <div class="col-md-2">
            <ul class="list-group">
-                <li class="list-group-header">首页</li>
+                <div ms-repeat="adminNavList">
+                    <li class="list-group-header">{{ el.name }}</li>
+                    <li class="list-group-item" ms-attr-id="getLiId(item.hash)" ms-repeat-item="el.children">
+                    <a ms-attr-href="el.hash">{{ item.name }}</a>
+                    </li>
+                </div>
+                <!--<li class="list-group-header">首页</li>
                <li class="list-group-item" id="li-index-index">
                    <a href="#index/index">主页</a>
                </li>
@@ -80,8 +83,12 @@
                <li class="list-group-item" id="li-statistics-statistics">
                    <a href="#statistics/statistics">统计</a>
                </li>
+                <li class="list-group-header">通用</li>
                <li class="list-group-item" id="li-announcement-announcement">
-                    <a href="#announcement/announcement">公告</a>
+                    <a href="#announcement/announcement">公告管理</a>
+                </li>
+                <li class="list-group-item" id="li-user-user_list">
+                    <a href="#user/user_list">用户管理</a>
                </li>
                <li class="list-group-header">题目管理</li>
                <li class="list-group-item" id="li-problem-problem_list">
@@ -97,17 +104,14 @@
                <li class="list-group-item" id="li-contest-add_contest">
                    <a href="#contest/add_contest">创建比赛</a>
                </li>
-                <li class="list-group-header">用户管理</li>
-                <li class="list-group-item" id="li-user-user_list">
-                    <a href="#user/user_list">用户列表</a>
-                </li>
+
                <li class="list-group-header">小组管理</li>
                <li class="list-group-item" id="li-group-group">
                    <a href="#group/group">小组列表</a>
                </li>
                <li class="list-group-item" id="li-group-join_group_request_list">
                    <a href="#group/join_group_request_list">加入小组请求</a>
-                </li>
+                </li>-->
            </ul>
        </div>
        <!-- admin left end -->
@@ -133,4 +137,5 @@
 </div>
 <!-- footer end -->
 </body>
-</html>
+</html>
+{% endverbatim %}
--- a/template/admin/announcement/announcement.html
+++ b/template/admin/announcement/announcement.html
@@ -7,6 +7,7 @@
            <th>创建时间</th>
            <th>更新时间</th>
            <th>创建者</th>
+            <td>可见范围</td>
            <th>状态</th>
            <th></th>
        </tr>
@@ -16,6 +17,7 @@
            <td>{{ el.create_time|date("yyyy-MM-dd HH:mm:ss")}}</td>
            <td>{{ el.last_update_time|date("yyyy-MM-dd HH:mm:ss")}}</td>
            <td>{{ el.created_by.username }}</td>
+            <td ms-text="el.is_global?'全局可见':'组内可见'"></td>
            <td>{{ getState(el)}}</td>
            <td>
                <button class="btn-sm btn-info" ms-click="editAnnouncement(el)">编辑</button>
@@ -36,7 +38,7 @@

        <div class="form-group">
            <label>标题</label>
-            <input name="title" type="text" class="form-control" id="newTitle" placeholder="公告标题" value=""></div>
+            <input name="title" type="text" class="form-control" id="newTitle" placeholder="公告标题" value="" ms-duplex="newTitle"></div>
        <div class="form-group">
            <label>内容</label>
            <textarea id="edit-announcement-editor"></textarea>
@@ -44,6 +46,25 @@
        <div class="form-group">
            <label>可见 <input ms-duplex-checked="announcementVisible" type="checkbox"/></label>
        </div>
+        <div class="form-group">
+            <label>可见范围</label>
+
+            <div>
+                <span ms-if="showGlobalViewRadio">
+                    <input type="radio" value="true" name="isGlobal" ms-duplex-boolean="isGlobal">全局可见
+                </span>
+                <span>
+                    <input type="radio" value="false" name="isGlobal" ms-duplex-boolean="isGlobal">小组内可见
+                </span>
+            </div>
+
+        </div>
+        <div class="form-group col-md-12" ms-if="!isGlobal">
+            <!-- radio 的value 没有用 但是没有的话，表单验证会出错-->
+            <div ms-repeat="allGroups" class="col-md-4">
+                <input type="checkbox" value="group_id" ms-duplex-checked="el.isSelected">&nbsp;&nbsp;{{ el.name }}
+            </div>
+        </div>
        <div class="form-group">
            <button ms-click="submitChange()" class="btn btn-primary">提交</button>
            &nbsp;&nbsp;
@@ -65,6 +86,25 @@
            </textarea>
            <div class="help-block with-errors"></div>
        </div>
+        <div class="form-group">
+            <label>可见范围</label>
+
+            <div>
+                <span ms-if="showGlobalViewRadio">
+                    <input type="radio" value="true" name="isGlobal" ms-duplex-boolean="isGlobal">全局可见
+                </span>
+                <span>
+                    <input type="radio" value="false" name="isGlobal" ms-duplex-boolean="isGlobal">小组内可见
+                </span>
+            </div>
+
+        </div>
+        <div class="form-group col-md-12" ms-if="!isGlobal">
+            <!-- radio 的value 没有用 但是没有的话，表单验证会出错-->
+            <div ms-repeat="allGroups" class="col-md-4">
+                <input type="checkbox" value="group_id" ms-duplex-checked="el.isSelected">&nbsp;&nbsp;{{ el.name }}
+            </div>
+        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary">提交</button>
        </div>
--- a/template/admin/monitor/monitor.html
+++ b/template/admin/monitor/monitor.html
@@ -9,21 +9,7 @@
                <canvas class="line-chart" id="waiting-queue-chart"></canvas>
            </div>
        </div>
-        <div>
-
-            <h3>【10.1.24.23 - judge1 】</h3>
-
-            <div>
-                <canvas class="line-chart" id="judge-instance-chart"></canvas>
-                <div class="chart-description">判题实例数量变化</div>
-            </div>
-
-            <div>
-                <canvas id="c1" class="line-chart"></canvas>
-                <div class="chart-description">cpu 和 内存</div>
-            </div>
-        </div>
    </div>
-
+<button class="btn btn-danger" id="clear-chart-data">清空图表数据</button>
    <script src="/static/js/app/admin/monitor/monitor.js"></script>
 </div>
--- a/template/oj/index.html
+++ b/template/oj/index.html
@@ -1,39 +1,139 @@
-{% extends "oj_base.html" %}
-{% block body %}
-    <div class="container">
-        <div class="container">
+<!DOCTYPE html>
+<html>

-            <div class="jumbotron">
-                <h1>青岛大学在线评测平台</h1>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>青岛大学在线评测平台 - 首页</title>

-                <p class="lead">走心的在线评测平台和算法交流社区，全新登场~</p>
+    <link rel="stylesheet" type="text/css" href="/static/css/fullpage/jquery.fullPage.css">
+    <style>
+        html, textarea, input, option, select, button {
+            font: 1em "Helvetica Neue", Helvetica, "Lantinghei SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
+            color: #FFF;
+        }

-                <p><a class="btn btn-lg btn-primary" href="/problems/" role="button">开始刷题！</a></p>
-            </div>
+        a {
+            text-decoration: none;
+            color: #FFF;
+        }

-            <!-- Example row of columns -->
-            <div class="row">
-                <div class="col-lg-4">
-                    <h2>全新UI 全新设计</h2>
+        #header {
+            position: fixed;
+            height: 30px;
+            display: block;
+            width: 100%;
+            background: transparent;
+            z-index: 10;
+            padding: 20px 20px 0 20px;
+        }

-                    <p>精心设计的UI和交互让你。。。编不下去了 </p>
-                </div>
-                <div class="col-lg-4">
-                    <h2>分布式评测</h2>
+        #name {
+            font-size: 45px;
+            margin-right: 20px;
+        }

-                    <p>技术领先的高性能分布式评测机制，根据提交数量自动伸缩判题机器实例。</p>
-                </div>
-                <div class="col-lg-4">
-                    <h2>高质量原创题目</h2>
+        .section {
+            position: relative;
+        }

-                    <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id
-                        ligula
-                        porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
-                        nibh,
-                        ut fermentum massa.</p>
-                </div>
-            </div>
+        .section h1 {
+            font-size: 60px;
+        }

+        .section h3 {
+            font-size: 30px;
+            font-weight: normal;
+        }
+
+        .bottom-pointer {
+            top: auto;
+            bottom: 20px;
+            position: absolute;
+            left: 48%;
+        }
+
+        .index-section-text {
+            position: absolute;
+            top: 30%;
+            width: 100%;
+            text-align: center;
+        }
+
+        .section-text {
+            text-align: center;
+        }
+
+        .icon {
+            max-height: 300px;
+            max-width: 300px;
+        }
+
+    </style>
+    <link rel="stylesheet" href="/static/css/animate/animate.css">
+
+    <script src="/static/js/lib/jquery/jquery.js"></script>
+
+    <script src="/static/js/lib/fullpage/jquery.fullPage.min.js"></script>
+
+    <script type="text/javascript">
+        $(document).ready(function () {
+            $('#fullpage').fullpage({
+                sectionsColor: ['#28ac72', '#2f7ddb', '#FAC832', '#B01414'],
+                css3: true,
+                navigation: true,
+                loopBottom: true
+            });
+        });
+    </script>
+
+</head>
+<body>
+<div id="header">
+    <span id="name">qduoj</span>
+    <a href="/problems/">题目</a>&nbsp;&nbsp;<a href="#">比赛</a>&nbsp;&nbsp;<a href="#">小组</a>
+</div>
+
+<div id="fullpage">
+    <div class="section" id="section0">
+        <div class="index-section-text animated bounceInUp">
+            <h1>青岛大学在线评测平台</h1>
+
+            <h3>全新面貌，新的开始~</h3>
+        </div>
+        <div class="bottom-pointer">↓继续滚动~</div>
+    </div>
+    <div class="section" id="section1">
+
+        <div class="section-text">
+            <img class="icon" id="img1" src="/static/img/index/a.png">
+
+            <h1>分布式评测</h1>
+
+            <h3>再也不怕一直是 waiting 了~~</h3>
+        </div>
+
+    </div>
+    <div class="section" id="section2">
+
+        <div class="section-text">
+            <img class="icon" id="img2" src="/static/img/index/c.png">
+
+            <h1>多种比赛模式</h1>
+
+            <h3>ACM 模式，AC 数量模式，单题得分模式等</h3>
        </div>
    </div>
-{% endblock %}
+    <div class="section" id="section3">
+
+        <div class="section-text">
+            <img class="icon" id="img3" src="/static/img/index/m.png">
+
+            <h1>自由举办小组赛</h1>
+
+            <h3>内部比赛，日常作业，期末考试，通通搞定</h3>
+        </div>
+    </div>
+</div>
+
+</body>
+</html>
--- a/template/oj/problem/problem_list.html
+++ b/template/oj/problem/problem_list.html
@@ -1,15 +1,15 @@
 {% extends "oj_base.html" %}
 {% block body %}
    {% load problem %}
-    <div class="container main" ms-controller="problem_list">
+    <div class="container main">
        <div class="row">
            <div class="col-lg-9">
                <div class="row">
                    <div class="right">
-                        <form class="form-inline" onsubmit="return false;">
+                        <form class="form-inline" method="get">
                            <div class="form-group-sm">
-                                <input name="keyWord" class="form-control" placeholder="请输入关键词" ms-duplex="key_word">
-                                <input type="submit" value="搜索" class="btn btn-primary" ms-click="getPage(1)">
+                                <input name="keyword" class="form-control" placeholder="请输入关键词">
+                                <input type="submit" value="搜索" class="btn btn-primary">
                            </div>
                        </form>
                    </div>
@@ -18,19 +18,21 @@
                    <table class="table table-striped">
                        <thead>
                        <tr>
+                            <th></th>
                            <th>#</th>
                            <th>题目</th>
-                            <th>难度</th>
-                            <th>通过率</th>
+                            <th><a href="/problems/?order_by=difficulty">难度</a></th>
+                            <th><a href="/problems/?order_by=aceptance">通过率</a></th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for item in problems %}
                            <tr>
+                                <th><span class="glyphicon glyphicon-ok ac-flag"></span></th>
                                <th scope="row"><a href="/problem/{{ item.id }}/">{{ item.id }}</a></th>
                                <td><a href="/problem/{{ item.id }}/">{{ item.title }}</a></td>
                                <td>{{ item.difficulty }}</td>
-                                <td>{{ item|accepted_radio }}</td>
+                                <td>{{ item|accepted_radio }}%</td>
                            </tr>
                        {% endfor %}
                        </tbody>
@@ -59,7 +61,11 @@
                            <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
                            公告
                        </h3></div>
-                    <div class="panel-body"> Panel content</div>
+                    <div class="panel-body">
+                        {% for item in announcements %}
+                            {{ forloop.counter }}.&nbsp;&nbsp;<a href="/announcement/{{ item.id }}/" target="_blank">{{ item.title }}</a>
+                        {% endfor %}
+                    </div>
                </div>
                <div class="panel panel-info">
                    <div class="panel-heading">
@@ -69,26 +75,12 @@
                        </h3>
                    </div>
                    <ul class="list-group">
-                        <li class="list-group-item problem-tag">
-                            <span class="badge">14</span>
-                            Cras justo odio
-                        </li>
-                        <li class="list-group-item problem-tag">
-                            <span class="badge">14</span>
-                            Cras justo odio
-                        </li>
-                        <li class="list-group-item problem-tag">
-                            <span class="badge">14</span>
-                            Cras justo odio
-                        </li>
-                        <li class="list-group-item problem-tag">
-                            <span class="badge">14</span>
-                            Cras justo odio
-                        </li>
-                        <li class="list-group-item problem-tag">
-                            <span class="badge">14</span>
-                            Cras justo odio
+                        {% for item in tags %}
+                        <li class="list-group-item problem-tag" onclick="location.href='/problems/?tag={{ item.name }}'">
+                            <span class="badge">{{ item.problem_number }}</span>
+                            {{ item.name }}
                        </li>
+                        {% endfor %}
                    </ul>
                </div>

--- a/template/utils/error.html
+++ b/template/utils/error.html
@@ -1,10 +1,151 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-    <meta charset="UTF-8">
-    <title></title>
-</head>
-<body>
-{{ error }}
-</body>
-</html>
+{% extends "oj_base.html" %}
+{% block css_block %}
+    <style>
+        pre {
+            position: relative;
+            padding: 10px;
+            border: none;
+            overflow: auto;
+            line-height: 1.3;
+            max-height: 500px;
+        }
+
+        .hljs {
+            display: block;
+            padding: 0.5em;
+            background: #fdf6e3;
+            color: #657b83;
+        }
+
+        .hljs-comment,
+        .hljs-template_comment,
+        .diff .hljs-header,
+        .hljs-doctype,
+        .hljs-pi,
+        .lisp .hljs-string,
+        .hljs-javadoc {
+            color: #93a1a1;
+        }
+
+        /* Solarized Green */
+        .hljs-keyword,
+        .hljs-winutils,
+        .method,
+        .hljs-addition,
+        .css .hljs-tag,
+        .hljs-request,
+        .hljs-status,
+        .nginx .hljs-title {
+            color: #859900;
+        }
+
+        /* Solarized Cyan */
+        .hljs-number,
+        .hljs-command,
+        .hljs-string,
+        .hljs-tag .hljs-value,
+        .hljs-rules .hljs-value,
+        .hljs-phpdoc,
+        .tex .hljs-formula,
+        .hljs-regexp,
+        .hljs-hexcolor,
+        .hljs-link_url {
+            color: #2aa198;
+        }
+
+        /* Solarized Blue */
+        .hljs-title,
+        .hljs-localvars,
+        .hljs-chunk,
+        .hljs-decorator,
+        .hljs-built_in,
+        .hljs-identifier,
+        .vhdl .hljs-literal,
+        .hljs-id,
+        .css .hljs-function {
+            color: #268bd2;
+        }
+
+        /* Solarized Yellow */
+        .hljs-attribute,
+        .hljs-variable,
+        .lisp .hljs-body,
+        .smalltalk .hljs-number,
+        .hljs-constant,
+        .hljs-class .hljs-title,
+        .hljs-parent,
+        .haskell .hljs-type,
+        .hljs-link_reference {
+            color: #b58900;
+        }
+
+        /* Solarized Orange */
+        .hljs-preprocessor,
+        .hljs-preprocessor .hljs-keyword,
+        .hljs-pragma,
+        .hljs-shebang,
+        .hljs-symbol,
+        .hljs-symbol .hljs-string,
+        .diff .hljs-change,
+        .hljs-special,
+        .hljs-attr_selector,
+        .hljs-subst,
+        .hljs-cdata,
+        .clojure .hljs-title,
+        .css .hljs-pseudo,
+        .hljs-header {
+            color: #cb4b16;
+        }
+
+        /* Solarized Red */
+        .hljs-deletion,
+        .hljs-important {
+            color: #dc322f;
+        }
+
+        /* Solarized Violet */
+        .hljs-link_label {
+            color: #6c71c4;
+        }
+
+        .tex .hljs-formula {
+            background: #eee8d5;
+        }
+    </style>
+{% endblock %}
+{% block body %}
+    <div class="container">
+        <h2>出错了~~ {{ error }}</h2>
+        <hr>
+        <div class="article fmt">
+
+<pre><code class="cpp"><span class="hljs-comment">// C</span>
+<span class="hljs-preprocessor">#<span class="hljs-keyword">include</span> &lt;stdio.h&gt;</span>
+<span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span><span class="hljs-params">()</span>
+</span>{
+    <span class="hljs-built_in">printf</span>(<span class="hljs-string">"An error occurred\n"</span>);
+    <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
+}</code></pre>
+<pre><code class="cpp"><span class="hljs-comment">// C++</span>
+<span class="hljs-preprocessor">#<span class="hljs-keyword">include</span> &lt;iostream&gt;</span>
+<span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span><span class="hljs-params">()</span>
+</span>{
+    std::<span class="hljs-built_in">cout</span> &lt;&lt; <span class="hljs-string">"An error occurred"</span> &lt;&lt; std::endl;
+    <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
+}</code></pre>
+<pre><code class="java"><span class="hljs-comment">// Java</span>
+<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Main</span>
+</span>{
+    <span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">void</span> <span class="hljs-title">main</span><span class="hljs-params">(String[] args)</span>
+    </span>{
+        System.out.println(<span class="hljs-string">"An error occurred"</span>);
+    }
+}</code></pre>
+<pre><code class="js"><span class="hljs-comment">// JavaScript</span>
+<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"An error occurred\n"</span>)</code></pre>
+<pre><code class="python"><span class="hljs-comment">// Python</span>
+<span class="hljs-keyword">print</span> <span class="hljs-string">"An error occurred"</span></code></pre>
+
+                </div>
+    </div>
+{% endblock %}
--- a/template/utils/info.html
+++ b/template/utils/info.html
@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-    <meta charset="UTF-8">
-    <title></title>
-</head>
-<body>
-{{ info }}
-</body>
-</html>