Further UI improvements

icons/copy-dark.svg

@@ -0,0 +1,124 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 330 330"
+   style="enable-background:new 0 0 330 330;"
+   xml:space="preserve"
+   sodipodi:docname="copy-dark_2.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
+   id="metadata47"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs45" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1680"
+   inkscape:window-height="997"
+   id="namedview43"
+   showgrid="false"
+   inkscape:zoom="0.71515152"
+   inkscape:cx="1.3983051"
+   inkscape:cy="165"
+   inkscape:window-x="0"
+   inkscape:window-y="25"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Capa_1" />
+<g
+   id="g10"
+   style="fill:#777777;fill-opacity:1">
+	<path
+   d="M35,270h45v45c0,8.284,6.716,15,15,15h200c8.284,0,15-6.716,15-15V75c0-8.284-6.716-15-15-15h-45V15   c0-8.284-6.716-15-15-15H35c-8.284,0-15,6.716-15,15v240C20,263.284,26.716,270,35,270z M280,300H110V90h170V300z M50,30h170v30H95   c-8.284,0-15,6.716-15,15v165H50V30z"
+   id="path2"
+   style="fill:#777777;fill-opacity:1" />
+	<path
+   d="M155,120c-8.284,0-15,6.716-15,15s6.716,15,15,15h80c8.284,0,15-6.716,15-15s-6.716-15-15-15H155z"
+   id="path4"
+   style="fill:#777777;fill-opacity:1" />
+	<path
+   d="M235,180h-80c-8.284,0-15,6.716-15,15s6.716,15,15,15h80c8.284,0,15-6.716,15-15S243.284,180,235,180z"
+   id="path6"
+   style="fill:#777777;fill-opacity:1" />
+	<path
+   d="M235,240h-80c-8.284,0-15,6.716-15,15c0,8.284,6.716,15,15,15h80c8.284,0,15-6.716,15-15C250,246.716,243.284,240,235,240z   "
+   id="path8"
+   style="fill:#777777;fill-opacity:1" />
+</g>
+<g
+   id="g12"
+   style="fill:#777777;fill-opacity:1">
+</g>
+<g
+   id="g14"
+   style="fill:#777777;fill-opacity:1">
+</g>
+<g
+   id="g16"
+   style="fill:#777777;fill-opacity:1">
+</g>
+<g
+   id="g18"
+   style="fill:#777777;fill-opacity:1">
+</g>
+<g
+   id="g20"
+   style="fill:#777777;fill-opacity:1">
+</g>
+<g
+   id="g22"
+   style="fill:#777777;fill-opacity:1">
+</g>
+<g
+   id="g24"
+   style="fill:#777777;fill-opacity:1">
+</g>
+<g
+   id="g26"
+   style="fill:#777777;fill-opacity:1">
+</g>
+<g
+   id="g28"
+   style="fill:#777777;fill-opacity:1">
+</g>
+<g
+   id="g30"
+   style="fill:#777777;fill-opacity:1">
+</g>
+<g
+   id="g32"
+   style="fill:#777777;fill-opacity:1">
+</g>
+<g
+   id="g34"
+   style="fill:#777777;fill-opacity:1">
+</g>
+<g
+   id="g36"
+   style="fill:#777777;fill-opacity:1">
+</g>
+<g
+   id="g38"
+   style="fill:#777777;fill-opacity:1">
+</g>
+<g
+   id="g40"
+   style="fill:#777777;fill-opacity:1">
+</g>
+</svg>

icons/copy-light.svg

