AmazingFeature - [Feature/themes] Added Themes for the tool

[Kabiirk]

Hey BTC Team !
I had participated in the First BTC & really liked it. I was really looking forward to BTC2 and absolutely Love❤️ this year's theme and design. I stumbled upon this plugin while exploring the BTC2 website (My Computer > CheatCodes.txt) (Haven't used the cheats myself I swear lol) & I saw I could contribute to this, so I did ! Please let me know what you guys think !

What I did

I created a few themes for the tool which the user can switch to while using the tool. The themes currently available are :

• Light [this is the default theme which the plugin already used]
• Dark
• BTC2 (This goes with the Break The Code 2, colors taken from splash screen with clouds)

Changes in the UI:

• Increased the dialog-box width from 350px to 400px to fit the dropdown.
• Changing Title Bar color.
• Changing Icon used in Title bar as well as the Dialog body.

Coding+Design choices & Files edited

• Coding choices
  Instead of writing a separate theme.js script, I decided to use a <script> tag (writing js inline) within the body so as to reduce extra https requests for a separate .js script, which may affect the efficiency ( reference1, reference2 ) . If need be, I can create a separate theme.js, no problem with that.

• Design choices
  To adhere to the Windows98 theme used, I have changed only a few things like the Title bar color and the Icon used in Title bar as well as the Dialog Body.

• Files Edited
  The files I have edited are :

  • runhacx.html
  • main.css

• Files Added
  I have also added the following .png image files in ../dist/img/ for theming :

  • run-dark.png (for the Dark theme)
  • run-btc2.png (for the BTC2 theme)

HOW DO THEY LOOK ???

I have been talking about what I did for quite while now ! So, without further ado, here's how they look !

• Light (Default)
  
• Dark
  
• BTC2
  

Here's a short animation showing how the theme switching would work :

Let me know if any more changes are required from my end.

Regards,
KabiirK

[AaronDewes]

@Kabiirk sorry to ruin this for you, but all of the code in this repo is fake and not actually used.

[Kabiirk]

Oh lol, in any case, I got to brush up my webdev & got some good project ideas like creating something similar to 98.css. So it's all okay i guess. Plus I hadn't made any PRs in a while so that was refreshing lol

[jgmortim]

Pretty cool stuff

[radixdevs]

@Kabiirk keep up the good stuff mate, you have a really bright future ahead of you...

• Frontend Dev :)

[Kabiirk]

Thanks a lot for your kind words ! 🙌