html structure improved (#1237)

This commit is contained in:
nobody 2022-12-11 05:21:36 +01:00
parent 0418b83a47
commit 84c65a310b
No known key found for this signature in database
GPG Key ID: 8F6DE3D614FCFD7A
9 changed files with 383 additions and 180 deletions

106
icons/popup_check.svg Normal file
View File

@ -0,0 +1,106 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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 236.988 236.988"
style="enable-background:new 0 0 236.988 236.988;"
xml:space="preserve"
sodipodi:docname="popup_check.svg"
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"><metadata
id="metadata39"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs37" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1021"
id="namedview35"
showgrid="false"
inkscape:zoom="3.4938477"
inkscape:cx="118.494"
inkscape:cy="118.494"
inkscape:window-x="0"
inkscape:window-y="31"
inkscape:window-maximized="1"
inkscape:current-layer="Capa_1" />
<polygon
points="198.098,24.326 87.543,134.881 38.891,86.229 0,125.121 87.543,212.662 236.988,63.217 "
id="polygon2"
style="fill:#f0f0f0;fill-opacity:1" />
<g
id="g4"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g6"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g8"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g10"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g12"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g14"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g16"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g18"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g20"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g22"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g24"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g26"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g28"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g30"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g32"
style="fill:#f0f0f0;fill-opacity:1">
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

107
icons/popup_uncheck.svg Normal file
View File

@ -0,0 +1,107 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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="Layer_1"
x="0px"
y="0px"
viewBox="0 0 342.947 342.947"
style="enable-background:new 0 0 342.947 342.947;"
xml:space="preserve"
sodipodi:docname="popup_uncheck.svg"
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"><metadata
id="metadata39"><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="defs37" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1021"
id="namedview35"
showgrid="false"
inkscape:zoom="2.4143673"
inkscape:cx="171.4735"
inkscape:cy="206.32001"
inkscape:window-x="0"
inkscape:window-y="31"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1" />
<polygon
points="21.213,342.947 171.473,192.686 321.734,342.947 342.947,321.734 192.686,171.473 342.947,21.213 321.734,0 171.473,150.26 21.213,0 0,21.213 150.26,171.473 0,321.734 "
id="polygon2"
style="fill:#f0f0f0;fill-opacity:1;stroke:#f0f0f0;stroke-width:49.7301;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(0.82087416,-0.0018069,0.0018043,0.82128778,30.514662,31.320972)" />
<g
id="g4"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g6"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g8"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g10"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g12"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g14"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g16"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g18"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g20"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g22"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g24"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g26"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g28"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g30"
style="fill:#f0f0f0;fill-opacity:1">
</g>
<g
id="g32"
style="fill:#f0f0f0;fill-opacity:1">
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

@ -11,18 +11,18 @@
<link rel="stylesheet" type="text/css" href="donate.css">
</head>
<body>
<img src="../images/logo.svg" alt="LocalCDN" class="logo"/>
<img src="../images/logo.svg" alt="" class="logo">
<div class="container">
<h1>Donation Methods</h1>
<div class="notice">
<div class="subtle-hint">
<p>LocalCDN is free and open-source. If you like LocalCDN you can support continued development by making a donation. Any help would be greatly appreciated!</p>
<p><strong>Question:</strong> <em>Why are the donation options only displayed here and no longer on the website?</em><br/><strong>Answer:</strong> I think it is better if your public IP address is rarely listed in any server log files.</p>
<p><strong>Question:</strong> <em>Why are the donation options only displayed here and no longer on the website?</em><br><strong>Answer:</strong> I think it is better if your public IP address is rarely listed in any server log files.</p>
</div>
<div class="subtle-hint div-donations">
<h3>SEPA Bank Transfer</h3>
<p class="mono-block">
<span>IBAN:&nbsp;DE22&nbsp;5003&nbsp;1000&nbsp;1069&nbsp;4660&nbsp;16</span><br/>
<span>IBAN:&nbsp;DE22&nbsp;5003&nbsp;1000&nbsp;1069&nbsp;4660&nbsp;16</span><br>
<span>BIC:&nbsp;&nbsp;TRODDEF1XXX</span>
</p>
</div>
@ -37,8 +37,8 @@
<div class="subtle-hint div-donations">
<h3>Monero</h3>
<p class="mono-block">46j26ggSZNT9rN7VeFYXp2PsKEMyJSSYneBVKXY4xeemdfZfCpNg6tQEXQZpWiTTuGX3SbnDPwuh3167cCoYSrqN72H9jPk</p>
<img src="../images/monero.png" alt="Monero QR code"/>
<br/>
<img src="../images/monero.png" alt="">
<br>
<a href="monero:46j26ggSZNT9rN7VeFYXp2PsKEMyJSSYneBVKXY4xeemdfZfCpNg6tQEXQZpWiTTuGX3SbnDPwuh3167cCoYSrqN72H9jPk?tx_description=LocalCDN">Open in Wallet</a>
</div>
<div class="subtle-hint div-donations">
@ -48,7 +48,7 @@
<a href="https://www.buymeacoffee.com/LocalCDN" target="_blank" rel="nofollow noopener noreferrer">www.buymeacoffee.com/LocalCDN</a>
</p>
<a href="https://www.buymeacoffee.com/LocalCDN" class="no-icon" target="_blank" rel="nofollow noopener noreferrer">
<img src="../images/buymeacoffee.png" alt="Buy Me A Coffee">
<img src="../images/buymeacoffee.png" alt="">
</a>
</div>
<div class="subtle-hint div-donations">
@ -57,17 +57,17 @@
<a href="https://opencollective.com/LocalCDN" target="_blank" rel="nofollow noopener noreferrer">www.opencollective.com/LocalCDN</a>
</p>
<a href="https://www.buymeacoffee.com/LocalCDN" class="no-icon" target="_blank" rel="nofollow noopener noreferrer">
<img src="../images/opencollective.png" alt="Open Collective">
<img src="../images/opencollective.png" alt="">
</a>
</div>
<p>
<div>
<ul>
<li><strong>Why no PayPal?</strong> I hope this question is not serious. 🙂 If it does: PayPal shares the data collected from customers with over 600 other companies.</li>
<li><strong>Why no Patreon?</strong> Have you ever analyzed the website with Webbkoll? The trackers/cookies from Facebook, Twitter and Google integrated there do not harmonise with LocalCDN.</li>
<li><strong>Why no Liberapay?</strong> Liberapay only offers Stripe and PayPal as a payout method. I don't have a PayPal account (and don't want one). The website of Stripe is also full of third party providers.</li>
<li><strong>You know of a donation option that is privacy friendly?</strong> Then send me an e-mail please.</li>
</ul>
</p>
</div>
</div>
</div>
</body>

