< ion-content >
< div class = "head-title" >
<!-- <ion - toolbar class="header - toolbar">
< ion-buttons slot = "start" >
< ion-back-button color = "light" class = "btnBack" defaultHref = "/home" > < / ion-back-button >
< / ion-buttons >
< ion-title color = "light" > {{ts.trPK('itemforsale','title')}}< / ion-title >
< / ion-toolbar > -->
< app-generic-header
showImage="false"
showBack="true"
[headerText]="'itemforsale,title' | translate">
< / app-generic-header >
< / div >
< div class = "header" > < / div >
< div class = "bottom" > < / div >
< div class = "md-stepper-horizontal " >
< ion-row >
< ion-col size = "4" > < div class = "md-step active " [ ngClass ] = " step > 1 ? 'green' : 'orange'">
< div class = "md-step-circle" > < span style = "content: url(/assets/imgs/check-white.svg)" > < / span > < / div >
< div class = "md-step-title" > {{ts.trPK('itemforsale','select-category')}}< / div >
< div class = "md-step-optional" > {{ts.trPK('itemforsale','completed')}}< / div >
< div class = "md-step-bar-left" > < / div >
<!-- <div class="md - step - bar - right" [ngClass]="step ==1 ? 'orange - border' : 'green - border'"></div> -->
< / div >
< / ion-col >
< ion-col size = "4" > < div class = "md-step" [ ngClass ] = " step > 2 ? 'green' : step ==2 ? 'orange' : 'grey'">
< div class = "md-step-circle" > < span * ngIf = "step==1" style = "content: url(/assets/imgs/check.svg)" > < / span >
< span * ngIf = "step>2 || step==2" style = "content: url(/assets/imgs/check-white.svg)" >
< / span >
< / div >
< div class = "md-step-title" > {{ts.trPK('itemforsale','add-details')}}< / div >
< div class = "md-step-optional" > {{step >2 ? "Completed" : "Locked"}}< / div >
< div class = "md-step-bar-left" > < / div >
< / div > < / ion-col >
< ion-col size = "4" > < div class = "md-step" [ ngClass ] = " step > 3 ? 'green' : step ==3 ? 'orange' : 'grey'">
< div class = "md-step-circle" > < span * ngIf = "step==1 || step==2" style = "content: url(/assets/imgs/check.svg)" > < / span >
< span * ngIf = "step>=3" style = "content: url(/assets/imgs/check-white.svg)" > < / span > < / div >
< div class = "md-step-title" > {{ts.trPK('itemforsale','review-sell')}}< / div >
< div class = "md-step-optional" > {{step >3 ? "Completed" : "Locked"}}< / div >
< div class = "md-step-bar-left" > < / div >
< / div > < / ion-col >
< / ion-row >
< / div >
< div class = "content" >
< div class = "offering" * ngIf = "step==1" >
< h2 > What are you offering?< / h2 >
< / div >
< ion-grid * ngIf = "step==1" >
< ion-row >
< ion-col size = "4" >
< div class = "sale-icon" ( click ) = " nextStep ( ) " >
< div class = "top" >
< img src = "/assets/imgs/itemsforsale/mobile.svg" >
< / div >
< div class = "bottom-icon" >
< p > Mobile & Tablets< / p >
< / div >
< / div >
< / ion-col >
< ion-col size = "4" >
< div class = "sale-icon" ( click ) = " openItem ( ) " >
< div class = "top" >
< img src = "/assets/imgs/itemsforsale/cars.svg" >
< / div >
< div class = "bottom-icon" >
< p > Cars & Vehicles< / p >
< / div >
< / div >
< / ion-col >
< ion-col size = "4" >
< div class = "sale-icon" >
< div class = "top" >
< img src = "/assets/imgs/itemsforsale/electronic_appliances.svg" >
< / div >
< div class = "bottom-icon" >
< p > Electronic Applicance< / p >
< / div >
< / div >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col size = "4" >
< div class = "sale-icon" >
< div class = "top" >
< img src = "/assets/imgs/itemsforsale/furniture.svg" >
< / div >
< div class = "bottom-icon" >
< p > Furniture & Home Decor< / p >
< / div >
< / div >
< / ion-col >
< ion-col size = "4" >
< div class = "sale-icon" >
< div class = "top" >
< img src = "/assets/imgs/itemsforsale/fashion.svg" >
< / div >
< div class = "bottom-icon" >
< p > Fashion & beauty< / p >
< / div >
< / div >
< / ion-col >
< ion-col size = "4" >
< div class = "sale-icon" >
< div class = "top" >
< img src = "/assets/imgs/itemsforsale/book and sports.svg" >
< / div >
< div class = "bottom-icon" >
< p > Books, Sports & Hobbies< / p >
< / div >
< / div >
< / ion-col >
< / ion-row >
< / ion-grid >
< div class = "offering" * ngIf = "step==2" >
< h2 > Add Details< / h2 >
< / div >
< div class = "add-details" * ngIf = "step==2" >
< ion-grid >
< ion-row >
< p > Item Info< / p >
< ion-col size = "12" >
< ion-item lines = "none" >
< ion-input placeholder = "Item Info" > < / ion-input >
< / ion-item >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col size = "12" >
< ion-item lines = "none" >
< ion-textarea rows = "6" cols = "20" placeholder = "Description" > < / ion-textarea >
< / ion-item >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col >
< p > Item Condition< / p >
< ion-radio-group value = "new" >
< ion-col >
< ion-radio value = "new" > < / ion-radio >
< ion-label > New< / ion-label >
< / ion-col >
< ion-col >
< ion-radio value = "used" > < / ion-radio >
< ion-label > Used< / ion-label >
< / ion-col >
< / ion-radio-group >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col size = "12" >
< p > Item Price< / p >
< ion-item lines = "none" >
< ion-input placeholder = "Item Price" > < / ion-input >
< / ion-item >
< / ion-col >
< / ion-row >
< ion-row >
< p > Item Photos< / p >
< / ion-row >
< ion-row >
< ion-col lines = "none" size = "3" >
< div class = "image-container" >
< div class = "uploaded" >
< div class = "closed" > X< / div >
< img src = "assets/imgs/itemsforsale/fashion.svg" / >
< / div >
< / div >
< / ion-col >
< ion-col lines = "none" size = "3" >
< div class = "image-container" >
< div class = "uploaded" >
< div class = "closed" > X< / div >
< img src = "assets/imgs/itemsforsale/fashion.svg" / >
< / div >
< / div >
< / ion-col >
< ion-col lines = "none" size = "3" >
< div class = "image-container uploader-box" >
< div class = "uploaded" >
< ion-icon name = "camera" class = "camera-icon" > < / ion-icon >
< / div >
< / div >
< / ion-col >
< / ion-row >
< / ion-grid >
< / div >
< div class = "offering" * ngIf = "step==3" >
< h2 > Review & Sell< / h2 >
< / div >
< div class = "add-details" * ngIf = "step==3" >
< h2 class = "review-title" > Furniture Table< / h2 >
< p >
Consectetur adipiscing elit. Donec blandit diam nulla, non euismod eros efficitur imperdiet. Fusce erat enim, volutpat at enim in, venenatis iaculis risus.
< / p >
< div class = "description-details" >
< p class = "orange" > Used< / p >
< img src = "assets/imgs/itemsforsale/fashion.svg" / >
< img src = "assets/imgs/itemsforsale/fashion.svg" / >
< div class = "selling" >
< strong > Selling for < / strong > < h2 > 500 SAR< / h2 >
< / div >
< div class = "waring" >
< img src = "/assets/imgs/itemsforsale/alert.svg" > < label > This ad will be valid for 2 week after approval< / label >
< / div >
< / div >
< / div >
< / div >
< ion-footer * ngIf = "step==1" >
< div class = "centerDiv" >
< ion-button class = "footer-button red-button" ion-button >
cancel < / ion-button >
< / div >
< / ion-footer >
< ion-footer * ngIf = "step>1" >
< div class = "centerDiv" >
< ion-button class = "footer-button red-button small-btn" ion-button ( click ) = " step = 3" * ngIf = "step ==2 || step ==3" >
cancel < / ion-button >
< ion-button class = "footer-button small-btn" ion-button ( click ) = " step = 3" * ngIf = "step ==2" >
{{ts.trPK('general','next')}} < / ion-button >
< ion-button class = "footer-button small-btn" ion-button ( click ) = " openItem ( ) " * ngIf = "step ==3" >
Confirm < / ion-button >
< / div >
< / ion-footer >
< / ion-content >