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

hero edit, product page edit with new reply, review, details

Browse Source
This commit is contained in:
free ko 2025-04-11 15:35:40 +03:00
parent 2aed8dafef
commit c6797cb04f
4 changed files with 1129 additions and 581 deletions

58
assets/js/pageSys.js Normal file

@ -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);
});
});

58
assets/js/sliderDataShowcase.js Normal file

@ -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
}
});
});
});

126
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-->

1468
product.html

File diff suppressed because it is too large Load Diff