feat: compare slider UI for photo enhance modal
- Side-by-side before/after comparison with draggable divider - Zoom (scroll wheel) and pan when zoomed in, double-click to reset - Sliders moved to sidebar panel, responsive layout - Original/Result badges on the comparison view - Helper functions: setEnhanceClip, showEnhanceResult, applyEnhanceTransform
This commit is contained in:
dev
+48
-20
@@ -5,6 +5,33 @@
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Журнал — Админ-панель</title>
|
||||
<link rel="stylesheet" href="admin.css">
|
||||
<link rel="stylesheet" href="admin.css">
|
||||
<style>
|
||||
.enhance-modal { max-width: 1100px; width: 94vw; }
|
||||
.enhance-body { display: flex; gap: 16px; align-items: stretch; margin-top: 4px; }
|
||||
.enhance-compare { position: relative; flex: 1 1 auto; min-width: 0; border-radius: 10px; overflow: hidden; background: var(--bg); border: 1px solid var(--border); user-select: none; touch-action: none; cursor: ew-resize; }
|
||||
.enhance-compare.zoomed { cursor: grab; }
|
||||
.enhance-compare.panning { cursor: grabbing; }
|
||||
.enhance-stage { transform-origin: 0 0; will-change: transform; }
|
||||
.enhance-stage > img, .enhance-stage > canvas { display: block; width: 100%; height: 100%; }
|
||||
.enhance-stage > img { height: auto; }
|
||||
.enhance-top { position: absolute; inset: 0; overflow: hidden; }
|
||||
.enhance-top .enhance-stage { position: absolute; inset: 0; }
|
||||
.enhance-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 32px; transform: translateX(-50%); pointer-events: auto; cursor: ew-resize; }
|
||||
.enhance-divider::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: #fff; box-shadow: 0 0 6px rgba(0,0,0,.6); pointer-events: none; }
|
||||
.enhance-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #333; display: flex; align-items: center; justify-content: center; font-size: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,.4); pointer-events: none; }
|
||||
.enhance-badge { position: absolute; top: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: .72rem; pointer-events: none; }
|
||||
.enhance-badge.left { left: 10px; }
|
||||
.enhance-badge.right { right: 10px; }
|
||||
.enhance-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .85rem; background: var(--bg); }
|
||||
.enhance-sliders { flex: 0 0 240px; display: flex; flex-direction: column; gap: 14px; }
|
||||
.enhance-sliders .settings-field input[type=range] { width: 100%; }
|
||||
.enhance-foot { justify-content: flex-end; gap: 8px; margin-top: 14px; }
|
||||
@media (max-width: 800px) {
|
||||
.enhance-body { flex-direction: column; }
|
||||
.enhance-sliders { flex: 1 1 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body data-page="journal">
|
||||
<div class="layout">
|
||||
@@ -162,31 +189,32 @@
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="enhanceModal">
|
||||
<div class="edit-modal" style="max-width:960px">
|
||||
<div class="edit-modal enhance-modal">
|
||||
<h3>Улучшение фотографии</h3>
|
||||
<div style="display:flex;gap:16px;flex-wrap:wrap">
|
||||
<div style="flex:1;min-width:280px">
|
||||
<div style="font-size:.8rem;color:var(--muted);margin-bottom:6px">Оригинал</div>
|
||||
<div style="background:var(--bg);border:1px solid var(--border);border-radius:8px;overflow:hidden;min-height:120px;display:flex;align-items:center;justify-content:center">
|
||||
<img id="enhanceOrig" style="max-width:100%;max-height:320px;display:block">
|
||||
<div class="enhance-body">
|
||||
<div class="enhance-compare" id="enhanceCompare">
|
||||
<div class="enhance-stage" id="enhanceStage">
|
||||
<img id="enhanceOrig" alt="Оригинал">
|
||||
</div>
|
||||
<div class="enhance-top" id="enhanceTop" style="clip-path:inset(0 0 0 50%)">
|
||||
<div class="enhance-stage" id="enhanceInner">
|
||||
<canvas id="enhanceCanvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="enhance-divider" id="enhanceDivider"><div class="enhance-handle">⇔</div></div>
|
||||
<div class="enhance-badge left">Оригинал</div>
|
||||
<div class="enhance-badge right">Результат</div>
|
||||
<div class="enhance-loading" id="enhanceLoading">Загрузка...</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px">
|
||||
<div style="font-size:.8rem;color:var(--muted);margin-bottom:6px">Результат</div>
|
||||
<div style="background:var(--bg);border:1px solid var(--border);border-radius:8px;overflow:hidden;min-height:120px;display:flex;align-items:center;justify-content:center">
|
||||
<canvas id="enhanceCanvas" style="max-width:100%;max-height:320px;display:none"></canvas>
|
||||
<span id="enhanceLoading" style="color:var(--muted);font-size:.8rem;padding:24px">Загрузка...</span>
|
||||
</div>
|
||||
<div class="enhance-sliders">
|
||||
<div class="settings-field"><label>Яркость <span id="enhanceBrightnessVal">100%</span></label><input type="range" id="enhanceBrightness" min="50" max="150" value="100"></div>
|
||||
<div class="settings-field"><label>Контраст <span id="enhanceContrastVal">100%</span></label><input type="range" id="enhanceContrast" min="50" max="150" value="100"></div>
|
||||
<div class="settings-field"><label>Насыщенность <span id="enhanceSaturateVal">100%</span></label><input type="range" id="enhanceSaturate" min="0" max="200" value="100"></div>
|
||||
<div class="settings-field"><label>Шумодав <span id="enhanceDenoiseVal">0%</span></label><input type="range" id="enhanceDenoise" min="0" max="100" value="0"></div>
|
||||
<div class="settings-field"><label>Резкость <span id="enhanceSharpVal">0%</span></label><input type="range" id="enhanceSharp" min="0" max="100" value="0"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:14px">
|
||||
<div class="settings-field"><label>Яркость <span id="enhanceBrightnessVal">100%</span></label><input type="range" id="enhanceBrightness" min="50" max="150" value="100"></div>
|
||||
<div class="settings-field"><label>Контраст <span id="enhanceContrastVal">100%</span></label><input type="range" id="enhanceContrast" min="50" max="150" value="100"></div>
|
||||
<div class="settings-field"><label>Насыщенность <span id="enhanceSaturateVal">100%</span></label><input type="range" id="enhanceSaturate" min="0" max="200" value="100"></div>
|
||||
<div class="settings-field"><label>Шумодав <span id="enhanceDenoiseVal">0%</span></label><input type="range" id="enhanceDenoise" min="0" max="100" value="0"></div>
|
||||
<div class="settings-field"><label>Резкость <span id="enhanceSharpVal">0%</span></label><input type="range" id="enhanceSharp" min="0" max="100" value="0"></div>
|
||||
</div>
|
||||
<div class="card-foot" style="justify-content:flex-end;gap:8px;margin-top:6px">
|
||||
<div class="card-foot enhance-foot">
|
||||
<button type="button" class="btn-primary ghost" id="enhanceRestoreBtn" style="display:none" title="Вернуть исходную фотографию">↩ Вернуть оригинал</button>
|
||||
<button type="button" class="btn-primary ghost" id="enhanceAiBtn" style="display:none" title="ИИ-восстановление (Real-ESRGAN)">🤖 ИИ</button>
|
||||
<button type="button" class="btn-primary ghost" id="enhanceAutoBtn" title="Подобрать настройки автоматически">✨ Авто</button>
|
||||
|
||||
Reference in New Issue
Block a user