wanhose/cookie-dialog-monster
wanhose/cookie-dialog-monster
2
5
Fork 0
Code Issues 304 Pull Requests Releases 18 Wiki Activity

feat(web): improve accessibility and styles

Browse Source
This commit is contained in:
wanhose 2022-05-23 20:08:43 +02:00
parent 8fa38fd0f4
commit 7f6b1d4a80
2 changed files with 67 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/web/src/index.css
View File

@ -1,3 +1,27 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@layer base {
h2 {
@apply font-bold text-secondary text-3xl;
}
}
@layer components {
.button {
@apply font-bold md:bg-2x md:hover:animate-gradient md:hover:shadow-md rounded-lg text-white px-8 py-4;
}
.icon-box {
@apply bg-secondary h-12 relative rounded-lg text-white w-12;
}
.icon-box-icon {
@apply absolute h-5 left-1/2 top-1/2 transform w-5 -translate-x-1/2 -translate-y-1/2;
}
.image {
@apply self-center max-w-sm md:self-start rounded-lg shadow-2xl shrink-0 w-full;
}
}

89
packages/web/src/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class="scroll-smooth"> <html class="scroll-smooth" lang="en">
<head> <head>
<title>Cookie Consent Dialog | Did someone say cookie consent dialogs?</title> <title>Cookie Consent Dialog | Did someone say cookie consent dialogs?</title>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -42,7 +42,12 @@
<header> <header>
<nav class="bg-secondary text-white"> <nav class="bg-secondary text-white">
<div class="flex items-center max-w-5xl mx-auto p-4"> <div class="flex items-center max-w-5xl mx-auto p-4">
<svg class="h-8 mr-4 shrink-0 w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"> <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 <path
class="fill-primary" 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" 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"
@ -79,7 +84,7 @@
<p class="font-medium">Cookie Dialog Monster</p> <p class="font-medium">Cookie Dialog Monster</p>
<div class="ml-auto"> <div class="ml-auto">
<div class="flex gap-4 text-white"> <div class="flex gap-4 text-white">
<a class="contents" href="mailto:wanhose.development@gmail.com"> <a class="contents" href="mailto:wanhose.development@gmail.com" title="Email">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6" class="h-6 w-6"
@ -97,6 +102,7 @@
class="contents" class="contents"
href="https://www.github.com/wanhose/cookie-dialog-monster" href="https://www.github.com/wanhose/cookie-dialog-monster"
target="_blank" target="_blank"
title="GitHub"
> >
<svg <svg
class="h-6 w-6" class="h-6 w-6"
@ -128,13 +134,11 @@
A browser extension that helps you to remove those irritating cookie consent dialogs A browser extension that helps you to remove those irritating cookie consent dialogs
automatically automatically
</p> </p>
<div class="flex flex-col gap-4 justify-center md:flex-row md:gap-8 mt-8"> <div class="flex flex-col gap-4 justify-center md:flex-row md:gap-8 mt-16">
<a <a class="bg-gradient-to-r button from-primary to-blue-500 px-8 py-4" href="#downloads">
class="bg-gradient-to-r from-primary font-bold md:bg-2x md:hover:animate-gradient rounded-lg text-white to-blue-500 px-8 py-4"
href="#downloads"
>
Download now Download now
<svg <svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-5 inline md:hidden w-5" class="h-5 inline md:hidden w-5"
viewBox="0 0 20 20" viewBox="0 0 20 20"
@ -151,29 +155,19 @@
</div> </div>
<div class="flex flex-col gap-8 md:flex-row md:gap-20 md:py-20 py-10"> <div class="flex flex-col gap-8 md:flex-row md:gap-20 md:py-20 py-10">
<div class="md:mt-14"> <div class="md:mt-14">
<h2 class="font-bold text-secondary text-3xl"> <h2>A powerful popup to manage all from a single place</h2>
A powerful popup to manage all from a single place
</h2>
<p class="mt-8 text-gray-500 text-xl"> <p class="mt-8 text-gray-500 text-xl">
Disable our extension if you would like to accept cookies in a specific page, rate us, Disable our extension if you would like to accept cookies in a specific page, rate us,
refresh the current page cleaning the cache or start a conversation because you need refresh the current page cleaning the cache or start a conversation because you need
help. help.
</p> </p>
</div> </div>
<img <img alt="Extension Popup" class="image" src="/images/popup.png" />
alt="Extension Popup"
class="self-center max-w-sm md:self-start rounded-lg shadow-2xl shrink-0 w-full"
src="/images/popup.png"
/>
</div> </div>
<div class="flex flex-col-reverse gap-8 md:flex-row md:gap-20 md:py-20 py-10"> <div class="flex flex-col-reverse gap-8 md:flex-row md:gap-20 md:py-20 py-10">
<img <img alt="Extension Report Button" class="image" src="/images/report.png" />
alt="Extension Report Button"
class="self-center max-w-sm md:self-start rounded-lg shadow-2xl shrink-0 w-full"
src="/images/report.png"
/>
<div class="md:mt-14"> <div class="md:mt-14">
<h2 class="font-bold text-secondary text-3xl">We are not perfect but we try</h2> <h2>We are not perfect but we try</h2>
<p class="mt-8 text-gray-500 text-xl"> <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 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 and press the report button. This will send us an email with all the information we need
@ -187,18 +181,18 @@
</div> </div>
<div class="md:py-20 py-10"> <div class="md:py-20 py-10">
<div class="md:text-center"> <div class="md:text-center">
<h2 class="font-bold text-secondary text-3xl">A better way to surf the Internet</h2> <h2>A better way to surf the Internet</h2>
<p class="max-w-3xl mt-8 mx-auto text-gray-500 text-xl"> <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 Improve your experience as user surfing the Internet avoiding to click on those
irritating cookie consent dialogs irritating cookie consent dialogs
</p> </p>
</div> </div>
<div class="grid gap-12 md:grid-cols-3 mt-16"> <div class="grid gap-12 md:grid-cols-3 mt-16">
<div> <div aria-hidden="true">
<div class="bg-secondary h-12 relative rounded-lg text-white w-12"> <div class="icon-box">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="absolute h-5 left-1/2 top-1/2 transform w-5 -translate-x-1/2 -translate-y-1/2" class="icon-box-icon"
viewBox="0 0 20 20" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
> >
@ -214,11 +208,11 @@
Using the most performant and newest APIs in the market Using the most performant and newest APIs in the market
</p> </p>
</div> </div>
<div> <div aria-hidden="true">
<div class="bg-secondary h-12 relative rounded-lg text-white w-12"> <div class="icon-box">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="absolute h-5 left-1/2 top-1/2 transform w-5 -translate-x-1/2 -translate-y-1/2" class="icon-box-icon"
viewBox="0 0 20 20" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
> >
@ -230,11 +224,11 @@
<h3 class="font-medium mt-4 text-lg text-secondary">Cross-browser</h3> <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> <p class="mt-2 text-gray-500">Available on Chromium-based browsers and Firefox</p>
</div> </div>
<div> <div aria-hidden="true">
<div class="bg-secondary h-12 relative rounded-lg text-white w-12"> <div class="icon-box">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="absolute h-5 left-1/2 top-1/2 transform w-5 -translate-x-1/2 -translate-y-1/2" class="icon-box-icon"
viewBox="0 0 20 20" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
> >
@ -246,11 +240,11 @@
<h3 class="font-medium mt-4 text-lg text-secondary">Extremely light</h3> <h3 class="font-medium mt-4 text-lg text-secondary">Extremely light</h3>
<p class="mt-2 text-gray-500">Less than 200KiB</p> <p class="mt-2 text-gray-500">Less than 200KiB</p>
</div> </div>
<div> <div aria-hidden="true">
<div class="bg-secondary h-12 relative rounded-lg text-white w-12"> <div class="icon-box">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="absolute h-5 left-1/2 top-1/2 transform w-5 -translate-x-1/2 -translate-y-1/2" class="icon-box-icon"
viewBox="0 0 20 20" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
> >
@ -264,11 +258,11 @@
<h3 class="font-medium mt-4 text-lg text-secondary">Internationalization</h3> <h3 class="font-medium mt-4 text-lg text-secondary">Internationalization</h3>
<p class="mt-2 text-gray-500">Available in 9 different languages</p> <p class="mt-2 text-gray-500">Available in 9 different languages</p>
</div> </div>
<div> <div aria-hidden="true">
<div class="bg-secondary h-12 relative rounded-lg text-white w-12"> <div class="icon-box">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="absolute h-5 left-1/2 top-1/2 transform w-5 -translate-x-1/2 -translate-y-1/2" class="icon-box-icon"
viewBox="0 0 20 20" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
> >
@ -286,11 +280,11 @@
High cross-site support thanks to our almost 13000 database entries High cross-site support thanks to our almost 13000 database entries
</p> </p>
</div> </div>
<div> <div aria-hidden="true">
<div class="bg-secondary h-12 relative rounded-lg text-white w-12"> <div class="icon-box">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="absolute h-5 left-1/2 top-1/2 transform w-5 -translate-x-1/2 -translate-y-1/2" class="icon-box-icon"
viewBox="0 0 20 20" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
> >
@ -312,15 +306,16 @@
</div> </div>
</div> </div>
<div class="md:pb-20 pb-10 pt-10 md:text-center" id="downloads"> <div class="md:pb-20 pb-10 pt-10 md:text-center" id="downloads">
<h2 class="font-semibold text-4xl text-secondary">Available now on</h2> <h2>Available now on</h2>
<div class="flex flex-col gap-4 justify-center md:flex-row md:gap-8 mt-8"> <div class="flex flex-col gap-4 justify-center md:flex-row md:gap-8 mt-16">
<a <a
class="bg-gradient-to-r from-chrome-1 via-chrome-2 to-chrome-3 font-bold md:bg-2x md:hover:animate-gradient rounded-lg text-white px-8 py-4" class="bg-gradient-to-r button from-chrome-1 to-chrome-3 via-chrome-2"
href="https://chrome.google.com/webstore/detail/djcbfpkdhdkaflcigibkbpboflaplabg" href="https://chrome.google.com/webstore/detail/djcbfpkdhdkaflcigibkbpboflaplabg"
target="_blank" target="_blank"
> >
Chrome Web Store Chrome Web Store
<svg <svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-5 inline md:hidden w-5" class="h-5 inline md:hidden w-5"
viewBox="0 0 20 20" viewBox="0 0 20 20"
@ -334,12 +329,13 @@
</svg> </svg>
</a> </a>
<a <a
class="bg-gradient-to-r from-edge-1 via-edge-2 to-edge-3 font-bold md:bg-2x md:hover:animate-gradient rounded-lg text-white px-8 py-4" class="bg-gradient-to-r button from-edge-1 to-edge-3 via-edge-2"
href="https://microsoftedge.microsoft.com/addons/detail/hbogodfciblakeneadpcolhmfckmjcii" href="https://microsoftedge.microsoft.com/addons/detail/hbogodfciblakeneadpcolhmfckmjcii"
target="_blank" target="_blank"
> >
Edge Add-ons Edge Add-ons
<svg <svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-5 inline md:hidden w-5" class="h-5 inline md:hidden w-5"
viewBox="0 0 20 20" viewBox="0 0 20 20"
@ -353,12 +349,13 @@
</svg> </svg>
</a> </a>
<a <a
class="bg-gradient-to-r from-firefox-1 via-firefox-2 to-firefox-3 font-bold md:bg-2x md:hover:animate-gradient rounded-lg text-white px-8 py-4" class="bg-gradient-to-r button from-firefox-1 to-firefox-3 via-firefox-2"
href="https://addons.mozilla.org/firefox/addon/cookie-dialog-monster" href="https://addons.mozilla.org/firefox/addon/cookie-dialog-monster"
target="_blank" target="_blank"
> >
Firefox Add-ons Firefox Add-ons
<svg <svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-5 inline md:hidden w-5" class="h-5 inline md:hidden w-5"
viewBox="0 0 20 20" viewBox="0 0 20 20"