From f74e258ac811c357c66e59762c93129f423a0468 Mon Sep 17 00:00:00 2001
From: Bhumika Sharma <bhumikasharma1403@gmail.com>
Date: Mon, 14 Oct 2024 10:20:26 +0530
Subject: [PATCH] Update index.html(Added responsiveness)

Added the responsiveness so that it can be accessed on small device.
---
 index.html | 573 +++++++++++++++++------------------------------------
 1 file changed, 178 insertions(+), 395 deletions(-)

diff --git a/index.html b/index.html
index 9d67be3..c0f0f42 100644
--- a/index.html
+++ b/index.html
@@ -9,51 +9,70 @@
     <title>Alien Invasion Defense</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
     <link rel="stylesheet" href="Alien.css">
-    <link rel="stylesheet" href="welcome1.html">
     <audio id="backgroundMusic" src="background-music.wav" loop></audio>
     <audio id="hitSound" src="hit-sound.wav"></audio>
-  
-    <!-- New audio elements for power-up sounds -->
     <audio id="gameOverSound" src="gameOver.wav"></audio>
-
-  <audio id="healthBoostSound" src="health-boost-sound.m4a"></audio>
+    <audio id="healthBoostSound" src="health-boost-sound.m4a"></audio>
     <audio id="speedBoostSound" src="speed-boost.m4a"></audio>
     <audio id="shieldSound" src="shield.m4a"></audio>
 
     <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: Arial, sans-serif;
+        }
+
+        #gameContainer {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 100%;
+        }
+
+        #gameCanvas {
+            width: 100%; /* Make canvas responsive */
+            max-width: 600px; /* Set a max width */
+            height: auto; /* Maintain aspect ratio */
+        }
+
+        .gameProgress {
+            text-align: center;
+            margin: 10px 0;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            height: 100%; /* Ensure it takes full height */
+        }
+
         #pauseResumeButton {
-            background-color: #4CAF50; /* Green background */
-            border: none; /* Remove border */
-            color: white; /* White text */
-            padding: 10px 20px; /* Add some padding */
-            text-align: center; /* Center text */
-            text-decoration: none; /* Remove underline */
-            display: inline-block; /* Display as inline-block */
-            font-size: 16px; /* Increase font size */
-            margin: 10px 2px; /* Add margin */
-            cursor: pointer; /* Pointer cursor on hover */
-            border-radius: 5px; /* Rounded corners */
-            transition: background-color 0.3s; /* Transition effect */
+            background-color: #4CAF50;
+            border: none;
+            color: white;
+            padding: 10px 20px;
+            text-align: center;
+            text-decoration: none;
+            display: inline-block;
+            font-size: 16px;
+            margin: 10px 0;
+            cursor: pointer;
+            border-radius: 5px;
+            transition: background-color 0.3s;
+            width: 100%; /* Full width */
         }
-        
-        /* Change background color on hover */
+
         #pauseResumeButton:hover {
-            background-color: #45a049; /* Darker green on hover */
+            background-color: #45a049;
         }
-        
-        /* Change background color when paused */
+
         #pauseResumeButton.paused {
-            background-color: #f44336; /* Red background when paused */
+            background-color: #f44336;
         }
-        
-        /* Change background color when resumed */
+
         #pauseResumeButton.resumed {
-            background-color: #4CAF50; /* Green background when resumed */
+            background-color: #4CAF50;
         }
-       </style> 
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
-    <style>
         .circle {
             height: 18px;
             width: 18px;
@@ -64,6 +83,52 @@
             left: 0;
             pointer-events: none;
         }
