7 files changed, 51 insertions, 31 deletions
diff --git a/services/app/assets/loading.js b/services/app/assets/loading.js
index 986fa43..4c75692 100644
--- a/services/app/assets/loading.js
+++ b/services/app/assets/loading.js
@@ -24,7 +24,7 @@ document.addEventListener('DOMContentLoaded', () => {
       .then(response => response.json())
       .then(({ aggregated_status, testcase_executions, phper_token }) => {
         if (phper_token) {
-          phperTokenElem.textContent = `バーディー！ ${phper_token}`;
+          phperTokenElem.innerHTML = `<div class="alert alert-success">バーディー！ ${phper_token}</div>`;
         }
 
         for (const ex of testcase_executions) {
diff --git a/services/app/src/App.php b/services/app/src/App.php
index 9502976..ac8ca14 100644
--- a/services/app/src/App.php
+++ b/services/app/src/App.php
@@ -296,6 +296,7 @@ final class App
             'quiz' => $quiz,
             'answers' => $answers,
             'is_ranking_hidden' => $quiz->isRankingHidden(),
+            'is_open' => $quiz->isOpenToAnswer(),
         ]);
     }
 
diff --git a/services/app/templates/_page.html.twig b/services/app/templates/_page.html.twig
index 700027d..1aeca36 100644
--- a/services/app/templates/_page.html.twig
+++ b/services/app/templates/_page.html.twig
@@ -10,15 +10,15 @@
   <body>
     <header class="container">
       <nav class="navbar">
-        <a href="{{ url_for('quiz_list') }}" class="navbar-brand">{{ site_name }}</a>
+        <a class="navbar-brand" href="{{ url_for('quiz_list') }}">{{ site_name }}</a>
       </nav>
     </header>
-    <main class="container">
-      <h1>{{ page_title }}</h1>
+    <main class="container mt-5">
+      <h1 class="mb-4">{{ page_title }}</h1>
       {% block content %}{% endblock %}
     </main>
-    <footer class="container">
-      {{ site_name }}
+    <footer class="container text-center mt-5 mb-4">
+      {{ site_name }} - PHPerKaigi 2024
     </footer>
   </body>
 </html>
diff --git a/services/app/templates/answer_list.html.twig b/services/app/templates/answer_list.html.twig
index 23f51ce..03ab438 100644
--- a/services/app/templates/answer_list.html.twig
+++ b/services/app/templates/answer_list.html.twig
@@ -13,13 +13,18 @@
   <p>
     {{ quiz.description }}
   </p>
+  {% if is_open %}
+    <p>
+      <a class="btn btn-primary" href="{{ url_for('answer_new', { qslug: quiz.slug }) }}">回答する</a>
+    </p>
+  {% endif %}
   <h2>回答一覧</h2>
   {% if answers|length == 0 %}
     <p>
       まだ回答がありません
     </p>
   {% else %}
-    <table>
+    <table class="table table-striped table-bordered">
       <thead>
         <tr>
           <th>ランク</th>
diff --git a/services/app/templates/answer_view.html.twig b/services/app/templates/answer_view.html.twig
index 9a55a20..24b5a1c 100644
--- a/services/app/templates/answer_view.html.twig
+++ b/services/app/templates/answer_view.html.twig
@@ -26,27 +26,39 @@
   <h2>実行結果</h2>
   <div class="js-phper-token">
     {% if phper_token %}
-      バーディー！ {{ phper_token }}
+      <div class="alert alert-success">
+        バーディー！ {{ phper_token }}
+      </div>
     {% endif %}
   </div>
-  <div>
+  <div class="mt-3">
     ステータス: <span class="js-aggregated-execution-status" data-answer-id="{{ answer.answer_id }}">{{ answer.execution_status.label() }}</span>
     {% if answer.execution_status.showLoadingIndicator() %}
       <div class="js-aggregated-execution-status-loading-indicator spinner-border text-primary spinner-border-sm" role="status"><span class="visually-hidden">Loading...</span></div>
     {% endif %}
   </div>
-  <table>
-    {% for ex in testcase_executions %}
-      <tr>
-        <td>テストケース {{ loop.index }}</td>
-        <td>
-          ステータス: <span class="js-testcase-execution-status" data-testcase-execution-id="{{ ex.testcase_execution_id }}">{{ ex.status.label() }}</span>
-          {% if ex.status.showLoadingIndicator() %}
-            <span class="js-testcase-execution-status-loading-indicator spinner-border text-primary spinner-border-sm" role="status" data-testcase-execution-id="{{ ex.testcase_execution_id }}"><span class="visually-hidden">Loading...</span></span>
-          {% endif %}
-        </td>
-      </tr>
-    {% endfor %}
-  </table>
+  <div class="mt-3">
+    <table class="table table-striped table-bordered">
+      <thead>
+        <tr>
+          <th>テストケース</th>
+          <th>ステータス</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for ex in testcase_executions %}
+          <tr>
+            <td>{{ loop.index }}</td>
+            <td>
+              <span class="js-testcase-execution-status" data-testcase-execution-id="{{ ex.testcase_execution_id }}">{{ ex.status.label() }}</span>
+              {% if ex.status.showLoadingIndicator() %}
+                <span class="js-testcase-execution-status-loading-indicator spinner-border text-primary spinner-border-sm" role="status" data-testcase-execution-id="{{ ex.testcase_execution_id }}"><span class="visually-hidden">Loading...</span></span>
+              {% endif %}
+            </td>
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
   <script type="module" src="{{ base_path() }}/assets/loading.js"></script>
 {% endblock %}
diff --git a/services/app/templates/quiz_list.html.twig b/services/app/templates/quiz_list.html.twig
index 2aa4f98..6142b6b 100644
--- a/services/app/templates/quiz_list.html.twig
+++ b/services/app/templates/quiz_list.html.twig
@@ -1,9 +1,11 @@
 {% extends '_page.html.twig' %}
 
 {% block content %}
-  <ul>
-    {% for quiz in quizzes %}
-      <li><a href="{{ url_for('quiz_view', { qslug: quiz.slug }) }}">問題 #{{ quiz.quiz_id }}: {{ quiz.title }}</a></li>
-    {% endfor %}
-  </ul>
+  {% for quiz in quizzes %}
+    <a class="card mb-3 text-dark text-decoration-none" href="{{ url_for('quiz_view', { qslug: quiz.slug }) }}">
+      <div class="card-body">
+        <h5 class="card-title">問題 #{{ quiz.quiz_id }}: {{ quiz.title }}</span>
+      </div>
+    </a>
+  {% endfor %}
 {% endblock %}
diff --git a/services/app/templates/quiz_view.html.twig b/services/app/templates/quiz_view.html.twig
index 0e5dee0..ade324a 100644
--- a/services/app/templates/quiz_view.html.twig
+++ b/services/app/templates/quiz_view.html.twig
@@ -12,13 +12,13 @@
   <p>
     {{ quiz.description }}
   </p>
-  <h3>実装例</h3>
-  <pre><code class="hljs language-php">{{ quiz.example_code }}</code></pre>
   {% if is_open %}
     <p>
-      <a href="{{ url_for('answer_new', { qslug: quiz.slug }) }}">回答する</a>
+      <a class="btn btn-primary" href="{{ url_for('answer_new', { qslug: quiz.slug }) }}">回答する</a>
     </p>
   {% endif %}
+  <h3>実装例</h3>
+  <pre><code class="hljs language-php">{{ quiz.example_code }}</code></pre>
   <h2>ランキング</h2>
   {% if is_ranking_hidden %}
     回答が締め切られるまで、ランキングは表示されません
@@ -27,7 +27,7 @@
       まだ正解した回答がありません
     </p>
   {% else %}
-    <table>
+    <table class="table table-striped table-bordered">
       <thead>
         <tr>
           <th>ランク</th>