P42_UI/app/views/editors/KeyframeView.html

<style>
    .kf-editor{
        grid-template-columns: 15% auto 20%;
        grid-gap:0;
        height: 100%;
    }
    .kf-editor > article{
        height: 100%;
        margin: 0;
    }
    .kf-editor canvas[data-output="agentSampleCanvas"]{ width:100%; aspect-ratio: 1 / 1;} 
    .kf-editor canvas[data-output="kfArenaCanvas"]{ width:100%; height:100%; } 
    .kf-editor article.left-pane section{
        display: grid;
        grid-template-rows: 2em auto;
        overflow: visible; 
    }
     .kf-editor article.agent-properties section{
        display: grid;
        grid-template-rows: 2em 2em auto;
        overflow: visible;
        height:100%;
    }
    .kf-editor article.left-pane > section, .kf-editor article.agent-properties > section { padding:0; }
    .kf-editor article.left-pane > section header, .kf-editor article.agent-properties > section header {
        margin: 0; 
        padding: 0;
        border-top: 1px solid #473; 
        border-bottom: 1px solid #473;
        background-color: #342;
    }
    .kf-editor article.left-pane > section header h1, .kf-editor article.agent-properties > section header h1{ 
        text-align: center; 
        margin-top: .3em;
    }
    .kf-editor article.left-pane > section > bz-select{ margin: 1em 0.5em 1em 0.5em; }
    .kf-editor article.kfArena section{
        padding: 0;
        height: 100%;
        overflow: hidden;
    }
    .kf-editor article.agent-properties section div.agent-actions{
        border: 1px solid #574;
        border-radius: 5px;
        background-color: #231;
        box-shadow: 0px 0px 7px #0B69;
        height: 2em;
        padding: 0 5px 0 5px;
        margin-top: .5em;
    }
    .kf-editor article.agent-properties section div.agent-actions button{
        color: #DDD;
        padding: 0 0 0 0;
        min-height: 1.2em;
    }
    .kf-editor article.agent-properties section.kf-actions { 
        border-top: 1px solid #473; 
        padding: 3px 5px 3px 5px; 
        height:8em;
    }
    .kf-editor article.agent-properties section.kf-actions button{
        color: #DDD;
        padding: 0 0 0 0;
    }
    .kf-editor button[data-trigger="onAddAgent"] { background-color: #6B5; }
    .kf-editor button[data-trigger="onRemoveAgent"] { background-color: #A00; }
    .kf-editor button[data-trigger="onSaveKF"] { background-color: #367; }
    .kf-editor button[data-trigger="onResetKF"] { background-color: #A00; }    
    .kf-editor div[data-output="agentId"] {
        border: 1px solid #574;
        border-radius: 5px;
        background-color: #231;
        box-shadow: 0px 0px 7px #0B69;
        height: 2em;
        padding: .2em 5px .2em 5px;
        margin-top: 1em;
        font-size: .8em;
    }
    .kf-editor bz-select[data-output="keyframesSelector"]{
        margin-top:1em;
    }
    .kf-editor .kfArena bz-slidepane{
        font-size:14px;
    }
    .kf-editor .kfArena bz-slidepane div.inner-console{
        overflow: hidden;
        height: 100%;
        display: grid;
        grid-template-rows: auto minmax(3em, 30%);
    }
    .kf-editor .kfArena bz-slidepane div.commandline{
        grid-template-columns: auto 3em;
        width: 98%;
    }
    .kf-editor .kfArena bz-slidepane textarea{
        background: #000A;
        padding: 0 1em 0 1em;
        width: 96%;
        border-top: 1px solid white;
        color: #0F0;
        resize: none;
    }
    .kf-editor button[data-trigger="execCommand"]{
        background-color:#6B5;
        border-radius: 10px;
        max-height: 3em;
    }
</style>
<div class="kf-editor cols-3">
    <article eiccard class="left-pane">
        <section class="selector">
            <header><h1>Agent type browser</h1></header>
            <canvas data-output="agentSampleCanvas"></canvas>
            <bz-select label="Select agent type..." data-output="agentsSelector"></bz-select>
        </section>
        <section class="browser">
            <header><h1>Keyframes browser</h1></header>
            <!-- Temporary... -->
            <bz-select label="Existing keyframes..." data-output="keyframesSelector"></bz-select>
        </section>
    </article>
    <article eiccard class="kfArena">
        <section>
            <canvas data-output="kfArenaCanvas"></canvas> 
            <bz-slidepane side="bottom" data-output="console">
                <div class="inner-console">
                    <div class="results">
                        JS 3D Console. for help, type "help"
                    </div>
                    <div class="cols-2 commandline">
                        <textarea type="text" data-output="commands"></textarea>   
                        <button class="icon-play" data-trigger="execCommand"></button>
                    </div>      
                </div>                
            </bz-slidepane>
        </section>
    </article>
    <article eiccard class="agent-properties">
        <section>
            <header><h1>Agent properties</h1></header>
            <div class="agent-actions cols-2">
                <button eicbutton rounded data-output="btnAddAgent" data-trigger="onAddAgent">Create agent</button>
                <button eicbutton rounded data-output="btnRemoveAgent" data-trigger="onRemoveAgent" >Remove agent</button>
            </div>
            <div data-output="agentProperties"></div>
        </section>
        <section class="kf-actions">
            <label>Keyframe name</label>
            <input type="text" data-output="kfName" placeholder="(min 5 chars)"/>
            <div class="cols-2">
                <button eicbutton rounded data-output="btnSaveKF" data-trigger="onSaveKF">Save KF</button>
                <button eicbutton rounded data-output="btnResetKF" data-trigger="onResetKF">Reset KF</button>
            </div>
        </section>
    </article>
    
</div>