mirror of
https://github.com/PrivacyIndex/privacyindex.github.io.git
synced 2026-01-13 16:18:07 +00:00
Refactor: Use single glass card per tool, no category box
This commit is contained in:
487
index.html
487
index.html
@@ -69,28 +69,23 @@
|
|||||||
color:#102331
|
color:#102331
|
||||||
}
|
}
|
||||||
|
|
||||||
.section{
|
.category-label{
|
||||||
margin-bottom:2.6rem;
|
font-size:.82rem;
|
||||||
padding:1.3rem 1.4rem 1.1rem;
|
font-weight:600;
|
||||||
border-radius:18px;
|
letter-spacing:.16em;
|
||||||
background:#ffffffee;
|
|
||||||
box-shadow:0 8px 26px #00000017;
|
|
||||||
backdrop-filter:blur(10px)
|
|
||||||
}
|
|
||||||
.section h2{
|
|
||||||
font-size:1.05rem;
|
|
||||||
font-weight:700;
|
|
||||||
letter-spacing:.08em;
|
|
||||||
text-transform:uppercase;
|
text-transform:uppercase;
|
||||||
color:#0c2334;
|
color:#3b566d;
|
||||||
margin-bottom:.9rem;
|
margin:1.7rem .1rem .55rem;
|
||||||
opacity:.96
|
opacity:.9
|
||||||
|
}
|
||||||
|
.category-label:first-of-type{
|
||||||
|
margin-top:0
|
||||||
}
|
}
|
||||||
|
|
||||||
.tool-list{
|
.tool-list{
|
||||||
display:flex;
|
display:flex;
|
||||||
flex-direction:column;
|
flex-direction:column;
|
||||||
gap:.85rem
|
gap:.75rem
|
||||||
}
|
}
|
||||||
|
|
||||||
.tool-card{
|
.tool-card{
|
||||||
@@ -99,8 +94,8 @@
|
|||||||
gap:.9rem;
|
gap:.9rem;
|
||||||
padding:.85rem 1rem;
|
padding:.85rem 1rem;
|
||||||
border-radius:16px;
|
border-radius:16px;
|
||||||
background:radial-gradient(circle at 0 0,#ffffffee,transparent)
|
background:radial-gradient(circle at 0 0,#ffffffee,transparent),
|
||||||
,#ffffffcc;
|
#ffffffcc;
|
||||||
box-shadow:0 4px 14px #0000001a;
|
box-shadow:0 4px 14px #0000001a;
|
||||||
backdrop-filter:blur(14px);
|
backdrop-filter:blur(14px);
|
||||||
border:1px solid #ffffffaa;
|
border:1px solid #ffffffaa;
|
||||||
@@ -116,8 +111,8 @@
|
|||||||
.tool-card:focus-visible{
|
.tool-card:focus-visible{
|
||||||
transform:translateY(-2px);
|
transform:translateY(-2px);
|
||||||
box-shadow:0 9px 26px #0000002b;
|
box-shadow:0 9px 26px #0000002b;
|
||||||
background:radial-gradient(circle at 0 0,#ffffff,transparent)
|
background:radial-gradient(circle at 0 0,#ffffff,transparent),
|
||||||
,#ffffffdd;
|
#ffffffdd;
|
||||||
border-color:#c0e4ff;
|
border-color:#c0e4ff;
|
||||||
outline:none
|
outline:none
|
||||||
}
|
}
|
||||||
@@ -174,16 +169,20 @@
|
|||||||
|
|
||||||
.warn{
|
.warn{
|
||||||
font-weight:700;
|
font-weight:700;
|
||||||
color:#b00020
|
color:#b00020;
|
||||||
|
margin:.8rem .15rem 0
|
||||||
}
|
}
|
||||||
.muted{
|
.muted{
|
||||||
opacity:.76
|
opacity:.76;
|
||||||
|
margin:.15rem .15rem 0
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width:640px){
|
@media(max-width:640px){
|
||||||
main{padding:100vh 5vw 3.6rem}
|
main{padding:100vh 5vw 3.6rem}
|
||||||
.section{margin-bottom:2.1rem;padding:1.1rem 1rem .9rem}
|
.category-label{
|
||||||
.section h2{font-size:.96rem}
|
font-size:.76rem;
|
||||||
|
margin:1.4rem .05rem .45rem
|
||||||
|
}
|
||||||
.tool-card{
|
.tool-card{
|
||||||
padding:.78rem .9rem;
|
padding:.78rem .9rem;
|
||||||
gap:.75rem
|
gap:.75rem
|
||||||
@@ -360,266 +359,244 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<section class="section">
|
<div class="category-label">VPN</div>
|
||||||
<h2>VPN</h2>
|
<div class="tool-list">
|
||||||
<div class="tool-list">
|
<a class="tool-card" href="https://mullvad.net" target="_blank" rel="noopener">
|
||||||
<a class="tool-card" href="https://mullvad.net" target="_blank" rel="noopener">
|
<div class="tool-icon">☁️</div>
|
||||||
<div class="tool-icon">☁️</div>
|
<div class="tool-content">
|
||||||
<div class="tool-content">
|
<div class="tool-name">Mullvad</div>
|
||||||
<div class="tool-name">Mullvad</div>
|
<div class="tool-label">
|
||||||
<div class="tool-label">
|
Official site
|
||||||
Official site
|
<span class="tool-tag">VPN</span>
|
||||||
<span class="tool-tag">VPN</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
<a class="tool-card" href="https://protonvpn.com" target="_blank" rel="noopener">
|
</a>
|
||||||
<div class="tool-icon">☁️</div>
|
<a class="tool-card" href="https://protonvpn.com" target="_blank" rel="noopener">
|
||||||
<div class="tool-content">
|
<div class="tool-icon">☁️</div>
|
||||||
<div class="tool-name">Proton VPN</div>
|
<div class="tool-content">
|
||||||
<div class="tool-label">
|
<div class="tool-name">Proton VPN</div>
|
||||||
Official site
|
<div class="tool-label">
|
||||||
<span class="tool-tag">VPN</span>
|
Official site
|
||||||
</div>
|
<span class="tool-tag">VPN</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
</section>
|
</div>
|
||||||
|
|
||||||
<section class="section">
|
<div class="category-label">Browser</div>
|
||||||
<h2>Browser</h2>
|
<div class="tool-list">
|
||||||
<div class="tool-list">
|
<a class="tool-card" href="https://www.mozilla.org/firefox/new/" target="_blank" rel="noopener">
|
||||||
<a class="tool-card" href="https://www.mozilla.org/firefox/new/" target="_blank" rel="noopener">
|
<div class="tool-icon">🌐</div>
|
||||||
<div class="tool-icon">🌐</div>
|
<div class="tool-content">
|
||||||
<div class="tool-content">
|
<div class="tool-name">Firefox (Hardened)</div>
|
||||||
<div class="tool-name">Firefox (Hardened)</div>
|
<div class="tool-label">
|
||||||
<div class="tool-label">
|
Official site
|
||||||
Official site
|
<span class="tool-tag">Browser</span>
|
||||||
<span class="tool-tag">Browser</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
<a class="tool-card" href="https://www.torproject.org/download/" target="_blank" rel="noopener">
|
</a>
|
||||||
<div class="tool-icon">🧅</div>
|
<a class="tool-card" href="https://www.torproject.org/download/" target="_blank" rel="noopener">
|
||||||
<div class="tool-content">
|
<div class="tool-icon">🧅</div>
|
||||||
<div class="tool-name">Tor Browser</div>
|
<div class="tool-content">
|
||||||
<div class="tool-label">
|
<div class="tool-name">Tor Browser</div>
|
||||||
Official site
|
<div class="tool-label">
|
||||||
<span class="tool-tag">Browser</span>
|
Official site
|
||||||
</div>
|
<span class="tool-tag">Browser</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
</section>
|
</div>
|
||||||
|
|
||||||
<section class="section">
|
<div class="category-label">Operating Systems</div>
|
||||||
<h2>Operating Systems</h2>
|
<div class="tool-list">
|
||||||
<div class="tool-list">
|
<a class="tool-card" href="https://www.qubes-os.org" target="_blank" rel="noopener">
|
||||||
<a class="tool-card" href="https://www.qubes-os.org" target="_blank" rel="noopener">
|
<div class="tool-icon">💻</div>
|
||||||
<div class="tool-icon">💻</div>
|
<div class="tool-content">
|
||||||
<div class="tool-content">
|
<div class="tool-name">Qubes OS</div>
|
||||||
<div class="tool-name">Qubes OS</div>
|
<div class="tool-label">
|
||||||
<div class="tool-label">
|
Official site
|
||||||
Official site
|
<span class="tool-tag">OS</span>
|
||||||
<span class="tool-tag">OS</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
<a class="tool-card" href="https://tails.net" target="_blank" rel="noopener">
|
</a>
|
||||||
<div class="tool-icon">💻</div>
|
<a class="tool-card" href="https://tails.net" target="_blank" rel="noopener">
|
||||||
<div class="tool-content">
|
<div class="tool-icon">💻</div>
|
||||||
<div class="tool-name">Tails</div>
|
<div class="tool-content">
|
||||||
<div class="tool-label">
|
<div class="tool-name">Tails</div>
|
||||||
Official site
|
<div class="tool-label">
|
||||||
<span class="tool-tag">OS</span>
|
Official site
|
||||||
</div>
|
<span class="tool-tag">OS</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
<a class="tool-card" href="https://getfedora.org" target="_blank" rel="noopener">
|
</a>
|
||||||
<div class="tool-icon">💻</div>
|
<a class="tool-card" href="https://getfedora.org" target="_blank" rel="noopener">
|
||||||
<div class="tool-content">
|
<div class="tool-icon">💻</div>
|
||||||
<div class="tool-name">Fedora</div>
|
<div class="tool-content">
|
||||||
<div class="tool-label">
|
<div class="tool-name">Fedora</div>
|
||||||
Official site
|
<div class="tool-label">
|
||||||
<span class="tool-tag">OS</span>
|
Official site
|
||||||
</div>
|
<span class="tool-tag">OS</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
</section>
|
</div>
|
||||||
|
|
||||||
<section class="section">
|
<div class="category-label">Password Management + Auth</div>
|
||||||
<h2>Password Management + Auth</h2>
|
<div class="tool-list">
|
||||||
<div class="tool-list">
|
<a class="tool-card" href="https://keepassxc.org" target="_blank" rel="noopener">
|
||||||
<a class="tool-card" href="https://keepassxc.org" target="_blank" rel="noopener">
|
<div class="tool-icon">🔑</div>
|
||||||
<div class="tool-icon">🔑</div>
|
<div class="tool-content">
|
||||||
<div class="tool-content">
|
<div class="tool-name">KeePassXC</div>
|
||||||
<div class="tool-name">KeePassXC</div>
|
<div class="tool-label">
|
||||||
<div class="tool-label">
|
Official site
|
||||||
Official site
|
<span class="tool-tag">Password</span>
|
||||||
<span class="tool-tag">Password</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
<a class="tool-card" href="https://www.keepassdx.com" target="_blank" rel="noopener">
|
</a>
|
||||||
<div class="tool-icon">🔑</div>
|
<a class="tool-card" href="https://www.keepassdx.com" target="_blank" rel="noopener">
|
||||||
<div class="tool-content">
|
<div class="tool-icon">🔑</div>
|
||||||
<div class="tool-name">KeePassDX</div>
|
<div class="tool-content">
|
||||||
<div class="tool-label">
|
<div class="tool-name">KeePassDX</div>
|
||||||
Official site
|
<div class="tool-label">
|
||||||
<span class="tool-tag">Password</span>
|
Official site
|
||||||
</div>
|
<span class="tool-tag">Password</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
<a class="tool-card" href="https://www.mozilla.org/firefox/features/password-manager/" target="_blank" rel="noopener">
|
</a>
|
||||||
<div class="tool-icon">🔑</div>
|
<a class="tool-card" href="https://www.mozilla.org/firefox/features/password-manager/" target="_blank" rel="noopener">
|
||||||
<div class="tool-content">
|
<div class="tool-icon">🔑</div>
|
||||||
<div class="tool-name">Firefox Password Manager</div>
|
<div class="tool-content">
|
||||||
<div class="tool-label">
|
<div class="tool-name">Firefox Password Manager</div>
|
||||||
Official site
|
<div class="tool-label">
|
||||||
<span class="tool-tag">Password</span>
|
Official site
|
||||||
</div>
|
<span class="tool-tag">Password</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
<a class="tool-card" href="https://proton.me/pass" target="_blank" rel="noopener">
|
</a>
|
||||||
<div class="tool-icon">🔑</div>
|
<a class="tool-card" href="https://proton.me/pass" target="_blank" rel="noopener">
|
||||||
<div class="tool-content">
|
<div class="tool-icon">🔑</div>
|
||||||
<div class="tool-name">Proton Pass</div>
|
<div class="tool-content">
|
||||||
<div class="tool-label">
|
<div class="tool-name">Proton Pass</div>
|
||||||
Official site
|
<div class="tool-label">
|
||||||
<span class="tool-tag">Password</span>
|
Official site
|
||||||
</div>
|
<span class="tool-tag">Password</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
<a class="tool-card" href="https://proton.me/authenticator" target="_blank" rel="noopener">
|
</a>
|
||||||
<div class="tool-icon">🔑</div>
|
<a class="tool-card" href="https://proton.me/authenticator" target="_blank" rel="noopener">
|
||||||
<div class="tool-content">
|
<div class="tool-icon">🔑</div>
|
||||||
<div class="tool-name">Proton Auth</div>
|
<div class="tool-content">
|
||||||
<div class="tool-label">
|
<div class="tool-name">Proton Auth</div>
|
||||||
Official site
|
<div class="tool-label">
|
||||||
<span class="tool-tag">2FA</span>
|
Official site
|
||||||
</div>
|
<span class="tool-tag">2FA</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
</section>
|
</div>
|
||||||
|
|
||||||
<section class="section">
|
<div class="category-label">Email</div>
|
||||||
<h2>Email</h2>
|
<div class="tool-list">
|
||||||
<div class="tool-list">
|
<a class="tool-card" href="https://proton.me/mail" target="_blank" rel="noopener">
|
||||||
<a class="tool-card" href="https://proton.me/mail" target="_blank" rel="noopener">
|
<div class="tool-icon">✉️</div>
|
||||||
<div class="tool-icon">✉️</div>
|
<div class="tool-content">
|
||||||
<div class="tool-content">
|
<div class="tool-name">Proton Mail</div>
|
||||||
<div class="tool-name">Proton Mail</div>
|
<div class="tool-label">
|
||||||
<div class="tool-label">
|
Official site
|
||||||
Official site
|
<span class="tool-tag">Email</span>
|
||||||
<span class="tool-tag">Email</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
</section>
|
</div>
|
||||||
|
|
||||||
<section class="section">
|
<div class="category-label">File Storage</div>
|
||||||
<h2>File Storage</h2>
|
<div class="tool-list">
|
||||||
<div class="tool-list">
|
<a class="tool-card" href="https://proton.me/drive" target="_blank" rel="noopener">
|
||||||
<a class="tool-card" href="https://proton.me/drive" target="_blank" rel="noopener">
|
<div class="tool-icon">📁</div>
|
||||||
<div class="tool-icon">📁</div>
|
<div class="tool-content">
|
||||||
<div class="tool-content">
|
<div class="tool-name">Proton Drive</div>
|
||||||
<div class="tool-name">Proton Drive</div>
|
<div class="tool-label">
|
||||||
<div class="tool-label">
|
Official site
|
||||||
Official site
|
<span class="tool-tag">Storage</span>
|
||||||
<span class="tool-tag">Storage</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
</section>
|
</div>
|
||||||
|
|
||||||
<section class="section">
|
<div class="category-label">Cryptocurrency</div>
|
||||||
<h2>Cryptocurrency</h2>
|
<div class="tool-list">
|
||||||
<div class="tool-list">
|
<a class="tool-card" href="https://www.getmonero.org" target="_blank" rel="noopener">
|
||||||
<a class="tool-card" href="https://www.getmonero.org" target="_blank" rel="noopener">
|
<div class="tool-icon">🪙</div>
|
||||||
<div class="tool-icon">🪙</div>
|
<div class="tool-content">
|
||||||
<div class="tool-content">
|
<div class="tool-name">Monero</div>
|
||||||
<div class="tool-name">Monero</div>
|
<div class="tool-label">
|
||||||
<div class="tool-label">
|
Official site
|
||||||
Official site
|
<span class="tool-tag">Primary</span>
|
||||||
<span class="tool-tag">Primary</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
<a class="tool-card" href="https://bitcoin.org" target="_blank" rel="noopener">
|
</a>
|
||||||
<div class="tool-icon">🪙</div>
|
<a class="tool-card" href="https://bitcoin.org" target="_blank" rel="noopener">
|
||||||
<div class="tool-content">
|
<div class="tool-icon">🪙</div>
|
||||||
<div class="tool-name">Bitcoin</div>
|
<div class="tool-content">
|
||||||
<div class="tool-label">
|
<div class="tool-name">Bitcoin</div>
|
||||||
Official site
|
<div class="tool-label">
|
||||||
<span class="tool-tag">Secondary</span>
|
Official site
|
||||||
</div>
|
<span class="tool-tag">Secondary</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
<p class="warn" style="margin-top:.9rem">
|
</div>
|
||||||
Avoid Zcash: lots of influential people, including Edward Snowden,
|
<p class="warn">
|
||||||
sold out to advertise Zcash; trust and incentives are misaligned.
|
Avoid Zcash: lots of influential people, including Edward Snowden,
|
||||||
</p>
|
sold out to advertise Zcash; trust and incentives are misaligned.
|
||||||
</section>
|
</p>
|
||||||
|
|
||||||
<section class="section">
|
<div class="category-label">Instant Messaging</div>
|
||||||
<h2>Instant Messaging</h2>
|
<div class="tool-list">
|
||||||
<div class="tool-list">
|
<a class="tool-card" href="https://signal.org" target="_blank" rel="noopener">
|
||||||
<a class="tool-card" href="https://signal.org" target="_blank" rel="noopener">
|
<div class="tool-icon">💬</div>
|
||||||
<div class="tool-icon">💬</div>
|
<div class="tool-content">
|
||||||
<div class="tool-content">
|
<div class="tool-name">Signal</div>
|
||||||
<div class="tool-name">Signal</div>
|
<div class="tool-label">
|
||||||
<div class="tool-label">
|
Official site
|
||||||
Official site
|
<span class="tool-tag">Messaging</span>
|
||||||
<span class="tool-tag">Messaging</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
</section>
|
</div>
|
||||||
|
|
||||||
<section class="section">
|
<div class="category-label">Web Search</div>
|
||||||
<h2>Web Search</h2>
|
<p class="muted">
|
||||||
<p class="muted">
|
Nothing currently good enough to recommend without major caveats.
|
||||||
Nothing currently good enough to recommend without major caveats.
|
</p>
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section">
|
<div class="category-label">Calendar</div>
|
||||||
<h2>Calendar</h2>
|
<div class="tool-list">
|
||||||
<div class="tool-list">
|
<a class="tool-card" href="https://proton.me/calendar" target="_blank" rel="noopener">
|
||||||
<a class="tool-card" href="https://proton.me/calendar" target="_blank" rel="noopener">
|
<div class="tool-icon">📅</div>
|
||||||
<div class="tool-icon">📅</div>
|
<div class="tool-content">
|
||||||
<div class="tool-content">
|
<div class="tool-name">Proton Calendar</div>
|
||||||
<div class="tool-name">Proton Calendar</div>
|
<div class="tool-label">
|
||||||
<div class="tool-label">
|
Official site
|
||||||
Official site
|
<span class="tool-tag">Calendar</span>
|
||||||
<span class="tool-tag">Calendar</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
</section>
|
</div>
|
||||||
|
|
||||||
<section class="section">
|
<div class="category-label">Hosting</div>
|
||||||
<h2>Hosting</h2>
|
<div class="tool-list">
|
||||||
<div class="tool-list">
|
<a class="tool-card" href="https://ovobox.org" target="_blank" rel="noopener">
|
||||||
<a class="tool-card" href="https://ovobox.org" target="_blank" rel="noopener">
|
<div class="tool-icon">🌐</div>
|
||||||
<div class="tool-icon">🌐</div>
|
<div class="tool-content">
|
||||||
<div class="tool-content">
|
<div class="tool-name">ovobox.org</div>
|
||||||
<div class="tool-name">ovobox.org</div>
|
<div class="tool-label">
|
||||||
<div class="tool-label">
|
Official site
|
||||||
Official site
|
<span class="tool-tag">Hosting</span>
|
||||||
<span class="tool-tag">Hosting</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
</section>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
Reference in New Issue
Block a user