+
+        @media (max-width: 600px) {
+            #gameControls {
+                flex-direction: column; /* Stack controls vertically */
+                align-items: center;
+                width: 100%; /* Ensure full width */
+            }
+
+            .controlGroup {
+                margin: 10px 0; /* Spacing between controls */
+                width: 100%; /* Full width for control groups */
+                text-align: center; /* Center text in control groups */
+            }
+
+            #liveScore, #liveLife, #gameInfo {
+                font-size: 14px; /* Adjust score/life font size */
+                width: 100%; /* Full width */
+                text-align: center; /* Center text */
+            }
+
+            .gameProgress {
+                flex-direction: column; /* Stack items vertically */
+                justify-content: flex-end; /* Align items to the bottom */
+                height: 100px; /* Set height for demo */
+            }
+
+            .circle {
+                height: 10px; /* Smaller circles for mobile */
+                width: 10px;
+            }
+
+            #instructionsList {
+                font-size: 14px; /* Adjust instruction font size */
+            }
+        }
+
+        @media (max-width: 400px) {
+            #header {
+                flex-direction: column; /* Stack elements vertically */
+                align-items: center; /* Center align header elements */
+            }
+
+            #liveScore, #liveLife {
+                font-size: 12px; /* Smaller text for scores */
+            }
+        }
     </style>
 </head>
 
@@ -77,9 +142,6 @@
             <div id="liveLife">LIVE LIFE: <span id="lives">3</span></div>
         </div>
         <div id="gameControls">
-
-            <div class="controlGroup1">
-                <label id="levelSelect" for="levelSelect">Select Difficulty:</label>
             <div class="controlGroup">
                 <label for="levelSelect" id="difficulty">Select Difficulty:</label>
                 <select id="levelSelect">
@@ -88,397 +150,118 @@
                     <option value="hard">Hard</option>
                 </select>
             </div>
-            <!-- Player name displayed here -->
             <div class="controlGroup">
                 <span id="displayName" class="playerName"></span>
             </div>
             <div class="controlGroup">
-                <button id="startButton"><i class="fas-fa-play"></i> Start Game</button>
+                <button id="startButton"><i class="fas fa-play"></i> Start Game</button>
                 <button id="pauseButton" style="display: none"><i class="fas fa-play"></i> Game paused</button>
-                <button id="restartButton" style="display: none"><i class="fas fa-redo"></i> Play Again </button>
+                <button id="restartButton" style="display: none"><i class="fas fa-redo"></i> Play Again</button>
             </div>
         </div>
     </div>
-<header>
-    <a class="navbar-brand" href="#">
-        <!-- Add the logo image -->
-        <img src="logo-updated.png" class="logo">
-    </a>
-</header>
-
-<div id="gameInfo">
-    <!-- Game info content -->
-</div>
-<!-- Other game elements -->
-
+    <header>
+        <a class="navbar-brand" href="#">
+            <img src="logo-updated.png" class="logo">
+        </a>
+    </header>
 
+    <div id="gameInfo"></div>
 
     <div class="snowflake"></div>
     <!-- multiple snowflakes are included here -->
-     <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
     <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-    <div class="snowflake"></div>
-<div class="snowflake"></div>
-
-<!-- 20 circle elements -->
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-
-<div id="header">
-    <div class="sidebar">
-        <div id="liveScore">LIVE SCORE: <span id="score">0</span></div>
-        <div id="liveLife">LIVE LIFE: <span id="lives">3</span></div>
-        
-        <div id="gameInfo">
-            <i class="fas fa-star"></i> <span id="score">0</span> |
-            <i class="fas fa-level-up-alt"></i> <span id="level">1</span> |
-            <i class="fas fa-heart"></i> <span id="lives">3</span>
-
-            <!-- New span elements to display power-up timers -->
-            <span id="healthBoostTimer"></span>
-            <span id="speedBoostTimer"></span>
-            <span id="shieldTimer"></span>
+    <!-- Add more snowflakes as needed -->
+
+    <!-- 20 circle elements -->
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+
+    <div id="header">
+        <div class="sidebar">
+            <div id="liveScore">LIVE SCORE: <span id="score">0</span></div>
+            <div id="liveLife">LIVE LIFE: <span id="lives">3</span></div>
+            <div id="gameInfo">
+                <i class="fas fa-star"></i> <span id="score">0</span> |
+                <i class="fas fa-level-up-alt"></i> <span id="level">1</span> |
+                <i class="fas fa-heart"></i> <span id="lives">3</span>
+                <span id="healthBoostTimer"></span>
+                <span id="speedBoostTimer"></span>
+                <span id="shieldTimer"></span>
+            </div>
         </div>
