Commit 0f7b344baef7c959f2028792e48ade514098956a

Authored by Marcelo Puebla
1 parent 8af12c60e3
Exists in master

Agregado shadow.

src/app/components/busqueda-productos/busqueda-productos.component.html
1 <div class="row m-0 fade-in"> 1 <div class="row m-0 fade-in">
2 <div class="col-12 p-0"> 2 <div class="col-12 p-0">
3 3
4 <!-- NOMBRE DE SECCION --> 4 <!-- NOMBRE DE SECCION -->
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col-12 p-0"> 6 <div class="col-12 p-0">
7 <p class="h5 m-0 py-1 bg-gray text-muted text-center"> 7 <p class="h5 m-0 py-1 bg-gray text-muted text-center">
8 {{title}} 8 {{title}}
9 <i *ngIf="title === 'Búsqueda'" class="fa fa-search"></i> 9 <i *ngIf="title === 'Búsqueda'" class="fa fa-search"></i>
10 </p> 10 </p>
11 </div> 11 </div>
12 </div> 12 </div>
13 13
14 <div class="container-fluid"> 14 <div class="container-fluid">
15 <div class="row m-2 disable-user-select"> 15 <div class="row m-2 disable-user-select">
16 16
17 <!-- FILTROS --> 17 <!-- FILTROS -->
18 <div *ngIf="queMostrar != 'promociones'" class="col-sm-2 p-1"> 18 <div *ngIf="queMostrar != 'promociones'" class="col-sm-2 p-1">
19 <div class="text-center"> 19 <div class="text-center">
20 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p> 20 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
21 </div> 21 </div>
22 <ul class="list-group"> 22 <ul class="list-group">
23 <li 23 <li
24 [ngClass]="{active: categoriaActive == 0}" 24 [ngClass]="{active: categoriaActive == 0}"
25 (click)="categoriaActive = 0; filterItems()" 25 (click)="categoriaActive = 0; filterItems()"
26 class="list-group-item list-group-item-action text-center my-1 p-2 h6"> 26 class="list-group-item list-group-item-action text-center my-1 p-2 h6">
27 Todos 27 Todos
28 </li> 28 </li>
29 <li 29 <li
30 *ngFor="let categoria of categorias" 30 *ngFor="let categoria of categorias"
31 [ngClass]="{active: categoriaActive == categoria.id}" 31 [ngClass]="{active: categoriaActive == categoria.id}"
32 (click)="categoriaActive = categoria.id; filterItems()" 32 (click)="categoriaActive = categoria.id; filterItems()"
33 class="list-group-item list-group-item-action text-center my-1 p-2 h6"> 33 class="list-group-item list-group-item-action text-center my-1 p-2 h6">
34 {{categoria.detalle}} 34 {{categoria.detalle}}
35 </li> 35 </li>
36 </ul> 36 </ul>
37 </div> 37 </div>
38 38
39 <!-- SEARCH INPUT --> 39 <!-- SEARCH INPUT -->
40 <div *ngIf="productos.length > 0" class="fade-in col p-0"> 40 <div *ngIf="productos.length > 0" class="fade-in col p-0">
41 41
42 <div class="row m-0 search"> 42 <div class="row m-0 search">
43 <!-- BOTON VOLVER --> 43 <!-- BOTON VOLVER -->
44 <div class="col-sm-auto p-2"> 44 <div class="col-sm-auto p-2">
45 <button 45 <button
46 type="button" 46 type="button"
47 class="btn btn-light btn-lg shadow-sm" 47 class="btn btn-light btn-lg shadow-sm"
48 [routerLink]="['/inicio']"> 48 [routerLink]="['/inicio']">
49 <span class="font-weight-normal h6 pr-2">Volver</span> 49 <span class="font-weight-normal h6 pr-2">Volver</span>
50 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 50 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
51 </button> 51 </button>
52 </div> 52 </div>
53 <div class="col-sm-10 p-2"> 53 <div class="col-sm-10 p-2">
54 <span class="fa fa-search form-control-lg form-control-search pl-3"></span> 54 <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
55 <input 55 <input
56 [matKeyboard]="'spanish'" 56 [matKeyboard]="'spanish'"
57 type="text" 57 type="text"
58 class="form-control form-control-lg shadow-sm rounded-pill px-5" 58 class="form-control form-control-lg shadow-sm rounded-pill px-5"
59 placeholder="Búsqueda productos" 59 placeholder="Búsqueda productos"
60 [(ngModel)]="searchTerm" 60 [(ngModel)]="searchTerm"
61 (ngModelChange)="filterItems()"> 61 (ngModelChange)="filterItems()">
62 </div> 62 </div>
63 <div class="col-sm-12 m-0 p-2 h5"> 63 <div class="col-sm-12 m-0 p-2 h5">
64 <button 64 <button
65 class="btn btn-outline-primary badge badge-light px-2 shadow-sm" 65 class="btn btn-outline-primary badge badge-light px-2 shadow-sm"
66 [ngClass]="{'active': ordenandoByVendidos}" 66 [ngClass]="{'active': ordenandoByVendidos}"
67 (click)="ordenandoByVendidos = !ordenandoByVendidos; filterItems()" 67 (click)="ordenandoByVendidos = !ordenandoByVendidos; filterItems()"
68 >Más vendidos</button> 68 >Más vendidos</button>
69 </div> 69 </div>
70 </div> 70 </div>
71 <!-- LISTA DE PRODUCTOS --> 71 <!-- LISTA DE PRODUCTOS -->
72 <div class="row m-0 align-items-start vh-60 overflow-scroll disable-user-select"> 72 <div class="row m-0 align-items-start vh-60 overflow-scroll disable-user-select">
73 <div 73 <div
74 class="col-4 col-lg-3 p-2" 74 class="col-4 col-lg-3 p-2"
75 *ngFor="let producto of auxProductos"> 75 *ngFor="let producto of auxProductos">
76 <div 76 <div
77 class="card-effect bg-white rounded-sm shadow border-0" 77 class="card-effect bg-white rounded-sm shadow border-0"
78 (click)="elegirProducto(producto)"> 78 (click)="elegirProducto(producto)">
79 <img src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto"> 79 <img
80 src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}"
81 class="rounded-sm shadow w-100 m-auto">
80 <div class="p-2"> 82 <div class="p-2">
81 <p class="h6 min-h-40 text-left m-0"><small>{{producto.DET_LAR}}</small></p> 83 <p class="h6 min-h-40 text-left m-0"><small>{{producto.DET_LAR}}</small></p>
82 <div class="row m-0"> 84 <div class="row m-0">
83 <div class="col-12 my-auto pt-2 pr-2 p-0"> 85 <div class="col-12 my-auto pt-2 pr-2 p-0">
84 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> 86 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
85 </div> 87 </div>
86 </div> 88 </div>
87 </div> 89 </div>
88 </div> 90 </div>
89 </div> 91 </div>
90 </div> 92 </div>
91 </div> 93 </div>
92 94
93 <!-- SPINNER --> 95 <!-- SPINNER -->
94 <div 96 <div
95 *ngIf="productos.length === 0 && showSpinner" 97 *ngIf="productos.length === 0 && showSpinner"
96 class="col-sm-10 p-0 align-self-center text-center"> 98 class="col-sm-10 p-0 align-self-center text-center">
97 <div class="spinner-border spinner-lg text-secondary" role="status"></div> 99 <div class="spinner-border spinner-lg text-secondary" role="status"></div>
98 <span class="text-secondary m-2 h5">Cargando información.</span> 100 <span class="text-secondary m-2 h5">Cargando información.</span>
99 </div> 101 </div>
100 102
101 </div> 103 </div>
102 </div> 104 </div>
103 105
104 </div> 106 </div>
105 107
106 </div> 108 </div>
107 109
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-12 p-0"> 2 <div class="col-12 p-0">
3 3
4 <!-- NOMBRE DE SECCION --> 4 <!-- NOMBRE DE SECCION -->
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col-12 p-0"> 6 <div class="col-12 p-0">
7 <p class="h5 m-0 py-1 bg-gray text-muted text-center">Inicio</p> 7 <p class="h5 m-0 py-1 bg-gray text-muted text-center">Inicio</p>
8 </div> 8 </div>
9 </div> 9 </div>
10 10
11 <div class="row m-0 d-flex align-items-start disable-user-select"> 11 <div class="row m-0 d-flex align-items-start disable-user-select">
12 <div class="col-md-5 py-3 pr-0 d-flex align-items-end flex-column"> 12 <div class="col-md-5 py-3 pr-0 d-flex align-items-end flex-column">
13 13
14 <!-- PROMOCIONES --> 14 <!-- PROMOCIONES -->
15 <div 15 <div
16 (click)="irBusquedaProductos('promociones')" 16 (click)="irBusquedaProductos('promociones')"
17 class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> 17 class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
18 <div class="card-body text-left px-4 py-3"> 18 <div class="card-body text-left px-4 py-3">
19 <div class="row"> 19 <div class="row">
20 <div class="col-auto"> 20 <div class="col-auto">
21 <p class="m-0 h3 card-title">Promociones</p> 21 <p class="m-0 h3 card-title">Promociones</p>
22 </div> 22 </div>
23 <div class="col-auto p-0"> 23 <div class="col-auto p-0">
24 <img src="{{apiImagenes}}/imagenes/primario.promociones.png" class="w-15 m-0"> 24 <img src="{{apiImagenes}}/imagenes/primario.promociones.png" class="w-15 m-0">
25 </div> 25 </div>
26 </div> 26 </div>
27 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> 27 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
28 </div> 28 </div>
29 <!-- CAROUSEL --> 29 <!-- CAROUSEL -->
30 <carousel [showIndicators]="false" [interval]="1500"> 30 <carousel [showIndicators]="false" [interval]="1500">
31 <slide class="h-100"> 31 <slide class="h-100">
32 <img 32 <img
33 src="{{apiImagenes}}/imagenes/beldent.jpg" 33 src="{{apiImagenes}}/imagenes/beldent.jpg"
34 class="fade-in d-block w-75 m-auto rounded"> 34 class="fade-in d-block w-75 m-auto rounded">
35 </slide> 35 </slide>
36 <slide class="h-100"> 36 <slide class="h-100">
37 <img 37 <img
38 src="{{apiImagenes}}/imagenes/cafe con leche y medialunas.jpg" 38 src="{{apiImagenes}}/imagenes/cafe con leche y medialunas.jpg"
39 class="fade-in d-block w-75 m-auto rounded"> 39 class="fade-in d-block w-75 m-auto rounded">
40 </slide> 40 </slide>
41 <slide class="h-100"> 41 <slide class="h-100">
42 <img 42 <img
43 src="{{apiImagenes}}/imagenes/Surtido bagley.jpg" 43 src="{{apiImagenes}}/imagenes/Surtido bagley.jpg"
44 class="fade-in d-block w-75 m-auto rounded"> 44 class="fade-in d-block w-75 m-auto rounded">
45 </slide> 45 </slide>
46 <slide class="h-100"> 46 <slide class="h-100">
47 <img 47 <img
48 src="{{apiImagenes}}/imagenes/yogurisimo.jpg" 48 src="{{apiImagenes}}/imagenes/yogurisimo.jpg"
49 class="fade-in d-block w-75 m-auto rounded"> 49 class="fade-in d-block w-75 m-auto rounded">
50 </slide> 50 </slide>
51 </carousel> 51 </carousel>
52 </div> 52 </div>
53 53
54 <!-- ORDENAR --> 54 <!-- ORDENAR -->
55 <div (click)="irBusquedaProductos('ordenar')" 55 <div (click)="irBusquedaProductos('ordenar')"
56 class="card card-effect bg-white border-0 shadow rounded w-100 mt-3"> 56 class="card card-effect bg-white border-0 shadow rounded w-100 mt-3">
57 <div class="card-body text-left px-4 py-3"> 57 <div class="card-body text-left px-4 py-3">
58 <div class="row"> 58 <div class="row">
59 <div class="col-auto"> 59 <div class="col-auto">
60 <p class="m-0 h3 card-title">Ordenar Pedido</p> 60 <p class="m-0 h3 card-title">Ordenar Pedido</p>
61 </div> 61 </div>
62 <div class="col-auto p-0"> 62 <div class="col-auto p-0">
63 <img src="{{apiImagenes}}/imagenes/primario.ordenar.png" class="w-15"> 63 <img src="{{apiImagenes}}/imagenes/primario.ordenar.png" class="w-15">
64 </div> 64 </div>
65 </div> 65 </div>
66 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> 66 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
67 </div> 67 </div>
68 <img 68 <img
69 class="card-img-bottom d-block w-100 mx-auto rounded" 69 class="card-img-bottom d-block w-100 mx-auto rounded"
70 src="{{apiImagenes}}/imagenes/cafe.jpg"> 70 src="{{apiImagenes}}/imagenes/cafe.jpg">
71 </div> 71 </div>
72 </div> 72 </div>
73 73
74 <div class="col-md-7 py-3 d-flex align-items-end flex-column mt-4 mt-md-0"> 74 <div class="col-md-7 py-3 d-flex align-items-end flex-column mt-4 mt-md-0">
75 75
76 <!-- CARGAR PRODUCTOS --> 76 <!-- CARGAR PRODUCTOS -->
77 <ng-template #popTemplate> 77 <ng-template #popTemplate>
78 <app-popover-promos 78 <app-popover-promos
79 *ngIf="promociones.length > 0 && sinonimos.length === 0" 79 *ngIf="promociones.length > 0 && sinonimos.length === 0"
80 [popover]="popoverDirective" 80 [popover]="popoverDirective"
81 [popoverContent]="promociones" 81 [popoverContent]="promociones"
82 (promoSeleccionada)="promoSeleccionada($event, false)" 82 (promoSeleccionada)="promoSeleccionada($event, false)"
83 class="text-white rounded-sm border-0"> 83 class="text-white rounded-sm border-0">
84 </app-popover-promos> 84 </app-popover-promos>
85 <app-popover-sinonimos 85 <app-popover-sinonimos
86 *ngIf="sinonimos.length > 0" 86 *ngIf="sinonimos.length > 0"
87 [popover]="popoverDirective" 87 [popover]="popoverDirective"
88 [popoverContent]="sinonimos" 88 [popoverContent]="sinonimos"
89 (productosPersonalizados)="productosPersonalizados($event)" 89 (productosPersonalizados)="productosPersonalizados($event)"
90 class="text-white rounded-sm border-0"> 90 class="text-white rounded-sm border-0">
91 </app-popover-sinonimos> 91 </app-popover-sinonimos>
92 </ng-template> 92 </ng-template>
93 <div 93 <div
94 placement="left" 94 placement="left"
95 triggers="" 95 triggers=""
96 [popover]="popTemplate" 96 [popover]="popTemplate"
97 class="w-100" 97 class="w-100"
98 #pop="bs-popover"> 98 #pop="bs-popover">
99 <div class="card bg-white border-0 shadow rounded mb-auto"> 99 <div class="card bg-white border-0 shadow rounded mb-auto">
100 <div class="card-body text-left px-4 py-3"> 100 <div class="card-body text-left px-4 py-3">
101 <div class="row"> 101 <div class="row">
102 <div class="col-auto"> 102 <div class="col-auto">
103 <p class="m-0 h3 card-title">Cargar Productos</p> 103 <p class="m-0 h3 card-title">Cargar Productos</p>
104 </div> 104 </div>
105 <div class="col-auto p-0"> 105 <div class="col-auto p-0">
106 <img src="{{apiImagenes}}/imagenes/escanear.png" class="w-15"> 106 <img src="{{apiImagenes}}/imagenes/escanear.png" class="w-15">
107 </div> 107 </div>
108 </div> 108 </div>
109 <p class="h5 card-text text-muted font-weight-light"> 109 <p class="h5 card-text text-muted font-weight-light">
110 Coloque un producto frente<br> 110 Coloque un producto frente<br>
111 al lector de códigos o selecciónelo en pantalla. 111 al lector de códigos o selecciónelo en pantalla.
112 </p> 112 </p>
113 </div> 113 </div>
114 <div class="row mx-3 mb-3"> 114 <div class="row mx-3 mb-3">
115 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm"> 115 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
116 <!-- IMAGEN DE ESCANER --> 116 <!-- IMAGEN DE ESCANER -->
117 <img 117 <img
118 *ngIf="!productoAcargar" 118 *ngIf="!productoAcargar"
119 class="card-img-top d-block w-100 mx-auto rounded-sm" 119 class="card-img-top d-block w-100 mx-auto rounded-sm"
120 src="{{apiImagenes}}/imagenes/escanner.jpg"> 120 src="{{apiImagenes}}/imagenes/escanner.jpg">
121 121
122 <!-- PRODUCTO A CARGAR --> 122 <!-- PRODUCTO A CARGAR -->
123 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar"> 123 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar">
124 <img 124 <img
125 class="card-img-top d-block w-75 mx-auto rounded-sm" 125 class="card-img-top d-block w-75 shadow mx-auto rounded-sm"
126 src="{{apiImagenes}}/imagenes/{{productoAcargar.imagenes[0].imagen}}"> 126 src="{{apiImagenes}}/imagenes/{{productoAcargar.imagenes[0].imagen}}">
127 127
128 <div class="row justify-content-between m-3"> 128 <div class="row justify-content-between m-3">
129 <div class="col-12 text-left px-1"> 129 <div class="col-12 text-left px-1">
130 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DET_LAR}}</p> 130 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DET_LAR}}</p>
131 </div> 131 </div>
132 <div class="col-12 text-right mt-2"> 132 <div class="col-12 text-right mt-2">
133 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p> 133 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
134 </div> 134 </div>
135 </div> 135 </div>
136 </div> 136 </div>
137 137
138 <!-- PROMO A CARGAR --> 138 <!-- PROMO A CARGAR -->
139 <div class="fade-in m-0" *ngIf="promoAcargar"> 139 <div class="fade-in m-0" *ngIf="promoAcargar">
140 <img 140 <img
141 class="card-img-top d-block w-100 mx-auto rounded-sm" 141 class="card-img-top d-block w-100 mx-auto rounded-sm"
142 src="{{apiImagenes}}/imagenes/{{promoAcargar.imagenes[0].imagen}}"> 142 src="{{apiImagenes}}/imagenes/{{promoAcargar.imagenes[0].imagen}}">
143 143
144 <div class="row justify-content-between m-3"> 144 <div class="row justify-content-between m-3">
145 <div class="col-12 text-left px-1"> 145 <div class="col-12 text-left px-1">
146 <p class="h6 font-weight-bold mb-0">{{promoAcargar.DET_LAR}}</p> 146 <p class="h6 font-weight-bold mb-0">{{promoAcargar.DET_LAR}}</p>
147 </div> 147 </div>
148 <div class="col-12 text-right mt-2 align-self-end"> 148 <div class="col-12 text-right mt-2 align-self-end">
149 <p class="h5 font-weight-bold mb-0">{{promoAcargar.PreVen | currency}}</p> 149 <p class="h5 font-weight-bold mb-0">{{promoAcargar.PreVen | currency}}</p>
150 </div> 150 </div>
151 </div> 151 </div>
152 </div> 152 </div>
153 153
154 </div> 154 </div>
155 <!-- BOTONES DE CARGAR PRODUCTOS--> 155 <!-- BOTONES DE CARGAR PRODUCTOS-->
156 <div 156 <div
157 class="col-5 pr-0" 157 class="col-5 pr-0"
158 *ngIf="promociones.length > 0"> 158 *ngIf="promociones.length > 0">
159 <button 159 <button
160 *ngIf="!promoAcargar || sinonimos.length == 0" 160 *ngIf="!promoAcargar || sinonimos.length == 0"
161 type="button" 161 type="button"
162 class="btn btn-primary btn-block shadow-sm" 162 class="btn btn-primary btn-block shadow-sm"
163 (click)="pop.show()"> 163 (click)="pop.show()">
164 <span class="pr-2">Mostrar promociones</span> 164 <span class="pr-2">Mostrar promociones</span>
165 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i> 165 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i>
166 </button> 166 </button>
167 <button 167 <button
168 *ngIf="sinonimos.length == 0" 168 *ngIf="sinonimos.length == 0"
169 type="button" 169 type="button"
170 class="btn btn-light btn-block shadow-sm my-3" 170 class="btn btn-light btn-block shadow-sm my-3"
171 (click)="confirmarProducto()"> 171 (click)="confirmarProducto()">
172 <span class="pr-2 font-weight-bold">Confirmar</span> 172 <span class="pr-2 font-weight-bold">Confirmar</span>
173 <i class="fa fa-check text-success" aria-hidden="true"></i> 173 <i class="fa fa-check text-success" aria-hidden="true"></i>
174 </button> 174 </button>
175 <button 175 <button
176 type="button" 176 type="button"
177 class="btn btn-light btn-block shadow-sm" 177 class="btn btn-light btn-block shadow-sm"
178 (click)="deshacerCarga()"> 178 (click)="deshacerCarga()">
179 <span class="pr-2">Deshacer</span> 179 <span class="pr-2">Deshacer</span>
180 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 180 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
181 </button> 181 </button>
182 </div> 182 </div>
183 </div> 183 </div>
184 </div> 184 </div>
185 </div> 185 </div>
186 186
187 <!-- BUSCAR PRODUCTOS --> 187 <!-- BUSCAR PRODUCTOS -->
188 <div (click)="irBusquedaProductos('todos')" 188 <div (click)="irBusquedaProductos('todos')"
189 class="card card-effect bg-white border-0 shadow rounded w-100 mt-3"> 189 class="card card-effect bg-white border-0 shadow rounded w-100 mt-3">
190 <div class="card-body text-left px-4 py-3"> 190 <div class="card-body text-left px-4 py-3">
191 <div class="row"> 191 <div class="row">
192 <div class="col-auto"> 192 <div class="col-auto">
193 <p class="m-0 h3 card-title">Buscar Productos</p> 193 <p class="m-0 h3 card-title">Buscar Productos</p>
194 <p class="h5 card-text text-muted font-weight-light"> 194 <p class="h5 card-text text-muted font-weight-light">
195 Busque aquí los productos<br> 195 Busque aquí los productos<br>
196 que no tienen código.</p> 196 que no tienen código.</p>
197 </div> 197 </div>
198 <div class="col-auto p-0"> 198 <div class="col-auto p-0">
199 <img src="{{apiImagenes}}/imagenes/primario.buscar.png" class="w-15"> 199 <img src="{{apiImagenes}}/imagenes/primario.buscar.png" class="w-15">
200 </div> 200 </div>
201 </div> 201 </div>
202 202
203 </div> 203 </div>
204 </div> 204 </div>
205 205
206 </div> 206 </div>
207 207
208 </div> 208 </div>
209 209
210 </div> 210 </div>
211 </div> 211 </div>
212 212