1<!DOCTYPE html> 2<html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 8 <title>Astronauts in flights</title> 9 10 <link rel="stylesheet" href="./w3.css" type="text/css"> 11
11<script src="./jquery.min.js"></script>
11 12
12<script src="./ztext.js"></script>
12 13 <link rel="stylesheet" href="jquery.vidbacking.css" type="text/css"> 14 <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700&display=swap" rel="stylesheet"> 15 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"> 16 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"> 17 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"> 18 <style> 19 :root { 20 --glow-color: #00fff2; 21 --dark-glow: #007772; 22 --background-dark: #020b26; 23 } 24 25 body { 26 background: var(--background-dark); 27 color: #fff; 28 font-family: 'Orbitron', sans-serif; 29 overflow-x: hidden; 30 } 31 32 .container { 33 max-width: 1200px; 34 margin: auto; 35 padding: 30px; 36 } 37 38 h2.w3-tag { 39 background: linear-gradient(90deg, #000428, #004e92); 40 color: white; 41 text-shadow: var(--text-glow); 42 padding: 10px 20px; 43 border-radius: 25px; 44 letter-spacing: 2px; 45 font-family: 'Orbitron', sans-serif; 46 animation: glowPulse 2s infinite; 47 } 48 49 .name { 50 background: linear-gradient(90deg, #000428, #004e92); 51 color: white; 52 text-shadow: var(--text-glow); 53 text-align: justify center; 54 padding: 10px 20px; 55 border-radius: 25px; 56 font-size: medium; 57 font-family: 'Orbitron', sans-serif; 58 animation: glowPulse 2s infinite; 59 } 60 61 .glow-text { 62 color: var(--glow-color); 63 text-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color); 64 text-align: center; 65 font-size: 1.5rem; 66 font-family: 'Orbitron', sans-serif; 67 animation: glowPulse 2s infinite alternate; 68 } 69 70 .glow-tile { 71 color: var(--glow-color); 72 text-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color); 73 text-align: center; 74 font-size: 2rem; 75 font-family: 'Orbitron', sans-serif; 76 animation: glowPulse 2s infinite alternate; 77 } 78 79 .bio-text { 80 text-align: justify; 81 font-size: 1.2rem; 82 font-family: Georgia, 'Times New Roman', Times, serif; 83 } 84 85 @keyframes glowPulse { 86 from { 87 text-shadow: 0 0 10px var(--glow-color); 88 } 89 90 to { 91 text-shadow: 0 0 20px var(--glow-color); 92 } 93 } 94 95 .astronaut-card { 96 background: rgba(0, 15, 45, 0.8); 97 border: 1px solid var(--glow-color); 98 box-shadow: 0 0 15px var(--dark-glow); 99 padding: 20px; 100 border-radius: 15px; 101 margin: 20px 0; 102 transition: transform 0.3s ease, box-shadow 0.3s ease; 103 } 104 105 .astronaut-card:hover { 106 transform: translateY(-5px); 107 box-shadow: 0 0 30px var(--glow-color); 108 } 109 110 .astronaut-image { 111 width: 100%; 112 max-width: 250px; /* Adjust as needed */ 113 height: auto; 114 border-radius: 2%; 115 border: 2px solid var(--glow-color); 116 box-shadow: 0 0 20px var(--glow-color); 117 position: relative; 118 transition: transform 0.5s ease; 119} 120 121 .astronaut-image::after { 122 content: ""; 123 position: absolute; 124 top: -2px; 125 left: -2px; 126 right: -2px; 127 bottom: -2px; 128 border-radius: 2%; 129 border: 2px solid transparent; 130 box-shadow: 0 0 10px var(--glow-color); 131 animation: border-glow 3s infinite linear; 132 } 133 134 @keyframes border-glow { 135 0% { 136 clip-path: inset(0 100% 98% 0); 137 } 138 139 25% { 140 clip-path: inset(0 0 0 98%); 141 } 142 143 50% { 144 clip-path: inset(98% 0 0 0); 145 } 146 147 75% { 148 clip-path: inset(0 98% 0 0); 149 } 150 151 100% { 152 clip-path: inset(0 100% 98% 0); 153 } 154 } 155 156 .logo-image { 157 width: 100px; 158 height: 100px; 159 border-radius: 5%; 160 padding: auto; 161 border: 2px solid var(--glow-color); 162 box-shadow: 0 0 20px var(--glow-color); 163 transition: transform 0.5s ease; 164 } 165 166 .astronaut-image:hover { 167 transform: scale(1.3); 168 } 169 170 .right-align { 171 text-align: right; 172 } 173 174 .z-text { 175 176 animation: wobble 10s ease-in-out infinite; 177 transform: rotateX(15deg) rotateY(-20deg); 178 } 179 180 .z-layer { 181 filter: brightness(0.7); 182 } 183 184 .z-layer:first-child { 185 filter: brightness(1); 186 } 187 188 189 .z-layer:not(:first-child) { 190 filter: brightness(0.7); 191 } 192 193 @keyframes wobble { 194 195 0%, 196 100% { 197 transform: rotate3d(-1, 1, 0, 30deg); 198 } 199 200 25% { 201 transform: rotate3d(1, 1, 0, 30deg); 202 } 203 204 50% { 205 transform: rotate3d(1, -1, 0, 30deg); 206 } 207 208 75% { 209 transform: rotate3d(-1, -1, 0, 30deg); 210 } 211 } 212 213 .test { 214 font-family: 'Orbitron', sans-serif; 215 font-size: x-large; 216 } 217 218 .w3-badge { 219 background: linear-gradient(45deg, #8a73e7, #60efff); 220 border: none; 221 padding: 8px; 222 font-size: 1.2em; 223 box-shadow: 0 0 15px rgba(0, 255, 242, 0.4); 224 font-family: 'Orbitron', sans-serif; 225 } 226 227 button[onclick^="toggleAccordion"] { 228 background: transparent; 229 border: 1px solid var(--glow-color); 230 color: var(--glow-color); 231 padding: 5px 15px; 232 border-radius: 20px; 233 transition: all 0.3s ease; 234 animation: buttonGlow 1.5s infinite alternate; 235 } 236 237 button[onclick^="toggleAccordion"]:hover { 238 background: rgba(0, 255, 242, 0.1); 239 transform: scale(1.05); 240 } 241 242 243 /* Smooth scroll behavior */ 244 html { 245 scroll-behavior: smooth; 246 } 247 248 /* Enhanced accordion animation */ 249 .w3-show { 250 animation: slideDown 0.5s ease-out; 251 } 252 253 @keyframes slideDown { 254 from { 255 opacity: 0; 256 transform: translateY(-10px); 257 } 258 259 to { 260 opacity: 1; 261 transform: translateY(0); 262 } 263 } 264 265 /* Navigation menu enhancement */ 266 #w3-menu-container { 267 position: fixed; 268 top: 0; 269 width: 100%; 270 z-index: 1000; 271 background:transparent; 272 backdrop-filter: blur(2px); 273 box-shadow: 0 0 10px rgba(0, 255, 242, 0.2); 274 } 275 276 #w3-menu-container img { 277 transition: transform 0.3s ease; 278 filter: drop-shadow(0 0 5px var(--glow-color)); 279 } 280 281 #w3-menu-container img:hover { 282 transform: scale(1.2); 283 filter: drop-shadow(0 0 10px var(--glow-color)); 284 } 285 </style> 286 </head> 287 288 <body> 289
289<script src="https://code.jquery.com/jquery-3.2.1.min.js" 290 integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
290 291
291<script src="jquery.vidbacking.js" type="text/javascript"></script>
291 292
292<script type="text/javascript"> 293 $(function () { 294 $('body').vidbacking({ 295 'masked': false 296 }); 297 }); 298 </script>
298 299 <video poster="starryNight2.jpeg" autoplay muted loop class="vidbacking"> 300 301 </video> 302 <!-- Navigation (Stays on Top) --> 303 <div id="w3-menu-container" class="w3-bar w3-center w3-transparent"> 304 <!-- Your W3.CSS sidenav goes here --> 305 306 <a href="index.html" class="w3-button"><img src="iss4.png" height="50px" width="40px"></img></a> 307 <a href="space-astro.html" class="w3-button"><img src="cosmo.png" height="50px" 308 width="40px"></img></span></a> 309 <a href="lancements.html" class="w3-button"><img src="fusée.png" height="50px" width="40px"></img></a> 310 <a href="exo-arecibo.html" class="w3-button"><img src="saturne.png" height="50px" width="40px"></img></a> 311 <a href="apod.html" class="w3-button"><img src="telescope.png" height="50px" width="40px"></img></a> 312 313 </div> 314 315 316 <div class="gtranslate_wrapper"></div> 317
317<script> 318 window.gtranslateSettings = { 319 "default_language": "en", 320 "native_language_names": true, 321 "wrapper_selector": ".gtranslate_wrapper", 322 "flag_size": 16, 323 "switcher_horizontal_position": "left", 324 "switcher_vertical_position": "bottom", 325 "flag_style": "3d" 326 } 327 </script>
327 328
328<script src="https://cdn.gtranslate.net/widgets/latest/dwf.js" defer></script>
328 329 330 331 332 <div id="main"> 333 <br> 334 <div class="container"> 335 <h1 class="glow-text">Astronauts in flights</h1> 336 <div id="astronautsData">Loading...</div> 337
337<script>const words = ["Cosmonauts", "Astronauts", "Spationauts", "Taïkonauts"]; 338 let index = 0; 339 340 const h1 = document.querySelector('.glow-text'); 341 // Wrap the changing word in a span 342 h1.innerHTML = `<span id="changing-word">${words[0]}</span> in flights`; 343 344 setInterval(() => { 345 index = (index + 1) % words.length; 346 const span = document.getElementById('changing-word'); 347 348 // Fade out 349 span.style.transition = 'opacity 0.4s'; 350 span.style.opacity = '0'; 351 352 setTimeout(() => { 353 span.textContent = words[index]; 354 span.style.opacity = '1'; // Fade in 355 }, 400); 356 357 }, 2000); 358 </script>
358 359 </div> 360 361
361<script> 362 async function fetchData() { 363 const apiUrl = 364"https://ll.thespacedevs.com/2.2.0/astronaut/?in_space=true&limit=100"; 365 try { 366 const response = await fetch(apiUrl); 367 const data = await response.json(); 368 console.log(data); 369 const container = document.getElementById("astronautsData"); 370 371 if (!data || !Array.isArray(data.results)) { 372 console.error("Unexpected API response:", data); 373 container.innerText = "No astronaut data available."; 374 return; 375} 376 377 let count = data.count; 378 container.innerHTML = ""; 379 380 data.results.forEach(astronaut => { 381 const card = document.createElement("div"); 382 card.classList.add("astronaut-card"); 383 384 // Format the first flight date 385 const firstFlightDate = new Date(astronaut.first_flight); 386 const formattedFirstFlight = firstFlightDate.toLocaleDateString('en-EN', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }); 387 388 // Debugging: Log the time_in_space value 389 console.log(`Astronaut: ${astronaut.name}, Time in Space: ${astronaut.time_in_space}`); 390 391 392 // Parse and format time in space 393 const timeInSpace = astronaut.time_in_space.match(/P(?:(\d+)D)?T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?/); 394 const days = timeInSpace[1] ? parseInt(timeInSpace[1]) : 0; 395 const hours = timeInSpace[2] ? parseInt(timeInSpace[2]) : 0; 396 const minutes = timeInSpace[3] ? parseInt(timeInSpace[3]) : 0; 397 const seconds = timeInSpace[4] ? parseInt(timeInSpace[4]) : 0; 398 const formattedTimeInSpace = `${days} jours ${hours} heures ${minutes} minutes ${seconds} secondes`; 399 400 card.innerHTML = ` 401 <p class="name"> 402 <a class="w3-badge w3-right-align glow-text"><strong>${count--}</strong></a> 403 <a class="test"> - ${astronaut.name}</a><br> 404 <img class="astronaut-image" src="${astronaut.profile_image || 'cosmo.png'}" alt="${astronaut.name}"></p> 405 <p><a class="w3-tag w3-blue w3-round-large"><strong><u>Nationality:</u></strong></a> ${astronaut.nationality}</p> 406 <p><a class="w3-tag w3-blue w3-round-large"><strong><u>Age:</u></strong></a> ${astronaut.age} years</p> 407 <p><a class="w3-tag w3-blue w3-round-large"><strong><u>Agency:</u></strong></a> ${astronaut.agency.name}</p> 408 <p><a class="w3-tag w3-blue w3-round-large"><strong><u>Spacecraft:</u></strong></a> ${astronaut.agency.spacecraft}</p> 409 <button onclick="toggleAccordion('Demo${count}')" class="w3-container w3-ripple w3-hover w3-border-deep-orange w3-pale-blue w3-text-green w3-tiny w3-round-xxlarge"><p>Infos >>></p></button> 410 <div id="Demo${count}" class="w3-container w3-hide"> 411 <p class="w3-display-container w3-tag w3-animate-right"><strong><i><u>Bio: </u></i></strong><a class="bio-text"> ${astronaut.bio}</a></p> 412 <p><strong><a class="w3-tag w3-pale-blue w3-round-large">Flights count: </a></strong> ${astronaut.flights_count}</p> 413 <p><strong><a class="w3-tag w3-pale-blue w3-round-large">Spacewalks: </a></strong> ${astronaut.spacewalks_count}</p> 414 <p><strong><a class="w3-tag w3-pale-blue w3-round-large">1st flight: </a></strong> ${formattedFirstFlight}</p> 415 <p><strong><a class="w3-tag w3-pale-blue w3-round-large">Total time in space: </a></strong> ${formattedTimeInSpace}</p> 416 <p><strong><a class="w3-tag w3-pale-blue w3-round-large">Wiki: </a></strong> <a href="${astronaut.wiki}" target="_blank">${astronaut.name}</a></p> 417 <p><strong><a class="w3-tag w3-pale-blue w3-round-large">Twitter: </a></strong> <a href="${astronaut.twitter}" target="_blank">${astronaut.twitter}</a></p> 418 <p><strong><a class="w3-tag w3-pale-blue w3-round-large">Instagram: </a></strong> <a href="${astronaut.Instagram}" target="_blank">${astronaut.Instagram}</a></p> 419 <p><strong><a class="w3-tag w3-pale-blue w3-round-large">Agency: </a></strong> ${astronaut.agency.name} - (<i>${astronaut.agency.abbrev}</i>) - <strong><u><i>Type:</i></u></strong> ${astronaut.agency.type}</p> 420 <p class="w3-right-align"><span data-z data-z-depth="40px" z-perspective="none" z-depth="60px"><img class="logo-image w3-center" src="${astronaut.agency.logo_url}"></span></p> 421 </div> 422 `; 423 container.appendChild(card); 424 }); 425 426 document.querySelectorAll('.ztext').forEach(element => { 427 new Ztextify(element); 428 }); 429 } catch (error) { 430 console.error("Error fetching data:", error); 431 document.getElementById("astronautsData").innerText = "Failed to fetch data."; 432 } 433} 434 435function toggleAccordion(id) { 436 const x = document.getElementById(id); 437 if (x.classList.contains("w3-show")) { 438 x.classList.remove("w3-show"); 439 } else { 440 x.classList.add("w3-show"); 441 } 442} 443 444function ztextify() { 445 const elements = document.querySelectorAll('.ztext');
446 elements.forEach(element => { 447 ztextify(element); 448 }); 449} 450 451fetchData(); 452 </script>
452 453 </div> 454 455 456 457 458 </body> 459 460</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.