cellar/cs-design
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adjusted product card, edits in review process and product page

Browse Source
This commit is contained in:
free ko 2025-04-13 14:06:27 +03:00
parent c6797cb04f
commit 88f71c4b78
6 changed files with 145 additions and 75 deletions

2
assets/js/sliderDataShowcase.js

@ -30,8 +30,6 @@ document.addEventListener('DOMContentLoaded', function() {
resultIndex = 4; // 'Good'
} else if (value >= 85) {
resultIndex = 5; // 'Acceptable'
} else if (value === 0) {
resultIndex = 7; // 'Faulty'
} else {
resultIndex = 6; // 'Poor'
}

19
assets/js/uiFunctions.js Normal file

@ -0,0 +1,19 @@
document.querySelectorAll('input[uiFunction="toggle"]').forEach(toggle => {
const dot = toggle.parentElement.querySelector('.dot');
// Set initial state based on whether the checkbox is checked
if (toggle.checked) {
dot.classList.add('translate-x-6', 'bg-btnMain');
dot.classList.remove('bg-bgMain');
}
toggle.addEventListener('change', () => {
if (toggle.checked) {
dot.classList.add('translate-x-6', 'bg-btnMain');
dot.classList.remove('bg-bgMain');
} else {
dot.classList.remove('translate-x-6', 'bg-btnMain');
dot.classList.add('bg-bgMain');
}
});
});

46
index.html

@ -213,21 +213,25 @@
<div class="w-full grid grid-cols-4 gap-[5px] max-lg:grid-cols-3 max-md:grid-cols-2 max-xs:grid-cols-1">
<!-- listing item start -->
<div class="w-full flex flex-col gap-[5px]">
<div class="w-full flex flex-col gap-[5px]">
<div class="w-full flex flex-col">
<div class="flex flex-col grow-[1] relative overflow-hidden aspect-square bg-bgMain2 group">
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-full h-full object-cover transition-all ease duration-[1s] group-hover:scale-[1.1]"></img>
<div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[25px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
<div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[15px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
<div class="grow-[1] flex flex-col gap-[25px]">
<div class="line-clamp-3">
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="px-[10px] py-[5px] bg-bgScore5 flex flex-col w-full">
<p class="text-sm text-white text-center">Exceptional</p>
</div>
<div class="w-full border-t-[2px] border-bgMain pt-[15px] text-base font-bold flex flex-row gap-[10px] flex-wrap">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Type: Wine</p>
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Style: Amber</p>
</div>
</div>
</div>
<div class="h-[5px] w-full bg-bgScore5"></div>
<a href="product.html" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
Product Title
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
@ -235,21 +239,25 @@
</div>
</div>
<div class="w-full flex flex-col gap-[5px]">
<div class="w-full flex flex-col gap-[5px]">
<div class="w-full flex flex-col">
<div class="flex flex-col grow-[1] relative overflow-hidden aspect-square bg-bgMain2 group">
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-full h-full object-cover transition-all ease duration-[1s] group-hover:scale-[1.1]"></img>
<div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[25px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
<div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[15px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
<div class="grow-[1] flex flex-col gap-[25px]">
<div class="line-clamp-3">
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="px-[10px] py-[5px] bg-bgScore4 flex flex-col w-full">
<p class="text-sm text-white text-center">Outstanding</p>
</div>
<div class="w-full border-t-[2px] border-bgMain pt-[15px] text-base font-bold flex flex-row gap-[10px] flex-wrap">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Type: Wine</p>
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Style: Amber</p>
</div>
</div>
</div>
<div class="h-[5px] w-full bg-bgScore4"></div>
<a href="product.html" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
Product Title
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
@ -257,21 +265,25 @@
</div>
</div>
<div class="w-full flex flex-col gap-[5px]">
<div class="w-full flex flex-col gap-[5px]">
<div class="w-full flex flex-col">
<div class="flex flex-col grow-[1] relative overflow-hidden aspect-square bg-bgMain2 group">
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-full h-full object-cover transition-all ease duration-[1s] group-hover:scale-[1.1]"></img>
<div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[25px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
<div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[15px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
<div class="grow-[1] flex flex-col gap-[25px]">
<div class="line-clamp-3">
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="px-[10px] py-[5px] bg-bgScore3 flex flex-col w-full">
<p class="text-sm text-white text-center">Excellent</p>
</div>
<div class="w-full border-t-[2px] border-bgMain pt-[15px] text-base font-bold flex flex-row gap-[10px] flex-wrap">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Type: Wine</p>
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Style: Amber</p>
</div>
</div>
</div>
<div class="h-[5px] w-full bg-bgScore3"></div>
<a href="product.html" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
Product Title
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
@ -279,21 +291,25 @@
</div>
</div>
<div class="w-full flex flex-col gap-[5px]">
<div class="w-full flex flex-col gap-[5px]">
<div class="w-full flex flex-col">
<div class="flex flex-col grow-[1] relative overflow-hidden aspect-square bg-bgMain2 group">
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-full h-full object-cover transition-all ease duration-[1s] group-hover:scale-[1.1]"></img>
<div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[25px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
<div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[15px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
<div class="grow-[1] flex flex-col gap-[25px]">
<div class="line-clamp-3">
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="px-[10px] py-[5px] bg-bgScore2 flex flex-col w-full">
<p class="text-sm text-white text-center">Very Good</p>
</div>
<div class="w-full border-t-[2px] border-bgMain pt-[15px] text-base font-bold flex flex-row gap-[10px] flex-wrap">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Type: Wine</p>
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Style: Amber</p>
</div>
</div>
</div>
<div class="h-[5px] w-full bg-bgScore2"></div>
<a href="product.html" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
Product Title
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
@ -639,14 +655,6 @@
<p class="text-sm">Search for</p>
</div>
<div class="w-full flex flex-row gap-[10px] flex-wrap overflow-auto max-h-[500px]">
<div class="relative bg-black/5 grow-[1] group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10 text-base"><label class="w-full text-center">Continent</label></div>
</div>
<div class="relative bg-black/5 grow-[1] group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10 text-base"><label class="w-full text-center">Region</label></div>
</div>
<div class="relative bg-black/5 grow-[1] group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10 text-base"><label class="w-full text-center">Country</label></div>
@ -657,7 +665,11 @@
</div>
<div class="relative bg-black/5 grow-[1] group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10 text-base"><label class="w-full text-center">City/Town/Village</label></div>
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10 text-base"><label class="w-full text-center">Region</label></div>
</div>
<div class="relative bg-black/5 grow-[1] group">
<input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
<div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10 text-base"><label class="w-full text-center">Village</label></div>
</div>
</div>
</div>

43
product.html

@ -153,6 +153,11 @@
</div>
</div>
<div class="w-full flex flex-row gap-[10px] flex-wrap">
<button popupAction="openReviewsSum" class="flex flex-row bg-bgScore5 text-bgMain text-sm relative">
<p class="px-[10px] py-[5px]">Average score</p>
<p class="px-[10px] py-[5px] bg-white/25">Exceptional</p>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
<div class="flex flex-row bg-bgMain2/75 text-bgMain text-sm">
<p class="px-[10px] py-[5px]">Product</p>
<p class="px-[10px] py-[5px] bg-white/25">Wine</p>
@ -489,15 +494,29 @@
</div>
</div>
</div>
<div class="w-full flex flex-col max-lg:col-span-2 max-md:col-span-1">
<div sliderShowcase data-result-text="Exceptional, Outstanding, Excellent, Very Good, Good, Acceptable, Poor, Faulty" class="flex flex-col gap-[15px]">
<div class="text-base flex flex-row bg-bgMain2 text-white items-center">
<input sliderShowcaseValue type="number" class="h-full bg-bgMain/35 max-w-[75px] py-[5px] px-[10px]"></input>
<p class="h-full bg-bgMain/25 px-[10px] py-[5px] py-[5px] px-[10px]">Quality</p>
<p sliderShowcaseResult class="h-full bg-bgMain/15 px-[10px] py-[5px] py-[5px] px-[10px] grow-[1]">Exceptional</p>
<div class="w-full grid grid-cols-2 col-span-3 gap-[15px] pt-[10px] border-t-[1px] border-bgMain2/25 max-lg:col-span-2 max-md:col-span-1 max-md:grid-cols-1">
<div class="w-full flex flex-col max-md:col-span-1">
<div sliderShowcase data-result-text="Exceptional, Outstanding, Excellent, Very Good, Good, Acceptable, Poor" class="flex flex-col gap-[15px]">
<div class="text-base flex flex-row bg-bgMain2 text-white items-center">
<input sliderShowcaseValue type="number" class="h-full bg-bgMain/35 max-w-[75px] py-[5px] px-[10px]"></input>
<p class="h-full bg-bgMain/25 px-[10px] py-[5px] py-[5px] px-[10px]">Quality</p>
<p sliderShowcaseResult class="h-full bg-bgMain/15 px-[10px] py-[5px] py-[5px] px-[10px] grow-[1]">Exceptional</p>
</div>
<div class="w-full">
<input sliderShowcaseSlider type="range" value="0" min="84" max="100" step="1" class="w-full h-2 bg-bgMain2/50 rounded-xl appearance-none range-lg cursor-pointer accent-bgMain2"></input>
</div>
</div>
<div class="w-full">
<input sliderShowcaseSlider type="range" value="0" min="0" max="100" step="1" class="w-full h-2 bg-bgMain2/50 rounded-xl appearance-none range-lg cursor-pointer accent-bgMain2"></input>
</div>
<div class="w-full flex flex-col max-md:col-span-1">
<div class="flex flex-row gap-[10px] justify-between">
<p class="text-base font-bold">Is the product faulty (NS)? No</p>
<label class="flex items-center cursor-pointer">
<div class="relative">
<input type="checkbox" class="hidden" uiFunction="toggle"></input>
<div class="block bg-bgMain2/25 w-12 h-6"></div>
<div class="dot absolute left-1 top-1 bg-bgMain w-4 h-4 transition"></div>
</div>
</label>
</div>
</div>
</div>
@ -631,13 +650,6 @@
<p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Lowest</p>
</div>
</div>
<div class="w-full pt-[10px] border-t-[1px] border-bgMain2/25">
<button popupAction="openReviewsSum" class="w-full justify-center flex flex-row text-base px-[10px] py-[5px] bg-bgMain2 text-bgMain relative group">
Reviews Summary
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
</div>
</div>
<div class="w-full flex flex-col gap-[35px]">
<!-- user comments start -->
@ -1471,6 +1483,7 @@
<script src="./assets/js/popups.js"></script>
<script src="./assets/js/tabSys.js"></script>
<script src="./assets/js/pageSys.js"></script>
<script src="./assets/js/uiFunctions.js"></script>
<script src="./assets/js/sliderDataShowcase.js"></script>
<script>AOS.init();</script>
<!-- SCRIPTS END-->

96
search.html

@ -171,49 +171,77 @@
</div>
<div class="w-full grid grid-cols-4 gap-[5px] max-lg:grid-cols-3 max-md:grid-cols-2 max-xs:grid-cols-1">
<!-- listing item start -->
<div class="w-full flex flex-col gap-[5px]">
<div class="w-full flex flex-col gap-[5px]">
<div class="flex flex-col grow-[1] relative overflow-hidden aspect-square bg-bgMain2 group">
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-full h-full object-cover transition-all ease duration-[1s] group-hover:scale-[1.1]"></img>
<div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[25px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
<div class="grow-[1] flex flex-col gap-[25px]">
<div class="line-clamp-3">
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="w-full border-t-[2px] border-bgMain pt-[15px] text-base font-bold flex flex-row gap-[10px] flex-wrap">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Type: Wine</p>
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Style: Amber</p>
<div class="w-full flex flex-col">
<div class="flex flex-col grow-[1] relative overflow-hidden aspect-square bg-bgMain2 group">
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-full h-full object-cover transition-all ease duration-[1s] group-hover:scale-[1.1]"></img>
<div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[15px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
<div class="grow-[1] flex flex-col gap-[25px]">
<div class="line-clamp-3">
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="px-[10px] py-[5px] bg-bgScore1 flex flex-col w-full">
<p class="text-sm text-bgMain2 text-center">Good</p>
</div>
<div class="w-full border-t-[2px] border-bgMain pt-[15px] text-base font-bold flex flex-row gap-[10px] flex-wrap">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Type: Wine</p>
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Style: Amber</p>
</div>
</div>
<a href="product.html" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
Product Title
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</a>
</div>
<div class="h-[5px] w-full bg-bgScore1"></div>
<a href="product.html" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
Product Title
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</a>
</div>
<div class="w-full flex flex-col gap-[5px]">
<div class="w-full flex flex-col gap-[5px]">
<div class="flex flex-col grow-[1] relative overflow-hidden aspect-square bg-bgMain2 group">
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-full h-full object-cover transition-all ease duration-[1s] group-hover:scale-[1.1]"></img>
<div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[25px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
<div class="grow-[1] flex flex-col gap-[25px]">
<div class="line-clamp-3">
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="w-full border-t-[2px] border-bgMain pt-[15px] text-base font-bold flex flex-row gap-[10px] flex-wrap">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Type: Wine</p>
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Style: Amber</p>
<div class="w-full flex flex-col">
<div class="flex flex-col grow-[1] relative overflow-hidden aspect-square bg-bgMain2 group">
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-full h-full object-cover transition-all ease duration-[1s] group-hover:scale-[1.1]"></img>
<div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[15px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
<div class="grow-[1] flex flex-col gap-[25px]">
<div class="line-clamp-3">
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="px-[10px] py-[5px] bg-bgScore0 flex flex-col w-full">
<p class="text-sm text-bgMain2 text-center">Poor</p>
</div>
<div class="w-full border-t-[2px] border-bgMain pt-[15px] text-base font-bold flex flex-row gap-[10px] flex-wrap">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Type: Wine</p>
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Style: Amber</p>
</div>
</div>
<a href="product.html" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
Product Title
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</a>
</div>
<div class="h-[5px] w-full bg-bgScore0"></div>
<a href="product.html" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
Product Title
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</a>
</div>
<div class="w-full flex flex-col">
<div class="flex flex-col grow-[1] relative overflow-hidden aspect-square bg-bgMain2 group">
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-full h-full object-cover transition-all ease duration-[1s] group-hover:scale-[1.1]"></img>
<div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[15px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
<div class="grow-[1] flex flex-col gap-[25px]">
<div class="line-clamp-3">
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="px-[10px] py-[5px] bg-bgScoreF flex flex-col w-full">
<p class="text-sm text-white text-center">Faulty</p>
</div>
<div class="w-full border-t-[2px] border-bgMain pt-[15px] text-base font-bold flex flex-row gap-[10px] flex-wrap">
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Type: Wine</p>
<p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Style: Amber</p>
</div>
</div>
</div>
<div class="h-[5px] w-full bg-bgScoreF"></div>
<a href="product.html" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
Product Title
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</a>
</div>
<!-- listing item end -->
</div>

14
tailwind-config.js

@ -10,13 +10,13 @@ tailwind.config = {
'linkMain': '#D4A35F', // Color for links
'btnMain': '#800020', // Background color for buttons
'btnMain2': '#D4A35F', // Alt background color for buttons
// 'bgMainHover': '#F9F9E6', // Lightened bgMain for hover
// 'bgMain2Hover': '#5C3B2A', // Lightened bgMain2 for hover
// 'textMainHover': '#3D3D3D', // Lightened textMain for hover
// 'textMain2Hover': '#F9F9E6', // Lightened textMain2 for hover
// 'linkMainHover': '#D8B76F', // Lightened linkMain for hover
// 'btnMainHover': '#A0002A', // Lightened btnMain for hover
// 'btnMain2Hover': '#D8B76F', // Lightened btnMain2 for hover
'bgScoreF': '#666666', // Poor
'bgScore0': '#b7b7b7', // Poor
'bgScore1': '#fffdd0', // Acceptable/Good
'bgScore2': '#8b0000', // Very good
'bgScore3': '#006400', // Excellent
'bgScore4': '#ffa500', // Outstanding
'bgScore5': '#9370db', // Exceptional
},
screens: {
'xs': '480px', // Add xs size