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

refactor(popup): apply new design

Browse Source
This commit is contained in:
wanhose 2021-04-11 11:45:08 +02:00
parent 30c74ab09c
commit 0084f4e00c
1 changed files with 117 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

213
popup.html
View File

@ -1,106 +1,127 @@
<html> <html>
<head> <head>
<link rel="stylesheet" href="/styles/fonts.css" />
<link rel="stylesheet" href="/styles/reset.css" /> <link rel="stylesheet" href="/styles/reset.css" />
<link rel="stylesheet" href="/styles/index.css" /> <link rel="stylesheet" href="/styles/globals.css" />
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="author" content="wanhose" /> <meta name="author" content="wanhose" />
<script src="/scripts/popup.js"></script> <script src="/scripts/popup.js"></script>
</head> </head>
<body> <body>
<h1>Looking for disable/enable this extension only in this site?</h1> <header class="header">
<button id="state-button"></button> <h1 class="header-title">Do Not Consent</h1>
<h1>Please rate this extension!</h1> <div class="header-actions">
<div id="stars"> <button id="reload">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="24" width="24"
height="24" height="24"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="2" fill="none"
stroke-linecap="round" stroke="currentColor"
stroke-linejoin="round" stroke-width="2"
class="star" stroke-linecap="round"
data-score="1" stroke-linejoin="round"
> >
<polygon <polyline points="23 4 23 10 17 10"></polyline>
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" <polyline points="1 20 1 14 7 14"></polyline>
/> <path
</svg> d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"
<svg ></path>
xmlns="http://www.w3.org/2000/svg" </svg>
width="24" </button>
height="24" </div>
viewBox="0 0 24 24" </header>
stroke-width="2" <main>
stroke-linecap="round" <label class="switch-label">
stroke-linejoin="round" <span>Hide irritating dialogs on <strong id="host"></strong></span>
class="star" <div class="switch">
data-score="2" <input id="power" type="checkbox" />
> <span class="slider"></span>
<polygon </div>
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" </label>
/> <div class="separator"></div>
</svg> <div>
<svg <div class="rating">
xmlns="http://www.w3.org/2000/svg" <span>Do you like this extension?</span>
width="24" <div class="rating-actions">
height="24" <button id="unlike">
viewBox="0 0 24 24" <svg
stroke-width="2" xmlns="http://www.w3.org/2000/svg"
stroke-linecap="round" width="24"
stroke-linejoin="round" height="24"
class="star" viewBox="0 0 24 24"
data-score="3" fill="none"
> stroke="currentColor"
<polygon stroke-width="2"
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" stroke-linecap="round"
/> stroke-linejoin="round"
</svg> >
<svg <path
xmlns="http://www.w3.org/2000/svg" d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"
width="24" ></path>
height="24" </svg>
viewBox="0 0 24 24" </button>
stroke-width="2" <button id="like">
stroke-linecap="round" <svg
stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"
class="star" width="24"
data-score="4" height="24"
> viewBox="0 0 24 24"
<polygon fill="none"
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" stroke="currentColor"
/> stroke-width="2"
</svg> stroke-linecap="round"
<svg stroke-linejoin="round"
xmlns="http://www.w3.org/2000/svg" >
width="24" <path
height="24" d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
viewBox="0 0 24 24" ></path>
stroke-width="2" </svg>
stroke-linecap="round" </button>
stroke-linejoin="round" </div>
class="star" </div>
data-score="5" <p hidden="true" id="negative">
> Ooops! I am sorry for the inconvenience, please
<polygon <a href="mailto:wanhose.development@gmail.com" target="_blank">
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" contact me
/> </a>
</svg> and I will help you
</div> <span aria-label="Grinning face with sweat" role="img">😅</span>
<p hidden="true" id="negative"> </p>
Ooops! We are sorry for the inconvenience, please <p hidden="true" id="positive">
<a href="mailto:wanhose.development@gmail.com" target="_blank"> Thank you very much! Help me to grow rating and reviewing this
contact us extension
</a> <a id="store" target="_blank">here</a>
and we will help you <span aria-label="Smiling face with heart-shaped eyes" role="img">
<span aria-label="Grinning face with sweat" role="img">😅</span> 😍
</p> </span>
<p hidden="true" id="positive"> </p>
Thank you very much! Help us to grow rating and reviewing this extension </div>
<a id="store-link" target="_blank">here</a> <div class="separator"></div>
<span aria-label="Smiling face with heart-shaped eyes" role="img"> <div class="help">
😍 <span>Help or issues?</span>
</span> <a href="mailto:wanhose.development@gmail.com" target="_blank">
</p> <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="22" y1="2" x2="11" y2="13"></line>
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
</svg>
</a>
</div>
</main>
<footer>
Made with <span aria-label="Heart" role="img">❤️</span> by
<a href="https://github.com/wanhose" target="_blank">wanhose</a>
</footer>
</body> </body>
</html> </html>