Jimmy
40cfe19759
- Added per-profile color palette storage in profile JSON files - Created Color Palette modal for managing profile colors - Added quick-select modal window when clicking color pickers - Implemented palette color selection to apply to active tab colors - Added 'Use Color Picker' button in quick palette modal - Fixed pattern selection to properly update UI - Improved color picker interaction to prevent conflicts between quick palette and native picker
195 lines
9.7 KiB
HTML
195 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Lighting Controller</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<header>
|
|
<h1>Lighting Controller</h1>
|
|
<div class="header-actions">
|
|
<button id="add-tab-btn" class="btn btn-primary">+ Add Tab</button>
|
|
<button id="edit-tab-btn" class="btn btn-secondary">Edit Tab</button>
|
|
<button id="delete-tab-btn" class="btn btn-danger">Delete Tab</button>
|
|
<button id="color-palette-btn" class="btn btn-secondary">Color Palette</button>
|
|
<button id="profiles-btn" class="btn btn-secondary">Profiles</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="main-content">
|
|
<div class="tabs-container">
|
|
<div id="tabs-list" class="tabs-list"></div>
|
|
</div>
|
|
|
|
<div id="tab-content" class="tab-content">
|
|
<div class="left-panel">
|
|
<div class="ids-display">
|
|
<label>IDs: </label>
|
|
<span id="current-ids"></span>
|
|
</div>
|
|
|
|
<div class="color-palette-section">
|
|
<h3>Color Palette</h3>
|
|
<div id="color-palette" class="color-palette"></div>
|
|
<div class="palette-actions">
|
|
<button id="add-color-btn" class="btn btn-small">Add Color</button>
|
|
<button id="remove-color-btn" class="btn btn-small">Remove Selected</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="controls-section">
|
|
<div class="control-group">
|
|
<label for="brightness-slider">Brightness:</label>
|
|
<input type="range" id="brightness-slider" min="0" max="255" value="127" class="slider">
|
|
<span id="brightness-value" class="slider-value">127</span>
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="delay-slider">Delay:</label>
|
|
<input type="range" id="delay-slider" min="0" max="1000" value="0" class="slider">
|
|
<span id="delay-value" class="slider-value">100 ms</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="n-params-section">
|
|
<h3>N Parameters</h3>
|
|
<div class="n-params-grid">
|
|
<div class="n-param-group">
|
|
<label for="n1-input">n1:</label>
|
|
<input type="number" id="n1-input" min="0" max="255" value="10" class="n-input">
|
|
</div>
|
|
<div class="n-param-group">
|
|
<label for="n2-input">n2:</label>
|
|
<input type="number" id="n2-input" min="0" max="255" value="10" class="n-input">
|
|
</div>
|
|
<div class="n-param-group">
|
|
<label for="n3-input">n3:</label>
|
|
<input type="number" id="n3-input" min="0" max="255" value="10" class="n-input">
|
|
</div>
|
|
<div class="n-param-group">
|
|
<label for="n4-input">n4:</label>
|
|
<input type="number" id="n4-input" min="0" max="255" value="10" class="n-input">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right-panel">
|
|
<div class="patterns-section">
|
|
<h3>Patterns</h3>
|
|
<div id="patterns-list" class="patterns-list"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modals -->
|
|
<div id="add-tab-modal" class="modal">
|
|
<div class="modal-content">
|
|
<h2>Add New Tab</h2>
|
|
<label>Tab Name:</label>
|
|
<input type="text" id="new-tab-name" placeholder="Enter tab name">
|
|
<label>Device IDs (comma-separated):</label>
|
|
<input type="text" id="new-tab-ids" placeholder="1,2,3" value="1">
|
|
<div class="modal-actions">
|
|
<button id="add-tab-confirm" class="btn btn-primary">Add</button>
|
|
<button id="add-tab-cancel" class="btn btn-secondary">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="edit-tab-modal" class="modal">
|
|
<div class="modal-content">
|
|
<h2>Edit Tab</h2>
|
|
<label>Tab Name:</label>
|
|
<input type="text" id="edit-tab-name" placeholder="Enter tab name">
|
|
<label>Device IDs (comma-separated):</label>
|
|
<input type="text" id="edit-tab-ids" placeholder="1,2,3">
|
|
<div class="modal-actions">
|
|
<button id="edit-tab-confirm" class="btn btn-primary">Update</button>
|
|
<button id="edit-tab-cancel" class="btn btn-secondary">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="profiles-modal" class="modal">
|
|
<div class="modal-content" style="min-width: 500px;">
|
|
<h2>Profiles</h2>
|
|
<div id="profiles-list-container" style="margin: 1rem 0; max-height: 400px; overflow-y: auto;">
|
|
<div id="profiles-list"></div>
|
|
</div>
|
|
<div style="margin-top: 1rem;">
|
|
<label>New Profile Name:</label>
|
|
<div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
|
|
<input type="text" id="new-profile-name" placeholder="Enter profile name" style="flex: 1;">
|
|
<button id="create-profile-btn" class="btn btn-primary">Create</button>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 1rem;">
|
|
<label>Current Profile:</label>
|
|
<div id="current-profile-display" style="padding: 0.5rem; background-color: #3a3a3a; border-radius: 4px; margin-top: 0.5rem;">
|
|
<span id="current-profile-name">None</span>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 1.5rem;">
|
|
<label>Profile Color Palette:</label>
|
|
<div id="profile-palette-container" style="margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem; background-color: #3a3a3a; border-radius: 4px; min-height: 60px;">
|
|
<!-- Palette colors will be rendered here -->
|
|
</div>
|
|
<div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
|
|
<input type="color" id="new-palette-color" value="#000000" style="width: 60px; height: 40px; border: 1px solid #4a4a4a; border-radius: 4px; cursor: pointer;">
|
|
<button id="add-palette-color-btn" class="btn btn-small">Add to Palette</button>
|
|
</div>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button id="profiles-close-btn" class="btn btn-secondary">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="color-palette-modal" class="modal">
|
|
<div class="modal-content" style="min-width: 500px;">
|
|
<h2>Color Palette</h2>
|
|
<div style="margin-top: 1rem;">
|
|
<label>Current Profile:</label>
|
|
<div id="palette-current-profile-display" style="padding: 0.5rem; background-color: #3a3a3a; border-radius: 4px; margin-top: 0.5rem;">
|
|
<span id="palette-current-profile-name">None</span>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 1.5rem;">
|
|
<label>Profile Color Palette:</label>
|
|
<div id="palette-container" style="margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem; background-color: #3a3a3a; border-radius: 4px; min-height: 60px;">
|
|
<!-- Palette colors will be rendered here -->
|
|
</div>
|
|
<div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
|
|
<input type="color" id="palette-new-color" value="#000000" style="width: 60px; height: 40px; border: 1px solid #4a4a4a; border-radius: 4px; cursor: pointer;">
|
|
<button id="palette-add-color-btn" class="btn btn-small">Add to Palette</button>
|
|
</div>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button id="color-palette-close-btn" class="btn btn-secondary">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="quick-palette-modal" class="modal">
|
|
<div class="modal-content" style="min-width: 500px; max-width: 600px;">
|
|
<h2>Select Color from Palette</h2>
|
|
<div id="quick-palette-container" style="margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 1rem; background-color: #3a3a3a; border-radius: 4px; min-height: 200px; max-height: 500px; overflow-y: auto;">
|
|
<!-- Palette colors will be rendered here -->
|
|
</div>
|
|
<div class="modal-actions" style="margin-top: 1rem;">
|
|
<button id="quick-palette-use-picker-btn" class="btn btn-secondary">Use Color Picker</button>
|
|
<button id="quick-palette-close-btn" class="btn btn-secondary">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='app.js') }}"></script>
|
|
</body>
|
|
</html>
|
|
|