kxip-app/src/app/fan-zone/fan-zone.page.html

<ion-content>

    <section class="social-login" [ngClass]="{'active' : showSocialLogin }">
        
        <section class="login-box">
            <button (click)="doLogin()"> Login with <img src="assets/icons/google.png"> </button>
        </section>

    </section>

    <div class="content-container">

        <section class="profile" *ngIf="googleUserData.name">
            <img [src]="googleUserData.profileImage" alt="profile-image">
            <p> {{ googleUserData.name }} </p>
        </section>

        <div class="heading-holder">
            <h2 class="main-header">
                #FanZone
            </h2>

            <p>
                Games, Merch &amp; More!
            </p>
        </div>

        <ul class="stories">
            <li (click)="presentCamModal()">
                <ion-icon name="add-circle-outline"></ion-icon>
                <span> Add Story </span>
            </li>
            <li *ngFor="let story of fanStories; let i = index" [ngClass]="{'inactive' : story.opened }"
            (click)="showSlides = true; story.opened = true; goToSlide(i)">
                <img [src]="story.profileImage">
                <span> {{ story.name }} </span>
            </li>
        </ul>

        <ul class="fan-feature-list">
            <li (click)="presentCamModal()">
                <div>
                    <ion-icon name="camera-outline"></ion-icon>

                    <label> Fan Cam </label>
                </div>
            </li>
            <li [routerLink]="['/collections']">
                <div>
                    <ion-icon name="trophy-outline"></ion-icon>

                    <label> Collections </label>
                </div>
            </li>
            <li [routerLink]="['/quiz']">
                <div>
                    <ion-icon name="podium-outline"></ion-icon>

                    <label> Quiz </label>
                </div>
            </li>
            <li [routerLink]="['/shop']">
                <div>
                    <ion-icon name="bag-handle-outline"></ion-icon>

                    <label> Shop </label>
                </div>
            </li>

            <li [routerLink]="['/booking']">
                <div>
                    <ion-icon name="ticket-outline"></ion-icon>

                    <label> Tickets </label>
                </div>
            </li>

            <li (click)="showPolls = true">
                <div>
                    <ion-icon name="bar-chart-outline"></ion-icon>

                    <label> Polls </label>
                </div>
            </li>
        </ul>
    </div>


    <ion-slides  #slides [options]="slideOpts" class="story-slides" [ngClass]="{'active' : showSlides }"
    (ionSlideDidChange)="updateStory()">
        <ion-slide *ngFor="let story of fanStories" [ngStyle]="{'background-image': 'url(' + story.storyImage + ')' }">
            <header>
                <h5> <img [src]="story.profileImage"> {{ story.name }} </h5>
                <button (click)="showSlides = false"> <ion-icon name="close-outline"></ion-icon> </button>
            </header>

            <div class="emoji-buffer" [ngClass]="{'active' : selectedEmoji }">
                <img *ngFor="let emoji of emojiBuffer" [src]="emoji.emoji" 
                [ngStyle]="{'left.%' : emoji.positionX, 'top.%' : emoji.positionY, 'width.px' : emoji.size}">
            </div>

            <section class="action-buttons">
                <button *ngFor="let emoji of emojis"
                (click)="selectedEmoji = emoji; generateEmojiStream()"> <img [src]="emoji"> </button>

                <button> <ion-icon name="share-social-outline"></ion-icon> </button>
            </section>
        </ion-slide>
    </ion-slides>




    <section class="poll-modal" [ngClass]="{'active': showPolls }">
        <button class="back-button" (click)="showPolls = false"> <ion-icon name="close-outline"></ion-icon> </button>
        <app-polls class="poll-widget"></app-polls>
    </section>

</ion-content>