Merge pull request steam-bell-92#137 from priya05-git/main

Title: [PR]: Add Random Project Generator Feature 🎲

Author: steam-bell-92

web-app/README.md

@@ -8,6 +8,7 @@ An interactive web application showcasing Python mini projects with beautiful vi
 - 🎨 **Beautiful UI** - Modern design with smooth animations
 - 🌓 **Dark/Light Mode** - Toggle between themes
 - 📱 **Responsive** - Works on desktop, tablet, and mobile
+- 🎲 **Random Project Generator** - Discover random projects with a single click!
 - 🚀 **Zero Setup** - Just open index.html and play!
 
 ## 🎯 Included Projects
@@ -116,10 +117,36 @@ Edit CSS variables in `css/styles.css`:
 ### UX Features
 - Smooth transitions and animations
 - Category filtering (All, Games, Math, Utilities)
+- **Random Project Generator** - Shuffles through projects based on current category
 - Modal system for focused project interaction
 - Responsive design for all screen sizes
 - Theme persistence with localStorage
 
+## 🎲 Random Project Generator
+
+### Overview
+Can't decide which project to try? Use the **Random Project 🎲** button to instantly discover a random project!
+
+### Features
+- **Smart Selection** - Only picks from projects in your current category filter
+- **Smooth Animation** - Button shuffles with a fun dice-roll animation
+- **Instant Discovery** - Opens the selected project automatically
+- **Fair Randomization** - Equal chance for all available projects
+- **Category-Aware** - Respects your current filter (Games, Math, Utilities, or All)
+
+### How to Use
+1. Click the **Random Project 🎲** button in the top navigation
+2. Watch the shuffle animation
+3. The project modal opens automatically with your randomly selected project
+4. Enjoy exploring something new!
+
+### Implementation Details
+- **Location**: Top navigation bar, next to category filters
+- **Animation**: Custom CSS shuffle animation (0.6s duration)
+- **Logic**: JavaScript function `selectRandomProject()` in `main.js`
+- **Selection**: Uses `Math.random()` for fair distribution
+- **Filtering**: Gets all visible project cards based on current category
+
 ## 📱 Browser Compatibility
 
 - ✅ Chrome (recommended)

web-app/css/styles.css

@@ -726,6 +726,76 @@ body {
     transform: scale(0.98);
 }
 
