Commit 52088d84 authored by Mourad Aouinat's avatar Mourad Aouinat 💻
Browse files

initial commit

parents
### Hey there, no setup required, just clone and serve the static files using "live-server" or any other server to serve the static files
### PS: this is nowhere finished just some fiddling and a lot of duplicate code that I hacked around using tailwincss
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/main.css">
<title>Book Store</title>
</head>
<body>
<div id="main" class="p-4 flex flex-col sm:flex-row container mx-auto">
<div id="side-panel" class="sm:mr-4 sm:w-1/4">
<div class="p-4 border my-2">
<div class="flex justify-between items-center">
<span class="text-xl">Categories</span>
<button id="categories">
<span class="open text-2xl cursor-pointer hidden"><svg class="w-5 h-5" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg></span>
<span class="close text-2xl cursor-pointer"><svg class="w-5 h-5" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg></span>
</button>
</div>
<div class="h-0 hidden mt-4" data-collapse="categories">
<a class="block text-sm my-2 hover:text-red-400" href="/">Drama</a>
<a class="block text-sm my-2 hover:text-red-400" href="/">Romance</a>
<a class="block text-sm my-2 hover:text-red-400" href="/">Thriller</a>
<a class="block text-sm my-2 hover:text-red-400" href="/">Self Help</a>
</div>
</div>
<div class="p-4 border my-2">
<div class="flex justify-between items-center">
<span class="text-xl">Authors</span>
<button id="authors">
<span class="open text-2xl cursor-pointer hidden"><svg class="w-5 h-5" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg></span>
<span class="close text-2xl cursor-pointer"><svg class="w-5 h-5" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg></span>
</button>
</div>
<div class="h-0 hidden mt-4" data-collapse="authors">
<a class="block text-sm my-2 hover:text-red-400" href="/">A. J. Finn</a>
<a class="block text-sm my-2 hover:text-red-400" href="/">Anne Frank</a>
<a class="block text-sm my-2 hover:text-red-400" href="/">Camille Pagán</a>
<a class="block text-sm my-2 hover:text-red-400" href="/">Daniel H. Pink</a>
<a class="block text-sm my-2 hover:text-red-400" href="/">Danielle Steel</a>
<a class="block text-sm my-2 hover:text-red-400" href="/">David Quammen</a>
</div>
</div>
<div class="p-4 border my-2">
<div class="flex justify-between items-center">
<span class="text-xl">Languages</span>
<button id="languages">
<span class="open text-2xl cursor-pointer hidden"><svg class="w-5 h-5" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg></span>
<span class="close text-2xl cursor-pointer"><svg class="w-5 h-5" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg></span>
</button>
</div>
<div class="h-0 hidden mt-4" data-collapse="languages">
<a class="block text-sm my-2 hover:text-red-400" href="/">English</a>
<a class="block text-sm my-2 hover:text-red-400" href="/">German</a>
<a class="block text-sm my-2 hover:text-red-400" href="/">French</a>
<a class="block text-sm my-2 hover:text-red-400" href="/">Turkish</a>
</div>
</div>
</div>
<div id="main-panel" class="sm:w-3/4">
<div class="flex justify-between items-center my-4">
<p class="text-sm">Showing 1–12 of 126 results</p>
<div class="flex">
<div class="border-b p-1 flex justify-between items-center mr-2 relative">
<div id="sortBy">Sort by Name</div>
<button class=""><svg class="w-5 h-5" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg></button>
<div class="absolute top-9 left-0 bg-white border shadow min-w-full hidden">
<ul>
<li class="p-2 hover:bg-gray-300 cursor-pointer">Sort by Name</li>
<li class="p-2 hover:bg-gray-300 cursor-pointer">Sort by Author</li>
<li class="p-2 hover:bg-gray-300 cursor-pointer">Sort by Category</li>
<li class="p-2 hover:bg-gray-300 cursor-pointer">Sort by Price</li>
<li class="p-2 hover:bg-gray-300 cursor-pointer">Sort by Publish Date</li>
</ul>
</div>
</div>
<div>
<button id="grid-view" class="border p-2">
<svg class="h-5 w-5" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
</button>
<button id="list-view" class="border p-2">
<svg class="h-5 w-5" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg>
</button>
</div>
</div>
</div>
<div id=library>
<div id="list" class="hidden"></div>
<div id="grid" class="flex flex-wrap"></div>
<div id="pagination" class="my-10 flex items-center justify-center">
<div>
<button class="border py-2 px-4 hover:bg-gray-900 hover:text-white ">Previous</button>
<button class="border py-2 px-4 hover:bg-gray-900 hover:text-white ">1</button>
<button class="border py-2 px-4 hover:bg-gray-900 hover:text-white ">2</button>
<button class="border py-2 px-4 bg-gray-900 text-white">3</button>
<button class="border py-2 px-4 hover:bg-gray-900 hover:text-white ">4</button>
<button class="border py-2 px-4 hover:bg-gray-900 hover:text-white ">5</button>
<button class="border py-2 px-4 hover:bg-gray-900 hover:text-white ">Next</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="/js/script.js"></script>
</body>
</html>
\ No newline at end of file
$(document).ready(function () {
function collapse(name) {
$(`#${name}`).on("click", function () {
const close$ = $(this).find(".close");
const open$ = $(this).find(".open");
const target$ = $(`[data-collapse=${name}]`);
const isHidden = target$.hasClass("h-0 hidden");
if (isHidden) {
target$.removeClass("h-0 hidden");
close$.addClass("hidden");
open$.removeClass("hidden");
} else {
target$.addClass("h-0 hidden");
close$.removeClass("hidden");
open$.addClass("hidden");
}
});
}
collapse("categories");
collapse("authors");
collapse("languages");
const display1 = [...Array(9).keys()]
.map((item) => {
return `
<div class="border px-8 py-6 flex flex-col hover:border-black hover:shadow-lg w-1/2 md:w-1/3 lg:w-1/4">
<div class="flex justify-center mb-2">
<a href="/single.html">
<img src="/assets/img${item + 1}.jpg" alt="book cover">
</a>
</div>
<div class="sm:ml-6 sm:mr-4 -mx-4">
<h3 class="text-red-500 uppercase font-thin text-xs mb-2 mt-1">Paperback</h3>
<h2 class="font-semibold">The Overdue Life of Amy Byler</h2>
<a href="/" class="text-gray-500 hover:text-red-500 text-sm mb-4 inline-block">Jay Shetty</a>
<p class="text-gray-800 mb-2 text-sm hidden">After disappearing for three years, Artemis Fowl has returned to a life different from the one he left. And spends his days teaching his twin siblings the</p>
<div class="font-semibold">$29</div>
</div>
<div class="flex -mx-4 justify-between mt-2 :mx-3">
<div class="md:mr-6 inline-block rounded-full p-2 hover:bg-red-400 hover:text-white cursor-pointer">
<svg class="w-5 h-5" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><g><rect fill="none" height="24" width="24"></rect><path fill="currentColor" d="M18,6h-2c0-2.21-1.79-4-4-4S8,3.79,8,6H6C4.9,6,4,6.9,4,8v12c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8C20,6.9,19.1,6,18,6z M10,10c0,0.55-0.45,1-1,1s-1-0.45-1-1V8h2V10z M12,4c1.1,0,2,0.9,2,2h-4C10,4.9,10.9,4,12,4z M16,10c0,0.55-0.45,1-1,1 s-1-0.45-1-1V8h2V10z"></path></g></svg>
</div>
<div class="flex">
<span class="inline-block rounded-full p-2 mx-2 hover:bg-red-400 hover:text-white cursor-pointer"><svg class="w-5 h-5" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><g><rect fill="none" height="24" width="24"></rect></g><g><g></g><g><path fill="currentColor" d="M22,8l-4-4v3H3v2h15v3L22,8z"></path><path fill="currentColor" d="M2,16l4,4v-3h15v-2H6v-3L2,16z"></path></g></g></svg></span>
<span class="inline-block rounded-full p-2 mx-2 hover:bg-red-400 hover:text-white cursor-pointer"><svg class="w-5 h-5" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"></path></svg></span>
</div>
</div>
</div>
`;
})
.join("");
const display2 = [...Array(6).keys()]
.map((item) => {
return `
<div class="border px-8 py-6 flex flex-col md:flex-row items-center hover:border-black hover:shadow-lg">
<div class="flex justify-center mb-2">
<a href="/single.html">
<img src="/assets/img${item + 1}.jpg" alt="book cover">
</a>
</div>
<div class="sm:ml-6 sm:mr-4 -mx-4">
<h3 class="text-red-500 uppercase font-thin text-xs mb-2 mt-1">Paperback</h3>
<h2 class="font-semibold">The Overdue Life of Amy Byler</h2>
<a href="/" class="text-gray-500 hover:text-red-500 text-sm mb-4 inline-block">Jay Shetty</a>
<p class="text-gray-800 mb-2 text-sm">After disappearing for three years, Artemis Fowl has returned to a life different from the one he left. And spends his days teaching his twin siblings the</p>
<div class="font-semibold">$29</div>
</div>
<div class="flex -mx-4 justify-between mt-2 lg:mx-3">
<div class="md:mr-6 inline-block rounded-full p-2 hover:bg-red-400 hover:text-white cursor-pointer">
<svg class="w-5 h-5" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><g><rect fill="none" height="24" width="24"></rect><path fill="currentColor" d="M18,6h-2c0-2.21-1.79-4-4-4S8,3.79,8,6H6C4.9,6,4,6.9,4,8v12c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8C20,6.9,19.1,6,18,6z M10,10c0,0.55-0.45,1-1,1s-1-0.45-1-1V8h2V10z M12,4c1.1,0,2,0.9,2,2h-4C10,4.9,10.9,4,12,4z M16,10c0,0.55-0.45,1-1,1 s-1-0.45-1-1V8h2V10z"></path></g></svg>
</div>
<div class="flex">
<span class="inline-block rounded-full p-2 mx-2 hover:bg-red-400 hover:text-white cursor-pointer"><svg class="w-5 h-5" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><g><rect fill="none" height="24" width="24"></rect></g><g><g></g><g><path fill="currentColor" d="M22,8l-4-4v3H3v2h15v3L22,8z"></path><path fill="currentColor" d="M2,16l4,4v-3h15v-2H6v-3L2,16z"></path></g></g></svg></span>
<span class="inline-block rounded-full p-2 mx-2 hover:bg-red-400 hover:text-white cursor-pointer"><svg class="w-5 h-5" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"></path></svg></span>
</div>
</div>
</div>
`;
})
.join("");
$("#list").html(display2);
$("#grid").html(display1);
$("#list-view").on("click", function () {
if ($("#list").hasClass("hidden")) {
$("#list").removeClass("hidden");
$("#grid").addClass("hidden");
}
});
$("#grid-view").on("click", function () {
if ($("#grid").hasClass("hidden")) {
$("#grid").removeClass("hidden");
$("#list").addClass("hidden");
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/main.css">
<title>Book Store</title>
</head>
<body>
<div class="container mx-auto">
<div class="p-4 flex flex-col md:flex-row">
<div class="mt-10 flex flex-col justify-center items-center md:pr-6 md:mr-10 md:border-r md:w-1/2">
<div class="">
<img src="/assets/img1.jpg" alt="book cover" class="w-64">
</div>
</div>
<div class="md:w-1/2">
<div class="mt-16">
<h2 class="text-3xl font-semibold">The Overdue Life of Amy Byler</h2>
<h3 class="mt-2">By (Author) <span class="text-gray-500">Anna Banks</span></h3>
<h4 class="mt-4 text-xl">Details</h4>
<p class="mt-2 text-sm text-gray-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat.</p>
</div>
<div class="border p-2 flex justify-between inline-flex mt-6">
<button><svg class="w-5 h-5" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></button>
<span class="text-lg px-4 text-gray-500">0</span>
<button><svg class="w-5 h-5" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13H5v-2h14v2z"/></svg></button>
</div>
<div class="mt-4">
<button class="px-10 py-3 bg-gray-900 text-white">Add to Cart</button>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
@tailwind base;
@tailwind components;
@tailwind utilities;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment