chris/balloonDesign
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: snapshot v5 version

Browse Source
This commit is contained in:
chris 2025-12-01 09:22:28 -05:00
parent ef7df3a89d
commit d455f8530a
14 changed files with 486 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

307
classic.js
View File

@ -69,6 +69,21 @@
// -------- persistent color selection (now supports image textures) ----------
const PALETTE_KEY = 'classic:colors:v2';
const TOPPER_COLOR_KEY = 'classic:topperColor:v2';
const CLASSIC_STATE_KEY = 'classic:state:v1';
const NUMBER_TINT_COLOR_KEY = 'classic:numberTintColor:v1';
const NUMBER_TINT_OPACITY_KEY = 'classic:numberTintOpacity:v1';
const NUMBER_IMAGE_MAP = {
'0': 'output_webp/0.webp',
'1': 'output_webp/1.webp',
'2': 'output_webp/2.webp',
'3': 'output_webp/3.webp',
'4': 'output_webp/4.webp',
'5': 'output_webp/5.webp',
'6': 'output_webp/6.webp',
'7': 'output_webp/7.webp',
'8': 'output_webp/8.webp',
'9': 'output_webp/9.webp'
};
const MAX_SLOTS = 20;
const SLOT_COUNT_KEY = 'classic:slotCount:v1';
@ -118,6 +133,43 @@
const clean = { hex: normHex(colorObj.hex), image: colorObj.image || null };
try { localStorage.setItem(TOPPER_COLOR_KEY, JSON.stringify(clean)); } catch {}
}
function getNumberTintColor() {
try {
const saved = JSON.parse(localStorage.getItem(NUMBER_TINT_COLOR_KEY));
if (saved && saved.hex) return normHex(saved.hex);
} catch {}
return '#ffffff';
}
function setNumberTintColor(hex) {
const clean = normHex(hex || '#ffffff');
try { localStorage.setItem(NUMBER_TINT_COLOR_KEY, JSON.stringify({ hex: clean })); } catch {}
return clean;
}
function getNumberTintOpacity() {
try {
const saved = parseFloat(localStorage.getItem(NUMBER_TINT_OPACITY_KEY));
if (!isNaN(saved)) return clamp01(saved);
} catch {}
return 0.5;
}
function setNumberTintOpacity(v) {
const clamped = clamp01(parseFloat(v));
try { localStorage.setItem(NUMBER_TINT_OPACITY_KEY, String(clamped)); } catch {}
return clamped;
}
function getTopperTypeSafe() {
try { return (window.ClassicDesigner?.lastTopperType) || null; } catch { return null; }
}
function loadClassicState() {
try {
const saved = JSON.parse(localStorage.getItem(CLASSIC_STATE_KEY));
if (saved && typeof saved === 'object') return saved;
} catch {}
return null;
}
function saveClassicState(state) {
try { localStorage.setItem(CLASSIC_STATE_KEY, JSON.stringify(state || {})); } catch {}
}
function buildClassicPalette() {
const colors = getClassicColors();
@ -157,6 +209,8 @@
let topperOffsetX_Px = 0;
let topperOffsetY_Px = 0;
let topperSizeMultiplier = 1;
let numberTintHex = getNumberTintColor();
let numberTintOpacity = getNumberTintOpacity();
let shineEnabled = true;
let borderEnabled = false;
@ -172,6 +226,8 @@
setTopperOffsetX(val) { topperOffsetX_Px = (Number(val) || 0) * 5; },
setTopperOffsetY(val) { topperOffsetY_Px = (Number(val) || 0) * -5; },
setTopperSize(multiplier) { topperSizeMultiplier = Number(multiplier) || 1; },
setNumberTintHex(hex) { numberTintHex = setNumberTintColor(hex); },
setNumberTintOpacity(val) { numberTintOpacity = setNumberTintOpacity(val); },
setShineEnabled(on) { shineEnabled = !!on; },
setBorderEnabled(on) { borderEnabled = !!on; }
};
@ -198,8 +254,9 @@
function cellView(cell, id, explicitFill, model, colorInfo){
const shape = cell.shape;
const base = shape.base || {};
const scale = cellScale(cell);
const transform = [(shape.base.transform||''), `scale(${scale})`].join(' ');
const transform = [(base.transform||''), `scale(${scale})`].join(' ');
const commonAttrs = {
'vector-effect': 'non-scaling-stroke',
stroke: borderEnabled ? '#111827' : 'none',
@ -214,12 +271,37 @@
commonAttrs['data-quad-number'] = cell.y + 1;
}
let shapeEl;
if (shape.base.type === 'path') shapeEl = svg('path', { ...commonAttrs, d: shape.base.d });
else shapeEl = svg('ellipse', { ...commonAttrs, cx:0, cy:0, rx:0.5, ry:0.5 });
const kids = [];
const fillRule = base.fillRule || base['fill-rule'] || null;
if (base.image) {
const w = base.width || 1, h = base.height || 1;
kids.push(svg('image', { href: base.image, x: -w/2, y: -h/2, width: w, height: h, preserveAspectRatio: base.preserveAspectRatio || 'xMidYMid meet', style: 'pointer-events:none' }));
const tintColor = model.numberTintHex || '#ffffff';
const tintOpacity = model.numberTintOpacity || 0;
if (tintOpacity > 0 && cell.isTopper && (model.topperType || '').startsWith('num-')) {
const maskId = `mask-${id}`;
kids.push(svg('mask', { id: maskId, maskUnits: 'userSpaceOnUse' }, [
svg('image', { href: base.image, x: -w/2, y: -h/2, width: w, height: h, preserveAspectRatio: base.preserveAspectRatio || 'xMidYMid meet', style: 'pointer-events:none' })
]));
kids.push(svg('rect', {
x: -w/2, y: -h/2, width: w, height: h,
fill: tintColor, opacity: tintOpacity,
mask: `url(#${maskId})`,
style: 'mix-blend-mode:multiply; pointer-events:none'
}));
}
} else if (Array.isArray(base.paths)) {
base.paths.forEach(p => {
kids.push(svg('path', { ...commonAttrs, d: p.d, 'fill-rule': p.fillRule || fillRule || 'nonzero' }));
});
} else if (base.type === 'path' || base.d) {
kids.push(svg('path', { ...commonAttrs, d: base.d, 'fill-rule': fillRule || 'nonzero' }));
} else {
kids.push(svg('ellipse', { ...commonAttrs, cx:0, cy:0, rx:0.5, ry:0.5 }));
}
const kids = [shapeEl];
const applyShine = model.shineEnabled && (!cell.isTopper || (cell.isTopper && model.topperType === 'round'));
const allowShine = base.allowShine !== false;
const applyShine = model.shineEnabled && (!cell.isTopper || allowShine);
if (applyShine) {
const shine = classicShineStyle(colorInfo);
const shineAttrs = {
@ -381,7 +463,11 @@ function distinctPaletteSlots(palette) {
if (patterns['Column 5']) patterns['Column 5']._reverse = reverse;
if (patterns['Arch 5']) patterns['Arch 5']._reverse = reverse;
const model = { patternName: name, pattern, cells: [], rowCount: clusters, palette: buildClassicPalette(), topperColor: getTopperColor(), topperType, shineEnabled };
const model = {
patternName: name, pattern, cells: [], rowCount: clusters, palette: buildClassicPalette(),
topperColor: getTopperColor(), topperType, shineEnabled,
numberTintHex, numberTintOpacity
};
const rows = pattern.cellsPerRow * model.rowCount, cols = pattern.cellsPerColumn;
for (let y=0; y<rows; y++){
let balloonIndexInCluster = 0;
@ -419,12 +505,64 @@ function distinctPaletteSlots(palette) {
return d + ' Z';
}
function roundedRectPath(cx, cy, w, h, r = 0.08) {
const x0 = cx - w / 2, x1 = cx + w / 2;
const y0 = cy - h / 2, y1 = cy + h / 2;
const rad = Math.min(r, w / 2, h / 2);
return [
`M ${x0 + rad} ${y0}`,
`H ${x1 - rad}`,
`Q ${x1} ${y0} ${x1} ${y0 + rad}`,
`V ${y1 - rad}`,
`Q ${x1} ${y1} ${x1 - rad} ${y1}`,
`H ${x0 + rad}`,
`Q ${x0} ${y1} ${x0} ${y1 - rad}`,
`V ${y0 + rad}`,
`Q ${x0} ${y0} ${x0 + rad} ${y0}`,
'Z'
].join(' ');
}
function buildNumberTopperShapes() {
const r = 1.0;
const baseTransform = 'scale(0.58)';
const fallbackPaths = {
'0': { d: 'M 0 -0.7 C 0.38 -0.7 0.62 -0.42 0.62 0 C 0.62 0.42 0.38 0.7 0 0.7 C -0.38 0.7 -0.62 0.42 -0.62 0 C -0.62 -0.42 -0.38 -0.7 0 -0.7 Z M 0 -0.4 C -0.2 -0.4 -0.34 -0.22 -0.34 0 C -0.34 0.24 -0.2 0.42 0 0.42 C 0.2 0.42 0.34 0.24 0.34 0 C 0.34 -0.22 0.2 -0.4 0 -0.4 Z', fillRule: 'evenodd' },
'1': { d: 'M -0.12 -0.55 Q 0.1 -0.72 0.28 -0.6 Q 0.36 -0.52 0.34 -0.42 L 0.34 0.65 Q 0.34 0.82 0 0.82 Q -0.34 0.82 -0.34 0.65 L -0.34 -0.18 Q -0.34 -0.32 -0.46 -0.32 Q -0.6 -0.32 -0.62 -0.45 Q -0.64 -0.58 -0.52 -0.65 Z' },
'2': { d: 'M -0.55 -0.25 Q -0.55 -0.7 -0.18 -0.9 Q 0.1 -1.05 0.48 -0.98 Q 0.86 -0.9 1 -0.55 Q 1.12 -0.25 0.92 0.06 Q 0.78 0.28 0.36 0.5 Q 0.02 0.68 -0.2 0.88 Q -0.36 1.04 -0.32 1.12 Q -0.28 1.2 -0.12 1.2 L 0.78 1.2 Q 0.98 1.2 0.98 0.94 Q 0.98 0.7 0.78 0.7 L 0.14 0.7 Q 0.02 0.7 0.02 0.6 Q 0.02 0.52 0.24 0.38 Q 0.76 0.08 0.96 -0.22 Q 1.2 -0.58 1 -0.98 Q 0.82 -1.36 0.38 -1.48 Q -0.2 -1.64 -0.7 -1.34 Q -1.1 -1.1 -1.12 -0.6 Q -1.14 -0.38 -0.96 -0.3 Q -0.8 -0.24 -0.68 -0.32 Q -0.55 -0.42 -0.55 -0.25 Z', fillRule: 'nonzero' },
'3': { d: 'M -0.42 -0.88 Q -0.1 -1.08 0.26 -1.02 Q 0.7 -0.94 0.94 -0.62 Q 1.16 -0.32 1 -0.02 Q 0.86 0.24 0.58 0.36 Q 0.88 0.5 1 0.76 Q 1.16 1.12 0.88 1.38 Q 0.6 1.64 0.08 1.64 Q -0.3 1.64 -0.62 1.44 Q -0.88 1.26 -0.78 0.98 Q -0.7 0.72 -0.44 0.82 Q -0.06 0.96 0.26 0.88 Q 0.42 0.82 0.42 0.62 Q 0.42 0.38 0.1 0.36 L -0.24 0.34 Q -0.44 0.32 -0.44 0.12 Q -0.44 -0.08 -0.24 -0.12 L 0.08 -0.2 Q 0.32 -0.24 0.4 -0.42 Q 0.48 -0.62 0.26 -0.76 Q -0.02 -0.94 -0.4 -0.78 Q -0.62 -0.7 -0.74 -0.9 Q -0.86 -1.1 -0.68 -1.26 Q -0.58 -1.36 -0.42 -0.88 Z' },
'4': { d: 'M 0.42 -0.94 Q 0.64 -0.94 0.7 -0.74 L 0.7 -0.1 L 0.92 -0.1 Q 1.12 -0.08 1.14 0.16 Q 1.16 0.38 0.92 0.46 L 0.7 0.54 L 0.7 0.98 Q 0.7 1.14 0.5 1.18 Q 0.3 1.22 0.18 1.08 L -0.34 0.48 L -0.6 0.48 Q -0.82 0.48 -0.86 0.28 Q -0.88 0.08 -0.7 -0.02 L -0.36 -0.18 L -0.36 -0.76 Q -0.36 -0.96 -0.14 -0.96 Q 0.08 -0.96 0.12 -0.76 L 0.12 -0.36 L 0.08 -0.36 Q 0.28 -0.62 0.42 -0.94 Z' },
'5': { d: 'M 0.92 -0.94 Q 0.92 -1.16 0.72 -1.16 L -0.58 -1.16 Q -0.86 -1.16 -0.86 -0.86 Q -0.86 -0.56 -0.58 -0.56 L -0.2 -0.56 Q -0.02 -0.56 0.14 -0.5 Q 0.44 -0.38 0.44 -0.06 Q 0.44 0.18 0.22 0.36 Q 0.06 0.5 -0.16 0.5 L -0.52 0.5 Q -0.8 0.5 -0.8 0.8 Q -0.8 1.12 -0.52 1.12 L 0.24 1.12 Q 0.7 1.12 0.96 0.84 Q 1.2 0.58 1.12 0.24 Q 1.04 -0.02 0.82 -0.16 Q 0.96 -0.38 0.98 -0.62 Q 0.98 -0.86 0.92 -0.94 Z' },
'6': { d: 'M 0.94 -0.6 Q 0.88 -0.98 0.52 -1.16 Q 0.06 -1.4 -0.44 -1.1 Q -0.94 -0.82 -1.02 -0.22 Q -1.12 0.4 -0.8 0.96 Q -0.48 1.48 0.14 1.48 Q 0.52 1.48 0.82 1.24 Q 1.12 1.02 1.12 0.66 Q 1.12 0.32 0.86 0.1 Q 0.66 -0.08 0.42 -0.08 Q 0.08 -0.08 -0.12 0.18 Q -0.26 0.36 -0.28 0.6 Q -0.5 0.26 -0.48 -0.18 Q -0.46 -0.66 -0.12 -0.86 Q 0.08 -0.98 0.32 -0.9 Q 0.56 -0.82 0.62 -0.58 Q 0.68 -0.34 0.92 -0.32 Q 1.02 -0.32 0.94 -0.6 Z M -0.06 0.6 C 0.12 0.6 0.26 0.44 0.26 0.26 C 0.26 0.08 0.12 -0.08 -0.06 -0.08 C -0.24 -0.08 -0.38 0.08 -0.38 0.26 C -0.38 0.44 -0.24 0.6 -0.06 0.6 Z', fillRule: 'evenodd' },
'7': { d: 'M -0.74 -0.96 Q -0.94 -0.96 -0.94 -0.72 Q -0.94 -0.5 -0.74 -0.5 L 0.2 -0.5 Q 0.46 -0.5 0.52 -0.3 Q 0.58 -0.1 0.42 0.1 L -0.28 1.02 Q -0.42 1.2 -0.22 1.32 Q 0 1.44 0.18 1.28 L 0.98 0.2 Q 1.22 -0.12 1.1 -0.46 Q 0.98 -0.84 0.58 -0.96 Q 0.32 -1.04 0 -1.04 Z' },
'8': { d: 'M 0 -1 C 0.44 -1 0.78 -0.72 0.78 -0.34 C 0.78 0.02 0.46 0.28 0.18 0.36 C 0.46 0.44 0.8 0.66 0.8 1.02 C 0.8 1.44 0.44 1.72 0 1.72 C -0.44 1.72 -0.8 1.44 -0.8 1.02 C -0.8 0.66 -0.48 0.44 -0.2 0.36 C -0.48 0.28 -0.8 0.02 -0.8 -0.34 C -0.8 -0.72 -0.44 -1 -0.02 -1 Z M 0 0.48 C 0.2 0.48 0.34 0.64 0.34 0.84 C 0.34 1.04 0.2 1.18 0 1.18 C -0.2 1.18 -0.34 1.04 -0.34 0.84 C -0.34 0.64 -0.2 0.48 0 0.48 Z M 0 -0.46 C 0.18 -0.46 0.3 -0.64 0.3 -0.8 C 0.3 -0.98 0.18 -1.12 0 -1.12 C -0.18 -1.12 -0.3 -0.98 -0.3 -0.8 C -0.3 -0.64 -0.18 -0.46 0 -0.46 Z', fillRule: 'evenodd' },
'9': { d: 'M 0 -0.72 C 0.42 -0.72 0.7 -0.44 0.7 -0.08 C 0.7 0.2 0.56 0.46 0.32 0.6 C 0.12 0.72 0.1 0.84 0.1 1.06 C 0.1 1.24 -0.16 1.32 -0.28 1.18 L -0.64 0.72 C -0.92 0.38 -1.08 -0.1 -0.96 -0.54 C -0.82 -1.02 -0.46 -1.26 -0.08 -1.26 C 0.14 -1.26 0.32 -1.18 0.48 -1.04 C 0.62 -0.9 0.62 -0.74 0.5 -0.66 C 0.38 -0.58 0.26 -0.66 0.08 -0.74 C -0.14 -0.84 -0.34 -0.68 -0.42 -0.44 C -0.5 -0.24 -0.46 0.04 -0.32 0.26 C -0.16 0.5 0.14 0.46 0.26 0.26 C 0.38 0.06 0.3 -0.1 0.14 -0.18 C 0.02 -0.24 0 -0.42 0.12 -0.52 C 0.2 -0.58 0.46 -0.62 0.64 -0.42 C 0.82 -0.22 0.86 0.02 0.76 0.24 C 0.6 0.58 0.18 0.76 -0.16 0.7 C -0.36 0.66 -0.54 0.56 -0.68 0.42 C -0.64 0.82 -0.44 1.22 -0.14 1.46 C 0.16 1.7 0.54 1.72 0.86 1.52 C 1.26 1.26 1.42 0.84 1.36 0.38 C 1.26 -0.3 0.72 -0.72 0 -0.72 Z', fillRule: 'evenodd' }
};
const shapes = {};
const topperSize = 9.5; // ≈34" foil height when base balloons are ~11"
Object.keys({ ...fallbackPaths, ...NUMBER_IMAGE_MAP }).forEach(num => {
const img = NUMBER_IMAGE_MAP[num];
const hasImage = !!img;
shapes[`topper-num-${num}`] = {
base: hasImage
? { type: 'image', image: img, width: 1, height: 1, radius: 0.9, allowShine: false, transform: 'scale(0.9)' }
: { type: 'path', paths: [{ d: fallbackPaths[num].d, fillRule: fallbackPaths[num].fillRule || 'nonzero' }], radius: r, allowShine: true, transform: baseTransform },
size: topperSize
};
});
return shapes;
}
const numberTopperShapes = buildNumberTopperShapes();
// --- Column 4: This is the existing logic from classic.js, which matches your template file ---
patterns['Column 4'] = {
baseBalloonSize: 25, _reverse: false, balloonsPerCluster: 4,
balloonShapes: {
'front':{zIndex:4, base:{radius:0.5}, size:3}, 'front-inner':{zIndex:3, base:{radius:0.5}, size:3}, 'back-inner':{zIndex:2, base:{radius:0.5}, size:3}, 'back':{zIndex:1, base:{radius:0.5}, size:3},
'topper-round':{base:{type:'ellipse', radius:0.5}, size:8}, 'topper-star':{base:{type:'path', d:roundedStarPath({}), radius:0.5}, size:8}, 'topper-heart':{base:{type:'path', d:'M0,0.35 C-0.5,0, -0.14,-0.35, 0,-0.14 C0.14,-0.35, 0.5,0, 0,0.35 Z', radius:0.5}, size:20}
'topper-round':{base:{type:'ellipse', radius:0.5, allowShine:true}, size:8}, 'topper-star':{base:{type:'path', d:roundedStarPath({}), radius:0.5, allowShine:false}, size:8}, 'topper-heart':{base:{type:'path', d:'M0,0.35 C-0.5,0, -0.14,-0.35, 0,-0.14 C0.14,-0.35, 0.5,0, 0,0.35 Z', radius:0.5, allowShine:false}, size:20},
...numberTopperShapes
},
tile: { size:{x:5,y:1} }, cellsPerRow: 1, cellsPerColumn: 5,
gridX(row, col){ return col + [0, -0.12, -0.24, -0.36, -0.48][col % 5]; },
@ -465,9 +603,10 @@ function distinctPaletteSlots(palette) {
"middle2": { zIndex:2, base:{radius:0.5}, size:3.0 },
"back": { zIndex:1, base:{radius:0.5}, size:3.0 },
"back2": { zIndex:0, base:{radius:0.5}, size:3.0 },
'topper-round':{base:{type:'ellipse', radius:0.5}, size:8},
'topper-star':{base:{type:'path', d:roundedStarPath({}), radius:0.5}, size:8},
'topper-heart':{base:{type:'path', d:'M0,0.35 C-0.5,0, -0.14,-0.35, 0,-0.14 C0.14,-0.35, 0.5,0, 0,0.35 Z', radius:0.5}, size:20}
'topper-round':{base:{type:'ellipse', radius:0.5, allowShine:true}, size:8},
'topper-star':{base:{type:'path', d:roundedStarPath({}), radius:0.5, allowShine:false}, size:8},
'topper-heart':{base:{type:'path', d:'M0,0.35 C-0.5,0, -0.14,-0.35, 0,-0.14 C0.14,-0.35, 0.5,0, 0,0.35 Z', radius:0.5, allowShine:false}, size:20},
...numberTopperShapes
},
gridX(row, col) {
var mid = 0.6;
@ -527,6 +666,7 @@ function distinctPaletteSlots(palette) {
function initClassicColorPicker(onColorChange) {
const slotsContainer = document.getElementById('classic-slots'), topperSwatch = document.getElementById('classic-topper-color-swatch'), swatchGrid = document.getElementById('classic-swatch-grid'), activeLabel = document.getElementById('classic-active-label'), randomizeBtn = document.getElementById('classic-randomize-colors'), addSlotBtn = document.getElementById('classic-add-slot');
const numberTintSlider = document.getElementById('classic-number-tint');
const topperBlock = document.getElementById('classic-topper-color-block');
if (!slotsContainer || !topperSwatch || !swatchGrid || !activeLabel) return;
topperSwatch.classList.add('tab-btn');
@ -583,11 +723,22 @@ function distinctPaletteSlots(palette) {
});
const topperColor = getTopperColor();
topperSwatch.style.backgroundImage = topperColor.image ? `url("${topperColor.image}")` : 'none';
topperSwatch.style.backgroundColor = topperColor.hex;
topperSwatch.style.backgroundSize = '200%';
topperSwatch.style.backgroundPosition = 'center';
const topperTxt = textStyleForColor(topperColor);
const currentType = document.querySelector('.topper-type-btn[aria-pressed="true"]')?.dataset.type || 'round';
const tintColor = getNumberTintColor();
if (currentType.startsWith('num-') && topperColor.image) {
topperSwatch.style.backgroundImage = `linear-gradient(${tintColor}99, ${tintColor}99), url("${topperColor.image}")`;
topperSwatch.style.backgroundBlendMode = 'multiply, normal';
topperSwatch.style.backgroundSize = '220%';
topperSwatch.style.backgroundPosition = 'center';
topperSwatch.style.backgroundColor = tintColor;
} else {
topperSwatch.style.backgroundImage = topperColor.image ? `url("${topperColor.image}")` : 'none';
topperSwatch.style.backgroundBlendMode = 'normal';
topperSwatch.style.backgroundColor = topperColor.hex;
topperSwatch.style.backgroundSize = '200%';
topperSwatch.style.backgroundPosition = 'center';
}
const topperTxt = textStyleForColor({ hex: tintColor || topperColor.hex, image: topperColor.image });
topperSwatch.style.color = topperTxt.color;
topperSwatch.style.textShadow = topperTxt.shadow;
const patName = (document.getElementById('classic-pattern')?.value || '').toLowerCase();
@ -625,8 +776,15 @@ function distinctPaletteSlots(palette) {
sw.addEventListener('click', () => {
const selectedColor = { hex: colorItem.hex, image: colorItem.image };
if (activeTarget === 'T') setTopperColor(selectedColor);
else {
if (activeTarget === 'T') {
const currentType = document.querySelector('.topper-type-btn[aria-pressed="true"]')?.dataset.type || 'round';
if (currentType.startsWith('num-')) {
setNumberTintColor(selectedColor.hex);
if (numberTintSlider) numberTintSlider.value = getNumberTintOpacity();
} else {
setTopperColor(selectedColor);
}
} else {
const index = parseInt(activeTarget, 10) - 1;
if (index >= 0 && index < MAX_SLOTS) { classicColors[index] = selectedColor; setClassicColors(classicColors); }
}
@ -672,6 +830,9 @@ function distinctPaletteSlots(palette) {
try {
if (typeof window.m === 'undefined') return fail('Mithril not loaded');
const display = document.getElementById('classic-display'), patSel = document.getElementById('classic-pattern'), lengthInp = document.getElementById('classic-length-ft'), clusterHint = document.getElementById('classic-cluster-hint'), reverseCb = document.getElementById('classic-reverse'), topperControls = document.getElementById('topper-controls'), topperToggleRow = document.getElementById('classic-topper-toggle-row'), topperEnabledCb = document.getElementById('classic-topper-enabled'), topperSizeInp = document.getElementById('classic-topper-size'), shineEnabledCb = document.getElementById('classic-shine-enabled'), borderEnabledCb = document.getElementById('classic-border-enabled');
const numberTintRow = document.getElementById('classic-number-tint-row'), numberTintSlider = document.getElementById('classic-number-tint');
const nudgeOpenBtn = document.getElementById('classic-nudge-open');
const fullscreenBtn = document.getElementById('app-fullscreen-toggle');
const patternShapeBtns = Array.from(document.querySelectorAll('[data-pattern-shape]'));
const patternCountBtns = Array.from(document.querySelectorAll('[data-pattern-count]'));
const patternLayoutBtns = Array.from(document.querySelectorAll('[data-pattern-layout]'));
@ -680,13 +841,18 @@ function distinctPaletteSlots(palette) {
const slotsContainer = document.getElementById('classic-slots');
let topperOffsetX = 0, topperOffsetY = 0;
let lastPresetKey = null; // 'custom' means user-tweaked; otherwise `${pattern}:${type}`
window.ClassicDesigner = window.ClassicDesigner || {};
window.ClassicDesigner.lastTopperType = window.ClassicDesigner.lastTopperType || 'round';
if (numberTintSlider) numberTintSlider.value = getNumberTintOpacity();
const topperPresets = {
'Column 4:heart': { enabled: true, offsetX: 3, offsetY: -10.5, size: 1.05 },
'Column 4:star': { enabled: true, offsetX: 3, offsetY: -7.5, size: 1.65 },
'Column 4:round': { enabled: true, offsetX: 3, offsetY: -2, size: 1.25 },
'Column 4:number': { enabled: true, offsetX: 3, offsetY: -7, size: 1.05 },
'Column 5:heart': { enabled: true, offsetX: 2, offsetY: -10, size: 1.15 },
'Column 5:star': { enabled: true, offsetX: 2.5, offsetY: -7.5, size: 1.75 },
'Column 5:round': { enabled: true, offsetX: 2.5, offsetY: -2, size: 1.3 }
'Column 5:round': { enabled: true, offsetX: 2.5, offsetY: -2, size: 1.3 },
'Column 5:number': { enabled: true, offsetX: 2.5, offsetY: -6.5, size: 1.05 }
};
if (!display) return fail('#classic-display not found');
const GC = GridCalculator(), ctrl = GC.controller(display);
@ -700,10 +866,31 @@ function distinctPaletteSlots(palette) {
btn.classList.toggle('tab-active', active);
btn.classList.toggle('tab-idle', !active);
});
window.ClassicDesigner.lastTopperType = type;
};
function applyNumberTopperTexture(type) {
if (!type || !type.startsWith('num-')) return;
const num = type.split('-')[1];
if (!num) return;
const imgPath = NUMBER_IMAGE_MAP[num];
if (imgPath) setTopperColor({ hex: '#ffffff', image: imgPath });
else setTopperColor({ hex: '#d4d4d8', image: null }); // fallback silver fill if image missing
refreshClassicPaletteUi?.();
}
function resetNonNumberTopperColor(type) {
if (type && type.startsWith('num-')) return;
const fallback = getTopperColor();
// If last topper type was a number, strip image to avoid leaking photo texture.
if (fallback?.image && Object.values(NUMBER_IMAGE_MAP).includes(fallback.image)) {
setTopperColor({ hex: fallback.hex || '#ffffff', image: null });
refreshClassicPaletteUi?.();
}
}
function applyTopperPreset(patternName, type) {
const key = `${patternName}:${type}`;
const presetType = (type || '').startsWith('num-') ? 'number' : type;
const key = `${patternName}:${presetType}`;
const preset = topperPresets[key];
if (!preset) return;
if (lastPresetKey === key || lastPresetKey === 'custom') return;
@ -712,6 +899,8 @@ function distinctPaletteSlots(palette) {
if (topperSizeInp) topperSizeInp.value = preset.size;
if (topperEnabledCb) topperEnabledCb.checked = preset.enabled;
setTopperType(type);
applyNumberTopperTexture(type);
resetNonNumberTopperColor(type);
lastPresetKey = key;
}
@ -740,6 +929,42 @@ function distinctPaletteSlots(palette) {
setActive(patternLayoutBtns, 'patternLayout', patternLayout);
};
syncPatternStateFromSelect();
function persistState() {
const state = {
patternName: patSel?.value || '',
length: lengthInp?.value || '',
reverse: !!reverseCb?.checked,
topperEnabled: !!topperEnabledCb?.checked,
topperType: getTopperType(),
topperOffsetX,
topperOffsetY,
topperSize: topperSizeInp?.value || '',
numberTint: numberTintSlider ? numberTintSlider.value : getNumberTintOpacity()
};
saveClassicState(state);
}
function applySavedState() {
const saved = loadClassicState();
if (!saved) return;
if (patSel && saved.patternName) patSel.value = saved.patternName;
if (lengthInp && saved.length) lengthInp.value = saved.length;
if (reverseCb) reverseCb.checked = !!saved.reverse;
if (topperEnabledCb) topperEnabledCb.checked = !!saved.topperEnabled;
if (typeof saved.topperOffsetX === 'number') topperOffsetX = saved.topperOffsetX;
if (typeof saved.topperOffsetY === 'number') topperOffsetY = saved.topperOffsetY;
if (topperSizeInp && saved.topperSize) topperSizeInp.value = saved.topperSize;
if (saved.topperType) setTopperType(saved.topperType);
if (numberTintSlider && typeof saved.numberTint !== 'undefined') {
numberTintSlider.value = saved.numberTint;
setNumberTintOpacity(saved.numberTint);
}
syncPatternStateFromSelect();
lastPresetKey = 'custom';
}
applySavedState();
applyPatternButtons();
function updateClassicDesign() {
@ -755,13 +980,19 @@ function distinctPaletteSlots(palette) {
}
if (topperToggleRow) topperToggleRow.classList.toggle('hidden', !showToggle);
const showTopper = showToggle && topperEnabledCb?.checked;
const isNumberTopper = getTopperType().startsWith('num-');
topperControls.classList.toggle('hidden', !showTopper);
if (numberTintRow) numberTintRow.classList.toggle('hidden', !(showTopper && isNumberTopper));
if (nudgeOpenBtn) nudgeOpenBtn.classList.toggle('hidden', !showTopper);
GC.setTopperEnabled(showTopper);
GC.setClusters(Math.round((parseFloat(lengthInp.value) || 0) * 2));
GC.setReverse(!!reverseCb?.checked);
GC.setTopperType(getTopperType());
GC.setNumberTintHex(getNumberTintColor());
GC.setNumberTintOpacity(numberTintSlider ? numberTintSlider.value : getNumberTintOpacity());
applyNumberTopperTexture(getTopperType());
GC.setTopperOffsetX(topperOffsetX);
GC.setTopperOffsetY(topperOffsetY);
GC.setTopperSize(topperSizeInp?.value);
@ -775,6 +1006,7 @@ function distinctPaletteSlots(palette) {
if(clusterHint) clusterHint.textContent = `≈ ${Math.round((parseFloat(lengthInp.value) || 0) * 2)} clusters (rule: 2 clusters/ft)`;
refreshClassicPaletteUi?.();
ctrl.selectPattern(patternName);
persistState();
}
const setLengthForPattern = () => {
@ -812,9 +1044,38 @@ function distinctPaletteSlots(palette) {
}));
topperTypeButtons.forEach(btn => btn.addEventListener('click', () => {
setTopperType(btn.dataset.type);
applyNumberTopperTexture(btn.dataset.type);
resetNonNumberTopperColor(btn.dataset.type);
lastPresetKey = null;
updateClassicDesign();
}));
numberTintSlider?.addEventListener('input', () => {
GC.setNumberTintOpacity(numberTintSlider.value);
updateClassicDesign();
});
nudgeOpenBtn?.addEventListener('click', (e) => {
e.preventDefault();
window.__showFloatingNudge?.();
});
const updateFullscreenLabel = () => {
if (!fullscreenBtn) return;
const active = !!document.fullscreenElement;
fullscreenBtn.textContent = active ? 'Exit Fullscreen' : 'Fullscreen';
};
fullscreenBtn?.addEventListener('click', async () => {
try {
if (!document.fullscreenElement) {
await document.documentElement.requestFullscreen({ navigationUI: 'hide' });
} else {
await document.exitFullscreen();
}
} catch (err) {
console.error('Fullscreen toggle failed', err);
} finally {
updateFullscreenLabel();
}
});
document.addEventListener('fullscreenchange', updateFullscreenLabel);
[lengthInp, reverseCb, topperEnabledCb, topperSizeInp]
.forEach(el => { if (!el) return; const eventType = (el.type === 'range' || el.type === 'number') ? 'input' : 'change'; el.addEventListener(eventType, () => { if (el === topperSizeInp || el === topperEnabledCb) lastPresetKey = 'custom'; updateClassicDesign(); }); });
topperEnabledCb?.addEventListener('change', updateClassicDesign);
@ -827,7 +1088,11 @@ function distinctPaletteSlots(palette) {
});
refreshClassicPaletteUi = initClassicColorPicker(updateClassicDesign);
try { const saved = localStorage.getItem('app:shineEnabled:v1'); if (saved !== null && shineEnabledCb) shineEnabledCb.checked = JSON.parse(saved); } catch {}
try { const saved = localStorage.getItem('classic:borderEnabled:v1'); if (saved !== null && borderEnabledCb) borderEnabledCb.checked = JSON.parse(saved); } catch {}
try {
const saved = localStorage.getItem('classic:borderEnabled:v1');
if (saved !== null && borderEnabledCb) borderEnabledCb.checked = JSON.parse(saved);
else if (borderEnabledCb) borderEnabledCb.checked = true; // default to outline on
} catch { if (borderEnabledCb) borderEnabledCb.checked = true; }
setLengthForPattern();
updateClassicDesign();
refreshClassicPaletteUi?.();

29
index.html
View File

@ -45,6 +45,7 @@
<span id="current-color-label-global" class="text-[10px] font-semibold text-slate-700"></span>
</div>
</div>
<button id="app-fullscreen-toggle" class="btn-dark text-xs px-3 py-2" aria-label="Toggle fullscreen">Fullscreen</button>
<button id="clear-canvas-btn-top" class="btn-danger text-xs px-3 py-2">Start Fresh</button>
</div>
</div>
@ -300,11 +301,37 @@
<button type="button" class="tab-btn topper-type-btn tab-idle" data-type="star" aria-pressed="false"><i class="fa-solid fa-star"></i><span class="hidden sm:inline">Star</span></button>
<button type="button" class="tab-btn topper-type-btn tab-idle" data-type="heart" aria-pressed="false"><i class="fa-solid fa-heart"></i><span class="hidden sm:inline">Heart</span></button>
</div>
<div class="mt-2">
<div class="text-xs font-semibold text-gray-600 mb-1">Numbers</div>
<div class="topper-number-grid">
<button type="button" class="tab-btn topper-type-btn topper-number-btn tab-idle" data-type="num-0" aria-pressed="false">0</button>
<button type="button" class="tab-btn topper-type-btn topper-number-btn tab-idle" data-type="num-1" aria-pressed="false">1</button>
<button type="button" class="tab-btn topper-type-btn topper-number-btn tab-idle" data-type="num-2" aria-pressed="false">2</button>
<button type="button" class="tab-btn topper-type-btn topper-number-btn tab-idle" data-type="num-3" aria-pressed="false">3</button>
<button type="button" class="tab-btn topper-type-btn topper-number-btn tab-idle" data-type="num-4" aria-pressed="false">4</button>
<button type="button" class="tab-btn topper-type-btn topper-number-btn tab-idle" data-type="num-5" aria-pressed="false">5</button>
<button type="button" class="tab-btn topper-type-btn topper-number-btn tab-idle" data-type="num-6" aria-pressed="false">6</button>
<button type="button" class="tab-btn topper-type-btn topper-number-btn tab-idle" data-type="num-7" aria-pressed="false">7</button>
<button type="button" class="tab-btn topper-type-btn topper-number-btn tab-idle" data-type="num-8" aria-pressed="false">8</button>
<button type="button" class="tab-btn topper-type-btn topper-number-btn tab-idle" data-type="num-9" aria-pressed="false">9</button>
</div>
</div>
</div>
<div class="sm:col-span-2">
<div class="text-sm font-medium mb-1">Topper Size</div>
<input id="classic-topper-size" type="range" min="0.5" max="2" step="0.05" value="1" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
</div>
<div id="classic-number-tint-row" class="sm:col-span-2 hidden number-tint-row">
<div class="number-tint-header">
<div class="text-sm font-semibold text-gray-700">Number Tint</div>
<span class="text-xs text-gray-500">Soft overlay for photo digits</span>
</div>
<input id="classic-number-tint" type="range" min="0" max="1" step="0.05" value="0.5" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
<p class="hint">Pick a color in Classic Colors, select Topper (T), then adjust strength.</p>
</div>
<div class="sm:col-span-2 flex flex-wrap gap-2 justify-end">
<button type="button" id="classic-nudge-open" class="btn-dark text-xs px-3 py-2">Nudge Panel</button>
</div>
</div>
<div class="text-xs text-gray-500">
@ -372,7 +399,7 @@
<div id="floating-topper-nudge" class="floating-nudge hidden">
<div class="floating-nudge-header">
<div class="panel-heading">Nudge Topper</div>
<button type="button" id="floating-nudge-toggle" class="btn-dark text-xs px-3 py-2">Hide</button>
<button type="button" id="floating-nudge-toggle" class="btn-dark text-xs px-3 py-2" aria-label="Close nudge panel">×</button>
</div>
<div class="floating-nudge-body">
<div class="grid grid-cols-3 gap-2">

BIN
output_webp/0.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
output_webp/1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
output_webp/2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
output_webp/3.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
output_webp/4.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
output_webp/5.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
output_webp/6.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

BIN
output_webp/7.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
output_webp/8.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

BIN
output_webp/9.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

134
script.js
View File

@ -186,7 +186,7 @@
let currentDiameterInches = 11;
let currentRadius = inchesToRadiusPx(currentDiameterInches);
let isShineEnabled = true; // will be initialized from localStorage
let isBorderEnabled = false;
let isBorderEnabled = true;
let dpr = 1;
let mode = 'draw';
@ -1136,17 +1136,20 @@
type: 'filler'
});
// Accent cluster of three 5" balloons to add texture
if (rng() < Math.min(0.8, 0.35 * garlandDensity + 0.1)) {
const clusterCenterX = baseX + nx * r * 0.4 * side;
const clusterCenterY = baseY + ny * r * 0.4 * side;
// Tight cluster of three 5" balloons, slightly more open
{
const clusterCenterX = baseX + nx * r * 0.25 * side;
const clusterCenterY = baseY + ny * r * 0.25 * side;
const baseAng = rng() * Math.PI * 2;
const mags = [0.7, 0.95, 0.8].map(m => m * accentRadius);
const angs = [baseAng, baseAng + (2 * Math.PI / 3), baseAng + (4 * Math.PI / 3)];
for (let c = 0; c < 3; c++) {
const ang = rng() * Math.PI * 2;
const mag = accentRadius * (0.8 + rng() * 0.5);
const mag = mags[c] * (0.98 + rng() * 0.08);
const jitterAng = angs[c] + (rng() * 0.25 - 0.125);
nodes.push({
x: clusterCenterX + Math.cos(ang) * mag,
y: clusterCenterY + Math.sin(ang) * mag,
radius: accentRadius * (0.85 + rng() * 0.25),
x: clusterCenterX + Math.cos(jitterAng) * mag,
y: clusterCenterY + Math.sin(jitterAng) * mag,
radius: accentRadius * (0.88 + rng() * 0.15),
type: 'accent'
});
}
@ -2156,19 +2159,75 @@
}
window.__setMobileTab = setMobileTab;
const NUDGE_POS_KEY = 'classic:nudgePos:v1';
const NUDGE_MARGIN = 12;
const NUDGE_SIZE_HINT = { w: 180, h: 200 };
let floatingNudgeCollapsed = false;
function clampNudgePos(pos, el) {
const vw = window.innerWidth || 1024;
const vh = window.innerHeight || 768;
const rect = el?.getBoundingClientRect();
const w = rect?.width || NUDGE_SIZE_HINT.w;
const h = rect?.height || NUDGE_SIZE_HINT.h;
return {
x: Math.min(Math.max(pos.x, NUDGE_MARGIN), Math.max(NUDGE_MARGIN, vw - w - NUDGE_MARGIN)),
y: Math.min(Math.max(pos.y, NUDGE_MARGIN), Math.max(NUDGE_MARGIN, vh - h - NUDGE_MARGIN))
};
}
let nudgePos = null;
let nudgePosInitialized = false;
function loadNudgePos(el) {
try {
const saved = JSON.parse(localStorage.getItem(NUDGE_POS_KEY));
if (saved && typeof saved.x === 'number' && typeof saved.y === 'number') return clampNudgePos(saved, el);
} catch {}
return clampNudgePos({ x: (window.innerWidth || 1024) - 240, y: 120 }, el);
}
function ensureNudgePos(el) {
if (!nudgePos) nudgePos = loadNudgePos(el);
return clampNudgePos(nudgePos, el);
}
function saveNudgePos(pos, el) {
nudgePos = clampNudgePos(pos, el);
try { localStorage.setItem(NUDGE_POS_KEY, JSON.stringify(nudgePos)); } catch {}
return nudgePos;
}
function applyNudgePos(el, pos) {
const p = clampNudgePos(pos || ensureNudgePos(el), el);
el.style.left = `${p.x}px`;
el.style.top = `${p.y}px`;
el.style.right = 'auto';
el.style.bottom = 'auto';
nudgePos = p;
nudgePosInitialized = true;
}
function updateFloatingNudge() {
const el = document.getElementById('floating-topper-nudge');
if (!el) return;
const classicActive = document.body?.dataset.activeTab === '#tab-classic';
const topperActive = document.body?.dataset.topperOverlay === '1';
const shouldShow = classicActive && topperActive;
el.classList.toggle('hidden', !shouldShow);
const shouldShowPanel = shouldShow && !floatingNudgeCollapsed;
el.classList.toggle('hidden', !shouldShowPanel);
el.classList.toggle('collapsed', floatingNudgeCollapsed);
const toggle = document.getElementById('floating-nudge-toggle');
if (toggle) toggle.textContent = floatingNudgeCollapsed ? 'Show' : 'Hide';
el.style.display = shouldShowPanel ? 'block' : 'none';
if (shouldShowPanel && !nudgePosInitialized) applyNudgePos(el, ensureNudgePos(el));
}
function showFloatingNudge() {
floatingNudgeCollapsed = false;
updateFloatingNudge();
}
function hideFloatingNudge() {
floatingNudgeCollapsed = true;
const nudge = document.getElementById('floating-topper-nudge');
if (nudge) { nudge.classList.add('hidden'); nudge.style.display = 'none'; }
const tab = document.getElementById('floating-nudge-tab');
if (tab) tab.classList.remove('hidden');
updateFloatingNudge();
}
window.__updateFloatingNudge = updateFloatingNudge;
window.__showFloatingNudge = showFloatingNudge;
window.__hideFloatingNudge = hideFloatingNudge;
if (orgSection && claSection && tabBtns.length > 0) {
let current = '#tab-organic';
@ -2200,6 +2259,11 @@
}
if (document.body) delete document.body.dataset.controlsHidden;
// Toggle header controls based on tab
const isOrganic = id === '#tab-organic';
document.getElementById('clear-canvas-btn-top')?.classList.toggle('hidden', !isOrganic);
const headerActiveSwatch = document.getElementById('current-color-chip-global')?.closest('.flex');
headerActiveSwatch?.classList.toggle('hidden', !isOrganic);
setMobileTab(document.body?.dataset?.mobileTab || 'controls');
orgSheet?.classList.toggle('hidden', id !== '#tab-organic');
claSheet?.classList.toggle('hidden', id !== '#tab-classic');
@ -2270,9 +2334,49 @@
const nudgeToggle = document.getElementById('floating-nudge-toggle');
nudgeToggle?.addEventListener('click', () => {
floatingNudgeCollapsed = !floatingNudgeCollapsed;
updateFloatingNudge();
hideFloatingNudge();
});
// Dragging for floating nudge
const nudge = document.getElementById('floating-topper-nudge');
const nudgeHeader = document.querySelector('#floating-topper-nudge .floating-nudge-header');
if (nudge && nudgeHeader) {
let dragId = null;
let start = null;
nudgeHeader.addEventListener('pointerdown', (e) => {
if (e.target.closest('#floating-nudge-toggle')) return; // don't start drag when clicking close
dragId = e.pointerId;
start = { x: e.clientX, y: e.clientY, pos: loadNudgePos(nudge) };
nudge.classList.add('dragging');
nudgeHeader.setPointerCapture(dragId);
});
nudgeHeader.addEventListener('pointermove', (e) => {
if (dragId === null || e.pointerId !== dragId) return;
if (!start) return;
const dx = e.clientX - start.x;
const dy = e.clientY - start.y;
const next = clampNudgePos({ x: start.pos.x + dx, y: start.pos.y + dy });
applyNudgePos(nudge, next);
});
const endDrag = (e) => {
if (dragId === null || e.pointerId !== dragId) return;
const rect = nudge.getBoundingClientRect();
const next = clampNudgePos({ x: rect.left, y: rect.top }, nudge);
saveNudgePos(next, nudge);
nudge.classList.remove('dragging');
dragId = null;
start = null;
try { nudgeHeader.releasePointerCapture(e.pointerId); } catch {}
};
nudgeHeader.addEventListener('pointerup', endDrag);
nudgeHeader.addEventListener('pointercancel', endDrag);
window.addEventListener('resize', () => {
const pos = clampNudgePos(loadNudgePos(nudge), nudge);
saveNudgePos(pos, nudge);
nudgePosInitialized = false;
applyNudgePos(nudge, pos);
});
}
})();
});
})();

59
style.css
View File

@ -200,6 +200,31 @@ body { color: #1f2937; }
gap: .4rem;
}
.topper-type-btn i { font-size: 1rem; }
.topper-number-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0.35rem;
margin-top: 0.4rem;
}
.topper-number-btn {
padding: 0.4rem 0.5rem;
font-weight: 800;
}
.number-tint-row {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.65rem 0.75rem;
background: rgba(255,255,255,0.7);
border: 1px solid rgba(226, 232, 240, 0.9);
border-radius: 0.85rem;
}
.number-tint-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.floating-nudge {
position: fixed;
@ -208,21 +233,31 @@ body { color: #1f2937; }
background: rgba(255,255,255,0.95);
border: 1px solid rgba(148,163,184,0.3);
border-radius: 1rem;
padding: 0.75rem;
padding: 0.55rem;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
width: 210px;
width: 180px;
max-width: 85vw;
z-index: 35;
touch-action: none;
}
.floating-nudge-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
margin-bottom: .35rem;
gap: .35rem;
margin-bottom: .25rem;
}
.floating-nudge-body.collapsed { display: none; }
.floating-nudge.collapsed .floating-nudge-body { display: none; }
.floating-nudge.collapsed #floating-nudge-toggle { opacity: 0.8; }
.floating-nudge.dragging { cursor: grabbing; }
.floating-nudge .panel-heading { font-size: 0.95rem; margin-bottom: 0; }
.floating-nudge .btn-dark { padding: 0.35rem 0.5rem; font-size: 0.8rem; }
.floating-nudge-tab { display: none; }
@media (max-width: 1023px) {
.floating-nudge { bottom: 6rem; left: auto; right: 0.9rem; }
}
.slot-label {
font-weight: 600;
@ -301,8 +336,8 @@ body { color: #1f2937; }
}
@media (max-width: 1023px) {
body { padding-bottom: 88px; }
html, body { height: 100%; overflow: hidden; }
body { padding-bottom: 0; overflow: auto; }
html, body { height: auto; overflow: auto; }
.control-sheet .control-stack { display: none; }
body[data-mobile-tab="controls"] #controls-panel [data-mobile-tab="controls"],
@ -380,3 +415,15 @@ body { color: #1f2937; }
}
body { padding-bottom: 0; overflow: auto; }
}
/* Compact viewport fallback */
@media (max-height: 760px) {
body { overflow: auto; }
.control-sheet {
position: static;
max-height: none;
}
.floating-nudge {
bottom: 1rem;
}
}