fall25_nasa_apod/index.html at main · CodeWorks-FullStack/fall25_nasa_apod · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="icon" href="./assets/img/logo.png">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  <link rel="stylesheet" href="assets/style/main.css">
  <link rel="stylesheet" href="assets/style/style.css">
  <title>nasa_apod</title>
</head>

<body data-bs-theme="light">
  <header>
    <nav class="navbar text-light gap-2 px-2">
      <img src="./assets/img/logo.png" height="45" alt="" loading="lazy">
      <div><b>nasa_apod</b></div>
      <div class="ms-auto" id="authstate"></div>
      <div>
        <input onchange="app.nasaPicturesController.changeDate()" id="date-picker" type="date" min="1995-06-16"
          title="Choose a date!">
      </div>
    </nav>
  </header>

  <main class="container">
    <div class="row justify-content-center">
      <div id="astronomy-picture-details" class="col-md-8">
        <!-- STUB details template -->
        <!-- <div class="text-shadow">
          <h1>NGC 4565: Galaxy on Edge</h1>
          <small>© José Rodrigues</small>
          <h2>2025-09-04</h2>
          <p>Magnificent spiral galaxy NGC 4565 is viewed edge-on from planet Earth. Also known as the Needle Galaxy for
            its narrow profile, bright NGC 4565 is a stop on many telescopic tours of the northern sky, in the faint but
            well-groomed constellation Coma Berenices. This sharp, colorful image reveals the galaxy's boxy, bulging
            central core cut by obscuring dust lanes that lace NGC 4565's thin galactic plane. NGC 4565 lies around 40
            million light-years distant while the spiral galaxy itself spans some 100,000 light-years. That's about the
            size of our own Milky Way. Easily spotted with small telescopes, deep sky enthusiasts consider NGC 4565 to
            be a prominent celestial masterpiece Messier missed.</p>
        </div> -->
      </div>
    </div>

  </main>

  <footer class="text-end p-2">
    <button id="offcanvas-button" class="btn btn-outline-warning d-none" type="button" data-bs-toggle="offcanvas"
      data-bs-target="#saved-apods-offcanvas" aria-controls="offcanvasExample">
      <span class="mdi mdi-star-face" title="Check out your saved APODs"></span>
    </button>
  </footer>


  <div class="offcanvas offcanvas-start bg-dark text-light" tabindex="-1" id="saved-apods-offcanvas"
    aria-labelledby="offcanvasExampleLabel">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="offcanvasExampleLabel">Saved APODs</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div id="saved-pictures" class="offcanvas-body">
      <!-- STUB saved APOD template -->
      <!-- <div class="mb-3">
        <img src="https://apod.nasa.gov/apod/image/2509/NGC4565_APOD_sRGB1024.jpg" alt="" class="w-100 rounded">
      </div> -->
    </div>
  </div>


  <!-- SECTION links for bootstrap, axios, and auth -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://cdn.auth0.com/js/auth0-spa-js/1.22/auth0-spa-js.production.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/jakeoverall/auth0provider-client/browser/Auth0Provider.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
  <!-- !SECTION -->
  <!-- The start of our javascript -->
  <script src="app/App.js" type="module"></script>

</body>

</html>