BuboBubo/bitfielder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better eval mechanism and transparency

Browse Source
This commit is contained in:
Raphaël Forment
2025-07-05 18:19:39 +02:00
parent 8082ec66ea
commit bacc6f0325
3 changed files with 90 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
index.html
View File

@ -14,6 +14,10 @@
<meta name="twitter:title" content="Bitfielder - Bitfield Shader App">
<meta name="twitter:description" content="Interactive bitfield shader editor for creating visual patterns using bitwise operations">
<style>
:root {
--ui-opacity: 0.3;
}
* {
margin: 0;
padding: 0;
@ -44,7 +48,7 @@
left: 0;
right: 0;
height: 40px;
background: rgba(0, 0, 0, 0.8);
background: rgba(0, 0, 0, var(--ui-opacity));
border-bottom: 1px solid #333;
display: flex;
align-items: center;
@ -86,11 +90,11 @@
left: 0;
right: 0;
height: 140px;
background: rgba(0, 0, 0, 0.6);
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: stretch;
gap: 10px;
padding: 10px;
z-index: 100;
backdrop-filter: blur(5px);
transition: all 0.3s ease;
}
@ -99,14 +103,15 @@
bottom: 20px;
left: 20px;
right: 20px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 5px;
}
#editor {
width: 100%;
background: rgba(0, 0, 0, 0.3);
border: none;
flex: 1;
background: rgba(0, 0, 0, var(--ui-opacity));
backdrop-filter: blur(2px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
color: #fff;
font-family: monospace;
font-size: 16px;
@ -116,10 +121,38 @@
transition: all 0.3s ease;
}
#eval-btn {
background: rgba(0, 0, 0, var(--ui-opacity));
backdrop-filter: blur(2px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
padding: 20px 30px;
font-family: monospace;
font-size: 16px;
font-weight: bold;
cursor: pointer;
border-radius: 4px;
transition: all 0.2s ease;
align-self: stretch;
}
#eval-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.4);
}
#eval-btn:active {
transform: scale(0.95);
}
#editor.minimal {
padding: 12px 15px;
font-size: 14px;
background: rgba(0, 0, 0, 0.3);
}
#eval-btn.minimal {
padding: 10px 20px;
font-size: 14px;
}
#help-popup {
@ -191,7 +224,7 @@
position: fixed;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.7);
background: rgba(0, 0, 0, var(--ui-opacity));
border: 1px solid #555;
color: #fff;
padding: 8px 12px;
@ -213,11 +246,11 @@
right: -300px;
width: 300px;
height: 100vh;
background: rgba(0, 0, 0, 0.9);
background: rgba(0, 0, 0, calc(var(--ui-opacity) + 0.1));
border-left: 1px solid rgba(255, 255, 255, 0.1);
z-index: 90;
transition: right 0.3s ease;
backdrop-filter: blur(10px);
backdrop-filter: blur(3px);
overflow-y: auto;
}
@ -376,7 +409,7 @@
.shader-code {
padding: 8px 10px;
background: rgba(0, 0, 0, 0.3);
background: rgba(0, 0, 0, var(--ui-opacity));
color: #ccc;
font-family: monospace;
font-size: 11px;
@ -555,6 +588,11 @@
<option value="rainbow">Rainbow</option>
</select>
</label>
<label style="color: #ccc; font-size: 12px; margin-right: 10px;">
UI Opacity:
<input type="range" id="opacity-slider" min="10" max="100" value="30" style="width: 80px; vertical-align: middle;">
<span id="opacity-value" style="font-size: 11px;">30%</span>
</label>
<button id="help-btn">?</button>
<button id="fullscreen-btn">Fullscreen</button>
<button id="hide-ui-btn">Hide UI</button>
@ -566,6 +604,7 @@
<div id="editor-panel">
<textarea id="editor" placeholder="Enter shader code... (x, y, t, i, mouseX, mouseY)" spellcheck="false">x^y</textarea>
<button id="eval-btn">Eval</button>
</div>
<div id="shader-library-trigger"></div>