Skip to content

Commit fd7bbd0

Browse files
madhurimarawatmadhurimarawat
authored
Add Dark Mode & Improve Codebase
Implemented dark mode toggle functionality across the website with dynamic color switching using JavaScript and CSS. User's selected theme is now saved using localStorage, enabling persistence across sessions. Automatically loads saved theme on page reload.
1 parent 7334314 commit fd7bbd0

10 files changed

Lines changed: 797 additions & 153 deletions

‎docs/Astyle-Commands.html‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
*********************************************************************************************
33
* File: Astyle-Commands.html
44
* Author: Madhurima Rawat
5-
* Date: December 05, 2024
5+
* Date: May 28, 2025
66
* Description: Study resources commands website showing some comman commands used in Astyle formatter.
77
* It also features a dynamic color-changing dropdown menu using JavaScript.
88
* Version: 1.0
@@ -117,9 +117,15 @@
117117
class="fas fa-cloud-showers-heavy"></i>&nbspRainy</a>
118118
<a class="dropdown-item" href="#" onclick="changeColor('winter')"><i
119119
class="fas fa-snowflake"></i>&nbspWinter</a>
120+
<a class="dropdown-item" href="#" onclick="changeColor()"><i
121+
class="fas fa-sync-alt"></i>&nbspDefault</a>
120122
</div>
121123
</li>
122-
124+
<li class="nav-item">
125+
<a class="nav-link dark-mode-link" href="#" onclick="toggleDarkMode()" id="dark-mode-toggle">
126+
<i class="fa fa-moon"></i> <span>Dark Mode</span>
127+
</a>
128+
</li>
123129
</ul>
124130

125131
<ul class="navbar-nav ml-auto">
@@ -128,11 +134,6 @@
128134
<i class="fa fa-envelope"></i> Email
129135
</a>
130136
</li>
131-
<li class="nav-item">
132-
<a class="nav-link" href="tel:+9407959924">
133-
<i class="fa fa-phone"></i> 9407959924
134-
</a>
135-
</li>
136137
<li class="nav-item">
137138
<a class="nav-link" href="https://github.com/madhurimarawat" target="_blank">
138139
<i class="fab fa-github"></i> GitHub
@@ -143,6 +144,10 @@
143144
<i class="fab fa-linkedin"></i> LinkedIn
144145
</a>
145146
</li>
147+
<li class="nav-item">
148+
<a class="nav-link" href="https://madhurimarawat.github.io/Portfolio-Website/" target="_blank"><i
149+
class="fa fa-user"></i>Portfolio</a>
150+
</li>
146151
<li class="nav-item">
147152
<a class="nav-link" href="https://linktr.ee/madhurima_rawat" target="_blank"><i
148153
class="fa fa-link"></i>LinkTree</a>
@@ -698,7 +703,7 @@ <h2>Introduction to AStyle</h2>
698703

699704
<!-- Thank You section -->
700705

701-
<section id="thank-you" style="text-align: center; padding: 20px; background-color: #f1f1f1">
706+
<section class="thank-you">
702707
<h2>Thank You</h2>
703708
<p>
704709
Thank you for visiting this website. If you have any questions or would
@@ -707,20 +712,18 @@ <h2>Thank You</h2>
707712

708713