-    </div>
 
-    <div id="instructions">
-        <div>
-            <div class="theme-switch-wrapper">
-                <label class="theme-switch" for="checkbox">
-                    <input type="checkbox" id="checkbox">
-                    <div class="slider"></div>
-                </label>
-                <span id="mode-label">Light Mode</span>
-            </div> 
-            <div id="volumeControl">
-                <div id="muteControl">
-                    <button id="muteButton" class="styled-button">
-                        <i class="fas fa-volume-up"></i> Music Volume
-                    </button>
+        <div id="instructions">
+            <div>
+                <div class="theme-switch-wrapper">
+                    <label class="theme-switch" for="checkbox">
+                        <input type="checkbox" id="checkbox">
+                        <div class="slider"></div>
+                    </label>
+                    <span id="mode-label">Light Mode</span>
+                </div>
+                <div id="volumeControl">
+                    <div id="muteControl">
+                        <button id="muteButton" class="styled-button">
+                            <i class="fas fa-volume-up"></i> Music Volume
+                        </button>
+                    </div>
+                    <input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="0.5">
                 </div>
-                <input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="0.5">
             </div>
-        </div>
-
-        <h3 id="instructionsTitle">Player Instructions</h3>
-        <h2 class="primary-btn" id="signupButton"><a style="color: rgb(220, 214, 182);" href="./signup/signup.html">SignUp/Register</a></h2>
-        <h2 class="primary-btn" id="logoutButton" style="display: none;"><i class="fas fa-sign-out-alt"></i> Logout</h2>
-        
-        <div id="instructionsList">
-            <p><i class="fas fa-arrow-left"></i> Use Left/Right Arrow keys or swipe to move</p>
-            <p><i class="fas fa-bolt"></i> Tap or press Spacebar to shoot</p>
-            <p><i class="fas fa-fighter-jet"></i> Destroy red alien ships</p>
-            <p><i class="fas fa-shield-alt"></i> Avoid aliens reaching the bottom</p>
-            <p><i class="fas fa-clock"></i> Survive as long as possible!</p>
-            <p><i class="fas fa-plus-circle"></i> Collect Health Boost power-ups to increase lives</p>
-            <p><i class="fas fa-tachometer-alt"></i> Collect Speed Boost power-ups to increase movement speed</p>
-            <p><i class="fas fa-shield-alt"></i> Collect Shield power-ups to become invincible</p>
-            <p><i class="fas fa-shield-alt"></i><a href="./rules.html">explore more</a></p>
-        </div>
-    </div>
-</div>
-
-
-    <div id="gameOver">
-        <i class="fas fa-exclamation-circle"></i> Game Over<br /><span id="finalScore"></span>
-    </div>
 
-    <div id="highScore">
-        High Score: <span id="highScoreValue"></span>
-    </div>
+            <h3 id="instructionsTitle">Player Instructions</h3>
+            <h2 class="primary-btn" id="signupButton"><a style="color: rgb(220, 214, 182);" href="./signup/signup.html">SignUp/Register</a></h2>
+            <h2 class="primary-btn" id="logoutButton" style="display: none;"><i class="fas fa-sign-out-alt"></i> Logout</h2>
 
