opensourcecode/Hyper-M_UserPortal/src/app/launch-threesixty-dashboard/launch-sales/launch-sales.component.html

<app-main-header></app-main-header>
<div class="col-md-12">
  <div class="row">
    <div class="col-md-12 mt_25">

        <a routerLink="/threesixty-dashboard" class="wid3_font">
          <img src="assets/images/back.png" class="wid3"> <span>{{model_name}}</span>

        </a>

    </div>
  </div>
  <div class="left_card" *ngIf="loader">
      <div class="inner_load"  >
        <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
          viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
          <path fill="#00AFD7" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
            <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite"
            />
          </path>
        </svg>
        <p>Just a moment...</p>
      </div>
    </div>
  <div class="row" *ngIf="!loader">
    <div class="col-md-2">
      <div id="content">
          <div class="circle_sales black" *ngFor="let sales of salesList;let i=index"  (click)="rotateImage(sales)">{{i+1}}
              <div class="big_button_back big_button_5" [ngClass]="imageID==sales.id?'highlight':''">{{sales.title}}</div>
            </div>
        <!-- <div class="circle_sales black" (click)="rotateImage('2')">2
          <div class="big_button_back big_button_5">RIGHT</div>
        </div>
        <div class="circle_sales black" (click)="rotateImage('3')">3
          <div class="big_button_back big_button_5">FRONT</div>
        </div>
        <div class="circle_sales black" (click)="rotateImage('4')">4
          <div class="big_button_back big_button_5">REAR</div>
        </div>
        <div class="circle_sales black" (click)="rotateImage('5')">5
          <div class="big_button_back big_button_5">TOP</div>
        </div> -->
      </div>
    </div>
    <div class="col-md-10 degree_top">
      <div class="lg-container" *ngIf="salesList.length>0">
        <div class="img_height" *ngIf="activeClass">
          <img class="lg-image wid66" src={{imageUrl}}>
          <!-- <img src="../.assets/images/back.png" class="wid3 col-md-2 img-responsive"> -->
          <div *ngFor="let hotspot of imageHotspot;let j=index" [ngStyle]="{'top':hotspot.y+'px','left':hotspot.x+'px'}"  class="lg-hotspot bottom-left" (click)="hotspotPoint($event,j)">
            <div class="lg-hotspot-button active-content{{j}}" ></div>
            <div class="lg-hotspot-label">
              <h4 class="content-title">{{hotspot.contentTitle}}</h4>
              <img class="content-image" src={{hotspot.contentUrl}} width="auto" height="100px">
              <p class="content-description">{{hotspot.contentDescription}}</p>
            </div>
          </div>

          <!-- <div style="top: 21%; left: 88%;" class="lg-hotspot top-right">
            <div class="lg-hotspot-button"></div>
            <div class="lg-hotspot-label">
              <h4>Rocket ship</h4>
              <p>Rocket ships can be great for business. Although they cost a lot of money, they can generate ideas and take
                your business to new heights.</p>
            </div>
          </div>

          <div style="top: 45%; left: 15%;" class="lg-hotspot top-left">
            <div class="lg-hotspot-button"></div>
            <div class="lg-hotspot-label">
              <h4>Cashbook</h4>
              <p>What could be better than a book of cash?</p>
            </div>
          </div>

          <div style="top: 45.5%; left: 62%;" class="lg-hotspot top-right">
            <div class="lg-hotspot-button"></div>
            <div class="lg-hotspot-label">
              <h4>Gears</h4>
              <p>Gears are used in a lot of situations, but here they're probably being used metaphorically.</p>
            </div>
          </div>

          <div style="top: 83%; left: 20%;" class="lg-hotspot bottom-left">
            <div class="lg-hotspot-button"></div>
            <div class="lg-hotspot-label">
              <h4>Notes</h4>
              <p>Always take notes!</p>
            </div>
          </div>

          <div style="top: 85%; left: 91%;" class="lg-hotspot bottom-right">
            <div class="lg-hotspot-button"></div>
            <div class="lg-hotspot-label">
              <p>This is a label without a title.</p>
            </div>
          </div> -->
        </div>
      </div>
      <div *ngIf="salesList.length==0">
        No Record Found
      </div>
    </div>
  </div>
</div>
<app-sidemenu></app-sidemenu>
<app-footer></app-footer>