hack2skill · ady37 · Oct 6, 2024 · Oct 6, 2024 · Oct 6, 2024 · Oct 6, 2024
diff --git a/Contact.html b/Contact.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="contact.css">
+<script type="text/javascript"
+        src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js">
+</script>
+<script type="text/javascript">
+   (function(){
+      emailjs.init({
+        publicKey: "TeiQVrA9LXDYpyt3I",
+      });
+   })();
+</script>
+
+
+</head>
+<body>
+
+
+    <div class="hero">
+        <nav>
+            <h2 class="logo">Pyro</h2>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="videogallery.html">Video Gallery</a></li>
+                <li><a href="gallery.html">Photo Gallery</a></li>
+                <li><a href="PictureOfDay.html">Picture of Day</a></li>
+                <li><a href="Contact.html">Contact Us</a></li>
+
+            </ul>
+
+        </nav>
+
+<form onsubmit="emailSend();reset();return false;">
+    <div class="container">
+      <h2>Subscribe For Daily New Picture from NASA </h2>
+      <p>Please fill the Name and Email so that you receive a new image from NASA daily!</p>
+    </div>
+
+    <div class="container" style="background-color:white">
+      <input type="text" placeholder="Name" name="name" id="name" required>
+      <input type="text" placeholder="Email address" name="email" id="email" required>
+      <label>
+        <input type="checkbox" checked="checked" name="subscribe" id="subscribe"> Receive Picture of Day
+      </label>
+    </div>
+
+    <div class="container">
+      <input type="submit" value="Subscribe">
+    </div>
+  </form>
+    </div>
+    <script src="https://smtpjs.com/v3/smtp.js">
+    </script>
+    <script src="email.js"></script>
+
+</body>
+</html>
diff --git a/PictureOfDay.html b/PictureOfDay.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>NASA's APOD Photo Viewer</title>
+
+    <link rel="stylesheet" href="apod.css">
+</head>
+<body>
+    <main>
+        <div class="hero">
+            <nav>
+                <h2 class="logo">Pyro</h2>
+                <ul>
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="videogallery.html">Video Gallery</a></li>
+                    <li><a href="gallery.html">Photo Gallery</a></li>
+                    <li><a href="PictureOfDay.html">Picture of Day</a></li>
+                    <li><a href="Contact.html">Contact Us</a></li>
+                </ul>
+
+            </nav>
+
+        <h1>Astronomy Picture of the Day</h1>
+        <div class="container">
+            <label for="date">Enter Date </label>
+            <input type="text" name="date" id="date">
+            <input type="button" id="view_button" value="View">
+        </div>
+        <div id="display"></div>
+    </main>
+    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
+    <script src="apod.js"></script>
+</div>  
+</body>
+
+
+</html>
diff --git a/README.md b/README.md
@@ -1,13 +1,45 @@
 # NASA Space Apps Challenge 2024 [Noida]
