From a6ff3a01288935fc103e13c98d761f94eb545eda Mon Sep 17 00:00:00 2001
From: Hareesh0-inf <hareeshking04@gmail.com>
Date: Sat, 12 Oct 2024 11:55:15 +0530
Subject: [PATCH] Added Darkmode closes #32

---
 src/static/darkmode.js      | 20 ++++++++++++++++++++
 src/static/style.css        | 23 +++++++++++++++++++++--
 src/templates/index.html    |  4 +++-
 src/templates/login.html    |  3 +++
 src/templates/register.html |  3 +++
 src/templates/results.html  |  3 +++
 src/templates/vote.html     |  3 +++
 7 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 src/static/darkmode.js

diff --git a/src/static/darkmode.js b/src/static/darkmode.js
new file mode 100644
index 0000000..91d8ee4
--- /dev/null
+++ b/src/static/darkmode.js
@@ -0,0 +1,20 @@
+
+function addDarkmodeWidget() {
+const options = {
+    bottom: '64px', // default: '32px'
+    right: '32px', // default: '32px'
+    left: 'unset', // default: 'unset'
+    time: '0.5s', // default: '0.3s'
+    mixColor: '#e5e5e5', // default: '#fff'    
+    backgroundColor: '#fff',  // default: '#fff'
+    buttonColorDark: '#fff',  // default: '#100f2c'
+    buttonColorLight: '#3C3D37', // default: '#fff'
+    saveInCookies: true, // default: true,
+    label: '🌖', // default: ''
+    autoMatchOsTheme: true // default: true
+  }
+  
+const darkmode = new Darkmode(options);
+darkmode.showWidget();
+}
+window.addEventListener('load', addDarkmodeWidget);
diff --git a/src/static/style.css b/src/static/style.css
index 799200b..292ef19 100644
--- a/src/static/style.css
+++ b/src/static/style.css
@@ -35,6 +35,14 @@ h1 {
     border: 1px solid #ccc;
 }
 
+.darkmode--activated .candidate-select {
+    border: 1px solid #787878;
+}
+
+.candidate-select:hover {
+    background-color:  #E0E0E0;
+}
+
 .count {
     margin: 1.3rem 0;
 }
@@ -62,11 +70,10 @@ h1 {
 }
 
 .vote-results th, .vote-results td {
-    border: 1px solid #ddd;
+    border: 1px solid #000000;
     padding: 8px;
     text-align: center;
 }
-
 .vote-results th {
     background-color: #007bff;
     color: white;
@@ -124,6 +131,18 @@ h1 {
     margin-bottom: 20px;
 }
 
+.darkmode--activated .input-field {
+    padding: 10px;
+    font-size: 16px;
+    border-radius: 4px;
+    border: 1px solid #787878;
+    margin-bottom: 20px;
+}
+
+.input-field:hover {
+    background-color: #D5D5D5;
+}
+
 .btn-submit {
     padding: 10px 20px;
     background-color: #007bff;
diff --git a/src/templates/index.html b/src/templates/index.html
index 7373b36..e39bf3f 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -50,7 +50,9 @@ <h3>Vote Counts:</h3>
     <!-- Bootstrap JS & Popper.js -->
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
-
+    <!-- Script for Darkmode -->
+    <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
+    <script src="../static/darkmode.js"></script>
     <!-- Script to handle voting functionality -->
     <script>
         document.getElementById("voteButton").addEventListener("click", function() {
diff --git a/src/templates/login.html b/src/templates/login.html
index e6a6ab7..918d4b4 100644
--- a/src/templates/login.html
+++ b/src/templates/login.html
@@ -40,4 +40,7 @@ <h2>Login</h2>
         <p>Don't have an account? <a href="/register">Register here</a>.</p>
     </div>
 </body>
+<!-- Script for Darkmode -->
+<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
+<script src="../static/darkmode.js"></script>
 </html>
diff --git a/src/templates/register.html b/src/templates/register.html
index 199317b..12b6901 100644
--- a/src/templates/register.html
+++ b/src/templates/register.html
@@ -27,4 +27,7 @@ <h2>Register</h2>
         <p>Already have an account? <a href="/login">Login here</a>.</p>
     </div>
 </body>
+<!-- Script for Darkmode -->
+<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
+<script src="../static/darkmode.js"></script>
 </html>
diff --git a/src/templates/results.html b/src/templates/results.html
index 656b057..600e19a 100644
--- a/src/templates/results.html
+++ b/src/templates/results.html
@@ -38,4 +38,7 @@ <h2>Winner(s):</h2>
         <a href="/logout" class="btn-logout">Logout</a>
     </div>
 </body>
+<!-- Script for Darkmode -->
+<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
+<script src="../static/darkmode.js"></script>
 </html>
diff --git a/src/templates/vote.html b/src/templates/vote.html
index e02c893..139f2f9 100644
--- a/src/templates/vote.html
+++ b/src/templates/vote.html
@@ -37,4 +37,7 @@ <h2 class="count">Total Vote Counts: {{ total_vote_count }}</h2>
         <a href="/logout" class="btn-logout">Logout</a>
     </div>
 </body>
+<!-- Script for Darkmode -->
+<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
+<script src="../static/darkmode.js"></script>
 </html>