367 lines
30 KiB
HTML
367 lines
30 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]">
|
|
|
|
<!-- profile 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-[50px] py-[50px]">
|
|
<div class="w-full flex flex-row gap-[35px] max-lg:flex-col">
|
|
<div class="w-full min-w-[350px] max-w-[350px] flex flex-col gap-[25px] max-lg:max-w-full max-lg:min-w-0">
|
|
<div class="w-full flex flex-col gap-[15px] p-[15px] bg-bgMain2 shadow-lg text-base">
|
|
<div class="w-full flex flex-col gap-[15px]">
|
|
<div class="w-full bg-black/10 flex flex-col justify-start items-end relative h-[90px]">
|
|
<img src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg" class="w-full h-full object-cover absolute inset"></img>
|
|
<div class="relative inline-block m-[5px]">
|
|
<button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] text-textMain2 bg-bgMain2/50 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 hidden flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[5] shadow-lg max-h-[200px] overflow-auto">
|
|
<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 justify-center items-start pl-[10px] z-[1] mt-[-50px]">
|
|
<img src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg" class="w-full object-cover aspect-square max-w-[75px] shadow-lg border-[4px] border-bgMain2"></img>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex flex-col gap-[5px] text-sm">
|
|
<p class="font-bold">User's Name</p>
|
|
<p class="">handle@domain.com</p>
|
|
</div>
|
|
<div class="w-full flex flex-row gap-[10px] max-sm:flex-col">
|
|
<div class="flex flex-row-reverse">
|
|
<button class="bg-white/10 px-[10px] text-textMain2 relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain peer">
|
|
<i class="bx bxs-copy"></i>
|
|
</button>
|
|
<input class="overflow-hidden whitespace-nowrap text-ellipsis text-sm text-textMain2 w-full px-[10px] py-[5px] bg-black/10 border-[2px] border-r-[0px] border-white/10 transition-all ease duration-[0.3s] peer-hover:border-btnMain peer-hover:text-textMain" disabled="" value="npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv">
|
|
</div>
|
|
<div class="flex flex-row-reverse">
|
|
<button class="bg-white/10 px-[10px] text-textMain2 relative transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain peer">
|
|
<i class="bx bxs-copy"></i>
|
|
</button>
|
|
<input class="overflow-hidden whitespace-nowrap text-ellipsis text-sm text-textMain2 w-full px-[10px] py-[5px] bg-black/10 border-[2px] border-r-[0px] border-white/10 transition-all ease duration-[0.3s] peer-hover:border-btnMain peer-hover:text-textMain" disabled="" value="npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv">
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex flex-col gap-[15px]">
|
|
<p class="w-full line-clamp-5 text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
<buttons popupAction="openBio" class="w-full flex flex-col justify-center items-center bg-white/10 text-textMain2 text-sm font-bold whitespace-nowrap px-[10px] py-[5px] cursor-pointer relative transition-all ease duration-[0.3s] hover:text-textMain hover:bg-white/15">
|
|
Read full
|
|
</buttons>
|
|
</div>
|
|
<div class="w-full flex flex-col gap-[15px]">
|
|
<div class="w-full flex flex-row border-[1px] border-white/10">
|
|
<a href="#" class="grow-[1] flex flex-row justify-center items-center text-textMain2 px-[15px] py-[5px] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<i class="bx bx-globe"></i>
|
|
</a>
|
|
<a href="#" class="grow-[1] flex flex-row justify-center items-center text-textMain2 px-[15px] py-[5px] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<i class="bx bxs-bolt"></i>
|
|
</a>
|
|
<a href="#" class="grow-[1] flex flex-row justify-center items-center text-textMain2 px-[15px] py-[5px] transition-all ease duration-[0.3s] hover:bg-btnMain hover:text-textMain">
|
|
<i class="bx bxs-tree-alt"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex flex-col gap-[15px]">
|
|
<buttons class="w-full flex flex-col justify-center items-center bg-btnMain text-textMain text-sm font-bold whitespace-nowrap px-[10px] py-[8px] cursor-pointer relative group">
|
|
Follow
|
|
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
|
|
</buttons>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex flex-col gap-[15px]">
|
|
<h2 class="text-2xl font-bold">User's Reviews</h2>
|
|
<div class="w-full flex flex-col gap-[10px]">
|
|
<div class="w-full flex flex-col gap-[25px]">
|
|
<div class="w-full flex flex-col gap-[25px]">
|
|
<!-- review item start -->
|
|
<div class="w-full flex flex-col gap-[15px] pb-[25px] border-b-[1px] border-white/10 last:border-b-[0px] last:pb-[0px]">
|
|
<div class="w-full p-[15px] bg-bgMain2 shadow-lg">
|
|
<div class="w-full flex flex-col gap-[15px] col-span-7">
|
|
<div class="w-full flex flex-row gap-[25px] justify-between border-b-[1px] border-white/10 pb-[10px] max-lg:flex-wrap max-lg:gap-[10px]">
|
|
<div class="flex flex-row gap-[5px] flex-wrap font-bold text-base">
|
|
<p class="bg-bgMain2/75 text-textMain2 font-bold">Product:</p>
|
|
<a href="product.html" class="text-textMain2 overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[0.4s] hover:text-linkMain">ProductName</a>
|
|
</div>
|
|
<div class="flex flex-col gap-[5px] items-end">
|
|
<div class="flex flex-row gap-[15px] flex-wrap text-sm">
|
|
<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-white/10 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>
|
|
<!-- review item end-->
|
|
<!-- review item start -->
|
|
<div class="w-full flex flex-col gap-[15px] pb-[25px] border-b-[1px] border-white/10 last:border-b-[0px] last:pb-[0px]">
|
|
<div class="w-full p-[15px] bg-bgMain2 shadow-lg">
|
|
<div class="w-full flex flex-col gap-[15px] col-span-7">
|
|
<div class="w-full flex flex-row gap-[25px] justify-between border-b-[1px] border-white/10 pb-[10px] max-lg:flex-wrap max-lg:gap-[10px]">
|
|
<div class="flex flex-row gap-[5px] flex-wrap font-bold text-base">
|
|
<p class="bg-bgMain2/75 text-textMain2 font-bold">Product:</p>
|
|
<a href="product.html" class="text-textMain2 overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[0.4s] hover:text-linkMain">ProductName</a>
|
|
</div>
|
|
<div class="flex flex-col gap-[5px] items-end">
|
|
<div class="flex flex-row gap-[15px] flex-wrap text-sm">
|
|
<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-white/10 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>
|
|
<!-- review item end-->
|
|
</div>
|
|
<!-- 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 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="">No reviews published yet</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- profile end -->
|
|
|
|
</div>
|
|
<!-- main middle end -->
|
|
|
|
<!-- main footer start -->
|
|
<div id="footer-component"></div>
|
|
<!-- main footer end -->
|
|
|
|
<!-- popups start -->
|
|
|
|
<div popupID="Bio" 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">User bio</p>
|
|
<button popupaction="closeBio" 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 line-clamp-3">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>
|
|
<!-- 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 profile?</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="">They're a spammer</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="">They're a scammer</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="">They're an illegal poster</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="">They're publishing unrelated Products</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/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>
|