cellular-automata/lib/app_component.html

<header class="material-header">
    <div class="material-header-row">
        <material-button icon class="material-drawer-button">
            <material-icon icon="menu"></material-icon>
        </material-button>
        <span class="material-header-title">Cellular Automata</span>
        <div class="material-spacer"></div>
        <nav class="material-navigation">
            <a>Link 1</a>
        </nav>
    </div>
</header>
<div id="rules-input">
    Ruleset: <input type="text" title="ruleset" content="S23/B3">
    <i class="fas fa-paint-brush"></i>
</div>
<div id="output">
    <canvas #caCanvas width="500" height="500"></canvas>
</div>
<div id="controls">
    <button id="run" (click)="onStartClicked()">
        <span [ngSwitch]="engine.running">
            <i *ngSwitchCase="false" class="fas fa-play"></i>
            <i *ngSwitchCase="true" class="fas fa-stop"></i>
        </span>
    </button>
    <button id="step" (click)="onStepClicked()"><i class="fas fa-step-forward"></i></button>
    <button id="random" (click)="onRandomClicked()"><i class="fas fa-random"></i></button>
    <button id="reset" (click)="onResetClicked()"><i class="fas fa-undo"></i></button>
    <button id="clear" (click)="onClearClicked()"><i class="fas fa-trash-alt"></i></button>
    <i class="fas fa-clock"> Speed:</i><input type="text" title="speed" value="1">
    <button id="edges" (click)="onEdgesClicked()"><i class="fas fa-chess-board"></i> </button>
</div>