DM2-2737-crear-pagina-para-el-historial-de-electrodomesticos-en-repar…

…acion-o-proximos-a-entregar

src/app/app.module.ts

@@ -17,6 +17,7 @@ import { HomeModule } from './pages/home/home.module';
 import { DashboardModule } from './pages/dashboard/dashboard.module';
 import { ApplianceRegistrationModule } from './pages/appliance-registration/appliance-registration.module';
 import { AlertConfirmationModule } from './pages/components/alert-confirmation/alert-confirmation.module';
+import { ProductModule } from './pages/product/product.module';
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http);
@@ -30,6 +31,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     AppRoutingModule,
     HomeModule,
     DashboardModule,
+    ProductModule,
     ReactiveFormsModule,
     HttpClientModule,
     TranslateModule.forRoot({

src/app/constants/icons.constants.ts

@@ -0,0 +1,13 @@
+export const IconsConstants = {
+  icon: 'https://i.pinimg.com/564x/49/96/0a/49960afb261e0d93db525c73c5691100.jpg',
+  icona:
+    'https://i.pinimg.com/564x/ba/ba/34/baba34523f605c55d96305d594845528.jpg',
+  iconb:
+    'https://i.pinimg.com/564x/6f/26/9e/6f269e80859ce6b22569beb676303c52.jpg',
+  iconc:
+    'https://i.pinimg.com/564x/24/72/2d/24722d7dc1395a7a85f933daca0fd66f.jpg',
+  icond:
+    'https://i.pinimg.com/564x/c4/54/43/c454433b3c9d7252e3dff1185222616f.jpg',
+  icone:
+    'https://i.pinimg.com/564x/06/88/01/068801303ac221241dde36a8a9ec0e75.jpg',
+};

src/app/constants/product.constants.ts

@@ -0,0 +1,9 @@
+export const ProductConstants = {
+  src: 'https://i.pinimg.com/564x/e6/bf/d2/e6bfd29d843ea47649824286b4142877.jpg',
+  srca: 'https://i.pinimg.com/564x/35/3e/d7/353ed734f8daed731235fce4e358d2e6.jpg',
+  srcb: 'https://i.pinimg.com/564x/c4/b4/7b/c4b47bf2aa50aa03384a47290fed0f54.jpg',
+  srcc: 'https://i.pinimg.com/564x/8e/56/79/8e567935daa4d66d04bfdb52ed19410e.jpg',
+  srcd: 'https://i.pinimg.com/564x/02/05/37/0205371098f0058bae5afef655a4989e.jpg',
+  srce: 'https://i.pinimg.com/564x/15/b9/b7/15b9b7c45d260b7920d8d9b05edb41c9.jpg',
+  srcf: 'https://i.pinimg.com/564x/2b/65/5a/2b655a06b26bb76a320e6edfbdf2c744.jpg',
+};

src/app/pages/components/form-product/form-product.component.html

@@ -6,14 +6,14 @@ <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">{{ 'form
         translate }}</h2>
       <p class="mt-4 text-gray-500">{{ 'formProduct.CONTACT_US_DESCRIPTION' | translate }}</p>
       <div class="grid grid-cols-2 grid-rows-2 gap-4 sm:gap-6 lg:gap-8 mt-8">
-        <img src="https://i.pinimg.com/564x/e6/bf/d2/e6bfd29d843ea47649824286b4142877.jpg"
+        <img  [src]="urls.srcc"
           alt="Walnut card tray with white powder coated steel divider and 3 punchout holes."
           class="rounded-lg bg-gray-100">
-        <img src="https://i.pinimg.com/564x/35/3e/d7/353ed734f8daed731235fce4e358d2e6.jpg"
+        <img [src]="urls.srcd"
           alt="Top down view of walnut card tray with embedded magnets and card groove." class="rounded-lg bg-gray-100">
-        <img src="https://i.pinimg.com/564x/c4/b4/7b/c4b47bf2aa50aa03384a47290fed0f54.jpg"
+        <img [src]="urls.srce"
           alt="Side of walnut card tray with card groove and recessed card area." class="rounded-lg bg-gray-100">
-        <img src="https://i.pinimg.com/564x/18/b6/5e/18b65e480311588611a928c0feb5388d.jpg"
+        <img [src]="urls.srcf"
           alt="Walnut card tray filled with cards and card angled in dedicated groove." class="rounded-lg bg-gray-100">
       </div>
     </div>

src/app/pages/components/form-product/form-product.component.ts

@@ -3,6 +3,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { DataTransferServiceService } from '../../services/data-transfer-service.service';
 import { Router } from '@angular/router';
 import { PROVINCES_ECUADOR } from 'src/app/constants/constants';
+import { ProductConstants } from 'src/app/constants/product.constants';
 
 @Component({
   selector: 'app-form-product',
@@ -16,6 +17,7 @@ export class FormProductComponent {
     DataTransferServiceService
   );
 
+  urls = ProductConstants;
   public form: FormGroup;
   public imageSrc: string | ArrayBuffer | null = null;
   public files: File[] = [];

src/app/pages/product/product.component.css

@@ -3,3 +3,32 @@ body {
     margin: 0;
     font-family: Arial, sans-serif;
 }
+
+/* Estilo para la línea horizontal */
+.custom-line {
+    border: none;
+    height: 2px;
+    background-color: #4A90E2;
+    margin: 20px 0;
+  }
+
+  /* Estilo para las tarjetas de electrodomésticos */
+  .appliance-card {
+    cursor: pointer;
+  }
+
+  /* Estilo para el mensaje del temporizador */
+  .timer {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #4A90E2;
+    margin-top: 20px;
+  }
+
+  .gradient-background {
+    background: linear-gradient(to right, rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5));
+    color: #000000ab;
+    padding: 20px;
+    border-radius: 8px;
+    text-align: center; /* Opcional, por si necesitas centrar el texto */
+  }