diff --git a/plans/PROJECT_PLAN.md b/plans/PROJECT_PLAN.md index d91367c..89211fc 100644 --- a/plans/PROJECT_PLAN.md +++ b/plans/PROJECT_PLAN.md @@ -34,7 +34,7 @@ #### 5. Просмотр панелей - Единое фоновое изображение в боковой панели (один раз вверху) -- Превью всех созданных панелей с текстом на прозрачном фоне +- Превью всех созданных панелей с текстом на фоне - Превью только для просмотра - Скачивание отдельной панели - Массовое скачивание всех панелей @@ -51,11 +51,12 @@ 3. Пользователь видит экран добавления текстов ### Шаг 2: Настройка фона (опционально) -1. Пользователь может загрузить собственное фоновое изображение -2. При необходимости обрезает изображение -3. Фон отображается один раз в боковой панели -4. Фон применяется ко всем создаваемым панелям -5. Превью панелей показывают только текст на прозрачном фоне +1. Фоновое изображение отображается в боковой панели с кнопкой "Загрузить" +2. Пользователь может загрузить собственное фоновое изображение +3. При необходимости обрезает изображение +4. Фон отображается один раз в боковой панели с правильными размерами (максимальная ширина 320px) +5. Фон применяется ко всем создаваемым панелям +6. Превью панелей показывают финальный результат с текстом на фоне ### Шаг 3: Создание и редактирование текстов 1. Пользователь вводит текст для первой панели (например: "links") @@ -81,7 +82,7 @@ ### Шаг 5: Просмотр панелей 1. В боковой панели отображается фоновое изображение (один раз вверху) 2. Ниже отображаются превью всех созданных панелей -3. Превью панелей показывают только текст на прозрачном фоне +3. Превью панелей показывают финальный результат с текстом на фоне 4. Превью только для просмотра, редактирование происходит в списке текстов ### Шаг 6: Экспорт панелей @@ -171,8 +172,8 @@ ## Ограничения MVP - Один фоновый рисунок для всех панелей -- Фон отображается один раз в боковой панели -- Превью панелей показывают только текст на прозрачном фоне +- Фон отображается один раз в боковой панели (максимальная ширина 320px) +- Превью панелей показывают финальный результат с текстом на фоне - Один текстовый элемент на панель - Фиксированная ширина панели (320px) - Только экспорт в PNG diff --git a/src/components/PanelPreview.svelte b/src/components/PanelPreview.svelte index 979a3e4..596b458 100644 --- a/src/components/PanelPreview.svelte +++ b/src/components/PanelPreview.svelte @@ -69,6 +69,9 @@
+ {#if backgroundImage} + + {/if} {#each panel.texts || [] as textItem (textItem.id)} {@const textPosition = getTextPosition(textItem)} {#if $uiStore.currentStep === "text" && backgroundImage}
-

Фоновое изображение

+
+

Фоновое изображение

+ +
Фон
{/if} @@ -248,6 +251,13 @@ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } + .background-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: 0.5rem; + } + .background-preview h3 { margin: 0; color: #333; @@ -257,6 +267,8 @@ .background-preview img { width: 100%; + max-width: 320px; + height: auto; border-radius: 4px; }