added darkmode functionality

thammegowda · Mar 6, 2024 · cde114a · cde114a
1 parent 5fcb1d3
commit cde114a
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 146 deletions.
diff --git a/nllb_serve/static/css/bootstrap.min.css b/nllb_serve/static/css/bootstrap.min.css
diff --git a/nllb_serve/static/img/forkme.svg b/nllb_serve/static/img/forkme.svg
diff --git a/nllb_serve/static/js/bootstrap.bundle.min.js b/nllb_serve/static/js/bootstrap.bundle.min.js
diff --git a/nllb_serve/templates/base.html b/nllb_serve/templates/base.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-bs-theme="light">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -24,11 +24,6 @@
       position: relative;
       bottom: 0;
     }
-    #forkme {
-      position: absolute;
-      top:0;
-      right:0
-    }
   </style>
 
   {% if environ['GA_GTAG'] is defined %}
@@ -43,7 +38,7 @@
 </head>
 <body>
 <div id="wrap">
-  <nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <nav class="navbar navbar-expand-lg navbar ">
     <a class="navbar-brand" href="{{ url_for('nmt.index')}}">Home</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
             aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -56,27 +51,39 @@
         </li>
       </ul>
     </div>
-    <a href="https://github.com/thammegowda/nllb-serve" target="_blank">
-      <img id="forkme" height="160" src="{{url_for('nmt.static', filename='img/forkme.svg')}}" alt="Fork me on GitHub" />
-    </a>
+    <div class="form-check form-switch">
+      <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
+      <label class="form-check-label" for="flexSwitchCheckDefault">☀️🌙</label>
+    </div>
 
   </nav>
   <div class="container-fluid" style="overflow-y: scroll;">
     {% block content %} {% endblock %}
   </div>
-
   <div class="push">
   </div>
-
 </div>
 
 <!-- style="position: absolute; bottom: 0; left: 0; right: 0; padding: 2px; margin: 2px"-->
 <footer class="pagefooter alert-secondary" style="text-align: center">
-  <p class="font-weight-light float-none" style="margin: 0; padding: 3px"><small>Web App created by Thamme Gowda (2022 )</small></p>
+  <p class="font-weight-light float-none" style="margin: 0; padding: 3px"><small>Web App created by Thamme Gowda (2022 - )
+    ‖ <a class="" href="https://github.com/thammegowda/nllb-serve" target="_blank">Fork me on Github!
+  </a></small></p>
+
 </footer>
 
 <!-- Optional JavaScript -->
 <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+<script>
+  document.getElementById('flexSwitchCheckDefault').addEventListener('click',()=>{
+    if (document.documentElement.getAttribute('data-bs-theme') == 'dark') {
+        document.documentElement.setAttribute('data-bs-theme','light')
+    }
+    else {
+        document.documentElement.setAttribute('data-bs-theme','dark')
+    }
+})
+</script>
 <script src="{{url_for('nmt.static', filename='js/jquery-3.5.1.min.js')}}"></script>
 <script src="{{url_for('nmt.static', filename='js/bootstrap.bundle.min.js')}}"></script>
 </body>

diff --git a/nllb_serve/templates/index.html b/nllb_serve/templates/index.html
@@ -1,30 +1,39 @@
 {% extends 'base.html' %}
 
 {% block content %}
-<h1 class="text-center">{% block title %} No Language Left Behind {% endblock %}</h1>
-  <br/>
-  <p class="text-center">Currently serving <code>{{model_id}}</code></p>
-  <br/>
+<p class="text-center fs-3">{% block title %} No Language Left Behind {% endblock %}</p>
+  <p class="text-center fs-5">Currently serving <code>{{model_id}}</code></p>
   <form id="source-form" class="form container" action="./translate">
-  <div class="row">
-    <div class="form-group col-5 ">
-      <label for="src_lang" class="col-sm-2">From:</label>
-      <select class="form-control col-sm-3" id="src_lang" style="display: inline">
-        {% for src_lang in src_langs %}
-        <option {% if def_src_lang == src_lang %} selected {% endif %}>{{src_lang}} </option>
-        {% endfor %}
-      </select>
-    </div>
-    <button id="button-swap" type="button" class="btn btn btn-outline col-sml-1">Swap 🔁</i></button>
-    <div class="form-group col-5">
-      <label for="tgt_lang col-sm-2 col-form-label">To:</label>
-      <select class="form-control col-sm-3" id="tgt_lang" style="display: inline">
-        {% for tgt_lang in tgt_langs %}
-        <option {% if def_tgt_lang == tgt_lang %} selected {% endif %}>{{tgt_lang}}</option>
-        {% endfor %}
-      </select>
-    </div>
+    <div class="row">
+      <div class="form-group col-5">
+          <div class="row">
+              <label for="src_lang" class="form-label col-sm-2">From:</label>
+              <div class="col-sm-3">
+                  <select class="form-select" id="src_lang">
+                      {% for src_lang in src_langs %}
+                      <option {% if def_src_lang == src_lang %} selected {% endif %}>{{src_lang}}</option>
+                      {% endfor %}
+                  </select>
+              </div>
+          </div>
+      </div>
+      <div class="col-2">
+          <button id="button-swap" type="button" class="btn btn-outline">Swap 🔁</button>
+      </div>
+      <div class="form-group col-5">
+          <div class="row">
+              <label for="tgt_lang" class="form-label col-sm-2">To:</label>
+              <div class="col-sm-3">
+                  <select class="form-select" id="tgt_lang">
+                      {% for tgt_lang in tgt_langs %}
+                      <option {% if def_tgt_lang == tgt_lang %} selected {% endif %}>{{tgt_lang}}</option>
+                      {% endfor %}
+                  </select>
+              </div>
+          </div>
+      </div>
   </div>
+  <br>
 
   <div class="row">
     <div class="col-6 alert alert-primary">
@@ -39,7 +48,7 @@ <h1 class="text-center">{% block title %} No Language Left Behind {% endblock %}
         <textarea id="target" rows="6" class="form-control form-control-lg form-control-plaintext"
           placeholder="Translation (to-appear)"></textarea>
       </div>
-      <div id="loading-progress" style="display: none;" class="spinner-border text-success float-left" role="status">
+      <div id="loading-progress" style="display: none;" class="spinner-border text-success float-right" role="status">
         <span class="sr-only">Loading...</span>
       </div>
       <p class="text float-left" id="time-taken">...</p>