+![Static Badge](https://img.shields.io/badge/NASA-Challenge-blue)
+![Static Badge](https://img.shields.io/badge/JWST-purple)
+![Static Badge](https://img.shields.io/badge/Team_Pyro-red?logoColor=yellow)
+![Static Badge](https://img.shields.io/badge/Immersive_Experience-green)
+![Static Badge](https://img.shields.io/badge/Collage-Music-black)
 
-#### Team Name -
-#### Problem Statement - 
-#### Team Leader Email -
+
+[![Pyro Immersive Experience](images/PyroImmersive_Experience.png)](https://ady37.github.io/Pyro/)
+
+### Team Name - Pyro
+### Problem Statement - Symphony of the Stars: Harmonizing James Webb Telescope in Music and Images
+### Team Leader Email -1. Registration : [email protected] <br> 2.Github : [email protected]
 
 ## A Brief of the Prototype:
-  What is your solution? and how it works.
+
+### What is James Webb Telescope?
+
+Webb is the premier observatory of the next decade, serving thousands of astronomers worldwide. It studies every phase in the history of our Universe.
+Webb studies every phase in the history of our Universe, ranging from the first luminous glows after the Big Bang, to the formation of solar systems capable of supporting life on planets like Earth, to the evolution of our own Solar System. Webb launched on Dec. 25th 2021. It does not orbit around the Earth like the Hubble Space Telescope, it orbits the Sun 1.5 million kilometers (1 million miles) away from the Earth at what is called the second Lagrange point or L2. 
+>"the Webb telescope is a big step in understanding the universe and our origins. "<br>
+> _--NASA_
+
+### What is Pyro?
+
+Pyro is creative and immersive website.With its unique design It will help the viewers to look at the images taken by the JWST through a new perspective and it will simulates their minds with its amazing background score designed by combining two tracks.
+> "It's not every day you can say you contributed to something that inspires the world in a positive way, but I believe that's what JWST is doing for everyone of all ages" <br>
+>  _--Analyn Schneider_
+
+Click [here](https://ady37.github.io/Pyro/) for a breathtaking experience.
+## Tech Stack
+![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
+![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
+![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
+![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white)
+![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)
+
 
 ## Code Execution Instruction:
-  *[If your solution is **not** application based, you can ignore this para]
-
- *The Repository must contain your **Execution Plan PDF**.
+1.Open the browser <br>
+2.Copy and paste the following url in the browser <br>
+```https://ady37.github.io/Pyro/```
+
+Click on [demo video ](https://drive.google.com/file/d/1OFb7GgocR7P_257W9i3fmQELgWav1Ova/view?usp=sharing
+) to see the website in action
diff --git a/apod.css b/apod.css
@@ -0,0 +1,154 @@
+*{
+    margin:0;
+    padding:0;
+}
+body{
+    background:linear-gradient(65deg,#2e3192,#a3a6ff 50.1%);
+    justify-content: center;
+    align-items: center;
+    scroll-behavior: smooth;
+}
+.hero{
+    height:100vh;
+    width:100%;
+    background:linear-gradient(65deg,#2e3192,#a3a6ff 50.1%);
+  }
+nav{
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+    padding-top:40px;
+    padding-left:10%;
+    padding-right:10%;
+}
+.logo{
+    color:white;
+    font-size:28px;
+}
+nav ul li{
+    list-style-type: none;
+    display:inline-block;
+    padding:10px 20px;
+}
+nav ul li a{
+    color:white;
+    text-decoration:none;
+    font-weight:bold;
+}
+nav ul li a:hover{
+    color:red;
+    transition:.3s;
+}
+/* General Styles */
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f5;
+    margin: 0;
+    padding: 20px;
+}
+
+/* Header */
+h1 {
+    text-align: center;
+    color: #fec316;
+    margin-bottom: 20px;
+    margin-top:80px;
+    font-size: 2.5em;
+
+}
+
+/* Form Container */
+.container{
+
+    justify-content: center;
+    padding:10px;
+    width:50%;
+    margin-left:auto;
+    margin-right:auto;
+    margin-top:60px;
+    align-items:center;
+}
+/* Label and Input Styles */
+label {
+    font-size: 1.5em;
+    color: #fff;
+   margin-left:10px;
+}
+
+input[type="text"] {
+    padding: 10px;
+    font-size: 1.2em;
+    border: 2px solid #ccc;
+    border-radius: 10px;
+    width: 50%;
+    margin-left:5px;
+
+}
+
+/* Button Styles */
+input[type="button"] {
+    padding: 10px 30px;
+    font-size: 1.2em;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    margin-left: 20px;
+
+}
+
+input[type="button"]:hover {
+    background-color: #45a049;
+}
+
+
+
+/* Error Styles */
+.error {
+    color: red;
+    font-weight: bold;
+}
+
+#display{
+    border:5px solid  #45a049;  
+    border-radius:20px;
+    justify-content: center;
+    align-items:center;
+    width:90%;
+    position:absolute;
+    margin-top:50px;
+    padding:20px;
+    margin-right:auto;
+    margin-left:2%;
+    background-color:black;
+    color:white;
+
+}
+#display h2{
+    color:white;
+    width:fit-content;
+    margin:auto;
+    justify-content: center;
+    align-items:center;
+    padding:10px;
+    align-self:center;
+    margin:auto;
+    margin-bottom:5px;
+}
+#display img{
+
+    border:2px solid white;
+    width:100%;
+    border-radius:20px;
+    margin:auto;
+    justify-content: center;
+    align-items:center;
+}
+#display p{
+    border:2px solid white;
+    border-radius:20px;
+    padding:10px;
+    width:fit-content;
+    margin-top:25px;
+}
diff --git a/apod.js b/apod.js
@@ -0,0 +1,71 @@
+"use strict"
+//returns date string in YYYY-MM-DD format
+const getDateString=date=>
+    `${date.getFullYear()}-${date.getMonth()+1}-${(date.getDate())}`;
+const displayPicture=data=>{
+    let html="";
+    if(data.error){
+        html+=`<span class="error">${data.error.msg}</span>`;
+
+    }
+    else if(data.code){
+        html+=`<span class="error">${data.msg}</span>`;
+
+    }
+    else{
+        html+=`<h2>${data.title}</h2>`;
+        const width=700;
+        switch(data.media_type){
+            case "image":
+                html+=`<img src="${data.url}" width="${width}"
+                alt="NASA photo">`;
+                break;
+            case "video":
+                html+=`<iframe src="${data.url}"
+                frameborder="0" allowfullscreen></iframe>`;
+                break;
+            default:
+                html+=`<img src="images/notavailable.png" 
+                width="${width}" alt="NASA photo">`;
+        }
+        html+=`<div>${data.date}`;
+        if(data.copyright){
+            html+=`<span class="right">&copy;${data.copyright}</span>`;
+        }
+        html+="</div>";
+        html+=`<p>${data.explanation}</p>`;
+    }
+    $("#display").html(html);
+};
+const displayError=error=>{
+    let html=`<span class="error">${error.message}</span>`;
+    $("#display").html(html);
+};
+$(document).ready(()=>{
+const today=new Date();
+let dateStr=getDateString(today);
+const dateTextbox=$("#date");
+dateTextbox.val(dateStr);
+dateTextbox.focus();
+$("#view_button").click(()=>{
+    dateStr=$("#date").val();
+    const dateObj=new Date(dateStr);
+    if(dateObj=="Invalid Date")
+    {
+        const msg="Please enter valid date in YYYY-MM-DD format.";
+        $("#display").html(`<span class="error">${msg}</span>`);
+    }
+    else{
+        dateStr=getDateString(dateObj);
+
+        const domain=`https://api.nasa.gov/planetary/apod`;
+        const request=`?api_key=UTbfaRS1PsJ6gvBEbhcXYRduMu89vxqV6KRI6bit&date=${dateStr}`;
+        const url=domain+request;
+        fetch(url).then(response=>response.json()).then(json=>displayPicture(json)).
+        catch(e=>displayError(e));
+    }
+    $("#date").focus();
+});
+
+});
+