Merge pull request #696 from Shital861/main

fix: invisible input text in coordinate-polar and derivative-calculator modals

Author: steam-bell-92

web-app/css/styles.css

@@ -2812,6 +2812,7 @@ body {
     .modal-content {
         padding: 1.5rem;
         border-radius: 16px;
+        position: relative;
     }
 }
 
@@ -4191,6 +4192,12 @@ html[data-theme="dark"] body {
     transition: background 0.18s ease, transform 0.18s ease;
 }
 
+[data-theme="dark"] .card-icon {
+    background: linear-gradient(145deg, rgba(40, 40, 40, 0.8), rgba(20, 20, 20, 0.9));
+    color: var(--footer-card-color);
+    box-shadow: inset 0 1px 0 rgba(252, 176, 91, 0.08);
+    border-color: rgba(252, 176, 91, 0.1);
+
 .card-actions .btn-share {
     background: rgba(128, 104, 85, 0.06);
     color: var(--text-secondary);

web-app/js/projects.js

@@ -1183,6 +1183,110 @@ function initFlames() {
         `;
     }
 
+    
+    function showSequence() {
+        isPlayingSequence = true;
+        disableButtons(true);
+        displayContent.textContent = "Watch the sequence...";
+        
+        let i = 0;
+        const playNextEmoji = () => {
+            if (i < sequence.length) {
+                const emoji = sequence[i];
+                const button = Array.from(emojiButtons).find(btn => btn.dataset.emoji === emoji);
+                
+                if (button) {
+                    button.classList.add('active');
+                    setTimeout(() => {
+                        button.classList.remove('active');
+                        i++;
+                        setTimeout(playNextEmoji, 500);
+                    }, 600);
+                }
+            } else {
+                isPlayingSequence = false;
+                disableButtons(false);
+                userSequence = [];
+                gameActive = true;
+                displayContent.textContent = "Your turn! Click the emojis...";
+                instructionsDiv.textContent = `👆 Repeat the sequence (${sequence.length} steps)`;
+            }
+        };
+        
+        playNextEmoji();
+    }
+    
+    function startNewRound() {
+        const newEmoji = emojis[Math.floor(Math.random() * emojis.length)];
+        sequence.push(newEmoji);
+        userSequence = [];
+        
+        sequenceLengthDisplay.textContent = sequence.length;
+        setTimeout(showSequence, 500);
+    }
+    
+    function handleEmojiClick(emoji, button) {
+        if (isPlayingSequence || !gameActive) return;
+        
+        userSequence.push(emoji);
+        button.classList.add('active');
+        
+        setTimeout(() => {
+            button.classList.remove('active');
+        }, 300);
+        
+        // Check if the emoji matches
+        if (userSequence[userSequence.length - 1] !== sequence[userSequence.length - 1]) {
+            gameOver();
+            return;
+        }
+        
+        // Check if the entire sequence is correct
+        if (userSequence.length === sequence.length) {
+            score += level * 10;
+            scoreDisplay.textContent = score;
+            level++;
+            levelDisplay.textContent = level;
+            
+            instructionsDiv.textContent = "✅ Correct! Get ready for the next round...";
+            gameActive = false;
+            setTimeout(startNewRound, 1500);
+        }
+    }
+    
+    function gameOver() {
+        gameActive = false;
+        disableButtons(true);
+        instructionsDiv.textContent = `❌ Game Over! You reached Level ${level} with Score: ${score}`;
+        displayContent.textContent = `Final Score: ${score}`;
+        startBtn.textContent = "▶️ PLAY AGAIN";
+    }
+    
+    function resetGame() {
+        sequence = [];
+        userSequence = [];
+        score = 0;
+        level = 1;
+        gameActive = false;
+        isPlayingSequence = false;
+        
+        scoreDisplay.textContent = '0';
+        levelDisplay.textContent = '1';
+        sequenceLengthDisplay.textContent = '0';
+        instructionsDiv.textContent = "👇 Click START to begin the game!";
+        displayContent.textContent = "Ready to test your memory?";
+        startBtn.textContent = "▶️ START";
+        
+        disableButtons(true);
+    }
+    
+    startBtn.addEventListener('click', () => {
+        resetGame();
+        gameActive = true;
+        instructionsDiv.textContent = "Watch the sequence...";
+        startNewRound();
+    });
+
     calculateBtn.addEventListener('click', calculateFlames);
     name1Input.addEventListener('keypress', (e) => {
         if (e.key === 'Enter') calculateFlames();

web-app/js/projects/coordinate-polar-transform.js

@@ -85,13 +85,15 @@ function getCoordinatePolarTransformHTML() {
                 outline:none;
                 background-color:var(--bg-color);
                 border:1px solid white;
+                color: var(--text-color);
             }
             #cartesianY{
                 padding:15px;
                 border-radius:30px;
                 outline:none;
                 background-color:var(--bg-color);
                 border:1px solid white;
+                color: var(--text-color);
             }
             .btn-primary{
                 padding:15px;

web-app/js/projects/derivative-calculator.js

@@ -76,6 +76,7 @@ function getDerivativeCalculatorHTML() {
                 background-color:var(--bg-color);
                 outline:none;
                 border:1px solid white;
+                color: var(--text-color);
             }
             button{
                 padding:15px;