Merge pull request #433 from PranavBarthwal/nasaGallery

add nasa media gallery
Priyanshi662 · Feb 25, 2024 · ac3da87 · ac3da87
2 parents ca5a607 + 3e423d2
commit ac3da87
Show file tree

Hide file tree

Showing 3 changed files with 168 additions and 0 deletions.
diff --git a/NasaMedia/Screenshot 2024-02-23 231514.png b/NasaMedia/Screenshot 2024-02-23 231514.png
diff --git a/NasaMedia/index.html b/NasaMedia/index.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en">
+
+
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+    integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+  <link rel="stylesheet" href="./apod.css">
+  <link rel="stylesheet" href="blog.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
+  <link rel="shortcut icon" type="image/jpg" href="saturn.png" />
+  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+
+  <style>
+    body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+        background-color: #000000;
+        color: #ffffff;
+    }
+    .container {
+        max-width: 800px;
+        margin: 20px auto;
+        padding: 20px;
+        background-color: #000;
+        border-radius: 8px;
+        box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    }
+    h1 {
+        text-align: center;
+        color: #ffcc00;
+    }
+    #searchInput {
+        width: 100%;
+        padding: 10px;
+        font-size: 16px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-sizing: border-box;
+        margin-bottom: 20px;
+        background-color: #333;
+        color: #fff;
+    }
+    #imageGallery {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    .imageContainer {
+        width: 200px;
+        margin: 10px;
+        text-align: center;
+    }
+    .imageContainer img {
+        max-width: 100%;
+        border-radius: 8px;
+        box-shadow: 0 0 5px rgba(0,0,0,0.1);
+    }
+    .imageTitle {
+        margin-top: 10px;
+        font-size: 14px;
+        color: #ffcc00;
+    }
+</style>
+</head>
+
+
+
+<body>
+
+
+  <!-- APOD SECTION -->
+  <h1 align="center" class="section_title" id="apod" data-aos="zoom-in">NASA MEDIA GALLERY</h1>
+  <div class="container">
+    <input type="text" id="searchInput" placeholder="Enter your search term...">
+    <div id="imageGallery"></div>
+</div>
+
+<script>
+    const searchInput = document.getElementById('searchInput');
+    const imageGallery = document.getElementById('imageGallery');
+
+    searchInput.addEventListener('input', fetchImages);
+
+    async function fetchImages() {
+        const query = searchInput.value.trim();
+        if (query === '') {
+            imageGallery.innerHTML = '';
+            return;
+        }
+
+        const response = await fetch(`https://images-api.nasa.gov/search?q=${query}`);
+        const data = await response.json();
+
+        if (data.collection.items.length === 0) {
+            imageGallery.innerHTML = '<p>No results found.</p>';
+            return;
+        }
+
+        const items = data.collection.items.slice(0, 10); // Limiting to 10 results
+
+        const imageHTML = items.map(item => {
+            const imgUrl = item.links ? item.links[0].href : '';
+            const title = item.data ? item.data[0].title : 'Untitled';
+
+            return `
+                <div class="imageContainer">
+                    <img src="${imgUrl}" alt="${title}">
+                    <div class="imageTitle">${title}</div>
+                </div>
+            `;
+        }).join('');
+
+        imageGallery.innerHTML = imageHTML;
+    }
+</script>
+
+
+  <div id="progress">
+    <span id="progress-value">&#x1F815; </span>
+  </div>
+  <script src="scroll.js"></script>
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      var openPopupBtn = document.querySelector('.open-popup-btn');
+      var popupMenu = document.querySelector('.popup-menu');
+      var closePopupBtn = document.querySelector('.close-popup-btn');
+
+      openPopupBtn.addEventListener('click', function () {
+        popupMenu.style.display = 'block';
+      });
+
+      closePopupBtn.addEventListener('click', function () {
+        popupMenu.style.display = 'none';
+      });
+    });
+
+
+  </script>
+
+
+  <script src="./apod.js"></script>
+  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+  <script>
+      AOS.init({
+          duration: 2000,
+      });
+  </script>
+
+</body>
+
+</html>
diff --git a/index.html b/index.html
@@ -815,6 +815,14 @@ <h2>Mars Imagery</h2>
 
         </div>
 
+
+        <div class="card" data-aos="zoom-out-up">
+            <img src="./NasaMedia/Screenshot 2024-02-23 231514.png">
+            <h2>Nasa Gallery</h2>
+            <!-- Button to navigate to page1.html -->
+            <button onclick="window.location.href='./NasaMedia/index.html'">Go!</button><br>
+        </div>
+
         <br>
 
         <!-- <div class="contact section" id="contact" style=" width:100vw; margin-left: 150px;">