chg: [website] Various improvements to the default CSS file and to so…

…me Jinja templates.
cve-search · Oct 1, 2024 · 09ab04a · 09ab04a
1 parent 32c9bb4
commit 09ab04a
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 23 deletions.
diff --git a/website/web/static/css/custom.css → website/web/static/css/theme.css b/website/web/static/css/custom.css → website/web/static/css/theme.css
@@ -1,16 +1,24 @@
 html {
     position: relative;
     min-height: 100%;
-  }
-  body {
-    /* Margin bottom by footer height */
-    margin-bottom: 60px;
-    padding-top: 0px;
-    background-color: rgb(246, 248, 250);
-  }
-  img {
-    padding: 5px;
-  }
+}
+
+body[data-theme="light"] {
+  /* Margin bottom by footer height */
+  margin-bottom: 60px;
+  padding-top: 0px;
+  background-color: rgb(246, 248, 250);
+}
+
+img {
+  padding: 5px;
+}
+
+.choices__list {
+  color: black;
+}
+
+
   /* Sticky footer */
   .footer {
     position: absolute;

diff --git a/website/web/templates/bundles/bundle.html b/website/web/templates/bundles/bundle.html
@@ -43,12 +43,11 @@ <h2>Vulnerabilities included in this bundle</h2>
   {% endfor %}
 </ul>
 {% if bundle.meta %}
-<h2>Meta</h2>
+<h2>Maeta</h2>
 <pre id="jsoncontainer">{{ bundle.meta | tojson(indent=2) }}</pre>
 {% endif %}
 <h2>Author</h2>
 <a href="{{ url_for('user_bp.profile', login=bundle.author.login) }}">{{ bundle.author.name }}</a>
-<br /><br />
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     jsonContainer = document.getElementById("jsoncontainer");

diff --git a/website/web/templates/main.html b/website/web/templates/main.html
@@ -1,7 +1,7 @@
 {% from 'bootstrap5/utils.html' import render_messages %}
 {% from 'bootstrap5/utils.html' import render_icon %}
 <!doctype html>
-<html lang="en">
+<html lang="en" data-bs-theme="light">
   <head>
     {% block head %}
     <!-- Required meta tags -->
@@ -32,7 +32,7 @@
     {% block styles %}
     <!-- Bootstrap CSS -->
     {{ bootstrap.load_css() }}
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}" />
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}" />
     {% endblock %}
 
     <title>{% block title %}{% endblock%}</title>
@@ -54,6 +54,9 @@
             <div class="collapse navbar-collapse" id="navbarNav">
               <ul class="navbar-nav mr-auto w-100 justify-content-end">
                 {%block navbar_links%}
+                <li class="nav-item"></li>
+                  <a class="nav-link" id="btnThemeSwitch" href="#" title="Switch to dark theme."><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-toggle-off" viewBox="0 0 16 16"><path d="M11 4a4 4 0 0 1 0 8H8a5 5 0 0 0 2-4 5 5 0 0 0-2-4zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8M0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5"/></svg></a>
+                </li>
                 <li class="nav-item">
                   <a class="nav-link" href="{{url_for('home_bp.search')}}">Search</a>
                 </li>
@@ -128,6 +131,8 @@
       </div>
     </main>
 
+    <br /><br />
+
     <footer class="footer bg-light">
       <div class="container">
         <div class="row">
@@ -150,9 +155,49 @@
       </div>
     </footer>
 
