diff options
author | Christian Cleberg <hello@cleberg.net> | 2023-05-22 15:31:09 -0500 |
---|---|---|
committer | Christian Cleberg <hello@cleberg.net> | 2023-05-22 15:31:09 -0500 |
commit | 980b3d202b5a53428873feeac2963920d01db8c9 (patch) | |
tree | 62ea4d2ed29db8c55ff63821c59e43bca9080b34 /assets | |
download | space-wiki-980b3d202b5a53428873feeac2963920d01db8c9.tar.gz space-wiki-980b3d202b5a53428873feeac2963920d01db8c9.tar.bz2 space-wiki-980b3d202b5a53428873feeac2963920d01db8c9.zip |
initial commit
Diffstat (limited to 'assets')
29 files changed, 785 insertions, 0 deletions
diff --git a/assets/css/styles.css b/assets/css/styles.css new file mode 100644 index 0000000..3a10983 --- /dev/null +++ b/assets/css/styles.css @@ -0,0 +1,663 @@ +/* Base CSS */ +:root { + --accent: rgb(249, 207, 0); + --accent-8: rgba(249, 207, 0, 0.8); + --accent-5: rgba(249, 207, 0, 0.5); + --accent-25: rgba(249, 207, 0, 0.25); +} + +html { + scroll-behavior: smooth; +} + +body { + background: black; + color: white; + padding-top: 43px; +} + +h1, h2, h3, h4, h5, h6, .navbar-brand { + font-family: 'Montserrat', sans-serif; + font-weight: 700; +} + +p { + font-family: 'Montserrat', sans-serif; +} + +a:active, a:focus { + outline: none; +} + +.navbar { + padding: 1rem 2rem; + background: black; +} + +.dropdown-menu { + background: black; + border: 1px solid white; +} + +.dropdown-item { + color: rgba(255, 255, 255, .5); +} + +.dropdown-item:focus, .dropdown-item:hover { + background-color: black; + color: rgba(255, 255, 255, .75); +} + +.dropdown-item.active, .dropdown-item:active { + background: black; + color: var(--accent); + font-weight: bold; +} + +li.nav-item { + margin-left: 0.25rem; + margin-right: 0.25rem; +} + +@media (min-width: 992px) { + .nav-item.active { + border-bottom: 3px solid var(--accent); + } +} + +footer { + border-top: 1px solid rgba(255, 255, 255, 0.2); +} + +.footer-brand { + color: white; + margin-left: 4px; +} + +.footer-brand span { + color: var(--accent); +} + +.footer-brand:hover { + color: rgba(255, 255, 255, 0.8); + text-decoration: none; +} + +footer .d-block { + margin-left: 4px; +} + +footer .d-flex { + padding: 0 15px; +} + +.footer-link { + color: white; + margin-right: 0.25rem; + margin-left: 0.25rem; +} + +.footer-link-sep { + margin-right: 0.5rem; + margin-left: 0.5rem; +} + +.footer-link:hover { + color: var(--accent); +} + +.link { + color: white; +} + +.link:hover { + color: var(--accent); + text-decoration: none; +} + +/* Override Bootstrap Styles */ +.btn-primary { + background-color: var(--accent); + border-color: var(--accent); + color: black; +} + +.btn-primary:hover { + background-color: var(--accent-8); + border-color: var(--accent-8); + color: black; +} + +.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus { + box-shadow: 0 0 0 .2rem var(--accent-5); +} + +.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle { + background-color: var(--accent); + border-color: var(--accent); + color: black; +} + +.btn-primary.focus, .btn-primary:focus { + box-shadow: 0 0 0 .2rem var(--accent-5); +} + +.contact-button { + border: 1px solid var(--accent); + border: 1px solid var(--accent-5); + color: #eee; + padding: 2rem; + width: 100% +} + +.contact-button:hover { + border: 1px solid var(--accent); + color: #fff; +} + +/* home page */ +#hero { + background-attachment: fixed; + background-image: url("https://img.cleberg.net/space-wiki/hero-banner.jpg"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + height: 65vh; +} + +#hero div.text-center { + margin-top: 3rem; + margin-right: 0.5rem; + margin-left: 0.5rem; +} + +#hero-title { + font-size: 5rem; +} + +@media (max-width: 768px) { + #hero-title { + font-size: 3rem; + } +} + +@media (max-width: 576px) { + #hero-title { + font-size: 2rem; + } +} + +#hero-subtitle { + color: var(--accent); + text-transform: uppercase; +} + +#explore-content { + padding-top: 3rem; + padding-bottom: 3rem; +} + +#explore-options { + padding-top: 2rem; + padding-bottom: 2rem; +} + +.explore-card { + margin-top: 1rem; + margin-bottom: 1rem; + background: inherit; + color: inherit; + border: 1px solid #fff; + cursor: pointer; +} + +.explore-card .card-body { + display: flex; + flex-direction: column; + align-items: center; +} + +.explore-icon { + font-size: 2rem; + margin-bottom: 1rem; +} + +#apod-wrapper { + margin-bottom: 4rem; +} + +#apod-container { + display: none; +} + +#apod-credit { + font-size: 0.8rem; + opacity: 0.5; +} + +#apod-img, #apod-vid { + display: none; + max-width: 95vw; + max-height: 80vh; + margin: 2rem auto auto auto; +} + +#apod-explanation { + font-size: 0.9rem; +} + +/* planets */ +.planet-container { + min-height: calc(100vh - 5rem); +} + +.planets-nav { + margin: 5rem auto; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border: 1px solid white; + width: max-content; + padding: 0.25rem 2rem; + border-radius: 0.25rem; +} + +.planets-nav-item { + margin: 0.5rem 0; +} + +.planets-nav-item:not(.active) { + color: var(--accent); +} + +.planets-nav-item.active { + color: rgba(255, 255, 255, 0.8); +} + +.planets-nav-item.active:before { + color: #fff; + content: "<"; + padding: 0 1rem; +} + +.planets-nav-item.active:after { + color: #fff; + content: ">"; + padding: 0 1rem; +} + +#sun-breadcrumb:before { + content: none; +} + +#neptune-breadcrumb:after { + content: none; +} + +.planet-about { + font-weight: bold; + margin-bottom: 0; + text-transform: uppercase; + color: var(--accent); +} + +.planet-title { + margin-bottom: 4rem; +} + +.planet-description { + margin-bottom: 4rem; +} + +.planet-stats { + margin-bottom: 2rem; +} + +.planet-link { + text-transform: uppercase; + color: var(--accent); + margin-bottom: 2rem; +} + +.planet-link:hover { + color: var(--accent); + text-decoration: none; + border-bottom: 2px solid var(--accent); +} + +.solar-system { + margin-top: 10rem; + margin-bottom: 5rem; +} + +.solar-system>h1 { + margin-bottom: 4rem; +} + +.planet-img { + width: 100%; +} + +@media (max-width: 768px) { + .planet-img { + margin: 3rem auto; + } +} + +/* gallery */ +#search_container { + margin-top: 5rem; +} + +#temporary-banner { + text-align: center; + padding: 5rem 3rem; + background: #222; + color: rgba(255, 255, 255, 0.7); + border-radius: 0.5rem; +} + +#search_container { + margin-top: 6rem; + margin-bottom: 4rem; +} + +#search_row { + margin-bottom: 4rem; +} + +#search_row div { + margin-top: 0.5rem; +} + +#search_input { + background: inherit; + color: inherit; + height: 3rem; + padding: 1.5rem; + font-size: 1.5rem; +} + +#search_button { + width: 100%; + height: 100%; +} + +.gallery-card { + background: inherit; + color: inherit; + border: 1px solid rgba(255, 255, 255, 0.5); +} + +.gallery-card .card-title { + margin: 0; +} + +/* about */ +#meet-us, #contact-us { + margin-top: 5rem; + margin-bottom: 5rem; + text-align: center; +} + +#banner-title { + margin-bottom: 2rem; +} + +#banner-title a { + color: var(--accent); +} + +#meet-us-card { + text-align: left; + width: 100%; + background: inherit; + color: inherit; +} + +#meet-us-card .card-img-left { + display: block; + height: 200px; + width: 200px; + border: 1px solid white; + margin-bottom: 2rem; + margin-right: auto; + margin-left: auto; +} + +#meet-us-card .card-link { + color: var(--accent); +} + +#meet-us-card .card-link:hover { + color: var(--accent); + opacity: 0.8; +} + +.form-control { + background: inherit; + color: inherit; + border: 1px solid white; +} + +.form-control:focus { + background: inherit; + color: inherit; + border-color: var(--accent); + box-shadow: 0 0 0 .2rem var(--accent-25); +} + +/* missions */ +#timeline-page-container { + margin: 5rem auto; +} + +#centered-timeline { + margin: 4rem auto; +} + +.timeline { + list-style: none; + margin: 0; + padding: 0; + width: 100%; +} + +.timeline h1, .timeline h2, .timeline h3, .timeline h4, .timeline h5, .timeline h6 { + line-height: inherit; +} + +h2.timeline-title { + color: var(--accent); +} + +h3.timeline-title { + color: white; +} + +/*----- TIMELINE ITEM -----*/ +.timeline-item { + padding-left: 40px; + position: relative; +} + +.timeline-item:last-child { + padding-bottom: 0; +} + +/*----- TIMELINE INFO -----*/ +.timeline-info { + font-size: 12px; + font-weight: 700; + /* letter-spacing: 3px; */ + margin: 0 0 .5em 0; + text-transform: uppercase; + white-space: nowrap; +} + +/*----- TIMELINE MARKER -----*/ +.timeline-marker { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 15px; +} + +.timeline-marker:before { + background: #f9cf00; + border: 3px solid transparent; + border-radius: 100%; + content: ""; + display: block; + height: 15px; + position: absolute; + top: 4px; + left: 0; + width: 15px; + transition: background 0.3s ease-in-out, border 0.3s ease-in-out; +} + +.timeline-marker:after { + content: ""; + width: 3px; + background: #CCD5DB; + display: block; + position: absolute; + top: 24px; + bottom: 0; + left: 6px; +} + +.timeline-item:last-child .timeline-marker:after { + content: none; +} + +.timeline-item:not(.period):hover .timeline-marker:before { + background: transparent; + border: 3px solid #f9cf00; +} + +/*----- TIMELINE CONTENT -----*/ +.timeline-content { + padding-bottom: 40px; +} + +.timeline-content p:last-child { + margin-bottom: 0; +} + +/*----- TIMELINE PERIOD -----*/ +.period { + padding: 0; +} + +.period .timeline-info { + display: none; +} + +.period .timeline-marker:before { + background: transparent; + content: ""; + width: 15px; + height: auto; + border: none; + border-radius: 0; + top: 0; + bottom: 30px; + position: absolute; + border-top: 3px solid #CCD5DB; + border-bottom: 3px solid #CCD5DB; +} + +.period .timeline-marker:after { + content: ""; + height: 32px; + top: auto; +} + +.period .timeline-content { + padding: 40px 0 70px; +} + +.period .timeline-title { + margin: 0; +} + +/*---------------------------------------------- + MOD: TIMELINE CENTERED +----------------------------------------------*/ +@media (min-width: 992px) { + + .timeline-centered, + .timeline-centered .timeline-item, + .timeline-centered .timeline-info, + .timeline-centered .timeline-marker, + .timeline-centered .timeline-content { + display: block; + margin: 0; + padding: 0; + } + + .timeline-centered .timeline-item { + padding-bottom: 40px; + overflow: hidden; + } + + .timeline-centered .timeline-marker { + position: absolute; + left: 50%; + margin-left: -7.5px; + } + + .timeline-centered .timeline-info, + .timeline-centered .timeline-content { + width: 50%; + } + + .timeline-centered>.timeline-item:nth-child(odd) .timeline-info { + float: left; + text-align: right; + padding-right: 30px; + } + + .timeline-centered>.timeline-item:nth-child(odd) .timeline-content { + float: right; + text-align: left; + padding-left: 30px; + } + + .timeline-centered>.timeline-item:nth-child(even) .timeline-info { + float: right; + text-align: left; + padding-left: 30px; + } + + .timeline-centered>.timeline-item:nth-child(even) .timeline-content { + float: left; + text-align: right; + padding-right: 30px; + } + + .timeline-centered>.timeline-item.period .timeline-content { + float: none; + padding: 0; + width: 100%; + text-align: center; + } + + .timeline-centered .timeline-item.period { + padding: 50px 0 90px; + } + + .timeline-centered .period .timeline-marker:after { + height: 30px; + bottom: 0; + top: auto; + } + + .timeline-centered .period .timeline-title { + left: auto; + } +} diff --git a/assets/favicon/android-icon-144x144.png b/assets/favicon/android-icon-144x144.png Binary files differnew file mode 100644 index 0000000..5f8d594 --- /dev/null +++ b/assets/favicon/android-icon-144x144.png diff --git a/assets/favicon/android-icon-192x192.png b/assets/favicon/android-icon-192x192.png Binary files differnew file mode 100644 index 0000000..58fc84f --- /dev/null +++ b/assets/favicon/android-icon-192x192.png diff --git a/assets/favicon/android-icon-36x36.png b/assets/favicon/android-icon-36x36.png Binary files differnew file mode 100644 index 0000000..0cc925a --- /dev/null +++ b/assets/favicon/android-icon-36x36.png diff --git a/assets/favicon/android-icon-48x48.png b/assets/favicon/android-icon-48x48.png Binary files differnew file mode 100644 index 0000000..b925356 --- /dev/null +++ b/assets/favicon/android-icon-48x48.png diff --git a/assets/favicon/android-icon-72x72.png b/assets/favicon/android-icon-72x72.png Binary files differnew file mode 100644 index 0000000..1ac1741 --- /dev/null +++ b/assets/favicon/android-icon-72x72.png diff --git a/assets/favicon/android-icon-96x96.png b/assets/favicon/android-icon-96x96.png Binary files differnew file mode 100644 index 0000000..4f20965 --- /dev/null +++ b/assets/favicon/android-icon-96x96.png diff --git a/assets/favicon/apple-icon-114x114.png b/assets/favicon/apple-icon-114x114.png Binary files differnew file mode 100644 index 0000000..e8a3b70 --- /dev/null +++ b/assets/favicon/apple-icon-114x114.png diff --git a/assets/favicon/apple-icon-120x120.png b/assets/favicon/apple-icon-120x120.png Binary files differnew file mode 100644 index 0000000..6b84bb5 --- /dev/null +++ b/assets/favicon/apple-icon-120x120.png diff --git a/assets/favicon/apple-icon-144x144.png b/assets/favicon/apple-icon-144x144.png Binary files differnew file mode 100644 index 0000000..5f8d594 --- /dev/null +++ b/assets/favicon/apple-icon-144x144.png diff --git a/assets/favicon/apple-icon-152x152.png b/assets/favicon/apple-icon-152x152.png Binary files differnew file mode 100644 index 0000000..5b9a05c --- /dev/null +++ b/assets/favicon/apple-icon-152x152.png diff --git a/assets/favicon/apple-icon-180x180.png b/assets/favicon/apple-icon-180x180.png Binary files differnew file mode 100644 index 0000000..ba7484e --- /dev/null +++ b/assets/favicon/apple-icon-180x180.png diff --git a/assets/favicon/apple-icon-57x57.png b/assets/favicon/apple-icon-57x57.png Binary files differnew file mode 100644 index 0000000..337ff06 --- /dev/null +++ b/assets/favicon/apple-icon-57x57.png diff --git a/assets/favicon/apple-icon-60x60.png b/assets/favicon/apple-icon-60x60.png Binary files differnew file mode 100644 index 0000000..f920f35 --- /dev/null +++ b/assets/favicon/apple-icon-60x60.png diff --git a/assets/favicon/apple-icon-72x72.png b/assets/favicon/apple-icon-72x72.png Binary files differnew file mode 100644 index 0000000..1ac1741 --- /dev/null +++ b/assets/favicon/apple-icon-72x72.png diff --git a/assets/favicon/apple-icon-76x76.png b/assets/favicon/apple-icon-76x76.png Binary files differnew file mode 100644 index 0000000..8373553 --- /dev/null +++ b/assets/favicon/apple-icon-76x76.png diff --git a/assets/favicon/apple-icon-precomposed.png b/assets/favicon/apple-icon-precomposed.png Binary files differnew file mode 100644 index 0000000..d87ced4 --- /dev/null +++ b/assets/favicon/apple-icon-precomposed.png diff --git a/assets/favicon/apple-icon.png b/assets/favicon/apple-icon.png Binary files differnew file mode 100644 index 0000000..d87ced4 --- /dev/null +++ b/assets/favicon/apple-icon.png diff --git a/assets/favicon/browserconfig.xml b/assets/favicon/browserconfig.xml new file mode 100644 index 0000000..c554148 --- /dev/null +++ b/assets/favicon/browserconfig.xml @@ -0,0 +1,2 @@ +<?xml version="1.0" encoding="utf-8"?> +<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
\ No newline at end of file diff --git a/assets/favicon/favicon-16x16.png b/assets/favicon/favicon-16x16.png Binary files differnew file mode 100644 index 0000000..20482ac --- /dev/null +++ b/assets/favicon/favicon-16x16.png diff --git a/assets/favicon/favicon-32x32.png b/assets/favicon/favicon-32x32.png Binary files differnew file mode 100644 index 0000000..4839a33 --- /dev/null +++ b/assets/favicon/favicon-32x32.png diff --git a/assets/favicon/favicon-96x96.png b/assets/favicon/favicon-96x96.png Binary files differnew file mode 100644 index 0000000..4f20965 --- /dev/null +++ b/assets/favicon/favicon-96x96.png diff --git a/assets/favicon/favicon.ico b/assets/favicon/favicon.ico Binary files differnew file mode 100644 index 0000000..2f488ce --- /dev/null +++ b/assets/favicon/favicon.ico diff --git a/assets/favicon/manifest.json b/assets/favicon/manifest.json new file mode 100644 index 0000000..013d4a6 --- /dev/null +++ b/assets/favicon/manifest.json @@ -0,0 +1,41 @@ +{ + "name": "App", + "icons": [ + { + "src": "\/android-icon-36x36.png", + "sizes": "36x36", + "type": "image\/png", + "density": "0.75" + }, + { + "src": "\/android-icon-48x48.png", + "sizes": "48x48", + "type": "image\/png", + "density": "1.0" + }, + { + "src": "\/android-icon-72x72.png", + "sizes": "72x72", + "type": "image\/png", + "density": "1.5" + }, + { + "src": "\/android-icon-96x96.png", + "sizes": "96x96", + "type": "image\/png", + "density": "2.0" + }, + { + "src": "\/android-icon-144x144.png", + "sizes": "144x144", + "type": "image\/png", + "density": "3.0" + }, + { + "src": "\/android-icon-192x192.png", + "sizes": "192x192", + "type": "image\/png", + "density": "4.0" + } + ] +}
\ No newline at end of file diff --git a/assets/favicon/ms-icon-144x144.png b/assets/favicon/ms-icon-144x144.png Binary files differnew file mode 100644 index 0000000..5f8d594 --- /dev/null +++ b/assets/favicon/ms-icon-144x144.png diff --git a/assets/favicon/ms-icon-150x150.png b/assets/favicon/ms-icon-150x150.png Binary files differnew file mode 100644 index 0000000..d23f079 --- /dev/null +++ b/assets/favicon/ms-icon-150x150.png diff --git a/assets/favicon/ms-icon-310x310.png b/assets/favicon/ms-icon-310x310.png Binary files differnew file mode 100644 index 0000000..3a0853c --- /dev/null +++ b/assets/favicon/ms-icon-310x310.png diff --git a/assets/favicon/ms-icon-70x70.png b/assets/favicon/ms-icon-70x70.png Binary files differnew file mode 100644 index 0000000..8b263cc --- /dev/null +++ b/assets/favicon/ms-icon-70x70.png diff --git a/assets/js/scripts.js b/assets/js/scripts.js new file mode 100644 index 0000000..44c264c --- /dev/null +++ b/assets/js/scripts.js @@ -0,0 +1,79 @@ +function fetchAPOD() { + var nasaURL = "https://api.nasa.gov/planetary/apod?api_key=1GOcJRVS7vlt3ePPXPquaxDi8gfduRVeFJwcemIN"; + + $.ajax({ + url: nasaURL, + success: function(result) { + $("#apod-container").css("display", "block"); + if ("copyright" in result) { + $("#apod-credit").text("Credit: " + result.copyright); + } else { + $("#apod-credit").text("Credit: " + "Public Domain"); + } + + if (result.media_type === "video") { + $("#apod-vid").css("display", "block"); + $("#apod-vid").attr("src", result.url); + } else { + $("#apod-img").css("display", "block"); + $("#apod-img").attr("src", result.url); + } + $("#apod-explanation").text(result.explanation); + $("#apod-title").text(result.title); + } + }); + +} + +// NASA Image API Search +function search() { + $("#temporary-banner").hide(); + $(".card-columns").empty(); + var searchTerm = $("#search_input").val(); + searchAJAX(undefined, searchTerm); +} + +function searchAJAX(searchURL, searchTerm) { + if (searchURL === undefined) { + searchURL = "https://images-api.nasa.gov/search?q=" + searchTerm; + } + + $.ajax({ + url: searchURL, + success: function(result) { + console.log(result); + var totalHits = result.collection.metadata.total_hits; + for (var i = 0; i < totalHits; i++) { + if (result.collection.items[i] != undefined && result.collection.items[i].data[0].media_type == "image") { + var title = result.collection.items[i].data[0].title; + var thumbnail = result.collection.items[i].links[0].href; + var card = "<div class='card gallery-card'><a href=" + thumbnail + " target='_blank'><img class='card-img-top' src='" + thumbnail + "' alt='" + title + "' /></a><div class='card-body' style='padding:0.5rem;'><p class='card-title'>" + title + "</p></div></div>"; + $(".card-columns").append(card); + } + } + /* + ** + ** This next piece of code allows the function to continue returning additional sets of API results (100 per API call) until there are no more pages of results. + ** Instead of doing this automatically, there should be a button navigation implemented. + ** + if (result.collection.links[0].rel === "next") { + searchAJAX(result.collection.links[0].href, searchTerm); + } else if (result.collection.links[1].rel === "next") { + searchAJAX(result.collection.links[1].href, searchTerm); + } + */ + } + }); +} + +function setSearchInput() { + document.getElementById("search_input").onkeypress = function(e) { + if (!e) { + e = window.event; + } + if (e.keyCode == "13") { + search(); + return false; + } + }; +} |