function TerminalColorMockup({ width = 600 } = {}) { // Create a div for the color extractor const colorExtractorContainer = html`

`; // Terminal container const terminalContainer = html`

`; const d3Container = html``; const paletteType = html`

Color Palette Type: Dominant Colors Complementary Colors

`; // Color info display const colorInfoDisplay = html`

Terminal Colors:

`; // Create container for the widget const container = html`

Upload an image to extract colors for the terminal:

${colorExtractorContainer} ${paletteType}

~ Your Customized Terminal ~

${terminalContainer}

~ Color Pick ~

${d3Container}

`; // Initialize with default colors const defaultColors = { background: '#282C34', text: '#ABB2BF', directory1: '#E5C07B', directory2: '#61AFEF', directory3: '#98C379', branch: '#C678DD', status: '#56B6C2', question: '#A9B2C3' }; // Render terminal with the given colors function renderTerminal(colors) { // Calculate text color based on background brightness function getBrightness(hexColor) { const r = parseInt(hexColor.slice(1, 3), 16); const g = parseInt(hexColor.slice(3, 5), 16); const b = parseInt(hexColor.slice(5, 7), 16); return (r * 299 + g * 587 + b * 114) / 1000; } // If background is dark, use light text, and vice versa const textColor = getBrightness(colors.background) < 128 ? colors.text : '#333333'; // Update terminal container styles terminalContainer.style.backgroundColor = colors.background; terminalContainer.style.color = textColor; // Create terminal content terminalContainer.innerHTML = `

... / Pneumonia-Detection ᛘ main ⤻

2s510ms 21:42

❯ git pull

Already up to date.

... / Pneumonia-Detection ᛘ main ⤻ ?

23:12

❯ git lfs pull

... / Pneumonia-Detection ᛘ main ⤻ ?

23:13

❯ git pull

remote: Enumerating objects: 5, done.

`; // Update color info display updateColorInfoDisplay(colors); } // Function to update the color info display function updateColorInfoDisplay(colors) { const colorSwatchesContainer = colorInfoDisplay.querySelector('.color-swatches'); colorSwatchesContainer.innerHTML = ''; // Create swatches for each color Object.entries(colors).forEach(([name, color]) => { const swatch = document.createElement('div'); swatch.className = 'color-swatch'; const colorBox = document.createElement('div'); colorBox.className = 'swatch'; colorBox.style.backgroundColor = color; const label = document.createElement('div'); label.textContent = `${name}: ${color}`; swatch.appendChild(colorBox); swatch.appendChild(label); colorSwatchesContainer.appendChild(swatch); }); // D3 render: Visualize the current terminal palette const colorArray = Object.entries(colors); // Clear existing SVG content d3.select(d3Container).selectAll("*").remove(); // Create a D3 group for each color const circleRadius = 12; const padding = 20; const svg = d3.select(d3Container); const g = svg.selectAll("g") .data(colorArray) .enter() .append("g") .attr("transform", (_, i) => `translate(${i * (circleRadius * 2 + padding) + padding}, 25)`); // Append color circles g.append("circle") .attr("r", circleRadius) .attr("fill", d => d[1]) .attr("stroke", "#444") .attr("stroke-width", 1.5); // Add text labels below each color g.append("text") .text(d => d[0]) .attr("y", 25) .attr("text-anchor", "middle") .attr("font-size", "7px") .attr("fill", "#666"); } // Function to map colors from the extractor to terminal elements function mapExtractedColorsToTerminal(colors) { // This assumes colors is an array of objects with hex property if (!colors || colors.length === 0) { return defaultColors; } // Sort colors by brightness const sortedColors = [...colors].sort((a, b) => { const aColor = a.hex; const bColor = b.hex; const getBrightness = (hexColor) => { const r = parseInt(hexColor.slice(1, 3), 16); const g = parseInt(hexColor.slice(3, 5), 16); const b = parseInt(hexColor.slice(5, 7), 16); return (r * 299 + g * 587 + b * 114) / 1000; }; return getBrightness(aColor) - getBrightness(bColor); }); // Ensure we have enough colors while (sortedColors.length < 8) { // Duplicate last color with slight variation const lastColor = sortedColors[sortedColors.length - 1]; sortedColors.push({...lastColor}); } // Map colors to terminal elements return { background: sortedColors[0].hex, // Darkest color for background text: sortedColors[7].hex, // Lightest color for text directory1: sortedColors[5].hex, // Directory level 1 directory2: sortedColors[4].hex, // Directory level 2 directory3: sortedColors[3].hex, // Directory level 3 branch: sortedColors[6].hex, // Branch name status: sortedColors[2].hex, // Status indicator question: sortedColors[1].hex // Question mark }; } // Initialize the terminal with default colors renderTerminal(defaultColors); // Create an instance of your ImageColorExtractor widget const colorExtractor = ImageColorExtractor({ width: 200 }); // Add the color extractor to our container colorExtractorContainer.appendChild(colorExtractor); // Set up a MutationObserver to watch for changes in the color extractor // This is a workaround since we need to observe when new colors are generated const observer = new MutationObserver((mutations) => { // Get the currently selected palette type const selectedPaletteType = document.querySelector('input[name="palette-type"]:checked').value; // Look for the appropriate palette container in the DOM const dominantPaletteContainer = colorExtractor.querySelector('.palette-container'); const complementaryPaletteContainer = colorExtractor.querySelectorAll('.palette-container')[1]; // Select the container based on the palette type const selectedContainer = selectedPaletteType === 'dominant' ? dominantPaletteContainer : complementaryPaletteContainer; if (selectedContainer && selectedContainer.children.length > 0) { // Extract the hex values from the color swatches const extractedColors = Array.from(selectedContainer.children).map(swatch => { const hexEl = swatch.querySelector('.color-hex'); return { hex: hexEl ? hexEl.textContent : '#FFFFFF' }; }); // Map these colors to our terminal const terminalColors = mapExtractedColorsToTerminal(extractedColors); // Render the terminal with these colors renderTerminal(terminalColors); } }); // Start observing the color extractor for DOM changes observer.observe(colorExtractor, { childList: true, subtree: true }); // Add event listener for palette type change document.querySelectorAll('input[name="palette-type"]').forEach(radio => { radio.addEventListener('change', () => { // Trigger a re-calculation of the colors const paletteContainers = colorExtractor.querySelectorAll('.palette-container'); if (paletteContainers.length > 1) { // Get the currently selected palette type const selectedPaletteType = document.querySelector('input[name="palette-type"]:checked').value; // Select the container based on the palette type const selectedContainer = selectedPaletteType === 'dominant' ? paletteContainers[0] : paletteContainers[1]; if (selectedContainer && selectedContainer.children.length > 0) { // Extract the hex values from the color swatches const extractedColors = Array.from(selectedContainer.children).map(swatch => { const hexEl = swatch.querySelector('.color-hex'); return { hex: hexEl ? hexEl.textContent : '#FFFFFF' }; }); // Map these colors to our terminal const terminalColors = mapExtractedColorsToTerminal(extractedColors); // Render the terminal with these colors renderTerminal(terminalColors); } } }); }); return container; }

Purpose-built for displays of data