Scribd
Upload
4 views14 pages

HTML

The document is an HTML template for a library web application that allows users to buy and sell old school books. It includes sections for home, selling books, user login, and registration, along with a search feature and book filtering by class. The design features a responsive layout with pop-up modals for book details and actions such as liking or buying books.

Uploaded by

davidmauryaforstudypurpose
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views14 pages

HTML

The document is an HTML template for a library web application that allows users to buy and sell old school books. It includes sections for home, selling books, user login, and registration, along with a search feature and book filtering by class. The design features a responsive layout with pop-up modals for book details and actions such as liking or buying books.

Uploaded by

davidmauryaforstudypurpose
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

<!

DOCTYPE html>

<html>

<head>

<title>My Library</title>

<style>

body{

font-family: Arial;

background:#f2f2f2;

margin:0;

header{

background:#2c3e50;

color:white;

padding:15px;

text-align:center;

nav{

background:#34495e;

padding:10px;

text-align:center;

nav button{

padding:10px;

margin:5px;

border:none;

background:#3498db;

color:white;
cursor:pointer;

.container{

padding:20px;

.search-bar{

text-align:center;

margin:10px;

.search-bar input{

padding:10px;

width:250px;

.book-card{

background:white;

padding:15px;

margin:10px;

border-radius:8px;

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

width:200px;

display:inline-block;

text-align:center;

}
.book-card img{

width:100%;

height:120px;

object-fit:cover;

border-radius:5px;

.form-box{

background:white;

padding:20px;

width:300px;

margin:auto;

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

input,select{

width:100%;

padding:8px;

margin:5px 0;

button{

padding:8px;

margin-top:5px;

cursor:pointer;

.upload-btn{
background:#e67e22;

color:white;

border:none;

width:100%;

</style>

</head>

<body>

<!-- POPUP -->

<div id="popup" style="display:none; position:fixed; top:20%; left:50%;


transform:translateX(-50%);

background:white; padding:20px; box-shadow:0 0 10px black; z-index:1000; text-


align:center;">

<h3 id="popupTitle"></h3>

<p id="popupPrice"></p>

<p id="popupCity"></p>

<button onclick="closePopup()">Close</button>

</div>

<header>

<h1> My Library</h1>

<p>Sale and Buy Old School Books</p>


</header>

<nav>

<button onclick="showSection('home')">Home </button>

<button onclick="showSection('sell')">Sale Book </button>

<button onclick="showSection('mybooks')">My Books </button>

<button onclick="showSection('login')">Login </button>

<button onclick="showSection('register')">Register</button>

<button onclick="logout()">Logout </button>

<button onclick="toggleDarkMode()"> </button>

</nav>

<div class="container">

<!-- HOME SECTION -->

<div id="bookList"></div>

<div id="home">

<h2>Select Class </h2>

<select id="classFilter" onchange="filterBooks()">

<option value="all">All Classes</option>

<option value="6">Class 6</option>


<option value="7">Class 7</option>

<option value="8">Class 8</option>

<option value="9">Class 9</option>

<option value="10">Class 10</option>

<option value="11">Class 11</option>

<option value="12">Class 12</option>

</select>

<div class="search-bar">

<input type="text" id="searchInput" placeholder="Search Book..."


onkeyup="searchBook()">

</div>

<!-- ANIMATION SECTION -->

<div class="circle"><h2>SELL NOW</h2></div>

<div class="circle2"><h3>BUY NOW</h3></div>

<!-- SELL SECTION -->

<div id="sell" style="display:none">

<h4>Upload Book for Sale</h5>

<div class="form-box">

<input type="text" id="bookName" placeholder="Book Name">


<input type="number" id="bookPrice" placeholder="Price ₹">

<select id="bookClass">

<option value="6">Class 6</option>

<option value="7">Class 7</option>

<option value="8">Class 8</option>

<option value="9">Class 9</option>

<option value="10">Class 10</option>

<option value="11">Class 11</option>

<option value="12">Class 12</option>

</select>

<input type="text" id="sellerPhone" placeholder="Seller WhatsApp Number">

<input type="text" id="city" placeholder="City / Location">

<input type="file" id="bookImage">

<button class="upload-btn" onclick="uploadBook()">Upload Book</button>

</div>

</div>

<!-- LOGIN -->


<div id="login" style="display:none">

<h4>Login</h4>

<div class="form-box">

<input type="email" id="loginEmail" placeholder="Email">

<input type="text" placeholder="Mobile Number">

<input type="password" placeholder="Password">

<button onclick="loginUser()">Login</button>

</div>

</div>

<!-- REGISTER -->

<div id="register" style="display:none">

<input type="text" id="regName" placeholder="Full Name">

<input type="email" id="regEmail" placeholder="Email">

<input type="text" id="regPhone" placeholder="Mobile Number">


<input type="password" id="regPassword" placeholder="Password">

<button onclick="registerUser()">Register</button>

</div>

</div>

<div id="popup" style="display:none; position:fixed; top:20%; left:50%;


transform:translateX(-50%); background:white; padding:20px; box-shadow:0 0 10px
black;">

<h3 id="popupTitle"></h3>

<p id="popupPrice"></p>

<p id="popupCity"></p>

<button onclick="closePopup()">Close</button>

</div>

<script>

let books=[];

function showSection(section){

[Link]("home").[Link]="none";

[Link]("sell").[Link]="none";

[Link]("login").[Link]="none";

[Link]("register").[Link]="none";
[Link](section).[Link]="block";

function uploadBook(){

let name=[Link]("bookName").value;

let price=[Link]("bookPrice").value;

let className=[Link]("bookClass").value;

if(name=="" || price==""){

alert("Please enter book details");

return;

let book={

name:name,

price:price,

class:className

};

[Link](book);

displayBooks();

alert("Book Uploaded Successfully");

}
function displayBooks(){

let list=[Link]("bookList");

[Link]="";

[Link](book=>{

[Link]+=`

<div class="book-card"
onclick="openPopup('${[Link]}','${[Link]}','${[Link]}')">

<img src="${[Link]}">

<h3>${[Link]}</h3>

<p>Class ${[Link]}</p>

<p>${[Link]}</p>

<p>₹${[Link]}</p>

<button onclick="likeBook(event,'${[Link]}')"> </button>

<a href="[Link] want to buy ${[Link]}"


target="_blank">

<button onclick="[Link]()">Buy</button>

</a>
</div>

`;

});

function filterBooks(){

let selected=[Link]("classFilter").value;

let cards=[Link](".book-card");

[Link](card=>{

if(selected=="all" || [Link]==selected){

[Link]="inline-block";

}else{

[Link]="none";

});

function buyBook(){
alert("Book Purchase Request Sent!");

// POPUP

function openPopup(name,price,city){

[Link]("popup").[Link]="block";

[Link]("popupTitle").innerText=name;

[Link]("popupPrice").innerText="Price: ₹"+price;

[Link]("popupCity").innerText="City: "+city;

function closePopup(){

[Link]("popup").[Link]="none";

// LIKE BUTTON

let likedBooks = [Link]([Link]("liked")) || [];

function likeBook(event,name){

[Link]();

if([Link](name)){

alert("Already Saved ");


return;

[Link](name);

[Link]("liked", [Link](likedBooks));

alert("Book Saved ");

// LOADER

[Link] = function(){

[Link]("loader").[Link]="none";

</script>

</body>

</html>

You might also like