Skip to content

Commit 9beafa8

Browse files
steam-bell-92steam-bell-92
authored
Merge pull request #261 from prasad-0007/ui/standardize-lucide-icons
[UI/UX] Standardize Web App UI to use Lucide SVG Icons (Fixes #251)
2 parents 062e399 + d67ffc1 commit 9beafa8

1 file changed

Lines changed: 22 additions & 15 deletions

File tree

‎web-app/index.html‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -437,6 +437,10 @@
437437
color: #3b82f6;
438438
}
439439

440+
.game-icon-bird {
441+
color: #38bdf8;
442+
}
443+
440444
/* Math Icons */
441445

442446
.math-icon-fibonacci {
@@ -536,22 +540,22 @@ <h2 class="hero-title">Learn Python the Fun Way!</h2>
536540
<div class="hero-features" role="tablist" aria-label="Project categories">
537541
<button class="feature-badge tab active" data-category="all"
538542
role="tab" aria-selected="true" tabindex="0">
539-
<span class="feature-icon">🌟</span>
543+
<span class="feature-icon"><i data-lucide="star"></i></span>
540544
<span class="feature-label">All Projects</span>
541545
</button>
542546
<button class="feature-badge tab" data-category="games"
543547
role="tab" aria-selected="false" tabindex="-1">
544-
<span class="feature-icon">🎮</span>
548+
<span class="feature-icon"><i data-lucide="gamepad-2"></i></span>
545549
<span class="feature-label">Games</span>
546550
</button>
547551
<button class="feature-badge tab" data-category="math"
548552
role="tab" aria-selected="false" tabindex="-1">
549-
<span class="feature-icon">🔢</span>
553+
<span class="feature-icon"><i data-lucide="hash"></i></span>
550554
<span class="feature-label">Math</span>
551555
</button>
552556
<button class="feature-badge tab" data-category="utilities"
553557
role="tab" aria-selected="false" tabindex="-1">
554-
<span class="feature-icon">🔐</span>
558+
<span class="feature-icon"><i data-lucide="lock"></i></span>
555559
<span class="feature-label">Utilities</span>
556560
</button>
557561
<!--
@@ -562,14 +566,14 @@ <h2 class="hero-title">Learn Python the Fun Way!</h2>
562566
-->
563567
<button class="feature-badge tab" data-category="playground" id="playgroundTab"
564568
role="tab" aria-selected="false" tabindex="-1">
565-
<span class="feature-icon">🐍</span>
569+
<span class="feature-icon"><i data-lucide="terminal"></i></span>
566570
<span class="feature-label">Playground</span>
567571
</button>
568572
</div>
569573

570574
<button class="btn-random-project" id="randomProjectBtn"
571575
title="Discover a random project!">
572-
<i class="fas fa-dice"></i> Random Project 🎲
576+
<i data-lucide="dice-5"></i> Random Project
573577
</button>
574578
</div>
575579
</div>
@@ -583,7 +587,9 @@ <h2 class="hero-title">Learn Python the Fun Way!</h2>
583587
<!-- GAMES -->
584588
<div class="project-card" data-category="games" data-project="rock-paper-scissor"
585589
data-tags="game,random,choice,strategy,decision">
586-
<div class="card-icon">🪨</div>
590+
<div class="card-icon game-icon-rps">
591+
<i data-lucide="scissors"></i>
592+
</div>
587593
<h3>Rock Paper Scissors</h3>
588594
<p>Battle against the computer!</p>
589595
<button class="btn-play">Try It</button>
@@ -667,7 +673,9 @@ <h3>Password Forge</h3>
667673

668674
<div class="project-card" data-category="games" data-project="math-quiz"
669675
data-tags="game,math,quiz,mcq,lives,streak">
670-
<div class="card-icon">🧠</div>
676+
<div class="card-icon game-icon-brain">
677+
<i data-lucide="brain"></i>
678+
</div>
671679
<h3>Math Quiz</h3>
672680
<p>MCQ quiz with lives, streaks & difficulty levels!</p>
673681
<button class="btn-play">Try It</button>
@@ -701,17 +709,14 @@ <h3>Whack-a-Mole</h3>
701709
</div>
702710

703711
<div class="project-card" data-category="games" data-project="flappy-game">
704-
<div class="card-icon">🐦</div>
712+
<div class="card-icon game-icon-bird">
713+
<i data-lucide="bird"></i>
714+
</div>
705715
<h3>Flappy Game</h3>
706716
<p>Dodge the incoming balls and survive!</p>
707717
<button class="btn-play">Try It</button>
708718
</div>
709719

710-
<div class="project-card" data-category="math" data-project="fibonacci"
711-
data-tags="math,sequence,series,loops,recursion">
712-
<div class="project-card" data-category="games" data-project="game2048"
713-
data-tags="game,puzzle,2048,logic,tiles">
714-
<div class="card-icon">🟦</div>
715720
<div class="project-card" data-category="games" data-project="2048-game"
716721
data-tags="game,puzzle,2048,logic,tiles">
717722
<div class="card-icon game-icon-puzzle">
@@ -725,7 +730,9 @@ <h3>2048 Game</h3>
725730
<!-- MATH -->
726731
<div class="project-card" data-category="math" data-project="fibonacci"
727732
data-tags="math,sequence,series,loops,recursion">
728-
<div class="card-icon">✨</div>
733+
<div class="card-icon math-icon-fibonacci">
734+
<i data-lucide="sparkles"></i>
735+
</div>
729736
<h3>Fibonacci Series</h3>
730737
<p>Generate Fibonacci sequences!</p>
731738
<button class="btn-play">Try It</button>

0 commit comments

Comments
 (0)