merge pr#4 from develop

project updated

Author: angelluce

.gitignore

@@ -47,4 +47,5 @@ Thumbs.db
 
 
 # data keys
+NASA KEY.txt
 /src/app/shared/nasa_key.ts

src/app/app-routing.module.ts

@@ -1,11 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import {HomeComponent} from "./components/home/home.component";
+import {ApodComponent} from "./components/nasa/apod/apod.component";
 
 const routes: Routes = [
   { path: 'home', component: HomeComponent },
-  { path: '', redirectTo: 'home', pathMatch: 'full'},
-  { path: '**', redirectTo: 'home', pathMatch: 'full'}
+  { path: 'apod', component: ApodComponent },
+  { path: '', redirectTo: 'apod', pathMatch: 'full'},
+  { path: '**', redirectTo: 'apod', pathMatch: 'full'}
 ];
 
 @NgModule({

src/app/app.component.html

@@ -1,5 +1,4 @@
-<div class="bg-dark p-5"
-     style="max-width: 100vw; min-height: 100vh">
+<div class="bg-dark">
   <router-outlet></router-outlet>
   <app-info></app-info>
 </div>

src/app/app.component.scss

@@ -1,10 +1,12 @@
 .bg-dark {
-  background-color:black;
-  background-image:
-    radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 20px),
-    radial-gradient(white, rgba(255,255,255,.08) 1px, transparent 25px),
-    radial-gradient(white, rgba(255,255,255,.05) 2px, transparent 30px),
-    radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.02) 2px, transparent 35px);
+  max-width: 100vw;
+  min-height: 100vh;
+  padding: 3rem 2rem;
+  background-color: black;
+  background-image: radial-gradient(white, rgba(255, 255, 255, .1) 2px, transparent 20px),
+  radial-gradient(white, rgba(255, 255, 255, .08) 1px, transparent 25px),
+  radial-gradient(white, rgba(255, 255, 255, .05) 2px, transparent 30px),
+  radial-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .02) 2px, transparent 35px);
   background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
   background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
 }

src/app/components/home/home.component.html

@@ -1 +1 @@
-<app-apod></app-apod>
+<div class="container"></div>

src/app/components/info/info.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="dataSocialNetworks.length > 0"
-     class="fixed-bottom bg-dark d-flex justify-content-between px-3 pt-3">
+     class="fixed-bottom bg-dark d-flex justify-content-between p-2">
   <div class="d-flex networks">
     <a *ngFor="let socialNetwork of dataSocialNetworks"
        href="{{socialNetwork.url}}" target="_blank">
@@ -9,7 +9,7 @@
     </a>
   </div>
   <div class="d-flex author">
-    <p class="text-end">
+    <p class="text-end m-0">
       <i class="pi pi-code m-1"></i>
       Angel Lucero | 2023</p>
   </div>

src/app/components/nasa/apod/apod.component.html

@@ -1,25 +1,19 @@
 <p-toast></p-toast>
 
 <div *ngIf="nasaResponse" class="container">
-  <div class="text-center">
-    <h1 class="display-5">{{nasaResponse?.title}}</h1>
+  <div class="content text-center">
+    <h1 class="display-4">{{nasaResponse?.title}}</h1>
     <p>{{title}}</p>
-  </div>
-  <div class="content">
     <div class="d-flex justify-content-center">
       <p-image *ngIf="nasaResponse?.media_type === 'image'"
-               src="{{nasaResponse?.hdurl}}" alt="Image" width="400" [preview]="true"></p-image>
+               src="{{nasaResponse?.hdurl}}" alt="Image" width="100%" [preview]="true"></p-image>
       <video *ngIf="nasaResponse?.media_type === 'video'"
              autoplay="true" name="media">
         <source src="{{nasaResponse?.url}}" type="video/mp4">
       </video>
     </div>
-    <div class="description mt-3">
-      <p>{{nasaResponse?.explanation}}</p>
-    </div>
-    <div class="credits mt-3">
-      <p style="font-style: italic;
+    <p class="description mt-3">{{nasaResponse?.explanation}}</p>
+    <p class="description mt-3" style="font-style: italic;
       color: #bebebe">Copyright: {{nasaResponse?.copyright || 'Not found'}}</p>
-    </div>
   </div>
 </div>

src/app/services/social-networks.service.ts

@@ -17,7 +17,7 @@ export class SocialNetworksService {
       },
       {
         name: 'Instagram',
-        url: 'https://www.instagram.com/angellucero24/',
+        url: 'https://www.instagram.com/angel.lu24/',
         icon: 'pi-instagram',
       },
       {