feat: added icons to page
This commit is contained in:
parent
927f13b623
commit
e06bdb38fe
6 changed files with 68 additions and 16 deletions
19
assets/android-icon.svg
Normal file
19
assets/android-icon.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-147 -70 294 345">
|
||||
<g fill="#a4c639">
|
||||
<use stroke-width="14.4" xlink:href="#b" stroke="#FFF"/>
|
||||
<use xlink:href="#a" transform="scale(-1,1)"/>
|
||||
<g id="a" stroke="#FFF" stroke-width="7.2">
|
||||
<rect rx="6.5" transform="rotate(29)" height="86" width="13" y="-86" x="14"/>
|
||||
<rect id="c" rx="24" height="133" width="48" y="41" x="-143"/>
|
||||
<use y="97" x="85" xlink:href="#c"/>
|
||||
</g>
|
||||
<g id="b">
|
||||
<ellipse cy="41" rx="91" ry="84"/>
|
||||
<rect rx="22" height="182" width="182" y="20" x="-91"/>
|
||||
</g>
|
||||
</g>
|
||||
<g stroke="#FFF" stroke-width="7.2" fill="#FFF">
|
||||
<path d="m-95 44.5h190"/><circle cx="-42" r="4"/><circle cx="42" r="4"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 728 B |
1
assets/chrome-icon.svg
Normal file
1
assets/chrome-icon.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" height="48" width="48"><defs><linearGradient id="a" x1="3.2173" y1="15" x2="44.7812" y2="15" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#d93025"/><stop offset="1" stop-color="#ea4335"/></linearGradient><linearGradient id="b" x1="20.7219" y1="47.6791" x2="41.5039" y2="11.6837" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fcc934"/><stop offset="1" stop-color="#fbbc04"/></linearGradient><linearGradient id="c" x1="26.5981" y1="46.5015" x2="5.8161" y2="10.506" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1e8e3e"/><stop offset="1" stop-color="#34a853"/></linearGradient></defs><circle cx="24" cy="23.9947" r="12" style="fill:#fff"/><path d="M3.2154,36A24,24,0,1,0,12,3.2154,24,24,0,0,0,3.2154,36ZM34.3923,18A12,12,0,1,1,18,13.6077,12,12,0,0,1,34.3923,18Z" style="fill:none"/><path d="M24,12H44.7812a23.9939,23.9939,0,0,0-41.5639.0029L13.6079,30l.0093-.0024A11.9852,11.9852,0,0,1,24,12Z" style="fill:url(#a)"/><circle cx="24" cy="24" r="9.5" style="fill:#1a73e8"/><path d="M34.3913,30.0029,24.0007,48A23.994,23.994,0,0,0,44.78,12.0031H23.9989l-.0025.0093A11.985,11.985,0,0,1,34.3913,30.0029Z" style="fill:url(#b)"/><path d="M13.6086,30.0031,3.218,12.006A23.994,23.994,0,0,0,24.0025,48L34.3931,30.0029l-.0067-.0068a11.9852,11.9852,0,0,1-20.7778.007Z" style="fill:url(#c)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
1
assets/edge-icon.svg
Normal file
1
assets/edge-icon.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><defs><radialGradient id="b" cx="161.8" cy="68.9" r="95.4" gradientTransform="matrix(1 0 0 -.95 0 248.8)" gradientUnits="userSpaceOnUse"><stop offset=".7" stop-opacity="0"/><stop offset=".9" stop-opacity=".5"/><stop offset="1"/></radialGradient><radialGradient id="d" cx="-340.3" cy="63" r="143.2" gradientTransform="matrix(.15 -.99 -.8 -.12 176.6 -125.4)" gradientUnits="userSpaceOnUse"><stop offset=".8" stop-opacity="0"/><stop offset=".9" stop-opacity=".5"/><stop offset="1"/></radialGradient><radialGradient id="e" cx="113.4" cy="570.2" r="202.4" gradientTransform="matrix(-.04 1 2.13 .08 -1179.5 -106.7)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#35c1f1"/><stop offset=".1" stop-color="#34c1ed"/><stop offset=".2" stop-color="#2fc2df"/><stop offset=".3" stop-color="#2bc3d2"/><stop offset=".7" stop-color="#36c752"/></radialGradient><radialGradient id="f" cx="376.5" cy="568" r="97.3" gradientTransform="matrix(.28 .96 .78 -.23 -303.8 -148.5)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#66eb6e"/><stop offset="1" stop-color="#66eb6e" stop-opacity="0"/></radialGradient><linearGradient id="a" x1="63.3" y1="84" x2="241.7" y2="84" gradientTransform="matrix(1 0 0 -1 0 266)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0c59a4"/><stop offset="1" stop-color="#114a8b"/></linearGradient><linearGradient id="c" x1="157.3" y1="161.4" x2="46" y2="40.1" gradientTransform="matrix(1 0 0 -1 0 266)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1b9de2"/><stop offset=".2" stop-color="#1595df"/><stop offset=".7" stop-color="#0680d7"/><stop offset="1" stop-color="#0078d4"/></linearGradient></defs><path d="M235.7 195.5a93.7 93.7 0 0 1-10.6 4.7 101.9 101.9 0 0 1-35.9 6.4c-47.3 0-88.5-32.5-88.5-74.3a31.5 31.5 0 0 1 16.4-27.3c-42.8 1.8-53.8 46.4-53.8 72.5 0 74 68.1 81.4 82.8 81.4 7.9 0 19.8-2.3 27-4.6l1.3-.4a128.3 128.3 0 0 0 66.6-52.8 4 4 0 0 0-5.3-5.6Z" transform="translate(-4.6 -5)" style="fill:url(#a)"/><path d="M235.7 195.5a93.7 93.7 0 0 1-10.6 4.7 101.9 101.9 0 0 1-35.9 6.4c-47.3 0-88.5-32.5-88.5-74.3a31.5 31.5 0 0 1 16.4-27.3c-42.8 1.8-53.8 46.4-53.8 72.5 0 74 68.1 81.4 82.8 81.4 7.9 0 19.8-2.3 27-4.6l1.3-.4a128.3 128.3 0 0 0 66.6-52.8 4 4 0 0 0-5.3-5.6Z" transform="translate(-4.6 -5)" style="isolation:isolate;opacity:.35;fill:url(#b)"/><path d="M110.3 246.3A79.2 79.2 0 0 1 87.6 225a80.7 80.7 0 0 1 29.5-120c3.2-1.5 8.5-4.1 15.6-4a32.4 32.4 0 0 1 25.7 13 31.9 31.9 0 0 1 6.3 18.7c0-.2 24.5-79.6-80-79.6-43.9 0-80 41.6-80 78.2a130.2 130.2 0 0 0 12.1 56 128 128 0 0 0 156.4 67 75.5 75.5 0 0 1-62.8-8Z" transform="translate(-4.6 -5)" style="fill:url(#c)"/><path d="M110.3 246.3A79.2 79.2 0 0 1 87.6 225a80.7 80.7 0 0 1 29.5-120c3.2-1.5 8.5-4.1 15.6-4a32.4 32.4 0 0 1 25.7 13 31.9 31.9 0 0 1 6.3 18.7c0-.2 24.5-79.6-80-79.6-43.9 0-80 41.6-80 78.2a130.2 130.2 0 0 0 12.1 56 128 128 0 0 0 156.4 67 75.5 75.5 0 0 1-62.8-8Z" transform="translate(-4.6 -5)" style="opacity:.41;fill:url(#d);isolation:isolate"/><path d="M157 153.8c-.9 1-3.4 2.5-3.4 5.6 0 2.6 1.7 5.2 4.8 7.3 14.3 10 41.4 8.6 41.5 8.6a59.6 59.6 0 0 0 30.3-8.3 61.4 61.4 0 0 0 30.4-52.9c.3-22.4-8-37.3-11.3-43.9C228 28.8 182.3 5 132.6 5a128 128 0 0 0-128 126.2c.5-36.5 36.8-66 80-66 3.5 0 23.5.3 42 10a72.6 72.6 0 0 1 30.9 29.3c6.1 10.6 7.2 24.1 7.2 29.5s-2.7 13.3-7.8 19.9Z" transform="translate(-4.6 -5)" style="fill:url(#e)"/><path d="M157 153.8c-.9 1-3.4 2.5-3.4 5.6 0 2.6 1.7 5.2 4.8 7.3 14.3 10 41.4 8.6 41.5 8.6a59.6 59.6 0 0 0 30.3-8.3 61.4 61.4 0 0 0 30.4-52.9c.3-22.4-8-37.3-11.3-43.9C228 28.8 182.3 5 132.6 5a128 128 0 0 0-128 126.2c.5-36.5 36.8-66 80-66 3.5 0 23.5.3 42 10a72.6 72.6 0 0 1 30.9 29.3c6.1 10.6 7.2 24.1 7.2 29.5s-2.7 13.3-7.8 19.9Z" transform="translate(-4.6 -5)" style="fill:url(#f)"/></svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
1
assets/firefox-icon.svg
Normal file
1
assets/firefox-icon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 KiB |
1
assets/link-icon.svg
Normal file
1
assets/link-icon.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>
|
||||
|
After Width: | Height: | Size: 310 B |
|
|
@ -551,6 +551,21 @@ The most basic low tech way to remove the trackers is to just delete them yourse
|
|||
margin-bottom: 0.75em;
|
||||
}
|
||||
|
||||
/* Extension/App card icon styling */
|
||||
.extension-icon,
|
||||
.app-icon {
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.extension-icon img,
|
||||
.app-icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Extension card styling */
|
||||
.extension-card {
|
||||
display: flex;
|
||||
|
|
@ -750,6 +765,7 @@ You can install browser extensions that automatically remove tracking parameters
|
|||
<div class="protect-section">
|
||||
<div class="browser-detected-firefox">
|
||||
<a href="https://addons.mozilla.org/en-US/firefox/addon/clearurls/" class="extension-card" target="_blank" rel="noopener">
|
||||
<div class="extension-icon"><img src="{{ 'firefox-icon.svg' | fileHash('assets') }}" alt="Firefox"></div>
|
||||
<div class="extension-info">
|
||||
<div class="extension-name">ClearURLs for Firefox<span class="extension-badge">Recommended for your browser</span></div>
|
||||
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
|
||||
|
|
@ -758,6 +774,7 @@ You can install browser extensions that automatically remove tracking parameters
|
|||
</div>
|
||||
<div class="browser-detected-chrome">
|
||||
<a href="https://chromewebstore.google.com/detail/clearurls/lckanjgmijmafbedllaakclkaicjfmnk" class="extension-card" target="_blank" rel="noopener">
|
||||
<div class="extension-icon"><img src="{{ 'chrome-icon.svg' | fileHash('assets') }}" alt="Chrome"></div>
|
||||
<div class="extension-info">
|
||||
<div class="extension-name">ClearURLs for Chrome<span class="extension-badge">Recommended for your browser</span></div>
|
||||
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
|
||||
|
|
@ -766,6 +783,7 @@ You can install browser extensions that automatically remove tracking parameters
|
|||
</div>
|
||||
<div class="browser-detected-edge">
|
||||
<a href="https://microsoftedge.microsoft.com/addons/detail/clearurls/mdkdmaickkfdekbjdoojfalpbkgaddei" class="extension-card" target="_blank" rel="noopener">
|
||||
<div class="extension-icon"><img src="{{ 'edge-icon.svg' | fileHash('assets') }}" alt="Edge"></div>
|
||||
<div class="extension-info">
|
||||
<div class="extension-name">ClearURLs for Edge<span class="extension-badge">Recommended for your browser</span></div>
|
||||
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
|
||||
|
|
@ -776,18 +794,21 @@ You can install browser extensions that automatically remove tracking parameters
|
|||
<details class="expandable">
|
||||
<summary>Show all browsers</summary>
|
||||
<a href="https://addons.mozilla.org/en-US/firefox/addon/clearurls/" class="extension-card browser-firefox" target="_blank" rel="noopener">
|
||||
<div class="extension-icon"><img src="{{ 'firefox-icon.svg' | fileHash('assets') }}" alt="Firefox"></div>
|
||||
<div class="extension-info">
|
||||
<div class="extension-name">ClearURLs for Firefox</div>
|
||||
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://chromewebstore.google.com/detail/clearurls/lckanjgmijmafbedllaakclkaicjfmnk" class="extension-card browser-chrome" target="_blank" rel="noopener">
|
||||
<div class="extension-icon"><img src="{{ 'chrome-icon.svg' | fileHash('assets') }}" alt="Chrome"></div>
|
||||
<div class="extension-info">
|
||||
<div class="extension-name">ClearURLs for Chrome</div>
|
||||
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://microsoftedge.microsoft.com/addons/detail/clearurls/mdkdmaickkfdekbjdoojfalpbkgaddei" class="extension-card browser-edge" target="_blank" rel="noopener">
|
||||
<div class="extension-icon"><img src="{{ 'edge-icon.svg' | fileHash('assets') }}" alt="Edge"></div>
|
||||
<div class="extension-info">
|
||||
<div class="extension-name">ClearURLs for Edge</div>
|
||||
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
|
||||
|
|
@ -797,18 +818,21 @@ You can install browser extensions that automatically remove tracking parameters
|
|||
</div>
|
||||
<div class="browser-list-fallback">
|
||||
<a href="https://addons.mozilla.org/en-US/firefox/addon/clearurls/" class="extension-card" target="_blank" rel="noopener">
|
||||
<div class="extension-icon"><img src="{{ 'firefox-icon.svg' | fileHash('assets') }}" alt="Firefox"></div>
|
||||
<div class="extension-info">
|
||||
<div class="extension-name">ClearURLs for Firefox</div>
|
||||
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://chromewebstore.google.com/detail/clearurls/lckanjgmijmafbedllaakclkaicjfmnk" class="extension-card" target="_blank" rel="noopener">
|
||||
<div class="extension-icon"><img src="{{ 'chrome-icon.svg' | fileHash('assets') }}" alt="Chrome"></div>
|
||||
<div class="extension-info">
|
||||
<div class="extension-name">ClearURLs for Chrome</div>
|
||||
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://microsoftedge.microsoft.com/addons/detail/clearurls/mdkdmaickkfdekbjdoojfalpbkgaddei" class="extension-card" target="_blank" rel="noopener">
|
||||
<div class="extension-icon"><img src="{{ 'edge-icon.svg' | fileHash('assets') }}" alt="Edge"></div>
|
||||
<div class="extension-info">
|
||||
<div class="extension-name">ClearURLs for Edge</div>
|
||||
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
|
||||
|
|
@ -819,21 +843,6 @@ You can install browser extensions that automatically remove tracking parameters
|
|||
|
||||
[Source Code](https://github.com/ClearURLs/Addon)
|
||||
|
||||
### Use websites with tools to do it for you
|
||||
|
||||
You can also use web tools that you can give a URL and it will clean it for you:
|
||||
|
||||
<div class="protect-section">
|
||||
<div class="platform-list-fallback">
|
||||
<a href="https://linkcleaner.app/" class="app-card" target="_blank" rel="noopener">
|
||||
<div class="app-info">
|
||||
<div class="app-name">LinkCleaner</div>
|
||||
<p class="app-desc">Paste any URL and get a clean version without tracking parameters. Works in your browser - no installation needed.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ### Desktop applications
|
||||
|
||||
Clipboard monitoring apps that automatically clean URLs when you copy them:
|
||||
|
|
@ -859,6 +868,7 @@ There are some mobile apps that can also help remove trackers from links:
|
|||
<div class="protect-section">
|
||||
<div class="platform-list-fallback">
|
||||
<a href="https://f-droid.org/packages/com.svenjacobs.app.leon/" class="app-card" target="_blank" rel="noopener">
|
||||
<div class="app-icon"><img src="{{ 'android-icon.svg' | fileHash('assets') }}" alt="Android"></div>
|
||||
<div class="app-info">
|
||||
<div class="app-name">Leon</div>
|
||||
<p class="app-desc">Android share target app that removes tracking parameters from URLs. Share any link to Leon before sharing elsewhere.</p>
|
||||
|
|
@ -871,21 +881,40 @@ There are some mobile apps that can also help remove trackers from links:
|
|||
</div>
|
||||
</div>
|
||||
|
||||
### Use websites with tools to do it for you
|
||||
|
||||
You can also use web tools that you can give a URL and it will clean it for you:
|
||||
|
||||
<div class="protect-section">
|
||||
<div class="platform-list-fallback">
|
||||
<a href="https://linkcleaner.app/" class="app-card" target="_blank" rel="noopener">
|
||||
<div class="app-icon"><img src="{{ 'link-icon.svg' | fileHash('assets') }}" alt="Web Tool"></div>
|
||||
<div class="app-info">
|
||||
<div class="app-name">LinkCleaner</div>
|
||||
<p class="app-desc">Paste any URL and get a clean version without tracking parameters. Works in your browser - no installation needed.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### URL unshortening and redirect following tools
|
||||
|
||||
<div class="protect-section">
|
||||
<div class="platform-list-fallback">
|
||||
<a href="https://unshorten.it/" class="app-card" target="_blank" rel="noopener">
|
||||
<div class="app-icon"><img src="{{ 'link-icon.svg' | fileHash('assets') }}" alt="Web Tool"></div>
|
||||
<div class="app-info">
|
||||
<div class="app-name">Unshorten.It!</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://wheregoes.com/" class="app-card" target="_blank" rel="noopener">
|
||||
<div class="app-icon"><img src="{{ 'link-icon.svg' | fileHash('assets') }}" alt="Web Tool"></div>
|
||||
<div class="app-info">
|
||||
<div class="app-name">WhereGoes</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://www.expandurl.net/" class="app-card" target="_blank" rel="noopener">
|
||||
<div class="app-icon"><img src="{{ 'link-icon.svg' | fileHash('assets') }}" alt="Web Tool"></div>
|
||||
<div class="app-info">
|
||||
<div class="app-name">ExpandURL</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue