+
+
+
+
-
-
Launch Year :
-
2006
+
-
-
-
-
Rocket Name :
-
Falcon 1
+
+
+
Rocket Name :
+
Falcon 1
+
+
-
-
-
-
Launch Site :
-
Kwajalein Atoll Omelek Island
+
+
+
+
+
+
Launch Site :
+
Kwajalein Atoll Omelek Island
+
+
+
+
+
+
Result :
+
Mission Failed
+
+
+
+
+
+
+
Mission patch :
+
+
+
+
+
+
+
+
+
+
+
-
© Copyright |❤️Manan Kohli
+
© Copyright | ❤️Manan Kohli
+
-
+
-
+
diff --git a/js/main.js b/js/main.js
index bf6dd6b..2a2c067 100644
--- a/js/main.js
+++ b/js/main.js
@@ -15,10 +15,27 @@ fetch(url+fnum).then(function(response){
document.getElementById("year").textContent=obj.launch_year;
document.getElementById("mname").textContent=obj.mission_name;
document.getElementById("rname").textContent= obj.rocket.rocket_name ;
- document.getElementById("lsite").textContent=obj.launch_site.site_name_long;
+ document.getElementById("lsite").textContent=obj.launch_site.site_name;
document.getElementById("mission_patch").style.display = "block";
document.getElementById("mission_patch").src=obj.links.mission_patch_small;
document.getElementById("artlink").href=obj.links.article_link;
+
+ // getting mission outcome and details
+ if (obj.launch_success === true) {
+ document.getElementById("result").textContent="Mission Successful";
+
+ }
+ else if (obj.launch_success === false) {
+ document.getElementById("result").textContent="Mission Failure"
+
+ }
+ if (obj.details===null) {
+ document.getElementById("mdetail").textContent="NA";
+ }
+ else {
+ document.getElementById("mdetail").textContent=obj.details;
+ }
+
document.getElementById("vidframe").src=`https://www.youtube.com/embed/${obj.links.youtube_id}`;
}).catch(function(error){
console.error('wrong');
@@ -31,6 +48,8 @@ fetch(url+fnum).then(function(response){
document.getElementById("mission_patch").style.display = "none";
document.getElementById("artlink").href=obj.links.article_link;
document.getElementById("vidframe").src=`https://www.youtube.com/embed/${obj.links.youtube_id}`;
+ document.getElementById("result").textContent="NA";
+ document.getElementById("mdetail").textContent="NA";
console.error(error);
});
}
@@ -58,15 +77,15 @@ const stopVideo = () => {
let iframe_tag = video__container.querySelector( 'iframe');
if ( iframe_tag) {
let iframeSrc = iframe_tag.src;
- iframe_tag.src = iframeSrc;
+ iframe_tag.src = iframeSrc;
}
}
document.querySelector('#vidBtn')
.addEventListener('click', toggleModal);
-
+
document.querySelector('.overlay')
.addEventListener('click', toggleModal);
-
+
document.querySelector('.modal__closebar')
.addEventListener('click', toggleModal);
@@ -76,4 +95,40 @@ const stopVideo = () => {
}
myfunc=(togle)=>{
togle.classList.toggle("change");
-}
\ No newline at end of file
+}
+
+//restarting animation after a number is entered
+function reset_animation() {
+ var el = document.getElementById("anim_1");
+ el.style.animation = 'none';
+ el.offsetHeight; /* trigger reflow */
+ el.style.animation = null;
+ var el1 = document.getElementById("anim_2");
+ el1.style.animation = 'none';
+ el1.offsetHeight; /* trigger reflow */
+ el1.style.animation = null;
+ var el2 = document.getElementById("anim_3");
+ el2.style.animation = 'none';
+ el2.offsetHeight; /* trigger reflow */
+ el2.style.animation = null;
+ var el3 = document.getElementById("anim_4");
+ el3.style.animation = 'none';
+ el3.offsetHeight; /* trigger reflow */
+ el3.style.animation = null;
+ var el4 = document.getElementById("anim_5");
+ el4.style.animation = 'none';
+ el4.offsetHeight; /* trigger reflow */
+ el4.style.animation = null;
+ var el5 = document.getElementById("anim_6");
+ el5.style.animation = 'none';
+ el5.offsetHeight; /* trigger reflow */
+ el5.style.animation = null;
+ var el6 = document.getElementById("anim_7");
+ el6.style.animation = 'none';
+ el6.offsetHeight; /* trigger reflow */
+ el6.style.animation = null;
+ var el7 = document.getElementById("typedetails");
+ el7.style.animation = 'none';
+ el7.offsetHeight; /* trigger reflow */
+ el7.style.animation = null;
+}
diff --git a/main.css b/main.css
index fbeb9f0..bb1b114 100644
--- a/main.css
+++ b/main.css
@@ -10,14 +10,16 @@ body {
}
::-webkit-scrollbar
{
- width: 11px;
+ width: 5px;
}
::-webkit-scrollbar-thumb{
- background: linear-gradient(#faa303,#fa6603);
+ background: linear-gradient(#A2DBFA,#39A2DB);
border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover{
- background: linear-gradient(#ff6804,#fda501);
+ background: linear-gradient(#A2DBFA,#39A2DB);
+ overflow-x: hidden;
+ overflow-y: hidden;
}
.back{
@@ -79,7 +81,7 @@ header {
outline: none;
}
.nav-item a:hover{
- color: #f3df27;
+ color: #FF94CC;
}
.nav-item a:focus{
color: rgb(255, 238, 7);
@@ -90,7 +92,7 @@ header {
left: 0;
right: 0;
margin: auto;
- background-color: #f50808;
+ background-color: #39A2DB;
color: transparent;
width: 0%;
content: '.';
@@ -109,7 +111,7 @@ header {
.bar1, .bar2, .bar3 {
width: 33px;
height: 2px;
- border: 2.5px solid white;
+ border: 2.5px solid #3EDBF0;
border-radius: 4px;
background-color: rgb(255, 255, 255);
margin: 5px 0;
@@ -146,7 +148,7 @@ header input {
padding: 12px 15px;
border: none;
outline: none;
- background-color: rgba(255, 255, 255, 0.9);
+ background-color: rgba(255, 255, 255, 0.6);
border-radius: 12px;
color: #313131;
font-size: 20px;
@@ -155,24 +157,35 @@ header input {
}
header input:focus {
- background-color: rgba(255, 255, 255, 0.6);
+ background-color: rgba(255, 255, 255, 0.9) ;
}
main {
+ position: relative;
+ min-height: 100vh;
padding: 14px 25px;
text-align: center;
}
+/* changing main's position when screen size reduces */
+@media (max-width:1315) {
+ main{
+ position: static;
+ min-height: 0
+ }
+}
.mission_wrapper {
- display: flex;
+
+ display:flex;
flex-direction: column;
align-items: center;
min-width: 50vw;
min-height: 60vh;
- border: 3px solid #ffca33;
+ border: 3px solid #3EDBF0;
border-radius: 20px;
+
}
.detail_row {
@@ -188,28 +201,197 @@ main {
.mission {
margin-bottom: 20px;
}
+
+
.detail_block {
/* display: flex; */
justify-content: center;
align-items: center;
- border: 1px solid #ffca33;
+ border: 1px solid #3EDBF0;
border-radius: 10px;
background: none;
padding: 10px 13px;
- font-size: 20px;
+ font-size: 10px 40px 10px 40px;
margin: 10px;
- color: #ffca33;
+ color: #3EDBF0;
+}
+
+.detail_block_c {
+ /* display: flex; */
+ /*animation-fill-mode: both;*/
+
+ justify-content: space-around ;
+ align-items: center;
+ border: 1px solid #3EDBF0;
+ border-radius: 10px;
+ background: none;
+ padding: 10px 18px;
+ font-size: 20px;
+ margin: 10px 40px 10px 40px;
+ color: #3EDBF0;
+}
+/* animation for mission patch */
+.patch_img{
+
+ align-items: center;
+ justify-content: center;
+ animation: moveLeft 5.5s forwards;
+ -webkit-animation: moveLeft 5.5s forwards;
}
+@keyframes moveLeft {
+
+ from {
+ transform: translateX(200px);
+ opacity: 0;
+ }
+ to {
+ transform: translateX(0px);
+ opacity: 100;
+ }
+
+}
+@-webkit-keyframes moveLeft {
+ from {
+ transform: translateX(200px);
+ opacity: 0;
+ }
+ to {
+ transform: translateX(0px);
+ opacity: 100;
+ }
+}
+/* **************************************************************************** */
+/* animation for information blocks */
+.slide-in {
+
+ animation: fadeIn 5.5s forwards;
+ -webkit-animation: fadeIn 5.5s forwards;
+}
+.slide-in2 {
+
+ animation: fadeIn 5.5s forwards;
+ animation-delay: 0.1s ;
+ -webkit-animation: fadeIn 5.5s forwards;
+ -webkit-animation-delay:0.1s;
+}
+.slide-in3 {
+ animation: fadeIn 5.5s forwards;
+ animation-delay: 0.1s ;
+ -webkit-animation: fadeIn 5.5s forwards;
+ -webkit-animation-delay:0.1s;
+}
+.slide-in4 {
+ animation: fadeIn 5.5s forwards;
+ animation-delay: 0.1s ;
+ -webkit-animation: fadeIn 5.5s forwards;
+ -webkit-animation-delay:0.1s;
+}
+.slide-in5 {
+ animation: fadeIn 5.5s forwards;
+ animation-delay: 0.1s ;
+ -webkit-animation: fadeIn 5.5s forwards;
+ -webkit-animation-delay:0.1s;
+}
+.slide-in6 {
+
+ animation: fadeIn 5.5s forwards;
+ animation-delay: 0.1s ;
+ -webkit-animation: fadeIn 5.5s forwards;
+ -webkit-animation-delay:0.1s;
+}
+@keyframes fadiIn {
+ from {
+ transform: translateX(-400px);
+ opacity: 0;
+ }
+ to {
+ transform: translateX(0px);
+ opacity: 100;
+ }
+}
+
+@-webkit-keyframes fadeIn {
+ from {
+ transform: translateX(-400px);
+ opacity: 0;
+ }
+ to {
+ transform: translateX(0px);
+ opacity: 100;
+ }
+}
+/* ***************************************************************** */
+/* ******************* resizing patch when screen size reduces******************************************* */
+#mission_patch{
+ height: 250px;
+ width: 250px;
+}
+.patch_img{
+ text-align: center;
+ justify-content: center;
+ padding-right: 10px;
+}
+.img-pos{
+ padding-top: 30px;
+ padding-right: 80px;
+}
+@media (max-width:1300px) {
+ .img-pos{
+ padding: 0;
+ margin-left: 20px;
+ }
+
+}
+@media (max-width:1315px) {
+ #mission_patch{
+ height: 180px;
+ width:180px;
+ }
+}
+@media (max=width:670) {
+ #mission_patch{
+ height: 125px;
+ width:125px;
+ }
+}
+.patch_ps{
+ font-size: 20px;
+ padding-left: 60px;
+}
+/* ******************************************************** */
+/*typewriting effect*/
+.details{
+ margin-top: 20px;
+ white-space: nowrap;
+ overflow: hidden;
+ transform: translateY(-50%);
+ animation: typewriter 4s steps(44) 1s 1 normal both,
+ blinkTextCursor 500ms steps(44) infinite normal;
+}
+
+
+/* The typing effect */
+@keyframes typewriter {
+ from { width: 0 }
+ to { width: 100% }
+}
+
+/* The typewriter cursor effect */
+@keyframes blinkTextCursor {
+ from, to { border-color: transparent }
+ 50% { border-color: orange; }
+}
+/* *********************************************** */
.detail_block1 {
/* display: flex; */
position: relative;
justify-content: center;
align-items: center;
- border: 1px solid #ffca33;
+ border: 1px solid #3EDBF0;
background: none;
padding: 10px 13px;
font-size: 20px;
- color: #ffca33;
+ color: #3EDBF0;
}
.label {
@@ -224,19 +406,19 @@ main {
margin-top: 20px;
}
.mission .name {
- color: #ffca33;
+ color: #04009A;
font-size: calc(25px + 2vw);
font-weight: 900;
margin: 30px 15px;
- text-shadow: 2px 2px 10px #ffca33;
+ text-shadow: 2px 2px 10px #ffffff;
animation: glow 3s ease-in-out infinite alternate;
}
.mission .name1 {
- color: #ffca33;
+ color: #BEAEE2;
font-size: calc(25px + 2vw);
font-weight: 900;
margin: 30px 10px;
- text-shadow: 2px 2px 10px #ffca33;
+ text-shadow: 2px 2px 10px #BEAEE2;
animation: glow 3s ease-in-out infinite alternate;
}
.boss{
@@ -264,7 +446,7 @@ main {
width: 0px;
right: 19%;
} */
-
+
}
.mission .anime span:nth-child(1) {
position: absolute;
@@ -272,7 +454,7 @@ main {
height: 4px;
top: 0px;
right: 2vw;
- background: linear-gradient(to Right, transparent, rgb(252, 182, 102));
+ background: linear-gradient(to Right, transparent, rgb(251 , 122 , 252));
animation: border_anime 2s linear infinite;
}
.mission .anime span:nth-child(2) {
@@ -281,7 +463,7 @@ main {
height: 100%;
top: 9px;
right: 0px;
- background: linear-gradient(to bottom, transparent, rgb(250, 228, 180));
+ background: linear-gradient(to bottom, transparent, rgb(255 , 148 , 204));
animation: border_anime2 2s linear infinite;
animation-delay: 1s;
}
@@ -291,7 +473,7 @@ main {
height: 4px;
top: 98%;
right: 2px;
- background: linear-gradient(to Left, transparent, rgb(250, 228, 180));
+ background: linear-gradient(to Left, transparent, rgb(251 , 122 , 252));
animation: border_anime3 2s linear infinite;
}
.mission .anime span:nth-child(4) {
@@ -300,7 +482,7 @@ main {
height: 100%;
top: 9px;
right: 99.4%;
- background: linear-gradient(to top, transparent, rgb(250, 228, 180));
+ background: linear-gradient(to top, transparent, rgb(255 , 148 , 204));
animation: border_anime4 2s linear infinite;
animation-delay: 1s;
}
@@ -339,11 +521,11 @@ main {
}
@keyframes glow {
from {
- text-shadow: 0 0 06px #ff8633, 0 0 8px #ff8633, 0 0 10px #ff8633;
+ text-shadow: 0 0 06px #88FFF7, 0 0 8px #88FFF7, 0 0 10px #88FFF7;
}
to {
- text-shadow: 0 0 06px #ff8633, 0 0 8px #ff8633, 0 1 10px #ff8633;
+ text-shadow: 0 0 06px #88FFF7, 0 0 8px #88FFF7, 0 1 10px #88FFF7;
}
}
@@ -375,13 +557,13 @@ main {
}
.btn {
- border: 2px solid #ffca33;
+ border: 2px solid #9FD8DF;
background: none;
padding: 10px 20px;
font-size: 20px;
margin: 10px;
/* margin-left: 40px; */
- color: #ffca33;
+ color: #9FD8DF;
transition: 0.8s;
position: relative;
border-radius: 6px;
@@ -395,7 +577,7 @@ main {
right: 0;
width: 0%;
height: 100%;
- background: #ffbb00;
+ background: #19D3DA;
transition: 0.3s linear;
z-index: -1;
}
@@ -446,8 +628,8 @@ main {
position: relative;
width: calc(100px + 55vw);
margin: 5px;
- border: 4px solid #ffca33;
- box-shadow: -1px 2px 7px #f5de69b5;
+ border: 4px solid #7868E6;
+ box-shadow: -1px 2px 7px #B8B5FF;
height: auto;
}
@@ -479,9 +661,11 @@ main {
margin-top: -2rem;
margin-right: -2rem;
}
+
@media (min-width: 1025px) {
.spa {
display: none;
+
}
}
@@ -558,15 +742,29 @@ main {
/*Footer*/
footer {
- background-color: #000000;
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ background-color: #ffffff;
animation: glow 3s ease-in-out infinite alternate;
- background: linear-gradient(90deg, #ff8633 -40%, black 50%, #ff8633 140%);
+ background: linear-gradient(90deg, #5C33F6 -40%, black 50%, #5C33F6 140%);
text-align: center;
padding-bottom: 15px;
+
}
+/* fixing foooter to bottom */
+@media (max-width:1315px) {
+ footer{
+ position: static;
+ bottom: auto;
+ width: auto;
+
+ }
+}
+/* **************************************************** */
.sm-handle {
display: flex;
- padding-top: 2rem;
+ padding: 1rem 4rem 0 4rem;
justify-content: center;
}
.sm-button {
@@ -582,7 +780,7 @@ footer {
text-decoration: none;
}
.sm-button:hover {
- background: linear-gradient(to right,#ff8633, #ffbb00);
+ background: linear-gradient(to right,#39A2DB, #B5EAEA);
}
@@ -595,12 +793,13 @@ footer {
word-spacing: 2px;
color: white;
letter-spacing: 1.5px;
+ padding-bottom: 0;
}
.to-top
{
- background-color: goldenrod;
+ background-color: #3EDBF0;
position: fixed;
bottom: 16px;
right: 32px;
@@ -618,7 +817,7 @@ footer {
transition: all .4s;
}
.to-top:hover{
- color: goldenrod;
+ color: #3EDBF0;
background-color: lightgray;
}
@@ -627,4 +826,4 @@ footer {
bottom: 32px;
pointer-events: auto;
opacity: 1;
-}
\ No newline at end of file
+}