Spaces:

vsmdvic
/

idea

Sleeping

File size: 16,224 Bytes

469a4d4

<!DOCTYPE html>
<html lang="ro">
<head>
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>IDEA | Login</title>
<link rel="stylesheet" href="style.css">
<script src="errors.js"></script>
<style>
  body {
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    min-height:100dvh; padding:20px 14px;
  }
  .login-wrap { width:100%; max-width:360px; }

  /* Mesaj bun venit */
  .welcome-overlay {
    position:fixed; inset:0; z-index:10000;
    background:var(--black);
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding:32px 24px; text-align:center;
  }
  .welcome-overlay.hide {
    animation:wo-out 0.6s ease forwards;
    pointer-events:none;
  }
  @keyframes wo-out {
    0%   { opacity:1; transform:scale(1); }
    100% { opacity:0; transform:scale(1.03); }
  }
  .wl-logo { width:52px; height:52px; opacity:0.85; margin-bottom:24px; animation:fadeIn 0.6s ease both; }
  .wl-title {
    font-family:'Cormorant Garamond',serif;
    font-size:34px; letter-spacing:6px; font-weight:600;
    margin-bottom:10px;
    animation:fadeIn 0.6s ease 0.1s both;
  }
  .wl-sub {
    font-size:10px; letter-spacing:2px; color:var(--white-dim);
    line-height:2.2; max-width:300px;
    animation:fadeIn 0.6s ease 0.2s both;
  }
  .wl-line {
    width:40px; height:1px; background:var(--glass-border);
    margin:20px auto;
    animation:fadeIn 0.6s ease 0.25s both;
  }
  .wl-loading {
    display:flex; align-items:center; gap:10px;
    animation:fadeIn 0.6s ease 0.3s both;
  }
  .wl-dot {
    width:5px; height:5px; border-radius:50%;
    background:rgba(240,240,240,0.35);
    animation:wl-bounce 1.4s ease-in-out infinite;
  }
  .wl-dot:nth-child(2) { animation-delay:0.2s; }
  .wl-dot:nth-child(3) { animation-delay:0.4s; }
  @keyframes wl-bounce {
    0%,60%,100% { transform:translateY(0); opacity:0.35; }
    30%          { transform:translateY(-6px); opacity:1; }
  }
  .wl-status {
    font-size:9px; letter-spacing:3px; color:var(--white-faint);
    animation:fadeIn 0.6s ease 0.35s both;
  }

  /* Fields animatie */
  .role-fields-wrap { position:relative; overflow:hidden; }
  .fields {
    display:none; opacity:0;
    border:1px solid var(--glass-border); border-top:none;
    padding:22px 18px;
  }
  .fields.show {
    display:block;
    animation:fieldFadeIn 0.25s ease forwards;
  }
  @keyframes fieldFadeIn {
    from { opacity:0; transform:translateY(7px); }
    to   { opacity:1; transform:translateY(0); }
  }
</style>
</head>
<body>

<!-- BUN VENIT OVERLAY -->
<div class="welcome-overlay" id="welcome-overlay">
  <img src="logo.svg" class="wl-logo" alt="IDEA">
  <div class="wl-title">IDEA</div>
  <div class="wl-sub">
    Bine ai venit!<br>
    Interfața Digitală de Educație Aplicată<br>
    se pregătește pentru tine.
  </div>
  <div class="wl-line"></div>
  <div class="wl-loading">
    <div class="wl-dot"></div>
    <div class="wl-dot"></div>
    <div class="wl-dot"></div>
  </div>
  <div class="wl-status" id="wl-status" style="margin-top:14px;">INIȚIALIZARE</div>
</div>

<!-- LOADER (autentificare) -->
<div class="loader-overlay hide" id="login-loader">
  <div class="loader">
    <div class="inner one"></div>
    <div class="inner two"></div>
    <div class="inner three"></div>
  </div>
  <div class="loader-text" id="loader-text">IDEA</div>
</div>