@@ -0,0 +1,124 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 330 330"
+   style="enable-background:new 0 0 330 330;"
+   xml:space="preserve"
+   sodipodi:docname="copy-light2.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
+   id="metadata47"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs45" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1680"
+   inkscape:window-height="997"
+   id="namedview43"
+   showgrid="false"
+   inkscape:zoom="0.71515152"
+   inkscape:cx="1.3983051"
+   inkscape:cy="165"
+   inkscape:window-x="0"
+   inkscape:window-y="25"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Capa_1" />
+<g
+   id="g10"
+   style="fill:#f2f2f2;fill-opacity:1">
+	<path
+   d="M35,270h45v45c0,8.284,6.716,15,15,15h200c8.284,0,15-6.716,15-15V75c0-8.284-6.716-15-15-15h-45V15   c0-8.284-6.716-15-15-15H35c-8.284,0-15,6.716-15,15v240C20,263.284,26.716,270,35,270z M280,300H110V90h170V300z M50,30h170v30H95   c-8.284,0-15,6.716-15,15v165H50V30z"
+   id="path2"
+   style="fill:#f2f2f2;fill-opacity:1" />
+	<path
+   d="M155,120c-8.284,0-15,6.716-15,15s6.716,15,15,15h80c8.284,0,15-6.716,15-15s-6.716-15-15-15H155z"
+   id="path4"
+   style="fill:#f2f2f2;fill-opacity:1" />
+	<path
+   d="M235,180h-80c-8.284,0-15,6.716-15,15s6.716,15,15,15h80c8.284,0,15-6.716,15-15S243.284,180,235,180z"
+   id="path6"
+   style="fill:#f2f2f2;fill-opacity:1" />
+	<path
+   d="M235,240h-80c-8.284,0-15,6.716-15,15c0,8.284,6.716,15,15,15h80c8.284,0,15-6.716,15-15C250,246.716,243.284,240,235,240z   "
+   id="path8"
+   style="fill:#f2f2f2;fill-opacity:1" />
+</g>
+<g
+   id="g12"
+   style="fill:#f2f2f2;fill-opacity:1">
+</g>
+<g
+   id="g14"
+   style="fill:#f2f2f2;fill-opacity:1">
+</g>
+<g
+   id="g16"
+   style="fill:#f2f2f2;fill-opacity:1">
+</g>
+<g
+   id="g18"
+   style="fill:#f2f2f2;fill-opacity:1">
+</g>
+<g
+   id="g20"
+   style="fill:#f2f2f2;fill-opacity:1">
+</g>
+<g
+   id="g22"
+   style="fill:#f2f2f2;fill-opacity:1">
+</g>
+<g
+   id="g24"
+   style="fill:#f2f2f2;fill-opacity:1">
+</g>
+<g
+   id="g26"
+   style="fill:#f2f2f2;fill-opacity:1">
+</g>
+<g
+   id="g28"
+   style="fill:#f2f2f2;fill-opacity:1">
+</g>
+<g
+   id="g30"
+   style="fill:#f2f2f2;fill-opacity:1">
+</g>
+<g
+   id="g32"
+   style="fill:#f2f2f2;fill-opacity:1">
+</g>
+<g
+   id="g34"
+   style="fill:#f2f2f2;fill-opacity:1">
+</g>
+<g
+   id="g36"
+   style="fill:#f2f2f2;fill-opacity:1">
+</g>
+<g
+   id="g38"
+   style="fill:#f2f2f2;fill-opacity:1">
+</g>
+<g
+   id="g40"
+   style="fill:#f2f2f2;fill-opacity:1">
+</g>
+</svg>

icons/credits

@@ -15,3 +15,7 @@ CC0
 link-dark.svg, link-light.svg (edited)
 https://www.svgrepo.com/svg/35710/external
 CC0
+
+copy-dark.svg, copy-light.svg (edited)
+https://www.svgrepo.com/svg/76619/copy
+CC0

pages/base.css

@@ -3,7 +3,7 @@ a {
     font-weight: bold;
     background: url('../../icons/link-dark.svg') no-repeat right center;
     background-size: 10px 10px;
-    padding-right:13px;
+    padding-right: 13px;
     text-decoration: underline;
 }
 
@@ -27,6 +27,7 @@ a:hover {
     font-size: 1.3em;
     line-height: 2;
     background-color: #fff;
+    text-align: center;
 }
 
 #button-copy-rule-set:hover {
@@ -34,8 +35,15 @@ a:hover {
     background-color: #ddd;
 }
 
+#button-copy-rule-set-icon {
+    background: url('../../icons/copy-dark.svg') no-repeat right center;
+    background-size: 20px 20px;
+    padding-right: 23px;
+}
+
 #generated-rules {
     display: none;
