SetTitle("Title");
?><!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Согласие — подпись</title>
<style>
:root{--bg:#f7f8fc;--paper:#fff;--text:#0c1224;--muted:#6b7280;--line:#e7ecf3;--pill:#e9eff9;--shadow:0 10px 34px rgba(18,27,106,.12)}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans",sans-serif}
.wrap{max-width:980px;margin:0 auto;padding:28px 16px}
.btn{border:0;border-radius:14px;background:#0d1556;color:#fff;padding:12px 18px;font-weight:700;box-shadow:var(--shadow);cursor:pointer}
.btn.light{background:#e7ecff;color:#0d1556}
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.card-body{padding:18px}
.paper{border:1px solid #cbd2e1;border-radius:16px;padding:26px;min-height:520px}
.ph{display:inline-block;border:2px solid #ef4444;border-radius:8px;padding:2px 6px;line-height:1;margin:0 2px}
.muted{color:#6b7280}
.sign-row{display:flex;justify-content:space-between;margin-top:32px}
.sign-slot{width:260px;border-bottom:1px solid #cbd5e1;height:40px;position:relative}
.sign-slot img{position:absolute;left:0;bottom:-2px;height:36px}
.pad{background:var(--paper);border:1px dashed #bac2d6;border-radius:16px;height:220px;touch-action:none;position:relative;margin-top:12px}
.pad canvas{width:100%;height:100%;display:block;border-radius:16px}
.pad .hint{position:absolute;inset:auto 16px 12px 16px;color:#8b95ad;font-size:13px;text-align:center;pointer-events:none}
.toolbar{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}
</style>
<!-- html2canvas для сохранения документа как изображения -->
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
</head>
<body>
<main class="wrap">
<h1 style="text-align:center;margin:0 0 14px">Согласие — подпись</h1>
<div class="card card-body">
<div class="muted" style="margin-bottom:8px">Ссылка на эту страницу можно отправить клиенту.</div>
<article class="paper" id="doc-paper">
<h2 style="margin:0 0 8px;text-align:center">СОГЛАСИЕ</h2>
<p class="muted" style="text-align:center;margin:0 0 16px">на приобретение дополнительных услуг</p>
<p>Я, <span class="ph" id="d-fio">—</span>, соглашаюсь на приобретение следующих дополнительных услуг:
<span class="ph" id="d-service">—</span> (код EMD).</p>
<p>К договору перевозки пассажиров и багажа рейсом ПАО «Авиакомпания «ЮТэйр».</p>
<p>№ <span class="ph" id="d-ticket">—</span> от <span class="ph" id="d-date1">—</span> по маршруту
<span class="ph" id="d-route">—</span>.</p>
<p>«<span id="d-date2" class="ph">—</span>» г.</p>
<div class="sign-row">
<div>
<div class="muted">подпись</div>
<div class="sign-slot"><img id="sign-img" alt="Подпись" class="hide"></div>
</div>
<div style="align-self:flex-end" class="muted">(ФИО: <span id="d-fio-3">—</span>)</div>
</div>
</article>
<div class="toolbar">
<button class="btn light" id="btn-attach" type="button">Вставить подпись в документ</button>
<button class="btn" id="btn-save" type="button">Сохранить (PNG)</button>
<a class="btn light" id="btn-back" href="/">← На главную</a>
</div>
</div>
<section class="card card-body" style="margin-top:14px">
<h3 style="margin:0 0 10px">Подпись на экране</h3>
<div class="pad" id="pad">
<canvas id="canvas"></canvas>
<div class="hint">Нарисуйте подпись пальцем/стилусом. Двойной тап — отмена последнего штриха.</div>
</div>
<div class="toolbar">
<button class="btn light" id="clear" type="button">Очистить</button>
<button class="btn light" id="attach" type="button">Вставить в документ</button>
<button class="btn light" id="dl" type="button">Скачать PNG подписи</button>
</div>
<div id="result" class="muted" style="margin-top:10px"></div>
</section>
</main>
<script>
const qs = new URLSearchParams(location.search);
const AGREEMENT_ID = qs.get('id');
if (!AGREEMENT_ID) {
alert('Не передан id соглашения.'); location.href = '/'; }
// загрузка данных соглашения
(async function load(){
const a = await fetch(`/api/agreements/${AGREEMENT_ID}`).then(r=>r.json());
const set = (id, val) => document.getElementById(id).textContent = val || '—';
set('d-fio', a.fio); set('d-service', a.service); set('d-ticket', a.ticket);
set('d-route', a.route); set('d-date1', a.dateDisplay); set('d-date2', a.dateDisplay); set('d-fio-3', a.fio);
document.getElementById('btn-back').href = '/';
if (a.imagePath){
// уже подписано
document.getElementById('result').innerHTML =
`Уже сохранено: <a href="${a.imagePath}" download>скачать PNG</a>`;
}
})();
// ===== Canvas-подпись
const canvas = document.getElementById('canvas');
const pad = document.getElementById('pad');
const ctx = canvas.getContext('2d');
const DPR = window.devicePixelRatio || 1;
let drawing = false; const strokes = []; let lastTap = 0;
function resize(){
const r = pad.getBoundingClientRect();
canvas.width = Math.floor(r.width * DPR); canvas.height = Math.floor(r.height * DPR);
canvas.style.width = r.width + 'px'; canvas.style.height = r.height + 'px';
ctx.setTransform(DPR,0,0,DPR,0,0); ctx.lineWidth = 2; ctx.lineCap = 'round'; ctx.lineJoin='round'; ctx.strokeStyle = '#0c1224';
redraw();
}
function redraw(){ ctx.clearRect(0,0,canvas.width,canvas.height); ctx.save(); ctx.scale(DPR,DPR);
strokes.forEach(p=>{ ctx.beginPath(); p.forEach((q,i)=>{ i?ctx.lineTo(q.x,q.y):ctx.moveTo(q.x,q.y) }); ctx.stroke(); });
ctx.restore(); }
function addPoint(x,y){ if(!drawing) return; strokes.at(-1).push({x,y}); redraw(); }
canvas.addEventListener('pointerdown', e=>{ drawing=true; strokes.push([]); addPoint(e.offsetX,e.offsetY); canvas.setPointerCapture(e.pointerId); });
canvas.addEventListener('pointermove', e=> addPoint(e.offsetX,e.offsetY));
canvas.addEventListener('pointerup', e=>{ drawing=false; canvas.releasePointerCapture(e.pointerId); });
pad.addEventListener('pointerdown', e=>{ const now=Date.now(); if(now-lastTap<300){ strokes.pop(); redraw(); } lastTap=now; });
window.addEventListener('resize', resize, {passive:true}); resize();
document.getElementById('clear').addEventListener('click', ()=>{ strokes.length=0; redraw(); });
document.getElementById('dl').addEventListener('click', ()=>{
if(!strokes.length) return alert('Сначала подпишите.');
const url = canvas.toDataURL('image/png'); const a = Object.assign(document.createElement('a'), {href:url, download:'signature.png'}); a.click();
});
function attachSignature(){
if(!strokes.length){ alert('Сначала поставьте подпись.'); return false; }
const url = canvas.toDataURL('image/png');
const img = document.getElementById('sign-img'); img.src = url; img.classList.remove('hide');
document.getElementById('doc-paper').scrollIntoView({behavior:'smooth'});
return true;
}
document.getElementById('attach').addEventListener('click', attachSignature);
document.getElementById('btn-attach').addEventListener('click', attachSignature);
// ===== Сохранение: делаем скрин документа и отправляем PNG на сервер
document.getElementById('btn-save').addEventListener('click', async ()=>{
if (!attachSignature()) return; // если ещё не вставили
const node = document.getElementById('doc-paper');
const canvasDoc = await html2canvas(node, { scale: 2, useCORS: true });
const dataUrl = canvasDoc.toDataURL('image/png');
const res = await fetch(`/api/agreements/${AGREEMENT_ID}/final-image`, {
method:'POST', headers:{'Content-Type':'application/json'},
body: JSON.stringify({ image: dataUrl })
}).then(r=>r.json());
if (res.ok){
document.getElementById('result').innerHTML =
`Сохранено ✅ — <a href="${res.file}" download>скачать PNG</a>`;
} else {
alert('Ошибка сохранения');
}
});
</script>
</body>
</html>