Commit e85b0126fd46babf0f210d3be485275738d5bbc4
1 parent
df5ac1b54a
Exists in
master
Borrados items tootlip
Showing
1 changed file
with
12 additions
and
59 deletions
Show diff stats
src/app/components/inicio/inicio.component.html
| 1 | <div class="row m-0 fade-in"> | 1 | <div class="row m-0 fade-in"> |
| 2 | <div class="col-10 p-0"> | 2 | <div class="col-10 p-0"> |
| 3 | <!-- TOP HEADER --> | 3 | <!-- TOP HEADER --> |
| 4 | <app-header></app-header> | 4 | <app-header></app-header> |
| 5 | 5 | ||
| 6 | <!-- NOMBRE DE SECCION --> | 6 | <!-- NOMBRE DE SECCION --> |
| 7 | <div class="row m-0"> | 7 | <div class="row m-0"> |
| 8 | <div class="col-12 p-0"> | 8 | <div class="col-12 p-0"> |
| 9 | <p class="h5 py-1 bg-light text-muted text-center">Inicio</p> | 9 | <p class="h5 py-1 bg-light text-muted text-center">Inicio</p> |
| 10 | </div> | 10 | </div> |
| 11 | </div> | 11 | </div> |
| 12 | 12 | ||
| 13 | <div class="row m-4 d-flex align-items-center disable-user-select"> | 13 | <div class="row m-4 d-flex align-items-center disable-user-select"> |
| 14 | <div class="col-md-5 d-flex align-items-end flex-column"> | 14 | <div class="col-md-5 d-flex align-items-end flex-column"> |
| 15 | 15 | ||
| 16 | <!-- TOOL TIp --> | 16 | <!-- TOOL TIp --> |
| 17 | <div class="popover left bs-example-popover p-4 border-0 shadow rounded mw-100 h-100 mb-auto" *ngIf="tooltip === true"> | 17 | <div class="popover left bs-example-popover p-4 border-0 shadow rounded mw-100 h-100 mb-auto" |
| 18 | *ngIf="tooltip === true"> | ||
| 18 | <div class="arrow"></div> | 19 | <div class="arrow"></div> |
| 19 | <h4 class="popover-title mb-3 mt-1"> Este producto forma parte de Combos y Promociones</h4> | 20 | <h4 class="popover-title mb-3 mt-1"> Este producto forma parte de Combos y Promociones</h4> |
| 20 | <div class="popover-content mw-100 h-100 mb-auto"> | 21 | <div class="popover-content mw-100 h-100 mb-auto"> |
| 21 | <div class="d-flex flex-column h-75 text-center"> | 22 | <div class="d-flex flex-column h-75 text-center"> |
| 22 | <div class="overflow-auto overflow-scroll mb-2"> | 23 | <div class="overflow-auto overflow-scroll mb-2"> |
| 23 | 24 | ||
| 24 | <div class="card bg-white rounded-sm shadow border-0 black-text my-3"> | 25 | <div class="card bg-white rounded-sm shadow border-0 black-text my-3"> |
| 25 | <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded"> | 26 | <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded"> |
| 26 | <div class="col-6 p-0 text-left my-auto"> | 27 | <div class="col-6 p-0 text-left my-auto"> |
| 27 | <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p> | 28 | <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p> |
| 28 | <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p> | 29 | <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p> |
| 29 | </div> | 30 | </div> |
| 30 | <div class="col-6 p-1 text-center my-auto"> | 31 | <div class="col-6 p-1 text-center my-auto"> |
| 31 | <p class="m-0 h1 text-right">{{105 | currency}}</p> | 32 | <p class="m-0 h1 text-right">{{105 | currency}}</p> |
| 32 | </div> | 33 | </div> |
| 33 | </div> | 34 | </div> |
| 34 | </div> | ||
| 35 | |||
| 36 | <div class="card bg-white rounded-sm shadow border-0 black-text my-3"> | ||
| 37 | <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded"> | ||
| 38 | <div class="col-6 p-0 text-left my-auto"> | ||
| 39 | <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p> | ||
| 40 | <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p> | ||
| 41 | </div> | ||
| 42 | <div class="col-6 p-1 text-center my-auto"> | ||
| 43 | <p class="m-0 h1 text-right">{{105 | currency}}</p> | ||
| 44 | </div> | ||
| 45 | </div> | ||
| 46 | </div> | ||
| 47 | |||
| 48 | <div class="card bg-white rounded-sm shadow border-0 black-text my-3"> | ||
| 49 | <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded"> | ||
| 50 | <div class="col-6 p-0 text-left my-auto"> | ||
| 51 | <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p> | ||
| 52 | <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p> | ||
| 53 | </div> | ||
| 54 | <div class="col-6 p-1 text-center my-auto"> | ||
| 55 | <p class="m-0 h1 text-right">{{105 | currency}}</p> | ||
| 56 | </div> | ||
| 57 | </div> | ||
| 58 | </div> | ||
| 59 | |||
| 60 | <div class="card bg-white rounded-sm shadow border-0 black-text my-3"> | ||
| 61 | <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded"> | ||
| 62 | <div class="col-6 p-0 text-left my-auto"> | ||
| 63 | <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p> | ||
| 64 | <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p> | ||
| 65 | </div> | ||
| 66 | <div class="col-6 p-1 text-center my-auto"> | ||
| 67 | <p class="m-0 h1 text-right">{{105 | currency}}</p> | ||
| 68 | </div> | ||
| 69 | </div> | ||
| 70 | </div> | ||
| 71 | |||
| 72 | <div class="card bg-white rounded-sm shadow border-0 black-text my-3"> | ||
| 73 | <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded"> | ||
| 74 | <div class="col-6 p-0 text-left my-auto"> | ||
| 75 | <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p> | ||
| 76 | <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p> | ||
| 77 | </div> | ||
| 78 | <div class="col-6 p-1 text-center my-auto"> | ||
| 79 | <p class="m-0 h1 text-right">{{105 | currency}}</p> | ||
| 80 | </div> | ||
| 81 | </div> | ||
| 82 | </div> | 35 | </div> |
| 83 | 36 | ||
| 84 | </div> | 37 | </div> |
| 85 | </div> | 38 | </div> |
| 86 | </div> | 39 | </div> |
| 87 | </div> | 40 | </div> |
| 88 | 41 | ||
| 89 | <!-- PROMOCIONES --> | 42 | <!-- PROMOCIONES --> |
| 90 | <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> | 43 | <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> |
| 91 | <div class="card-body text-left p-4"> | 44 | <div class="card-body text-left p-4"> |
| 92 | <p class="h3 card-title">Promociones</p> | 45 | <p class="h3 card-title">Promociones</p> |
| 93 | <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> | 46 | <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> |
| 94 | </div> | 47 | </div> |
| 95 | <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel"> | 48 | <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel"> |
| 96 | <ol class="carousel-indicators m-0"> | 49 | <ol class="carousel-indicators m-0"> |
| 97 | <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li> | 50 | <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li> |
| 98 | <li data-target="#carouselIndicators" data-slide-to="1" class="bg-dark"></li> | 51 | <li data-target="#carouselIndicators" data-slide-to="1" class="bg-dark"></li> |
| 99 | <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li> | 52 | <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li> |
| 100 | </ol> | 53 | </ol> |
| 101 | <div class="carousel-inner"> | 54 | <div class="carousel-inner"> |
| 102 | <div class="carousel-item active"> | 55 | <div class="carousel-item active"> |
| 103 | <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> | 56 | <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> |
| 104 | </div> | 57 | </div> |
| 105 | <div class="carousel-item"> | 58 | <div class="carousel-item"> |
| 106 | <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> | 59 | <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> |
| 107 | </div> | 60 | </div> |
| 108 | <div class="carousel-item"> | 61 | <div class="carousel-item"> |
| 109 | <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> | 62 | <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> |
| 110 | </div> | 63 | </div> |
| 111 | </div> | 64 | </div> |
| 112 | </div> | 65 | </div> |
| 113 | </div> | 66 | </div> |
| 114 | 67 | ||
| 115 | <!-- ORDENAR --> | 68 | <!-- ORDENAR --> |
| 116 | <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> | 69 | <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> |
| 117 | <div class="card-body text-left p-4"> | 70 | <div class="card-body text-left p-4"> |
| 118 | <p class="h3 card-title">Ordenar</p> | 71 | <p class="h3 card-title">Ordenar</p> |
| 119 | <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> | 72 | <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> |
| 120 | </div> | 73 | </div> |
| 121 | <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg"> | 74 | <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg"> |
| 122 | </div> | 75 | </div> |
| 123 | 76 | ||
| 124 | </div> | 77 | </div> |
| 125 | 78 | ||
| 126 | <div class="col-md-7 d-flex align-items-end flex-column"> | 79 | <div class="col-md-7 d-flex align-items-end flex-column"> |
| 127 | 80 | ||
| 128 | <!-- CARGAR PRODUCTOS --> | 81 | <!-- CARGAR PRODUCTOS --> |
| 129 | <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> | 82 | <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> |
| 130 | <div class="card-body text-left p-4"> | 83 | <div class="card-body text-left p-4"> |
| 131 | <p class="h3 card-title">Cargar Productos</p> | 84 | <p class="h3 card-title">Cargar Productos</p> |
| 132 | <p class="h5 card-text text-muted font-weight-light"> | 85 | <p class="h5 card-text text-muted font-weight-light"> |
| 133 | Coloque el código de<br> | 86 | Coloque el código de<br> |
| 134 | barras o QR frente al scanner. | 87 | barras o QR frente al scanner. |
| 135 | </p> | 88 | </p> |
| 136 | </div> | 89 | </div> |
| 137 | <div class="card bg-white border-0 w-75 mx-auto mb-4"> | 90 | <div class="card bg-white border-0 w-75 mx-auto mb-4"> |
| 138 | <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg"> | 91 | <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg"> |
| 139 | <div class="card-body text-left p-2"> | 92 | <div class="card-body text-left p-2"> |
| 140 | <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p> | 93 | <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p> |
| 141 | <p class="m-0 card-text text-muted">COD. 12121222</p> | 94 | <p class="m-0 card-text text-muted">COD. 12121222</p> |
| 142 | </div> | 95 | </div> |
| 143 | </div> | 96 | </div> |
| 144 | </div> | 97 | </div> |
| 145 | 98 | ||
| 146 | <!-- BUSCAR PRODUCTOS --> | 99 | <!-- BUSCAR PRODUCTOS --> |
| 147 | <div (click)="goPage('busqueda-productos')" | 100 | <div (click)="goPage('busqueda-productos')" |
| 148 | class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> | 101 | class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> |
| 149 | <div class="card-body text-left p-4"> | 102 | <div class="card-body text-left p-4"> |
| 150 | <p class="h3 card-title">Buscar Productos</p> | 103 | <p class="h3 card-title">Buscar Productos</p> |
| 151 | <p class="h5 card-text text-muted font-weight-light"> | 104 | <p class="h5 card-text text-muted font-weight-light"> |
| 152 | Busque aquí los productos<br> | 105 | Busque aquí los productos<br> |
| 153 | que no tienen código | 106 | que no tienen código |
| 154 | </p> | 107 | </p> |
| 155 | </div> | 108 | </div> |
| 156 | </div> | 109 | </div> |
| 157 | 110 | ||
| 158 | </div> | 111 | </div> |
| 159 | 112 | ||
| 160 | </div> | 113 | </div> |
| 161 | 114 | ||
| 162 | </div> | 115 | </div> |
| 163 | 116 | ||
| 164 | <!-- SIDEBAR --> | 117 | <!-- SIDEBAR --> |
| 165 | <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar> | 118 | <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar> |