-    {% block scripts %}
-    <!-- Optional JavaScript -->
-    {{ bootstrap.load_js() }}
-    {% endblock %}
+{% block scripts %}
+<!-- Optional JavaScript -->
+{{ bootstrap.load_js() }}
+{% endblock %}
+  <script>
+    function getCookie(name) {
+      var nameEQ = name + "=";
+      var ca = document.cookie.split(';');
+      for(var i=0;i < ca.length;i++) {
+          var c = ca[i];
+          while (c.charAt(0)==' ') c = c.substring(1,c.length);
+          if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+      }
+      return null;
+    }
+
+    if (getCookie("theme") == null) {
+      document.cookie = "theme=light; path=/";
+    }
+    document.documentElement.setAttribute('data-bs-theme', getCookie("theme"));
+    if (getCookie("theme") == 'light') {
+      document.getElementById('btnThemeSwitch').innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-toggle-off" viewBox="0 0 16 16"><path d="M11 4a4 4 0 0 1 0 8H8a5 5 0 0 0 2-4 5 5 0 0 0-2-4zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8M0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5"/></svg>';
+      document.getElementById('btnThemeSwitch').setAttribute('title', 'Switch to dark theme.');
+    } else {
+      document.getElementById('btnThemeSwitch').innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-toggle-on" viewBox="0 0 16 16"><path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8"/></svg>';
+      document.getElementById('btnThemeSwitch').setAttribute('title', 'Switch to light theme.');
+    }
+    document.addEventListener("DOMContentLoaded", function() {
+      document.getElementById('btnThemeSwitch').addEventListener('click',()=>{
+        if (document.documentElement.getAttribute('data-bs-theme') == 'dark') {
+          document.documentElement.setAttribute('data-bs-theme','light')
+          document.getElementById('btnThemeSwitch').innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-toggle-off" viewBox="0 0 16 16"><path d="M11 4a4 4 0 0 1 0 8H8a5 5 0 0 0 2-4 5 5 0 0 0-2-4zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8M0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5"/></svg>';
+          document.getElementById('btnThemeSwitch').setAttribute('title', 'Switch to dark theme.');
+          document.cookie = "theme=light; path=/";
+        }
+        else {
+          document.documentElement.setAttribute('data-bs-theme','dark');
+          document.getElementById('btnThemeSwitch').innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-toggle-on" viewBox="0 0 16 16"><path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8"/></svg>';
+          document.getElementById('btnThemeSwitch').setAttribute('title', 'Switch to light theme.');
+          document.cookie = "theme=dark; path=/";
+        }
+      })
+    });
+  </script>
   </body>
 </html>
diff --git a/website/web/templates/search.html b/website/web/templates/search.html
@@ -130,7 +130,6 @@ <h1>
   <br />
 </div>
 <form class="row g-3" role="form" method="get" action="search" enctype="multipart/form-data">
-  <!-- <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/> -->
   <input type="text" class="form-control" id="vendor" name="vendor" value="{{vendor}}" hidden>
 
   <div class="row">

diff --git a/website/web/templates/vulnerability_templates.html b/website/web/templates/vulnerability_templates.html
@@ -95,7 +95,7 @@ <h6 class="card-subtitle mb-2 text-body-secondary">
       <div class="row">
           <div class="col-md-2 fw-bold">Modified</div><div class="col">{{ vulnerability_data['cveMetadata']['dateUpdated'] | string_to_datetime('%Y-%m-%d %H:%M') }}</div>
       </div>
