latest

src/app/nearby/nearby.module.ts

@@ -23,7 +23,7 @@ const routes: Routes = [
     IonicModule,
     AgmDirectionModule,
     AgmCoreModule.forRoot({
-      apiKey: 'AIzaSyBn6hOlr6YHcZAmbptlsmbhvH5iQllWflE'
+      apiKey: "AIzaSyBn6hOlr6YHcZAmbptlsmbhvH5iQllWflE"
     }),
     RouterModule.forChild(routes)
   ],

src/app/nearby/nearby.page.ts

@@ -7,6 +7,7 @@ import { AddressService } from './../../config/address.service';
 import { ServiceService } from './../../config/service.service';
 import { NgForm } from '@angular/forms';
 import * as firebase from 'firebase';
+import { google } from '@agm/core/services/google-maps-types';
 
 @Component({
   selector: 'app-nearby',

src/app/productdetail/productdetail.page.html

@@ -67,6 +67,63 @@
                     </ion-slides>
                 </ul>
             </div>
+            <h5>Color</h5>
+            <div class="color_div">
+                <ul>
+                    <ion-slides pager="false" [options]="slideOpts">
+                        <ion-slide>
+                            <li>
+                                <button id="custom_check_button">
+                                    <label>
+                                        <input id="1" type="radio" name="services" value="1">
+                                         <p><img src="../../assets/c1.png"></p>
+                                    </label>
+                                </button>
+                            </li>
+                        </ion-slide>
+                        <ion-slide>
+                            <li>
+                                <button id="custom_check_button">
+                                    <label>
+                                        <input id="2" type="radio" name="services" value="2">
+                                         <p><img src="../../assets/c2.png"></p>
+                                    </label>
+                                </button>
+                            </li>
+                        </ion-slide>
+                        <ion-slide>
+                            <li>
+                                <button id="custom_check_button">
+                                    <label>
+                                        <input id="3" type="radio" name="services" value="3">
+                                        <p><img src="../../assets/c3.png"></p>
+                                    </label>
+                                </button>
+                            </li>
+                        </ion-slide>
+                        <ion-slide>
+                            <li>
+                                <button id="custom_check_button">
+                                    <label>
+                                        <input id="4" type="radio" name="services" value="4">
+                                        <p><img src="../../assets/c4.png"></p>
+                                    </label>
+                                </button>
+                            </li>
+                        </ion-slide>
+                        <ion-slide>
+                            <li>
+                                <button id="custom_check_button">
+                                    <label>
+                                        <input id="5" type="radio" name="services" value="5">
+                                        <p><img src="../../assets/c5.png"></p>
+                                    </label>
+                                </button>
+                            </li>
+                        </ion-slide>
+                    </ion-slides>
+                </ul>
+            </div>
             <h5>Description</h5>
             <p>{{product.prodDesc}}
             </p>

src/app/productdetail/productdetail.page.scss

@@ -150,6 +150,70 @@
                 }
             }
         }
+        .color_div {
+            padding: 10px;
+            ul {
+                margin: 0px;
+                padding: 0px;
+                li {
+                    list-style: none;
+                    width: 100%;
+                    height: 100px;
+                    margin: 4px;
+                    display: inline-block;
+                    #custom_check_button {
+                        background-color: #fff;
+                        border-radius: 10px !important;
+                        overflow: auto;
+                        color: #000;
+                        border: 1px dashed rgba(215, 213, 228, 1);
+                        position: relative;
+                        width: 100%;
+                        height: 100%;
+                        outline: none;
+                        font-size: 17px;
+                    }
+                    #custom_check_button p {
+                        margin: 0px;
+                        position: absolute;
+                        left: 0px;
+                        right: 0px;
+                        top: 0px;
+                        color: transparent;
+                        bottom: 0px;
+                        padding: 0px;
+                        text-align: center;
+                        border: 3px solid transparent;
+                        img {
+                            width: 100%;
+                            height: 100%;
+                            border-radius: 10px !important;
+                            object-fit: cover;
+                            object-position: center;
+                        }
+                    }
+                    #custom_check_button label {
+                        width: 100%;
+                    }
+                    #custom_check_button label span {
+                        text-align: center;
+                        display: block;
+                    }
+                    #custom_check_button label input {
+                        position: absolute;
+                        top: 0px;
+                        opacity: 0;
+                    }
+                    #custom_check_button input:checked+p {
+                        border: 3px dashed #29285b;
+                        color: transparent;
+                        border-radius: 10px !important;
+                        margin: 0px;
+                        padding: 0px;
+                    }
+                }
+            }
+        }
         .review_list {
             padding: 10px;
             ul {