diff --git a/manager/server.selfhosted.js b/manager/server.selfhosted.js index f0abb3f..fbf8e65 100644 --- a/manager/server.selfhosted.js +++ b/manager/server.selfhosted.js @@ -101,6 +101,14 @@ body{font-family:'Inter',sans-serif;background:#f8fafc;min-height:100vh;display: .error-page p{color:#94a3b8;font-size:14px} .loading{text-align:center;padding:80px 32px;color:#94a3b8} .top-bar{height:5px;width:100%;background:var(--primary,#4f46e5)} +.toast{position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-120px);max-width:480px;width:calc(100% - 40px);padding:16px 20px;border-radius:16px;font-size:14px;font-weight:600;color:#fff;box-shadow:0 20px 40px rgba(0,0,0,.15);z-index:9999;display:flex;align-items:center;gap:12px;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .4s;opacity:0} +.toast.show{transform:translateX(-50%) translateY(0);opacity:1} +.toast.error{background:linear-gradient(135deg,#ef4444,#dc2626)} +.toast.warning{background:linear-gradient(135deg,#f59e0b,#d97706)} +.toast .toast-icon{font-size:20px;flex-shrink:0} +.toast .toast-msg{flex:1;line-height:1.5} +.toast .toast-close{background:rgba(255,255,255,.2);border:none;color:#fff;width:28px;height:28px;border-radius:8px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s} +.toast .toast-close:hover{background:rgba(255,255,255,.35)} @@ -109,6 +117,19 @@ body{font-family:'Inter',sans-serif;background:#f8fafc;min-height:100vh;display: const slug='${slug}'; const app=document.getElementById('app'); +function showToast(msg, type){ + type = type || 'error'; + var existing = document.querySelector('.toast'); + if(existing) existing.remove(); + var icon = type === 'error' ? '⚠️' : '⚠️'; + var t = document.createElement('div'); + t.className = 'toast ' + type; + t.innerHTML = '' + icon + '' + msg + ''; + document.body.appendChild(t); + setTimeout(function(){ t.classList.add('show'); }, 10); + setTimeout(function(){ t.classList.remove('show'); setTimeout(function(){ t.remove(); }, 400); }, 5000); +} + function maskPhone(v){ if(!v)return ""; v=v.replace(/[^0-9]/g,""); @@ -345,7 +366,7 @@ async function submitForm(e){ const uploadData = await uploadRes.json(); respostas[input.name] = uploadData.url; } catch(err) { - alert('Falha ao enviar arquivo. Tente novamente.'); + showToast('Falha ao enviar arquivo. Tente novamente.', 'error'); btn.disabled=false;btn.textContent='Enviar Pré-Matrícula'; return false; } @@ -362,9 +383,9 @@ async function submitForm(e){ if(res.ok){ app.innerHTML='
✅

Enviado com sucesso!

'+window._successMsg+'

'; }else{ - const err=await res.json();alert(err.error||'Erro ao enviar.');btn.disabled=false;btn.textContent='Enviar Pré-Matrícula'; + const err=await res.json();showToast(err.error||'Erro ao enviar.', 'error');btn.disabled=false;btn.textContent='Enviar Pré-Matrícula'; } - }catch(err){alert('Erro de conexão.');btn.disabled=false;btn.textContent='Enviar Pré-Matrícula'} + }catch(err){showToast('Erro de conexão. Verifique sua internet.', 'warning');btn.disabled=false;btn.textContent='Enviar Pré-Matrícula'} return false; } init();