<div class="login-wrap" id="login-wrap" style="opacity:0">

  <div class="login-header fade-in">
    <img src="logo.svg" alt="IDEA">
    <h1>IDEA</h1>
    <p>Interfața Digitală de Educație Aplicată</p>
  </div>

  <div class="server-status fade-in-2">
    <span class="status-dot online"></span>
    <span>SERVER ACTIV &nbsp;·&nbsp; v2.3</span>
  </div>

  <div class="fade-in-3">
    <div class="role-tabs">
      <button class="role-tab active" id="tab-elev" onclick="switchRole('elev',this)">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="12" cy="7" r="4"/><path d="M4 21c0-4 3.58-7 8-7s8 3 8 7"/></svg>
        ELEV
      </button>
      <button class="role-tab" id="tab-profesor" onclick="switchRole('profesor',this)">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><rect x="3" y="3" width="18" height="13" rx="1"/><path d="M8 21h8M12 16v5"/></svg>
        PROFESOR
      </button>
      <button class="role-tab" id="tab-admin" onclick="switchRole('admin',this)">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        ADMIN
      </button>
    </div>

    <div id="fields-wrap">

      <!-- ELEV -->
      <div class="fields show" id="f-elev">
        <div class="field">
          <label>Identificator Elev</label>
          <select id="elev-id" onchange="checkElevPin()">
            <option value="">— selectează —</option>
          </select>
        </div>
        <div id="pin-field" class="field" style="display:none;">
          <label>Cod VPass</label>
          <input type="password" id="elev-pin" maxlength="6" placeholder="——————" inputmode="numeric" autocomplete="current-password">
        </div>
        <div id="btn-login-wrap" style="margin-top:16px;display:none;">
          <button class="btn-primary" style="width:100%;letter-spacing:3px;" onclick="doLogin()">AUTENTIFICARE</button>
        </div>
        <button class="btn-signup" id="btn-signup" onclick="goSignup()">ÎNREGISTRARE →</button>
        <div class="signup-hint" id="signup-hint">Contul tău nu are încă o parolă.<br>Apasă ÎNREGISTRARE pentru a-l activa.</div>
        <div style="text-align:center;margin-top:12px;display:none;" id="reset-link-wrap">
          <a href="reset.html" style="font-size:9px;color:var(--white-dim);letter-spacing:1px;text-decoration:none;">Am uitat parola →</a>
        </div>
      </div>

      <!-- PROFESOR -->
      <div class="fields" id="f-profesor">
        <div class="field">
          <label>Identificator Profesor</label>
          <select id="prof-id"><option value="">— selectează —</option></select>
        </div>
        <div class="field">
          <label>Cod de Acces</label>
          <input type="password" id="prof-pin" maxlength="6" placeholder="——————" inputmode="numeric">
        </div>
        <div style="margin-top:16px;">
          <button class="btn-primary" style="width:100%;letter-spacing:3px;" onclick="doLogin()">AUTENTIFICARE</button>
        </div>
      </div>

      <!-- ADMIN -->
      <div class="fields" id="f-admin">
        <div class="field">
          <label>Parolă Administrator</label>
          <input type="password" id="admin-pass" placeholder="—————————————" autocomplete="off">
        </div>
        <div style="margin-top:16px;">
          <button class="btn-primary" style="width:100%;letter-spacing:3px;" onclick="doLogin()">AUTENTIFICARE</button>
        </div>
        <div style="margin-top:10px;font-size:9px;color:var(--white-faint);letter-spacing:1px;text-align:center;">
          Sesiunea admin nu este persistentă
        </div>
      </div>

    </div>

    <div class="alert error" id="err-msg" style="margin-top:10px;"></div>
  </div>

  <div class="footer-mini fade-in-4">
    IDEA &copy;2026 &mdash; Victor Roșca &mdash; v2.3<br>
    Interfața Digitală de Educație Aplicată &mdash; Telenești, Moldova
  </div>
</div>

<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js";
import { getFirestore, collection, getDocs, doc, getDoc }
  from "https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore.js";

const cfg = {
  apiKey:"AIzaSyB9--Onx3-_YjD-YzblhZjaWSVVqTQJ1lU",
  authDomain:"vservers1.firebaseapp.com", projectId:"vservers1",
  storageBucket:"vservers1.firebasestorage.app",
  messagingSenderId:"42433037358", appId:"1:42433037358:web:fde70fec79542428b60bbf"
};
const app = initializeApp(cfg);
const db  = getFirestore(app);
window._db=db; window._doc=doc; window._getDoc=getDoc;

