Add upcoming features list with animations

Author: ritesh-chauhan0x1

README.md

@@ -12,6 +12,15 @@ This project consists of a static webpage that informs visitors about the shutdo
 - Animated message display with typing effect
 - Social media contact links (Instagram and GitHub)
 - Modern UI with gradient background
+- Animated upcoming features list
+
+### Planned Features
+- Student In and Out Tracking System
+- CGPA Calculator and Visualization
+- Student Photo Management
+- Enhanced Privacy Controls
+- End-to-End Encrypted Data Storage
+- GDPR Compliant User Profiles
 
 ## Files Structure
 

index.html

@@ -34,6 +34,17 @@ <h1>Site Shutdown Notice</h1>
             <div class="upcoming">
                 <h2>Coming Soon</h2>
                 <p>Some more crazy projects are coming soon here. Will update you!</p>
+                <div class="upcoming-features">
+                    <h3>Coming Updates:</h3>
+                    <ul>
+                        <li><i class="fas fa-user-check"></i> Student In and Out Details</li>
+                        <li><i class="fas fa-chart-line"></i> CGPA </li>
+                        <li><i class="fas fa-camera"></i> Student Photo </li>
+                        <li><i class="fas fa-shield-alt"></i> We will remove Phone Number snd personsl email Id</li>
+                        <li><i class="fas fa-lock"></i> DC Records and fine</li>
+                        <li><i class="fas fa-user-shield"></i> And Many More</li>
+                    </ul>
+                </div>
             </div>
         </div>
     </div>

script.js

@@ -49,4 +49,21 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Start the typing effect after a delay
     setTimeout(typeWriter, 1500);
+    
+    // Add staggered animation for the upcoming features
+    const featureItems = document.querySelectorAll('.upcoming-features li');
+    if (featureItems.length > 0) {
+        featureItems.forEach((item, index) => {
+            // Initially hide all items
+            item.style.opacity = '0';
+            item.style.transform = 'translateX(-20px)';
+            
+            // Stagger the animation of each item
+            setTimeout(() => {
+                item.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+                item.style.opacity = '1';
+                item.style.transform = 'translateX(0)';
+            }, 2500 + (index * 300)); // Start after typing effect with 300ms delay between items
+        });
+    }
 });

styles.css

@@ -118,6 +118,47 @@ h2 {
     font-size: 22px;
 }
 
+.upcoming-features {
+    margin-top: 20px;
+    padding: 15px;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    border-left: 4px solid #2980b9;
+}
+
+.upcoming-features h3 {
+    color: #2980b9;
+    font-size: 18px;
+    margin-bottom: 12px;
+    text-align: center;
+}
+
+.upcoming-features ul {
+    list-style-type: none;
+    padding-left: 10px;
+}
+
+.upcoming-features li {
+    margin-bottom: 10px;
+    padding-left: 5px;
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+.upcoming-features li:hover {
+    transform: translateX(5px);
+}
+
+.upcoming-features i {
+    margin-right: 10px;
+    color: #3498db;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
 @media (max-width: 480px) {
     .message-box {
         padding: 20px;