From f0fe31e6d3a813b6d25d5bc349f51a6e1608948a Mon Sep 17 00:00:00 2001
From: rufan0427 <zj24@mails.tsinghua.edu.cn>
Date: Sun, 2 Feb 2025 13:28:45 +0800
Subject: [PATCH] Update contest.html

change to bootstrap 5
---
 cms/server/contest/templates/contest.html | 290 +++++++++-------------
 1 file changed, 119 insertions(+), 171 deletions(-)

diff --git a/cms/server/contest/templates/contest.html b/cms/server/contest/templates/contest.html
index 5e26068ea6..458338b5dd 100644
--- a/cms/server/contest/templates/contest.html
+++ b/cms/server/contest/templates/contest.html
@@ -5,159 +5,130 @@
 {% endblock title %}
 
 {% block js %}
-
-
     <script>
-var LANGUAGES = {
-{% for lang in contest.languages %}
-    '{{ lang }}': {
-{% for extension in (lang|to_language).source_extensions %}
-        '{{ extension }}': true,
-{% endfor %}
-    },
-{% endfor %}
-};
+        var LANGUAGES = {
+        {% for lang in contest.languages %}
+            '{{ lang }}': {
+            {% for extension in (lang|to_language).source_extensions %}
+                '{{ extension }}': true,
+            {% endfor %}
+            },
+        {% endfor %}
+        };
 
