+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/README.md b/README.md
index abc30b8b..272b56c9 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,45 @@
# NASA Space Apps Challenge 2024 [Noida]
+
+
+
+
+
-#### Team Name -
-#### Problem Statement -
-#### Team Leader Email -
+
+[](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 : 23f3003920@ds.study.iitm.ac.in Astronomy Picture of the Day
+
+
+
+
+
+
+
+
+
+2.Github : aditya.yadav.email@gmail.com ## 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. "
+> _--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"
+> _--Analyn Schneider_ + +Click [here](https://ady37.github.io/Pyro/) for a breathtaking experience. +## Tech Stack + + + + + + ## 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
+2.Copy and paste the following url in the browser
+```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 new file mode 100644 index 00000000..26829d70 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/apod.js b/apod.js new file mode 100644 index 00000000..2be2a3f8 --- /dev/null +++ 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+=`${data.error.msg}`; + + } + else if(data.code){ + html+=`${data.msg}`; + + } + else{ + html+=`
${data.title}
`; + const width=700; + switch(data.media_type){ + case "image": + html+=`
`;
+ }
+ html+=`${data.date}`;
+ if(data.copyright){
+ html+=`©${data.copyright}`;
+ }
+ html+="
";
+ html+=`${data.explanation}
`; + } + $("#display").html(html); +}; +const displayError=error=>{ + let html=`${error.message}`; + $("#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(`${msg}`); + } + 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(); +}); + +}); + diff --git a/contact.css b/contact.css new file mode 100644 index 00000000..978c4887 --- /dev/null +++ b/contact.css @@ -0,0 +1,136 @@ +body { + font-family: Arial, sans-serif; +} + +.overlay1 { + height: 100%; + width: 0; + position: fixed; + z-index: 1; + top: 0; + left: 0; + background-color: rgb(0,0,0); + background-color: rgba(0,0,0, 0.9); + overflow-x: hidden; + transition: 0.5s; +} + +.overlay1-content { + position: relative; + top: 25%; + width: 100%; + text-align: center; + margin-top: 30px; +} + +.overlay1 a { + padding: 8px; + text-decoration: none; + font-size: 36px; + color: #818181; + display: block; + transition: 0.3s; +} + +.overlay a:hover, .overlay a:focus { + color: #f1f1f1; +} + +.overlay .closebtn { + position: absolute; + top: 20px; + right: 45px; + font-size: 60px; +} + +@media screen and (max-height: 450px) { + .overlay a {font-size: 20px} + .overlay .closebtn { + font-size: 40px; + top: 15px; + right: 35px; + } +} +/* Style the form element with a border around it */ +form { + border: 4px solid #f1f1f1; + width:80%; + justify-content: center; + align-self: center; + margin-left:auto; + margin-right:auto; + margin-top:60px; + + } + + + /* Add some padding and a grey background color to containers */ + .container { + padding: 20px; + background-color: #f1f1f1; + } + + /* Style the input elements and the submit button */ + input[type=text], input[type=submit] { + width: 100%; + padding: 12px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + box-sizing: border-box; + } + + /* Add margins to the checkbox */ + input[type=checkbox] { + margin-top: 16px; + } + + /* Style the submit button */ + input[type=submit] { + background-color: #04AA6D; + color: white; + border: none; + } + + input[type=submit]:hover { + opacity: 0.8; + } + *{ + padding:0; + margin:0; + box-sizing:border-box; + } + .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; +} +.logo{ + color:white; +} \ No newline at end of file diff --git a/email.js b/email.js new file mode 100644 index 00000000..58e952fd --- /dev/null +++ b/email.js @@ -0,0 +1,15 @@ +function emailSend() { + // Get form values + var params={ + name: document.getElementById("name").value, + email:document.getElementById("email").value, + }; + const serviceID="service_dmokr0t"; + const templateID="template_d7rg6go"; + emailjs.send(serviceID,templateID,params).then(res=>{ + document.getElementById("name").value=""; + document.getElementById("email").value=""; + console.log(res); + alert("Subscription successful! You will receive daily NASA pictures."); + }).catch((err)=>console.log(err)); +} diff --git a/gallery.html b/gallery.html new file mode 100644 index 00000000..5159cea2 --- /dev/null +++ b/gallery.html @@ -0,0 +1,88 @@ + + + + + + + + +
+
+
+
+
+
+
+
+ expanding cards
+
+
+ expanding cards
+
+
+ expanding cards
+
+
+ expanding cards
+
+
+ expanding cards
+
+
+ expanding cards
+
+
+ expanding cards
+
+
+ expanding cards
+
+
+ expanding cards
+
+
+ expanding cards
+
+
+ expanding cards
+
+
+ expanding cards
+
+
+
+
+
+
+
+ © 2024 Team Pyro - Aditya Yadav. All rights reserved.
+ + +