81 lines
3.8 KiB
PHP
81 lines
3.8 KiB
PHP
@extends('layouts.palette-layout')
|
|
|
|
@section('title', 'Palette Editor')
|
|
|
|
@section('content')
|
|
<div class="container">
|
|
<div class="mt-5">
|
|
<h1>Palette Editor</h1>
|
|
<div class="form-group">
|
|
<label for="palette-selector">Select a Palette:</label>
|
|
<select id="palette-selector" class="form-control">
|
|
@foreach($palettes as $palette)
|
|
<option value="{{ $palette->id }}">{{ $palette->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="mt-3">
|
|
<button id="new-palette" class="btn btn-primary">New Palette</button>
|
|
<button id="export-palette" class="btn btn-secondary">Export Palette</button>
|
|
<button id="import-palette" class="btn btn-secondary">Import Palette</button>
|
|
<input type="file" id="import-file" style="display:none;">
|
|
<button id="rename-palette" class="btn btn-secondary">Rename Palette</button>
|
|
<input type="text" id="rename-palette-name" placeholder="New Palette Name" class="form-control d-inline-block" style="width: auto; border-radius: 0.5rem; text-align: center;">
|
|
<button id="delete-palette" class="btn btn-danger">Delete Palette</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="new-palette-form" style="display:none;" class="mt-5">
|
|
<h2>Create New Palette</h2>
|
|
<form id="create-palette-form">
|
|
<div class="form-group">
|
|
<label for="palette-name">Palette Name:</label>
|
|
<input type="text" id="palette-name" name="name" class="form-control" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-success">Create</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="add-color-form" style="display:none;" class="mt-5">
|
|
<h2>Add Color to Palette</h2>
|
|
<button id="add-color" class="btn btn-success mb-3"><i class="fas fa-plus"></i> Add Color</button>
|
|
<form id="create-color-form">
|
|
<div id="color-editors" class="row"></div>
|
|
</form>
|
|
</div>
|
|
|
|
<button id="save-palette" class="btn btn-success" style="position: fixed; bottom: 20px; right: 20px;">Save</button>
|
|
</div>
|
|
|
|
<!-- Delete Confirmation Modal -->
|
|
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Are you sure you want to delete this palette? This action cannot be undone.</p>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="confirmDeleteCheckbox">
|
|
<label class="form-check-label" for="confirmDeleteCheckbox">
|
|
Confirm delete
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-danger" id="confirmDeleteButton" disabled>Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
@vite(['resources/js/palette-editor.js'])
|
|
@endsection
|