709714
<!-- Contact Links -->
710-
<div class="contact heading_1" style="text-align: center; padding: 10px;color: white;">
711-
<a href="mailto:rawatmadhurima@gmail.com" style="color: black"><i class="fas fa-envelope"></i> Email</a>
712-
<a class="nav-link" href="tel:+9407959924" style="color: black"><i class="fa fa-phone"></i>
713-
9407959924</a>
714-
<a href="https://github.com/madhurimarawat" style="color: black"><i class="fab fa-github"></i>
715+
<div class="contact">
716+
<a href="mailto:rawatmadhurima@gmail.com" class="contact-link"><i class="fas fa-envelope"></i>
717+
Email</a>&nbsp;
718+
<a href="https://github.com/madhurimarawat" class="contact-link"><i class="fab fa-github"></i>
715719
GitHub</a>
716720
&nbsp;
717-
&nbsp;
718-
<a href="https://www.linkedin.com/in/madhurima-rawat/" style="color: black"><i class="fab fa-linkedin"></i>
721+
<a href="https://www.linkedin.com/in/madhurima-rawat/" class="contact-link"><i class="fab fa-linkedin"></i>
719722
LinkedIn</a> &nbsp;
720-
<a href="https://linktr.ee/madhurima_rawat" target="_blank" style="color: black"><i class="fa fa-link"></i>
723+
<a href="https://linktr.ee/madhurima_rawat" target="_blank" class="contact-link"><i class="fa fa-link"></i>
721724
LinkTree</a> &nbsp;
722-
<a href="index.htm" style="color: black"><i class="fas fa-globe"></i> Portfolio</a>&nbsp;
723-
<a href="https://madhurima-devfolio.streamlit.app/" style="color: black"><i class="fas fa-code"></i>
725+
<a href="index.htm" class="contact-link"><i class="fas fa-globe"></i> Portfolio</a>&nbsp;
726+
<a href="https://madhurima-devfolio.streamlit.app/" class="contact-link"><i class="fas fa-code"></i>
724727
Devfolio</a>
725728

726729
</div>

‎docs/Git-Commands.html‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
*********************************************************************************************
33
* File: Git-Commands.html
44
* Author: Madhurima Rawat
5-
* Date: December 05, 2024
5+
* Date: May 28, 2025
66
* Description: Study resources commands website showing some comman commands used in Git.
77
* It also features a dynamic color-changing dropdown menu using JavaScript.
88
* Version: 1.0
@@ -118,8 +118,15 @@
118118
class="fas fa-cloud-showers-heavy"></i>&nbspRainy</a>
119119
<a class="dropdown-item" href="#" onclick="changeColor('winter')"><i
120120
class="fas fa-snowflake"></i>&nbspWinter</a>
121+
<a class="dropdown-item" href="#" onclick="changeColor()"><i
122+
class="fas fa-sync-alt"></i>&nbspDefault</a>
121123
</div>
122124
</li>
125+
<li class="nav-item">
126+
<a class="nav-link dark-mode-link" href="#" onclick="toggleDarkMode()" id="dark-mode-toggle">
127+
<i class="fa fa-moon"></i> <span>Dark Mode</span>
128+
</a>
129+
</li>
123130
</ul>
124131

125132
<ul class="navbar-nav ml-auto">
@@ -128,11 +135,6 @@
128135
<i class="fa fa-envelope"></i> Email
129136
</a>
130137
</li>
131-
<li class="nav-item">
132-
<a class="nav-link" href="tel:+9407959924">
133-
<i class="fa fa-phone"></i> 9407959924
134-
</a>
135-
</li>
136138
<li class="nav-item">
137139
<a class="nav-link" href="https://github.com/madhurimarawat" target="_blank">
138140
<i class="fab fa-github"></i> GitHub
@@ -143,6 +145,10 @@
143145
<i class="fab fa-linkedin"></i> LinkedIn
144146
</a>
145147
</li>
148+
<li class="nav-item">
149+
<a class="nav-link" href="https://madhurimarawat.github.io/Portfolio-Website/" target="_blank"><i
150+
class="fa fa-user"></i>Portfolio</a>
151+
</li>
146152
<li class="nav-item">
147153
<a class="nav-link" href="https://linktr.ee/madhurima_rawat" target="_blank"><i
148154
class="fa fa-link"></i>LinkTree</a>
@@ -515,7 +521,7 @@ <h2>Installing Git</h2>
515521

516522
<!-- Thank You section -->
517523

518-
<section id="thank-you" style="text-align: center; padding: 20px; background-color: #f1f1f1">
524+
<section class="thank-you">
519525
<h2>Thank You</h2>
520526
<p>
521527
Thank you for visiting this website. If you have any questions or would
@@ -524,20 +530,18 @@ <h2>Thank You</h2>
524530

525531

