Deploy APOD Button

Co-authored-by: Panos Triantafyllidis <panostriantafyllidis@users.noreply.github.com>
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

index.html

@@ -64,6 +64,25 @@
       font-family: Arial, sans-serif;
       font-size: 14px;
     }
+
+    .apod-button {
+      background-color: #333;
+      color: white;
+      border: none;
+      border-radius: 5px;
+      padding: 15px 30px;
+    }
+
+    #tipOfTheDayBox {
+      position: fixed;
+      bottom: 10px;
+      left: 10px;
+      background-color: #222;
+      color: white;
+      padding: 10px;
+      border-radius: 5px;
+      z-index: 100;
+    }
   </style>
 </head>
 
@@ -78,8 +97,6 @@
       <option value="">Select an object to focus on</option>
     </select>
   </div>
-  <audio id="backgroundMusic" preload="auto" playsinline></audio>
-  <script type="module" src="js/main.js"></script>
   <div id="infoWindow">
     <h1 id="infoTitle">Title</h1>
     <p id="infoContent">Content</p>
@@ -87,6 +104,13 @@
       Close
     </button>
   </div>
+  <div id="tipOfTheDayBox">
+    <p style="text-align: center">View the tip of the day by NASA!</p>
+    <button id="apodButton" class="apod-button">Get Picture</button>
+    <button id="downloadApodButton" class="apod-button">Download Picture</button>
+  </div>
+  <audio id="backgroundMusic" preload="auto" playsinline></audio>
+  <script type="module" src="js/main.js"></script>
 </body>
 
 </html>