Merge pull request #4 from vampirepapi/feat/add-hot-button-hot-icon

Add hot button and ShitCode tracker integration

Author: cto-new[bot]

IMPROVEMENTS.md

@@ -138,6 +138,11 @@ This document outlines the major improvements made to make the code more modern,
 3. **Better Audio Controls**: Visual feedback for play/pause state
 4. **Elegant Notifications**: No more jarring alerts
 5. **Improved UX**: Smoother interactions throughout
+6. **🔥 ShitCode Button**: New dedicated button with hot/fire icon that opens the ShitCode LeetCode problem tracker page
+   - Modern glassmorphism design matching existing buttons
+   - Opens in new tab for seamless navigation
+   - Track progress on Blind 75, NeetCode 150, and more
+   - Includes difficulty badges, video links, and confetti celebrations
 
 ## 📊 Code Metrics
 

README.md

@@ -48,10 +48,14 @@
 ### **6. Additional Resources**
    - [GitHub - Awesome Interview Questions](https://github.com/DopplerHQ/awesome-interview-questions)
 
-### **7. Mock Interviews**
+### **7. 🔥 ShitCode Problem Lists**
+   - Launch the in-app `🔥 ShitCode` button (top-right) to open the dedicated tracker.
+   - Direct link: [ShitCode Tracker](./shitcode.html)
+
+### **8. Mock Interviews**
    - Schedule and conduct mock interviews to refine your skills and receive constructive feedback.
 
-### **8. Final Review**
+### **9. Final Review**
    - Revise key topics, practice relaxation techniques, and review your interview strategies.
 
 ### Still WIP ..

css/styles.css

@@ -614,6 +614,46 @@ body.dark-mode #dark-mode-toggle:hover {
   box-shadow: 0 4px 12px rgba(100, 100, 255, 0.2);
 }
 
+/* ShitCode Button Styles */
+#shitcode-button {
+  position: fixed;
+  top: 10px;
+  right: 290px;
+  padding: 0.5rem 1rem;
+  background: rgba(255, 255, 255, 0.2);
+  color: #ffffff;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 8px;
+  cursor: pointer;
+  z-index: 2;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 500;
+  font-size: 0.9rem;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+}
+
+#shitcode-button:hover {
+  background: rgba(255, 111, 97, 0.4);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(255, 111, 97, 0.4);
+}
+
+#shitcode-button:active {
+  transform: translateY(0);
+}
+
+body.dark-mode #shitcode-button {
+  background: rgba(45, 55, 72, 0.5);
+  color: #e2e8f0;
+  border-color: rgba(226, 232, 240, 0.3);
+}
+
+body.dark-mode #shitcode-button:hover {
+  background: rgba(255, 69, 0, 0.4);
+  box-shadow: 0 4px 12px rgba(255, 69, 0, 0.4);
+}
+
 /* Adjust button positions for smaller screens */
 @media (max-width: 768px) {
   #music-toggle {
@@ -626,10 +666,19 @@ body.dark-mode #dark-mode-toggle:hover {
     padding: 0.3rem 0.7rem;
     font-size: 0.8rem;
   }
+  #shitcode-button {
+    top: 5px;
+    right: 230px;
+    padding: 0.3rem 0.7rem;
+    font-size: 0.8rem;
+  }
 }
 
 @media (max-width: 480px) {
   #dark-mode-toggle {
     right: 115px; /* Further adjust for very small screens to prevent overlap with music toggle */
   }
+  #shitcode-button {
+    right: 215px;
+  }
 }

index.html

@@ -206,6 +206,7 @@
   </audio>
   <button id="music-toggle">🔇 Play Music</button>
   <button id="dark-mode-toggle">🌙 Dark Mode</button>
+  <button id="shitcode-button">🔥 ShitCode</button>
   <script src="js/script.js"></script>
 </body>
 </html>

js/script.js

@@ -424,6 +424,22 @@ class DarkModeController {
   }
 }
 
+class ShitcodeButtonController {
+  constructor() {
+    this.button = document.getElementById('shitcode-button');
+    if (!this.button) return;
+    this.init();
+  }
+
+  init() {
+    this.button.addEventListener('click', () => this.openShitcode());
+  }
+
+  openShitcode() {
+    window.open('shitcode.html', '_blank');
+  }
+}
+
 document.addEventListener('DOMContentLoaded', () => {
   new StarryBackground('starry-bg');
   new MindMap();
@@ -432,4 +448,5 @@ document.addEventListener('DOMContentLoaded', () => {
   new SpaceBattle();
   new AudioController();
   new DarkModeController();
+  new ShitcodeButtonController();
 });