View File

@ -13,11 +13,11 @@
<script src="help.js"></script>
</head>
<body>
<img src="../images/logo.svg" alt="LocalCDN" class="logo"/>
<img src="../images/logo.svg" alt="" class="logo">
<h1 data-i18n-content="titleHelp">Help</h1>
<section class="notice notice-default hidden" id="notice-locale">
<div class="notice notice-default hidden" id="notice-locale">
<p>Your preferred language is not yet fully supported. Please help out by translating this add-on on <a class="button button-notice button-warning" href="https://hosted.weblate.org/projects/localcdn/localcdn/" target="_blank" rel="noopener noreferrer">Weblate</a>.</p>
</section>
</div>
<div class="notice">
<div class="index">
<ul>
@ -35,18 +35,18 @@
<div id="introduction" class="notice">
<h2 data-i18n-content="helpIntroductionTitle">Introduction</h2>
<p data-i18n-content="helpIntroductionDescription">LocalCDN is a web browser extension that emulates Content Delivery Networks to improve your online privacy. It intercepts traffic, finds supported frameworks/libraries locally, and injects them into the website. Feel free to use the following testing utility to find out if you are properly protected. For more information read the tutorial or our Wiki pages.</p>
<a href="https://www.localcdn.org/test" rel="nofollow noopener noreferrer" data-i18n-content="helpLinkTestUtility">Testing utility</a><br/>
<a href="https://www.localcdn.org/tutorial" rel="nofollow noopener noreferrer" data-i18n-content="helpLinkTutorial">Tutorial</a><br/>
<a href="https://www.localcdn.org/test" rel="nofollow noopener noreferrer" data-i18n-content="helpLinkTestUtility">Testing utility</a><br>
<a href="https://www.localcdn.org/tutorial" rel="nofollow noopener noreferrer" data-i18n-content="helpLinkTutorial">Tutorial</a><br>
<a href="https://codeberg.org/nobody/LocalCDN/wiki" target="_blank" rel="nofollow noopener noreferrer" data-i18n-content="helpLinkWikiPages">Wiki pages</a>
</div>
<div id="html-filter" class="notice">
<h2 data-i18n-content="helpHtmlFilterTitle">What is "HTML filter"? (Firefox only)</h2>
<p data-i18n-content="helpHtmlFilterDescription">In most cases LocalCDN can easily replace embedded frameworks and improves privacy. In some cases the website may try to prevent this by setting certain options in the HTML source code. LocalCDN reads the HTML source code before it is displayed in the browser and removes these part (red).</p>
<p>
<span data-i18n-content="helpHtmlFilterBefore">The HTML filter removes the red characters from this example:</span><br/>
<code><span class="code-blue">&lt;script&nbsp;src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"</span>&nbsp;<span class="code-red">integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="&nbsp;crossorigin="anonymous"</span><span class="code-blue">>&lt;/script></span></code><br/><br/>
<span data-i18n-content="helpHtmlFilterAfter">The result then looks like this:</span><br/>
<code><span class="code-blue">&lt;script&nbsp;src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">&lt;/script></span></code><br/><br/><br/>
<span data-i18n-content="helpHtmlFilterBefore">The HTML filter removes the red characters from this example:</span><br>
<code><span class="code-blue">&lt;script&nbsp;src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"</span>&nbsp;<span class="code-red">integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="&nbsp;crossorigin="anonymous"</span><span class="code-blue">>&lt;/script></span></code><br><br>
<span data-i18n-content="helpHtmlFilterAfter">The result then looks like this:</span><br>
<code><span class="code-blue">&lt;script&nbsp;src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">&lt;/script></span></code><br><br><br>
</p>
<p><em><span data-i18n-content="helpHtmlFilterWhyTitle">Why is it necessary to remove crossorigin and integrity attributes?</span></em></p>
<p data-i18n-content="helpHtmlFilterCrossorigin">The crossorigin attribute prevents the replacement because the destination does not match the requested one.</p>
@ -71,19 +71,19 @@
</thead>
<tbody>
<tr>
<td><img src="ublock-easy.png" alt="Default"></a></td>
<td><img src="ublock-easy.png" alt=""></td>
<td data-i18n-content="helpRuleGeneratorUblockTableDefaultEasy">Default/Easy</td>
<td data-i18n-content="helpNo">No</td>
<td><a href="https://github.com/gorhill/uBlock/wiki/Blocking-mode#very-easy-mode-details-" rel="nofollow">Link (github.com)</a></td>
</tr>
<tr>
<td><img src="ublock-medium.png" alt="Medium"></a></td>
<td><img src="ublock-medium.png" alt=""></td>
<td data-i18n-content="helpRuleGeneratorUblockTableMedium">Medium</td>
<td data-i18n-content="helpYes">Yes</td>
<td><a href="https://github.com/gorhill/uBlock/wiki/Blocking-mode:-medium-mode" rel="nofollow">Link (github.com)</a></td>
</tr>
<tr>
<td><img src="ublock-hard.png" alt="Hard"></a></td>
<td><img src="ublock-hard.png" alt=""></td>
<td data-i18n-content="helpRuleGeneratorUblockTableHard">Hard</td>
<td data-i18n-content="helpYes">Yes</td>
<td><a href="https://github.com/gorhill/uBlock/wiki/Blocking-mode:-hard-mode" rel="nofollow">Link (github.com)</a></td>
@ -103,19 +103,19 @@
<h2 data-i18n-content="helpStatisticsTitle">What about the statistics? Is anything transferred to any servers?</h2>
<p data-i18n-content="helpStatisticsDescription">Don't panic, nothing will be transmitted. It would be against all my principles. The statistics (JSON format) contains the following information: Date, CDN+counter and framework+counter. That's all. I've an example here:</p>
<div class="statistic-demo">
<code>"2020-08-10": {</code><br/>
<code> "frameworks": {</code><br/>
<code> "resources/jquery/1.12.4/jquery.min.jsm": 5</code><br/>
<code> },</code><br/>
<code> "cdns": {</code><br/>
<code> "ajax.googleapis.com": 5</code><br/>
<code> }</code><br/>
<code>}</code><br/>
<code>"2020-08-10": {</code><br>
<code> "frameworks": {</code><br>
<code> "resources/jquery/1.12.4/jquery.min.jsm": 5</code><br>
<code> },</code><br>
<code> "cdns": {</code><br>
<code> "ajax.googleapis.com": 5</code><br>
<code> }</code><br>
<code>}</code><br>
</div>
<p data-i18n-content="helpStatisticsContent">The statistics contain no information about the browser, operating system, requesting website, IP addresses or any other information. Just date, CDN+counter and framework+counter. It shows you which frameworks are replaced by LocalCDNs how often and which CDNs were requested.</p>
<h3 span data-i18n-content="helpStatisticsTruthTitle">How do I know that's true?</h3>
<h3 data-i18n-content="helpStatisticsTruthTitle">How do I know that's true?</h3>
<p>
<span data-i18n-content="helpStatisticsTruthDescription">The extension storage can be viewed directly with the Firefox browser. Open the URL "about:debugging", switch to "Storage" and select "Extension Storage". Under the key "internalStatisticsData" you will find the collected data. Just copy it and put it into a JSON PrettyPrinter to make it more readable. Please note that you have to remove the first and last quotation mark and the key to it. You should be able to see this clearly in this video.</span><br/>
<span data-i18n-content="helpStatisticsTruthDescription">The extension storage can be viewed directly with the Firefox browser. Open the URL "about:debugging", switch to "Storage" and select "Extension Storage". Under the key "internalStatisticsData" you will find the collected data. Just copy it and put it into a JSON PrettyPrinter to make it more readable. Please note that you have to remove the first and last quotation mark and the key to it. You should be able to see this clearly in this video.</span><br>
<a href="https://www.localcdn.org/view-extension-storage.mp4">https://www.localcdn.org/view-extension-storage.mp4</a>
</p>
</div>

