Convert app to Flask web application with color pickers
- Created Flask backend with REST API endpoints - Built HTML/CSS/JavaScript frontend - Replaced RGB sliders with color pickers for each palette color - Reorganized layout: color palette on left, patterns on right - Added persistence for color changes - Integrated WebSocket client for lighting controller communication - Added tab management, profile support, and pattern selection
This commit is contained in:
571
static/app.js
Normal file
571
static/app.js
Normal file
@@ -0,0 +1,571 @@
|
||||
// Lighting Controller Web App
|
||||
class LightingController {
|
||||
constructor() {
|
||||
this.currentTab = null;
|
||||
this.state = {
|
||||
lights: {},
|
||||
patterns: {},
|
||||
tab_order: []
|
||||
};
|
||||
this.selectedColorIndex = 0;
|
||||
this.updateTimeouts = {};
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
async init() {
|
||||
await this.loadState();
|
||||
this.setupEventListeners();
|
||||
this.renderTabs();
|
||||
if (this.state.tab_order.length > 0) {
|
||||
this.selectTab(this.state.tab_order[0]);
|
||||
}
|
||||
}
|
||||
|
||||
async loadState() {
|
||||
try {
|
||||
const response = await fetch('/api/state');
|
||||
const data = await response.json();
|
||||
this.state = data;
|
||||
} catch (error) {
|
||||
console.error('Failed to load state:', error);
|
||||
}
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Tab management
|
||||
document.getElementById('add-tab-btn').addEventListener('click', () => this.showAddTabModal());
|
||||
document.getElementById('edit-tab-btn').addEventListener('click', () => this.showEditTabModal());
|
||||
document.getElementById('delete-tab-btn').addEventListener('click', () => this.deleteCurrentTab());
|
||||
document.getElementById('profiles-btn').addEventListener('click', () => this.showProfiles());
|
||||
|
||||
// Modal actions
|
||||
document.getElementById('add-tab-confirm').addEventListener('click', () => this.createTab());
|
||||
document.getElementById('add-tab-cancel').addEventListener('click', () => this.hideModal('add-tab-modal'));
|
||||
document.getElementById('edit-tab-confirm').addEventListener('click', () => this.updateTab());
|
||||
document.getElementById('edit-tab-cancel').addEventListener('click', () => this.hideModal('edit-tab-modal'));
|
||||
|
||||
// Brightness and delay sliders
|
||||
document.getElementById('brightness-slider').addEventListener('input', (e) => {
|
||||
document.getElementById('brightness-value').textContent = e.target.value;
|
||||
this.debounceUpdate('brightness', () => this.updateBrightness());
|
||||
});
|
||||
document.getElementById('delay-slider').addEventListener('input', (e) => {
|
||||
this.updateDelayValue(e.target.value);
|
||||
this.debounceUpdate('delay', () => this.updateDelay());
|
||||
});
|
||||
|
||||
// N parameters
|
||||
for (let i = 1; i <= 4; i++) {
|
||||
document.getElementById(`n${i}-input`).addEventListener('input', (e) => {
|
||||
this.debounceUpdate('nparams', () => this.updateNParams());
|
||||
});
|
||||
}
|
||||
|
||||
// Color palette
|
||||
document.getElementById('add-color-btn').addEventListener('click', () => this.addColorToPalette());
|
||||
document.getElementById('remove-color-btn').addEventListener('click', () => this.removeSelectedColor());
|
||||
|
||||
// Close modals on outside click
|
||||
document.getElementById('add-tab-modal').addEventListener('click', (e) => {
|
||||
if (e.target.id === 'add-tab-modal') this.hideModal('add-tab-modal');
|
||||
});
|
||||
document.getElementById('edit-tab-modal').addEventListener('click', (e) => {
|
||||
if (e.target.id === 'edit-tab-modal') this.hideModal('edit-tab-modal');
|
||||
});
|
||||
}
|
||||
|
||||
renderTabs() {
|
||||
const tabsList = document.getElementById('tabs-list');
|
||||
tabsList.innerHTML = '';
|
||||
|
||||
this.state.tab_order.forEach(tabName => {
|
||||
const tabButton = document.createElement('button');
|
||||
tabButton.className = 'tab-button';
|
||||
tabButton.textContent = tabName;
|
||||
tabButton.addEventListener('click', () => this.selectTab(tabName));
|
||||
if (tabName === this.currentTab) {
|
||||
tabButton.classList.add('active');
|
||||
}
|
||||
tabsList.appendChild(tabButton);
|
||||
});
|
||||
}
|
||||
|
||||
async selectTab(tabName) {
|
||||
if (!this.state.lights[tabName]) return;
|
||||
|
||||
this.currentTab = tabName;
|
||||
this.renderTabs();
|
||||
await this.loadTabContent(tabName);
|
||||
}
|
||||
|
||||
async loadTabContent(tabName) {
|
||||
const light = this.state.lights[tabName];
|
||||
if (!light) {
|
||||
return;
|
||||
}
|
||||
const settings = light.settings;
|
||||
const pattern = settings.pattern || 'on';
|
||||
|
||||
// Get pattern-specific settings
|
||||
const patternSettings = this.getPatternSettings(tabName, pattern);
|
||||
|
||||
// Update IDs display
|
||||
document.getElementById('current-ids').textContent = light.names.join(', ');
|
||||
|
||||
// Colors are handled by the color palette with individual color pickers
|
||||
|
||||
// Update brightness slider
|
||||
const brightness = settings.brightness || 127;
|
||||
document.getElementById('brightness-slider').value = brightness;
|
||||
document.getElementById('brightness-value').textContent = brightness;
|
||||
|
||||
// Update delay slider
|
||||
const patternConfig = this.state.patterns[pattern] || {};
|
||||
const minDelay = patternConfig.min_delay || 10;
|
||||
const maxDelay = patternConfig.max_delay || 10000;
|
||||
const delaySliderPos = this.delayToSlider(patternSettings.delay, minDelay, maxDelay);
|
||||
document.getElementById('delay-slider').value = delaySliderPos;
|
||||
this.updateDelayValue(delaySliderPos, minDelay, maxDelay);
|
||||
|
||||
// Update n parameters
|
||||
for (let i = 1; i <= 4; i++) {
|
||||
document.getElementById(`n${i}-input`).value = patternSettings[`n${i}`] || 10;
|
||||
}
|
||||
|
||||
// Render patterns
|
||||
this.renderPatterns(tabName, pattern);
|
||||
|
||||
// Render color palette
|
||||
this.renderColorPalette(tabName, colors);
|
||||
}
|
||||
|
||||
renderPatterns(tabName, activePattern) {
|
||||
const patternsList = document.getElementById('patterns-list');
|
||||
patternsList.innerHTML = '';
|
||||
|
||||
Object.keys(this.state.patterns).forEach(patternName => {
|
||||
const button = document.createElement('button');
|
||||
button.className = 'pattern-button';
|
||||
button.textContent = patternName;
|
||||
if (patternName === activePattern) {
|
||||
button.classList.add('active');
|
||||
}
|
||||
button.addEventListener('click', () => this.setPattern(tabName, patternName));
|
||||
patternsList.appendChild(button);
|
||||
});
|
||||
}
|
||||
|
||||
renderColorPalette(tabName, colors) {
|
||||
const palette = document.getElementById('color-palette');
|
||||
if (!palette) {
|
||||
return;
|
||||
}
|
||||
palette.innerHTML = '';
|
||||
|
||||
colors.forEach((hexColor, index) => {
|
||||
const swatch = document.createElement('div');
|
||||
swatch.className = 'color-swatch';
|
||||
if (index === this.selectedColorIndex) {
|
||||
swatch.classList.add('selected');
|
||||
}
|
||||
|
||||
const preview = document.createElement('div');
|
||||
preview.className = 'color-swatch-preview';
|
||||
preview.style.backgroundColor = hexColor;
|
||||
|
||||
const label = document.createElement('span');
|
||||
label.className = 'color-swatch-label';
|
||||
label.textContent = `Color ${index + 1}`;
|
||||
|
||||
// Color picker input
|
||||
const colorPicker = document.createElement('input');
|
||||
colorPicker.type = 'color';
|
||||
colorPicker.value = hexColor;
|
||||
colorPicker.className = 'color-picker-input';
|
||||
colorPicker.addEventListener('change', (e) => {
|
||||
const newColor = e.target.value;
|
||||
this.updateColorInPalette(tabName, index, newColor);
|
||||
});
|
||||
|
||||
swatch.appendChild(preview);
|
||||
swatch.appendChild(label);
|
||||
swatch.appendChild(colorPicker);
|
||||
swatch.addEventListener('click', (e) => {
|
||||
// Don't trigger selection if clicking on the color picker
|
||||
if (e.target !== colorPicker && !colorPicker.contains(e.target)) {
|
||||
this.selectColor(tabName, index, hexColor);
|
||||
}
|
||||
});
|
||||
|
||||
palette.appendChild(swatch);
|
||||
});
|
||||
}
|
||||
|
||||
getPatternSettings(tabName, patternName) {
|
||||
const light = this.state.lights[tabName];
|
||||
if (!light) return { colors: ['#000000'], delay: 100, n1: 10, n2: 10, n3: 10, n4: 10 };
|
||||
|
||||
const lightSettings = light.settings;
|
||||
if (!lightSettings.patterns) lightSettings.patterns = {};
|
||||
if (!lightSettings.patterns[patternName]) lightSettings.patterns[patternName] = {};
|
||||
|
||||
const patternSettings = lightSettings.patterns[patternName];
|
||||
return {
|
||||
colors: patternSettings.colors || ['#000000'],
|
||||
delay: patternSettings.delay || 100,
|
||||
n1: patternSettings.n1 || 10,
|
||||
n2: patternSettings.n2 || 10,
|
||||
n3: patternSettings.n3 || 10,
|
||||
n4: patternSettings.n4 || 10
|
||||
};
|
||||
}
|
||||
|
||||
async setPattern(tabName, patternName) {
|
||||
const patternSettings = this.getPatternSettings(tabName, patternName);
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/pattern', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
tab_name: tabName,
|
||||
pattern: patternName,
|
||||
delay: patternSettings.delay,
|
||||
colors: patternSettings.colors,
|
||||
n1: patternSettings.n1,
|
||||
n2: patternSettings.n2,
|
||||
n3: patternSettings.n3,
|
||||
n4: patternSettings.n4
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
await this.loadState();
|
||||
await this.loadTabContent(tabName);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to set pattern:', error);
|
||||
}
|
||||
}
|
||||
|
||||
selectColor(tabName, index, hexColor) {
|
||||
this.selectedColorIndex = index;
|
||||
if (this.state.lights[tabName]) {
|
||||
const pattern = this.state.lights[tabName].settings.pattern;
|
||||
const patternSettings = this.getPatternSettings(tabName, pattern);
|
||||
this.renderColorPalette(tabName, patternSettings.colors);
|
||||
}
|
||||
}
|
||||
|
||||
async updateColorInPalette(tabName, index, hexColor) {
|
||||
if (!this.currentTab || tabName !== this.currentTab) return;
|
||||
|
||||
const pattern = this.state.lights[tabName].settings.pattern;
|
||||
const patternSettings = this.getPatternSettings(tabName, pattern);
|
||||
patternSettings.colors[index] = hexColor;
|
||||
|
||||
// Update the preview
|
||||
const palette = document.getElementById('color-palette');
|
||||
if (palette && palette.children[index]) {
|
||||
const preview = palette.children[index].querySelector('.color-swatch-preview');
|
||||
if (preview) {
|
||||
preview.style.backgroundColor = hexColor;
|
||||
}
|
||||
}
|
||||
|
||||
// Send update to backend to persist changes
|
||||
const rgb = this.hexToRgb(hexColor);
|
||||
try {
|
||||
const response = await fetch('/api/parameters', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
tab_name: this.currentTab,
|
||||
red: rgb.r,
|
||||
green: rgb.g,
|
||||
blue: rgb.b,
|
||||
color_index: index
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
// Reload state to ensure persistence
|
||||
await this.loadState();
|
||||
// Re-render palette to reflect persisted state
|
||||
const updatedPatternSettings = this.getPatternSettings(tabName, pattern);
|
||||
this.renderColorPalette(tabName, updatedPatternSettings.colors);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to update color:', error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async updateBrightness() {
|
||||
if (!this.currentTab) return;
|
||||
|
||||
const brightness = parseInt(document.getElementById('brightness-slider').value) || 0;
|
||||
|
||||
try {
|
||||
await fetch('/api/parameters', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
tab_name: this.currentTab,
|
||||
brightness: brightness
|
||||
})
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to update brightness:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async updateDelay() {
|
||||
if (!this.currentTab) return;
|
||||
|
||||
const sliderValue = parseInt(document.getElementById('delay-slider').value);
|
||||
const pattern = this.state.lights[this.currentTab].settings.pattern;
|
||||
const patternConfig = this.state.patterns[pattern] || {};
|
||||
const minDelay = patternConfig.min_delay || 10;
|
||||
const maxDelay = patternConfig.max_delay || 10000;
|
||||
|
||||
try {
|
||||
await fetch('/api/parameters', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
tab_name: this.currentTab,
|
||||
delay_slider: sliderValue
|
||||
})
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to update delay:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async updateNParams() {
|
||||
if (!this.currentTab) return;
|
||||
|
||||
const nParams = {};
|
||||
for (let i = 1; i <= 4; i++) {
|
||||
nParams[`n${i}`] = parseInt(document.getElementById(`n${i}-input`).value) || 0;
|
||||
}
|
||||
|
||||
try {
|
||||
await fetch('/api/parameters', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
tab_name: this.currentTab,
|
||||
...nParams
|
||||
})
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to update n params:', error);
|
||||
}
|
||||
}
|
||||
|
||||
debounceUpdate(key, callback) {
|
||||
if (this.updateTimeouts[key]) {
|
||||
clearTimeout(this.updateTimeouts[key]);
|
||||
}
|
||||
this.updateTimeouts[key] = setTimeout(callback, 100);
|
||||
}
|
||||
|
||||
delayToSlider(delayMs, minDelay = 10, maxDelay = 10000) {
|
||||
if (delayMs <= minDelay) return 0;
|
||||
if (delayMs >= maxDelay) return 1000;
|
||||
if (minDelay === maxDelay) return 0;
|
||||
return Math.floor(1000 * Math.log(delayMs / minDelay) / Math.log(maxDelay / minDelay));
|
||||
}
|
||||
|
||||
sliderToDelay(sliderValue, minDelay = 10, maxDelay = 10000) {
|
||||
if (sliderValue <= 0) return minDelay;
|
||||
if (sliderValue >= 1000) return maxDelay;
|
||||
if (minDelay === maxDelay) return minDelay;
|
||||
return Math.floor(minDelay * Math.pow(maxDelay / minDelay, sliderValue / 1000));
|
||||
}
|
||||
|
||||
updateDelayValue(sliderValue, minDelay, maxDelay) {
|
||||
if (!minDelay || !maxDelay) {
|
||||
const pattern = this.currentTab ? this.state.lights[this.currentTab]?.settings?.pattern : 'on';
|
||||
const patternConfig = this.state.patterns[pattern] || {};
|
||||
minDelay = patternConfig.min_delay || 10;
|
||||
maxDelay = patternConfig.max_delay || 10000;
|
||||
}
|
||||
const delay = this.sliderToDelay(parseInt(sliderValue), minDelay, maxDelay);
|
||||
document.getElementById('delay-value').textContent = `${delay} ms`;
|
||||
}
|
||||
|
||||
hexToRgb(hex) {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : { r: 0, g: 0, b: 0 };
|
||||
}
|
||||
|
||||
rgbToHex(r, g, b) {
|
||||
return `#${[r, g, b].map(x => {
|
||||
const hex = x.toString(16);
|
||||
return hex.length === 1 ? '0' + hex : hex;
|
||||
}).join('')}`;
|
||||
}
|
||||
|
||||
showAddTabModal() {
|
||||
document.getElementById('new-tab-name').value = '';
|
||||
document.getElementById('new-tab-ids').value = '1';
|
||||
document.getElementById('add-tab-modal').classList.add('active');
|
||||
}
|
||||
|
||||
async createTab() {
|
||||
const name = document.getElementById('new-tab-name').value.trim();
|
||||
const idsStr = document.getElementById('new-tab-ids').value.trim();
|
||||
const ids = idsStr.split(',').map(id => id.trim()).filter(id => id);
|
||||
|
||||
if (!name) {
|
||||
alert('Tab name cannot be empty');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/tabs', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name, ids })
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
await this.loadState();
|
||||
this.renderTabs();
|
||||
this.selectTab(name);
|
||||
this.hideModal('add-tab-modal');
|
||||
} else {
|
||||
const error = await response.json();
|
||||
alert(error.error || 'Failed to create tab');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to create tab:', error);
|
||||
alert('Failed to create tab');
|
||||
}
|
||||
}
|
||||
|
||||
showEditTabModal() {
|
||||
if (!this.currentTab) {
|
||||
alert('Please select a tab first');
|
||||
return;
|
||||
}
|
||||
|
||||
const light = this.state.lights[this.currentTab];
|
||||
document.getElementById('edit-tab-name').value = this.currentTab;
|
||||
document.getElementById('edit-tab-ids').value = light.names.join(', ');
|
||||
document.getElementById('edit-tab-modal').classList.add('active');
|
||||
}
|
||||
|
||||
async updateTab() {
|
||||
const newName = document.getElementById('edit-tab-name').value.trim();
|
||||
const idsStr = document.getElementById('edit-tab-ids').value.trim();
|
||||
const ids = idsStr.split(',').map(id => id.trim()).filter(id => id);
|
||||
|
||||
if (!newName) {
|
||||
alert('Tab name cannot be empty');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/tabs/${this.currentTab}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name: newName, ids })
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
await this.loadState();
|
||||
this.renderTabs();
|
||||
this.selectTab(newName);
|
||||
this.hideModal('edit-tab-modal');
|
||||
} else {
|
||||
const error = await response.json();
|
||||
alert(error.error || 'Failed to update tab');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to update tab:', error);
|
||||
alert('Failed to update tab');
|
||||
}
|
||||
}
|
||||
|
||||
async deleteCurrentTab() {
|
||||
if (!this.currentTab) {
|
||||
alert('Please select a tab first');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm(`Are you sure you want to delete the tab '${this.currentTab}'?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/tabs/${this.currentTab}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
await this.loadState();
|
||||
this.renderTabs();
|
||||
if (this.state.tab_order.length > 0) {
|
||||
this.selectTab(this.state.tab_order[0]);
|
||||
} else {
|
||||
this.currentTab = null;
|
||||
document.getElementById('tab-content').innerHTML = '<p>No tabs available. Create a new tab to get started.</p>';
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to delete tab:', error);
|
||||
alert('Failed to delete tab');
|
||||
}
|
||||
}
|
||||
|
||||
async addColorToPalette() {
|
||||
if (!this.currentTab) return;
|
||||
|
||||
const pattern = this.state.lights[this.currentTab].settings.pattern;
|
||||
const patternSettings = this.getPatternSettings(this.currentTab, pattern);
|
||||
patternSettings.colors.push('#000000');
|
||||
this.selectedColorIndex = patternSettings.colors.length - 1;
|
||||
this.renderColorPalette(this.currentTab, patternSettings.colors);
|
||||
}
|
||||
|
||||
async removeSelectedColor() {
|
||||
if (!this.currentTab) return;
|
||||
|
||||
const pattern = this.state.lights[this.currentTab].settings.pattern;
|
||||
const patternSettings = this.getPatternSettings(this.currentTab, pattern);
|
||||
|
||||
if (patternSettings.colors.length <= 1) {
|
||||
alert('There must be at least one color in the palette');
|
||||
return;
|
||||
}
|
||||
|
||||
patternSettings.colors.splice(this.selectedColorIndex, 1);
|
||||
if (this.selectedColorIndex >= patternSettings.colors.length) {
|
||||
this.selectedColorIndex = patternSettings.colors.length - 1;
|
||||
}
|
||||
this.renderColorPalette(this.currentTab, patternSettings.colors);
|
||||
}
|
||||
|
||||
showProfiles() {
|
||||
alert('Profiles feature coming soon');
|
||||
}
|
||||
|
||||
hideModal(modalId) {
|
||||
document.getElementById(modalId).classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize app when DOM is ready
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new LightingController();
|
||||
});
|
||||
|
||||
505
static/style.css
Normal file
505
static/style.css
Normal file
@@ -0,0 +1,505 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background-color: #2e2e2e;
|
||||
color: white;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #1a1a1a;
|
||||
padding: 1rem 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 2px solid #4a4a4a;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #4a4a4a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #5a5a5a;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #3a3a3a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: #4a4a4a;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: #d32f2f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background-color: #c62828;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
background-color: #1a1a1a;
|
||||
border-bottom: 2px solid #4a4a4a;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.tabs-list {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: #3a3a3a;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px 4px 0 0;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
white-space: nowrap;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.tab-button:hover {
|
||||
background-color: #4a4a4a;
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
background-color: #6a5acd;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
padding: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
flex: 0 0 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
overflow-y: auto;
|
||||
border-right: 2px solid #4a4a4a;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
overflow-y: auto;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.ids-display {
|
||||
padding: 0.5rem;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.controls-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.control-group label {
|
||||
min-width: 100px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.slider {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #6a5acd;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb:hover {
|
||||
background-color: #7a6add;
|
||||
}
|
||||
|
||||
.slider::-moz-range-thumb {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #6a5acd;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.slider::-moz-range-thumb:hover {
|
||||
background-color: #7a6add;
|
||||
}
|
||||
|
||||
/* Red slider */
|
||||
#red-slider {
|
||||
accent-color: #ff0000;
|
||||
}
|
||||
|
||||
#red-slider::-webkit-slider-thumb {
|
||||
background-color: #ff0000;
|
||||
}
|
||||
|
||||
#red-slider::-moz-range-thumb {
|
||||
background-color: #ff0000;
|
||||
}
|
||||
|
||||
/* Green slider */
|
||||
#green-slider {
|
||||
accent-color: #00ff00;
|
||||
}
|
||||
|
||||
#green-slider::-webkit-slider-thumb {
|
||||
background-color: #00ff00;
|
||||
}
|
||||
|
||||
#green-slider::-moz-range-thumb {
|
||||
background-color: #00ff00;
|
||||
}
|
||||
|
||||
/* Blue slider */
|
||||
#blue-slider {
|
||||
accent-color: #0000ff;
|
||||
}
|
||||
|
||||
#blue-slider::-webkit-slider-thumb {
|
||||
background-color: #0000ff;
|
||||
}
|
||||
|
||||
#blue-slider::-moz-range-thumb {
|
||||
background-color: #0000ff;
|
||||
}
|
||||
|
||||
/* Brightness slider */
|
||||
#brightness-slider {
|
||||
accent-color: #ffff00;
|
||||
}
|
||||
|
||||
#brightness-slider::-webkit-slider-thumb {
|
||||
background-color: #ffff00;
|
||||
}
|
||||
|
||||
#brightness-slider::-moz-range-thumb {
|
||||
background-color: #ffff00;
|
||||
}
|
||||
|
||||
.slider-value {
|
||||
min-width: 50px;
|
||||
text-align: right;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.n-params-section {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.n-params-section h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.n-params-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.n-param-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.n-param-group label {
|
||||
min-width: 40px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.n-input {
|
||||
flex: 1;
|
||||
padding: 0.5rem;
|
||||
background-color: #3a3a3a;
|
||||
color: white;
|
||||
border: 1px solid #4a4a4a;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.n-input:focus {
|
||||
outline: none;
|
||||
border-color: #6a5acd;
|
||||
}
|
||||
|
||||
.patterns-section,
|
||||
.color-palette-section {
|
||||
background-color: #1a1a1a;
|
||||
border: 2px solid #4a4a4a;
|
||||
border-radius: 4px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.patterns-section h3,
|
||||
.color-palette-section h3 {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.patterns-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.pattern-button {
|
||||
padding: 0.75rem;
|
||||
background-color: #3a3a3a;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
text-align: left;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.pattern-button:hover {
|
||||
background-color: #4a4a4a;
|
||||
}
|
||||
|
||||
.pattern-button.active {
|
||||
background-color: #6a5acd;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.color-palette {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
background-color: #3a3a3a;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.color-swatch:hover {
|
||||
border-color: #6a5acd;
|
||||
}
|
||||
|
||||
.color-swatch.selected {
|
||||
border-color: #FFD700;
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.color-swatch-preview {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #4a4a4a;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.color-swatch-label {
|
||||
flex: 1;
|
||||
font-size: 0.9rem;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.color-picker-input {
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
border: 1px solid #4a4a4a;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.color-picker-input::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.color-picker-input::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.color-picker-input::-moz-color-swatch {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.palette-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
z-index: 1000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #2e2e2e;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
min-width: 400px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.modal-content h2 {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.modal-content label {
|
||||
display: block;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.modal-content input {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
background-color: #3a3a3a;
|
||||
color: white;
|
||||
border: 1px solid #4a4a4a;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.modal-content input:focus {
|
||||
outline: none;
|
||||
border-color: #6a5acd;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1.5rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #4a4a4a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #5a5a5a;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user