Photoshop 2024 Interface

Функциональность интерфейса будет ограничена, поскольку полноценная версия Photoshop требует очень сложной разработки. Тем не менее, я могу добавить базовые интерактивные элементы и структуру, чтобы интерфейс был более похож на рабочий. Photoshop 2024 Interface

body { font-family: sans-serif; background-color: #333; color: #eee; margin: 0; overflow: hidden; /* Prevent scrollbars */ } .app-container { display: grid; grid-template-columns: 1fr 4fr 1fr; /* Sidebar, Main Content, Right Panels */ grid-template-rows: auto 1fr auto; /* Header, Main Area, Footer */ grid-template-areas: "header header header" "sidebar main-content right-panels" "footer footer footer"; height: 100vh; } .app-header { grid-area: header; background-color: #222; display: flex; flex-direction: column; border-bottom: 1px solid #555; } .header-bar { background-color: #2a2a2a; padding: 5px 10px; } .menu-bar { display: flex; gap: 20px; } .menu-item { padding: 5px 10px; cursor: pointer; border-radius: 3px; } .menu-item:hover { background-color: #444; } .options-bar { background-color: #2a2a2a; padding: 5px 10px; border-bottom: 1px solid #555; } .app-sidebar { grid-area: sidebar; background-color: #2a2a2a; padding: 10px; display: flex; flex-direction: column; align-items: center; border-right: 1px solid #555; } .tools-panel { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .tool-group { display: flex; flex-direction: column; gap: 5px; } .tool { width: 40px; height: 40px; background-color: #333; border-radius: 5px; display: flex; justify-content: center; align-items: center; cursor: pointer; margin-bottom: 5px; } .tool:hover, .tool.active-tool { background-color: #555; } .tool.active-tool { border: 2px solid #eee; padding: 2px; /* Adjust padding to account for border */ } .tool-icon { display: block; width: 20px; height: 20px; background-color: #eee; -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .move-icon { -webkit-mask-image: url('icons/move.svg'); mask-image: url('icons/move.svg'); background-color: #eee; } .select-icon { -webkit-mask-image: url('icons/select.svg'); mask-image: url('icons/select.svg'); } .crop-icon { -webkit-mask-image: url('icons/crop.svg'); mask-image: url('icons/crop.svg'); } .brush-icon { -webkit-mask-image: url('icons/brush.svg'); mask-image: url('icons/brush.svg'); } .eraser-icon { -webkit-mask-image: url('icons/eraser.svg'); mask-image: url('icons/eraser.svg'); } .fill-icon { -webkit-mask-image: url('icons/fill.svg'); mask-image: url('icons/fill.svg'); } .text-icon { -webkit-mask-image: url('icons/text.svg'); mask-image: url('icons/text.svg'); } .app-main-content { grid-area: main-content; background-color: #444; display: flex; justify-content: center; align-items: center; } .canvas-container { background-color: #ddd; /* Placeholder canvas color */ border: 1px solid #888; overflow: hidden; /* Prevent canvas scrollbars */ } #photoshop-canvas { /* Canvas styles if needed */ display: block; /* Prevent scrollbars around canvas */ } .app-footer { grid-area: footer; background-color: #2a2a2a; border-top: 1px solid #555; display: flex; justify-content: flex-start; /* Align layers panel to the start */ align-items: center; padding: 0 10px; height: 100px; /* Adjust as needed */ } .layers-panel { background-color: #333; border-radius: 5px; overflow: hidden; width: 200px; margin-right: 20px; } .panel-header { background-color: #444; color: #eee; padding: 8px 10px; font-size: 0.9em; border-bottom: 1px solid #555; } .layers-list { padding: 10px; } .layer { padding: 5px; margin-bottom: 3px; background-color: #444; border-radius: 3px; cursor: pointer; } .layer:hover, .layer.active-layer { background-color: #555; } .layer.active-layer { border: 1px solid #eee; } .panels-container { grid-area: right-panels; background-color: #2a2a2a; display: flex; flex-direction: column; padding: 10px; gap: 10px; align-items: stretch; border-left: 1px solid #555; } .panel { background-color: #333; border-radius: 5px; overflow: hidden; flex: 1; display: flex; flex-direction: column; } .panel-content { padding: 10px; flex: 1; overflow-y: auto; } document.addEventListener('DOMContentLoaded', () => { const tools = document.querySelectorAll('.tool'); const canvas = document.getElementById('photoshop-canvas'); const ctx = canvas.getContext('2d'); let activeTool = 'move'; // Default tool tools.forEach(tool => { tool.addEventListener('click', () => { tools.forEach(t => t.classList.remove('active-tool')); // Remove active class from all tools tool.classList.add('active-tool'); // Add active class to the clicked tool activeTool = tool.dataset.tool; // Update activeTool console.log('Selected tool:', activeTool); }); }); // Basic drawing functionality for the brush tool let isDrawing = false; canvas.addEventListener('mousedown', (e) => { if (activeTool === 'brush') { isDrawing = true; draw(e); } }); canvas.addEventListener('mouseup', () => { isDrawing = false; ctx.beginPath(); // New path for next drawing }); canvas.addEventListener('mousemove', (e) => { if (!isDrawing || activeTool !== 'brush') return; draw(e); }); function draw(e) { const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; ctx.lineWidth = 5; ctx.lineCap = 'round'; ctx.strokeStyle = '#eee'; // Example brush color ctx.lineTo(x, y); ctx.stroke(); ctx.beginPath(); ctx.moveTo(x, y); } });