1424 lines
137 KiB
HTML
1424 lines
137 KiB
HTML
<html class="bg-bgMain min-h-screen flex flex-col scroll-smooth font-merriweather">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
|
<title>Cellar Social</title>
|
|
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
|
|
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
|
|
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
|
|
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
|
|
<link rel="icon" sizes="52x52" href="./assets/images/icon.png">
|
|
<link rel="preconnect" href="https://fonts.bunny.net">
|
|
<link href="https://fonts.bunny.net/css?family=libre-baskerville:400,400i,700,700i|merriweather:300,300i,400,400i,700,700i,900,900i" rel="stylesheet" />
|
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
<script src="tailwind-config.js" defer></script>
|
|
<link rel="stylesheet" href="./assets/css/custom.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.1/aos.css" />
|
|
</head>
|
|
|
|
<body class="bg-transparent flex flex-col items-center flex-grow min-h-screen relative tracking-wide text-lg leading-[1.5] break-words text-textMain">
|
|
<!-- main navbar start -->
|
|
<div id="nav2-component"></div>
|
|
<!-- main navbar end -->
|
|
|
|
<!-- main middle start -->
|
|
<div class="w-full flex flex-col grow-[1] pt-[100px]">
|
|
|
|
<!-- product start -->
|
|
<div class="w-full flex flex-col justify-center items-center">
|
|
<div class="max-w-[1400px] w-full grow-[1] flex flex-col justify-center items-center px-[10px] relative">
|
|
<div class="w-full flex flex-col gap-[100px] py-[100px] items-center">
|
|
|
|
<!-- Page marked start -->
|
|
<div class="w-full bg-red-400 p-[15px] mb-[-75px] text-black/65 flex flex-col font-bold items-center shadow-lg text-center max-lg:text-base">
|
|
<p class="">This product post has been marked as: SPAM</p>
|
|
</div>
|
|
<!-- Page marked end -->
|
|
|
|
<div class="w-full grid grid-cols-5 gap-[50px] items-start max-lg:grid-cols-1">
|
|
<div class="col-span-2 w-full flex flex-col gap-[15px] items-center max-lg:col-span-1">
|
|
<div class="w-full flex flex-col items-center relative overflow-hidden cursor-pointer group">
|
|
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="object-cover w-full h-full aspect-square transition-all ease duration-[0.6s] group-hover:scale-[1.05]"></img>
|
|
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
|
|
</div>
|
|
<div class="w-full flex flex-row gap-[15px] items-center">
|
|
<div class="w-full flex flex-col items-center relative overflow-hidden cursor-pointer group">
|
|
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="object-cover w-full h-full aspect-square transition-all ease duration-[0.4s] group-hover:scale-[1.1]"></img>
|
|
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
|
|
</div>
|
|
<div class="w-full flex flex-col items-center relative overflow-hidden cursor-pointer group">
|
|
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="object-cover w-full h-full aspect-square transition-all ease duration-[0.4s] group-hover:scale-[1.1]"></img>
|
|
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
|
|
</div>
|
|
<div class="w-full flex flex-col items-center relative overflow-hidden cursor-pointer group">
|
|
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="object-cover w-full h-full aspect-square transition-all ease duration-[0.4s] group-hover:scale-[1.1]"></img>
|
|
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
|
|
</div>
|
|
<div class="w-full flex flex-col items-center relative overflow-hidden cursor-pointer group">
|
|
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="object-cover w-full h-full aspect-square transition-all ease duration-[0.4s] group-hover:scale-[1.1]"></img>
|
|
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-3 w-full flex flex-col gap-[25px] items-center max-lg:col-span-1">
|
|
<div class="w-full flex flex-col gap-[25px]">
|
|
<div class="w-full flex flex-row gap-[15px] justify-between">
|
|
<h2 class="text-3xl font-bold ">Product Title</h2>
|
|
<div class="relative inline-block">
|
|
<button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] text-textMain2 transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-textMain 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 border-[1px] border-white/10 p-[5px] text-textMain 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 popupAction="openReport" class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Hide</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Block</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex flex-col gap-[10px] items-end">
|
|
<p class="text-lg line-clamp-5 text-textMain2">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.</p>
|
|
<div class="flex flex-row justify-end">
|
|
<button class="bg-bgMain2 text-textMain2 px-[15px] py-[5px] text-base relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Read full</button>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex flex-col gap-[15px]">
|
|
<p class="flex flex-row gap-[10px] font-bold text-2xl items-center">
|
|
<img class="filter invert" src="./assets/images/satoshi-icon.svg"></img>4,000,000<span class="font-normal text-sm">$100.00</span>
|
|
</p>
|
|
<div class="w-full flex flex-row">
|
|
<button class="w-full bg-btnMain text-textMain px-[15px] py-[10px] relative">Visit Store Product Page<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] flex-wrap">
|
|
<button popupAction="openReviewsSum" class="flex flex-row bg-bgScore5 text-textMain text-sm items-center relative">
|
|
<p class="flex flex-row px-[10px] py-[5px] h-full items-center">cellar.social Rating</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] h-full items-center bg-black/15">Exceptional</p>
|
|
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
|
|
</button>
|
|
<div class="flex flex-row bg-bgMain2 text-textMain2 text-sm">
|
|
<p class="px-[10px] py-[5px] bg-white/10">Product</p>
|
|
<p class="px-[10px] py-[5px]">Wine</p>
|
|
</div>
|
|
<div class="flex flex-row bg-bgMain2/75 text-textMain2 text-sm">
|
|
<p class="px-[10px] py-[5px] bg-white/10">Type</p>
|
|
<p class="px-[10px] py-[5px]">White</p>
|
|
</div>
|
|
<div class="flex flex-row bg-bgMain2/75 text-textMain2 text-sm">
|
|
<p class="px-[10px] py-[5px] bg-white/10">Style</p>
|
|
<p class="px-[10px] py-[5px]">Table</p>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex flex-row gap-[25px] bg-bgMain2 p-[20px]">
|
|
<a href="profile2.html" class="w-[200px] relative">
|
|
<img src="https://images.scalebranding.com/simple-wine-logo-aee1e515-8eed-4af3-9930-4e0f94ef1209.jpg" class="object-cover aspect-square"></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]">
|
|
<a href="profile2.html" class="text-xl font-bold transition-all ease duration-[0.3s] hover:text-linkMain">nPub Holder Name</a>
|
|
<p class="text-base line-clamp-4 text-textMain2">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.</p>
|
|
<!-- <div class="flex flex-row">
|
|
<input class="overflow-hidden whitespace-nowrap text-ellipsis" value="npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv" disabled></input>
|
|
<button class="">
|
|
<i class='bx bxs-copy'></i>
|
|
</button>
|
|
</div> -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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 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-btnMain text-textMain transition-all ease duration-[0.4s]">Product Details</button>
|
|
<button class="w-full px-[15px] py-[5px] text-textMain2 transition-all ease duration-[0.4s] hover:bg-btnMain/75">Reviews</button>
|
|
<button class="w-full px-[15px] py-[5px] text-textMain2 transition-all ease duration-[0.4s] hover:bg-btnMain/75">Comments</button>
|
|
</div>
|
|
</div>
|
|
<!-- tabs selectors end-->
|
|
<!-- tabs content start-->
|
|
<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 grid grid-cols-2 text-base gap-[10px] max-lg:grid-cols-1">
|
|
<div class="w-full flex flex-row bg-bgMain2 text-textMain">
|
|
<p class="font-bold px-[15px] py-[5px] text-textMain2">Info</p>
|
|
<p class="w-full bg-black/10 px-[15px] py-[5px]">InfoContent</p>
|
|
</div>
|
|
<div class="w-full flex flex-row bg-bgMain2 text-textMain">
|
|
<p class="font-bold px-[15px] py-[5px] text-textMain2">Info</p>
|
|
<p class="w-full bg-black/10 px-[15px] py-[5px]">InfoContent</p>
|
|
</div>
|
|
<div class="w-full flex flex-row bg-bgMain2 text-textMain">
|
|
<p class="font-bold px-[15px] py-[5px] text-textMain2">Info</p>
|
|
<p class="w-full bg-black/10 px-[15px] py-[5px]">InfoContent</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full hidden flex-col gap-[10px]">
|
|
<div class="w-full flex flex-col gap-[25px]">
|
|
<div class="w-full flex flex-col gap-[15px]">
|
|
<div class="w-full grid grid-cols-8 gap-[25px]">
|
|
<div class="w-full col-span-1">
|
|
<a href="profile.html" class="w-full 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>
|
|
<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-white/25 border-[1px] border-white/10 transition-colors ease duration-[0.4s] focus:outline-[0] focus:bg-black/15 focus:border-btnMain"></textarea>
|
|
</div>
|
|
<div class="flex flex-col gap-[10px]">
|
|
<div pageSys class="p-[15px] w-full flex flex-col gap-[10px] bg-bgMain2">
|
|
<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 text-textMain2">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-white/15 text-textMain2 relative w-full transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Clarity: *</p>
|
|
</button>
|
|
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not sure</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Clear</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Hazy</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">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-white/15 text-textMain2 relative w-full transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Colour: Red</p>
|
|
</button>
|
|
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not sure</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Red</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Blue</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Green</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">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-white/15 text-textMain2 relative w-full transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Bubbles: Slight Fizz</p>
|
|
</button>
|
|
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not sure</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Still</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Slight Fizz</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">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 text-textMain2">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-white/15 text-textMain2 relative w-full transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Intensity: *</p>
|
|
</button>
|
|
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not sure</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Weak</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Moderate</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Pronounced</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">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 text-textMain2">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-[1px] border-white/15 placeholder:text-white/25 transition-all ease duration-[0.4s] focus:outline-[0] focus:bg-black/15 focus:border-btnMain">
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex flex-col gap-[15px] p-[10px] mt-[10px] border-[2px] border-white/10 items-start">
|
|
<div class="flex flex-row justify-center items-center mt-[-25px] bg-[#323232] px-[15px] py-[2px] text-textMain2 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="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><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="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><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="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><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="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><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="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><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="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><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="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><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="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><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="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><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="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><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="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><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="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><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-white/15 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="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/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-white/15 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="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/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="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/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="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/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 text-textMain2">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-white/15 text-textMain2 relative w-full transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Sweetness: *</p>
|
|
</button>
|
|
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not sure</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Dry</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Off-dry</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Medium</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">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-white/15 text-textMain2 relative w-full transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Acidity: Low</p>
|
|
</button>
|
|
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not sure</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Low</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Medium</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">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-white/15 text-textMain2 relative w-full transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Alcohol: Prominent</p>
|
|
</button>
|
|
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not sure</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Integrated</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Noticeable warmth</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">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-white/15 text-textMain2 relative w-full transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Body: *</p>
|
|
</button>
|
|
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not sure</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Light</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Medium</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">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-white/15 text-textMain2 relative w-full transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Finish: *</p>
|
|
</button>
|
|
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not sure</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Short</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Medium</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">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 text-textMain2">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-white/15 text-textMain2 relative w-full transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Harmony: *</p>
|
|
</button>
|
|
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not sure</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Harmonious</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">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-white/15 text-textMain2 relative w-full transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Complexity: Complex</p>
|
|
</button>
|
|
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not sure</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Complex</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Not Complex</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full grid grid-cols-2 col-span-3 gap-[15px] pt-[10px] border-t-[1px] border-bgMain2/25 max-lg:col-span-2 max-md:col-span-1 max-md:grid-cols-1">
|
|
<div class="w-full flex flex-col max-md:col-span-1">
|
|
<div sliderShowcase data-result-text="Exceptional, Outstanding, Excellent, Very Good, Good, Acceptable, Poor" class="flex flex-col gap-[15px]">
|
|
<div class="text-base flex flex-row bg-white/10 text-textMain items-center border-[1px] border-white/10">
|
|
<input sliderShowcaseValue type="number" class="h-full bg-bgMain/35 max-w-[75px] py-[5px] px-[10px]"></input>
|
|
<p class="h-full bg-bgMain/25 px-[10px] py-[5px] py-[5px] px-[10px]">Quality</p>
|
|
<p sliderShowcaseResult class="h-full bg-bgMain/15 px-[10px] py-[5px] py-[5px] px-[10px] grow-[1]">Exceptional</p>
|
|
</div>
|
|
<div class="w-full">
|
|
<input sliderShowcaseSlider type="range" value="0" min="84" max="100" step="1" class="w-full h-2 bg-black/25 rounded-xl appearance-none range-lg cursor-pointer accent-btnMain"></input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex flex-col max-md:col-span-1">
|
|
<div class="flex flex-row gap-[10px] justify-between">
|
|
<p class="text-base font-bold">Is the product faulty (NS)? No</p>
|
|
<label class="flex items-center cursor-pointer border-[1px] border-white/10">
|
|
<div class="relative">
|
|
<input type="checkbox" class="hidden" uiFunction="toggle"></input>
|
|
<div class="block bg-black/15 w-12 h-6"></div>
|
|
<div class="dot absolute left-1 top-1 bg-white/10 w-4 h-4 transition"></div>
|
|
</div>
|
|
</label>
|
|
</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-white/15">
|
|
<button pageSys-backward class="grow-[1] max-w-[200px] px-[15px] py-[3px] bg-btnMain/0 text-textMain2 relative transition-all ease duration-[0.3s]">
|
|
<p class="">Previous</p>
|
|
</button>
|
|
<button pageSys-forward class="grow-[1] max-w-[200px] px-[15px] py-[3px] bg-white/10 text-textMain relative transition-all ease duration-[0.3s] hover:bg-btnMain">
|
|
<p class="">Next</p>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex flex-row gap-[25px] justify-end">
|
|
<div class="flex flex-row justify-center items-center">
|
|
<button class="bg-btnMain text-textMain 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] pt-[25px] border-t-[2px] border-bgMain2">
|
|
<div class="w-full grid grid-cols-8 gap-[25px]">
|
|
<div class="w-full col-span-1">
|
|
<a href="profile.html" class="w-full 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>
|
|
<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-textMain2 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] text-textMain2 transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-textMain 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 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
|
|
<p popupAction="openReport" class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">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 text-textMain2 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-btnMain hover:text-textMain">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 popupAction="openReview" class="flex flex-row bg-bgScore5 text-textMain text-sm items-center relative">
|
|
<p class="flex flex-row px-[10px] py-[5px] h-full items-center">User Rating</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] h-full items-center bg-black/15">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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain 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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain 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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain 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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain 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] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Reply</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full flex flex-row gap-[10px] bg-bgMain2 p-[10px] flex-wrap border-[1px] border-white/10">
|
|
<div class="relative inline-block">
|
|
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-white/10 text-sm text-textMain2 pl-[10px] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap ">Moderation Level: <span class="bg-black/15 h-full w-full px-[8px] py-[5px] flex flex-row items-center">Site & User</span></p>
|
|
</button>
|
|
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain 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] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Site & User</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Site</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">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-white/10 text-sm text-textMain2 pl-[10px] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap ">Show: <span class="bg-black/15 h-full w-full px-[8px] py-[5px] flex flex-row items-center">Latest</span></p>
|
|
</button>
|
|
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain 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] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Latest</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Oldest</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-white/10 text-sm text-textMain2 pl-[10px] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap ">Score: <span class="bg-black/15 h-full w-full px-[8px] py-[5px] flex flex-row items-center">Highest</span></p>
|
|
</button>
|
|
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain 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] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Highest</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Lowest</p>
|
|
</div>
|
|
</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] 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]">
|
|
<div class="w-full col-span-1">
|
|
<a href="profile.html" class="w-full 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>
|
|
<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-textMain2 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] text-textMain2 transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-textMain 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 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
|
|
<p popupAction="openReport" class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">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 text-textMain2 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-btnMain hover:text-textMain">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 popupAction="openReviewsSum" class="flex flex-row bg-bgScore5 text-textMain text-sm items-center relative">
|
|
<p class="flex flex-row px-[10px] py-[5px] h-full items-center">User Rating</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] h-full items-center bg-black/15">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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain/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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain/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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain/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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain/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] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Reply</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- user comments end -->
|
|
<!-- Pagination start -->
|
|
<div class="w-full flex flex-col justify-center items-center">
|
|
<div class="max-w-[300px] flex flex-row gap-[15px] justify-center items-center">
|
|
<button class="h-full flex flex-col justify-center items-center px-[8px] text-textMain2 transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:bg-btnMain hover:text-textMain">
|
|
<i class="bx bxs-chevron-left text-3xl"></i>
|
|
</button>
|
|
<div class="grow-[1] flex flex-row gap-[10px] overflow-auto hide-scrollbar">
|
|
<button class="font-bold text-xl px-[15px] pt-[5px] pb-[8px] flex flex-row justify-center items-center bg-btnMain text-textMain relative">
|
|
<p class="text-base">1</p>
|
|
</button>
|
|
<button class="font-bold text-xl px-[15px] pt-[5px] pb-[8px] flex flex-row justify-center items-center relative text-textMain2 transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:bg-btnMain/75 hover:text-textMain">
|
|
<p class="text-base">2</p>
|
|
</button>
|
|
<button class="font-bold text-xl px-[15px] pt-[5px] pb-[8px] flex flex-row justify-center items-center relative text-textMain2 transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:bg-btnMain/75 hover:text-textMain">
|
|
<p class="text-base">3</p>
|
|
</button>
|
|
</div>
|
|
<button class="h-full flex flex-col justify-center items-center px-[8px] text-textMain2 transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:bg-btnMain hover:text-textMain">
|
|
<i class="bx bxs-chevron-right text-3xl"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Pagination end -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full hidden flex-col gap-[10px]">
|
|
<div class="w-full flex flex-col gap-[25px]">
|
|
<div class="w-full flex flex-col gap-[25px]">
|
|
<div class="w-full flex flex-col gap-[15px]">
|
|
<div class="w-full grid grid-cols-8 gap-[25px]">
|
|
<div class="w-full col-span-1">
|
|
<a href="profile.html" class="w-full 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>
|
|
<textarea type="text" placeholder="What's your thoughts?" class="col-span-7 w-full min-h-[125px] px-[15px] py-[10px] bg-black/10 placeholder:text-white/25 border-[1px] border-white/10 transition-colors ease duration-[0.4s] focus:outline-[0] focus:bg-black/15 focus:border-btnMain"></textarea>
|
|
</div>
|
|
<div class="w-full flex flex-row gap-[25px] justify-end">
|
|
<div class="flex flex-row justify-center items-center">
|
|
<button class="bg-btnMain text-textMain 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-row gap-[10px] bg-bgMain2 p-[10px] flex-wrap border-[1px] border-white/10">
|
|
<div class="relative inline-block">
|
|
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-white/10 text-sm text-textMain2 pl-[10px] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap ">Moderation Level: <span class="bg-black/15 h-full w-full px-[8px] py-[5px] flex flex-row items-center">Site & User</span></p>
|
|
</button>
|
|
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain 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] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Site & User</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Site</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">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-white/10 text-sm text-textMain2 pl-[10px] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap ">Show: <span class="bg-black/15 h-full w-full px-[8px] py-[5px] flex flex-row items-center">Latest</span></p>
|
|
</button>
|
|
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain 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] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Latest</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Oldest</p>
|
|
</div>
|
|
</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]">
|
|
<div class="w-full col-span-1">
|
|
<a href="profile.html" class="w-full 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>
|
|
<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-textMain2 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] text-textMain2 transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-textMain 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 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
|
|
<p popupAction="openReport" class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">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 text-textMain2 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-btnMain hover:text-textMain">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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain 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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain 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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain 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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain 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] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Reply</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]">
|
|
<div class="w-full col-span-1">
|
|
<a href="profile.html" class="w-full 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>
|
|
<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-textMain2 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] text-textMain2 transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-textMain 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 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
|
|
<p popupAction="openReport" class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">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 text-textMain2 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-btnMain hover:text-textMain">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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain 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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain 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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain 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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain 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] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Reply</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- user comments end -->
|
|
<!-- Pagination start -->
|
|
<div class="w-full flex flex-col justify-center items-center">
|
|
<div class="max-w-[300px] flex flex-row gap-[15px] justify-center items-center">
|
|
<button class="h-full flex flex-col justify-center items-center px-[8px] text-textMain2 transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:bg-btnMain hover:text-textMain">
|
|
<i class="bx bxs-chevron-left text-3xl"></i>
|
|
</button>
|
|
<div class="grow-[1] flex flex-row gap-[10px] overflow-auto hide-scrollbar">
|
|
<button class="font-bold text-xl px-[15px] pt-[5px] pb-[8px] flex flex-row justify-center items-center bg-btnMain text-textMain relative">
|
|
<p class="text-base">1</p>
|
|
</button>
|
|
<button class="font-bold text-xl px-[15px] pt-[5px] pb-[8px] flex flex-row justify-center items-center relative text-textMain2 transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:bg-btnMain/75 hover:text-textMain">
|
|
<p class="text-base">2</p>
|
|
</button>
|
|
<button class="font-bold text-xl px-[15px] pt-[5px] pb-[8px] flex flex-row justify-center items-center relative text-textMain2 transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:bg-btnMain/75 hover:text-textMain">
|
|
<p class="text-base">3</p>
|
|
</button>
|
|
</div>
|
|
<button class="h-full flex flex-col justify-center items-center px-[8px] text-textMain2 transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:bg-btnMain hover:text-textMain">
|
|
<i class="bx bxs-chevron-right text-3xl"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Pagination end -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- tabs content end-->
|
|
</div>
|
|
|
|
<!-- Page blocked start -->
|
|
<div class="w-full flex flex-col gap-[25px] p-[25px] justify-center items-center border-[1px] border-white/10 font-bold text-textMain2">
|
|
<p class="">This page has been blocked for the following reason: REASON</p>
|
|
<a href="index.html" class="bg-btnMain text-textMain text-base px-[25px] py-[10px] text-center relative">Go back<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span></a>
|
|
</div>
|
|
<!-- Page blocked end -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- product end -->
|
|
|
|
</div>
|
|
<!-- main middle end -->
|
|
|
|
<!-- main footer start -->
|
|
<div id="footer-component"></div>
|
|
<!-- 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] border-[1px] border-white/10">
|
|
<div class="flex flex-row justify-between items-center gap-[10px] pb-[5px] border-b-[1px] border-b-white/15">
|
|
<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-btnMain hover:text-textMain">
|
|
<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]">
|
|
<div class="w-full col-span-1">
|
|
<a href="profile.html" class="w-full 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>
|
|
<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-textMain2 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 justify-center items-center bg-white/10">
|
|
<button class="flex flex-row items-center cursor-pointer text-textMain2 py-[5px] px-[10px] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain relative group">
|
|
<i class="bx bxs-chevron-left"></i>
|
|
</button>
|
|
<p class="w-full text-sm py-[2px] px-[10px] border-l-[1px] border-white/10">Reply depth: 0</p>
|
|
</div>
|
|
<button class="text-textMain2 text-sm py-[2px] px-[15px] relative bg-white/10 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
Main post
|
|
</button>
|
|
<div class="relative inline-block">
|
|
<button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] text-textMain2 transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-textMain 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 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
|
|
<p popupAction="openReport" class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">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 text-textMain2 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-btnMain hover:text-textMain">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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain 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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain 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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain 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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain 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] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Reply</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full flex flex-col gap-[15px]">
|
|
<div class="w-full grid grid-cols-8 gap-[25px]">
|
|
<div class="w-full col-span-1">
|
|
<a href="profile.html" class="w-full 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>
|
|
<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-white/25 border-[1px] border-white/10 transition-colors ease duration-[0.4s] focus:outline-[0] focus:bg-black/15 focus:border-btnMain"></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 p-[10px] flex-wrap border-[1px] border-white/10">
|
|
<div class="relative inline-block">
|
|
<button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-white/10 text-sm text-textMain2 pl-[10px] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap ">Moderation Level: <span class="bg-black/15 h-full w-full px-[8px] py-[5px] flex flex-row items-center">Site & User</span></p>
|
|
</button>
|
|
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain 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] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Site & User</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Site</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">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-white/10 text-sm text-textMain2 pl-[10px] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap ">Show: <span class="bg-black/15 h-full w-full px-[8px] py-[5px] flex flex-row items-center">Latest</span></p>
|
|
</button>
|
|
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 border-[1px] border-white/10 p-[5px] text-textMain 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] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Latest</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">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]">
|
|
<div class="w-full col-span-1">
|
|
<a href="profile.html" class="w-full 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>
|
|
<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-textMain2 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] text-textMain2 transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-textMain 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 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
|
|
<p popupAction="openReport" class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">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 text-textMain2 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-btnMain hover:text-textMain">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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain 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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain 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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain 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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain 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] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Reply</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]">
|
|
<div class="w-full col-span-1">
|
|
<a href="profile.html" class="w-full 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>
|
|
<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-textMain2 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] text-textMain2 transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-textMain 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 border-[1px] border-white/10 p-[5px] text-textMain p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto hidden">
|
|
<p popupAction="openReport" class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Report</p>
|
|
<p class="flex flex-row px-[10px] py-[5px] text-textMain2 cursor-pointer transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">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 text-textMain2 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-btnMain hover:text-textMain">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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain 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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain 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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain 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 text-textMain2 transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<div class="h-full flex flex-row gap-[5px] items-center justify-center bg-white/10 px-[10px]">
|
|
<div class="p-[5px] text-textMain 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] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">Reply</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-bgMain2 p-[15px] shadow-lg gap-[5px]">
|
|
<div class="flex flex-row justify-between items-center gap-[10px] pb-[5px] border-b-[1px] border-b-white/15">
|
|
<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-btnMain hover:text-textMain">
|
|
<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-white/10 flex flex-row justify-center items-center text-textMain2 max-sm:flex-col">
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/15">Clarity</p>
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/5">Hazy</p>
|
|
</div>
|
|
<div class="w-full bg-white/10 flex flex-row justify-center items-center text-textMain2 max-sm:flex-col">
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/15">Colour</p>
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/5">Red</p>
|
|
</div>
|
|
<div class="w-full bg-white/10 flex flex-row justify-center items-center text-textMain2 max-sm:flex-col">
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/15">Bubbles</p>
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/5">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-white/10 flex flex-row justify-center items-center text-textMain2 max-sm:flex-col">
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/15">Intensity</p>
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/5">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-white/10 flex flex-row justify-center items-center text-textMain2 max-sm:flex-col">
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/15">Fruit</p>
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/5">Red Fruit, Strawberry</p>
|
|
</div>
|
|
<div class="w-full bg-white/10 flex flex-row justify-center items-center text-textMain2 max-sm:flex-col">
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/15">Vegetal</p>
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/5">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-white/10 flex flex-row justify-center items-center text-textMain2 max-sm:flex-col">
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/15">Sweetness</p>
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/5">Dry</p>
|
|
</div>
|
|
<div class="w-full bg-white/10 flex flex-row justify-center items-center text-textMain2 max-sm:flex-col">
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/15">Acidity</p>
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/5">Medium</p>
|
|
</div>
|
|
<div class="w-full bg-white/10 flex flex-row justify-center items-center text-textMain2 max-sm:flex-col">
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/15">Alcohol</p>
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/5">Integrated</p>
|
|
</div>
|
|
<div class="w-full bg-white/10 flex flex-row justify-center items-center text-textMain2 max-sm:flex-col">
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/15">Body</p>
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/5">Light</p>
|
|
</div>
|
|
<div class="w-full bg-white/10 flex flex-row justify-center items-center text-textMain2 max-sm:flex-col">
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/15">Finish</p>
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/5">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-white/10 flex flex-row justify-center items-center text-textMain2 max-sm:flex-col">
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/15">Harmony</p>
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/5">Harmonious</p>
|
|
</div>
|
|
<div class="w-full bg-white/10 flex flex-row justify-center items-center text-textMain2 max-sm:flex-col">
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/15">Complexity</p>
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/5">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-white/10 flex flex-row justify-center items-center text-textMain2 max-sm:flex-col">
|
|
<div class="w-full bg-bgScore5 text-bgMain flex flex-row justify-center items-center text-textMain max-sm:flex-col">
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-bgScore5">User Rating</p>
|
|
<p class="w-full h-full px-[10px] py-[5px] text-base bg-white/5">Exceptional</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- popup x end -->
|
|
</div>
|
|
</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-bgMain2 p-[15px] shadow-lg gap-[5px]">
|
|
<div class="flex flex-row justify-between items-center gap-[10px] pb-[5px] border-b-[1px] border-b-white/15">
|
|
<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-btnMain hover:text-textMain">
|
|
<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>
|
|
|
|
<div popupID="Report" 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-bgMain2 p-[15px] shadow-lg gap-[5px]">
|
|
<div class="flex flex-row justify-between items-center gap-[10px] pb-[5px] border-b-[1px] border-b-white/15">
|
|
<p class="font-bold text-lg">Report</p>
|
|
<button popupaction="closeReport" class="transition-all ease duration-[0.3s] py-[3px] px-[8px] hover:bg-btnMain hover:text-textMain">
|
|
<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]">
|
|
|
|
<p class="text-base">What's wrong with this product post?</p>
|
|
|
|
<div class="w-full flex flex-col gap-[10px] 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="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">It's spam</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="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">It's a scam</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="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">It's illegal</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="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">It's an unrelated Product</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="text-textMain2 transition-all ease duration-[0.4s] peer-checked:bg-btnMain peer-checked:text-textMain py-[5px] px-[10px] border-[1px] border-white/15 group-hover:bg-white/10 group-hover:text-textMain"><label class="">Other</label></div>
|
|
</div>
|
|
</div>
|
|
|
|
<textarea type="text" placeholder="Optional note/message..." class="col-span-7 w-full min-h-[125px] px-[15px] py-[10px] bg-black/10 placeholder:text-white/25 border-[1px] border-white/10 transition-colors ease duration-[0.4s] focus:outline-[0] focus:bg-black/15 focus:border-btnMain"></textarea>
|
|
|
|
<div class="w-full flex flex-row pt-[10px] border-t-[1px] border-white/10">
|
|
<buttons class="w-full flex flex-col justify-center items-center bg-btnMain text-textMain text-base font-bold whitespace-nowrap px-[10px] py-[10px] cursor-pointer relative group">
|
|
Send report
|
|
<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-->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.1/aos.js"></script>
|
|
<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/uiFunctions.js"></script>
|
|
<script src="./assets/js/sliderDataShowcase.js"></script>
|
|
<script src="./assets/js/componentLoader.js"></script>
|
|
<script>AOS.init();</script>
|
|
<!-- SCRIPTS END-->
|
|
|
|
<!--
|
|
reusables: sec and container
|
|
<div class="w-full flex flex-col gap-[25px] py-[50px] items-center">
|
|
<div class="max-w-[1400px] w-full flex flex-col justify-start items-end px-[10px] relative"></div>
|
|
</div>
|
|
-->
|
|
</body>
|
|
</html>
|