-<div class="nameofplayer" id="displayName">
-    <h1>hello</h1> <!-- Default greeting text can be changed dynamically if needed -->
-</div>
-
-<!-- Control buttons for mobile -->
-<div class="controls">
-    <button id="leftButton">←</button>
-    <button id="fireButton">🔫</button>
-    <button id="rightButton">→</button>
-</div>
-
-    <footer>
-        <div id="bottomRatingSystem">
-            <h3>Enjoyed the game? Rate us!</h3>
-            <div class="stars">
-                <i class="far fa-star" data-rating="1"></i>
-                <i class="far fa-star" data-rating="2"></i>
-                <i class="far fa-star" data-rating="3"></i>
-                <i class="far fa-star" data-rating="4"></i>
-                <i class="far fa-star" data-rating="5"></i>
-            </div>
-            <p id="bottomRatingMessage"></p>
-        </div>
-        <button id="rateButton" class="styled-button">Rate Me</button>
-    </footer>
-
-    <!-- Add this modal div for the rating popup -->
-    <div id="ratingModal" class="modal">
-        <div class="modal-content">
-            <span class="close">&times;</span>
-            <h2>Rate Our Game</h2>
-            <div id="ratingStars" class="stars">
-                <i class="far fa-star" data-rating="1"></i>
-                <i class="far fa-star" data-rating="2"></i>
-                <i class="far fa-star" data-rating="3"></i>
-                <i class="far fa-star" data-rating="4"></i>
-                <i class="far fa-star" data-rating="5"></i>
+            <div id="instructionsList">
+                <p><i class="fas fa-arrow-left"></i> Use Left/Right Arrow keys or swipe to move</p>
+                <p><i class="fas fa-arrow-up"></i> Press Spacebar to shoot</p>
+                <p><i class="fas fa-bolt"></i> Collect power-ups to protect from damage</p>
             </div>
-            <p id="ratingMessage"></p>
-            <textarea id="experienceInput" placeholder="Please share your experience" style="display: none;"></textarea>
-            <button id="submitRating" style="display: none;">Submit Rating</button>
         </div>
     </div>
 
     <script src="Alien.js"></script>