526532
<!-- Contact Links -->
527-
<div class="contact heading_1" style="text-align: center; padding: 10px;color: white;">
528-
<a href="mailto:rawatmadhurima@gmail.com" style="color: black"><i class="fas fa-envelope"></i> Email</a>
529-
<a class="nav-link" href="tel:+9407959924" style="color: black"><i class="fa fa-phone"></i>
530-
9407959924</a>
531-
<a href="https://github.com/madhurimarawat" style="color: black"><i class="fab fa-github"></i>
533+
<div class="contact">
534+
<a href="mailto:rawatmadhurima@gmail.com" class="contact-link"><i class="fas fa-envelope"></i>
535+
Email</a>&nbsp;
536+
<a href="https://github.com/madhurimarawat" class="contact-link"><i class="fab fa-github"></i>
532537
GitHub</a>
533538
&nbsp;
534-
&nbsp;
535-
<a href="https://www.linkedin.com/in/madhurima-rawat/" style="color: black"><i class="fab fa-linkedin"></i>
539+
<a href="https://www.linkedin.com/in/madhurima-rawat/" class="contact-link"><i class="fab fa-linkedin"></i>
536540
LinkedIn</a> &nbsp;
537-
<a href="https://linktr.ee/madhurima_rawat" target="_blank" style="color: black"><i class="fa fa-link"></i>
541+
<a href="https://linktr.ee/madhurima_rawat" target="_blank" class="contact-link"><i class="fa fa-link"></i>
538542
LinkTree</a> &nbsp;
539-
<a href="index.htm" style="color: black"><i class="fas fa-globe"></i> Portfolio</a>&nbsp;
540-
<a href="https://madhurima-devfolio.streamlit.app/" style="color: black"><i class="fas fa-code"></i>
543+
<a href="index.htm" class="contact-link"><i class="fas fa-globe"></i> Portfolio</a>&nbsp;
544+
<a href="https://madhurima-devfolio.streamlit.app/" class="contact-link"><i class="fas fa-code"></i>
541545
Devfolio</a>
542546

543547
</div>

‎docs/Hadoop-Commands.html‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
*********************************************************************************************
33
* File: Hadoop-Commands.html
44
* Author: Madhurima Rawat
5-
* Date: December 05, 2024
5+
* Date: May 28, 2025
66
* Description: Study resources commands website showing some comman commands used in Hadoop.
77
* It also features a dynamic color-changing dropdown menu using JavaScript.
88
* Version: 1.0
@@ -118,8 +118,15 @@
118118
class="fas fa-cloud-showers-heavy"></i>&nbspRainy</a>
119119
<a class="dropdown-item" href="#" onclick="changeColor('winter')"><i
120120
class="fas fa-snowflake"></i>&nbspWinter</a>
121+
<a class="dropdown-item" href="#" onclick="changeColor()"><i
122+
class="fas fa-sync-alt"></i>&nbspDefault</a>
121123
</div>
122124
</li>
125+
<li class="nav-item">
126+
<a class="nav-link dark-mode-link" href="#" onclick="toggleDarkMode()" id="dark-mode-toggle">
127+
<i class="fa fa-moon"></i> <span>Dark Mode</span>
128+
</a>
129+
</li>
123130
</ul>
124131