// Verifica sesiune
const vsRole = sessionStorage.getItem('vs_role');
if (vsRole === 'elev') {
  if(localStorage.getItem('idea_maintenance')==='1') window.location.href='503.html';
  else window.location.href='elev-dashboard.html';
} else if (vsRole === 'profesor') {
  if(localStorage.getItem('idea_maintenance')==='1') window.location.href='503.html';
  else window.location.href='profesor-dashboard.html';
}

// Statusuri loading
const statusEl = document.getElementById('wl-status');
const steps = ['INIȚIALIZARE','FIREBASE','ELEVI','PROFESORI','GATA'];
let si = 0;
const siv = setInterval(() => {
  si++; if(si < steps.length) statusEl.textContent = steps[si];
}, 400);

window._elevMap = {};

try {
  const snap = await getDocs(collection(db,'elevi'));
  const sel = document.getElementById('elev-id');
  const elevi = [];
  snap.forEach(d => { elevi.push({id:d.id,...d.data()}); window._elevMap[d.id]=d.data(); });
  elevi.sort((a,b)=>(a.pozitie||0)-(b.pozitie||0));
  elevi.forEach(e => {
    const o = document.createElement('option');
    o.value = e.id;
    o.textContent = `${String(e.pozitie||'').padStart(2,'0')}. ${e.nume}`;
    sel.appendChild(o);
  });
} catch(e) { console.error('err-001',e); }

try {
  const snap = await getDocs(collection(db,'profesori'));
  const sel = document.getElementById('prof-id');
  snap.forEach(d => {
    const o = document.createElement('option');
    o.value = d.id;
    o.textContent = `${d.data().nume} — ${d.data().materie||''}`;
    sel.appendChild(o);
  });
} catch(e) {}

clearInterval(siv);
statusEl.textContent = 'GATA';

// Scurt delay pentru UX, apoi ascunde overlay-ul
await new Promise(r => setTimeout(r, 600));
const ov = document.getElementById('welcome-overlay');
ov.classList.add('hide');
setTimeout(() => ov.style.display='none', 650);

document.getElementById('login-wrap').style.transition = 'opacity 0.4s ease';
document.getElementById('login-wrap').style.opacity = '1';
</script>

<script>
let role = 'elev';
const ADMIN_PASS = '122012';
let _switching = false;

// ── Switch Role — animatie 0.2s ──
function switchRole(r, btn) {
  if (_switching || r === role) return;
  _switching = true;

  const currentEl = document.getElementById('f-' + role);
  const nextEl    = document.getElementById('f-' + r);

  document.querySelectorAll('.role-tab').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  hideError('err-msg');

  currentEl.style.transition = 'opacity 0.2s ease, transform 0.2s ease';
  currentEl.style.opacity = '0';
  currentEl.style.transform = 'translateY(-6px)';

  setTimeout(() => {
    currentEl.classList.remove('show');
    currentEl.style.cssText = '';
    role = r;
    nextEl.classList.add('show');
    setTimeout(() => { _switching = false; }, 280);
  }, 200);
}

function checkElevPin() {
  const id   = document.getElementById('elev-id').value;
  const elev = window._elevMap && window._elevMap[id];
  const hasPin = elev && elev.pin != null;
  document.getElementById('pin-field').style.display       = hasPin ? 'block' : 'none';
  document.getElementById('btn-login-wrap').style.display  = hasPin ? 'block' : 'none';
  document.getElementById('btn-signup').classList.toggle('show', !hasPin && !!id);
  document.getElementById('signup-hint').classList.toggle('show', !hasPin && !!id);
  document.getElementById('reset-link-wrap').style.display = hasPin ? 'block' : 'none';
  hideError('err-msg');
}

function goSignup() {
  const id   = document.getElementById('elev-id').value;
  const elev = window._elevMap && window._elevMap[id];
  if (!id || !elev) { showError('err-msg','err-002'); return; }
  sessionStorage.setItem('su_elevId', id);
  sessionStorage.setItem('su_name',   elev.nume);
  sessionStorage.setItem('su_vpass',  elev.vpassId);
  window.location.href = 'signup.html';
}

