diff --git a/assets/js/pageSys.js b/assets/js/pageSys.js
new file mode 100644
index 0000000..7e902e5
--- /dev/null
+++ b/assets/js/pageSys.js
@@ -0,0 +1,58 @@
+document.addEventListener("DOMContentLoaded", function() {
+ const pageComponents = document.querySelectorAll('[pageSys]');
+
+ pageComponents.forEach(pageComponent => {
+ const backButton = pageComponent.querySelector('[pageSys-backward]');
+ const forwardButton = pageComponent.querySelector('[pageSys-forward]');
+ const pageContents = pageComponent.querySelectorAll('[pageSys-Content] > div');
+ let currentIndex = 0;
+
+ const updateButtons = () => {
+ if (currentIndex === 0) {
+ backButton.classList.add("bg-bgMain/0", "text-bgMain2");
+ backButton.classList.remove("bg-bgMain2", "text-bgMain");
+ } else {
+ backButton.classList.remove("bg-bgMain/0", "text-bgMain2");
+ backButton.classList.add("bg-bgMain2", "text-bgMain");
+ }
+
+ if (currentIndex === pageContents.length - 1) {
+ forwardButton.classList.add("bg-bgMain/0", "text-bgMain2");
+ forwardButton.classList.remove("bg-bgMain2", "text-bgMain");
+ } else {
+ forwardButton.classList.remove("bg-bgMain/0", "text-bgMain2");
+ forwardButton.classList.add("bg-bgMain2", "text-bgMain");
+ }
+ };
+
+ const showContent = (index) => {
+ pageContents.forEach((content, i) => {
+ if (i === index) {
+ content.classList.remove("hidden");
+ } else {
+ content.classList.add("hidden");
+ }
+ });
+ };
+
+ backButton.addEventListener('click', () => {
+ if (currentIndex > 0) {
+ currentIndex--;
+ showContent(currentIndex);
+ updateButtons();
+ }
+ });
+
+ forwardButton.addEventListener('click', () => {
+ if (currentIndex < pageContents.length - 1) {
+ currentIndex++;
+ showContent(currentIndex);
+ updateButtons();
+ }
+ });
+
+ // Initialize the buttons and show the first content
+ updateButtons();
+ showContent(currentIndex);
+ });
+});
diff --git a/assets/js/sliderDataShowcase.js b/assets/js/sliderDataShowcase.js
new file mode 100644
index 0000000..1f28fce
--- /dev/null
+++ b/assets/js/sliderDataShowcase.js
@@ -0,0 +1,58 @@
+document.addEventListener('DOMContentLoaded', function() {
+ // Find all sliderShowcase divs
+ const sliderShowcases = document.querySelectorAll('[sliderShowcase]');
+
+ sliderShowcases.forEach(sliderShowcase => {
+ // Find the range input and the paragraphs within this instance
+ const slider = sliderShowcase.querySelector('[sliderShowcaseSlider]');
+ const valueDisplay = sliderShowcase.querySelector('[sliderShowcaseValue]');
+ const resultDisplay = sliderShowcase.querySelector('[sliderShowcaseResult]');
+
+ // Get the result text options from the data attribute
+ const resultTextOptions = sliderShowcase.getAttribute('data-result-text').split(',').map(text => text.trim());
+
+ // Function to update the displayed value and result
+ function updateDisplays() {
+ const value = parseInt(slider.value, 10);
+ valueDisplay.value = `${value}`; // Update the value of the text input
+
+ // Determine the result index based on the value
+ let resultIndex;
+ if (value > 96) {
+ resultIndex = 0; // 'Outstanding'
+ } else if (value >= 95) {
+ resultIndex = 1; // 'Exceptional'
+ } else if (value >= 93) {
+ resultIndex = 2; // 'Excellent'
+ } else if (value >= 90) {
+ resultIndex = 3; // 'Very Good'
+ } else if (value >= 87) {
+ resultIndex = 4; // 'Good'
+ } else if (value >= 85) {
+ resultIndex = 5; // 'Acceptable'
+ } else if (value === 0) {
+ resultIndex = 7; // 'Faulty'
+ } else {
+ resultIndex = 6; // 'Poor'
+ }
+
+ // Update the result display based on the index
+ resultDisplay.textContent = `${resultTextOptions[resultIndex]}`;
+ }
+
+ // Initial update
+ updateDisplays();
+
+ // Add event listener to the slider
+ slider.addEventListener('input', updateDisplays);
+
+ // Add event listener to the text input to update the slider
+ valueDisplay.addEventListener('input', function() {
+ const newValue = parseInt(valueDisplay.value, 10);
+ if (!isNaN(newValue) && newValue >= 0 && newValue <= 100) {
+ slider.value = newValue; // Update the slider value
+ updateDisplays(); // Update displays to reflect the new slider value
+ }
+ });
+ });
+});
diff --git a/index.html b/index.html
index cc3366f..810986a 100644
--- a/index.html
+++ b/index.html
@@ -108,30 +108,38 @@
<div class="w-full flex flex-col gap-[35px] grow-[1] justify-center items-center pt-[10vh]">
<h1 data-aos="fade-down" data-aos-duration="1500" class="text-6xl font-[900] text-center">Everyone's a Critic</h1>
<p data-aos="fade-down" data-aos-duration="2000" data-aos-delay="1000" class="text-2xl text-center px-[100px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
- <div data-aos="fade-down" data-aos-duration="2000" data-aos-delay="2000" class="w-full flex flex-col gap-[10px] justify-center items-center max-w-[500px]">
- <div class="w-full flex flex-row">
- <div class="w-full flex flex-row">
- <input type="text" placeholder="Search..." class="w-full bg-black/10 py-[5px] px-[10px] border-b-[1px] border-bgMain2/25 placeholder:text-black/50 transition-all ease duration-[0.4s] focus:outline-[0] focus:bg-black/15">
- </div>
- <a href="search.html" class="flex flex-col justify-center items-center bg-bgMain2 text-bgMain p-[10px] cursor-pointer relative group">
- <i class="bx bx-search "></i>
- <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-row gap-[10px] flex-wrap">
- <button popupAction="openFilterSearch" class="bg-bgMain2 text-bgMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative grow-[1]">
- <p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Product: <span class="bg-bgMain/15 h-full w-full px-[8px] flex flex-row items-center">Wine</span></p>
+ <div data-aos="fade-down" data-aos-duration="2000" data-aos-delay="2000" class="w-full grid grid-cols-5 gap-[6px] justify-center items-center max-w-[1000px] max-lg:grid-cols-1">
+ <div class="w-full h-full grid grid-cols-5 gap-[4px] flex-wrap col-span-4 max-lg:col-span-1 max-lg:grid-cols-3 max-md:grid-cols-2 max-sm:grid-cols-1">
+ <button popupAction="openFilterSearch" class="text-bgMain bg-bgMain2 text-sm flex flex-col items-start relative grow-[1]">
+ <p class="h-full w-full flex flex-col items-start whitespace-nowrap py-[5px] px-[15px] font-bold">Product</p>
+ <p class="bg-bgMain/15 h-full w-full flex flex-row items-star py-[5px] px-[15px]">Wine</p>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
- <button class="bg-bgMain2 text-bgMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative grow-[1]">
- <p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Type: <span class="bg-bgMain/15 h-full w-full px-[8px] flex flex-row items-center">White</span></p>
+ <button popupAction="openFilterSearch" class="text-bgMain bg-bgMain2 text-sm flex flex-col items-start relative grow-[1]">
+ <p class="h-full w-full flex flex-col items-start whitespace-nowrap py-[5px] px-[15px] font-bold">Type</p>
+ <p class="bg-bgMain/15 h-full w-full flex flex-row items-star py-[5px] px-[15px]">White</p>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
- <button class="bg-bgMain2 text-bgMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative grow-[1]">
- <p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Style: <span class="bg-bgMain/15 h-full w-full px-[8px] flex flex-row items-center">Table</span></p>
+ <button popupAction="openFilterSearch" class="text-bgMain bg-bgMain2 text-sm flex flex-col items-start relative grow-[1]">
+ <p class="h-full w-full flex flex-col items-start whitespace-nowrap py-[5px] px-[15px] font-bold">Style</p>
+ <p class="bg-bgMain/15 h-full w-full flex flex-row items-star py-[5px] px-[15px]">Table</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <button popupAction="openFilterSearch" class="text-bgMain bg-bgMain2 text-sm flex flex-col items-start relative grow-[1]">
+ <p class="h-full w-full flex flex-col items-start whitespace-nowrap py-[5px] px-[15px] font-bold">Characteristic</p>
+ <p class="bg-bgMain/15 h-full w-full flex flex-row items-star py-[5px] px-[15px]">Aromatic</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <button popupAction="openFilterSearchAlt" class="text-bgMain bg-bgMain2 text-sm flex flex-col items-start relative grow-[1]">
+ <p class="h-full w-full flex flex-col items-start whitespace-nowrap py-[5px] px-[15px] font-bold">Location</p>
+ <p class="bg-bgMain/15 h-full w-full flex flex-row items-star py-[5px] px-[15px]">VillageName</p>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
</div>
+ <a href="search.html" class="w-full flex flex-row gap-[5px] justify-center items-center bg-bgMain2 text-bgMain font-bold text-base h-full px-[15px] py-[10px] cursor-pointer col-span-1 relative group">
+ Discover
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </a>
</div>
</div>
<div class="w-full h-[50vh] flex flex-row gap-[10px] mb-[10px] overflow-hidden max-lg:overflow-x-auto hide-scrollbar">
@@ -606,6 +614,90 @@
</div>
</div>
</div>
+
+ <div popupID="FilterSearchAlt" class="fixed inset-[0] z-[90] bg-black/25 backdrop-blur-sm hidden flex-col justify-start items-center py-[25px] overflow-auto">
+ <div class="max-w-[1400px] w-full flex flex-col justify-start items-center px-[10px] relative">
+ <div class="w-full flex flex-col justify-start items-center">
+ <div class="w-full max-w-[500px] justify-start items-center">
+ <div class="w-full bg-bgMain p-[15px] shadow-lg gap-[5px]">
+ <div class="flex flex-row justify-between items-center gap-[10px] pb-[5px] border-b-[1px] border-b-bgMain2/25">
+ <p class="font-bold text-lg">Location Filter</p>
+ <button popupAction="closeFilterSearchAlt" class="transition-all ease duration-[0.3s] py-[3px] px-[8px] hover:bg-bgMain2 hover:text-bgMain">
+ <i class="bx bx-x text-xl"></i>
+ </button>
+ </div>
+ <div class="w-full flex flex-col pt-[10px]">
+ <!-- popup x start -->
+ <div class="w-full flex flex-col gap-[15px]">
+ <div class="w-full max-w-[500px] flex flex-row">
+ <div class="w-full flex flex-row">
+ <input type="text" placeholder="Search..." class="w-full bg-black/10 py-[5px] px-[10px] border-b-[1px] border-bgMain2/25 placeholder:text-black/50 transition-all ease duration-[0.4s] focus:outline-[0] focus:bg-black/15">
+ </div>
+ </div>
+ <div class="w-full flex flex-col gap-[15px] p-[10px] border-[2px] border-bgMain2 items-start">
+ <div class="flex flex-row justify-center items-center mt-[-25px] bg-bgMain px-[15px] py-[2px] text-bgMain2 font-bold">
+ <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>
+ </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">State/Province</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">City/Town/Village</label></div>
+ </div>
+ </div>
+ </div>
+ <div class="w-full flex flex-col">
+ <div class="w-full flex flex-col gap-[10px] bg-bgMain2/25 p-[10px] border-[1px] border-b-[0px] border-bgMain2/25 flex-wrap overflow-auto max-h-[300px]">
+ <div class="relative bg-black/5 group">
+ <input type="checkbox" name="product" checked 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"><label class="">ContinentName, RegionName, CountryName, State/ProvinceName, City/Town/VillageName</label></div>
+ </div>
+ <!-- <p class="text-bgMain2/25 text-base text-center w-full">Nothing selected</p> -->
+ </div>
+ <div class="w-full flex flex-col gap-[10px] bg-bgMain2/25 p-[10px] border-[1px] border-bgMain2/25 flex-wrap overflow-auto max-h-[500px]">
+ <div class="relative bg-black/5 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"><label class="">ContinentName, RegionName, CountryName, State/ProvinceName, City/Town/VillageName</label></div>
+ </div>
+ <div class="relative bg-black/5 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"><label class="">ContinentName, RegionName, CountryName, State/ProvinceName, City/Town/VillageName</label></div>
+ </div>
+ <div class="relative bg-black/5 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"><label class="">ContinentName, RegionName, CountryName, State/ProvinceName, City/Town/VillageName</label></div>
+ </div>
+ </div>
+ </div>
+ <div class="w-full flex flex-row pt-[10px] border-t-[1px] border-bgMain2/25">
+ <buttons class="w-full flex flex-col justify-center items-center bg-bgMain2 text-bgMain text-base font-bold whitespace-nowrap px-[10px] py-[10px] cursor-pointer relative group">
+ Set Filter
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </buttons>
+ </div>
+ </div>
+ <!-- popup x end -->
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
<!-- popups end -->
<!-- SCRIPTS START-->
diff --git a/product.html b/product.html
index 3d918f8..bf52634 100644
--- a/product.html
+++ b/product.html
@@ -188,142 +188,18 @@
</div>
</div>
- <div class="flex flex-col gap-[35px]">
- <div class="w-full flex flex-row gap-[15px]">
- <h3 class="flex flex row text-2xl font-bold"><span class="overflow-hidden whitespace-nowrap text-ellipsis">Seller Name</span>'s Latest Products</h3>
- </div>
- <!-- listings list start -->
- <div class="w-full grid grid-cols-5 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>
- </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>
- <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>
- </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>
- <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>
- </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>
- <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>
- </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>
- <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>
- </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>
- <!-- listing item end -->
- </div>
- <!-- listings list end -->
- <div class="w-full flex flex-row justify-center items-center">
- <a href="profile.html" class="bg-bgMain2 text-textMain2 px-[15px] py-[10px] text-base w-full max-w-[300px] text-center relative">View More<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10 cursor-pointer"></span></a>
- </div>
- </div>
-
- <div tabSys class="w-full grid grid-cols-8 gap-[50px]">
+ <div tabSys class="w-full grid grid-cols-8 gap-[50px] max-md:grid-cols-1">
<!-- tabs selectors start-->
- <div class="w-full col-span-2 relative">
+ <div class="w-full col-span-2 relative max-md:col-span-1">
<div tabSys-Selector class="w-full flex flex-col gap-[10px] sticky top-[10px]">
<button class="w-full px-[15px] py-[5px] bg-bgMain2 text-bgMain transition-all ease duration-[0.4s]">Reviews</button>
<button class="w-full px-[15px] py-[5px] transition-all ease duration-[0.4s] hover:bg-bgMain2/25">Comments</button>
+ <button class="w-full px-[15px] py-[5px] transition-all ease duration-[0.4s] hover:bg-bgMain2/25">Product Details</button>
</div>
</div>
<!-- tabs selectors end-->
<!-- tabs content start-->
- <div tabSys-Content class="w-full flex flex-col gap-[10px] col-span-6">
+ <div tabSys-Content class="w-full flex flex-col gap-[10px] col-span-6 max-md:col-span-1">
<div class="w-full flex flex-col gap-[10px]">
<div class="w-full flex flex-col gap-[25px]">
<div class="w-full flex flex-col gap-[15px]">
@@ -334,24 +210,321 @@
</div>
<textarea type="text" placeholder="What's your review of this drink?" class="col-span-7 w-full min-h-[125px] px-[15px] py-[10px] bg-black/10 placeholder:text-black/50 transition-colors ease duration-[0.4s] focus:outline-[0] focus:bg-black/15"></textarea>
</div>
- <div class="w-full flex flex-row gap-[25px] justify-between">
- <div class="flex flex-row gap-[10px] items-center justify-center bg-bgMain2/85 text-bgMain">
- <p class="text-base pl-[10px] py-[5px]">Your rating</p>
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 pr-[5px]">
- <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
- <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
- <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
- <button class="p-[5px] text-bgMain/25 transition-all ease duration-[0.4s] hover:text-bgMain"><i class="bx bx-wine"></i></button>
- <button class="p-[5px] text-bgMain/25 transition-all ease duration-[0.4s] hover:text-bgMain"><i class="bx bx-wine"></i></button>
+ <div class="flex flex-col gap-[10px]">
+ <div pageSys class="p-[15px] w-full flex flex-col gap-[10px] bg-bgMain2/25">
+ <div pageSys-Content class="w-full flex flex-col">
+
+ <div class="w-full flex flex-col gap-[15px]">
+ <div class="w-full flex flex-col">
+ <p class="font-bold text-xl">Visual Assessment</p>
+ </div>
+ <div class="w-full grid grid-cols-3 gap-[10px] max-lg:grid-cols-2 max-md:grid-cols-1">
+ <div class="w-full flex flex-col">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] bg-bgMain2 text-bgMain relative group w-full">
+ <p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Clarity: *</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Not sure</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Clear</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Hazy</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Cloudy</p>
+ </div>
+ </div>
+ </div>
+ <div class="w-full flex flex-col">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] bg-bgMain2 text-bgMain relative group w-full">
+ <p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Colour: Red</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Not sure</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Red</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Blue</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Green</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Transparent</p>
+ </div>
+ </div>
+ </div>
+ <div class="w-full flex flex-col">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] bg-bgMain2 text-bgMain relative group w-full">
+ <p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Bubbles: Slight Fizz</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Not sure</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Still</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Slight Fizz</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Sparkling</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="w-full flex flex-col gap-[15px]">
+ <div class="w-full flex flex-col">
+ <p class="font-bold text-xl">Aromatic Assessment</p>
+ </div>
+ <div class="w-full grid grid-cols-3 gap-[10px] max-lg:grid-cols-2 max-md:grid-cols-1">
+ <div class="w-full flex flex-col">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] bg-bgMain2 text-bgMain relative group w-full">
+ <p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Intensity: *</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Not sure</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Weak</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Moderate</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Pronounced</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Complex</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="w-full flex flex-col gap-[15px]">
+ <div class="w-full flex flex-col">
+ <p class="font-bold text-xl">Primary Flavours and Aromas</p>
+ </div>
+ <div class="w-full flex flex-col gap-[15px]">
+ <div class="w-full flex flex-row">
+ <div class="w-full flex flex-row">
+ <input type="text" placeholder="Search..." class="w-full bg-black/10 py-[5px] px-[10px] border-b-[1px] border-bgMain2/25 placeholder:text-black/50 transition-all ease duration-[0.4s] focus:outline-[0] focus:bg-black/15">
+ </div>
+ </div>
+ <div class="w-full flex flex-col gap-[15px] p-[10px] border-[2px] border-bgMain2 items-start">
+ <div class="flex flex-row justify-center items-center mt-[-25px] bg-[#CAC3AB] px-[15px] py-[2px] text-bgMain2 font-bold">
+ <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">Fruit</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">Floral</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">Vegetal</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">Earth</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">Microbial</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">Oak</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">Aging</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">Umami</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">Oxidation</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">Balsamic</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">Grain</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">Dairy</label></div>
+ </div>
+ </div>
+ </div>
+ <div class="w-full flex flex-col">
+ <div class="w-full flex flex-col gap-[10px] bg-bgMain2/25 p-[10px] border-[1px] border-b-[0px] border-bgMain2/25 flex-wrap overflow-auto max-h-[300px]">
+ <div class="relative bg-black/5 group">
+ <input type="checkbox" name="product" checked="" 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"><label class="">Dairy, Milk</label></div>
+ </div>
+ <!-- <p class="text-bgMain2/25 text-base text-center w-full">Nothing selected</p> -->
+ </div>
+ <div class="w-full flex flex-col gap-[10px] bg-bgMain2/25 p-[10px] border-[1px] border-bgMain2/25 flex-wrap overflow-auto max-h-[500px]">
+ <div class="relative bg-black/5 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"><label class="">Fruit, Red Fruit, Strawberry</label></div>
+ </div>
+ <div class="relative bg-black/5 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"><label class="">Fruit, Red Fruit, Strawberry</label></div>
+ </div>
+ <div class="relative bg-black/5 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"><label class="">Fruit, Red Fruit, Strawberry</label></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="w-full flex flex-col gap-[15px]">
+ <div class="w-full flex flex-col">
+ <p class="font-bold text-xl">Flavor Assessment</p>
+ </div>
+ <div class="w-full grid grid-cols-3 gap-[10px] max-lg:grid-cols-2 max-md:grid-cols-1">
+ <div class="w-full flex flex-col">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] bg-bgMain2 text-bgMain relative group w-full">
+ <p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Sweetness: *</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Not sure</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Dry</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Off-dry</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Medium</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Sweet</p>
+ </div>
+ </div>
+ </div>
+ <div class="w-full flex flex-col">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] bg-bgMain2 text-bgMain relative group w-full">
+ <p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Acidity: Low</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Not sure</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Low</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Medium</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">High</p>
+ </div>
+ </div>
+ </div>
+ <div class="w-full flex flex-col">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] bg-bgMain2 text-bgMain relative group w-full">
+ <p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Alcohol: Prominent</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Not sure</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Integrated</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Noticeable warmth</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Prominent</p>
+ </div>
+ </div>
+ </div>
+ <div class="w-full flex flex-col">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] bg-bgMain2 text-bgMain relative group w-full">
+ <p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Body: *</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Not sure</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Light</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Medium</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Full-bodied</p>
+ </div>
+ </div>
+ </div>
+ <div class="w-full flex flex-col">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] bg-bgMain2 text-bgMain relative group w-full">
+ <p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Finish: *</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Not sure</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Short</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Medium</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Long-lasting</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="w-full flex flex-col gap-[15px]">
+ <div class="w-full flex flex-col">
+ <p class="font-bold text-xl">Balance and Complexity</p>
+ </div>
+ <div class="w-full grid grid-cols-3 gap-[10px] max-lg:grid-cols-2 max-md:grid-cols-1">
+ <div class="w-full flex flex-col">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] bg-bgMain2 text-bgMain relative group w-full">
+ <p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Harmony: *</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Not sure</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Harmonious</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Not harmonious</p>
+ </div>
+ </div>
+ </div>
+ <div class="w-full flex flex-col">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] bg-bgMain2 text-bgMain relative group w-full">
+ <p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Complexity: Complex</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Not sure</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Complex</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Not Complex</p>
+ </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>
+ <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>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ <div pageSys-Selector class="w-full flex flex-row gap-[10px] justify-center items-center pt-[10px] border-t-[1px] border-bgMain2/25">
+ <button pageSys-backward class="grow-[1] max-w-[200px] px-[15px] py-[3px] bg-bgMain2 text-bgMain relative">
+ <p class="">Previous</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <button pageSys-forward class="grow-[1] max-w-[200px] px-[15px] py-[3px] bg-bgMain2 text-bgMain relative">
+ <p class="">Next</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
</div>
</div>
- <div class="flex flex-row justify-center items-center">
- <a href="profile.html" class="bg-bgMain2 text-textMain2 px-[15px] py-[10px] text-base text-center flex flex-row gap-[5px] relative">Publish Review <span class="flex flex-rol justify-center items-center"><i class="bx bxs-bolt"></i>(500)</span><span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10 cursor-pointer"></span></a>
+ <div class="w-full flex flex-row gap-[25px] justify-end">
+ <div class="flex flex-row justify-center items-center">
+ <button class="bg-bgMain2 text-textMain2 px-[15px] py-[10px] text-base text-center flex flex-row gap-[5px] relative">Publish Review <span class="flex flex-rol justify-center items-center"><i class="bx bxs-bolt"></i>(500)</span><span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10 cursor-pointer"></span></button>
+ </div>
</div>
</div>
</div>
<div class="w-full flex flex-col gap-[10px]">
- <div class="w-full flex flex-col gap-[15px] py-[25px] border-y-[2px] border-bgMain2">
+ <div class="w-full flex flex-col gap-[15px] pt-[25px] border-t-[2px] border-bgMain2">
<div class="w-full grid grid-cols-8 gap-[25px]">
<a href="profile.html" class="w-full col-span-1 relative">
<img class="object-cover aspect-square" src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg"></img>
@@ -369,7 +542,7 @@
<i class="bx bx-dots-vertical"></i>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
- <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Report</p>
<p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Block</p>
</div>
@@ -385,18 +558,17 @@
<button class="text-sm bg-bgMain2/25 text-bgMain2/75 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-bgMain2/20 hover:text-bgMain2">Expand</button>
</div>
</div>
- <div class="w-full flex flex-row gap-[10px] justify-end">
- <div class="flex flex-row gap-[10px]">
- <div class="flex flex-row gap-[10px] items-center justify-center bg-bgMain2/85 text-bgMain">
- <p class="text-base pl-[10px] py-[5px]">Rating</p>
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 pr-[5px]">
- <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
- <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
- <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
- <button class="p-[5px] text-bgMain/25 transition-all ease duration-[0.4s] hover:text-bgMain"><i class="bx bx-wine"></i></button>
- <button class="p-[5px] text-bgMain/25 transition-all ease duration-[0.4s] hover:text-bgMain"><i class="bx bx-wine"></i></button>
- </div>
- </div>
+ <div class="w-full flex flex-row gap-[10px] justify-end flex-wrap">
+ <div class="flex flex-row gap-[10px] justify-end flex-wrap grow-[1]">
+ <button popupAction="openReview" class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain relative">
+ <p class="h-full text-base px-[10px] py-[5px]">Review</p>
+ <p class="h-full flex flex-row items-center text-base px-[10px] py-[5px] bg-bgMain/10 gap-[10px]">
+ <span class="text-btnMain2 text-center">
+ <i class="bx bxs-wine"></i>
+ </span>
+ Exceptional</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
<button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
<div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-bolt"></i></div>
@@ -422,17 +594,18 @@
<p class="text-base px-[10px] py-[5px]">32</p>
</button>
</div>
- <button class="bg-bgMain2 text-textMain2 px-[15px] py-[5px] text-sm text-center flex flex-row gap-[5px] relative">Reply<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span></button>
+ <button popupAction="openReply" class="bg-bgMain2 text-textMain2 px-[25px] py-[5px] text-sm justify-center items-center flex flex-row gap-[5px] relative text-center max-lg:grow-[1]">Reply<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span></button>
</div>
</div>
</div>
- <div class="w-full flex flex-row gap-[10px] pb-[25px] border-b-[1px] border-bgMain2/25">
+
+ <div class="w-full flex flex-row gap-[10px] bg-bgMain2/25 p-[10px] flex-wrap">
<div class="relative inline-block">
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-bgMain2 text-bgMain relative group">
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Moderation Level: Site & User</p>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
- <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Site & User</p>
<p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Site</p>
<p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">None</p>
@@ -443,7 +616,7 @@
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Show: Latest</p>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
- <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Latest</p>
<p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Oldest</p>
</div>
@@ -453,16 +626,23 @@
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Score: Highest</p>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
- <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Highest</p>
<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 -->
<div class="w-full flex flex-col gap-[35px]">
- <div class="w-full flex flex-col gap-[15px] py-[25px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
+ <div class="w-full flex flex-col gap-[15px] pb-[25px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
<div class="w-full grid grid-cols-8 gap-[25px]">
<a href="profile.html" class="w-full col-span-1 relative">
<img class="object-cover aspect-square" src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg"></img>
@@ -480,7 +660,7 @@
<i class="bx bx-dots-vertical"></i>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
- <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Report</p>
<p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Block</p>
</div>
@@ -496,18 +676,17 @@
<button class="text-sm bg-bgMain2/25 text-bgMain2/75 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-bgMain2/20 hover:text-bgMain2">Expand</button>
</div>
</div>
- <div class="w-full flex flex-row gap-[10px] justify-end">
- <div class="flex flex-row gap-[10px]">
- <div class="flex flex-row gap-[10px] items-center justify-center bg-bgMain2/85 text-bgMain">
- <p class="text-base pl-[10px] py-[5px]">Rating</p>
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 pr-[5px]">
- <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
- <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
- <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
- <button class="p-[5px] text-bgMain/25 transition-all ease duration-[0.4s] hover:text-bgMain"><i class="bx bx-wine"></i></button>
- <button class="p-[5px] text-bgMain/25 transition-all ease duration-[0.4s] hover:text-bgMain"><i class="bx bx-wine"></i></button>
- </div>
- </div>
+ <div class="w-full flex flex-row gap-[10px] justify-end flex-wrap">
+ <div class="flex flex-row gap-[10px] justify-end flex-wrap grow-[1]">
+ <button popupAction="openReview" class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain relative">
+ <p class="h-full text-base px-[10px] py-[5px]">Review</p>
+ <p class="h-full flex flex-row items-center text-base px-[10px] py-[5px] bg-bgMain/10 gap-[10px]">
+ <span class="text-btnMain2 text-center">
+ <i class="bx bxs-wine"></i>
+ </span>
+ Exceptional</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
<button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
<div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-bolt"></i></div>
@@ -533,157 +712,10 @@
<p class="text-base px-[10px] py-[5px]">32</p>
</button>
</div>
- <button class="bg-bgMain2 text-textMain2 px-[15px] py-[5px] text-sm text-center flex flex-row gap-[5px] relative">Reply<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-[15px] py-[25px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
- <div class="w-full grid grid-cols-8 gap-[25px]">
- <a href="profile.html" class="w-full col-span-1 relative">
- <img class="object-cover aspect-square" src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg"></img>
- <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
- </a>
- <div class="w-full flex flex-col gap-[15px] col-span-7">
- <div class="w-full flex flex-row gap-[25px] justify-between">
- <div class="flex flex-col gap-[5px] flex-wrap font-bold text-base">
- <a href="profile.html" class="overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[0.4s] hover:text-linkMain">User's Name</a>
- <p class="bg-bgMain2/75 text-bgMain text-sm px-[10px] py-[5px] font-normal">npub1xsdg...xp4os02</p>
- </div>
- <div class="flex flex-col gap-[5px] items-end">
- <div class="relative inline-block">
- <button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain relative group">
- <i class="bx bx-dots-vertical"></i>
- <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
- </button>
- <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
- <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Report</p>
- <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Block</p>
- </div>
- </div>
- <div class="flex flex-row gap-[15px] flex-wrap text-base">
- <p class=>4/07/2025</p>
- <p class=>4:20 PM</p>
- </div>
- </div>
- </div>
- <p class="text-base line-clamp-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
- <button class="text-sm bg-bgMain2/25 text-bgMain2/75 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-bgMain2/20 hover:text-bgMain2">Expand</button>
- </div>
- </div>
- <div class="w-full flex flex-row gap-[10px] justify-end">
- <div class="flex flex-row gap-[10px]">
- <div class="flex flex-row gap-[10px] items-center justify-center bg-bgMain2/85 text-bgMain">
- <p class="text-base pl-[10px] py-[5px]">Rating</p>
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 pr-[5px]">
- <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
- <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
- <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
- <button class="p-[5px] text-bgMain/25 transition-all ease duration-[0.4s] hover:text-bgMain"><i class="bx bx-wine"></i></button>
- <button class="p-[5px] text-bgMain/25 transition-all ease duration-[0.4s] hover:text-bgMain"><i class="bx bx-wine"></i></button>
- </div>
- </div>
- <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
- <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-bolt"></i></div>
- </div>
- <p class="text-base px-[10px] py-[5px]">500,000</p>
- </button>
- <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
- <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-upvote"></i></div>
- </div>
- <p class="text-base px-[10px] py-[5px]">25</p>
- </button>
- <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
- <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-downvote"></i></div>
- </div>
- <p class="text-base px-[10px] py-[5px]">5</p>
- </button>
- <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
- <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-message"></i></div>
- </div>
- <p class="text-base px-[10px] py-[5px]">32</p>
- </button>
- </div>
- <button class="bg-bgMain2 text-textMain2 px-[15px] py-[5px] text-sm text-center flex flex-row gap-[5px] relative">Reply<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-[15px] py-[25px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
- <div class="w-full grid grid-cols-8 gap-[25px]">
- <a href="profile.html" class="w-full col-span-1 relative">
- <img class="object-cover aspect-square" src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg"></img>
- <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
- </a>
- <div class="w-full flex flex-col gap-[15px] col-span-7">
- <div class="w-full flex flex-row gap-[25px] justify-between">
- <div class="flex flex-col gap-[5px] flex-wrap font-bold text-base">
- <a href="profile.html" class="overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[0.4s] hover:text-linkMain">User's Name</a>
- <p class="bg-bgMain2/75 text-bgMain text-sm px-[10px] py-[5px] font-normal">npub1xsdg...xp4os02</p>
- </div>
- <div class="flex flex-col gap-[5px] items-end">
- <div class="relative inline-block">
- <button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain relative group">
- <i class="bx bx-dots-vertical"></i>
- <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
- </button>
- <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
- <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Report</p>
- <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Block</p>
- </div>
- </div>
- <div class="flex flex-row gap-[15px] flex-wrap text-base">
- <p class=>4/07/2025</p>
- <p class=>4:20 PM</p>
- </div>
- </div>
- </div>
- <p class="text-base line-clamp-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
- <button class="text-sm bg-bgMain2/25 text-bgMain2/75 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-bgMain2/20 hover:text-bgMain2">Expand</button>
- </div>
- </div>
- <div class="w-full flex flex-row gap-[10px] justify-end">
- <div class="flex flex-row gap-[10px]">
- <div class="flex flex-row gap-[10px] items-center justify-center bg-bgMain2/85 text-bgMain">
- <p class="text-base pl-[10px] py-[5px]">Rating</p>
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 pr-[5px]">
- <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
- <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
- <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
- <button class="p-[5px] text-bgMain/25 transition-all ease duration-[0.4s] hover:text-bgMain"><i class="bx bx-wine"></i></button>
- <button class="p-[5px] text-bgMain/25 transition-all ease duration-[0.4s] hover:text-bgMain"><i class="bx bx-wine"></i></button>
- </div>
- </div>
- <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
- <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-bolt"></i></div>
- </div>
- <p class="text-base px-[10px] py-[5px]">500,000</p>
- </button>
- <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
- <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-upvote"></i></div>
- </div>
- <p class="text-base px-[10px] py-[5px]">25</p>
- </button>
- <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
- <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-downvote"></i></div>
- </div>
- <p class="text-base px-[10px] py-[5px]">5</p>
- </button>
- <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
- <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-message"></i></div>
- </div>
- <p class="text-base px-[10px] py-[5px]">32</p>
- </button>
- </div>
- <button class="bg-bgMain2 text-textMain2 px-[15px] py-[5px] text-sm text-center flex flex-row gap-[5px] relative">Reply<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span></button>
+ <button popupAction="openReply" class="bg-bgMain2 text-textMain2 px-[25px] py-[5px] text-sm justify-center items-center flex flex-row gap-[5px] relative text-center max-lg:grow-[1]">Reply<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span></button>
</div>
</div>
+
</div>
<!-- user comments end -->
<!-- Pagination start -->
@@ -713,6 +745,7 @@
</div>
</div>
</div>
+
<div class="w-full flex flex-col gap-[10px] hidden">
<div class="w-full flex flex-col gap-[25px]">
<div class="w-full flex flex-col gap-[25px]">
@@ -726,81 +759,17 @@
</div>
<div class="w-full flex flex-row gap-[25px] justify-end">
<div class="flex flex-row justify-center items-center">
- <a href="profile.html" class="bg-bgMain2 text-textMain2 px-[15px] py-[10px] text-base text-center flex flex-row gap-[5px] relative">Publish Comment</a>
+ <button class="bg-bgMain2 text-textMain2 px-[15px] py-[10px] text-base text-center flex flex-row gap-[5px] relative">Publish Comment</button>
</div>
</div>
</div>
- <div class="w-full flex flex-col gap-[15px] py-[25px] border-y-[2px] border-bgMain2">
- <div class="w-full grid grid-cols-8 gap-[25px]">
- <a href="profile.html" class="w-full col-span-1 relative">
- <img class="object-cover aspect-square" src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg"></img>
- <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
- </a>
- <div class="w-full flex flex-col gap-[15px] col-span-7">
- <div class="w-full flex flex-row gap-[25px] justify-between">
- <div class="flex flex-col gap-[5px] flex-wrap font-bold text-base">
- <a href="profile.html" class="overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[0.4s] hover:text-linkMain">User's Name</a>
- <p class="bg-bgMain2/75 text-bgMain text-sm px-[10px] py-[5px] font-normal">npub1xsdg...xp4os02</p>
- </div>
- <div class="flex flex-col gap-[5px] items-end">
- <div class="relative inline-block">
- <button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain relative group">
- <i class="bx bx-dots-vertical"></i>
- <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
- </button>
- <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
- <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Report</p>
- <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Block</p>
- </div>
- </div>
- <div class="flex flex-row gap-[15px] flex-wrap text-base">
- <p class=>4/07/2025</p>
- <p class=>4:20 PM</p>
- </div>
- </div>
- </div>
- <p class="text-base line-clamp-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
- <button class="text-sm bg-bgMain2/25 text-bgMain2/75 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-bgMain2/20 hover:text-bgMain2">Expand</button>
- </div>
- </div>
- <div class="w-full flex flex-row gap-[10px] justify-end">
- <div class="flex flex-row gap-[10px]">
- <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
- <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-bolt"></i></div>
- </div>
- <p class="text-base px-[10px] py-[5px]">500,000</p>
- </button>
- <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
- <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-upvote"></i></div>
- </div>
- <p class="text-base px-[10px] py-[5px]">25</p>
- </button>
- <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
- <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-downvote"></i></div>
- </div>
- <p class="text-base px-[10px] py-[5px]">5</p>
- </button>
- <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
- <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-message"></i></div>
- </div>
- <p class="text-base px-[10px] py-[5px]">32</p>
- </button>
- </div>
- <button class="bg-bgMain2 text-textMain2 px-[15px] py-[5px] text-sm text-center flex flex-row gap-[5px] relative">Reply<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-row gap-[10px] pb-[25px] border-b-[1px] border-bgMain2/25">
+ <div class="w-full flex flex-row gap-[10px] bg-bgMain2/25 p-[10px]">
<div class="relative inline-block">
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-bgMain2 text-bgMain relative group">
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Moderation Level: Site & User</p>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
- <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Site & User</p>
<p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Site</p>
<p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">None</p>
@@ -811,7 +780,7 @@
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Show: Latest</p>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
- <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
<p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Latest</p>
<p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Oldest</p>
</div>
@@ -821,197 +790,136 @@
<!-- user comments start -->
<div class="w-full flex flex-col gap-[35px]">
<div class="w-full flex flex-col gap-[15px] py-[25px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
- <div class="w-full grid grid-cols-8 gap-[25px]">
- <a href="profile.html" class="w-full col-span-1 relative">
- <img class="object-cover aspect-square" src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg"></img>
- <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
- </a>
- <div class="w-full flex flex-col gap-[15px] col-span-7">
- <div class="w-full flex flex-row gap-[25px] justify-between">
- <div class="flex flex-col gap-[5px] flex-wrap font-bold text-base">
- <a href="profile.html" class="overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[0.4s] hover:text-linkMain">User's Name</a>
- <p class="bg-bgMain2/75 text-bgMain text-sm px-[10px] py-[5px] font-normal">npub1xsdg...xp4os02</p>
- </div>
- <div class="flex flex-col gap-[5px] items-end">
- <div class="relative inline-block">
- <button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain relative group">
- <i class="bx bx-dots-vertical"></i>
- <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
- </button>
- <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
- <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Report</p>
- <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Block</p>
+ <div class="w-full flex flex-col gap-[15px] pb-[25px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
+ <div class="w-full grid grid-cols-8 gap-[25px]">
+ <a href="profile.html" class="w-full col-span-1 relative">
+ <img class="object-cover aspect-square" src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg"></img>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </a>
+ <div class="w-full flex flex-col gap-[15px] col-span-7">
+ <div class="w-full flex flex-row gap-[25px] justify-between">
+ <div class="flex flex-col gap-[5px] flex-wrap font-bold text-base">
+ <a href="profile.html" class="overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[0.4s] hover:text-linkMain">User's Name</a>
+ <p class="bg-bgMain2/75 text-bgMain text-sm px-[10px] py-[5px] font-normal">npub1xsdg...xp4os02</p>
+ </div>
+ <div class="flex flex-col gap-[5px] items-end">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain relative group">
+ <i class="bx bx-dots-vertical"></i>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Report</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Block</p>
+ </div>
+ </div>
+ <div class="flex flex-row gap-[15px] flex-wrap text-base">
+ <p class=>4/07/2025</p>
+ <p class=>4:20 PM</p>
</div>
</div>
- <div class="flex flex-row gap-[15px] flex-wrap text-base">
- <p class=>4/07/2025</p>
- <p class=>4:20 PM</p>
- </div>
</div>
+ <p class="text-base line-clamp-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ <button class="text-sm bg-bgMain2/25 text-bgMain2/75 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-bgMain2/20 hover:text-bgMain2">Expand</button>
</div>
- <p class="text-base line-clamp-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
- <button class="text-sm bg-bgMain2/25 text-bgMain2/75 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-bgMain2/20 hover:text-bgMain2">Expand</button>
+ </div>
+ <div class="w-full flex flex-row gap-[10px] justify-end flex-wrap">
+ <div class="flex flex-row gap-[10px] justify-end flex-wrap grow-[1]">
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-bolt"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">500,000</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-upvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">25</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-downvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">5</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-message"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">32</p>
+ </button>
+ </div>
+ <button popupAction="openReply" class="bg-bgMain2 text-textMain2 px-[25px] py-[5px] text-sm justify-center items-center flex flex-row gap-[5px] relative text-center max-lg:grow-[1]">Reply<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-row gap-[10px] justify-end">
- <div class="flex flex-row gap-[10px]">
- <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
- <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-bolt"></i></div>
- </div>
- <p class="text-base px-[10px] py-[5px]">500,000</p>
- </button>
- <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
- <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-upvote"></i></div>
- </div>
- <p class="text-base px-[10px] py-[5px]">25</p>
- </button>
- <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
- <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-downvote"></i></div>
- </div>
- <p class="text-base px-[10px] py-[5px]">5</p>
- </button>
- <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
- <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-message"></i></div>
- </div>
- <p class="text-base px-[10px] py-[5px]">32</p>
- </button>
- </div>
- <button class="bg-bgMain2 text-textMain2 px-[15px] py-[5px] text-sm text-center flex flex-row gap-[5px] relative">Reply<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-[15px] py-[25px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
- <div class="w-full grid grid-cols-8 gap-[25px]">
- <a href="profile.html" class="w-full col-span-1 relative">
- <img class="object-cover aspect-square" src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg"></img>
- <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
- </a>
- <div class="w-full flex flex-col gap-[15px] col-span-7">
- <div class="w-full flex flex-row gap-[25px] justify-between">
- <div class="flex flex-col gap-[5px] flex-wrap font-bold text-base">
- <a href="profile.html" class="overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[0.4s] hover:text-linkMain">User's Name</a>
- <p class="bg-bgMain2/75 text-bgMain text-sm px-[10px] py-[5px] font-normal">npub1xsdg...xp4os02</p>
- </div>
- <div class="flex flex-col gap-[5px] items-end">
- <div class="relative inline-block">
- <button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain relative group">
- <i class="bx bx-dots-vertical"></i>
- <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
- </button>
- <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
- <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Report</p>
- <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Block</p>
+
+ <div class="w-full flex flex-col gap-[15px] pb-[25px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
+ <div class="w-full grid grid-cols-8 gap-[25px]">
+ <a href="profile.html" class="w-full col-span-1 relative">
+ <img class="object-cover aspect-square" src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg"></img>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </a>
+ <div class="w-full flex flex-col gap-[15px] col-span-7">
+ <div class="w-full flex flex-row gap-[25px] justify-between">
+ <div class="flex flex-col gap-[5px] flex-wrap font-bold text-base">
+ <a href="profile.html" class="overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[0.4s] hover:text-linkMain">User's Name</a>
+ <p class="bg-bgMain2/75 text-bgMain text-sm px-[10px] py-[5px] font-normal">npub1xsdg...xp4os02</p>
+ </div>
+ <div class="flex flex-col gap-[5px] items-end">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain relative group">
+ <i class="bx bx-dots-vertical"></i>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Report</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Block</p>
+ </div>
+ </div>
+ <div class="flex flex-row gap-[15px] flex-wrap text-base">
+ <p class=>4/07/2025</p>
+ <p class=>4:20 PM</p>
</div>
</div>
- <div class="flex flex-row gap-[15px] flex-wrap text-base">
- <p class=>4/07/2025</p>
- <p class=>4:20 PM</p>
- </div>
</div>
+ <p class="text-base line-clamp-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ <button class="text-sm bg-bgMain2/25 text-bgMain2/75 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-bgMain2/20 hover:text-bgMain2">Expand</button>
</div>
- <p class="text-base line-clamp-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
- <button class="text-sm bg-bgMain2/25 text-bgMain2/75 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-bgMain2/20 hover:text-bgMain2">Expand</button>
</div>
- </div>
- <div class="w-full flex flex-row gap-[10px] justify-end">
- <div class="flex flex-row gap-[10px]">
- <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
- <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-bolt"></i></div>
- </div>
- <p class="text-base px-[10px] py-[5px]">500,000</p>
- </button>
- <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
- <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-upvote"></i></div>
- </div>
- <p class="text-base px-[10px] py-[5px]">25</p>
- </button>
- <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
- <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-downvote"></i></div>
- </div>
- <p class="text-base px-[10px] py-[5px]">5</p>
- </button>
- <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
- <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-message"></i></div>
- </div>
- <p class="text-base px-[10px] py-[5px]">32</p>
- </button>
- </div>
- <button class="bg-bgMain2 text-textMain2 px-[15px] py-[5px] text-sm text-center flex flex-row gap-[5px] relative">Reply<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-[15px] py-[25px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
- <div class="w-full grid grid-cols-8 gap-[25px]">
- <a href="profile.html" class="w-full col-span-1 relative">
- <img class="object-cover aspect-square" src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg"></img>
- <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
- </a>
- <div class="w-full flex flex-col gap-[15px] col-span-7">
- <div class="w-full flex flex-row gap-[25px] justify-between">
- <div class="flex flex-col gap-[5px] flex-wrap font-bold text-base">
- <a href="profile.html" class="overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[0.4s] hover:text-linkMain">User's Name</a>
- <p class="bg-bgMain2/75 text-bgMain text-sm px-[10px] py-[5px] font-normal">npub1xsdg...xp4os02</p>
- </div>
- <div class="flex flex-col gap-[5px] items-end">
- <div class="relative inline-block">
- <button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain relative group">
- <i class="bx bx-dots-vertical"></i>
- <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
- </button>
- <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
- <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Report</p>
- <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Block</p>
- </div>
+ <div class="w-full flex flex-row gap-[10px] justify-end flex-wrap">
+ <div class="flex flex-row gap-[10px] justify-end flex-wrap grow-[1]">
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-bolt"></i></div>
</div>
- <div class="flex flex-row gap-[15px] flex-wrap text-base">
- <p class=>4/07/2025</p>
- <p class=>4:20 PM</p>
+ <p class="text-base px-[10px] py-[5px]">500,000</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-upvote"></i></div>
</div>
- </div>
+ <p class="text-base px-[10px] py-[5px]">25</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-downvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">5</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-message"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">32</p>
+ </button>
</div>
- <p class="text-base line-clamp-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
- <button class="text-sm bg-bgMain2/25 text-bgMain2/75 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-bgMain2/20 hover:text-bgMain2">Expand</button>
+ <button popupAction="openReply" class="bg-bgMain2 text-textMain2 px-[25px] py-[5px] text-sm justify-center items-center flex flex-row gap-[5px] relative text-center max-lg:grow-[1]">Reply<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-row gap-[10px] justify-end">
- <div class="flex flex-row gap-[10px]">
- <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
- <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-bolt"></i></div>
- </div>
- <p class="text-base px-[10px] py-[5px]">500,000</p>
- </button>
- <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
- <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-upvote"></i></div>
- </div>
- <p class="text-base px-[10px] py-[5px]">25</p>
- </button>
- <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
- <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-downvote"></i></div>
- </div>
- <p class="text-base px-[10px] py-[5px]">5</p>
- </button>
- <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
- <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
- <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-message"></i></div>
- </div>
- <p class="text-base px-[10px] py-[5px]">32</p>
- </button>
- </div>
- <button class="bg-bgMain2 text-textMain2 px-[15px] py-[5px] text-sm text-center flex flex-row gap-[5px] relative">Reply<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span></button>
- </div>
- </div>
+
</div>
<!-- user comments end -->
<!-- Pagination start -->
@@ -1039,6 +947,24 @@
</div>
<!-- Pagination end -->
</div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="w-full flex flex-col gap-[10px] hidden">
+ <div class="w-full grid grid-cols-2 text-base gap-[10px] max-lg:grid-cols-1">
+ <div class="w-full flex flex-row bg-bgMain2/50 text-bgMain">
+ <p class="font-bold px-[15px] py-[5px]">Info</p>
+ <p class="w-full bg-bgMain/15 px-[15px] py-[5px]">InfoContent</p>
+ </div>
+ <div class="w-full flex flex-row bg-bgMain2/50 text-bgMain">
+ <p class="font-bold px-[15px] py-[5px]">Info</p>
+ <p class="w-full bg-bgMain/15 px-[15px] py-[5px]">InfoContent</p>
+ </div>
+ <div class="w-full flex flex-row bg-bgMain2/50 text-bgMain">
+ <p class="font-bold px-[15px] py-[5px]">Info</p>
+ <p class="w-full bg-bgMain/15 px-[15px] py-[5px]">InfoContent</p>
</div>
</div>
</div>
@@ -1125,6 +1051,418 @@
<!-- main footer end -->
<!-- popups start -->
+ <div popupID="Reply" class="fixed inset-[0] z-[90] bg-black/25 backdrop-blur-sm hidden flex-col justify-start items-center py-[25px] overflow-auto">
+ <div class="max-w-[1400px] w-full flex flex-col justify-start items-center px-[10px] relative">
+ <div class="w-full flex flex-col justify-start items-center">
+ <div class="w-full max-w-[1000px] justify-start items-center">
+ <div class="w-full bg-bgMain p-[15px] shadow-lg gap-[5px]">
+ <div class="flex flex-row justify-between items-center gap-[10px] pb-[5px] border-b-[1px] border-b-bgMain2/25">
+ <p class="font-bold text-lg">Comment & Replies</p>
+ <button popupAction="closeReply" class="transition-all ease duration-[0.3s] py-[3px] px-[8px] hover:bg-bgMain2 hover:text-bgMain">
+ <i class="bx bx-x text-xl"></i>
+ </button>
+ </div>
+ <div class="w-full flex flex-col pt-[10px]">
+ <!-- popup x start -->
+ <div class="w-full flex flex-col gap-[25px]">
+ <div class="w-full flex flex-col gap-[15px] pb-[25px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
+ <div class="w-full grid grid-cols-8 gap-[25px]">
+ <a href="profile.html" class="w-full col-span-1 relative">
+ <img class="object-cover aspect-square" src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg">
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </a>
+ <div class="w-full flex flex-col gap-[15px] col-span-7">
+ <div class="w-full flex flex-row gap-[25px] justify-between">
+ <div class="flex flex-col gap-[5px] flex-wrap font-bold text-base">
+ <a href="profile.html" class="overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[0.4s] hover:text-linkMain">User's Name</a>
+ <p class="bg-bgMain2/75 text-bgMain text-sm px-[10px] py-[5px] font-normal">npub1xsdg...xp4os02</p>
+ </div>
+ <div class="flex flex-col gap-[5px] items-end">
+ <div class="flex flex-row gap-[10px]">
+ <div class="flex flex row">
+ <button class="flex flex-row items-center cursor-pointer py-[5px] px-[10px] bg-bgMain2 transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain relative group">
+ <i class="bx bxs-chevron-left text-bgMain"></i>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <p class="h-full w-full border-[2px] border-bgMain2 text-sm py-[2px] px-[10px]">Reply depth: 0</p>
+ </div>
+ <button class="bg-bgMain2 text-bgMain text-sm py-[2px] px-[15px] relative">
+ Main post
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain relative group">
+ <i class="bx bx-dots-vertical"></i>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Report</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Block</p>
+ </div>
+ </div>
+ </div>
+ <div class="flex flex-row gap-[15px] flex-wrap text-base">
+ <p class="">4/07/2025</p>
+ <p class="">4:20 PM</p>
+ </div>
+ </div>
+ </div>
+ <p class="text-base line-clamp-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ <button class="text-sm bg-bgMain2/25 text-bgMain2/75 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-bgMain2/20 hover:text-bgMain2">Expand</button>
+ </div>
+ </div>
+ <div class="w-full flex flex-row gap-[10px] justify-end flex-wrap">
+ <div class="flex flex-row gap-[10px] justify-end flex-wrap grow-[1]">
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-bolt"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">500,000</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-upvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">25</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-downvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">5</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-message"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">32</p>
+ </button>
+ </div>
+ <button popupaction="openReply" class="bg-bgMain2 text-textMain2 px-[25px] py-[5px] text-sm justify-center items-center flex flex-row gap-[5px] relative text-center max-lg:grow-[1]">Reply<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-[15px]">
+ <div class="w-full grid grid-cols-8 gap-[25px]">
+ <div href="profile.html" class="w-full col-span-1 relative">
+ <img class="object-cover aspect-square" src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg">
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </div>
+ <textarea type="text" placeholder="What's your review of this drink?" class="col-span-7 w-full min-h-[125px] px-[15px] py-[10px] bg-black/10 placeholder:text-black/50 transition-colors ease duration-[0.4s] focus:outline-[0] focus:bg-black/15"></textarea>
+ </div>
+ <div class="w-full flex flex-row gap-[25px] justify-end">
+ <div class="flex flex-row justify-center items-center">
+ <a href="profile.html" class="bg-bgMain2 text-textMain2 px-[15px] py-[10px] text-base text-center flex flex-row gap-[5px] relative">Publish Reply</a>
+ </div>
+ </div>
+ </div>
+
+ <div class="w-full flex flex-row gap-[10px] bg-bgMain2/25 p-[10px]">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-bgMain2 text-bgMain relative group">
+ <p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Moderation Level: Site & User</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Site & User</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Site</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">None</p>
+ </div>
+ </div>
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-bgMain2 text-bgMain relative group">
+ <p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Show: Latest</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Latest</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Oldest</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="w-full flex flex-col gap-[15px] py-[25px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
+ <div class="w-full flex flex-col gap-[15px] pb-[25px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
+ <div class="w-full grid grid-cols-8 gap-[25px]">
+ <a href="profile.html" class="w-full col-span-1 relative">
+ <img class="object-cover aspect-square" src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg">
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </a>
+ <div class="w-full flex flex-col gap-[15px] col-span-7">
+ <div class="w-full flex flex-row gap-[25px] justify-between">
+ <div class="flex flex-col gap-[5px] flex-wrap font-bold text-base">
+ <a href="profile.html" class="overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[0.4s] hover:text-linkMain">User's Name</a>
+ <p class="bg-bgMain2/75 text-bgMain text-sm px-[10px] py-[5px] font-normal">npub1xsdg...xp4os02</p>
+ </div>
+ <div class="flex flex-col gap-[5px] items-end">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain relative group">
+ <i class="bx bx-dots-vertical"></i>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Report</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Block</p>
+ </div>
+ </div>
+ <div class="flex flex-row gap-[15px] flex-wrap text-base">
+ <p class="">4/07/2025</p>
+ <p class="">4:20 PM</p>
+ </div>
+ </div>
+ </div>
+ <p class="text-base line-clamp-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ <button class="text-sm bg-bgMain2/25 text-bgMain2/75 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-bgMain2/20 hover:text-bgMain2">Expand</button>
+ </div>
+ </div>
+ <div class="w-full flex flex-row gap-[10px] justify-end flex-wrap">
+ <div class="flex flex-row gap-[10px] justify-end flex-wrap grow-[1]">
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-bolt"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">500,000</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-upvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">25</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-downvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">5</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-message"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">32</p>
+ </button>
+ </div>
+ <button popupaction="openReply" class="bg-bgMain2 text-textMain2 px-[25px] py-[5px] text-sm justify-center items-center flex flex-row gap-[5px] relative text-center max-lg:grow-[1]">Reply<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-[15px] pb-[25px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
+ <div class="w-full grid grid-cols-8 gap-[25px]">
+ <a href="profile.html" class="w-full col-span-1 relative">
+ <img class="object-cover aspect-square" src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg">
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </a>
+ <div class="w-full flex flex-col gap-[15px] col-span-7">
+ <div class="w-full flex flex-row gap-[25px] justify-between">
+ <div class="flex flex-col gap-[5px] flex-wrap font-bold text-base">
+ <a href="profile.html" class="overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[0.4s] hover:text-linkMain">User's Name</a>
+ <p class="bg-bgMain2/75 text-bgMain text-sm px-[10px] py-[5px] font-normal">npub1xsdg...xp4os02</p>
+ </div>
+ <div class="flex flex-col gap-[5px] items-end">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain relative group">
+ <i class="bx bx-dots-vertical"></i>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg max-h-[200px] overflow-auto hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Report</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Block</p>
+ </div>
+ </div>
+ <div class="flex flex-row gap-[15px] flex-wrap text-base">
+ <p class="">4/07/2025</p>
+ <p class="">4:20 PM</p>
+ </div>
+ </div>
+ </div>
+ <p class="text-base line-clamp-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ <button class="text-sm bg-bgMain2/25 text-bgMain2/75 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-bgMain2/20 hover:text-bgMain2">Expand</button>
+ </div>
+ </div>
+ <div class="w-full flex flex-row gap-[10px] justify-end flex-wrap">
+ <div class="flex flex-row gap-[10px] justify-end flex-wrap grow-[1]">
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-bolt"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">500,000</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-upvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">25</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-downvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">5</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-message"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">32</p>
+ </button>
+ </div>
+ <button popupaction="openReply" class="bg-bgMain2 text-textMain2 px-[25px] py-[5px] text-sm justify-center items-center flex flex-row gap-[5px] relative text-center max-lg:grow-[1]">Reply<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span></button>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ <!-- popup x end -->
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div popupID="Review" class="fixed inset-[0] z-[90] bg-black/25 backdrop-blur-sm hidden flex-col justify-start items-center py-[25px] overflow-auto">
+ <div class="max-w-[1400px] w-full flex flex-col justify-start items-center px-[10px] relative">
+ <div class="w-full flex flex-col justify-start items-center">
+ <div class="w-full max-w-[1000px] justify-start items-center">
+ <div class="w-full bg-bgMain p-[15px] shadow-lg gap-[5px]">
+ <div class="flex flex-row justify-between items-center gap-[10px] pb-[5px] border-b-[1px] border-b-bgMain2/25">
+ <p class="font-bold text-lg">Username's Review</p>
+ <button popupAction="closeReview" class="transition-all ease duration-[0.3s] py-[3px] px-[8px] hover:bg-bgMain2 hover:text-bgMain">
+ <i class="bx bx-x text-xl"></i>
+ </button>
+ </div>
+ <div class="w-full flex flex-col pt-[10px]">
+ <!-- popup x start -->
+ <div class="w-full flex flex-col gap-[20px]">
+ <div class="w-full flex flex-col gap-[10px] pb-[20px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
+ <p class="font-bold text-lg">Visual Assessment</p>
+ <div class="w-full grid grid-cols-2 gap-[10px] border-bgMain2/15 max-lg:grid-cols-1">
+ <div class="w-full bg-bgMain2 flex flex-row justify-center items-center text-bgMain max-sm:flex-col">
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/25">Clarity</p>
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/15">Hazy</p>
+ </div>
+ <div class="w-full bg-bgMain2 flex flex-row justify-center items-center text-bgMain max-sm:flex-col">
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/25">Colour</p>
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/15">Red</p>
+ </div>
+ <div class="w-full bg-bgMain2 flex flex-row justify-center items-center text-bgMain max-sm:flex-col">
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/25">Bubbles</p>
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/15">Slight Fizz</p>
+ </div>
+ </div>
+ </div>
+ <div class="w-full flex flex-col gap-[10px] pb-[20px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
+ <p class="font-bold text-lg">Aromatic Assessment</p>
+ <div class="w-full grid grid-cols-2 gap-[10px] border-bgMain2/15 max-lg:grid-cols-1">
+ <div class="w-full bg-bgMain2 flex flex-row justify-center items-center text-bgMain max-sm:flex-col">
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/25">Intensity</p>
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/15">Weak</p>
+ </div>
+ </div>
+ </div>
+ <div class="w-full flex flex-col gap-[10px] pb-[20px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
+ <p class="font-bold text-lg">Primary Flavours and Aromas</p>
+ <div class="w-full grid grid-cols-2 gap-[10px] border-bgMain2/15 max-lg:grid-cols-1">
+ <div class="w-full bg-bgMain2 flex flex-row justify-center items-center text-bgMain max-sm:flex-col">
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/25">Fruit</p>
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/15">Red Fruit, Strawberry</p>
+ </div>
+ <div class="w-full bg-bgMain2 flex flex-row justify-center items-center text-bgMain max-sm:flex-col">
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/25">Vegetal</p>
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/15">Herbaceous, Basil</p>
+ </div>
+ </div>
+ </div>
+ <div class="w-full flex flex-col gap-[10px] pb-[20px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
+ <p class="font-bold text-lg">Flavor Assessment</p>
+ <div class="w-full grid grid-cols-2 gap-[10px] border-bgMain2/15 max-lg:grid-cols-1">
+ <div class="w-full bg-bgMain2 flex flex-row justify-center items-center text-bgMain max-sm:flex-col">
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/25">Sweetness</p>
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/15">Dry</p>
+ </div>
+ <div class="w-full bg-bgMain2 flex flex-row justify-center items-center text-bgMain max-sm:flex-col">
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/25">Acidity</p>
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/15">Medium</p>
+ </div>
+ <div class="w-full bg-bgMain2 flex flex-row justify-center items-center text-bgMain max-sm:flex-col">
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/25">Alcohol</p>
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/15">Integrated</p>
+ </div>
+ <div class="w-full bg-bgMain2 flex flex-row justify-center items-center text-bgMain max-sm:flex-col">
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/25">Body</p>
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/15">Light</p>
+ </div>
+ <div class="w-full bg-bgMain2 flex flex-row justify-center items-center text-bgMain max-sm:flex-col">
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/25">Finish</p>
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/15">Short</p>
+ </div>
+ </div>
+ </div>
+ <div class="w-full flex flex-col gap-[10px] pb-[20px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
+ <p class="font-bold text-lg">Balance and Complexity</p>
+ <div class="w-full grid grid-cols-2 gap-[10px] border-bgMain2/15 max-lg:grid-cols-1">
+ <div class="w-full bg-bgMain2 flex flex-row justify-center items-center text-bgMain max-sm:flex-col">
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/25">Harmony</p>
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/15">Harmonious</p>
+ </div>
+ <div class="w-full bg-bgMain2 flex flex-row justify-center items-center text-bgMain max-sm:flex-col">
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/25">Complexity</p>
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/15">Complex</p>
+ </div>
+ </div>
+ </div>
+ <div class="w-full flex flex-col gap-[10px] pb-[20px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
+ <p class="font-bold text-lg">Overall Quality</p>
+ <div class="w-full grid grid-cols-2 gap-[10px] border-bgMain2/15 max-lg:grid-cols-1">
+ <div class="w-full bg-bgMain2 flex flex-row justify-center items-center text-bgMain max-sm:flex-col">
+ <!-- <div class="h-full px-[10px] py-[5px] bg-bgMain/25 text-btnMain text-center max-sm:w-full max-sm:py-[10px]">
+ <i class="bx bx-wine"></i>
+ </div> -->
+ <!-- <div class="h-full px-[10px] py-[5px] bg-bgMain/25 text-btnMain text-center max-sm:w-full max-sm:py-[10px]">
+ <i class="bx bxs-wine"></i>
+ </div> -->
+ <div class="h-full px-[10px] py-[5px] bg-bgMain/25 text-btnMain2 text-center max-sm:w-full max-sm:py-[10px]">
+ <i class="bx bxs-wine"></i>
+ </div>
+ <p class="w-full h-full px-[10px] py-[5px] text-base bg-bgMain/15">Exceptional</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- popup x end -->
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div popupID="ReviewsSum" class="fixed inset-[0] z-[90] bg-black/25 backdrop-blur-sm hidden flex-col justify-start items-center py-[25px] overflow-auto">
+ <div class="max-w-[1400px] w-full flex flex-col justify-start items-center px-[10px] relative">
+ <div class="w-full flex flex-col justify-start items-center">
+ <div class="w-full max-w-[1000px] justify-start items-center">
+ <div class="w-full bg-bgMain p-[15px] shadow-lg gap-[5px]">
+ <div class="flex flex-row justify-between items-center gap-[10px] pb-[5px] border-b-[1px] border-b-bgMain2/25">
+ <p class="font-bold text-lg">Reviews Summary</p>
+ <button popupAction="closeReviewsSum" class="transition-all ease duration-[0.3s] py-[3px] px-[8px] hover:bg-bgMain2 hover:text-bgMain">
+ <i class="bx bx-x text-xl"></i>
+ </button>
+ </div>
+ <div class="w-full flex flex-col pt-[10px]">
+ <!-- popup x start -->
+ <div class="w-full flex flex-col gap-[20px]">
+ Here's where analytical data (package) will be added
+ </div>
+ <!-- popup x end -->
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
<!-- popups end -->
<!-- SCRIPTS START-->
@@ -1132,6 +1470,8 @@
<script src="./assets/js/dropdown.js"></script>
<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/sliderDataShowcase.js"></script>
<script>AOS.init();</script>
<!-- SCRIPTS END-->