feat(web): improve accessibility and styles
This commit is contained in:
parent
8fa38fd0f4
commit
7f6b1d4a80
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -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"
|
||||||
|
Loading…
Reference in New Issue
Block a user