File: /var/www/vhost/disk-apps/pwa.sports-crowd.com/src/app/pages/home-sc/home-sc.page.html
<ion-header>
<ion-toolbar class="toolbar" mode="ios">
<ion-title>
<img src="assets/img/appicon.png" style="height: 35px">
</ion-title>
<ion-buttons slot="end">
<div (click)="goToNotifications()">
<ion-icon slot="icon-only" name="notifications-outline" class="button-shopping" style="margin-right: 12px;"
*ngIf="notificationsCount"></ion-icon>
<ion-badge color="secondary" class="badge-cart" *ngIf="notificationsNotViewedCount > 0">{{
notificationsNotViewedCount }}
</ion-badge>
</div>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<div class="headerHome" *ngIf="homeProvider._homeImage">
<div class="gradient"></div>
<div class="headerText">
<h3 class="home">Hola, {{ userInfo.first_name }} {{ userInfo.last_name }}</h3>
<!--
<h3 class="titleGreet">{{'TITLE_HOME_GREET' | translate}}</h3>
<div class="infoCoins" (click)="goToCoins()" *ngIf="userInfo.coin_uid">
<img class="iconInfoCoins" height="18" src="assets/img/coins/coin.png">
<p class="textInfoCoins">{{ coins }}</p>
</div>
-->
</div>
</div>
<!--Slide products banners-->
<ion-slides #Slides *ngIf="banners && banners.length" [options]="slideOpts" class="ion-margin-top">
<ion-slide *ngFor="let banner of banners">
<div class="sectionNewsContent" (click)="actionClickBanner(banner)">
<img class="sectionImage" src="{{ cityProvider._urlGallery }}banners/{{ banner.image }}" />
</div>
</ion-slide>
</ion-slides>
<div *ngIf="dataSections && dataSections.length">
<ion-grid>
<ion-row>
<ion-col *ngFor="let section of dataSections" [size]="section.button_width">
<div class="cardMainOptions" [ngStyle]="getButtonBackgroundColor(section.button_color)"
(click)="goToSection(section.name, section.path, section.button_link)" *ngIf="!section.button_image">
<div class="cardSubMainOptions" *ngIf="!section.icon_name">
<ion-icon name="help-circle-outline"></ion-icon>
</div>
<div class="cardSubMainOptions" *ngIf="section.icon_name"
[ngStyle]="getTextAndIconColor(section.button_text_color)">
<ion-icon [name]="section.icon_name"></ion-icon>
</div>
<h1 class="cardTextOptions" [ngStyle]="getTextAndIconColor(section.button_text_color)">{{ section.name }}
</h1>
</div>
<div class="cardMainOptions" (click)="goToSection(section.name, section.path, section.button_link)"
*ngIf="section.button_image">
<ion-img *ngIf="section.button_image" src="{{ section.button_image }}"></ion-img>
</div>
</ion-col>
</ion-row>
</ion-grid>
</div>
<!--Section surveys-->
<ion-slides style="margin-top: 16px;" #Slides *ngIf="homeProvider._listForms && homeProvider._listForms.length"
[options]="slideOpts">
<ion-slide *ngFor="let item of homeProvider._listForms">
<div detail="true" class="sectionNewsContent" routerLink="/app/tabs/settings/request/{{item.id}}">
<img class="sectionImage" src="{{ cityProvider._urlGallery }}form/{{ item.image }}" />
<ion-item lines="none" *ngIf="item.show_text">
<ion-label color="medium" style="font-size: 0.8em;">{{ item.name }}</ion-label>
</ion-item>
</div>
</ion-slide>
</ion-slides>
<div #parent>
<!--Section Estadisticas-->
<div id="Partidos" style="display: none;">
<ion-accordion-group style="margin-top: 10px;" (click)="scrollTo($event)">
<ion-accordion value="first">
<ion-item slot="header" color="medium-shade" class="title">
<ion-icon name="football-outline" style="margin-right: 10px;"></ion-icon>
<ion-label>{{'TITLE_HOME_MATCHES' | translate}}</ion-label>
<ion-icon name="open-outline" color="primary" (click)="goToStatistics()"></ion-icon>
</ion-item>
<div slot="content">
<div class="d-flex justify-content-center">
<section class="sectionButton">
<ion-button class="mirrorButton" (click)="goToStatistics()"></ion-button>
</section>
<iframe width="94%" height="145" *ngIf="statisticUrlOnly" [src]="statisticUrlOnly" frameborder="0"
scrolling="no" allowfullscreen></iframe>
</div>
</div>
</ion-accordion>
</ion-accordion-group>
</div>
<!--Section news-->
<div *ngIf="!homeProvider._activateNewsLink" id="Noticias" style="display: none;">
<ion-accordion-group style="margin-top: 10px;" *ngIf="!homeProvider._activateNewsLink" (click)="scrollTo($event)">
<ion-accordion value="first">
<ion-item slot="header" color="medium-shade" class="title">
<ion-icon name="newspaper-outline" style="margin-right: 10px;"></ion-icon>
<ion-label>{{'TITLE_HOME_NEWS' | translate}}</ion-label>
<ion-icon name="open-outline" color="primary" (click)="goToNews()"></ion-icon>
</ion-item>
<div slot="content" style="padding-top: 5px;">
<section class="news-list">
<div class="sectionNewsContent" (click)="goToNews()" *ngFor="let item of arr | slice:0:3">
<p class="newNews" *ngIf="item.new">{{'NEW_NEWS' | translate}}</p>
<img *ngIf="item" src="{{ item.imgUrl }}" />
<div class="content">
<ion-card-subtitle *ngIf="item">{{ item.category }}</ion-card-subtitle>
<ion-card-subtitle *ngIf="item">{{ item.publicationDate }}</ion-card-subtitle>
<h3 *ngIf="item" style="font-weight: bold;">{{ item.title }}</h3>
</div>
</div>
</section>
</div>
</ion-accordion>
</ion-accordion-group>
</div>
<!--Section news link-->
<div id="Noticias" style="display: none;">
<ion-accordion-group style="margin-top: 10px;" *ngIf="homeProvider._activateNewsLink" (click)="scrollTo($event)">
<ion-accordion value="first">
<ion-item slot="header" color="medium-shade" class="title">
<ion-icon name="newspaper-outline" style="margin-right: 10px;"></ion-icon>
<ion-label>{{'TITLE_HOME_NEWS' | translate}}</ion-label>
<ion-icon name="open-outline" color="primary" (click)="goToNewsLink()"></ion-icon>
</ion-item>
<div slot="content" style="padding-top: 5px;">
<section class="d-flex justify-content-center">
<div class="sectionDiv" (click)="goToNewsLink()">
<div class="d-flex">
<img class="sectionImage" src="{{ cityProvider._urlGallery }}public/news.jpeg?_dc={{ time }}"
alt="Header Noticias Academias Saprissa">
</div>
</div>
</section>
</div>
</ion-accordion>
</ion-accordion-group>
</div>
<!--Section social-->
<div id="Redes_Sociales" style="display: none;">
<ion-accordion-group style="margin-top: 10px;" (click)="scrollTo($event)">
<ion-accordion value="first">
<ion-item slot="header" color="medium-shade" class="title">
<ion-icon name="earth-outline" style="margin-right: 10px;"></ion-icon>
<ion-label>{{'TITLE_HOME_SOCIAL' | translate}}</ion-label>
<ion-icon name="open-outline" color="primary" (click)="goToSocial()"></ion-icon>
</ion-item>
<div slot="content" style="padding-top: 5px;">
<section class="d-flex justify-content-center">
<div class="social-list">
<div class="banner-video" *ngFor="let ytb of videos">
<div class="d-flex" *ngIf="ytb" (click)="launchVideo(ytb.link)">
<iframe width="100%" height="240" [src]="ytb.sanitizedSource" frameborder="0"
allowfullscreen></iframe>
</div>
</div>
<div class="banner-instagram" *ngFor="let ints of instagram" (click)="launchStorie(ints.link)">
<iframe *ngIf="ints" width="100%" height="300" [src]="ints.sanitizedSource" frameborder="0"
allowfullscreen></iframe>
</div>
</div>
</section>
</div>
</ion-accordion>
</ion-accordion-group>
</div>
<!--Section Revista Academias Saprissa -->
<div id="Revista" style="display: none;">
<ion-accordion-group style="margin-top: 10px;" (click)="scrollTo($event)">
<ion-accordion value="first">
<ion-item slot="header" color="medium-shade" class="title">
<ion-icon name="book-outline" style="margin-right: 10px;"></ion-icon>
<ion-label>{{'TITLE_HOME_MAGAZINE' | translate}}</ion-label>
<ion-icon name="open-outline" color="primary" (click)="goToBookcase()"></ion-icon>
</ion-item>
<div slot="content" style="padding-top: 5px;">
<section class="d-flex justify-content-center" (click)="goToBookcase()">
<div class="sectionDiv">
<div class="d-flex">
<img src="{{ cityProvider._urlGallery }}public/magazine.jpeg?_dc={{ time }}"
alt="Header Revista Academias Saprissa">
</div>
</div>
</section>
</div>
</ion-accordion>
</ion-accordion-group>
</div>
<div id="Datos_y_estadísticas" style="display: none;">
<ion-accordion-group style="margin-top: 10px;" (click)="scrollTo($event)">
<ion-accordion value="first">
<ion-item slot="header" color="medium-shade" class="title">
<ion-icon name="stats-chart-outline" style="margin-right: 10px;"></ion-icon>
<ion-label>{{'TITLE_HOME_DATA' | translate}}</ion-label>
<ion-icon name="open-outline" color="primary" (click)="goToStatistics()"></ion-icon>
</ion-item>
<div slot="content" style="padding-top: 5px;">
<div class="d-flex justify-content-center">
<iframe width="94%" height="500" *ngIf="statisticUrlStanding" [src]="statisticUrlStanding" frameborder="0"
scrolling="yes" allowfullscreen></iframe>
</div>
</div>
</ion-accordion>
</ion-accordion-group>
</div>
<!--Section Jugadores-->
<div id="Equipo" style="display: none;">
<ion-accordion-group style="margin-top: 10px;" (click)="scrollTo($event)">
<ion-accordion value="first">
<ion-item slot="header" color="medium-shade" class="title">
<ion-icon name="shirt-outline" style="margin-right: 10px;"></ion-icon>
<ion-label>{{'TITLE_HOME_PLAYERS' | translate}}</ion-label>
<ion-icon name="open-outline" color="primary" (click)="goToPlayers()"></ion-icon>
</ion-item>
<div slot="content" style="padding-top: 5px;">
<section class="d-flex justify-content-center">
<div class="sectionDiv" (click)="goToPlayers()">
<div class="d-flex">
<img class="sectionImage" src="{{ cityProvider._urlGallery }}public/team.jpeg?_dc={{ time }}"
alt="Header Equipo Academias Saprissa">
</div>
</div>
</section>
</div>
</ion-accordion>
</ion-accordion-group>
</div>
<!--Club content-->
<div id="Contenido exclusivo" style="display: none;">
<ion-accordion-group style="margin-top: 10px;" (click)="scrollTo($event)">
<ion-accordion value="first">
<ion-item slot="header" color="medium-shade" class="title">
<ion-icon name="image" style="margin-right: 10px;"></ion-icon>
<ion-label>{{'CLUB_CONTENT.CLUB_CONTENT' | translate}}</ion-label>
<ion-icon name="open-outline" color="primary" (click)="goToClubContent()"></ion-icon>
</ion-item>
<div slot="content" style="padding-top: 5px;" class="ion-margin-start ion-margin-end">
<app-card-publication-content *ngIf="photoClub.length"
[publicationContent]="photoClub[0].publication_content.at(-1)" [publication]="photoClub[0]">
</app-card-publication-content>
</div>
</ion-accordion>
</ion-accordion-group>
</div>
</div>
</ion-content>