+/* Tabs Wrapper */
+.tabs-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 2rem;
+    flex-wrap: wrap;
+}
+
+.tabs-wrapper .tabs {
+    flex: 1;
+    min-width: 300px;
+}
+
+/* Random Project Button */
+.btn-random-project {
+    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
+    border: 2px solid var(--secondary-color);
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border-radius: 50px;
+    cursor: pointer;
+    font-size: 1rem;
+    font-weight: 600;
+    transition: var(--transition);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    white-space: nowrap;
+    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
+}
+
+.btn-random-project:hover {
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    border-color: var(--primary-color);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
+}
+
+.btn-random-project:active {
+    transform: translateY(0);
+}
+
+/* Shuffle Animation */
+@keyframes shuffle {
+    0% {
+        transform: rotateZ(0deg) scale(1);
+    }
+    25% {
+        transform: rotateZ(-10deg) scale(1.05);
+    }
+    50% {
+        transform: rotateZ(10deg) scale(1.05);
+    }
+    75% {
+        transform: rotateZ(-5deg) scale(1.05);
+    }
+    100% {
+        transform: rotateZ(0deg) scale(1);
+    }
+}
+
+.btn-random-project.shuffle {
+    animation: shuffle 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+.btn-random-project i {
+    font-size: 1.1rem;
+}
+
 /* Projects Section */
 .projects-section {
     padding: 4rem 0;
@@ -988,6 +1058,16 @@ body {
         grid-template-columns: 1fr;
     }
 
+    .tabs-wrapper {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: stretch;
+    }
+    
+    .tabs-wrapper .tabs {
+        min-width: unset;
+    }
+    
     .tabs {
         gap: 0.5rem;
     }
@@ -996,56 +1076,11 @@ body {
         padding: 0.5rem 1rem;
         font-size: 0.9rem;
     }
-
-
-    .back-to-top {
-        right: 1rem;
-        bottom: 6.5rem;
-        width: 3rem;
-        height: 3rem;
-    }
-
-    .search-wrapper {
-        max-width: 100%;
-        padding: 0 1rem;
-    }
-
-    .search-input {
-        font-size: 0.95rem;
-        padding: 0.85rem 0;
-    }
-
-    .search-shortcut {
-        display: none;
-    }
-
-    .search-dropdown {
-        width: 100vw;
-        left: 50%;
-        transform: translateX(-50%);
-        border-radius: 12px;
-        margin-top: 0.5rem;
-    }
-
-    .dropdown-section-title {
-        padding: 0.5rem 1rem;
-        font-size: 0.75rem;
-    }
-
-    .dropdown-item,
-    .dropdown-recent-item,
-    .dropdown-tips {
-        padding-left: 1rem;
-        padding-right: 1rem;
-    }
-
-    .search-icon-wrapper {
-        margin-right: 0.5rem;
-    }
-
-    .search-icon {
-        font-size: 1rem;
-
+    
+    .btn-random-project {
+        width: 100%;
+        justify-content: center;
+        padding: 0.75rem 1rem;
     }
 }
 

web-app/index.html

@@ -46,23 +46,16 @@ <h1>🎮 Python Mini Projects</h1>
     <!-- Search & Category Tabs -->
     <section class="tabs-section" aria-label="Search and Project categories">
         <div class="container">
-            <div class="search-container">
-                <div class="search-box">
-                    <i class="fas fa-search" aria-hidden="true"></i>
-                    <input type="text" id="projectSearch" placeholder="Search for projects (e.g. 'rock', 'dice', 'prime')..." aria-label="Search for projects">
+            <div class="tabs-wrapper">
+                <div class="tabs">
+                    <button class="tab active" data-category="all">🌟 All Projects</button>
+                    <button class="tab" data-category="games">🎮 Games</button>
+                    <button class="tab" data-category="math">🔢 Math</button>
+                    <button class="tab" data-category="utilities">🔐 Utilities</button>
                 </div>
-            </div>
-            <div class="tabs" role="tablist" aria-label="Filter projects by category">
-                <button type="button" class="tab active" role="tab" id="tab-all" data-category="all" aria-selected="true" aria-controls="projectsGrid" tabindex="0">🌟 All Projects</button>
-                <button type="button" class="tab" role="tab" id="tab-games" data-category="games" aria-selected="false" aria-controls="projectsGrid" tabindex="-1">🎮 Games</button>
-                <button type="button" class="tab" role="tab" id="tab-math" data-category="math" aria-selected="false" aria-controls="projectsGrid" tabindex="-1">🔢 Math</button>
-                <button type="button" class="tab" role="tab" id="tab-utilities" data-category="utilities" aria-selected="false" aria-controls="projectsGrid" tabindex="-1">🔐 Utilities</button>
-            </div>
-
-            <!-- Empty State Message -->
-            <div class="empty-state" id="emptyState" style="display: none;">
-                <p>📭 No projects match your search.</p>
-                <p class="empty-state-hint">Try different keywords or browse all projects.</p>
+                <button class="btn-random-project" id="randomProjectBtn" title="Discover a random project!">
+                    <i class="fas fa-dice"></i> Random Project 🎲
+                </button>
             </div>
         </div>
     </section>

web-app/js/main.js

@@ -369,20 +369,61 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     tabs.forEach(tab => tab.addEventListener('click', () => { tabs.forEach(t => t.classList.remove('active')); tab.classList.add('active'); applyFilter(tab.getAttribute('data-category') || 'all'); }));
 
-    // Modal helpers
-    let removeTrap = null;
-    function openProjectSafe(name, trigger) {
-        if (!modal || !modalBody) return;
-        lastFocusedElement = trigger || document.activeElement;
-        if (modalTitle && trigger) {
-            const card = trigger.closest('.project-card');
-            const h = card?.querySelector('h3')?.textContent?.trim();
-            modalTitle.textContent = h || (name || 'Project');
-        }
-        modal.classList.add('active');
-        modal.setAttribute('aria-hidden', 'false');
-        document.body.style.overflow = 'hidden';
-        setMainInert(true);
+// Random Project Generator
+const randomProjectBtn = document.getElementById('randomProjectBtn');
+
+function getRandomProject() {
+    // Get all visible project cards (based on current filter)
+    const visibleCards = Array.from(projectCards).filter(card => {
+        return card.style.display !== 'none';
+    });
+    
+    if (visibleCards.length === 0) {
+        // If no cards are visible (shouldn't happen), get all cards
+        return projectCards[Math.floor(Math.random() * projectCards.length)];
+    }
+    
+    return visibleCards[Math.floor(Math.random() * visibleCards.length)];
+}
+
+function selectRandomProject() {
+    const randomCard = getRandomProject();
+    
+    // Add shuffle animation to the button
+    randomProjectBtn.classList.add('shuffle');
+    
+    // Remove animation class after it completes
+    setTimeout(() => {
+        randomProjectBtn.classList.remove('shuffle');
+    }, 600);
+    
+    // Open the random project after a short delay for effect
+    setTimeout(() => {
+        const projectName = randomCard.getAttribute('data-project');
+        openProject(projectName);
+        
+        // Optional: Scroll to project card smoothly
+        randomCard.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }, 300);
+}
+
+randomProjectBtn.addEventListener('click', selectRandomProject);
+
+// Open Project Modal
+projectCards.forEach(card => {
+    const playButton = card.querySelector('.btn-play');
+    
+    playButton.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const projectName = card.getAttribute('data-project');
+        openProject(projectName);
+    });
+    
+    card.addEventListener('click', () => {
+        const projectName = card.getAttribute('data-project');
+        openProject(projectName);
+    });
+});
 
         // load content safely
         safeRun(() => {