feat: красивое модальное окно редактирования аватара с кропом и зумом
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
+516
-32
@@ -592,6 +592,132 @@
|
||||
font-family: monospace; line-height: 1.5;
|
||||
}
|
||||
.pl-limit { font-size: 0.72rem; color: var(--text-3); margin-top: 10px; }
|
||||
|
||||
/* ══════════ Avatar Modal ══════════ */
|
||||
.av-ovl {
|
||||
position: fixed; inset: 0; z-index: 900;
|
||||
background: rgba(0,0,0,0.68); backdrop-filter: blur(6px);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
opacity: 0; pointer-events: none; transition: opacity .22s;
|
||||
}
|
||||
.av-ovl.open { opacity: 1; pointer-events: auto; }
|
||||
.av-dlg {
|
||||
width: 380px; max-width: calc(100vw - 32px);
|
||||
background: linear-gradient(170deg, #0d0b28 0%, #1a1248 100%);
|
||||
border: 1px solid rgba(155,93,229,0.3);
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(155,93,229,0.12);
|
||||
overflow: hidden;
|
||||
transform: scale(.94) translateY(14px);
|
||||
transition: transform .28s cubic-bezier(.34,1.56,.64,1);
|
||||
}
|
||||
.av-ovl.open .av-dlg { transform: scale(1) translateY(0); }
|
||||
.av-hdr {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 18px 20px 16px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.07);
|
||||
background: linear-gradient(90deg, rgba(155,93,229,0.08), transparent);
|
||||
}
|
||||
.av-title {
|
||||
font-family: 'Unbounded', sans-serif; font-size: 0.83rem; font-weight: 800; color: #fff;
|
||||
display: flex; align-items: center; gap: 9px;
|
||||
}
|
||||
.av-title-dot {
|
||||
width: 8px; height: 8px; border-radius: 50%;
|
||||
background: linear-gradient(135deg, #9B5DE5, #06D6E0);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.av-close {
|
||||
width: 30px; height: 30px; border-radius: 8px; border: none;
|
||||
background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.45);
|
||||
cursor: pointer; display: flex; align-items: center; justify-content: center;
|
||||
transition: all .15s;
|
||||
}
|
||||
.av-close:hover { background: rgba(241,91,181,0.15); color: #F15BB5; }
|
||||
.av-close svg { width: 14px; height: 14px; }
|
||||
/* Steps */
|
||||
.av-step { padding: 22px 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
|
||||
/* Current avatar preview */
|
||||
.av-cur {
|
||||
width: 96px; height: 96px; border-radius: 50%;
|
||||
background: linear-gradient(135deg, rgba(155,93,229,0.6), rgba(6,214,224,0.4));
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-family: 'Unbounded', sans-serif; font-size: 1.6rem; font-weight: 800; color: #fff;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 0 2px rgba(155,93,229,0.5), 0 0 0 5px rgba(155,93,229,0.12), 0 8px 24px rgba(0,0,0,0.4);
|
||||
}
|
||||
.av-cur img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
|
||||
/* Modal status */
|
||||
.av-status-row {
|
||||
font-size: 0.72rem; font-weight: 600; padding: 5px 14px;
|
||||
border-radius: 99px; text-align: center; display: none;
|
||||
}
|
||||
.av-status-row.pending { display: block; background: rgba(255,200,0,0.14); color: #ffd166; }
|
||||
.av-status-row.rejected { display: block; background: rgba(241,91,181,0.14); color: #F15BB5; }
|
||||
/* Drop zone */
|
||||
.av-drop {
|
||||
width: 100%; padding: 22px 16px; box-sizing: border-box;
|
||||
border: 2px dashed rgba(155,93,229,0.35); border-radius: 16px;
|
||||
cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px;
|
||||
transition: all .2s; background: rgba(155,93,229,0.04);
|
||||
}
|
||||
.av-drop:hover, .av-drop.drag-over {
|
||||
border-color: #9B5DE5; background: rgba(155,93,229,0.10);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.av-drop-icon { width: 30px; height: 30px; color: rgba(155,93,229,0.65); margin-bottom: 2px; }
|
||||
.av-drop-txt { font-size: 0.84rem; font-weight: 600; color: rgba(255,255,255,0.7); text-align: center; }
|
||||
.av-drop-sub { font-size: 0.68rem; color: rgba(255,255,255,0.3); }
|
||||
/* Delete button */
|
||||
.av-del-btn {
|
||||
display: none; align-items: center; gap: 7px;
|
||||
padding: 7px 16px; border-radius: 99px;
|
||||
border: 1.5px solid rgba(241,91,181,0.3);
|
||||
background: rgba(241,91,181,0.06);
|
||||
color: rgba(241,91,181,0.75); font-size: 0.77rem; font-weight: 600;
|
||||
cursor: pointer; transition: all .15s; font-family: 'Manrope', sans-serif;
|
||||
}
|
||||
.av-del-btn.visible { display: flex; }
|
||||
.av-del-btn:hover { border-color: #F15BB5; background: rgba(241,91,181,0.14); color: #F15BB5; }
|
||||
.av-del-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
|
||||
/* Crop canvas */
|
||||
#av-canvas {
|
||||
border-radius: 50%; cursor: grab; display: block;
|
||||
box-shadow: 0 4px 32px rgba(0,0,0,0.5), 0 0 0 2px rgba(155,93,229,0.3);
|
||||
touch-action: none;
|
||||
}
|
||||
#av-canvas:active { cursor: grabbing; }
|
||||
/* Zoom row */
|
||||
.av-zoom-row { display: flex; align-items: center; gap: 10px; width: 100%; }
|
||||
.av-zoom-row svg { flex-shrink: 0; color: rgba(255,255,255,0.4); }
|
||||
#av-zoom {
|
||||
flex: 1; -webkit-appearance: none; appearance: none; height: 4px;
|
||||
border-radius: 99px; background: rgba(255,255,255,0.12); cursor: pointer; outline: none;
|
||||
}
|
||||
#av-zoom::-webkit-slider-thumb {
|
||||
-webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
|
||||
background: linear-gradient(135deg, #9B5DE5, #06D6E0);
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.4); cursor: pointer;
|
||||
}
|
||||
.av-crop-hint { font-size: 0.67rem; color: rgba(255,255,255,0.28); text-align: center; }
|
||||
/* Crop buttons */
|
||||
.av-crop-btns { display: flex; gap: 10px; width: 100%; }
|
||||
.av-btn-back {
|
||||
flex: 1; padding: 10px 16px; border-radius: 12px;
|
||||
border: 1.5px solid rgba(255,255,255,0.1);
|
||||
background: transparent; color: rgba(255,255,255,0.5);
|
||||
font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600;
|
||||
cursor: pointer; transition: all .15s;
|
||||
}
|
||||
.av-btn-back:hover { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.8); }
|
||||
.av-btn-send {
|
||||
flex: 2; padding: 10px 16px; border-radius: 12px; border: none;
|
||||
background: linear-gradient(135deg, #9B5DE5, #06D6E0);
|
||||
color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700;
|
||||
cursor: pointer; transition: opacity .15s;
|
||||
}
|
||||
.av-btn-send:hover { opacity: 0.88; }
|
||||
.av-btn-send:disabled { opacity: 0.45; cursor: not-allowed; }
|
||||
</style>
|
||||
<script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
|
||||
</head>
|
||||
@@ -616,14 +742,12 @@
|
||||
<div class="p-avatar" id="big-avatar">LS</div>
|
||||
<!-- Edit button — shown only for students via JS -->
|
||||
<button class="p-avatar-edit-btn" id="p-avatar-edit-btn" title="Изменить аватар" style="display:none"
|
||||
onclick="document.getElementById('p-avatar-input').click()">
|
||||
onclick="avModalOpen()">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<input type="file" id="p-avatar-input" accept="image/png,image/jpeg,image/webp"
|
||||
style="display:none" onchange="avatarFileSelected(this)">
|
||||
</div>
|
||||
<div class="p-avatar-status" id="p-avatar-status"></div>
|
||||
|
||||
@@ -1068,7 +1192,9 @@
|
||||
const { user, isTeacher, isAdmin } = LS.initPage();
|
||||
LS.showBoardIfAllowed();
|
||||
|
||||
|
||||
document.addEventListener('keydown', e => {
|
||||
if (e.key === 'Escape' && document.getElementById('av-modal').classList.contains('open')) avClose();
|
||||
});
|
||||
|
||||
const ROLE_LABELS = { student:'Ученик', teacher:'Учитель', admin:'Администратор' };
|
||||
const SUBJ_META = {
|
||||
@@ -1151,34 +1277,6 @@
|
||||
} catch {}
|
||||
}
|
||||
|
||||
async function avatarFileSelected(input) {
|
||||
const file = input.files[0];
|
||||
if (!file) return;
|
||||
if (file.size > 2 * 1024 * 1024) { LS.toast('Файл слишком большой (макс. 2 МБ)', 'error'); return; }
|
||||
|
||||
const fd = new FormData();
|
||||
fd.append('avatar', file);
|
||||
|
||||
try {
|
||||
const token = LS.getToken();
|
||||
const res = await fetch('/api/avatar/request', {
|
||||
method: 'POST',
|
||||
headers: token ? { Authorization: 'Bearer ' + token } : {},
|
||||
body: fd,
|
||||
});
|
||||
if (!res.ok) throw new Error();
|
||||
LS.toast('Аватар отправлен на проверку', 'success');
|
||||
// Show pending preview locally
|
||||
const url = URL.createObjectURL(file);
|
||||
const wrap = document.getElementById('big-avatar');
|
||||
wrap.innerHTML = `<img src="${url}" alt="Аватар" style="opacity:.6">`;
|
||||
document.getElementById('p-avatar-status').className = 'p-avatar-status pending';
|
||||
document.getElementById('p-avatar-status').textContent = 'На проверке';
|
||||
} catch {
|
||||
LS.toast('Ошибка загрузки', 'error');
|
||||
}
|
||||
input.value = '';
|
||||
}
|
||||
|
||||
/* ── Student ── */
|
||||
async function loadStudentStats() {
|
||||
@@ -1741,8 +1839,394 @@
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════
|
||||
Avatar Modal
|
||||
══════════════════════════════════════════════════ */
|
||||
let _avImg = null, _avZoom = 1, _avOffX = 0, _avOffY = 0;
|
||||
let _avDrag = false, _avDragStartX = 0, _avDragStartY = 0;
|
||||
let _avLastTouchDist = 0;
|
||||
|
||||
function avModalOpen() {
|
||||
const modal = document.getElementById('av-modal');
|
||||
|
||||
// Mirror current avatar into modal preview
|
||||
const bigAv = document.getElementById('big-avatar');
|
||||
const preEl = document.getElementById('av-modal-cur');
|
||||
const img = bigAv.querySelector('img');
|
||||
if (img) {
|
||||
preEl.innerHTML = `<img src="${img.src}" alt="Аватар">`;
|
||||
} else {
|
||||
preEl.innerHTML = '';
|
||||
preEl.textContent = bigAv.textContent || 'LS';
|
||||
}
|
||||
|
||||
// Show delete btn only if has actual avatar
|
||||
document.getElementById('av-del-btn').classList.toggle('visible', !!img);
|
||||
|
||||
avLoadStatus();
|
||||
modal.classList.add('open');
|
||||
if (LS.sfx) LS.sfx.play('modal_open');
|
||||
}
|
||||
|
||||
function avClose() {
|
||||
document.getElementById('av-modal').classList.remove('open');
|
||||
avBack();
|
||||
if (LS.sfx) LS.sfx.play('modal_close');
|
||||
}
|
||||
|
||||
function avModalClickOutside(e) {
|
||||
if (e.target === document.getElementById('av-modal')) avClose();
|
||||
}
|
||||
|
||||
/* ── Step 1: Drag & drop ── */
|
||||
function avDragOver(e) { e.preventDefault(); document.getElementById('av-drop').classList.add('drag-over'); }
|
||||
function avDragLeave() { document.getElementById('av-drop').classList.remove('drag-over'); }
|
||||
function avDrop(e) {
|
||||
e.preventDefault();
|
||||
document.getElementById('av-drop').classList.remove('drag-over');
|
||||
const f = e.dataTransfer.files[0];
|
||||
if (f) avLoadFile(f);
|
||||
}
|
||||
function avFileChosen(inp) { if (inp.files[0]) avLoadFile(inp.files[0]); inp.value = ''; }
|
||||
|
||||
function avLoadFile(file) {
|
||||
if (file.size > 2 * 1024 * 1024) { LS.toast('Файл слишком большой (макс. 2 МБ)', 'error'); return; }
|
||||
if (!['image/png','image/jpeg','image/webp'].includes(file.type)) { LS.toast('Формат не поддерживается', 'error'); return; }
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = ev => {
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
_avImg = img;
|
||||
_avZoom = 1;
|
||||
_avOffX = 0;
|
||||
_avOffY = 0;
|
||||
document.getElementById('av-zoom').value = 100;
|
||||
document.getElementById('av-s1').style.display = 'none';
|
||||
document.getElementById('av-s2').style.display = 'flex';
|
||||
avDraw();
|
||||
avBindCanvas();
|
||||
};
|
||||
img.src = ev.target.result;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
function avBack() {
|
||||
document.getElementById('av-s1').style.display = 'flex';
|
||||
document.getElementById('av-s2').style.display = 'none';
|
||||
_avImg = null;
|
||||
_avDrag = false;
|
||||
}
|
||||
|
||||
/* ── Step 2: Canvas crop ── */
|
||||
function avDraw() {
|
||||
const c = document.getElementById('av-canvas');
|
||||
const ctx = c.getContext('2d');
|
||||
const S = c.width; // 280
|
||||
const r = S / 2 - 5;
|
||||
if (!_avImg) return;
|
||||
|
||||
const minScale = S / Math.min(_avImg.naturalWidth, _avImg.naturalHeight);
|
||||
const scale = minScale * _avZoom;
|
||||
const iw = _avImg.naturalWidth * scale;
|
||||
const ih = _avImg.naturalHeight * scale;
|
||||
const ix = S / 2 - iw / 2 + _avOffX;
|
||||
const iy = S / 2 - ih / 2 + _avOffY;
|
||||
|
||||
ctx.clearRect(0, 0, S, S);
|
||||
|
||||
// Dark background
|
||||
ctx.fillStyle = '#1a1248';
|
||||
ctx.fillRect(0, 0, S, S);
|
||||
|
||||
// Dimmed full image (outside circle)
|
||||
ctx.globalAlpha = 0.22;
|
||||
ctx.drawImage(_avImg, ix, iy, iw, ih);
|
||||
ctx.globalAlpha = 1;
|
||||
|
||||
// Full-brightness image clipped to circle
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.arc(S / 2, S / 2, r, 0, Math.PI * 2);
|
||||
ctx.clip();
|
||||
ctx.drawImage(_avImg, ix, iy, iw, ih);
|
||||
ctx.restore();
|
||||
|
||||
// Dashed circle border
|
||||
ctx.strokeStyle = 'rgba(155,93,229,0.8)';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.setLineDash([6, 4]);
|
||||
ctx.beginPath();
|
||||
ctx.arc(S / 2, S / 2, r, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
ctx.setLineDash([]);
|
||||
}
|
||||
|
||||
function avZoomChange(v) {
|
||||
_avZoom = v / 100;
|
||||
avDraw();
|
||||
}
|
||||
|
||||
function avBindCanvas() {
|
||||
const c = document.getElementById('av-canvas');
|
||||
|
||||
c.onmousedown = e => {
|
||||
_avDrag = true;
|
||||
_avDragStartX = e.clientX - _avOffX;
|
||||
_avDragStartY = e.clientY - _avOffY;
|
||||
e.preventDefault();
|
||||
};
|
||||
c.onmousemove = e => {
|
||||
if (!_avDrag) return;
|
||||
_avOffX = e.clientX - _avDragStartX;
|
||||
_avOffY = e.clientY - _avDragStartY;
|
||||
avDraw();
|
||||
};
|
||||
c.onmouseup = () => { _avDrag = false; };
|
||||
c.onmouseleave = () => { _avDrag = false; };
|
||||
|
||||
c.onwheel = e => {
|
||||
e.preventDefault();
|
||||
_avZoom = Math.max(0.5, Math.min(3.5, _avZoom - e.deltaY * 0.0012));
|
||||
document.getElementById('av-zoom').value = _avZoom * 100;
|
||||
avDraw();
|
||||
};
|
||||
|
||||
// Touch: drag + pinch-to-zoom
|
||||
c.ontouchstart = e => {
|
||||
e.preventDefault();
|
||||
if (e.touches.length === 1) {
|
||||
_avDrag = true;
|
||||
_avDragStartX = e.touches[0].clientX - _avOffX;
|
||||
_avDragStartY = e.touches[0].clientY - _avOffY;
|
||||
} else if (e.touches.length === 2) {
|
||||
_avDrag = false;
|
||||
_avLastTouchDist = Math.hypot(
|
||||
e.touches[0].clientX - e.touches[1].clientX,
|
||||
e.touches[0].clientY - e.touches[1].clientY
|
||||
);
|
||||
}
|
||||
};
|
||||
c.ontouchmove = e => {
|
||||
e.preventDefault();
|
||||
if (e.touches.length === 1 && _avDrag) {
|
||||
_avOffX = e.touches[0].clientX - _avDragStartX;
|
||||
_avOffY = e.touches[0].clientY - _avDragStartY;
|
||||
avDraw();
|
||||
} else if (e.touches.length === 2) {
|
||||
const d = Math.hypot(
|
||||
e.touches[0].clientX - e.touches[1].clientX,
|
||||
e.touches[0].clientY - e.touches[1].clientY
|
||||
);
|
||||
if (_avLastTouchDist) {
|
||||
_avZoom = Math.max(0.5, Math.min(3.5, _avZoom * (d / _avLastTouchDist)));
|
||||
document.getElementById('av-zoom').value = _avZoom * 100;
|
||||
avDraw();
|
||||
}
|
||||
_avLastTouchDist = d;
|
||||
}
|
||||
};
|
||||
c.ontouchend = () => { _avDrag = false; _avLastTouchDist = 0; };
|
||||
}
|
||||
|
||||
/* ── Crop, render to 400×400, upload ── */
|
||||
async function avSubmit() {
|
||||
const btn = document.getElementById('av-btn-send');
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Отправка…';
|
||||
|
||||
try {
|
||||
const S = 280;
|
||||
const OUT = 400;
|
||||
|
||||
const out = document.createElement('canvas');
|
||||
out.width = out.height = OUT;
|
||||
const oc = out.getContext('2d');
|
||||
|
||||
const minScale = S / Math.min(_avImg.naturalWidth, _avImg.naturalHeight);
|
||||
const ratio = OUT / S;
|
||||
const scale = minScale * _avZoom * ratio;
|
||||
const iw = _avImg.naturalWidth * scale;
|
||||
const ih = _avImg.naturalHeight * scale;
|
||||
const ix = OUT / 2 - iw / 2 + _avOffX * ratio;
|
||||
const iy = OUT / 2 - ih / 2 + _avOffY * ratio;
|
||||
|
||||
oc.beginPath();
|
||||
oc.arc(OUT / 2, OUT / 2, OUT / 2, 0, Math.PI * 2);
|
||||
oc.clip();
|
||||
oc.drawImage(_avImg, ix, iy, iw, ih);
|
||||
|
||||
out.toBlob(async blob => {
|
||||
try {
|
||||
const fd = new FormData();
|
||||
fd.append('avatar', blob, 'avatar.jpg');
|
||||
const token = LS.getToken();
|
||||
const res = await fetch('/api/avatar/request', {
|
||||
method: 'POST',
|
||||
headers: token ? { Authorization: 'Bearer ' + token } : {},
|
||||
body: fd,
|
||||
});
|
||||
if (!res.ok) throw new Error();
|
||||
|
||||
const blobUrl = URL.createObjectURL(blob);
|
||||
|
||||
// Update left-panel avatar (pending opacity)
|
||||
document.getElementById('big-avatar').innerHTML =
|
||||
`<img src="${blobUrl}" alt="Аватар" style="opacity:.55">`;
|
||||
const pSt = document.getElementById('p-avatar-status');
|
||||
pSt.className = 'p-avatar-status pending';
|
||||
pSt.textContent = 'На проверке';
|
||||
|
||||
// Update modal preview
|
||||
const preEl = document.getElementById('av-modal-cur');
|
||||
preEl.innerHTML = `<img src="${blobUrl}" alt="Аватар" style="opacity:.55">`;
|
||||
document.getElementById('av-del-btn').classList.add('visible');
|
||||
|
||||
LS.toast('Аватар отправлен на проверку', 'success');
|
||||
if (LS.sfx) LS.sfx.play('success');
|
||||
avBack();
|
||||
avLoadStatus();
|
||||
} catch {
|
||||
LS.toast('Ошибка загрузки', 'error');
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Отправить на проверку';
|
||||
}
|
||||
}, 'image/jpeg', 0.92);
|
||||
} catch {
|
||||
LS.toast('Ошибка обработки изображения', 'error');
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Отправить на проверку';
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Delete avatar ── */
|
||||
async function avDelete() {
|
||||
if (!confirm('Удалить аватар?')) return;
|
||||
try {
|
||||
const token = LS.getToken();
|
||||
const res = await fetch('/api/avatar/me', {
|
||||
method: 'DELETE',
|
||||
headers: token ? { Authorization: 'Bearer ' + token } : {},
|
||||
});
|
||||
if (!res.ok) throw new Error();
|
||||
|
||||
const initials = (document.getElementById('profile-name').textContent || 'LS')
|
||||
.split(' ').slice(0, 2).map(w => w[0]?.toUpperCase() || '').join('') || 'LS';
|
||||
|
||||
const bigAv = document.getElementById('big-avatar');
|
||||
bigAv.innerHTML = '';
|
||||
bigAv.textContent = initials;
|
||||
|
||||
const preEl = document.getElementById('av-modal-cur');
|
||||
preEl.innerHTML = '';
|
||||
preEl.textContent = initials;
|
||||
|
||||
document.getElementById('p-avatar-status').className = 'p-avatar-status';
|
||||
document.getElementById('av-del-btn').classList.remove('visible');
|
||||
document.getElementById('av-modal-status').className = 'av-status-row';
|
||||
|
||||
LS.toast('Аватар удалён', 'success');
|
||||
avClose();
|
||||
} catch {
|
||||
LS.toast('Ошибка удаления', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Load moderation status into modal ── */
|
||||
async function avLoadStatus() {
|
||||
try {
|
||||
const data = await LS.get('/api/avatar/my-status');
|
||||
const el = document.getElementById('av-modal-status');
|
||||
if (!data.request || data.request.status === 'approved') {
|
||||
el.className = 'av-status-row'; return;
|
||||
}
|
||||
const r = data.request;
|
||||
if (r.status === 'pending') {
|
||||
el.className = 'av-status-row pending';
|
||||
el.textContent = 'Фото отправлено — ожидает проверки';
|
||||
} else if (r.status === 'rejected') {
|
||||
el.className = 'av-status-row rejected';
|
||||
el.textContent = r.reject_msg ? 'Отклонено: ' + r.reject_msg : 'Фото отклонено';
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
</script>
|
||||
<script src="/js/search.js"></script>
|
||||
<script src="/js/mobile.js"></script>
|
||||
|
||||
<!-- ══ Avatar Modal ══ -->
|
||||
<div class="av-ovl" id="av-modal" onclick="avModalClickOutside(event)">
|
||||
<div class="av-dlg" onclick="event.stopPropagation()">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="av-hdr">
|
||||
<span class="av-title">
|
||||
<span class="av-title-dot"></span>
|
||||
Аватар профиля
|
||||
</span>
|
||||
<button class="av-close" onclick="avClose()" aria-label="Закрыть">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Step 1: Select / Upload -->
|
||||
<div class="av-step" id="av-s1">
|
||||
<!-- Current avatar (large) -->
|
||||
<div class="av-cur" id="av-modal-cur">LS</div>
|
||||
|
||||
<!-- Status (pending / rejected) -->
|
||||
<div class="av-status-row" id="av-modal-status"></div>
|
||||
|
||||
<!-- Drop zone -->
|
||||
<div class="av-drop" id="av-drop"
|
||||
ondragover="avDragOver(event)" ondragleave="avDragLeave(event)" ondrop="avDrop(event)"
|
||||
onclick="document.getElementById('av-file-inp').click()" role="button" tabindex="0"
|
||||
onkeydown="if(event.key==='Enter'||event.key===' ')this.click()">
|
||||
<svg class="av-drop-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||||
<polyline points="17 8 12 3 7 8"/>
|
||||
<line x1="12" y1="3" x2="12" y2="15"/>
|
||||
</svg>
|
||||
<div class="av-drop-txt">Перетащите фото или нажмите для выбора</div>
|
||||
<div class="av-drop-sub">PNG, JPG, WebP · до 2 МБ</div>
|
||||
<input type="file" id="av-file-inp" accept="image/png,image/jpeg,image/webp"
|
||||
style="display:none" onchange="avFileChosen(this)">
|
||||
</div>
|
||||
|
||||
<!-- Delete current avatar -->
|
||||
<button class="av-del-btn" id="av-del-btn" onclick="avDelete()">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="3 6 5 6 21 6"/>
|
||||
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
|
||||
<path d="M10 11v6"/><path d="M14 11v6"/>
|
||||
</svg>
|
||||
Удалить аватар
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Crop / Zoom -->
|
||||
<div class="av-step" id="av-s2" style="display:none">
|
||||
<canvas id="av-canvas" width="280" height="280"></canvas>
|
||||
<div class="av-zoom-row">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:15px;height:15px">
|
||||
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/>
|
||||
</svg>
|
||||
<input type="range" id="av-zoom" min="100" max="350" value="100" oninput="avZoomChange(this.value)">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:15px;height:15px">
|
||||
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/><line x1="11" y1="8" x2="11" y2="14"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="av-crop-hint">Перетащите для позиционирования · колёсико / слайдер для масштаба</div>
|
||||
<div class="av-crop-btns">
|
||||
<button class="av-btn-back" onclick="avBack()">Назад</button>
|
||||
<button class="av-btn-send" id="av-btn-send" onclick="avSubmit()">Отправить на проверку</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user