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>
            <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>