diff --git a/web-app/css/styles.css b/web-app/css/styles.css index 97de1fb..6dce1d6 100644 --- a/web-app/css/styles.css +++ b/web-app/css/styles.css @@ -1419,57 +1419,54 @@ body { .projects-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); - gap: 0.85rem; + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + gap: 1.2rem; margin-top: 2rem; + align-items: stretch; } .project-card { position: relative; - display: grid; - grid-template-columns: auto 1fr; - align-items: start; - column-gap: 0.8rem; - row-gap: 0.2rem; - background: transparent; - padding: 0.95rem 1rem; - border-radius: 10px; - text-align: left; - border: 1px solid transparent; - box-shadow: none; - transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; - cursor: pointer; + display: flex; + flex-direction: column; + align-items: flex-start; + width: 100%; + box-sizing: border-box; + + background: rgba(255,255,255,0.03); + padding: 1.2rem; + border-radius: 16px; + + border: 1px solid rgba(255,255,255,0.08); + + transition: all 0.25s ease; overflow: hidden; - animation: fadeIn 0.6s ease; - z-index: 1; + + min-height: 220px; } .project-card::after { content: 'launch'; - grid-column: 2; + margin-top: auto; + display: inline-block; + color: var(--accent-color); - font-size: 0.78rem; + font-size: 0.8rem; font-weight: 700; - letter-spacing: 0.02em; - opacity: 0.78; - transition: opacity 0.2s ease, transform 0.2s ease; + + opacity: 0.8; + transition: transform 0.2s ease, opacity 0.2s ease; } /* Gradient border on hover */ .project-card::before { - content: '◉'; - grid-row: 1 / span 3; - color: var(--accent-color); - font-size: 0.95rem; - line-height: 1.7; - opacity: 0.9; + display: none; } .project-card:hover { - transform: translateY(-2px); - background: color-mix(in srgb, var(--surface-color) 74%, transparent); - border-color: var(--border-color); - box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08); + transform: translateY(-4px); + border-color: rgba(34, 197, 94, 0.3); + box-shadow: 0 10px 30px rgba(0,0,0,0.08); } .project-card:hover::after { @@ -1485,53 +1482,47 @@ body { .card-icon { width: 72px; height: 72px; - margin: 0 auto 1rem; + display: flex; align-items: center; justify-content: center; border-radius: 20px; - background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(74, 222, 128, 0.10)); - transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); - font-size: 2.25rem; - filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2)); + + background: linear-gradient( + 135deg, + rgba(34, 197, 94, 0.12), + rgba(74, 222, 128, 0.10) + ); + + margin-bottom: 1rem; + + font-size: 2rem; } -.card-icon svg { width: 34px; height: 34px; stroke-width: 2.2; } +.card-icon svg { + width: 34px; + height: 34px; +} .project-card:hover .card-icon { animation: none; } .project-card h3 { - grid-column: 2; - font-size: 0.98rem; - line-height: 1.25; - margin-bottom: 0.18rem; - color: var(--text-color); - font-weight: 700; + font-size: 1.05rem; + margin-bottom: 0.5rem; + line-height: 1.3; } .project-card p { - grid-column: 2; + font-size: 0.9rem; + line-height: 1.5; color: var(--text-secondary); - margin-bottom: 0; - font-size: 0.84rem; - line-height: 1.35; + margin-bottom: 1rem; } .btn-play { - grid-column: 2; - justify-self: start; - background: transparent; - color: var(--accent-color); - border: none; - padding: 0; - border-radius: 0; - cursor: pointer; - font-size: 0; - font-weight: 700; - transition: color 0.2s ease; - width: auto; + display: none; } .project-card:hover .btn-play { diff --git a/web-app/index.html b/web-app/index.html index def5f9a..a2342d6 100644 --- a/web-app/index.html +++ b/web-app/index.html @@ -955,14 +955,7 @@

Simon Says

-
-
- -
-

Fibonacci Series

-

Generate Fibonacci sequences!

- +

Math Quiz

MCQ quiz with lives, streaks & difficulty levels!

diff --git a/web-app/js/projects.js b/web-app/js/projects.js index afc1da6..e1aa5bd 100644 --- a/web-app/js/projects.js +++ b/web-app/js/projects.js @@ -7,7 +7,7 @@ function getProjectHTML(projectName) { 'rock-paper-scissor': () => getRockPaperScissorHTML(), 'dice-rolling': () => getDiceRollingHTML(), 'coin-flip': () => getCoinFlipHTML(), - 'blackjack-21': () => getBlackjackHTML(), + 'Blackjack-21': () => getBlackjackHTML(), 'number-guessing': () => getNumberGuessingHTML(), 'hangman': () => getHangmanHTML(), 'word-scramble': () => getWordScrambleHTML(), @@ -28,7 +28,7 @@ function getProjectHTML(projectName) { 'tower-of-hanoi': () => getTowerOfHanoiHTML(), 'number-converter': () => getNumberConverterHTML(), 'typing-speed-tester': () => getTypingSpeedTesterHTML(), - 'snake-game': () => getsnakeGameHTML(), + 'snake-game': () => getSnakeGameHTML(), 'password-forge': () => getPasswordForgeHTML(), 'math-quiz': () => getMathQuizHTML(), 'whack-a-mole': () => getWhackaMoleHTML(), @@ -54,7 +54,7 @@ function initializeProject(projectName) { 'rock-paper-scissor': initRockPaperScissor, 'dice-rolling': initDiceRolling, 'coin-flip': initCoinFlip, - 'Blackjack-21' : initBlackjack, + 'blackjack-21' : initBlackjack, 'number-guessing': initNumberGuessing, 'hangman': initHangman, 'flames': initFlames, @@ -1525,59 +1525,6 @@ function initCalculator() { // ============================================ // FIBONACCI // ============================================ -function getFibonacciHTML() { - return ` -
-

✨ Fibonacci Series

-
-
- - -
- -
- - -
-
- - - `; -} function initFibonacci() { const termsInput = document.getElementById('fibTerms'); @@ -3380,181 +3327,197 @@ function getTowerOfHanoiHTML() { Number of Disks: - - + + + +
- +
Moves: 0
Optimal: 7
- +
- - `; } +function initTowerOfHanoi() { + + const canvas = document.getElementById('hanoiCanvas'); + const ctx = canvas.getContext('2d'); + + const solveBtn = document.getElementById('solveBtn'); + const resetBtn = document.getElementById('resetHanoi'); + + const diskInput = document.getElementById('diskCount'); + + const moveCountEl = document.getElementById('moveCount'); + const optimalMovesEl = document.getElementById('optimalMoves'); + + let towers = [[], [], []]; + + let moveCount = 0; + let isAnimating = false; + + const diskHeight = 25; + const maxDiskWidth = 160; + + const towerX = [200, 400, 600]; + const baseY = 350; - //Reset animation state + const colors = [ + '#ef4444', + '#f97316', + '#eab308', + '#22c55e', + '#06b6d4', + '#3b82f6', + '#8b5cf6' + ]; + + function initializeGame() { + + const diskCount = parseInt(diskInput.value); + + towers = [[], [], []]; + + moveCount = 0; isAnimating = false; solveBtn.disabled = false; - + for (let i = diskCount; i >= 1; i--) { towers[0].push(i); } - - optimalMovesEl.textContent = Math.pow(2, diskCount) - 1; + moveCountEl.textContent = '0'; + optimalMovesEl.textContent = Math.pow(2, diskCount) - 1; drawTowers(); } - + function drawTowers() { ctx.clearRect(0, 0, canvas.width, canvas.height); - - // Draw bases and poles + + // poles ctx.fillStyle = '#64748b'; for (let i = 0; i < 3; i++) { - // Pole + ctx.fillRect(towerX[i] - 5, baseY - 200, 10, 200); - // Base + ctx.fillRect(towerX[i] - 80, baseY, 160, 10); } - - // Draw disks + + // disks for (let tower = 0; tower < 3; tower++) { for (let disk = 0; disk < towers[tower].length; disk++) { const diskSize = towers[tower][disk]; - const diskWidth = (maxDiskWidth * diskSize) / diskCount; + + const diskWidth = + (maxDiskWidth * diskSize) / + parseInt(diskInput.value); + const x = towerX[tower] - diskWidth / 2; - const y = baseY - (disk + 1) * diskHeight; - - // Disk with gradient - const gradient = ctx.createLinearGradient(x, y, x + diskWidth, y + diskHeight); - gradient.addColorStop(0, colors[diskSize - 1]); - gradient.addColorStop(1, colors[diskSize - 1] + 'aa'); - - ctx.fillStyle = gradient; - ctx.fillRect(x, y, diskWidth, diskHeight - 2); - - // Border + + const y = + baseY - + (disk + 1) * diskHeight; + + ctx.fillStyle = colors[diskSize - 1]; + + ctx.fillRect( + x, + y, + diskWidth, + diskHeight - 2 + ); + ctx.strokeStyle = '#1e293b'; - ctx.lineWidth = 2; - ctx.strokeRect(x, y, diskWidth, diskHeight - 2); - - // Number + + ctx.strokeRect( + x, + y, + diskWidth, + diskHeight - 2 + ); + ctx.fillStyle = 'white'; ctx.font = 'bold 12px Arial'; ctx.textAlign = 'center'; - ctx.fillText(diskSize, towerX[tower], y + diskHeight / 2 + 4); + + ctx.fillText( + diskSize, + towerX[tower], + y + 16 + ); } } } - + async function moveDisk(from, to) { - if(shouldStop) return; const disk = towers[from].pop(); towers[to].push(disk); moveCount++; moveCountEl.textContent = moveCount; - + drawTowers(); - await new Promise(resolve => setTimeout(resolve, 500)); + + await new Promise(resolve => + setTimeout(resolve, 500) + ); } - + async function solveHanoi(n, from, to, aux) { if (n === 1) { await moveDisk(from, to); return; } - + await solveHanoi(n - 1, from, aux, to); await moveDisk(from, to); await solveHanoi(n - 1, aux, to, from); } - + async function solve() { if (isAnimating) return; - return projects[projectName] || '

Project Coming Soon!

'; -} + isAnimating = true; + + solveBtn.disabled = true; + + const diskCount = parseInt(diskInput.value); + + await solveHanoi( + diskCount, + 0, + 2, + 1 + ); + + isAnimating = false; + + solveBtn.disabled = false; + } + + solveBtn.addEventListener('click', solve); + + resetBtn.addEventListener( + 'click', + initializeGame + ); + + diskInput.addEventListener( + 'change', + initializeGame + ); + + initializeGame(); } function getTicTacToeHTML() {