AltitudeWeb/frontend/src/app/particles/particles.component.html

<app-header current_page="particles" height="200px" background_image="/public/img/backgrounds/staff.png"
            [overlay_gradient]="0.5">
  <div class="title" header-content>
    <h1>Particle Creator</h1>
  </div>
</app-header>

<main>
  <section class="darkmodeSection">
    <section class="column">
      <div class="renderer-section column">
        <div class="flex row">
          <div class="flex side-column">
            <app-particle-properties></app-particle-properties>
          </div>
          <div class="flex middle-column">
            <div #rendererContainer class="renderer-container">
              <div class="plane-controls-overlay">
                <button mat-mini-fab color="primary" (click)="togglePlaneLock()" [matTooltip]="isPlaneLocked ? 'Unlock Plane' : 'Lock Plane'">
                  <mat-icon>{{ isPlaneLocked ? 'lock' : 'lock_open' }}</mat-icon>
                </button>

                <div *ngIf="isPlaneLocked" class="plane-orientation-buttons">
                  <button mat-mini-fab color="warn" (click)="setPlaneOrientation(planeOrientations.VERTICAL_ABOVE)"
                          [class.active]="currentPlaneOrientation === planeOrientations.VERTICAL_ABOVE"
                          matTooltip="Vertical Above">
                    <mat-icon>arrow_upward</mat-icon>
                  </button>
                  <button mat-mini-fab color="warn" (click)="setPlaneOrientation(planeOrientations.VERTICAL_BELOW)"
                          [class.active]="currentPlaneOrientation === planeOrientations.VERTICAL_BELOW"
                          matTooltip="Vertical Below">
                    <mat-icon>arrow_downward</mat-icon>
                  </button>
                  <button mat-mini-fab color="primary" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_FRONT)"
                          [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_FRONT"
                          matTooltip="Horizontal Front">
                    <mat-icon>arrow_forward</mat-icon>
                  </button>
                  <button mat-mini-fab color="primary" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_BEHIND)"
                          [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_BEHIND"
                          matTooltip="Horizontal Behind">
                    <mat-icon>arrow_back</mat-icon>
                  </button>
                  <button mat-mini-fab color="accent" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_RIGHT)"
                          [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_RIGHT"
                          matTooltip="Horizontal Right">
                    <mat-icon>arrow_right</mat-icon>
                  </button>
                  <button mat-mini-fab color="accent" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_LEFT)"
                          [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_LEFT"
                          matTooltip="Horizontal Left">
                    <mat-icon>arrow_left</mat-icon>
                  </button>
                </div>
              </div>
            </div>
            <div class="plane-controls">
              <label>Plane Position (Z-axis):</label>
              <mat-slider [min]="minOffset" [max]="maxOffset" step="1" #planeSlider>
                <input matSliderThumb [(ngModel)]="planePosition" (input)="updatePlanePosition($event)">
              </mat-slider>
              <span>{{ planePosition }} offset from center</span>
            </div>
          </div>
          <div class="flex side-column">
            <app-particle></app-particle>
            <app-frames></app-frames>
            <div>
              <button mat-fab extended (click)="copyJson()">
                <mat-icon>content_copy</mat-icon>
                Copy JSON to clipboard
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </section>
</main>