-{% if participation is undefined %}
-var utils = new CMS.CWSUtils("{{ url() }}", "{{ contest_url() }}", "{{ contest.name }}",
-                             0, 0, 0, 0, 0);
-{% else %}
-// FIXME use Date objects
-var utils = new CMS.CWSUtils("{{ url() }}", "{{ contest_url() }}", "{{ contest.name }}",
-                             {{ now|make_timestamp }},
-                             {# What we do is: if timezone is +HH:MM we return the UNIX timestamp + 3600*HH + 60*MM. #}
-                             {{ now.replace(tzinfo=utc).astimezone(timezone).replace(tzinfo=none)|make_timestamp }},
-                             {{ current_phase_begin|make_timestamp }},
-                             {{ current_phase_end|make_timestamp }},
-                             {{ actual_phase }});
-$(document).ready(function () {
-    utils.update_time({% if contest.per_user_time is not none %}true{% else %}false{% endif %});
-    var timer = setInterval(function() {
-        utils.update_time({% if contest.per_user_time is not none %}true{% else %}false{% endif %}, timer);
-    }, 1000);
-    utils.update_unread_count(0{% if page == "communication" %}, 0{% endif %});
-    utils.update_notifications(true);
-    setInterval(function() { utils.update_notifications(); }, 30000);
-    $('#main').css('top', $('#navigation_bar').outerHeight());
-});
-    {% endif %}
+        {% if participation is undefined %}
+        var utils = new CMS.CWSUtils("{{ url() }}", "{{ contest_url() }}", "{{ contest.name }}",
+                                     0, 0, 0, 0, 0);
+        {% else %}
+        var utils = new CMS.CWSUtils("{{ url() }}", "{{ contest_url() }}", "{{ contest.name }}",
+                                     {{ now|make_timestamp }},
+                                     {{ now.replace(tzinfo=utc).astimezone(timezone).replace(tzinfo=none)|make_timestamp }},
+                                     {{ current_phase_begin|make_timestamp }},
+                                     {{ current_phase_end|make_timestamp }},
+                                     {{ actual_phase }});
+        $(document).ready(function () {
+            utils.update_time({% if contest.per_user_time is not none %}true{% else %}false{% endif %});
+            var timer = setInterval(function() {
+                utils.update_time({% if contest.per_user_time is not none %}true{% else %}false{% endif %}, timer);
+            }, 1000);
+            utils.update_unread_count(0{% if page == "communication" %}, 0{% endif %});
+            utils.update_notifications(true);
+            setInterval(function() { utils.update_notifications(); }, 30000);
+            $('#main').css('top', $('#navigation_bar').outerHeight());
+        });
+        {% endif %}
 
-{% block additional_js %}{% endblock additional_js %}
+        {% block additional_js %}{% endblock additional_js %}
     </script>
 {% endblock js %}
 
 {% block body %}
-        <div id="navigation_bar" class="navbar navbar-fixed-top">
-            <div class="navbar-inner">
-                <div class="container">
-                    <a class="brand" href="{{ contest_url() }}">{{ contest.description }}</a>
-{% if available_translations|length > 1 %}
-                    <p class="navbar-text pull-right">
-                        <select id="lang" class="form-control btn btn-info" onchange="utils.switch_lang()">
-                            <option value=""{% if cookie_translation is none %} selected{% endif %}>{% trans lang=automatic_translation.name %}Automatic ({{ lang }}){% endtrans %}</option>
-                        {% for lang_code, t in available_translations|dictsort(by="key") %}
-                            <option value="{{ lang_code }}"{% if t == cookie_translation %} selected{% endif %}>{{ t.name }}</option>
-                        {% endfor %}
-                        </select>
-                    </p>
-{% endif %}
-{% if participation is defined %}
-                    <form action="{{ contest_url("logout") }}" method="POST" class="navbar-form pull-right">
-                        {{ xsrf_form_html|safe }}
-                        <button type="submit" class="btn btn-warning">{% trans %}Logout{% endtrans %}</button>
-                    </form>
-                    <p class="navbar-text pull-right">
-                        {% trans first_name=user.first_name,
-                                 last_name=user.last_name,
-                                 username=user.username %}
-                            Logged in as <strong>{{ first_name }} {{ last_name }}</strong> <em>({{ username }})</em>
-                        {% endtrans %}
-                    </p>
-{% endif %}
-                </div>
+    <div id="navigation_bar" class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="{{ contest_url() }}">{{ contest.description }}</a>
+            {% if available_translations|length > 1 %}
+            <div class="navbar-text ml-auto">
+                <select id="lang" class="form-select" onchange="utils.switch_lang()">
+                    <option value=""{% if cookie_translation is none %} selected{% endif %}>
+                        {% trans lang=automatic_translation.name %}Automatic ({{ lang }}){% endtrans %}
+                    </option>
+                    {% for lang_code, t in available_translations|dictsort(by="key") %}
+                        <option value="{{ lang_code }}"{% if t == cookie_translation %} selected{% endif %}>
+                            {{ t.name }}
+                        </option>
+                    {% endfor %}
+                </select>
             </div>
+            {% endif %}
+            {% if participation is defined %}
+            <form action="{{ contest_url("logout") }}" method="POST" class="d-flex">
+                {{ xsrf_form_html|safe }}
+                <button type="submit" class="btn btn-warning ml-2">{% trans %}Logout{% endtrans %}</button>
+            </form>
+            <div class="navbar-text ml-3">
+                {% trans first_name=user.first_name,
+                         last_name=user.last_name,
+                         username=user.username %}
+                    Logged in as <strong>{{ first_name }} {{ last_name }}</strong> <em>({{ username }})</em>
+                {% endtrans %}
+            </div>
+            {% endif %}
         </div>
-{% if participation is undefined %}
-    {% if handler.get_argument("login_error", "") != "" %}
+    </div>
+
+    {% if participation is undefined %}
+        {% if handler.get_argument("login_error", "") != "" %}
         <div id="notifications" class="notifications">
-            <div class="alert alert-block alert-error notification">
-                <a class="close" data-dismiss="alert" href="#">&#xD7;</a>
+            <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                 <h4 class="alert-heading">{% trans %}Failed to log in.{% endtrans %}</h4>
             </div>
         </div>
-    {% endif %}
+        {% endif %}
         <div class="login_container">
-            <div class="login_box hero-unit">
+            <div class="login_box p-5">
                 <h1>{% trans %}Welcome{% endtrans %}</h1>
                 <p>{% trans %}Please log in{% endtrans %}</p>
-                <form class="form-horizontal" action="{{ contest_url("login") }}" method="POST">
+                <form class="form" action="{{ contest_url("login") }}" method="POST">
                     {{ xsrf_form_html|safe }}
                     {% set next_page = handler.get_argument("next", none) %}
                     {% if next_page is not none %}
                     <input type="hidden" name="next" value="{{ next_page }}">
                     {% endif %}
-                    <fieldset>
-                        <div class="control-group">
-                            <label class="control-label" for="username">{% trans %}Username{% endtrans %}</label>
-                            <div class="controls">
-                                <input type="text" class="input-xlarge" name="username" id="username">
-                            </div>
-                        </div>
-                        <div class="control-group">
-                            <label class="control-label" for="password">{% trans %}Password{% endtrans %}</label>
-                            <div class="controls">
-                                <input type="password" class="input-xlarge" name="password" id="password">
-                            </div>
-                        </div>
-                        <div class="control-group">
-                            <div class="controls">
-                                <button type="submit" class="btn btn-primary btn-large">{% trans %}Login{% endtrans %}</button>
-                                <button type="reset" class="btn btn-large">{% trans %}Reset{% endtrans %}</button>
-                            </div>
-                        </div>
-                    </fieldset>
+                    <div class="mb-3">
+                        <label for="username" class="form-label">{% trans %}Username{% endtrans %}</label>
+                        <input type="text" class="form-control" name="username" id="username">
+                    </div>
+                    <div class="mb-3">
+                        <label for="password" class="form-label">{% trans %}Password{% endtrans %}</label>
+                        <input type="password" class="form-control" name="password" id="password">
+                    </div>
+                    <button type="submit" class="btn btn-primary">{% trans %}Login{% endtrans %}</button>
+                    <button type="reset" class="btn btn-secondary">{% trans %}Reset{% endtrans %}</button>
                 </form>
                 {% if contest.allow_registration %}
-                <p style="margin: 9px 0 0;">
+                <p class="mt-3">
                     {% trans %}Don't have an account?{% endtrans %} <a href="{{ contest_url('register') }}">{% trans %}Register{% endtrans %}</a>
                 </p>
                 {% endif %}
             </div>
         </div>
-{% else %}
+    {% else %}
         <div id="notifications" class="notifications"></div>
-        <!-- Some hidden divs to provide translations of strings used by JS -->
-        <div style="display: none" id="translation_new_message">
-            {% trans %}New message{% endtrans %}
-        </div>
-        <div style="display: none" id="translation_new_announcement">
-            {% trans %}New announcement{% endtrans %}
-        </div>
-        <div style="display: none" id="translation_new_answer">
-            {% trans %}New answer{% endtrans %}
-        </div>
-        <div style="display: none" id="translation_unread">
-            {% trans %}%d unread{% endtrans %}
-        </div>
-        <div style="display: none" id="translation_until_contest_starts">
-            {% trans %}Until contest starts:{% endtrans %}
-        </div>
-        <div style="display: none" id="translation_until_contest_ends">
-            {% trans %}Until contest ends:{% endtrans %}
-        </div>
-        <div style="display: none" id="translation_until_analysis_starts">
-            {% trans %}Until analysis starts:{% endtrans %}
-        </div>
-        <div style="display: none" id="translation_until_analysis_ends">
-            {% trans %}Until analysis ends:{% endtrans %}
-        </div>
-        <div style="display: none" id="translation_time_left">
-            {% trans %}Time left:{% endtrans %}
-        </div>
-        <!-- End -->
+        <!-- Some hidden divs for translations used by JS -->
+        <div style="display: none" id="translation_new_message">{% trans %}New message{% endtrans %}</div>
+        <div style="display: none" id="translation_new_announcement">{% trans %}New announcement{% endtrans %}</div>
+        <div style="display: none" id="translation_new_answer">{% trans %}New answer{% endtrans %}</div>
+        <div style="display: none" id="translation_unread">{% trans %}%d unread{% endtrans %}</div>
+        <div style="display: none" id="translation_until_contest_starts">{% trans %}Until contest starts:{% endtrans %}</div>
+        <div style="display: none" id="translation_until_contest_ends">{% trans %}Until contest ends:{% endtrans %}</div>
+        <div style="display: none" id="translation_until_analysis_starts">{% trans %}Until analysis starts:{% endtrans %}</div>
+        <div style="display: none" id="translation_until_analysis_ends">{% trans %}Until analysis ends:{% endtrans %}</div>
+        <div style="display: none" id="translation_time_left">{% trans %}Time left:{% endtrans %}</div>
+
         <div id="main" class="container">
             <div class="row">
-                <div class="span3">
+                <div class="col-md-3">
                     <h3 id="server_time_box">
                         <span id="server_time_label">{% trans %}Server time:{% endtrans %}</span>
                         <span id="server_time"></span>
@@ -166,57 +137,34 @@ <h3 id="countdown_box">
                         <span id="countdown_label"></span>
                         <span id="countdown"></span>
                     </h3>
-                    <div class="well" style="padding: 8px 0;">
-                        <ul class="nav nav-list">
-
-                            <li{% if page == "overview" %} class="active"{% endif %}>
-                                <a href="{{ contest_url() }}">{% trans %}Overview{% endtrans %}</a>
-                            </li>
-                            <li{% if page == "communication" %} class="active"{% endif %}>
-                                <a href="{{ contest_url("communication") }}">{% trans %}Communication{% endtrans %}
-                                    <span id="unread_count" class="label label-warning no_unread"></span>
-                                </a>
-                            </li>
-    {% if actual_phase == 0 or actual_phase == 3 or participation.unrestricted %}
-        {% for t_iter in contest.tasks %}
-                            <li class="nav-header">
-                                {{ t_iter.name }}
-                            </li>
-                            <li{% if page == "task_description" and task == t_iter %} class="active"{% endif %}>
-                                <a href="{{ contest_url("tasks", t_iter.name, "description") }}">{% trans %}Statement{% endtrans %}</a>
-                            </li>
-                            <li{% if page == "task_submissions" and task == t_iter %} class="active"{% endif %}>
-                                <a href="{{ contest_url("tasks", t_iter.name, "submissions") }}">{% trans %}Submissions{% endtrans %}</a>
-                            </li>
-        {% endfor %}
-    {% endif %}
-                            <li class="divider"></li>
-                            <li{% if page == "documentation" %} class="active"{% endif %}>
-                                <a href="{{ contest_url("documentation") }}">{% trans %}Documentation{% endtrans %}</a>
-                            </li>
-    {% if actual_phase == 0 or participation.unrestricted %}{# FIXME maybe >= 0? #}
-        {% if testing_enabled %}
-                            <li{% if page == "test_interface" %} class="active"{% endif %}>
-                                <a href="{{ contest_url("testing") }}">{% trans %}Testing{% endtrans %}</a>
-                            </li>
-        {% endif %}
-        {% if printing_enabled %}
-                            <li{% if page == "printing" %} class="active"{% endif %}>
-                                <a href="{{ contest_url("printing") }}">{% trans %}Printing{% endtrans %}</a>
-                            </li>
-        {% endif %}
-    {% endif %}
-                        </ul>
+                    <div class="list-group">
+                        <a href="{{ contest_url() }}" class="list-group-item{% if page == 'overview' %} active{% endif %}">
+                            {% trans %}Overview{% endtrans %}
+                        </a>
+                        <a href="{{ contest_url('communication') }}" class="list-group-item{% if page == 'communication' %} active{% endif %}">
+                            {% trans %}Communication{% endtrans %}
+                            <span id="unread_count" class="badge bg-warning text-dark"></span>
+                        </a>
+                        {% if actual_phase == 0 or actual_phase == 3 or participation.unrestricted %}
+                            {% for t_iter in contest.tasks %}
+                                <div class="list-group-item">
+                                    <h5>{{ t_iter.name }}</h5>
+                                    <a href="{{ contest_url('tasks', t_iter.name, 'description') }}" class="list-group-item">
+                                        {% trans %}Statement{% endtrans %}
+                                    </a>
+                                    <a href="{{ contest_url('tasks', t_iter.name, 'submissions') }}" class="list-group-item">
+                                        {% trans %}Submissions{% endtrans %}
+                                    </a>
+                                </div>
+                            {% endfor %}
+                        {% endif %}
+                        <a href="{{ contest_url('documentation') }}" class="list-group-item{% if page == 'documentation' %} active{% endif %}">
+                            {% trans %}Documentation{% endtrans %}
+                        </a>
                     </div>
-                    <span class="license_notice">
-                    <a href="https://github.com/cms-dev/cms" rel="author noreferrer" target="_blank">{% trans %}Contest Management System{% endtrans %}</a>
-                    {% trans %}is released under the{% endtrans %}
-                    <a href="https://www.gnu.org/licenses/agpl" rel="license noreferrer" target="_blank">{% trans %}GNU Affero General Public License{% endtrans %}</a>.
-                    </span>
                 </div>
-    {% block core %}{% endblock core %}
+                {% block core %}{% endblock core %}
             </div>
         </div>
-
-{% endif %}
+    {% endif %}
 {% endblock body %}