Revamp the main index page and templates folder structure

report/templates/base.html

@@ -1,5 +1,5 @@
 {#
-Copyright 2024 Google LLC
+Copyright 2025 Google LLC
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -22,101 +22,139 @@
 * {
     box-sizing: border-box;
 }
-
 html {
     line-height: 1.15;
 }
-
 body {
-    font-family: sans-serif;
+    font-family: 'Overpass Mono', monospace;
     font-size: 16px;
+    background-color: #f7f9fc;
+    color: #292929;
+}
+span {
+    font-family: 'Overpass', sans-serif;
+}
+body.dark-mode {
+    background-color: #292929;
+    color: #f7fafc;
 }
-
 table {
     border-collapse: collapse;
     border-spacing: 0;
+    overflow-x:hidden;
+    margin-top: 15px;
+    margin-bottom: 15px;
 }
-
 td, th {
-    border-right: 1px #dedede solid;
-    border-bottom: 1px #dedede solid;
+    border: 0;
     padding: 5px;
     text-align: left;
 }
+.dark-mode td, .dark-mode th {
+    border-right: 1px #3d3d3d solid;
+    border-bottom: 1px #3d3d3d solid;
+}
 td:first-child, th:first-child {
-    border-left: 1px #dedede solid;
+    border-left: 1px #a0aec0 solid;
+}
+.dark-mode td:first-child, .dark-mode th:first-child {
+    border-left: 1px #3d3d3d solid;
 }
 th {
-    border-top: 1px #dedede solid;
+    border-top: 1px #a0aec0 solid;
+}
+th:first-child {
+    border-top-left-radius: 8px;
+}
+th:last-child {
+    border-top-right-radius: 8px;
+}
+.dark-mode th {
+    border-top: 1px #3d3d3d solid;
 }
-
 tbody tr:nth-child(odd) {
-    background-color: #f4f5ff;
+    background-color: #edf2f7;
+}
+.dark-mode tbody tr:nth-child(odd) {
+    background-color: #333333;
 }
-
 .chat_prompt {
     background-color: #fff7f2;
     max-width: 50%;
     overflow: scroll;
 }
-
 .chat_response {
     background-color: #fcfff2;
     max-width: 50%;
     overflow: scroll;
     margin-left: auto;
 }
-
 .code-container {
     display: flex;
-    border: 1px solid #dedede;
-    background-color: #f8f8f8;
+    border: 1px solid #a0aec0;
+    background-color: #edf2f7;
     overflow-x: auto;
-    font-family: monospace;
+    font-family: 'Overpass Mono', monospace;
     width: fit-content;
     max-width: 100%;
 }
-
+.dark-mode .code-container {
+    background-color: #222222;
+    border: 1px solid #3d3d3d;
+}
 .line-numbers {
     margin: 0;
     padding: 0.5em;
     text-align: right;
-    background-color: #f0f0f0;
-    border-right: 1px solid #ddd;
+    background-color: #e2e8f0;
+    border-right: 1px solid #a0aec0;
     user-select: none;
     min-width: 2.5em;
-    color: #999;
+    color: #718096;
+}
+.dark-mode .line-numbers {
+    background-color: #222222;
+    border-right: 1px solid #3d3d3d;
+    color: #a0aec0;
 }
-
 .code-content {
     margin: 0;
     padding: 0.5em;
     flex-grow: 0;
 }
-
 .line-numbers span,
 .code-content code {
     display: block;
     line-height: 1.5;
     white-space: pre;
 }
+.dark-mode .code-content code {
+    color: #e2e8f0;
+}
 
 .hljs {
     background: transparent;
     padding: 0;
 }
 </style>
+<!-- tailwind -->
+<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+<!-- fonts -->
+<link href="https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Overpass:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 <!-- added highlight.js for syntax highlighting -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
-<!-- some Additional language -->
+<!-- some additional language -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/bash.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/c.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/cpp.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/java.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/python.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/rust.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/go.min.js"></script>
+<!-- alpine.js -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.10.3/cdn.min.js" defer></script>
 <script>
 document.addEventListener('DOMContentLoaded', (event) => {
     document.querySelectorAll('pre code.syntax-highlight').forEach((block) => {
@@ -125,6 +163,8 @@
 });
 </script>
 <body>
-    LLM: {{ model }}
-    {% block content %}{% endblock %}
+    <div class="container mx-auto mt-8">
+        LLM: {{ model }}
+        {% block content %}{% endblock %}
+    </div>
 </body>

report/templates/benchmark.html → report/templates/benchmark/benchmark.html

@@ -1,5 +1,5 @@
 {#
-Copyright 2024 Google LLC
+Copyright 2025 Google LLC
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,13 +15,19 @@
 #}{% extends 'base.html' %}
 
 {% block content %}
+
+{% if benchmark_css_content %}
 <style>
-td, th {
-    border-right: 1px #dedede solid;
-    padding: 5px;
-    text-align: left;
-}
+{{ benchmark_css_content | safe }}
 </style>
+{% endif %}
+
+{% if benchmark_js_content %}
+<script>
+{{ benchmark_js_content | safe }}
+</script>
+{% endif %}
+
 <h1>{{ benchmark }}</h1>
 <table>
     <tr>