View File

@ -3,7 +3,7 @@
<head>
<title>Options | LocalCDN</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<meta charset="utf-8">
<link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">
<link rel="icon" href="../images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="../../modules/internal/color-picker/color-picker.css">
@ -29,27 +29,27 @@
<script src="options.js"></script>
<div class="btn-group">
<input type="button" id="btn-general-tab" class="option-buttons option-buttons-active" data-option-tab="general-tab" data-i18n-content="btnGeneral" value="General"/>
<input type="button" id="btn-advanced-tab" class="option-buttons" data-option-tab="advanced-tab" data-i18n-content="btnAdvanced" value="Advanced"/>
<input type="button" id="btn-export-import-tab" class="option-buttons" data-option-tab="export-import-tab" data-i18n-content="btnOther" value="Other"/>
<input type="button" id="btn-info-tab" class="option-buttons" data-option-tab="info-tab" data-i18n-content="btnInfo" value="Info"/>
<input type="button" id="btn-general-tab" class="option-buttons option-buttons-active" data-option-tab="general-tab" data-i18n-content="btnGeneral" value="General">
<input type="button" id="btn-advanced-tab" class="option-buttons" data-option-tab="advanced-tab" data-i18n-content="btnAdvanced" value="Advanced">
<input type="button" id="btn-export-import-tab" class="option-buttons" data-option-tab="export-import-tab" data-i18n-content="btnOther" value="Other">
<input type="button" id="btn-info-tab" class="option-buttons" data-option-tab="info-tab" data-i18n-content="btnInfo" value="Info">
</div>
<div id="chromium-banner" class="chromium-banner">Non-Firefox browsers do not support all features of LocalCDN. <a class="no-icon" href="../help/help.html#browser-compatibility">Read more</a></div>
<div id="general-tab" class="tab-content">
<div class="option-group">
<section class="option">
<div class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="showIconBadge" type="checkbox">
<span data-i18n-content="showIconBadgeTitle">Display injection counts on icon</span>
<div class="b-input"></div>
<span class="b-input"></span>
</label>
</div>
<div class="description-option" data-i18n-content="showIconBadgeDescription">Show the number of injected resources on the extension icon.</div>
</section>
<section class="option">
</div>
<div class="option">
<div class="title-option b-contain">
<span data-i18n-content="updateNotificationTitle">Notification after an update</span>
</div>
@ -60,68 +60,68 @@
<option value="2" data-i18n-content="updateNotificationAlways">Always</option>
</select>
</div>
</section>
<section class="option">
</div>
<div class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="disablePrefetch" type="checkbox">
<span data-i18n-content="disablePrefetchTitle">Disable link prefetching</span>
<div class="b-input"></div>
<span class="b-input"></span>
</label>
</div>
<div class="description-option" data-i18n-content="disablePrefetchDescription">Prevent disallowed requests from leaking out to delivery networks.</div>
</section>
<section class="option">
</div>
<div class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="stripMetadata" type="checkbox">
<span data-i18n-content="stripMetadataTitle">Strip metadata from allowed requests</span>
<div class="b-input"></div>
<span class="b-input"></span>
</label>
</div>
<div class="description-option" data-i18n-content="stripMetadataDescription">Erase sensitive data from allowed CDN requests for improved privacy.</div>
</section>
<section class="option">
</div>
<div class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="internalStatistics" type="checkbox">
<span data-i18n-content="internalStatisticsTitle">Internal statistics</span>
<div class="b-input"></div>
<span class="b-input"></span>
</label>
</div>
<div class="description-option" data-i18n-content="internalStatisticsDescription">No data transmission. It's all local on your device.</div>
</section>
<section class="option">
</div>
<div class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="hideDonationButton" type="checkbox">
<span data-i18n-content="hideDonationButton">Hide donation button</span>
<div class="b-input"></div>
<span class="b-input"></span>
</label>
</div>
</section>
</div>
</div>
<div class="option-group">
<section class="option">
<div class="option">
<div class="title-option without-checkbox" data-i18n-content="allowlistedDomainsTitle">Deactivate LocalCDN for these domains:</div>
<textarea rows="7" id="allowlistedDomains" class="input-text without-checkbox" data-option="allowlistedDomains" type="text"></textarea>
<textarea rows="7" id="allowlistedDomains" class="input-text without-checkbox" data-option="allowlistedDomains"></textarea>
<div class="description-option without-checkbox">
<span data-i18n-content="allowlistedDomainsDescription">Enter domains to disable LocalCDN there. One domain per line.</span><br><br>
<span class="monoblock">
<img class="checked-unchecked" src="../../icons/checked.svg"/> example.com<br>
<img class="checked-unchecked" src="../../icons/checked.svg"/> sub.example.com<br>
<img class="checked-unchecked" src="../../icons/checked.svg"/> *.example.com<br>
<img class="checked-unchecked" src="../../icons/unchecked.svg"/> https://example.com<br>
<img class="checked-unchecked" src="../../icons/unchecked.svg"/> https://*.example.com<br>
<img class="checked-unchecked" src="../../icons/unchecked.svg"/> https://example.com/page/example.html
<img class="checked-unchecked" src="../../icons/checked.svg" alt=""> example.com<br>
<img class="checked-unchecked" src="../../icons/checked.svg" alt=""> sub.example.com<br>
<img class="checked-unchecked" src="../../icons/checked.svg" alt=""> *.example.com<br>
<img class="checked-unchecked" src="../../icons/unchecked.svg" alt=""> https://example.com<br>
<img class="checked-unchecked" src="../../icons/unchecked.svg" alt=""> https://*.example.com<br>
<img class="checked-unchecked" src="../../icons/unchecked.svg" alt=""> https://example.com/page/example.html
</span>
</div>
</section>
</div>
</div>
</div>
<div id="advanced-tab" class="tab-content">
<section class="notice notice-warning hidden" id="notice-block-missing">
<div class="notice notice-warning hidden" id="notice-block-missing">
<div class="notice-head">
<span data-i18n-content="blockMissingTitle">Block requests for missing resources</span>
</div>
@ -133,97 +133,96 @@
Disable
</div>
</div>
</section>
</div>
<div class="option-group">
<section class="option">
<div class="option">
<div class="title-option">
<label class="b-contain">
<input id="blockMissing" data-option="blockMissing" type="checkbox">
<span data-i18n-content="blockMissingTitle">Block requests for missing resources</span>
<div class="b-input"></div>
<span class="b-input"></span>
</label>
<span class="badge badge-warning" data-i18n-content="advancedLabel">Advanced</span>
</div>
<div class="description-option" data-i18n-content="blockMissingDescription">Cancel intercepted request if the required resource is not locally available.</div>
</section>
<section id="block-google-fonts" class="option">
</div>
<div id="block-google-fonts" class="option">
<div class="title-option">
<label class="b-contain">
<input id="blockGoogleFonts" data-option="blockGoogleFonts" type="checkbox">
<span data-i18n-content="blockGoogleFontsTitle">Block Google Fonts</span>
<div class="b-input"></div>
<span class="b-input"></span>
</label>
</div>
<div class="description-option" data-i18n-content="blockGoogleFontsDescription">If you use the rules of the rule generator, requests to "fonts.googleapis.com" are allowed to substitute "Google Material Icons" automatically. If you want to block the other requests, enable this option.</div>
<div id="div-domains-allowlist-google-fonts">
<div class="description-option"><textarea rows="7" id="allowedDomainsGoogleFonts" class="input-text without-checkbox" data-option="allowedDomainsGoogleFonts" type="text"></textarea></div>
<div class="description-option"><textarea rows="7" id="allowedDomainsGoogleFonts" class="input-text without-checkbox" data-option="allowedDomainsGoogleFonts"></textarea></div>
<div class="description-option">
<span data-i18n-content="labelDomainsAllowlistGoogleFonts">These domains are allowed to load Google Fonts. One domain per line.</span><br>
<span class="monoblock">
<img class="checked-unchecked" src="../../icons/checked.svg"/> example.com<br>
<img class="checked-unchecked" src="../../icons/checked.svg"/> sub.example.com<br>
<img class="checked-unchecked" src="../../icons/checked.svg"/> *.example.com<br>
<img class="checked-unchecked" src="../../icons/unchecked.svg"/> https://example.com<br>
<img class="checked-unchecked" src="../../icons/unchecked.svg"/> https://*.example.com<br>
<img class="checked-unchecked" src="../../icons/unchecked.svg"/> https://example.com/page/example.html
<img class="checked-unchecked" src="../../icons/checked.svg" alt=""> example.com<br>
<img class="checked-unchecked" src="../../icons/checked.svg" alt=""> sub.example.com<br>
<img class="checked-unchecked" src="../../icons/checked.svg" alt=""> *.example.com<br>
<img class="checked-unchecked" src="../../icons/unchecked.svg" alt=""> https://example.com<br>
<img class="checked-unchecked" src="../../icons/unchecked.svg" alt=""> https://*.example.com<br>
<img class="checked-unchecked" src="../../icons/unchecked.svg" alt=""> https://example.com/page/example.html
</span>
</div>
</div>
</section>
<section class="option">
</div>
<div class="option">
<div class="title-option">
<label class="b-contain">
<input id="enableLogging" data-option="enableLogging" type="checkbox">
<span data-i18n-content="loggingTitle">Enable logging</span>
<div class="b-input"></div>
<span class="b-input"></span>
</label>
</div>
<div class="description-option" data-i18n-content="loggingDescription">You can open the log with the icon in the menu. The log will be deleted when you close the browser or disable logging.</div>
</section>
<section class="option">
</div>
<div class="option">
<div class="title-option">
<label class="b-contain">
<input id="changeBadgeColorMissingResources" data-option="changeBadgeColorMissingResources" type="checkbox">
<span data-i18n-content="changeBadgeColorMissingResourcesTitle">Indicate missing resources on the icon</span>
<div class="b-input"></div>
<span class="b-input"></span>
</label>
<span class="badge badge-warning" data-i18n-content="betaLabel">Beta</span>
</div>
<div class="description-option" data-i18n-content="changeBadgeColorMissingResourcesDescription">Change the badge color if resources are missing.</div>
</section>
</div>
</div>
<div id="html-filter-div" class="option-group">
<section class="option">
<div class="option">
<div id="html-filter-domains-title-exclude" class="title-option without-checkbox" data-i18n-content="htmlFilterDomainsTitleExclude">Do not apply HTML filter to these domains:</div>
<div id="html-filter-domains-title-include" class="title-option without-checkbox" data-i18n-content="htmlFilterDomainsTitleInclude">Apply HTML filter to these domains:</div>
<textarea rows="7" id="domainsManipulateDOM" class="input-text without-checkbox" data-option="domainsManipulateDOM" type="text"></textarea>
<textarea rows="7" id="domainsManipulateDOM" class="input-text without-checkbox" data-option="domainsManipulateDOM"></textarea>
<div class="description-option without-checkbox">
<span data-i18n-content="htmlFilterDomainsDescription">Enter the domains to be handled or ignored by the HTML filter. One domain per line.</span><br>
<span class="monoblock">
<img class="checked-unchecked" src="../../icons/checked.svg"/> example.com<br>
<img class="checked-unchecked" src="../../icons/checked.svg"/> sub.example.com<br>
<img class="checked-unchecked" src="../../icons/checked.svg"/> *.example.com<br>
<img class="checked-unchecked" src="../../icons/unchecked.svg"/> https://example.com<br>
<img class="checked-unchecked" src="../../icons/unchecked.svg"/> https://*.example.com<br>
<img class="checked-unchecked" src="../../icons/unchecked.svg"/> https://example.com/page/example.html
<img class="checked-unchecked" src="../../icons/checked.svg" alt=""> example.com<br>
<img class="checked-unchecked" src="../../icons/checked.svg" alt=""> sub.example.com<br>
<img class="checked-unchecked" src="../../icons/checked.svg" alt=""> *.example.com<br>
<img class="checked-unchecked" src="../../icons/unchecked.svg" alt=""> https://example.com<br>
<img class="checked-unchecked" src="../../icons/unchecked.svg" alt=""> https://*.example.com<br>
<img class="checked-unchecked" src="../../icons/unchecked.svg" alt=""> https://example.com/page/example.html
</span>
</div>
</section>
<section class="option">
</div>
<div class="option">
<div class="title-option">
<label class="b-contain">
<input id="negateHtmlFilterList" data-option="negateHtmlFilterList" type="checkbox">
<span data-i18n-content="negateHtmlFilterListTitle">Invert HTML filter</span>
<div class="b-input"></div>
<span class="b-input"></span>
</label>
<span class="badge badge-warning" data-i18n-content="advancedLabel">Advanced</span>
</div>
<div class="description-option" data-i18n-content="negateHtmlFilterListDescription">Enable this option to always apply the HTML filter. The domains in the list will be ignored then. If this option is disabled, the HTML filter is only applied to domains in the list.</div>
</section>
</div>
<a id="negate-html-filter-list-warning" data-i18n-content="negateHtmlFilterListWarning">This function can break websites. Please note the information on the Wiki page.</a>
</div>
<div class="option-group">
<section class="option">
<div class="option">
<div class="title-option without-checkbox">
<a class="no-icon" href="../help/help.html#rule-generator">
<span data-i18n-content="generateRuleSetTitle">Generate rule set</span>
@ -238,75 +237,75 @@
</div>
<div class="ruleset-generator">
<label class="b-contain" for="generate-ublock-rules">uBlock
<input id="generate-ublock-rules" name="rule-sets" data-ruleset="uBlock" type="radio" value="uBlock" autocomplete="off">
<div class="b-input"></div>
<input id="generate-ublock-rules" name="rule-sets" data-ruleset="uBlock" type="radio" value="uBlock">
<span class="b-input"></span>
</label>
</div>
<div class="ruleset-generator">
<label class="b-contain" for="generate-umatrix-rules">uMatrix
<input id="generate-umatrix-rules" name="rule-sets" data-ruleset="uMatrix" type="radio" value="uMatrix" autocomplete="off">
<div class="b-input"></div>
<input id="generate-umatrix-rules" name="rule-sets" data-ruleset="uMatrix" type="radio" value="uMatrix">
<span class="b-input"></span>
</label>
</div>
<div class="ruleset-generator">
<label class="b-contain" for="generate-adguard-rules">AdGuard
<input id="generate-adguard-rules" name="rule-sets" data-ruleset="AdGuard" type="radio" value="AdGuard" autocomplete="off">
<div class="b-input"></div>
<input id="generate-adguard-rules" name="rule-sets" data-ruleset="AdGuard" type="radio" value="AdGuard">
<span class="b-input"></span>
</label>
</div>
<div class="ruleset-generator">
<label class="b-contain" for="generate-noscript-rules">NoScript
<input id="generate-noscript-rules" name="rule-sets" data-ruleset="NoScript" type="radio" value="NoScript" autocomplete="off">
<div class="b-input"></div>
<input id="generate-noscript-rules" name="rule-sets" data-ruleset="NoScript" type="radio" value="NoScript">
<span class="b-input"></span>
</label>
</div>
<textarea rows="12" id="generated-rules" readonly></textarea>
<button id="button-copy-rule-set" value="Copy" class="btns"><span data-i18n-content="copyRuleSet">Copy</span><span id="button-copy-rule-set-icon"></span></button>
</section>
</div>
</div>
</div>
<div id="export-import-tab" class="tab-content">
<div id="icon-style-div" class="option-group">
<section id="section-icon-style" class="option">
<div id="section-icon-style" class="option">
<div class="title-option without-checkbox" data-i18n-content="chooseIconStyle">Choose an icon for this extension</div>
<div class="div-icons-badge-colors">
<div class="div-selected-icon">
<label class="b-contain" for="icon-default">
<img src="../../icons/action/default/icon32-default.png" alt="Default" class="icons">
<img src="../../icons/action/default/icon32-disabled.png" alt="Default" class="icons">
<img src="../../icons/action/default/icon32-default.png" alt="" class="icons">
<img src="../../icons/action/default/icon32-disabled.png" alt="" class="icons">
<input id="icon-default" name="selected-icon" type="radio" data-option="selectedIcon" value="Default">
<div class="b-input"></div>
<span class="b-input"></span>
</label>
<label class="b-contain" for="icon-grey">
<img src="../../icons/action/grey/icon32-default.png" alt="Blue/Grey" class="icons">
<img src="../../icons/action/grey/icon32-disabled.png" alt="Blue/Grey" class="icons">
<img src="../../icons/action/grey/icon32-default.png" alt="" class="icons">
<img src="../../icons/action/grey/icon32-disabled.png" alt="" class="icons">
<input id="icon-grey" name="selected-icon" type="radio" data-option="selectedIcon" value="Grey">
<div class="b-input"></div>
<span class="b-input"></span>
</label>
<label class="b-contain" for="icon-light">
<img src="../../icons/action/light/icon32-default.png" alt="Light" class="icons">
<img src="../../icons/action/light/icon32-disabled.png" alt="Light" class="icons">
<img src="../../icons/action/light/icon32-default.png" alt="" class="icons">
<img src="../../icons/action/light/icon32-disabled.png" alt="" class="icons">
<input id="icon-light" name="selected-icon" type="radio" data-option="selectedIcon" value="Light">
<div class="b-input"></div>
<span class="b-input"></span>
</label>
</div>
<div class="div-badge">
<p class="title-option" data-i18n-content="titleBadgeDefault">Default badge</p>
<div id="badge-preview-top">
<div>
<img id="icon-badge-preview" src="../../icons/action/default/icon38-default.png" alt="Default" class="icons">
<img id="icon-badge-preview" src="../../icons/action/default/icon38-default.png" alt="" class="icons">
<div id="counter-preview-badge"><span>17</span></div>
</div>
</div>
<div id="badge-preview-bottom">
<div class="colorpicker">
<div id="pre-badged-background-color"></div>
<input id="badged-background-color" data-option="badgeDefaultBackgroundColor" class="input-text" maxlength="7"><img id="restore-background-color" class="img-restore-color" src="../../icons/restore.svg"><br>
<input id="badged-background-color" data-option="badgeDefaultBackgroundColor" class="input-text" maxlength="7"><img id="restore-background-color" class="img-restore-color" src="../../icons/restore.svg" alt=""><br>
</div>
<div id="div-badged-text-color" class="colorpicker">
<div id="pre-badged-text-color"></div>
<input id="badged-text-color" data-option="badgeDefaultTextColor" class="input-text" maxlength="7"><img id="restore-text-color" class="img-restore-color" src="../../icons/restore.svg">
<input id="badged-text-color" data-option="badgeDefaultTextColor" class="input-text" maxlength="7"><img id="restore-text-color" class="img-restore-color" src="../../icons/restore.svg" alt="">
</div>
</div>
</div>
@ -314,18 +313,18 @@
<p class="title-option" data-i18n-content="titleBadgeHTMLFilter">HTML filter badge</p>
<div id="html-badge-preview-top">
<div>
<img id="html-icon-badge-preview" src="../../icons/action/default/icon38-default.png" alt="Default" class="icons">
<img id="html-icon-badge-preview" src="../../icons/action/default/icon38-default.png" alt="" class="icons">
<div id="html-counter-preview-badge"><span>17</span></div>
</div>
</div>
<div id="html-badge-preview-bottom">
<div class="colorpicker">
<div id="html-pre-badged-background-color"></div>
<input id="html-badged-background-color" data-option="badgeHTMLFilterBackgroundColor" class="input-text" maxlength="7"><img id="html-restore-background-color" class="img-restore-color" src="../../icons/restore.svg"><br>
<input id="html-badged-background-color" data-option="badgeHTMLFilterBackgroundColor" class="input-text" maxlength="7"><img id="html-restore-background-color" class="img-restore-color" src="../../icons/restore.svg" alt=""><br>
</div>
<div id="html-div-badged-text-color" class="colorpicker">
<div id="html-pre-badged-text-color"></div>
<input id="html-badged-text-color" data-option="badgeHTMLfilterTextColor" class="input-text" maxlength="7"><img id="html-restore-text-color" class="img-restore-color" src="../../icons/restore.svg">
<input id="html-badged-text-color" data-option="badgeHTMLfilterTextColor" class="input-text" maxlength="7"><img id="html-restore-text-color" class="img-restore-color" src="../../icons/restore.svg" alt="">
</div>
</div>
</div>
@ -333,82 +332,84 @@
<p class="title-option" data-i18n-content="titleBadgeMissingResource">Missing resource badge</p>
<div id="missing-badge-preview-top">
<div>
<img id="missing-icon-badge-preview" src="../../icons/action/default/icon38-default.png" alt="Default" class="icons">
<img id="missing-icon-badge-preview" src="../../icons/action/default/icon38-default.png" alt="" class="icons">
<div id="missing-counter-preview-badge"><span>17</span></div>
</div>
</div>
<div id="missing-badge-preview-bottom">
<div class="colorpicker">
<div id="missing-pre-badged-background-color"></div>
<input id="missing-badged-background-color" data-option="badgeMissingResourceBackgroundColor" class="input-text" maxlength="7"><img id="missing-restore-background-color" class="img-restore-color" src="../../icons/restore.svg"><br>
<input id="missing-badged-background-color" data-option="badgeMissingResourceBackgroundColor" class="input-text" maxlength="7"><img id="missing-restore-background-color" class="img-restore-color" src="../../icons/restore.svg" alt=""><br>
</div>
<div id="missing-div-badged-text-color" class="colorpicker">
<div id="missing-pre-badged-text-color"></div>
<input id="missing-badged-text-color" data-option="badgeMissingResourceTextColor" class="input-text" maxlength="7"><img id="missing-restore-text-color" class="img-restore-color" src="../../icons/restore.svg">
<input id="missing-badged-text-color" data-option="badgeMissingResourceTextColor" class="input-text" maxlength="7"><img id="missing-restore-text-color" class="img-restore-color" src="../../icons/restore.svg" alt="">
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="option-group">
<section class="option">
<div class="option">
<div class="title-option without-checkbox"><span data-i18n-content="headerStorageType">Storage type</span><span id="sync-help" class="options-help-icon"></span></div>
<label class="b-contain storage-type" for="storage-type-local"><span data-i18n-content="labelStorageTypeLocal">Local (recommended)</span>
<input id="storage-type-local" data-option="storageType" name="storage-type" type="radio" value="local">
<div class="b-input"></div>
<span class="b-input"></span>
</label>
<label class="b-contain storage-type" for="storage-type-sync"><span data-i18n-content="labelStorageTypeSync">Sync</span>
<input id="storage-type-sync" data-option="storageType" name="storage-type" type="radio" value="sync">
<div class="b-input"></div>
<span class="b-input"></span>
</label>
</section>
<section class="option">
</div>
<div class="option">
<div class="title-option without-checkbox" data-i18n-content="headerImportExport">Import/Export</div>
<div class="import-export">
<input type="button" id="import-data" class="btns" value="Import Data" data-i18n-content="labelImportData"/>
<input type="button" id="export-data" class="btns" value="Export Data" data-i18n-content="labelExportData"/>
<input type="button" id="import-data" class="btns" value="Import Data" data-i18n-content="labelImportData">
<input type="button" id="export-data" class="btns" value="Export Data" data-i18n-content="labelExportData">
<div class="hidden">
<input id="import-file-picker" type="file" accept="text/plain">
</div>
</div>
</section>
</div>
</div>
</div>
<div id="info-tab" class="tab-content">
<div class="option-group">
<section class="option info">
<div class="option info">
<div>
<input type="button" id="cdn" class="btns"/>
<input type="button" id="framework" class="btns"/>
<input type="button" id="cdn" class="btns" value="cdn">
<input type="button" id="framework" class="btns" value="framework">
</div>
<ul id="unsupported-frameworks">
<li>Font Awesome are not supported by your browser</li>
<li>Google Material Icons are not supported by your browser</li>
</ul>
<textarea rows="12" cols="15" id="generated-list" readonly></textarea>
</section>
</div>
</div>
<div class="option-group">
<section class="option">
<div class="option">
<ul class="option-links">
<li><a id="link-welcome-page" href="../welcome/welcome.html" class="no-icon">Welcome page (In-App)</a></li>
<li><a id="link-changelog" href="../updates/updates.html" class="no-icon">Changelog (In-App)</a></li>
<li><a id="link-donate" href="../donate/donate.html" class="no-icon">Donate (In-App)</a></li>
<li><a id="link-faq" href="../help/help.html" class="no-icon">FAQ (In-App)</a></li>
<li><a id="link-statistic" href="../statistics/statistics.html" class="no-icon"><span data-i18n-content="internalStatisticsTitle">Statistics</span> <span>(In-App)</span></a></li>
<li><a id="link-logging" href="../logging/logging.html" class="no-icon">Logs (In-App)</span></a></li><br>
<li><a id="link-logging" href="../logging/logging.html" class="no-icon">Logs <span>(In-App)</span></a></li>
</ul>
<ul class="option-links">
<li><a id="link-codeberg" href="https://codeberg.org/nobody/LocalCDN" target="_blank" rel="nofollow noopener noreferrer">Source (www.codeberg.org)</a></li>
<li><a id="link-website" href="https://www.localcdn.org" target="_blank" rel="nofollow noopener noreferrer">Website (www.localcdn.org)</a></li>
<li><a id="link-website-test" href="https://www.localcdn.org/test" target="_blank" rel="nofollow noopener noreferrer">Testing Utility (www.localcdn.org/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>
<li><a id="link-translate" href="https://www.localcdn.org/thanks" target="_blank" rel="nofollow noopener noreferrer">Credits (www.localcdn.org)</a></li>
<li><a id="link-thanks" href="https://www.localcdn.org/thanks" target="_blank" rel="nofollow noopener noreferrer">Credits (www.localcdn.org)</a></li>
</ul>
</section>
</div>
</div>
</div>
<section class="notice notice-default hidden" id="notice-locale">
<div class="notice notice-default hidden" id="notice-locale">
<div class="notice-body" dir="ltr">
<div class="notice-message">
Your preferred language is not yet fully supported. Please help out by translating this add-on on Weblate.
@ -417,7 +418,7 @@
Translate
</a>
</div>
</section>
</div>
<p class="footer">LocalCDN v<span id="label-version"></span></p>
</body>
</html>

View File

@ -3,7 +3,7 @@
<head>
<title>Popup | LocalCDN</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="popup.css">
<link rel="stylesheet" type="text/css" href="toggle.css">
<link rel="stylesheet" type="text/css" href="../base.css">
@ -16,7 +16,7 @@
<script src="popup.js"></script>
<header>
<div class="heading">
<img class="icon-logo" src="../../icons/icon.svg" alt="Extension Icon">
<img class="icon-logo" src="../../icons/icon.svg" alt="">
<span id="name-label"></span> <sup id="version-label" class="label-version"></sup>
</div>
<div id="donate-button">
@ -24,19 +24,15 @@
<div id="donate-button-svg" class="button-svg" data-link="donate"></div>
</div>
</header>
<section class="content">
<div class="content">
<div id="website-context" class="panel hidden">
<div class="subpanel">
<div id="protection-toggle">
<label class='toggle' for='protection-toggle-switch'>
<input type='checkbox' name='protection-toggle-switch' id='protection-toggle-switch' class="toggle__input">
<span class="toggle__display" hidden>
<svg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="toggle__icon toggle__icon--checkmark">
<path d='M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z' fill='currentcolor' stroke='currentcolor' />
</svg>
<svg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="toggle__icon toggle__icon--cross">
<path d='M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z' fill='currentcolor' />
</svg>
<img class="toggle__img" src="../../icons/popup_check.svg" alt="">
<img class="toggle__img" src="../../icons/popup_uncheck.svg" alt="">
</span>
</label>
</div>
@ -49,12 +45,8 @@
<label class='toggle' for='manipulateDOM-toggle-switch'>
<input type='checkbox' name='manipulateDOM-toggle-switch' id='manipulateDOM-toggle-switch' class="toggle__input">
<span class="toggle__display" hidden>
<svg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="toggle__icon toggle__icon--checkmark">
<path d='M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z' fill='currentcolor' stroke='currentcolor' />
</svg>
<svg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="toggle__icon toggle__icon--cross">
<path d='M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z' fill='currentcolor' />
</svg>
<img class="toggle__img" src="../../icons/popup_check.svg" alt="">
<img class="toggle__img" src="../../icons/popup_uncheck.svg" alt="">
</span>
</label>
</div>
@ -67,12 +59,8 @@
<label class='toggle' for='google-fonts-toggle-switch'>
<input type='checkbox' name='google-fonts-toggle-switch' id='google-fonts-toggle-switch' class="toggle__input">
<span class="toggle__display" hidden>
<svg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="toggle__icon toggle__icon--checkmark">
<path d='M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z' fill='currentcolor' stroke='currentcolor' />
</svg>
<svg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden="true" focusable="false" class="toggle__icon toggle__icon--cross">
<path d='M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z' fill='currentcolor' />
</svg>
<img class="toggle__img" src="../../icons/popup_check.svg" alt="">
<img class="toggle__img" src="../../icons/popup_uncheck.svg" alt="">
</span>
</label>
</div>
@ -85,7 +73,7 @@
<div id="injection-counter" class="counter">0</div>
<div class="description" data-i18n-content="amountInjectedDescription">Amount of local Content Delivery Network resource injections since installation.</div>
</div>
</section>
</div>
<footer>
<div id="testing-utility">
<a id="testing-utility-link" class="link-text" data-i18n-content="websiteBroken" data-link="testing-utility">Website broken?</a>

View File

@ -123,6 +123,10 @@ button.toggle {
color: #f0f0f0;
}
.toggle__img {
width: 12px;
}
*,
::before,
::after {

View File

@ -16,7 +16,7 @@
<script src="updates.js"></script>
</head>
<body>
<img src="../images/logo.svg" alt="LocalCDN" class="logo"/>
<img src="../images/logo.svg" alt="" class="logo">
<div class="container">
<h1>Release notes</h1>
<div class="notice">
@ -35,33 +35,33 @@
</div>
<div class="ruleset-generator">
<label class="b-contain" for="generate-ublock-rules">uBlock
<input id="generate-ublock-rules" name="rule-sets" data-ruleset="uBlock" type="radio" value="uBlock" autocomplete="off">
<div class="b-input"></div>
<input id="generate-ublock-rules" name="rule-sets" data-ruleset="uBlock" type="radio" value="uBlock">
<span class="b-input"></span>
</label>
</div>
<div class="ruleset-generator">
<label class="b-contain" for="generate-umatrix-rules">uMatrix
<input id="generate-umatrix-rules" name="rule-sets" data-ruleset="uMatrix" type="radio" value="uMatrix" autocomplete="off">
<div class="b-input"></div>
<input id="generate-umatrix-rules" name="rule-sets" data-ruleset="uMatrix" type="radio" value="uMatrix">
<span class="b-input"></span>
</label>
</div>
<div class="ruleset-generator">
<label class="b-contain" for="generate-adguard-rules">AdGuard
<input id="generate-adguard-rules" name="rule-sets" data-ruleset="AdGuard" type="radio" value="AdGuard" autocomplete="off">
<div class="b-input"></div>
<input id="generate-adguard-rules" name="rule-sets" data-ruleset="AdGuard" type="radio" value="AdGuard">
<span class="b-input"></span>
</label>
</div>
<div class="ruleset-generator">
<label class="b-contain" for="generate-noscript-rules">NoScript
<input id="generate-noscript-rules" name="rule-sets" data-ruleset="NoScript" type="radio" value="NoScript" autocomplete="off">
<div class="b-input"></div>
<input id="generate-noscript-rules" name="rule-sets" data-ruleset="NoScript" type="radio" value="NoScript">
<span class="b-input"></span>
</label>
</div>
<div>
<textarea rows="12" cols="15" id="generated-rules" readonly></textarea>
<input id="button-copy-rule-set" type="button" value="Copy">
</div>
<hr/>
<hr>
</div>
<div id="history"><span id="history-indicator">+</span> Previous Versions</div>
<div id="history-release-notes">
@ -1336,7 +1336,6 @@
<li>Updated: instantsearch.js v4.16.1 -> v4.18.0 (<a href="https://codeberg.org/nobody/LocalCDN/issues/330">#330</a>)</li>
<li>Updated: lazysizes v5.3.0 -> v5.3.1 (<a href="https://codeberg.org/nobody/LocalCDN/issues/331">#331</a>)</li>
</ul>
</p>
<p class='release-date'>2021-03-15 (v2.6.3)</p>
<ul>
<li>Fixed: Check status code in HTML filter (<a href="https://codeberg.org/nobody/LocalCDN/issues/277">#277</a>)</li>
@ -1385,8 +1384,6 @@
</ul>
</li>
</ul>
</p>
<p class='release-date'>2021-02-20 (v2.6.2)</p>
<ul>
<li>Rejected by Mozilla</li>

View File

@ -13,7 +13,7 @@
<script src="welcome.js"></script>
</head>
<body>
<img src="../images/logo.svg" alt="LocalCDN" class="logo"/>
<img src="../images/logo.svg" alt="" class="logo">
<h1>Hello</h1>
<div class="notice">
<h2>What is LocalCDN?</h2>