+    margin-top: 20px;
 }
 
 /**
@@ -232,4 +240,9 @@ a:hover {
     #button-copy-rule-set:hover {
         background-color: #2d2d2d;
     }
+
+    #button-copy-rule-set-icon {
+        background: url('../../icons/copy-light.svg') no-repeat right center;
+        background-size: 20px 20px;
+    }
 }

pages/options/options.css

@@ -295,6 +295,18 @@ body[dir="rtl"] .input-text {
     border-radius: 3px;
 }
 
+.option-links {
+    list-style-type: disclosure-closed;
+}
+
+.option-links-div > ul {
+    padding-top: 2rem;
+}
+
+.option-links-div > ul > li {
+    padding-bottom: .5rem;
+}
+
 @media (prefers-color-scheme: dark) {
     body {
         background-color: #202023;

pages/options/options.html

@@ -141,7 +141,7 @@
                     </label>
                 </div>
                 <textarea rows="12" cols="15" id="generated-rules" readonly></textarea>
-                <input id="button-copy-rule-set" type="button" data-i18n-content="copyRuleSet" value="Copy">
+                <button id="button-copy-rule-set" value="Copy"><span data-i18n-content="copyRuleSet">Copy</span><span id="button-copy-rule-set-icon"></span></button>
             </section>
         </div>
         <section class="notice notice-default hidden" id="notice-locale">
@@ -149,10 +149,21 @@
                 <div class="notice-message">
                     Your preferred language is not yet fully supported. Please help out by translating this add-on on Weblate.
                 </div>
-                <a class="button button-notice button-warning" href="https://hosted.weblate.org/projects/localcdn/" target="_blank">
+                <a class="button button-notice button-warning" href="https://hosted.weblate.org/projects/localcdn/localcdn/" target="_blank">
                     Translate
                 </a>
             </div>
         </section>
+        <div class="option-links-div">
+            <ul class="option-links">
+                <li><a id="link-welcome-page">Welcome page (InApp)</a></li>
+                <li><a id="link-changelog">Changelog (InApp)</a></li>
+                <li><a id="link-donate">Donate (InApp)</a></li>
+                <li><a id="link-codeberg" href="https://codeberg.org/nobody/LocalCDN" target="_blank" rel="nofollow noopener noreferrer">Source-Code (www.codeberg.org)</a></li>
+                <li><a id="link-website" href="https://localcdn.de" target="_blank" rel="nofollow noopener noreferrer">Website (www.localcdn.de)</a></li>
+                <li><a id="link-website-test" href="https://localcdn.de/test" target="_blank" rel="nofollow noopener noreferrer">Test-Sites (www.localcdn.de/test)</a></li>
+                <li><a id="link-translate" href="https://hosted.weblate.org/projects/localcdn/localcdn/" target="_blank" rel="nofollow noopener noreferrer">Translate (www.weblate.org)</a></li>
+            </ul>
+        </div>
     </body>
 </html>

pages/options/options.js

@@ -82,6 +82,9 @@ options._renderOptionsPanel = function () {
 
     document.getElementById('last-mapping-update').textContent += ' ' + lastMappingUpdate;
     document.getElementById('negate-html-filter-list-warning').addEventListener('click', options._onClickHTMLFilterWarning);
+    document.getElementById('link-welcome-page').addEventListener('click', options._onClickWelcomePage);
+    document.getElementById('link-changelog').addEventListener('click', options._onClickChangelog);
+    document.getElementById('link-donate').addEventListener('click', options._onClickDonate);
 };
 
 options._renderBlockMissingNotice = function () {
@@ -313,6 +316,27 @@ options._onClickHTMLFilterWarning = function() {
     });
 }
 
+options._onClickWelcomePage = function() {
+    chrome.tabs.create({
+        'url': chrome.extension.getURL('pages/welcome/welcome.html'),
+        'active': true
+    });
+}
+
+options._onClickDonate = function() {
+    chrome.tabs.create({
+        'url': chrome.extension.getURL('pages/donate/donate.html'),
+        'active': true
+    });
+}
+
+options._onClickChangelog = function() {
+    chrome.tabs.create({
+        'url': chrome.extension.getURL('pages/updates/updates.html'),
+        'active': true
+    });
+}
+
 /**
  * Initializations
  */

pages/popup/popup.css

@@ -348,7 +348,7 @@ input:checked + .slider:before {
 }
 
 .label-domain {
-    color: #bbb;
+    color: #555;
     display: flex;
     font-style: italic;
     overflow: hidden;
@@ -507,7 +507,7 @@ input:checked + .slider:before {
     }
 
     .label-domain {
-        color: #717171;
+        color: #aeaeae;
     }
 
     .panel:not(:last-child) {

pages/updates/updates.html

@@ -44,7 +44,7 @@
                             <li>Added: Chart.js (JS-Bundle & CSS) v2.9.3 (reported by email)</li>
                             <li>Improved: Option to enable HTML-Filter by default (<a href="https://codeberg.org/nobody/LocalCDN/issues/33">#33</a>)</li>
                             <li>Added: Google Material Icons v3.0.1 (<a href="https://codeberg.org/nobody/LocalCDN/issues/41">#41</a>)</li>
-                            <li>Improved: Dark-Mode (reported by email)</li>
+                            <li>Improved: UI (reported by email)</li>
                         </ul>
                     <div class="topic-label">
                         Generate rule sets for uBlock or uMatrix