Loyiha 2025 kutubxona tizimi

Kutubxona tizimi

body{

margin:0;font-family:Segoe UI,Arial;

background:url("https://images.unsplash.com/photo-1524995997946-a1c2e315a42f") center/cover fixed;

min-height:100vh;

}

.hidden{display:none}

.overlay{background:rgba(0,0,0,.55);min-height:100vh;padding:30px}

.panel{

max-width:1100px;margin:auto;background:#fff;

border-radius:14px;box-shadow:0 15px 40px rgba(0,0,0,.4);

padding:25px

}

h2,h3{color:#2563eb}

.row{display:flex;gap:15px;flex-wrap:wrap}

.col{flex:1;min-width:260px}

input,select,button{

width:100%;padding:8px;margin:6px 0;

border-radius:8px;border:1px solid #bbb;

font-weight:500;

}

/* 3D TUGMA */

button{

border:none;

cursor:pointer;

padding:10px;

font-weight:bold;

border-radius:8px;

margin:6px 0;

box-shadow:0 5px rgba(0,0,0,0.2);

transition:all 0.2s ease;

}

#loginBtn{background:linear-gradient(145deg,#1e40af,#3b82f6);box-shadow:0 5px #1e3a8a;color:#fff}

#logoutBtn{background:linear-gradient(145deg,#dc2626,#f87171);box-shadow:0 5px #b91c1c;color:#fff}

#addBtn{background:linear-gradient(145deg,#16a34a,#4ade80);box-shadow:0 5px #15803d;color:#fff}

#downloadExcel{background:linear-gradient(145deg,#f59e0b,#fcd34d);box-shadow:0 5px #b45309;color:#fff}

#addNewBookBtn{background:linear-gradient(145deg,#0ea5e9,#60a5fa);box-shadow:0 5px #0284c7;color:#fff}

#addStudentBtn{background:linear-gradient(145deg,#db2777,#f472b6);box-shadow:0 5px #be185d;color:#fff}

table button{color:#000;} /* STATUS MATNI QORA */

button:hover{opacity:0.9}

button:active{

transform:translateY(3px);

box-shadow:0 2px rgba(0,0,0,0.2);

}

/* 3D SELECT */

select{

background:linear-gradient(145deg,#60a5fa,#1e40af);

color:#fff;

padding:10px;

border-radius:8px;

border:none;

box-shadow:0 5px rgba(0,0,0,0.2);

cursor:pointer;

transition:all 0.2s ease;

appearance:none;

}

select:active{

transform:translateY(2px);

box-shadow:0 2px rgba(0,0,0,0.2);

}

select option{

color:#000;

background:#fff;

}

/* O‘QUVCHI + KITOB CARD */

.student{

padding:6px;border:1px solid #ccc;border-radius:6px;

margin:4px 0;cursor:pointer

}

.student:hover{background:#eef2ff}

.book-card{

display:flex;align-items:center;gap:10px;

border:1px solid #ccc;border-radius:8px;

padding:6px;margin:6px 0;cursor:pointer

}

.book-card img{width:50px;height:70px;object-fit:cover;border-radius:4px}

.book-card.active{border:2px solid #2563eb;background:#eef2ff}

table{width:100%;border-collapse:collapse;margin-top:15px}

th,td{border:1px solid #ccc;padding:6px;text-align:center}

th{background:#2563eb;color:#fff}

Kutubxona — Kirish

Kirish

Login: librarian | Parol: lib123

Kutubxona boshqaruvi

Foydalanuvchi:

Chiqish

Sinf

O‘quvchilar

Adabiyot turi

Kitoblar

Tanlangan o‘quvchi

Olish sanasi

Qaytarish sanasi

Ro‘yxatga qo‘shish

Excel yuklab olish

Yangi kitob qo‘shish

Kitob qo‘shish

Yangi o‘quvchi qo‘shish

O‘quvchi qo‘shish

// LOGIN

const ADMINS=[{login:"librarian",pass:"lib123"}];

loginBtn.onclick=()={

if(ADMINS.some(a=a.login===loginInput.value && a.pass===passInput.value)){

loginBox.classList.add("hidden");

appBox.classList.remove("hidden");

who.textContent=loginInput.value;

} else alert("Login yoki parol xato!");

};

logoutBtn.onclick=()=location.reload();

// DATA

const classes={

"5-A":["Ali Karimov","Zamira Rustamova"],

"6-B":["Dilso‘z Ergashev","Javlon Ahmedov"],

"7-C":["Madina Rasulova","Oybek Toshmatov"]

};

const books={

"Badiiy":[

{n:"Ikki eshik orasi",i:"https://kitobxon.com/img_knigi/s7962.jpg"},

{n:"Dunyoning ishlari",i:"https://images.uzum.uz/crvags4sslojjk5r333g/t_product_low.jpg"}

],

"Jahon":[

{n:"1984",i:"https://covers.openlibrary.org/b/id/7222246-L.jpg"}

]

};

let selectedBook=null;

let records=[];

// INIT

function init(){

classSelect.innerHTML=Object.keys(classes).map(c=`${c}`).join("");

categorySelect.innerHTML=Object.keys(books).map(c=`${c}`).join("");

newStudentClass.innerHTML=Object.keys(classes).map(c=`${c}`).join("");

classSelect.value=Object.keys(classes)[0];

categorySelect.value="Badiiy";

renderStudents();

renderBooks();

}

init();

// STUDENTS

function renderStudents(){

studentsList.innerHTML=classes[classSelect.value]

.map(s=`${s}`).join("");

document.querySelectorAll(".student").forEach(d={

d.onclick=()=selectedStudent.value=d.textContent;

});

}

classSelect.onchange=renderStudents;

// BOOKS

function renderBooks(){

const cat=categorySelect.value;

bookList.innerHTML=books[cat].map((b,i)=`

${b.n}

`).join("");

document.querySelectorAll(".book-card").forEach(c={

c.onclick=()={

document.querySelectorAll(".book-card").forEach(x=x.classList.remove("active"));

c.classList.add("active");

selectedBook=books[cat][c.dataset.i];

};

});

}

categorySelect.onchange=renderBooks;

// ADD RECORD

addBtn.onclick=()={

if(!selectedStudent.value || !selectedBook)

return alert("O‘quvchi va kitobni tanlang!");

records.push({

s:selectedStudent.value,

c:classSelect.value,

b:selectedBook.n,

t:categorySelect.value,

d1:borrowDate.value,

d2:returnDate.value,

returned:false

});

render();

};

// RENDER TABLE

function render(){

tableBody.innerHTML="";

records.forEach((r,i)={

tableBody.innerHTML+=`

${r.s}${r.c}${r.b}

${r.t}${r.d1}${r.d2}

${r.returned?"Qaytardi":"Qaytarmadi"}

`;

});

}

// STATUS

function toggleReturn(i){

records[i].returned=!records[i].returned;

render();

}

// EXCEL

downloadExcel.onclick=()={

let html="

records.forEach(r={

html+=`

});

html+="

let a=document.createElement("a");

a.href=URL.createObjectURL(new Blob([html],{type:"application/vnd.ms-excel"}));

a.download="kutubxona.xls";

a.click();

};

// YANGI KITOB

addNewBookBtn.onclick=()={

const cat=newCategory.value.trim();

const name=newBookName.value.trim();

const file=newBookImg.files[0];

if(!cat || !name || !file) return alert("To‘ldiring!");

const reader=new FileReader();

reader.onload=e={

if(!books[cat]) books[cat]=[];

books[cat].push({n:name,i:e.target.result});

newCategory.value=""; newBookName.value=""; newBookImg.value="";

init();

categorySelect.value=cat;

renderBooks();

};

reader.readAsDataURL(file);

};

// YANGI O‘QUVCHI

addStudentBtn.onclick=()={

const cls=newStudentClass.value;

const name=newStudentName.value.trim();

if(!name) return alert("Ism kiriting!");

classes[cls].push(name);

alert("O‘quvchi qo‘shildi!");

newStudentName.value="";

if(classSelect.value===cls) renderStudents();

};