PrivacyIndex/privacyindex.github.io
1
0
Fork 0
mirror of https://github.com/PrivacyIndex/privacyindex.github.io.git synced 2026-01-13 16:18:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Cloudy glass cards & subtle UI polish

Browse Source
This commit is contained in:
multipleof4
2025-11-09 07:03:28 -08:00
parent 10feb53314
commit e7ec3b28a3
1 changed files with 126 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
index.html
View File

@@ -72,18 +72,19 @@
.section{ .section{
margin-bottom:2.6rem; margin-bottom:2.6rem;
padding:1.3rem 1.4rem 1.1rem; padding:1.3rem 1.4rem 1.1rem;
border-radius:14px; border-radius:18px;
background:#ffffffee; background:#ffffffee;
box-shadow:0 8px 26px #00000017; box-shadow:0 8px 26px #00000017;
backdrop-filter:blur(8px) backdrop-filter:blur(10px)
} }
.section h2{ .section h2{
font-size:1.1rem; font-size:1.05rem;
font-weight:700; font-weight:700;
letter-spacing:.06em; letter-spacing:.08em;
text-transform:uppercase; text-transform:uppercase;
color:#0c2334; color:#0c2334;
margin-bottom:.8rem margin-bottom:.9rem;
opacity:.96
} }
.tool-list{ .tool-list{
@@ -96,47 +97,57 @@
display:flex; display:flex;
align-items:center; align-items:center;
gap:.9rem; gap:.9rem;
padding:.75rem .9rem; padding:.85rem 1rem;
border-radius:12px; border-radius:16px;
background:#0f2234; background:radial-gradient(circle at 0 0,#ffffffee,transparent)
color:#f5f7fb; ,#ffffffcc;
box-shadow:0 4px 14px #0000001a;
backdrop-filter:blur(14px);
border:1px solid #ffffffaa;
text-decoration:none; text-decoration:none;
box-shadow:0 4px 16px #00000033; color:#102331;
transition:transform .14s ease,box-shadow .14s ease,background .14s ease transition:
transform .16s ease,
box-shadow .16s ease,
background .16s ease,
border-color .16s ease
} }
.tool-card:hover, .tool-card:hover,
.tool-card:focus-visible{ .tool-card:focus-visible{
background:#152c43;
transform:translateY(-2px); transform:translateY(-2px);
box-shadow:0 7px 22px #00000040; box-shadow:0 9px 26px #0000002b;
background:radial-gradient(circle at 0 0,#ffffff,transparent)
,#ffffffdd;
border-color:#c0e4ff;
outline:none outline:none
} }
.tool-icon{ .tool-icon{
flex:0 0 44px; flex:0 0 44px;
height:44px; height:44px;
border-radius:50%; border-radius:14px;
background:radial-gradient(circle at 30% 20%,#ffffffee,transparent), background:
linear-gradient(145deg,#4fa65a,#2c6fb3); radial-gradient(circle at 25% 15%,#ffffffee,transparent),
linear-gradient(145deg,#f4f9ff,#d7ecff);
display:flex; display:flex;
align-items:center; align-items:center;
justify-content:center; justify-content:center;
font-size:20px; font-size:22px;
color:#0f2234; color:#4a7bb6;
box-shadow:0 2px 6px #00000055 box-shadow:0 3px 8px #00000026
} }
.tool-content{ .tool-content{
display:flex; display:flex;
flex-direction:column; flex-direction:column;
gap:.1rem; gap:.06rem;
min-width:0 min-width:0
} }
.tool-name{ .tool-name{
font-size:.98rem; font-size:.98rem;
font-weight:600; font-weight:600;
color:#e8f3ff; color:#0f2234;
text-decoration:underline; text-decoration:underline;
text-underline-offset:2px; text-underline-offset:2px;
white-space:nowrap; white-space:nowrap;
@@ -146,7 +157,19 @@
.tool-label{ .tool-label{
font-size:.78rem; font-size:.78rem;
opacity:.82 color:#4c6b85;
display:flex;
flex-wrap:wrap;
gap:.4rem;
align-items:center
}
.tool-tag{
padding:.05rem .45rem;
border-radius:999px;
background:#e5f3ff;
font-size:.7rem;
color:#2f6fa1
} }
.warn{ .warn{
@@ -160,14 +183,15 @@
@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} .section{margin-bottom:2.1rem;padding:1.1rem 1rem .9rem}
.section h2{font-size:1.0rem} .section h2{font-size:.96rem}
.tool-card{ .tool-card{
padding:.7rem .8rem; padding:.78rem .9rem;
gap:.75rem gap:.75rem
} }
.tool-icon{ .tool-icon{
flex-basis:40px; flex-basis:40px;
height:40px height:40px;
font-size:20px
} }
.tool-name{font-size:.94rem} .tool-name{font-size:.94rem}
.tool-label{font-size:.74rem} .tool-label{font-size:.74rem}
@@ -343,14 +367,20 @@
<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">Homepage</div> <div class="tool-label">
Official site
<span class="tool-tag">VPN</span>
</div>
</div> </div>
</a> </a>
<a class="tool-card" href="https://protonvpn.com" target="_blank" rel="noopener"> <a class="tool-card" href="https://protonvpn.com" 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 VPN</div> <div class="tool-name">Proton VPN</div>
<div class="tool-label">Homepage</div> <div class="tool-label">
Official site
<span class="tool-tag">VPN</span>
</div>
</div> </div>
</a> </a>
</div> </div>
@@ -363,14 +393,20 @@
<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">Homepage</div> <div class="tool-label">
Official site
<span class="tool-tag">Browser</span>
</div>
</div> </div>
</a> </a>
<a class="tool-card" href="https://www.torproject.org/download/" target="_blank" rel="noopener"> <a class="tool-card" href="https://www.torproject.org/download/" 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">Tor Browser</div> <div class="tool-name">Tor Browser</div>
<div class="tool-label">Homepage</div> <div class="tool-label">
Official site
<span class="tool-tag">Browser</span>
</div>
</div> </div>
</a> </a>
</div> </div>
@@ -383,21 +419,30 @@
<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">Homepage</div> <div class="tool-label">
Official site
<span class="tool-tag">OS</span>
</div>
</div> </div>
</a> </a>
<a class="tool-card" href="https://tails.net" target="_blank" rel="noopener"> <a class="tool-card" href="https://tails.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">Tails</div> <div class="tool-name">Tails</div>
<div class="tool-label">Homepage</div> <div class="tool-label">
Official site
<span class="tool-tag">OS</span>
</div>
</div> </div>
</a> </a>
<a class="tool-card" href="https://getfedora.org" target="_blank" rel="noopener"> <a class="tool-card" href="https://getfedora.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">Fedora</div> <div class="tool-name">Fedora</div>
<div class="tool-label">Homepage</div> <div class="tool-label">
Official site
<span class="tool-tag">OS</span>
</div>
</div> </div>
</a> </a>
</div> </div>
@@ -410,35 +455,50 @@
<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">Homepage</div> <div class="tool-label">
Official site
<span class="tool-tag">Password</span>
</div>
</div> </div>
</a> </a>
<a class="tool-card" href="https://www.keepassdx.com" target="_blank" rel="noopener"> <a class="tool-card" href="https://www.keepassdx.com" 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">KeePassDX</div> <div class="tool-name">KeePassDX</div>
<div class="tool-label">Homepage</div> <div class="tool-label">
Official site
<span class="tool-tag">Password</span>
</div>
</div> </div>
</a> </a>
<a class="tool-card" href="https://www.mozilla.org/firefox/features/password-manager/" target="_blank" rel="noopener"> <a class="tool-card" href="https://www.mozilla.org/firefox/features/password-manager/" 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 Password Manager</div> <div class="tool-name">Firefox Password Manager</div>
<div class="tool-label">Homepage</div> <div class="tool-label">
Official site
<span class="tool-tag">Password</span>
</div>
</div> </div>
</a> </a>
<a class="tool-card" href="https://proton.me/pass" target="_blank" rel="noopener"> <a class="tool-card" href="https://proton.me/pass" 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 Pass</div> <div class="tool-name">Proton Pass</div>
<div class="tool-label">Homepage</div> <div class="tool-label">
Official site
<span class="tool-tag">Password</span>
</div>
</div> </div>
</a> </a>
<a class="tool-card" href="https://proton.me/authenticator" target="_blank" rel="noopener"> <a class="tool-card" href="https://proton.me/authenticator" 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 Auth</div> <div class="tool-name">Proton Auth</div>
<div class="tool-label">Homepage</div> <div class="tool-label">
Official site
<span class="tool-tag">2FA</span>
</div>
</div> </div>
</a> </a>
</div> </div>
@@ -451,7 +511,10 @@
<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">Homepage</div> <div class="tool-label">
Official site
<span class="tool-tag">Email</span>
</div>
</div> </div>
</a> </a>
</div> </div>
@@ -464,7 +527,10 @@
<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">Homepage</div> <div class="tool-label">
Official site
<span class="tool-tag">Storage</span>
</div>
</div> </div>
</a> </a>
</div> </div>
@@ -477,14 +543,20 @@
<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">Homepage</div> <div class="tool-label">
Official site
<span class="tool-tag">Primary</span>
</div>
</div> </div>
</a> </a>
<a class="tool-card" href="https://bitcoin.org" target="_blank" rel="noopener"> <a class="tool-card" href="https://bitcoin.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">Bitcoin</div> <div class="tool-name">Bitcoin</div>
<div class="tool-label">Homepage</div> <div class="tool-label">
Official site
<span class="tool-tag">Secondary</span>
</div>
</div> </div>
</a> </a>
</div> </div>
@@ -501,7 +573,10 @@
<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">Homepage</div> <div class="tool-label">
Official site
<span class="tool-tag">Messaging</span>
</div>
</div> </div>
</a> </a>
</div> </div>
@@ -521,7 +596,10 @@
<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">Homepage</div> <div class="tool-label">
Official site
<span class="tool-tag">Calendar</span>
</div>
</div> </div>
</a> </a>
</div> </div>
@@ -534,7 +612,10 @@
<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">Homepage</div> <div class="tool-label">
Official site
<span class="tool-tag">Hosting</span>
</div>
</div> </div>
</a> </a>
</div> </div>