Spaces:
Sleeping
Sleeping
| <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>VSERVERS | 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; } | |
| /* Loader overlay pentru login */ | |
| #login-loader { background:var(--black); } | |
| /* Role fields animatie */ | |
| .role-fields-wrap { position:relative; min-height:200px; } | |
| .fields { position:absolute; inset:0; padding:20px 16px; } | |
| .fields.current { position:relative; } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- LOADER --> | |
| <div class="loader-overlay" 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">INIȚIALIZARE</div> | |
| </div> | |
| <div class="login-wrap" id="login-wrap" style="opacity:0"> | |
| <div class="login-header fade-in"> | |
| <img src="logo.svg" alt="VSERVERS"> | |
| <h1>VSERVERS</h1> | |
| <p>Sistem de Gestiune Educațională</p> | |
| </div> | |
| <div class="server-status fade-in-2"> | |
| <span class="status-dot online"></span> | |
| <span>SERVER ACTIV · 93.117.161.226</span> | |
| </div> | |
| <div class="fade-in-3"> | |
| <!-- Role tabs --> | |
| <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> | |
| <!-- Fields wrapper --> | |
| <div class="role-fields-wrap" id="fields-wrap"> | |
| <!-- ELEV --> | |
| <div class="fields current show" id="f-elev" style="padding:20px 16px;border:1px solid var(--glass-border);border-top:none;"> | |
| <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:14px;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" style="padding:20px 16px;border:1px solid var(--glass-border);border-top:none;"> | |
| <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:14px;"> | |
| <button class="btn-primary" style="width:100%;letter-spacing:3px;" onclick="doLogin()">AUTENTIFICARE</button> | |
| </div> | |
| </div> | |
| <!-- ADMIN --> | |
| <div class="fields" id="f-admin" style="padding:20px 16px;border:1px solid var(--glass-border);border-top:none;"> | |
| <div class="field"> | |
| <label>Parolă Administrator</label> | |
| <input type="password" id="admin-pass" placeholder="—————————————" autocomplete="off"> | |
| </div> | |
| <div style="margin-top:14px;"> | |
| <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;border-top:none;"></div> | |
| </div> | |
| <div class="footer-mini fade-in-4"> | |
| VSERVERS ©2026 — Victor Roșca<br> | |
| 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 persistenta ── | |
| const role = sessionStorage.getItem('vs_role'); | |
| if (role === 'elev') { | |
| window.location.href = 'elev-dashboard.html'; // redirect direct | |
| } else if (role === 'profesor') { | |
| window.location.href = 'profesor-dashboard.html'; | |
| } | |
| // ── Loader sequence ── | |
| const loaderTexts = ['INIȚIALIZARE','FIREBASE','ELEVI','GATA']; | |
| let li = 0; | |
| const ltEl = document.getElementById('loader-text'); | |
| const ltIv = setInterval(()=>{ li++; if(li<loaderTexts.length) ltEl.textContent=loaderTexts[li]; },350); | |
| 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) {} | |
| // ── Hide loader ── | |
| clearInterval(ltIv); | |
| await new Promise(r=>setTimeout(r,400)); | |
| document.getElementById('login-loader').classList.add('hide'); | |
| document.getElementById('login-wrap').style.opacity='1'; | |
| document.getElementById('login-wrap').style.transition='opacity 0.4s ease'; | |
| </script> | |
| <script> | |
| let role = 'elev'; | |
| const ADMIN_PASS = '122012'; | |
| let _switching = false; | |
| function switchRole(r, btn) { | |
| if (_switching || r === role) return; | |
| _switching = true; | |
| const currentEl = document.getElementById('f-'+role); | |
| const nextEl = document.getElementById('f-'+r); | |
| // Fade out current | |
| currentEl.style.transition = 'opacity 0.18s ease, transform 0.18s ease'; | |
| currentEl.style.opacity = '0'; | |
| currentEl.style.transform = 'translateY(-5px)'; | |
| setTimeout(() => { | |
| currentEl.classList.remove('show','current'); | |
| currentEl.style.position = 'absolute'; | |
| currentEl.style.opacity = ''; | |
| currentEl.style.transform= ''; | |
| // Fade in next | |
| nextEl.style.opacity = '0'; | |
| nextEl.style.transform = 'translateY(5px)'; | |
| nextEl.classList.add('show','current'); | |
| nextEl.style.position = 'relative'; | |
| requestAnimationFrame(() => { | |
| nextEl.style.transition = 'opacity 0.22s ease, transform 0.22s ease'; | |
| nextEl.style.opacity = '1'; | |
| nextEl.style.transform = 'translateY(0)'; | |
| }); | |
| // Update tab styles | |
| document.querySelectorAll('.role-tab').forEach(b => b.classList.remove('active')); | |
| btn.classList.add('active'); | |
| role = r; | |
| hideError('err-msg'); | |
| setTimeout(() => { | |
| nextEl.style.transition = ''; | |
| _switching = false; | |
| }, 250); | |
| }, 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'); | |
| // Show loader | |
| 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(300); | |
| 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'); return; } | |
| // Sesiune persistenta pentru elevi | |
| sessionStorage.setItem('vs_role','elev'); | |
| sessionStorage.setItem('vs_uid', id); | |
| sessionStorage.setItem('vs_name', data.nume); | |
| sessionStorage.setItem('vs_vpass', data.vpassId||id); | |
| document.getElementById('loader-text').textContent = 'ACCES ACORDAT'; | |
| await delay(400); | |
| 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'); return; } | |
| // Sesiune persistenta pentru profesori | |
| sessionStorage.setItem('vs_role','profesor'); | |
| sessionStorage.setItem('vs_uid', id); | |
| sessionStorage.setItem('vs_name', snap.data().nume); | |
| sessionStorage.setItem('vs_materie', snap.data().materie||''); | |
| document.getElementById('loader-text').textContent = 'ACCES ACORDAT'; | |
| await delay(400); | |
| window.location.href = 'profesor-dashboard.html'; | |
| } else { | |
| // ADMIN — fara sesiune persistenta (sessionStorage doar) | |
| 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(400); | |
| window.location.href = 'admin-dashboard.html'; | |
| } | |
| } catch(e) { | |
| showError('err-msg','err-001'); | |
| } finally { | |
| loader.classList.add('hide'); | |
| } | |
| } | |
| // Enter key support | |
| document.addEventListener('keydown', e => { | |
| if (e.key === 'Enter') doLogin(); | |
| }); | |
| function delay(ms) { return new Promise(r=>setTimeout(r,ms)); } | |
| </script> | |
| </body> | |
| </html> | |