125132
<ul class="navbar-nav ml-auto">
@@ -128,11 +135,6 @@
128135
<i class="fa fa-envelope"></i> Email
129136
</a>
130137
</li>
131-
<li class="nav-item">
132-
<a class="nav-link" href="tel:+9407959924">
133-
<i class="fa fa-phone"></i> 9407959924
134-
</a>
135-
</li>
136138
<li class="nav-item">
137139
<a class="nav-link" href="https://github.com/madhurimarawat" target="_blank">
138140
<i class="fab fa-github"></i> GitHub
@@ -143,6 +145,10 @@
143145
<i class="fab fa-linkedin"></i> LinkedIn
144146
</a>
145147
</li>
148+
<li class="nav-item">
149+
<a class="nav-link" href="https://madhurimarawat.github.io/Portfolio-Website/" target="_blank"><i
150+
class="fa fa-user"></i>Portfolio</a>
151+
</li>
146152
<li class="nav-item">
147153
<a class="nav-link" href="https://linktr.ee/madhurima_rawat" target="_blank"><i
148154
class="fa fa-link"></i>LinkTree</a>
@@ -446,18 +452,19 @@ <h2>Example Workflow</h2>
446452
correctly:</p>
447453
<p><strong>
448454
<i>For Datanode: </i>
449-
</strong><a href="http://localhost:9864/" target="_blank">http://localhost:9864/</a>
455+
</strong><a href="http://localhost:9864/" target="_blank"
456+
class="command-link">http://localhost:9864/</a>
450457
</p>
451458
<p>
452-
<i><strong>For Namenode: </strong></i><a href="http://localhost:9870/"
453-
target="_blank">http://localhost:9870/</a>
459+
<i><strong>For Namenode: </strong></i><a href="http://localhost:9870/" target="_blank" class="
460+
command-link">http://localhost:9870/</a>
454461
</p>
455462
<p>This URL provides information about the HDFS NameNode status and allows you to browse the file system.
456463
</p>
457464

458465
<p>YARN Verification</p>
459466
<p>To verify that YARN is running correctly, navigate to the YARN ResourceManager web UI:</p>
460-
<p><a href="http://localhost:8088/" target="_blank">http://localhost:8088/</a></p>
467+
<p><a href="http://localhost:8088/" target="_blank" class="command-link">http://localhost:8088/</a></p>
461468
<p>This URL provides information about the cluster status, including running applications and available
462469
resources.
463470
</p>
@@ -467,7 +474,7 @@ <h2>Example Workflow</h2>
467474

468475
<!-- Thank You section -->
469476

470-
<section id="thank-you" style="text-align: center; padding: 20px; background-color: #f1f1f1">
477+
<section class="thank-you">
471478
<h2>Thank You</h2>
472479
<p>
473480
Thank you for visiting this website. If you have any questions or would
@@ -476,20 +483,18 @@ <h2>Thank You</h2>
476483

477484

478485
<!-- Contact Links -->
479-
<div class="contact heading_1" style="text-align: center; padding: 10px;color: white;">
480-
<a href="mailto:rawatmadhurima@gmail.com" style="color: black"><i class="fas fa-envelope"></i> Email</a>
481-
<a class="nav-link" href="tel:+9407959924" style="color: black"><i class="fa fa-phone"></i>
482-
9407959924</a>
483-
<a href="https://github.com/madhurimarawat" style="color: black"><i class="fab fa-github"></i>
486+
<div class="contact">
487+
<a href="mailto:rawatmadhurima@gmail.com" class="contact-link"><i class="fas fa-envelope"></i>
488+
Email</a>&nbsp;
489+
<a href="https://github.com/madhurimarawat" class="contact-link"><i class="fab fa-github"></i>
484490
GitHub</a>
485491
&nbsp;
486-
&nbsp;
487-
<a href="https://www.linkedin.com/in/madhurima-rawat/" style="color: black"><i class="fab fa-linkedin"></i>
492+
<a href="https://www.linkedin.com/in/madhurima-rawat/" class="contact-link"><i class="fab fa-linkedin"></i>
488493
LinkedIn</a> &nbsp;
489-
<a href="https://linktr.ee/madhurima_rawat" target="_blank" style="color: black"><i class="fa fa-link"></i>
494+
<a href="https://linktr.ee/madhurima_rawat" target="_blank" class="contact-link"><i class="fa fa-link"></i>
490495
LinkTree</a> &nbsp;
491-
<a href="index.htm" style="color: black"><i class="fas fa-globe"></i> Portfolio</a>&nbsp;
492-
<a href="https://madhurima-devfolio.streamlit.app/" style="color: black"><i class="fas fa-code"></i>
496+
<a href="index.htm" class="contact-link"><i class="fas fa-globe"></i> Portfolio</a>&nbsp;
497+
<a href="https://madhurima-devfolio.streamlit.app/" class="contact-link"><i class="fas fa-code"></i>
493498
Devfolio</a>
494499

495500
</div>

0 commit comments

Comments
 (0)