async function doLogin() {
  hideError('err-msg');
  const loader = document.getElementById('login-loader');
  loader.classList.remove('hide');
  loader.style.opacity='1'; loader.style.visibility='visible';
  document.getElementById('loader-text').textContent = 'AUTENTIFICARE';
  await delay(280);

  try {
    if (role === 'elev') {
      const id  = document.getElementById('elev-id').value;
      const pin = document.getElementById('elev-pin').value;
      if (!id)          { showError('err-msg','err-002'); return; }
      if (pin.length<6) { showError('err-msg','err-022'); return; }
      const snap = await window._getDoc(window._doc(window._db,'elevi',id));
      if (!snap.exists()) { showError('err-msg','err-002'); return; }
      const data = snap.data();
      if (data.pin == null) { showError('err-msg','err-004'); return; }
      if (data.pin !== pin) {
        showError('err-msg','err-003');
        fetch('/api/log',{method:'POST',headers:{'Content-Type':'application/json'},
          body:JSON.stringify({tip:'err_pass',vpass:data.vpassId||id,role:'elev'})}).catch(()=>{});
        return;
      }
      sessionStorage.setItem('vs_role','elev');
      sessionStorage.setItem('vs_uid',  id);
      sessionStorage.setItem('vs_name', data.nume);
      sessionStorage.setItem('vs_vpass',data.vpassId||id);
      fetch('/api/log',{method:'POST',headers:{'Content-Type':'application/json'},
        body:JSON.stringify({tip:'login',vpass:data.vpassId||id,name:data.nume,role:'elev'})}).catch(()=>{});
      document.getElementById('loader-text').textContent='ACCES ACORDAT';
      await delay(380);
      window.location.href='elev-dashboard.html';

    } else if (role === 'profesor') {
      const id  = document.getElementById('prof-id').value;
      const pin = document.getElementById('prof-pin').value;
      if (!id)          { showError('err-msg','err-002'); return; }
      if (pin.length<6) { showError('err-msg','err-022'); return; }
      const snap = await window._getDoc(window._doc(window._db,'profesori',id));
      if (!snap.exists() || snap.data().pin !== pin) {
        showError('err-msg','err-003');
        fetch('/api/log',{method:'POST',headers:{'Content-Type':'application/json'},
          body:JSON.stringify({tip:'err_pass',vpass:id,role:'profesor'})}).catch(()=>{});
        return;
      }
      sessionStorage.setItem('vs_role','profesor');
      sessionStorage.setItem('vs_uid',  id);
      sessionStorage.setItem('vs_name', snap.data().nume);
      sessionStorage.setItem('vs_materie',snap.data().materie||'');
      fetch('/api/log',{method:'POST',headers:{'Content-Type':'application/json'},
        body:JSON.stringify({tip:'login',vpass:id,name:snap.data().nume,role:'profesor'})}).catch(()=>{});
      document.getElementById('loader-text').textContent='ACCES ACORDAT';
      await delay(380);
      if(localStorage.getItem('idea_maintenance')==='1') window.location.href='503.html';
      else window.location.href='profesor-dashboard.html';

    } else {
      if (document.getElementById('admin-pass').value !== ADMIN_PASS) {
        showError('err-msg','err-020'); return;
      }
      sessionStorage.setItem('vs_role','admin');
      document.getElementById('loader-text').textContent='ACCES ACORDAT';
      await delay(380);
      window.location.href='admin-dashboard.html';
    }
  } catch(e) {
    showError('err-msg','err-001');
  } finally {
    loader.classList.add('hide');
  }
}

document.addEventListener('keydown', e => { if(e.key==='Enter') doLogin(); });
function delay(ms) { return new Promise(r => setTimeout(r,ms)); }
</script>

<a href="vhelp.html" class="vhelp-fab" title="VHelp">
  <svg viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.9)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
    <circle cx="9" cy="10" r="0.5" fill="rgba(255,255,255,0.9)"/>
    <circle cx="12" cy="10" r="0.5" fill="rgba(255,255,255,0.9)"/>
    <circle cx="15" cy="10" r="0.5" fill="rgba(255,255,255,0.9)"/>
  </svg>
</a>
</body>
</html>