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

kfeditor full panel

Browse Source
This commit is contained in:
STEINNI
2025-10-21 19:09:14 +00:00
parent aa76bfe9c0
commit dbd9e83a25
3 changed files with 42 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/styles/intro.css
+15 -3
View File
@@ -16,9 +16,21 @@ body {
transform-origin: right; transform-origin: right;
animation: colorChange 5s linear infinite; animation: colorChange 5s linear infinite;
animation: fadeaway 30s forwards; animation: fadeaway 30s forwards;
left: calc(50%);
transform: translateX(-50%); transform: translateX(-50%);
} }
.glowing.lt {
left: 0%;
transform: rotate(-15deg);
top: -15%;
}
.glowing.ct {
left: 50%;
}
.glowing.rt {
left: 50%;
transform: rotate(15deg)
}
.glowing:nth-child(even) { .glowing:nth-child(even) {
transform-origin: left; transform-origin: left;
@@ -98,7 +110,7 @@ body {
0% { transform: rotate(calc(180deg * var(--i))); scale:20%;} 0% { transform: rotate(calc(180deg * var(--i))); scale:20%;}
25% { transform: rotate(calc(90deg * var(--i))); scale:100%;} 25% { transform: rotate(calc(90deg * var(--i))); scale:100%;}
50% { transform: rotate(calc(0deg * var(--i))); scale:80%;} 50% { transform: rotate(calc(0deg * var(--i))); scale:80%;}
100% { transform: rotate(calc(360deg * var(--i))); scale:50%;} 100% { transform: rotate(calc(360deg * var(--i))); scale:10%;}
} }
@@ -106,7 +118,7 @@ body {
0% { transform: rotate(calc(135deg * var(--i))); scale:20%;} 0% { transform: rotate(calc(135deg * var(--i))); scale:20%;}
25% { transform: rotate(calc(45deg * var(--i))); scale:100%;} 25% { transform: rotate(calc(45deg * var(--i))); scale:100%;}
50% { transform: rotate(calc(-45deg * var(--i))); scale:80%;} 50% { transform: rotate(calc(-45deg * var(--i))); scale:80%;}
100% { transform: rotate(calc(315deg * var(--i))); scale:50%;} 100% { transform: rotate(calc(315deg * var(--i))); scale:10%;}
} }
app/views/editors/KeyframeView.html
+24 -13
View File
@@ -12,11 +12,21 @@
.kf-editor article.agent-preview header { padding:0; } .kf-editor article.agent-preview header { padding:0; }
.kf-editor canvas[data-output="agentSampleCanvas"]{ width:100%; aspect-ratio: 1 / 1;} .kf-editor canvas[data-output="agentSampleCanvas"]{ width:100%; aspect-ratio: 1 / 1;}
.kf-editor canvas[data-output="kfArenaCanvas"]{ width:100%; height:100%; } .kf-editor canvas[data-output="kfArenaCanvas"]{ width:100%; height:100%; }
.kf-editor article.agent-preview section, .kf-editor article.agent-properties section{ .kf-editor article.agent-preview section{
display: grid; display: grid;
grid-template-rows: 2em auto 2em; grid-template-rows: 2em auto;
height: 100%; overflow: visible;
} }
.kf-editor article.agent-properties section{
display: grid;
grid-template-rows: 2em auto;
overflow: visible;
height:100%;
}
.kf-editor article.agent-preview section.selector{ padding: 0.5em .5em 1.5em .5em; }
.kf-editor article.agent-preview section.browser{ padding:0; }
.kf-editor article.agent-preview section.browser header { border-top: 1px solid #473; border-bottom: 1px solid #473;}
.kf-editor article.agent-preview section.browser header h1{ text-align: center; margin-top: .3em;}
.kf-editor article.kfArena section{ .kf-editor article.kfArena section{
padding: 0; padding: 0;
height: 100%; height: 100%;
@@ -35,7 +45,8 @@
padding: 0 0 0 0; padding: 0 0 0 0;
min-height: 1.2em; min-height: 1.2em;
} }
.kf-editor article.agent-properties section div.kf-actions button{ .kf-editor article.agent-properties section.kf-actions { border-top: 1px solid #473; padding: 3px 5px 3px 5px; height:3em;}
.kf-editor article.agent-properties section.kf-actions button{
color: #DDD; color: #DDD;
padding: 0 0 0 0; padding: 0 0 0 0;
min-height: 2em; min-height: 2em;
@@ -51,11 +62,11 @@
<div class="kf-editor cols-3"> <div class="kf-editor cols-3">
<article eiccard class="agent-preview"> <article eiccard class="agent-preview">
<header><canvas data-output="agentSampleCanvas"></canvas></header> <header><canvas data-output="agentSampleCanvas"></canvas></header>
<section> <section class="selector">
<div> <bz-select label="Agent type..." data-output="agentsSelector"></bz-select>
<bz-select label="Agent type..." data-output="agentsSelector"></bz-select> </section>
</div> <section class="browser">
<div></div> <header><h1>Keyframes browser</h1></header>
</section> </section>
</article> </article>
<article eiccard class="kfArena"> <article eiccard class="kfArena">
@@ -71,10 +82,10 @@
<button eicbutton rounded data-output="btnRemoveAgent" data-trigger="onRemoveAgent" >Remove agent</button> <button eicbutton rounded data-output="btnRemoveAgent" data-trigger="onRemoveAgent" >Remove agent</button>
</div> </div>
<div data-output="agentProperties"></div> <div data-output="agentProperties"></div>
<div class="kf-actions cols-2"> </section>
<button eicbutton rounded data-output="btnSaveKF" data-trigger="onSaveKF">Save KF</button> <section class="kf-actions cols-2">
<button eicbutton rounded data-output="btnResetKF" data-trigger="onResetKF">Reset KF</button> <button eicbutton rounded data-output="btnSaveKF" data-trigger="onSaveKF">Save KF</button>
</div> <button eicbutton rounded data-output="btnResetKF" data-trigger="onResetKF">Reset KF</button>
</section> </section>
</article> </article>
index.html
+3 -3
View File
@@ -9,17 +9,17 @@
<body> <body>
<div class="glowing"> <div class="glowing lt">
<span style="--i:1;"></span> <span style="--i:1;"></span>
<span style="--i:2;"></span> <span style="--i:2;"></span>
<span style="--i:3;"></span> <span style="--i:3;"></span>
</div> </div>
<div class="glowing"> <div class="glowing ct">
<span style="--i:4;"></span> <span style="--i:4;"></span>
<span style="--i:5;"></span> <span style="--i:5;"></span>
<span style="--i:6;"></span> <span style="--i:6;"></span>
</div> </div>
<div class="glowing"> <div class="glowing rt">
<span style="--i:5;"></span> <span style="--i:5;"></span>
<span style="--i:3;"></span> <span style="--i:3;"></span>
<span style="--i:1;"></span> <span style="--i:1;"></span>