= 'repeating-linear-gradient(0deg,transparent,transparent ' + (parseInt(sz)-1) + 'px,' + lineCol + ' ' + sz + '),'
+ 'repeating-linear-gradient(90deg,transparent,transparent ' + (parseInt(sz)-1) + 'px,' + lineCol + ' ' + sz + '),'
+ bgo.bg + ';';
codeStatus('Background: ' + bgo.name + '.');
}catch(e){}
};
bgRow.appendChild(b);
});
lwBar.appendChild(bgRow);
// COLOR WHEEL โ run through any background color
var wheelRow = document.createElement('div');
wheelRow.style.cssText = 'display:flex;gap:8px;margin-top:8px;align-items:center;';
wheelRow.innerHTML = '๐จ';
var wheel = document.createElement('input');
wheel.type = 'color';
wheel.value = '#ffffff';
wheel.style.cssText = 'width:48px;height:36px;border:1px solid #333;border-radius:6px;cursor:pointer;padding:0;background:none;';
wheel.oninput = function(){
try{
var sz = '20px';
var m = body.style.background.match(/(\d+)px/);
if(m) sz = m[1]+'px';
/* pick line color based on brightness */
var hex = wheel.value;
var r = parseInt(hex.substr(1,2),16), g = parseInt(hex.substr(3,2),16), b = parseInt(hex.substr(5,2),16);
var bright = (r*299 + g*587 + b*114)/1000;
var lineCol = bright > 128 ? 'rgba(0,0,0,0.3)' : 'rgba(255,255,255,0.3)';
body.style.background = 'repeating-linear-gradient(0deg,transparent,transparent ' + (parseInt(sz)-1) + 'px,' + lineCol + ' ' + sz + '),'
+ 'repeating-linear-gradient(90deg,transparent,transparent ' + (parseInt(sz)-1) + 'px,' + lineCol + ' ' + sz + '),'
+ hex + ';';
}catch(e){}
};
wheelRow.appendChild(wheel);
var wheelLabel = document.createElement('span');
wheelLabel.textContent = 'background';
wheelLabel.style.cssText = 'color:#666;font-size:12px;';
wheelRow.appendChild(wheelLabel);
/* second wheel โ the lines */
var lineWheel = document.createElement('input');
lineWheel.type = 'color';
lineWheel.value = '#000000';
lineWheel.style.cssText = 'width:48px;height:36px;border:1px solid #333;border-radius:6px;cursor:pointer;padding:0;background:none;margin-left:8px;';
lineWheel.oninput = function(){
try{
var sz = '20px';
var m = body.style.background.match(/(\d+)px/);
if(m) sz = m[1]+'px';
/* get current bg color */
var bgM = body.style.background.match(/#[0-9a-fA-F]{6}(?!.*#[0-9a-fA-F]{6})/);
var bgCol = bgM ? bgM[0] : '#ffffff';
/* fallback: try to get from wheel */
try{ bgCol = wheel.value; }catch(e){}
var lc = lineWheel.value;
var lr = parseInt(lc.substr(1,2),16), lg = parseInt(lc.substr(3,2),16), lb = parseInt(lc.substr(5,2),16);
var lineCol = 'rgba('+lr+','+lg+','+lb+',0.5)';
body.style.background = 'repeating-linear-gradient(0deg,transparent,transparent ' + (parseInt(sz)-1) + 'px,' + lineCol + ' ' + sz + '),'
+ 'repeating-linear-gradient(90deg,transparent,transparent ' + (parseInt(sz)-1) + 'px,' + lineCol + ' ' + sz + '),'
+ bgCol + ';';
}catch(e){}
};
wheelRow.appendChild(lineWheel);
var lineLabel = document.createElement('span');
lineLabel.textContent = 'lines';
lineLabel.style.cssText = 'color:#666;font-size:12px;';
wheelRow.appendChild(lineLabel);
lwBar.appendChild(wheelRow);
// ELEVATED โ curated presets, save your own, line patterns
var presetRow = document.createElement('div');
presetRow.style.cssText = 'display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;align-items:center;';
presetRow.innerHTML = 'Presets:';
var presets = [
{n:'Blueprint', bg:'#1a3a5c', line:'#4da6ff'},
{n:'Parchment', bg:'#f5eeda', line:'#8a6a1c'},
{n:'Midnight', bg:'#0a0a0a', line:'#ffd700'},
{n:'Mint', bg:'#e8f8f0', line:'#2a8a5c'},
{n:'Rose', bg:'#fce8e8', line:'#c44a5c'}
];
presets.forEach(function(p){
var b = document.createElement('button');
b.textContent = p.n;
b.style.cssText = 'padding:6px 10px;font-size:12px;border-radius:6px;cursor:pointer;'
+ 'background:'+p.bg+';color:'+p.line+';border:1px solid '+p.line+';';
b.onclick = function(){
try{
var sz = '20px';
var m = body.style.background.match(/(\d+)px/);
if(m) sz = m[1]+'px';
var lr = parseInt(p.line.substr(1,2),16), lg = parseInt(p.line.substr(3,2),16), lb = parseInt(p.line.substr(5,2),16);
var lineCol = 'rgba('+lr+','+lg+','+lb+',0.4)';
body.style.background = 'repeating-linear-gradient(0deg,transparent,transparent ' + (parseInt(sz)-1) + 'px,' + lineCol + ' ' + sz + '),'
+ 'repeating-linear-gradient(90deg,transparent,transparent ' + (parseInt(sz)-1) + 'px,' + lineCol + ' ' + sz + '),'
+ p.bg + ';';