P42/P42_UI
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

unclean SPARC

Browse Source
This commit is contained in:
STEINNI
2025-08-27 07:03:09 +00:00
commit f308460931
430 changed files with 54426 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/views/system/lab/SamplerView.html
Executable
+212
View File
@@ -0,0 +1,212 @@
<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>