admtracksteel/camila
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Evolução do Design Canvas 2.0: biblioteca de assets no Supabase e controle de rotação/opacidade

Browse Source
This commit is contained in:
admtracksteel
2026-06-08 00:10:28 +00:00
parent 2478e7f36e
commit 9ad5cdb5fb
3 changed files with 379 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+32 -1
View File
@@ -1778,7 +1778,7 @@
<div id="panelCartazesCriar" style="display: flex; flex-direction: row; gap: 24px; height: 100%; flex-wrap: wrap;">
<!-- Lado Esquerdo: Configurações -->
<div style="flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: 16px;">
<div id="cartazLeftConfigPanel" style="flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: 16px;">
<h4 style="margin: 0; color: var(--text-primary); border-bottom: 1px dashed var(--border-light); padding-bottom: 8px;">1. Definições do Cartaz</h4>
<div class="settings-group">
@@ -1879,6 +1879,27 @@
</div>
</div>
<!-- Lado Esquerdo: Painel de Assets para Canvas -->
<div id="cartazLeftCanvasPanel" style="display: none; flex: 1; min-width: 320px; flex-direction: column; gap: 16px; padding-right: 12px;">
<h4 style="margin: 0; color: var(--text-primary); border-bottom: 1px dashed var(--border-light); padding-bottom: 8px;">🎨 Elementos do Canvas</h4>
<div class="settings-group">
<input type="text" id="canvasAssetSearch" placeholder="🔍 Buscar elementos..." class="obs-input" style="width: 100%; padding: 10px;">
</div>
<!-- Abas do Painel de Assets -->
<div style="display: flex; gap: 8px; border-bottom: 1px solid var(--border-light); padding-bottom: 8px;">
<button id="btnTabAssetPostits" class="tab-btn active" style="font-size: 0.8rem; padding: 6px 12px; background: rgba(59,130,246,0.1); border: none; cursor: pointer; color: var(--text-primary); border-radius: 4px; font-weight: bold;">📌 Post-its</button>
<button id="btnTabAssetStickers" class="tab-btn" style="font-size: 0.8rem; padding: 6px 12px; background: transparent; border: none; cursor: pointer; color: var(--text-secondary); border-radius: 4px;">🎈 Stickers</button>
<button id="btnTabAssetFormas" class="tab-btn" style="font-size: 0.8rem; padding: 6px 12px; background: transparent; border: none; cursor: pointer; color: var(--text-secondary); border-radius: 4px;">📐 Formas</button>
</div>
<!-- Container dos Assets -->
<div id="canvasAssetsContainer" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); gap: 10px; overflow-y: auto; flex: 1; max-height: 480px; padding: 5px; background: rgba(0,0,0,0.05); border-radius: 8px; min-height: 250px;">
<!-- Preenchido via JS -->
</div>
</div>
<!-- Lado Direito: Preview & Editor de Código -->
<div style="flex: 1.3; min-width: 360px; display: flex; flex-direction: column; gap: 14px;">
<div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); padding-bottom: 8px;">
@@ -1919,6 +1940,16 @@
<input type="color" id="canvasBgColor" style="width: 24px; height: 24px; border: 1px solid var(--border-light); border-radius: 4px; padding: 0; cursor: pointer; background: transparent; margin: 0;">
</div>
<div style="display: flex; align-items: center; gap: 4px;">
<label style="font-size: 0.72rem; color: var(--text-secondary);" title="Rotação">Giro:</label>
<input type="range" id="canvasRotation" min="-180" max="180" value="0" style="width: 60px; height: 4px; cursor: pointer; margin: 0;">
</div>
<div style="display: flex; align-items: center; gap: 4px;">
<label style="font-size: 0.72rem; color: var(--text-secondary);" title="Opacidade">Opac.:</label>
<input type="range" id="canvasOpacity" min="10" max="100" value="100" style="width: 60px; height: 4px; cursor: pointer; margin: 0;">
</div>
<div style="display: flex; gap: 4px; align-items: center;">
<button id="btnCanvasZIndexUp" class="btn-save-settings" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 2px 6px; font-size: 0.7rem; cursor: pointer;" title="Trazer para Frente">🔺</button>
<button id="btnCanvasZIndexDown" class="btn-save-settings" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 2px 6px; font-size: 0.7rem; cursor: pointer;" title="Enviar para Trás">🔻</button>