P42_UI/app/views/system/lab/SamplerView.html

<style>
@import url('https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap');
:root {
    --smp-global-background: #dcd4bc;
    --smp-global-color: #503333;
}
.sampler-app > header { background: url('/app/assets/images/cards/lab-sampler.jpg'); }
.sampler-app section {
    border: none;
    background: var(--smp-global-background);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
}
.sampler-app .speaker {
    color: black;
    height: 340px;
    min-width: 340px;
    width: 340px;
    border: 7px solid rgb(0 0 0 / 5%);
    padding: 20px;
    display: grid;
    margin: 0 40px 0 0;
    border-radius: 18px;
}
[device="tablet"] .sampler-app .speaker,
[device="mobile"] .sampler-app .speaker {
    display: none !important;
}

.sampler-app .speaker .hole {
    background-color: black;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    grid-column: 1;
    grid-row: 1;
}

.sampler-app .speaker .stripes {
    color: black;
    background-image: linear-gradient(0deg,  var(--smp-global-background) 60%, black 1%, black 10%, #0000003b 25%);
    background-size: 1px 23px;
    width: 100%;
    height: 100%;
    grid-column: 1;
    grid-row: 1;
}
.sampler-app .pads {
    display: flex;
    grid-gap: var(--eicui-base-spacing-l);
    flex-flow: wrap;
}
.sampler-app .pads .pad {
    display: grid;
    grid-template-rows: auto min-content;
    grid-template-columns: min-content auto;
    grid-gap: 4px;
    flex: 1;
    min-width: 100px;
    max-width: 140px;
}
.sampler-app .pads .pad kbd {
    align-self: flex-end;
    justify-self: center;
    color: white;
    background: var(--smp-global-color);
    padding: 6px 11px;
    border-radius: 5px;
    font-size: 0.95rem;
    text-transform: uppercase;
}
.sampler-app .pads .pad button {
    width: 100%;
    height: 100%;
    border: 2px solid black;
    grid-column: 1 / 3;
    border-radius: 6px;
    padding: 0;
    box-shadow: 1px 4px 4px #0000007d;
    min-height: 40px;
}
.sampler-app .pads .pad button.assigned:hover span {
    border-color: orange !important;
}
.sampler-app .pads .pad button span {
    display: block;
    width: 100%;
    height: 100%;
    background: #404040;
    border: 8px solid #59402c;
    box-sizing: border-box;
}
.sampler-app .pads .pad button.assigned span { border: 3px solid #b77c4c; }
.sampler-app .pads .pad button.playing span { border: 3px solid #93f795; }
.sampler-app .pads .pad label {
    color: #ffffffc4;
    background: var(--smp-global-color);
    padding: 8px 3px 8px 10px;
    margin: 3px 0 0 0;
    text-transform: uppercase;
    font-family: 'Fugaz One', cursive;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.75rem;
    align-content: center;
}
.sampler-app footer {
    background-color: rgba(0, 0, 0, 0.168);
    grid-area: footer;
    border-top: 4px solid #ffffff61;
}
</style>
<article eiccard media class="sampler-app">
    <header>
        <h1>CARMELOMATIC<sup>&reg;</sup></h1>
        <h2>SAMPLER 3000</h2>
    </header>
    <section>
            
            <div class="speaker">
                <div class="hole"></div>
                <div class="stripes"></div>
            </div>
            <!---->
            <div class="pads">
                <div class="pad">  
                    <button accesskey="e"><span></span></button>
                    <kbd>e</kbd><label for="button"></label>
                </div>
                <div class="pad">  
                    <button accesskey="r"><span></span></button>
                    <kbd>r</kbd><label for="button"></label>
                </div>
                <div class="pad">  
                    <button accesskey="t"><span></span></button>
                    <kbd>t</kbd><label for="button"></label>
                </div>
                <div class="pad">  
                    <button accesskey="y"><span></span></button>
                    <kbd>y</kbd><label for="button"></label>
                </div>
                <div class="pad">  
                    <button accesskey="d"><span></span></button>
                    <kbd>d</kbd><label for="button"></label>
                </div>
                <div class="pad">  
                    <button accesskey="f"><span></span></button>
                    <kbd>f</kbd><label for="button"></label>
                </div>
                <div class="pad">  
                    <button accesskey="g"><span></span></button>
                    <kbd>g</kbd><label for="button"></label>
                </div>
                <div class="pad">  
                    <button accesskey="h"><span></span></button>
                    <kbd>h</kbd><label for="button"></label>
                </div>
                <div class="pad">  
                    <button accesskey="c"><span></span></button>
                    <kbd>c</kbd><label for="button"></label>
                </div>
                <div class="pad">  
                    <button accesskey="v"><span></span></button>
                    <kbd>v</kbd><label for="button"></label>
                </div>
                <div class="pad">  
                    <button accesskey="b"><span></span></button>
                    <kbd>b</kbd><label for="button"></label>
                </div>
                <div class="pad">  
                    <button accesskey="n"><span></span></button>
                    <kbd>n</kbd><label for="button"></label>
                </div>
                <div class="pad">  
                    <button accesskey="u"><span></span></button>
                    <kbd>u</kbd><label for="button"></label>
                </div>
                <div class="pad">  
                    <button accesskey="i"><span></span></button>
                    <kbd>i</kbd><label for="button"></label>
                </div>
                <div class="pad">  
                    <button accesskey="o"><span></span></button>
                    <kbd>o</kbd><label for="button"></label>
                </div>
                <div class="pad">  
                    <button accesskey="p"><span></span></button>
                    <kbd>p</kbd><label for="button"></label>
                </div>
                <div class="pad">  
                    <button accesskey="j"><span></span></button>
                    <kbd>j</kbd><label for="button"></label>
                </div>
                <div class="pad">  
                    <button accesskey="k"><span></span></button>
                    <kbd>k</kbd><label for="button"></label>
                </div>
                <div class="pad">  
                    <button accesskey="l"><span></span></button>
                    <kbd>l</kbd><label for="button"></label>
                </div>
                <div class="pad">  
                    <button accesskey="m"><span></span></button>
                    <kbd>m</kbd><label for="button"></label>
                </div>
            </div>
        
    </section>
</article>