cookie-dialog-monster/packages/web/src/index.html

510 lines
23 KiB
HTML

<!doctype html>
<html class="scroll-smooth" lang="en">
<head>
<title>Cookie Dialog Monster | Did someone say cookie consent dialogs?</title>
<meta charset="UTF-8" />
<meta
name="description"
content="A browser extension that helps you to remove those irritating cookie consent dialogs automatically"
/>
<meta property="og:url" content="https://www.cookie-dialog-monster.com/" />
<meta property="og:type" content="website" />
<meta
property="og:title"
content="Cookie Dialog Monster | Did someone say cookie consent dialogs?"
/>
<meta
property="og:description"
content="A browser extension that helps you to remove those irritating cookie consent dialogs automatically"
/>
<meta property="og:image" content="https://www.cookie-dialog-monster.com/images/og-image.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="cookie-dialog-monster.com" />
<meta property="twitter:url" content="https://www.cookie-dialog-monster.com/" />
<meta
name="twitter:title"
content="Cookie Dialog Monster | Did someone say cookie consent dialogs?"
/>
<meta
name="twitter:description"
content="A browser extension that helps you to remove those irritating cookie consent dialogs automatically"
/>
<meta
name="twitter:image"
content="https://www.cookie-dialog-monster.com/images/og-image.png"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter" />
<link rel="stylesheet" href="/index.css" />
</head>
<body>
<header>
<nav class="bg-secondary text-white">
<div class="flex items-center max-w-5xl mx-auto p-4">
<svg
aria-hidden="true"
class="h-8 mr-4 shrink-0 w-8"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 48 48"
>
<path
class="fill-primary"
d="M45,22.5C45,32,36,41,24,41S3,33,3,22.5C3,14.492,14.059,12,24,12S45,14.492,45,22.5z"
/>
<circle cx="17.5" cy="13.5" r="9.5" class="fill-primary" />
<circle cx="30.5" cy="13.5" r="9.5" class="fill-primary" />
<circle cx="17.5" cy="13.5" r="6.5" class="fill-white" />
<circle cx="30.5" cy="13.5" r="6.5" class="fill-white" />
<circle cx="18" cy="15" r="2" class="fill-secondary" />
<circle cx="29" cy="13" r="2" class="fill-secondary" />
<path
class="fill-primary"
d="M8.118,15.007c0,0-1.91-1.046-4.118-0.007l1.5,1.817c0,0-3.994,1.404-5.486,4.525l3.16-0.632 c0,0-2.149,1.315-2.174,5.284l2.098-1.466c0,0-2.402,3.514-0.126,7.483l1.138-3.362c0,0-0.126,4.475,1.871,7.306l0.657-2.831 c0,0,0.413,3.84,3.413,5.84l-0.303-2.629c0,0,1.702,2.25,4.197,4.542l0.034-1.989L17.011,40L19,33.09L8.118,15.007z"
/>
<path
class="fill-primary"
d="M39.906,15.007c0,0,1.91-1.046,4.118-0.007l-1.5,1.817c0,0,3.994,1.404,5.486,4.525l-3.16-0.632 c0,0,2.149,1.315,2.174,5.284l-2.098-1.466c0,0,2.402,3.514,0.126,7.483l-1.138-3.362c0,0,0.126,4.475-1.871,7.306l-0.657-2.831 c0,0-0.413,3.84-3.413,5.84l0.303-2.629c0,0-1.702,2.25-4.197,4.542l-0.034-1.989L31.013,40l-1.989-6.91L39.906,15.007z"
/>
<path
class="fill-secondary"
d="M24,28.5c-5.661,0-12.909-1.736-15.24-4.643l2.34-1.877c1.478,1.842,7.626,3.52,12.9,3.52 c5.231,0,11.363-1.657,12.865-3.477l2.313,1.909C36.819,26.792,29.608,28.5,24,28.5z"
/>
<path
class="fill-secondary"
d="M36,25.5C36,31.851,30.075,36,24,36s-12-4.149-12-10.5c0-0.25,6.5,1.5,12,1.5S36,25.25,36,25.5z"
/>
<path
class="fill-primary"
d="M13.978,38.888C13.978,38.888,18,42,20,42l-2-3L13.978,38.888z"
/>
<path class="fill-primary" d="M34,38.888c0,0-4.022,3.112-6.022,3.112l2-3L34,38.888z" />
<polygon class="fill-primary" points="19.034,40.472 24,43 29.011,40.404" />
</svg>
<p class="font-medium">Cookie Dialog Monster</p>
<div class="ml-auto">
<div class="flex gap-4 text-white">
<a class="contents" href="mailto:hello@wanhose.dev" title="Email">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M14.243 5.757a6 6 0 10-.986 9.284 1 1 0 111.087 1.678A8 8 0 1118 10a3 3 0 01-4.8 2.401A4 4 0 1114 10a1 1 0 102 0c0-1.537-.586-3.07-1.757-4.243zM12 10a2 2 0 10-4 0 2 2 0 004 0z"
clip-rule="evenodd"
/>
</svg>
</a>
<a
class="contents"
href="https://github.com/wanhose/cookie-dialog-monster"
target="_blank"
title="GitHub"
>
<svg
class="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"
/>
</svg>
</a>
</div>
</div>
</div>
</nav>
</header>
<main class="max-w-5xl mx-auto px-4">
<div class="md:py-28 md:text-center py-14 text-left">
<h1 class="font-semibold !leading-tight text-4xl md:text-5xl">
<span class="inline md:block text-secondary">Did someone say</span>
<span
class="bg-clip-text bg-gradient-to-r from-primary inline md:block text-transparent to-blue-500"
>
cookie consent dialogs?
</span>
</h1>
<p class="max-w-3xl mt-8 mx-auto text-2xl text-gray-500">
A browser extension that helps you to remove those irritating cookie consent dialogs
automatically
</p>
<div class="flex flex-col gap-4 justify-center md:flex-row md:gap-8 mt-16">
<a
class="bg-gradient-to-r button from-primary md:hover:animate-gradient to-blue-500"
href="#downloads"
>
Download now
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="icon md:hidden"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</a>
<a
href="https://www.producthunt.com/posts/cookie-dialog-monster?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-cookie&#0045;dialog&#0045;monster"
target="_blank"
>
<img
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=360739&theme=light"
alt="Cookie&#0032;Dialog&#0032;Monster - Did&#0032;someone&#0032;say&#0032;cookies&#0063;&#0032;😋 | Product Hunt"
style="width: 259.25px; height: 56px"
width="259.25"
height="56"
/>
</a>
</div>
</div>
<div class="flex flex-col gap-8 md:flex-row md:gap-20 md:py-20 py-10">
<div class="md:mt-14">
<h2>A powerful popup to manage all from a single place</h2>
<p class="mt-8 text-gray-500 text-xl">
Disable the extension if you would like to accept cookies in a specific page, contribute
to the project, open settings to manage the exclusion list, help us rating the extension
or start a conversation because you need help.
</p>
</div>
<img alt="Extension Popup" class="image" src="/images/popup.png" />
</div>
<div class="flex flex-col-reverse gap-8 md:flex-row md:gap-20 md:py-20 py-10">
<img alt="Extension Report Button" class="image" src="/images/report.png" />
<div class="md:mt-14">
<h2>We are not perfect but we try</h2>
<p class="mt-8 text-gray-500 text-xl">
Report any page that works bad with our extension, just right-click anywhere on the page
and press the report button. This will send us an email with all the information we need
to fix the problem as soon as possible.
</p>
<p class="mt-4 text-gray-500 text-xl">
In the meanwhile, we highly recommend to temporarily disable the extension in those
problematic sites.
</p>
</div>
</div>
<div class="flex flex-col gap-8 md:flex-row md:gap-20 md:py-20 py-10">
<div class="md:mt-14">
<h2>Manage your exclusions</h2>
<p class="mt-8 text-gray-500 text-xl">
Clear, import and export your preferences with one click. Users have full control over
which websites should be exempt from the cookie consent dialog removal functionality.
</p>
<p class="mt-4 text-gray-500 text-xl">
This feature is especially useful for websites that have unique cookie consent dialog
implementations or where the extension may cause unintended side effects.
</p>
</div>
<img alt="Extension Options" class="image" src="/images/options.png" />
</div>
<div class="md:py-20 py-10">
<div class="md:text-center">
<h2>A better way to surf the Internet</h2>
<p class="max-w-3xl mt-8 mx-auto text-gray-500 text-xl">
Improve your experience as user surfing the Internet avoiding to click on those
irritating cookie consent dialogs
</p>
</div>
<div class="grid gap-12 md:grid-cols-3 mt-16">
<div aria-hidden="true">
<div class="icon-box">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon-box-icon"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z"
clip-rule="evenodd"
/>
</svg>
</div>
<h3 class="font-medium mt-4 text-lg text-secondary">Blazing fast</h3>
<p class="mt-2 text-gray-500">
Using the most performant and newest APIs in the market
</p>
</div>
<div aria-hidden="true">
<div class="icon-box">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon-box-icon"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"
/>
</svg>
</div>
<h3 class="font-medium mt-4 text-lg text-secondary">Cross-browser</h3>
<p class="mt-2 text-gray-500">Available on Chromium-based browsers and Firefox</p>
</div>
<div aria-hidden="true">
<div class="icon-box">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon-box-icon"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z"
/>
</svg>
</div>
<h3 class="font-medium mt-4 text-lg text-secondary">Extremely light</h3>
<p class="mt-2 text-gray-500">Less than 200KiB</p>
</div>
<div aria-hidden="true">
<div class="icon-box">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon-box-icon"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z"
clip-rule="evenodd"
/>
</svg>
</div>
<h3 class="font-medium mt-4 text-lg text-secondary">Internationalization</h3>
<p class="mt-2 text-gray-500">Available in 10 different languages</p>
</div>
<div aria-hidden="true">
<div class="icon-box">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon-box-icon"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M3 12v3c0 1.657 3.134 3 7 3s7-1.343 7-3v-3c0 1.657-3.134 3-7 3s-7-1.343-7-3z"
/>
<path
d="M3 7v3c0 1.657 3.134 3 7 3s7-1.343 7-3V7c0 1.657-3.134 3-7 3S3 8.657 3 7z"
/>
<path d="M17 5c0 1.657-3.134 3-7 3S3 6.657 3 5s3.134-3 7-3 7 1.343 7 3z" />
</svg>
</div>
<h3 class="font-medium mt-4 text-lg text-secondary">Large database</h3>
<p class="mt-2 text-gray-500">
High cross-site support thanks to our almost 13000 database entries
</p>
</div>
<div aria-hidden="true">
<div class="icon-box">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon-box-icon"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</div>
<h3 class="font-medium mt-4 text-lg text-secondary">Open source</h3>
<p class="mt-2 text-gray-500">
Feel free to contribute to our
<a href="https://github.com/wanhose/cookie-dialog-monster/pulls" target="_blank">
GitHub repository
</a>
</p>
</div>
</div>
</div>
<div class="md:py-20 py-10">
<div class="md:text-center">
<h2>Need reviews?</h2>
<p class="max-w-3xl mt-8 mx-auto text-gray-500 text-xl">
See what people think about this extension before install it
</p>
</div>
<div class="grid gap-12 md:grid-cols-3 md:justify-items-center mt-16">
<a
class="md:mx-auto"
href="https://chrome.google.com/webstore/detail/djcbfpkdhdkaflcigibkbpboflaplabg"
target="_blank"
>
<img
aria-label="Chrome Web Store"
height="62"
src="/images/chrome-web-store.png"
title="Chrome Web Store"
width="324"
/>
</a>
<a
class="md:mx-auto"
href="https://mygpstools.com/best-chrome-extensions#cookie-dialog-monster"
target="_blank"
>
<img
aria-label="MyGPSTools"
height="62"
src="/images/mygpstools.png"
title="MyGPSTools"
width="187"
/>
</a>
<a
class="md:mx-auto"
href="https://www.producthunt.com/products/cookie-dialog-monster/reviews"
target="_blank"
>
<img
aria-label="Product Hunt"
height="62"
src="/images/product-hunt.png"
title="Product Hunt"
width="263"
/>
</a>
</div>
</div>
<div class="md:text-center md:pb-20 pb-10 pt-10" id="downloads">
<h2>Available now on</h2>
<div class="grid gap-4 grid-cols-1 justify-center md:gap-8 md:grid-cols-4 mt-16">
<a
class="bg-gradient-to-r button from-chrome-1 md:hover:animate-gradient to-chrome-3 via-chrome-2"
href="https://chrome.google.com/webstore/detail/djcbfpkdhdkaflcigibkbpboflaplabg"
target="_blank"
>
<img aria-hidden="true" class="icon" src="/images/chrome.svg" />
Chrome Web Store
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="icon md:hidden"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</a>
<a
class="bg-gradient-to-r button from-edge-1 md:hover:animate-gradient to-edge-3 via-edge-2"
href="https://microsoftedge.microsoft.com/addons/detail/hbogodfciblakeneadpcolhmfckmjcii"
target="_blank"
>
<img aria-hidden="true" class="icon" src="/images/edge.svg" />
Edge Add-ons
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="icon md:hidden"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</a>
<a
class="bg-gradient-to-r button from-firefox-1 md:hover:animate-gradient to-firefox-3 via-firefox-2"
href="/releases/latest.xpi"
target="_blank"
>
<img aria-hidden="true" class="icon" src="/images/firefox.svg" />
Firefox XPI <sup>1</sup>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="icon md:hidden"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</a>
<a
class="bg-gradient-to-r button from-yellow-400 via-brown-500 to-yellow-600 md:hover:animate-gradient"
href="/releases/latest.zip"
target="_blank"
>
<span aria-hidden="true" class="icon" role="img">📦</span>
Packed version <sup>2</sup>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="icon md:hidden"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</a>
</div>
<p class="mt-16 text-gray-500 text-left">
Due to technical issues with the Firefox Team, our extension's support on Mozilla Add-ons
has ended with version 5.5.5. However, you can still run the latest version following
<a
class="underline"
href="https://github.com/wanhose/cookie-dialog-monster/tree/main/packages/browser-extension#installation-for-mozilla-firefox-users"
target="_blank"
>
this guide</a
>.
</p>
<p class="mt-8 text-gray-500 text-left">
<sup>2</sup> This version is not recommended for regular users. It is intended for
advanced users who want to test the latest features before they are released to the
public, or for Mozilla (or other non-listed browsers) users who want to run a copy of the
latest version of the extension. We recommend you to follow
<a
class="underline"
href="https://github.com/wanhose/cookie-dialog-monster/tree/main/packages/browser-extension#installation-for-advanced-and-non-listed-browser-users"
target="_blank"
>
this guide</a
>.
</p>
</div>
</main>
<footer class="bg-secondary md:py-5 p-4">
<div class="max-w-5xl mx-auto">
<p class="text-center text-white text-sm">
An open source project built by you and
<a class="underline" href="https://github.com/wanhose" target="_blank"> wanhose</a>
</p>
</div>
</footer>
</body>
</html>