Skip to content

Commit cde114a

Browse files
sgowdakssgowdaks
committed
added darkmode functionality
1 parent 5fcb1d3 commit cde114a

File tree

5 files changed

+61
-146
lines changed

5 files changed

+61
-146
lines changed

‎nllb_serve/static/css/bootstrap.min.css

+5-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎nllb_serve/static/img/forkme.svg

-102
This file was deleted.

‎nllb_serve/static/js/bootstrap.bundle.min.js

+4-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎nllb_serve/templates/base.html

+20-13
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="en">
2+
<html lang="en" data-bs-theme="light">
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -24,11 +24,6 @@
2424
position: relative;
2525
bottom: 0;
2626
}
27-
#forkme {
28-
position: absolute;
29-
top:0;
30-
right:0
31-
}
3227
</style>
3328

3429
{% if environ['GA_GTAG'] is defined %}
@@ -43,7 +38,7 @@
4338
</head>
4439
<body>
4540
<div id="wrap">
46-
<nav class="navbar navbar-expand-lg navbar-light bg-light">
41+
<nav class="navbar navbar-expand-lg navbar ">
4742
<a class="navbar-brand" href="{{ url_for('nmt.index')}}">Home</a>
4843
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
4944
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -56,27 +51,39 @@
5651
</li>
5752
</ul>
5853
</div>
59-
<a href="https://github.com/thammegowda/nllb-serve" target="_blank">
60-
<img id="forkme" height="160" src="{{url_for('nmt.static', filename='img/forkme.svg')}}" alt="Fork me on GitHub" />
61-
</a>
54+
<div class="form-check form-switch">
55+
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
56+
<label class="form-check-label" for="flexSwitchCheckDefault">☀️🌙</label>
57+
</div>
6258

6359
</nav>
6460
<div class="container-fluid" style="overflow-y: scroll;">
6561
{% block content %} {% endblock %}
6662
</div>
67-
6863
<div class="push">
6964
</div>
70-
7165
</div>
7266

7367
<!-- style="position: absolute; bottom: 0; left: 0; right: 0; padding: 2px; margin: 2px"-->
7468
<footer class="pagefooter alert-secondary" style="text-align: center">
75-
<p class="font-weight-light float-none" style="margin: 0; padding: 3px"><small>Web App created by Thamme Gowda (2022 )</small></p>
69+
<p class="font-weight-light float-none" style="margin: 0; padding: 3px"><small>Web App created by Thamme Gowda (2022 - )
70+
‖ <a class="" href="https://github.com/thammegowda/nllb-serve" target="_blank">Fork me on Github!
71+
</a></small></p>
72+
7673
</footer>
7774

7875
<!-- Optional JavaScript -->
7976
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
77+
<script>
78+
document.getElementById('flexSwitchCheckDefault').addEventListener('click',()=>{
79+
if (document.documentElement.getAttribute('data-bs-theme') == 'dark') {
80+
document.documentElement.setAttribute('data-bs-theme','light')
81+
}
82+
else {
83+
document.documentElement.setAttribute('data-bs-theme','dark')
84+
}
85+
})
86+
</script>
8087
<script src="{{url_for('nmt.static', filename='js/jquery-3.5.1.min.js')}}"></script>
8188
<script src="{{url_for('nmt.static', filename='js/bootstrap.bundle.min.js')}}"></script>
8289
</body>

‎nllb_serve/templates/index.html

+32-23
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,39 @@
11
{% extends 'base.html' %}
22

33
{% block content %}
4-
<h1 class="text-center">{% block title %} No Language Left Behind {% endblock %}</h1>
5-
<br/>
6-
<p class="text-center">Currently serving <code>{{model_id}}</code></p>
7-
<br/>
4+
<p class="text-center fs-3">{% block title %} No Language Left Behind {% endblock %}</p>
5+
<p class="text-center fs-5">Currently serving <code>{{model_id}}</code></p>
86
<form id="source-form" class="form container" action="./translate">
9-
<div class="row">
10-
<div class="form-group col-5 ">
11-
<label for="src_lang" class="col-sm-2">From:</label>
12-
<select class="form-control col-sm-3" id="src_lang" style="display: inline">
13-
{% for src_lang in src_langs %}
14-
<option {% if def_src_lang == src_lang %} selected {% endif %}>{{src_lang}} </option>
15-
{% endfor %}
16-
</select>
17-
</div>
18-
<button id="button-swap" type="button" class="btn btn btn-outline col-sml-1">Swap 🔁</i></button>
19-
<div class="form-group col-5">
20-
<label for="tgt_lang col-sm-2 col-form-label">To:</label>
21-
<select class="form-control col-sm-3" id="tgt_lang" style="display: inline">
22-
{% for tgt_lang in tgt_langs %}
23-
<option {% if def_tgt_lang == tgt_lang %} selected {% endif %}>{{tgt_lang}}</option>
24-
{% endfor %}
25-
</select>
26-
</div>
7+
<div class="row">
8+
<div class="form-group col-5">
9+
<div class="row">
10+
<label for="src_lang" class="form-label col-sm-2">From:</label>
11+
<div class="col-sm-3">
12+
<select class="form-select" id="src_lang">
13+
{% for src_lang in src_langs %}
14+
<option {% if def_src_lang == src_lang %} selected {% endif %}>{{src_lang}}</option>
15+
{% endfor %}
16+
</select>
17+
</div>
18+
</div>
19+
</div>
20+
<div class="col-2">
21+
<button id="button-swap" type="button" class="btn btn-outline">Swap 🔁</button>
22+
</div>
23+
<div class="form-group col-5">
24+
<div class="row">
25+
<label for="tgt_lang" class="form-label col-sm-2">To:</label>
26+
<div class="col-sm-3">
27+
<select class="form-select" id="tgt_lang">
28+
{% for tgt_lang in tgt_langs %}
29+
<option {% if def_tgt_lang == tgt_lang %} selected {% endif %}>{{tgt_lang}}</option>
30+
{% endfor %}
31+
</select>
32+
</div>
33+
</div>
34+
</div>
2735
</div>
36+
<br>
2837

2938
<div class="row">
3039
<div class="col-6 alert alert-primary">
@@ -39,7 +48,7 @@ <h1 class="text-center">{% block title %} No Language Left Behind {% endblock %}
3948
<textarea id="target" rows="6" class="form-control form-control-lg form-control-plaintext"
4049
placeholder="Translation (to-appear)"></textarea>
4150
</div>
42-
<div id="loading-progress" style="display: none;" class="spinner-border text-success float-left" role="status">
51+
<div id="loading-progress" style="display: none;" class="spinner-border text-success float-right" role="status">
4352
<span class="sr-only">Loading...</span>
4453
</div>
4554
<p class="text float-left" id="time-taken">...</p>

0 commit comments

Comments
 (0)