-      {% set severity_css = {"Low": "fw-bold bg-success", "Medium": "fw-bold bg-warning", "High": "fw-bold bg-danger text-light", "Critical": "fw-bold bg-danger text-light"} %}
+      {% set severity_css = {"Low": "fw-bold bg-success", "Medium": "fw-bold bg-warning text-dark", "High": "fw-bold bg-danger text-light", "Critical": "fw-bold bg-danger text-light"} %}
       {# trying to find the CVSS metric in cna.metrics #}
       {% if 'cna' in vulnerability_data['containers'] or 'adp' in vulnerability_data['containers'] %}
       <div class="row">
@@ -299,7 +299,7 @@ <h6 class="card-subtitle mb-2 text-body-secondary">
     <div class="row">
       <div class="col-md-2 fw-bold" data-bs-toggle="tooltip" data-bs-placement="right" title="The Common Vulnerability Scoring System (CVSS) provides a way to capture the principal characteristics of a vulnerability and produce a numerical score reflecting its severity.">Severity <span style="color: green;">?</span></div>
       <div class="col">
-        {% set severity_css = {"Low": "fw-bold bg-success", "Medium": "fw-bold bg-warning", "High": "fw-bold bg-danger text-light", "Critical": "fw-bold bg-danger text-light"} %}
+        {% set severity_css = {"Low": "fw-bold bg-success", "Medium": "fw-bold bg-warning text-dark", "High": "fw-bold bg-danger text-light", "Critical": "fw-bold bg-danger text-light"} %}
         {% set versions = {"CVSS_V3": "3.1", "CVSS_V4": "4.0"} %}
         {% for severity in vulnerability_data['severity'] %}
           <span class="{{ severity_css[severity['score'] | cvss_severity(severity['type'])] }}">{{ severity['score'] | cvss_base_score(severity['type']) }} ({{ severity['score'] | cvss_severity(severity['type']) }})</span> - {{ severity['type'] }} - <a href="https://www.first.org/cvss/calculator/{{ versions[severity['type']] }}#{{ severity['score'] | cvss_clean_vector(severity['type']) }}" rel="noreferrer" target="_blank">{{ severity['score'] | cvss_clean_vector(severity['type']) }}</a><br />
@@ -635,7 +635,7 @@ <h6 class="card-subtitle mb-2 text-body-secondary">
     <div class="row">
       <div class="col-md-2 fw-bold" data-bs-toggle="tooltip" data-bs-placement="right" title="The Common Vulnerability Scoring System (CVSS) provides a way to capture the principal characteristics of a vulnerability and produce a numerical score reflecting its severity.">Severity <span style="color: green;">?</span></div>
       <div class="col">
-        {% set severity_css = {"Low": "fw-bold bg-success", "Medium": "fw-bold bg-warning", "High": "fw-bold bg-danger", "Critical": "fw-bold bg-danger text-light"} %}
+        {% set severity_css = {"Low": "fw-bold bg-success", "Medium": "fw-bold bg-warning text-dark", "High": "fw-bold bg-danger", "Critical": "fw-bold bg-danger text-light"} %}
         {% set versions = {"CVSS_V3": "3.1", "CVSS_V4": "4.0"} %}
         {% for severity in vulnerability_data['severity'] %}
           <span class="{{ severity_css[severity['score'] | cvss_severity(severity['type'])] }}">{{ severity['score'] | cvss_base_score(severity['type']) }} ({{ severity['score'] | cvss_severity(severity['type']) }})</span> - {{ severity['type'] }} - <a href="https://www.first.org/cvss/calculator/{{ versions[severity['type']] }}#{{ severity['score'] | cvss_clean_vector(severity['type']) }}" rel="noreferrer" target="_blank">{{ severity['score'] | cvss_clean_vector(severity['type']) }}</a><br />
@@ -712,7 +712,7 @@ <h6 class="card-subtitle mb-2 text-body-secondary">
         <div class="col-md-2 fw-bold">Modified</div><div class="col">{{ vulnerability_data['dcterms:modified'] | string_to_datetime('%Y-%m-%d %H:%M') }}</div>
     </div>
     {% if vulnerability_data['sec:cvss'] %}
-    {% set severity_css = {"Low": "fw-bold bg-success", "Medium": "fw-bold bg-warning", "High": "fw-bold bg-danger text-light", "Critical": "fw-bold bg-danger text-light"} %}
+    {% set severity_css = {"Low": "fw-bold bg-success", "Medium": "fw-bold bg-warning text-dark", "High": "fw-bold bg-danger text-light", "Critical": "fw-bold bg-danger text-light"} %}
     <div class="row">
       <div class="col-md-2 fw-bold" data-bs-toggle="tooltip" data-bs-placement="right" title="The Common Vulnerability Scoring System (CVSS) provides a way to capture the principal characteristics of a vulnerability and produce a numerical score reflecting its severity.">Severity <span style="color: green;">?</span></div>
       <div class="col">