Merge pull request #685 from Shashank-8p/fix/issue-617-armstrong-ui

fix(ui): Resolves Issue #617 by stripping rogue local CSS overrides i…

Author: steam-bell-92

web-app/js/projects.js

@@ -1503,15 +1503,15 @@ function initCollatz() {
     generateSequence();
 }
 
-function getArmstrongHTML() { 
+function getArmstrongHTML() {
     return `
         <div class="project-content">
             <h2>💎 Armstrong Number Checker</h2>
             <p class="project-desc">Check if a number equals the sum of its digits raised to the power of the number of digits</p>
             <div class="armstrong-container">
                 <div class="input-section">
-                    <input type="number" id="armstrongNumber" placeholder="Enter a number" min="0">
-                    <button class="btn-check" id="checkArmstrong">💎 Check</button>
+                    <input type="number" class="number-input" id="armstrongNumber" placeholder="Enter a number" min="0">
+                    <button class="btn-primary" id="checkArmstrong">💎 Check</button>
                 </div>
                 
                 <div class="result-display" id="armstrongResult"></div>
@@ -1641,10 +1641,52 @@ function getArmstrongHTML() {
                 border-color: var(--primary-color);
                 transform: translateY(-2px);
             }
+
+            /* --- NEW STANDARDIZED INPUT STYLES --- */
+            .input-section {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                gap: 1rem;
+                margin-top: 1rem;
+            }
+
+            .number-input {
+                width: 60%;
+                padding: 0.8rem 1.2rem;
+                border-radius: 10px;
+                border: 2px solid var(--border-color);
+                font-size: 1.1rem;
+                background-color: var(--bg-color);
+                color: var(--text-color);
+                transition: var(--transition);
+            }
+
+            .number-input:focus {
+                outline: none;
+                border-color: var(--primary-color);
+                box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
+            }
+
+            .btn-primary {
+                padding: 0.8rem 1.5rem;
+                border: none;
+                border-radius: 10px;
+                background: var(--primary-color);
+                color: white;
+                cursor: pointer;
+                font-size: 1.1rem;
+                font-weight: bold;
+                transition: var(--transition);
+            }
+
+            .btn-primary:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+            }
         </style>
     `;
 }
-
 function initArmstrong() {
     const numberInput = document.getElementById('armstrongNumber');
     const checkBtn = document.getElementById('checkArmstrong');