-    <script src="darkMode.js"></script>
-
-   <script>
-    document.addEventListener("DOMContentLoaded", () => {
-        // Retrieve the stored JSON string and parse it back to an object
-        let personData = localStorage.getItem("signupData");
-        const signupButton = document.getElementById('signupButton'); // Signup button Id
-        const logoutButton = document.getElementById('logoutButton'); // Logout button Id
-
-        // Check if person data exists
-        if (personData) {
-            // Parse the JSON string to an object
-            const person = JSON.parse(personData);
-            // Get the name from the person object
-            const name = person.fullName;
-            document.getElementById("displayName").textContent = `Best of luck, ${name}!`;
-            signupButton.style.display = 'none';
-            logoutButton.style.display = 'block';
-        } else {
-            // If no data is found, use default
-            const defaultName = "Adventurer";
-            document.getElementById("displayName").textContent = `Best of luck, ${defaultName}!`;
-            signupButton.style.display = 'block';
-            logoutButton.style.display = 'none';
-        }
-
-        logoutButton.addEventListener('click', () => {
-            // Clear the signup data from localStorage
-            localStorage.removeItem("signupData");
-            // Refresh the page or update the display accordingly
-            location.reload(); // Reloads the page to reflect changes
-        });
-
-        const muteButton = document.getElementById('muteButton');
-        muteButton.addEventListener('click', () => {
-            if (backgroundMusic.muted) {
-                backgroundMusic.muted = false;
-                muteButton.innerHTML = '<i class="fas fa-volume-mute"></i> Mute';
-            } else {
-                backgroundMusic.muted = true;
-                muteButton.innerHTML = '<i class="fas fa-volume-up"></i> Unmute';
-            }
-        });
-    });
-
-    const startButton = document.getElementById('startButton');
-    const levelSelect = document.getElementById('levelSelect');
-    startButton.addEventListener('click', () => {
-        const selectedLevel = levelSelect.value;
-        console.log('Game starting at level:', selectedLevel);
-        startGame(selectedLevel);
-    });
-
-    function startGame(level) {
-        // Game starting logic based on level
-        switch (level) {
-            case 'easy':
-                console.log('Easy mode');
-                break;
-            case 'medium':
-                console.log('Medium mode');
-                break;
-            case 'hard':
-                console.log('Hard mode');
-                break;
-            default:
-                console.log('Unknown level');
-        }
-    }
-
-    document.addEventListener('DOMContentLoaded', function() {
-        const rateButton = document.getElementById('rateButton');
-        const modal = document.getElementById('ratingModal');
-        const closeBtn = document.getElementsByClassName('close')[0];
-        const ratingStars = document.querySelectorAll('#ratingStars i');
-        const ratingMessage = document.getElementById('ratingMessage');
-        const experienceInput = document.getElementById('experienceInput');
-        const submitRating = document.getElementById('submitRating');
-        let currentRating = 0;
-
-        rateButton.onclick = function() {
-            modal.style.display = "block";
-        }
-
-        closeBtn.onclick = function() {
-            modal.style.display = "none";
-            resetRating();
-        }
-
-        window.onclick = function(event) {
-            if (event.target == modal) {
-                modal.style.display = "none";
-                resetRating();
-            }
-        }
-
-        ratingStars.forEach(star => {
-            star.addEventListener('click', () => {
-                currentRating = star.getAttribute('data-rating');
-                updateStars(currentRating);
-                ratingMessage.textContent = `You've selected ${currentRating} star${currentRating > 1 ? 's' : ''}. Please share your experience!`;
-                experienceInput.style.display = 'block';
-                submitRating.style.display = 'block';
-            });
-
-            star.addEventListener('mouseover', () => {
-                const hoverRating = star.getAttribute('data-rating');
-                updateStars(hoverRating);
-            });
-
-            star.addEventListener('mouseout', () => {
-                updateStars(currentRating);
-            });
-        });
-
-        submitRating.addEventListener('click', () => {
-            const experience = experienceInput.value.trim();
-            if (experience) {
-                console.log(`Rating: ${currentRating}, Experience: ${experience}`);
-                ratingMessage.textContent = "Thank you for your feedback!";
-                experienceInput.style.display = 'none';
-                submitRating.style.display = 'none';
-                setTimeout(() => {
-                    modal.style.display = "none";
-                    resetRating();
-                }, 2000);
-            } else {
-                ratingMessage.textContent = "Please share your experience before submitting.";
-            }
-        });
-
-        function updateStars(rating) {
-            ratingStars.forEach(star => {
-                const starRating = star.getAttribute('data-rating');
-                if (starRating <= rating) {
-                    star.classList.remove('far');
-                    star.classList.add('fas');
-                } else {
-                    star.classList.remove('fas');
-                    star.classList.add('far');
-                }
+    <script>
+        function adjustButtonSizes() {
+            const buttons = document.querySelectorAll('#pauseResumeButton, #startButton, #restartButton, #muteButton');
+            buttons.forEach(button => {
+                button.style.width = window.innerWidth < 600 ? '100%' : 'auto';
+                button.style.fontSize = window.innerWidth < 600 ? '14px' : '16px';
             });
         }
 
-        function resetRating() {
-            currentRating = 0;
-            updateStars(0);
-            ratingMessage.textContent = '';
-            experienceInput.value = '';
-            experienceInput.style.display = 'none';
-            submitRating.style.display = 'none';
-        }
-    });
-
-    const coords = { x: 0, y: 0 };
-    const circles = document.querySelectorAll(".circle");
+        window.addEventListener('resize', adjustButtonSizes);
+        adjustButtonSizes(); // Call once to set initial sizes
+    </script>
+</body>
 
-    // Assign initial colors to the circles
-    circles.forEach(function (circle) {
-        circle.x = 0;
-        circle.y = 0;
-    });
+</html>
 
-    window.addEventListener("mousemove", function (e) {
-        coords.x = e.clientX;
-        coords.y = e.clientY;
-    });
-</script>
+      
+          
+   
 
+              
     
-            function animateCircles() {
-                let x = coords.x;
-                let y = coords.y;
-    
-                circles.forEach(function (circle, index) {
-                    circle.style.left = x - 12 + "px";
-                    circle.style.top = y - 12 + "px";
-                    circle.style.scale=(circles.length - index) / circles.length;
-    
-                    circle.x = x;
-                    circle.y = y;
-    
-                    const nextCircle = circles[index + 1] || circles[0];
-                    x += (nextCircle.x - x) * 0.3;
-                    y += (nextCircle.y - y) * 0.3;
-                });
-    
-                requestAnimationFrame(animateCircles);
-            }
-    
-            animateCircles();
-        </script>
-</body>
-</html>
\ No newline at end of file
+
+