<!DOCTYPE html><html lang="ro"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Admin Panel | TractariWAB</title><meta name="robots" content="noindex, nofollow"><script src="https://cdn.tailwindcss.com"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet"><link rel="icon" type="image/svg+xml" href="./res/img/favicon.svg"><script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-app-compat.js"></script><script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-auth-compat.js"></script><script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore-compat.js"></script><script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-storage-compat.js"></script><script>tailwind.config={theme:{extend:{colors:{'wab-bg':'#F9FFE6','wab-card':'#F4FECD','wab-accent':'#C6FC03','wab-mid':'#779702','wab-text':'#283201','wab-dark':'#1C2300',},fontFamily:{sans:['Inter','sans-serif']}}}}</script></head><body class="bg-wab-bg text-wab-text font-sans antialiased min-h-screen"><div id="login-section" class="fixed inset-0 z-50 flex items-center justify-center bg-wab-bg p-4"><div class="bg-white rounded-3xl shadow-2xl border border-gray-100 p-8 md:p-12 w-full max-w-md relative overflow-hidden"><div class="absolute top-0 left-0 w-full h-2 bg-wab-accent"></div><div class="text-center mb-10"><div class="w-16 h-16 bg-wab-dark rounded-2xl flex items-center justify-center text-wab-accent text-3xl mx-auto mb-4 shadow-lg"><i class="fa-solid fa-user-shield"></i></div><h1 class="text-3xl font-extrabold text-wab-dark">Administrator</h1><p class="text-gray-500 mt-2">Loghează-te pentru a administra galeria.</p></div><form onsubmit="handleLogin(event)" class="space-y-6"><div><label class="block text-sm font-bold text-wab-dark mb-2 ml-1">Email</label><input type="email" id="email" class="w-full bg-gray-50 border border-gray-200 rounded-xl p-4 focus:outline-none focus:border-wab-mid focus:ring-1 focus:ring-wab-mid transition font-medium" placeholder="
[email protected]" required></div><div><label class="block text-sm font-bold text-wab-dark mb-2 ml-1">Parolă</label><input type="password" id="password" class="w-full bg-gray-50 border border-gray-200 rounded-xl p-4 focus:outline-none focus:border-wab-mid focus:ring-1 focus:ring-wab-mid transition font-medium" placeholder="••••••••" required></div><button type="submit" class="w-full bg-wab-dark text-white font-bold py-4 rounded-xl hover:bg-black transition shadow-lg transform hover:-translate-y-1 active:scale-95 duration-200">Loghează-te <i class="fa-solid fa-arrow-right ml-2"></i></button></form><p id="login-error" class="text-red-600 text-center mt-6 font-bold text-sm hidden"></p></div></div><div id="dashboard-section" class="hidden min-h-screen container mx-auto px-4 md:px-8 py-12 relative"><div class="flex flex-col md:flex-row justify-between items-center mb-12 gap-6"><div><h1 class="text-4xl font-extrabold text-wab-dark tracking-tight">Panou de control</h1><p class="text-wab-mid font-bold mt-1 text-lg">Mai bagă niște poze, barosane 😎</p></div><div class="flex gap-4"><a href="galerie.html" target="_blank" class="bg-white text-wab-dark border border-gray-200 px-6 py-3 rounded-xl font-bold hover:bg-gray-50 transition shadow-sm flex items-center gap-2 active:scale-95"><i class="fa-solid fa-eye text-wab-mid"></i> Vezi galeria</a><button onclick="handleLogout()" class="bg-red-50 text-red-600 border border-red-100 px-6 py-3 rounded-xl font-bold hover:bg-red-100 transition shadow-sm flex items-center gap-2 active:scale-95"><i class="fa-solid fa-right-from-bracket"></i> Ieși din cont</button></div></div><div class="bg-white rounded-3xl shadow-xl shadow-gray-200/50 border border-white p-6 md:p-8 mb-20 relative overflow-hidden"><div class="absolute top-0 right-0 w-32 h-32 bg-wab-accent/10 rounded-bl-full -mr-10 -mt-10"></div><div class="relative z-10 grid grid-cols-1 lg:grid-cols-12 gap-6 items-end"><div class="lg:col-span-5"><label class="block text-sm font-bold text-wab-dark mb-2 ml-1">1. Alege Fotografia</label><label for="photoFile" class="flex items-center justify-between w-full bg-gray-50 border-2 border-dashed border-gray-300 rounded-2xl p-4 cursor-pointer hover:bg-gray-100 hover:border-wab-mid transition h-[64px] group"><div class="flex items-center gap-3"><div class="bg-wab-dark text-white w-10 h-10 rounded-lg flex items-center justify-center group-hover:bg-wab-accent group-hover:text-wab-dark transition"><i class="fa-regular fa-image"></i></div><span id="fileNameDisplay" class="text-sm font-bold text-gray-500 truncate max-w-[150px] md:max-w-[200px]">Apasă aici...</span></div><span class="text-xs font-bold text-wab-mid bg-wab-bg px-2 py-1 rounded">CAUTĂ</span></label><input type="file" id="photoFile" accept="image/*" class="hidden" onchange="updateFileName()"></div><div class="lg:col-span-4"><label class="block text-sm font-bold text-wab-dark mb-2 ml-1">2. Selectează Categoria</label><div class="relative"><select id="photoCategory" class="w-full bg-gray-50 border border-gray-200 rounded-2xl px-4 text-wab-dark font-bold appearance-none cursor-pointer focus:border-wab-mid focus:ring-1 focus:ring-wab-mid h-[64px] transition hover:bg-gray-100"><option value="moto">🏍️ Moto & ATV</option><option value="auto">🚗 Autoturisme</option><option value="suv">🚙 SUV & 4x4</option><option value="dube">🚐 Dube & Utilitare</option><option value="utilaje">🚜 Utilaje Grele</option></select><div class="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400"><i class="fa-solid fa-chevron-down"></i></div></div></div><div class="lg:col-span-3"><button onclick="uploadPhoto()" id="uploadBtn" class="w-full bg-wab-accent text-wab-dark font-extrabold text-lg h-[64px] rounded-2xl hover:bg-wab-mid hover:text-white transition-all shadow-lg shadow-wab-accent/30 flex items-center justify-center gap-2 transform active:scale-95 duration-150"><i class="fa-solid fa-cloud-arrow-up"></i> ÎNCĂRCARE</button></div></div><div id="progressContainer" class="hidden mt-6 w-full bg-gray-100 rounded-full h-3 overflow-hidden"><div id="progressBar" class="bg-wab-dark h-3 rounded-full transition-all duration-300" style="width: 0%"></div></div><p id="statusMsg" class="text-center font-bold mt-4 min-h-[24px] text-sm"></p></div><div class="mb-8 flex items-center gap-3"><div class="w-10 h-10 rounded-xl bg-wab-dark flex items-center justify-center text-wab-accent text-lg"><i class="fa-solid fa-layer-group"></i></div><h2 class="text-2xl font-extrabold text-wab-dark">Galerie Activă</h2></div><div id="gallery-loader" class="py-20 text-center text-wab-mid hidden"><i class="fa-solid fa-circle-notch fa-spin text-4xl mb-4"></i><p class="font-bold">Se actualizează...</p></div><div id="admin-gallery-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 pb-32"></div></div><div id="edit-modal" class="fixed inset-0 z-[60] hidden flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-fade-in"><div class="bg-white rounded-3xl shadow-2xl w-full max-w-sm overflow-hidden transform transition-all scale-100"><div class="bg-blue-50 p-6 border-b border-blue-100 text-center"><div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-3"><i class="fa-solid fa-pen-to-square"></i></div><h3 class="text-xl font-extrabold text-gray-800">Schimbă Categoria</h3></div><div class="p-6 space-y-4"><input type="hidden" id="edit-doc-id"><div><label class="block text-sm font-bold text-gray-600 mb-2">Noua Categorie:</label><div class="relative"><select id="edit-category" class="w-full bg-gray-50 border border-gray-200 rounded-xl p-4 text-gray-800 font-bold appearance-none cursor-pointer focus:border-blue-500 focus:ring-1 focus:ring-blue-500"><option value="moto">🏍️ Moto & ATV</option><option value="auto">🚗 Autoturisme</option><option value="suv">🚙 SUV & 4x4</option><option value="dube">🚐 Dube & Utilitare</option><option value="utilaje">🚜 Utilaje Grele</option></select><div class="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400"><i class="fa-solid fa-chevron-down"></i></div></div></div><div class="flex gap-3 pt-2"><button onclick="closeEditModal()" class="flex-1 bg-gray-100 text-gray-600 font-bold py-3 rounded-xl hover:bg-gray-200 transition">Anulează</button><button onclick="saveEdit()" class="flex-1 bg-blue-600 text-white font-bold py-3 rounded-xl hover:bg-blue-700 transition shadow-lg">Salvează</button></div></div></div></div><div id="delete-modal" class="fixed inset-0 z-[70] hidden flex items-center justify-center bg-black/60 backdrop-blur-sm p-4"><div class="bg-white rounded-3xl shadow-2xl w-full max-w-sm overflow-hidden transform transition-all scale-100 border-2 border-red-100"><div class="bg-red-50 p-6 border-b border-red-100 text-center"><div class="w-12 h-12 bg-red-100 text-red-600 rounded-full flex items-center justify-center mx-auto mb-3"><i class="fa-solid fa-triangle-exclamation text-xl"></i></div><h3 class="text-xl font-extrabold text-red-900">Ștergere Definitivă</h3></div><div class="p-6"><p class="text-center text-gray-600 font-medium mb-6">Ești sigur că vrei să ștergi această imagine din galerie?</p><input type="hidden" id="del-doc-id"><input type="hidden" id="del-url"><input type="hidden" id="del-path"><div class="flex gap-3"><button onclick="closeDeleteModal()" class="flex-1 bg-gray-100 text-gray-600 font-bold py-3 rounded-xl hover:bg-gray-200 transition">Păstrează</button><button onclick="executeDelete()" class="flex-1 bg-red-600 text-white font-bold py-3 rounded-xl hover:bg-red-700 transition shadow-lg flex items-center justify-center gap-2"><i class="fa-solid fa-trash-can"></i> Șterge</button></div></div></div></div><script>const firebaseConfig={apiKey:"AIzaSyCitscbogxDvtfmaCRc7RnaJUUPvtQMVDk",authDomain:"tractariwabro.firebaseapp.com",projectId:"tractariwabro",storageBucket:"tractariwabro.firebasestorage.app",messagingSenderId:"481488149846",appId:"1:481488149846:web:1d86428f9601ac9b4b8af7"};firebase.initializeApp(firebaseConfig);const auth=firebase.auth();const db=firebase.firestore();const storage=firebase.storage();function updateFileName(){const input=document.getElementById('photoFile');const display=document.getElementById('fileNameDisplay');if(input.files&&input.files.length>0){display.innerText=input.files[0].name;display.classList.add('text-wab-dark');}else{display.innerText="Apasă aici...";display.classList.remove('text-wab-dark');}}auth.onAuthStateChanged(user=>{if(user){document.getElementById('login-section').classList.add('hidden');document.getElementById('dashboard-section').classList.remove('hidden');loadAdminGallery();}else{document.getElementById('login-section').classList.remove('hidden');document.getElementById('dashboard-section').classList.add('hidden');}});function handleLogin(e){e.preventDefault();const email=document.getElementById('email').value;const pass=document.getElementById('password').value;auth.signInWithEmailAndPassword(email,pass).catch(err=>{document.getElementById('login-error').innerText=err.message;document.getElementById('login-error').classList.remove('hidden');});}function handleLogout(){auth.signOut();}function uploadPhoto(){const file=document.getElementById('photoFile').files[0];const category=document.getElementById('photoCategory').value;const status=document.getElementById('statusMsg');const btn=document.getElementById('uploadBtn');const prog=document.getElementById('progressContainer');if(!file){status.innerText="Alege o poză!";status.className="text-red-500 font-bold text-center mt-4";return;}btn.disabled=true;btn.innerHTML='<i class="fa-solid fa-spinner fa-spin"></i>';prog.classList.remove('hidden');status.innerText="";const fileName=Date.now()+'_'+file.name;const storageRef=storage.ref('galerie/'+fileName);const uploadTask=storageRef.put(file);uploadTask.on('state_changed',(snap)=>{const percent=(snap.bytesTransferred/snap.totalBytes)*100;document.getElementById('progressBar').style.width=percent+'%';},(err)=>{status.innerText="Eroare: "+err.message;btn.disabled=false;btn.innerHTML='UPLOAD';},()=>{uploadTask.snapshot.ref.getDownloadURL().then((url)=>{db.collection("photos").add({url:url,category:category,storagePath:'galerie/'+fileName,timestamp:firebase.firestore.FieldValue.serverTimestamp()}).then(()=>{status.innerText="✅ Gata barosane!";status.className="text-green-600 font-bold text-center mt-4";document.getElementById('photoFile').value="";document.getElementById('fileNameDisplay').innerText="Apasă aici...";document.getElementById('progressBar').style.width='0%';loadAdminGallery();setTimeout(()=>{btn.disabled=false;btn.innerHTML='<i class="fa-solid fa-cloud-arrow-up"></i> ÎNCĂRCARE';prog.classList.add('hidden');status.innerText="";},2000);});});});}function loadAdminGallery(){const grid=document.getElementById('admin-gallery-grid');const loader=document.getElementById('gallery-loader');grid.innerHTML="";loader.classList.remove('hidden');db.collection("photos").orderBy("timestamp","desc").get().then((snap)=>{loader.classList.add('hidden');if(snap.empty){grid.innerHTML='<div class="col-span-3 text-center text-gray-400">Nicio poză încărcată.</div>';return;}snap.forEach(doc=>{const data=doc.data();const div=document.createElement('div');div.className="relative aspect-square bg-white rounded-3xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 group border border-gray-100";div.innerHTML=`<img src="${data.url}" class="w-full h-full object-cover"><div class="absolute bottom-4 left-4 bg-white/90 backdrop-blur-sm px-3 py-1 rounded-lg text-xs font-bold text-wab-dark shadow-sm uppercase">${data.category}</div><div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center gap-4"><button onclick="openEditModal('${doc.id}', '${data.category}')" class="bg-blue-600 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg hover:bg-blue-700 hover:scale-110 transition transform" title="Schimbă Categorie"><i class="fa-solid fa-pen-to-square text-xl"></i></button><button onclick="openDeleteModal('${doc.id}', '${data.url}', '${data.storagePath||''}')" class="bg-red-600 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg hover:bg-red-700 hover:scale-110 transition transform" title="Șterge"><i class="fa-solid fa-trash-can text-xl"></i></button></div>`;grid.appendChild(div);});});}function openEditModal(docId,currentCat){document.getElementById('edit-doc-id').value=docId;document.getElementById('edit-category').value=currentCat;document.getElementById('edit-modal').classList.remove('hidden');}function closeEditModal(){document.getElementById('edit-modal').classList.add('hidden');}function saveEdit(){const docId=document.getElementById('edit-doc-id').value;const newCat=document.getElementById('edit-category').value;db.collection("photos").doc(docId).update({category:newCat}).then(()=>{closeEditModal();loadAdminGallery();}).catch(err=>alert("Eroare: "+err.message));}function openDeleteModal(docId,url,path){document.getElementById('del-doc-id').value=docId;document.getElementById('del-url').value=url;document.getElementById('del-path').value=path;document.getElementById('delete-modal').classList.remove('hidden');}function closeDeleteModal(){document.getElementById('delete-modal').classList.add('hidden');}function executeDelete(){const docId=document.getElementById('del-doc-id').value;const url=document.getElementById('del-url').value;const storagePath=document.getElementById('del-path').value;const deleteDB=()=>db.collection("photos").doc(docId).delete();if(storagePath){storage.ref(storagePath).delete().then(deleteDB).then(finalizeDelete).catch(()=>deleteDB().then(finalizeDelete));}else{storage.refFromURL(url).delete().then(deleteDB).then(finalizeDelete).catch(()=>deleteDB().then(finalizeDelete));}}function finalizeDelete(){closeDeleteModal();loadAdminGallery();}</script></body></html>
0 commit comments