mirror of
https://github.com/PrivacyIndex/privacyindex.github.io.git
synced 2026-01-13 16:18:07 +00:00
572 lines
18 KiB
HTML
572 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Privacy Index</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
html,body{
|
|
height:100%;
|
|
font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
|
|
background:#e3f4ff;
|
|
color:#123
|
|
}
|
|
body{overflow-x:hidden}
|
|
.scene-wrap{
|
|
position:fixed;
|
|
inset:0;
|
|
display:flex;
|
|
align-items:flex-end;
|
|
justify-content:center;
|
|
background:linear-gradient(to bottom,#bfe7ff 0%,#d8f1ff 35%,#f5fbff 100%);
|
|
overflow:hidden;
|
|
z-index:0;
|
|
pointer-events:none
|
|
}
|
|
.scene-sky{
|
|
position:absolute;
|
|
inset:0;
|
|
background:radial-gradient(circle at 20% 15%,#ffffffaa 0,transparent 40%);
|
|
pointer-events:none;
|
|
z-index:0
|
|
}
|
|
.scene-svg{
|
|
position:relative;
|
|
width:100%;
|
|
height:100%;
|
|
display:block;
|
|
z-index:1
|
|
}
|
|
@keyframes treeFloat{
|
|
0%{transform:translateY(0)}
|
|
50%{transform:translateY(-2px)}
|
|
100%{transform:translateY(0)}
|
|
}
|
|
@keyframes cloudDrift{
|
|
0%{transform:translateX(0)}
|
|
100%{transform:translateX(40px)}
|
|
}
|
|
.tree{
|
|
animation:treeFloat 4s ease-in-out infinite;
|
|
transform-origin:50% 100%
|
|
}
|
|
.tree:nth-child(odd){animation-duration:5.2s}
|
|
.cloud{animation:cloudDrift 26s linear infinite alternate}
|
|
.ground-label{
|
|
font-size:9px;
|
|
fill:#fdfdfd;
|
|
opacity:.82;
|
|
letter-spacing:.06em
|
|
}
|
|
|
|
main{
|
|
position:relative;
|
|
z-index:10;
|
|
max-width:960px;
|
|
margin:0 auto;
|
|
padding:100vh 6vw 5rem;
|
|
color:#102331
|
|
}
|
|
|
|
.section{
|
|
margin-bottom:2.6rem;
|
|
padding:1.3rem 1.4rem 1.1rem;
|
|
border-radius:14px;
|
|
background:#ffffffee;
|
|
box-shadow:0 8px 26px #00000017;
|
|
backdrop-filter:blur(8px)
|
|
}
|
|
.section h2{
|
|
font-size:1.1rem;
|
|
font-weight:700;
|
|
letter-spacing:.06em;
|
|
text-transform:uppercase;
|
|
color:#0c2334;
|
|
margin-bottom:.8rem
|
|
}
|
|
|
|
.tool-list{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:.85rem
|
|
}
|
|
|
|
.tool-card{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:.9rem;
|
|
padding:.75rem .9rem;
|
|
border-radius:12px;
|
|
background:#0f2234;
|
|
color:#f5f7fb;
|
|
text-decoration:none;
|
|
box-shadow:0 4px 16px #00000033;
|
|
transition:transform .14s ease,box-shadow .14s ease,background .14s ease
|
|
}
|
|
.tool-card:hover,
|
|
.tool-card:focus-visible{
|
|
background:#152c43;
|
|
transform:translateY(-2px);
|
|
box-shadow:0 7px 22px #00000040;
|
|
outline:none
|
|
}
|
|
|
|
.tool-icon{
|
|
flex:0 0 44px;
|
|
height:44px;
|
|
border-radius:50%;
|
|
background:radial-gradient(circle at 30% 20%,#ffffffee,transparent),
|
|
linear-gradient(145deg,#4fa65a,#2c6fb3);
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
font-size:20px;
|
|
color:#0f2234;
|
|
box-shadow:0 2px 6px #00000055
|
|
}
|
|
|
|
.tool-content{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:.1rem;
|
|
min-width:0
|
|
}
|
|
|
|
.tool-name{
|
|
font-size:.98rem;
|
|
font-weight:600;
|
|
color:#e8f3ff;
|
|
text-decoration:underline;
|
|
text-underline-offset:2px;
|
|
white-space:nowrap;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis
|
|
}
|
|
|
|
.tool-label{
|
|
font-size:.78rem;
|
|
opacity:.82
|
|
}
|
|
|
|
.warn{
|
|
font-weight:700;
|
|
color:#b00020
|
|
}
|
|
.muted{
|
|
opacity:.76
|
|
}
|
|
|
|
@media(max-width:640px){
|
|
main{padding:100vh 5vw 3.6rem}
|
|
.section{margin-bottom:2.1rem;padding:1.1rem 1rem .9rem}
|
|
.section h2{font-size:1.0rem}
|
|
.tool-card{
|
|
padding:.7rem .8rem;
|
|
gap:.75rem
|
|
}
|
|
.tool-icon{
|
|
flex-basis:40px;
|
|
height:40px
|
|
}
|
|
.tool-name{font-size:.94rem}
|
|
.tool-label{font-size:.74rem}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="scene-wrap">
|
|
<div class="scene-sky"></div>
|
|
<svg
|
|
class="scene-svg"
|
|
viewBox="0 0 1440 900"
|
|
preserveAspectRatio="xMidYMax slice"
|
|
aria-hidden="true"
|
|
>
|
|
<defs>
|
|
<linearGradient id="landGradient" x1="0" x2="0" y1="0" y2="1">
|
|
<stop offset="0%" stop-color="#86c97a" />
|
|
<stop offset="55%" stop-color="#4fa65a" />
|
|
<stop offset="100%" stop-color="#377b3e" />
|
|
</linearGradient>
|
|
<linearGradient id="dirtGradient" x1="0" x2="0" y1="0" y2="1">
|
|
<stop offset="0%" stop-color="#8b5a35" />
|
|
<stop offset="45%" stop-color="#6b4023" />
|
|
<stop offset="100%" stop-color="#3c2413" />
|
|
</linearGradient>
|
|
<linearGradient id="hillGradient" x1="0" x2="1" y1="0" y2="1">
|
|
<stop offset="0%" stop-color="#7ac384" />
|
|
<stop offset="100%" stop-color="#4a9054" />
|
|
</linearGradient>
|
|
<radialGradient id="treeCrown" cx="50%" cy="25%" r="65%">
|
|
<stop offset="0%" stop-color="#e5ffe5" />
|
|
<stop offset="35%" stop-color="#8fd19b" />
|
|
<stop offset="100%" stop-color="#357a42" />
|
|
</radialGradient>
|
|
<linearGradient id="treeTrunk" x1="0" x2="0" y1="0" y2="1">
|
|
<stop offset="0%" stop-color="#6b4226" />
|
|
<stop offset="100%" stop-color="#3d2616" />
|
|
</linearGradient>
|
|
<linearGradient id="cloudGrad" x1="0" x2="1" y1="0" y2="0">
|
|
<stop offset="0%" stop-color="#ffffffee" />
|
|
<stop offset="100%" stop-color="#f0f6ffdd" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<rect x="0" y="0" width="1440" height="900" fill="transparent" />
|
|
|
|
<g class="cloud" fill="url(#cloudGrad)" opacity="0.9">
|
|
<ellipse cx="230" cy="110" rx="60" ry="32" />
|
|
<ellipse cx="280" cy="100" rx="48" ry="26" />
|
|
<ellipse cx="320" cy="115" rx="54" ry="30" />
|
|
</g>
|
|
<g class="cloud" fill="url(#cloudGrad)" opacity="0.78">
|
|
<ellipse cx="1040" cy="160" rx="70" ry="34" />
|
|
<ellipse cx="990" cy="170" rx="40" ry="24" />
|
|
<ellipse cx="1105" cy="168" rx="46" ry="24" />
|
|
</g>
|
|
|
|
<g id="ground-group">
|
|
<path
|
|
id="hill"
|
|
d="M0,530
|
|
C240,480 420,470 720,500
|
|
C1040,530 1180,500 1440,470
|
|
L1440,660 L0,660 Z"
|
|
fill="url(#hillGradient)"
|
|
opacity="0.96"
|
|
/>
|
|
<path
|
|
id="land"
|
|
d="M0,560
|
|
C260,540 480,555 720,570
|
|
C1040,590 1200,600 1440,610
|
|
L1440,760 L0,760 Z"
|
|
fill="url(#landGradient)"
|
|
/>
|
|
<path
|
|
id="dirt"
|
|
d="M0,720
|
|
C220,700 430,715 720,730
|
|
C1040,750 1220,760 1440,755
|
|
L1440,900 L0,900 Z"
|
|
fill="url(#dirtGradient)"
|
|
/>
|
|
|
|
<g>
|
|
<circle cx="160" cy="540" r="7" fill="#ffffffaa" />
|
|
<circle cx="310" cy="520" r="6" fill="#ffffffaa" />
|
|
<circle cx="490" cy="535" r="5" fill="#ffffffaa" />
|
|
</g>
|
|
|
|
<g class="tree" transform="translate(190,520)">
|
|
<rect x="-5" y="0" width="10" height="42" fill="url(#treeTrunk)" />
|
|
<circle cx="0" cy="-6" r="24" fill="url(#treeCrown)" />
|
|
<circle cx="-16" cy="0" r="16" fill="url(#treeCrown)" />
|
|
<circle cx="16" cy="0" r="16" fill="url(#treeCrown)" />
|
|
</g>
|
|
|
|
<g class="tree" transform="translate(360,515)">
|
|
<rect x="-4" y="0" width="8" height="36" fill="url(#treeTrunk)" />
|
|
<circle cx="0" cy="-4" r="20" fill="url(#treeCrown)" />
|
|
<circle cx="-13" cy="2" r="13" fill="url(#treeCrown)" />
|
|
<circle cx="13" cy="2" r="13" fill="url(#treeCrown)" />
|
|
</g>
|
|
|
|
<g class="tree" transform="translate(560,525)">
|
|
<rect x="-4" y="0" width="8" height="40" fill="url(#treeTrunk)" />
|
|
<circle cx="0" cy="-6" r="22" fill="url(#treeCrown)" />
|
|
<circle cx="-14" cy="2" r="14" fill="url(#treeCrown)" />
|
|
<circle cx="14" cy="2" r="14" fill="url(#treeCrown)" />
|
|
</g>
|
|
|
|
<g class="tree" transform="translate(860,520)">
|
|
<rect x="-4" y="0" width="8" height="38" fill="url(#treeTrunk)" />
|
|
<circle cx="0" cy="-6" r="21" fill="url(#treeCrown)" />
|
|
<circle cx="-13" cy="2" r="13" fill="url(#treeCrown)" />
|
|
<circle cx="13" cy="2" r="13" fill="url(#treeCrown)" />
|
|
</g>
|
|
|
|
<g class="tree" transform="translate(1120,515)">
|
|
<rect x="-5" y="0" width="10" height="44" fill="url(#treeTrunk)" />
|
|
<circle cx="0" cy="-8" r="25" fill="url(#treeCrown)" />
|
|
<circle cx="-17" cy="0" r="16" fill="url(#treeCrown)" />
|
|
<circle cx="17" cy="0" r="16" fill="url(#treeCrown)" />
|
|
</g>
|
|
|
|
<g opacity="0.18" fill="#000000">
|
|
<ellipse cx="190" cy="565" rx="15" ry="4" />
|
|
<ellipse cx="360" cy="560" rx="13" ry="3.5" />
|
|
<ellipse cx="560" cy="570" rx="14" ry="4" />
|
|
<ellipse cx="860" cy="565" rx="13" ry="3.5" />
|
|
<ellipse cx="1120" cy="560" rx="16" ry="4" />
|
|
</g>
|
|
|
|
<g opacity="0.5">
|
|
<path
|
|
d="M90,735 C130,728 190,726 240,730"
|
|
fill="none"
|
|
stroke="#d9b28a"
|
|
stroke-width="3"
|
|
stroke-linecap="round"
|
|
/>
|
|
<path
|
|
d="M520,742 C580,736 640,736 700,741"
|
|
fill="none"
|
|
stroke="#c89c73"
|
|
stroke-width="3"
|
|
stroke-linecap="round"
|
|
/>
|
|
<path
|
|
d="M960,750 C1040,744 1160,744 1240,748"
|
|
fill="none"
|
|
stroke="#b6865e"
|
|
stroke-width="3"
|
|
stroke-linecap="round"
|
|
/>
|
|
</g>
|
|
|
|
<text
|
|
x="50"
|
|
y="880"
|
|
class="ground-label"
|
|
>FOUNDATION: TRANSPARENT, VERIFIABLE PRIVACY SCORES</text>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<main>
|
|
<section class="section">
|
|
<h2>VPN</h2>
|
|
<div class="tool-list">
|
|
<a class="tool-card" href="https://mullvad.net" target="_blank" rel="noopener">
|
|
<div class="tool-icon">☁️</div>
|
|
<div class="tool-content">
|
|
<div class="tool-name">Mullvad</div>
|
|
<div class="tool-label">Homepage</div>
|
|
</div>
|
|
</a>
|
|
<a class="tool-card" href="https://protonvpn.com" target="_blank" rel="noopener">
|
|
<div class="tool-icon">☁️</div>
|
|
<div class="tool-content">
|
|
<div class="tool-name">Proton VPN</div>
|
|
<div class="tool-label">Homepage</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h2>Browser</h2>
|
|
<div class="tool-list">
|
|
<a class="tool-card" href="https://www.mozilla.org/firefox/new/" target="_blank" rel="noopener">
|
|
<div class="tool-icon">🌐</div>
|
|
<div class="tool-content">
|
|
<div class="tool-name">Firefox (Hardened)</div>
|
|
<div class="tool-label">Homepage</div>
|
|
</div>
|
|
</a>
|
|
<a class="tool-card" href="https://www.torproject.org/download/" target="_blank" rel="noopener">
|
|
<div class="tool-icon">🌐</div>
|
|
<div class="tool-content">
|
|
<div class="tool-name">Tor Browser</div>
|
|
<div class="tool-label">Homepage</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h2>Operating Systems</h2>
|
|
<div class="tool-list">
|
|
<a class="tool-card" href="https://www.qubes-os.org" target="_blank" rel="noopener">
|
|
<div class="tool-icon">💻</div>
|
|
<div class="tool-content">
|
|
<div class="tool-name">Qubes OS</div>
|
|
<div class="tool-label">Homepage</div>
|
|
</div>
|
|
</a>
|
|
<a class="tool-card" href="https://tails.net" target="_blank" rel="noopener">
|
|
<div class="tool-icon">💻</div>
|
|
<div class="tool-content">
|
|
<div class="tool-name">Tails</div>
|
|
<div class="tool-label">Homepage</div>
|
|
</div>
|
|
</a>
|
|
<a class="tool-card" href="https://getfedora.org" target="_blank" rel="noopener">
|
|
<div class="tool-icon">💻</div>
|
|
<div class="tool-content">
|
|
<div class="tool-name">Fedora</div>
|
|
<div class="tool-label">Homepage</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h2>Password Management + Auth</h2>
|
|
<div class="tool-list">
|
|
<a class="tool-card" href="https://keepassxc.org" target="_blank" rel="noopener">
|
|
<div class="tool-icon">🔑</div>
|
|
<div class="tool-content">
|
|
<div class="tool-name">KeePassXC</div>
|
|
<div class="tool-label">Homepage</div>
|
|
</div>
|
|
</a>
|
|
<a class="tool-card" href="https://www.keepassdx.com" target="_blank" rel="noopener">
|
|
<div class="tool-icon">🔑</div>
|
|
<div class="tool-content">
|
|
<div class="tool-name">KeePassDX</div>
|
|
<div class="tool-label">Homepage</div>
|
|
</div>
|
|
</a>
|
|
<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-content">
|
|
<div class="tool-name">Firefox Password Manager</div>
|
|
<div class="tool-label">Homepage</div>
|
|
</div>
|
|
</a>
|
|
<a class="tool-card" href="https://proton.me/pass" target="_blank" rel="noopener">
|
|
<div class="tool-icon">🔑</div>
|
|
<div class="tool-content">
|
|
<div class="tool-name">Proton Pass</div>
|
|
<div class="tool-label">Homepage</div>
|
|
</div>
|
|
</a>
|
|
<a class="tool-card" href="https://proton.me/authenticator" target="_blank" rel="noopener">
|
|
<div class="tool-icon">🔑</div>
|
|
<div class="tool-content">
|
|
<div class="tool-name">Proton Auth</div>
|
|
<div class="tool-label">Homepage</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h2>Email</h2>
|
|
<div class="tool-list">
|
|
<a class="tool-card" href="https://proton.me/mail" target="_blank" rel="noopener">
|
|
<div class="tool-icon">✉️</div>
|
|
<div class="tool-content">
|
|
<div class="tool-name">Proton Mail</div>
|
|
<div class="tool-label">Homepage</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h2>File Storage</h2>
|
|
<div class="tool-list">
|
|
<a class="tool-card" href="https://proton.me/drive" target="_blank" rel="noopener">
|
|
<div class="tool-icon">📁</div>
|
|
<div class="tool-content">
|
|
<div class="tool-name">Proton Drive</div>
|
|
<div class="tool-label">Homepage</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h2>Cryptocurrency</h2>
|
|
<div class="tool-list">
|
|
<a class="tool-card" href="https://www.getmonero.org" target="_blank" rel="noopener">
|
|
<div class="tool-icon">🪙</div>
|
|
<div class="tool-content">
|
|
<div class="tool-name">Monero</div>
|
|
<div class="tool-label">Homepage</div>
|
|
</div>
|
|
</a>
|
|
<a class="tool-card" href="https://bitcoin.org" target="_blank" rel="noopener">
|
|
<div class="tool-icon">🪙</div>
|
|
<div class="tool-content">
|
|
<div class="tool-name">Bitcoin</div>
|
|
<div class="tool-label">Homepage</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<p class="warn" style="margin-top:.9rem">
|
|
Avoid Zcash: lots of influential people, including Edward Snowden,
|
|
sold out to advertise Zcash; trust and incentives are misaligned.
|
|
</p>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h2>Instant Messaging</h2>
|
|
<div class="tool-list">
|
|
<a class="tool-card" href="https://signal.org" target="_blank" rel="noopener">
|
|
<div class="tool-icon">💬</div>
|
|
<div class="tool-content">
|
|
<div class="tool-name">Signal</div>
|
|
<div class="tool-label">Homepage</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h2>Web Search</h2>
|
|
<p class="muted">
|
|
Nothing currently good enough to recommend without major caveats.
|
|
</p>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h2>Calendar</h2>
|
|
<div class="tool-list">
|
|
<a class="tool-card" href="https://proton.me/calendar" target="_blank" rel="noopener">
|
|
<div class="tool-icon">📅</div>
|
|
<div class="tool-content">
|
|
<div class="tool-name">Proton Calendar</div>
|
|
<div class="tool-label">Homepage</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h2>Hosting</h2>
|
|
<div class="tool-list">
|
|
<a class="tool-card" href="https://ovobox.org" target="_blank" rel="noopener">
|
|
<div class="tool-icon">🌐</div>
|
|
<div class="tool-content">
|
|
<div class="tool-name">ovobox.org</div>
|
|
<div class="tool-label">Homepage</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
;(()=>{
|
|
const g=document.getElementById('ground-group')
|
|
if(!g)return
|
|
const ensure=()=>{
|
|
if(!g.transform.baseVal.numberOfItems){
|
|
const t=g.ownerSVGElement.createSVGTransform()
|
|
t.setTranslate(0,0)
|
|
g.transform.baseVal.appendItem(t)
|
|
}
|
|
}
|
|
ensure()
|
|
const baseY=g.transform.baseVal.consolidate().matrix.f||0
|
|
const totalDrop=420
|
|
const onScroll=()=>{
|
|
const h=window.innerHeight||1
|
|
const p=Math.min(window.scrollY/h,1)
|
|
const eased=p*p
|
|
const y=baseY+totalDrop*eased
|
|
const t=g.transform.baseVal.getItem(0)
|
|
t.setTranslate(0,y)
|
|
}
|
|
window.addEventListener('scroll',onScroll,{passive:true})
|
|
onScroll()
|
|
})()
|
|
</script>
|
|
</body>
|
|
</html>
|