mirror of
https://github.com/PrivacyIndex/privacyindex.github.io.git
synced 2026-01-13 16:18:07 +00:00
Feat: Scroll retract land and add sections
This commit is contained in:
254
index.html
254
index.html
@@ -6,8 +6,13 @@
|
|||||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
<style>
|
<style>
|
||||||
*{margin:0;padding:0;box-sizing:border-box}
|
*{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}
|
html,body{
|
||||||
body{overflow:hidden}
|
height:100%;
|
||||||
|
font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
|
||||||
|
background:#e3f4ff;
|
||||||
|
color:#123
|
||||||
|
}
|
||||||
|
body{overflow-x:hidden}
|
||||||
.scene-wrap{
|
.scene-wrap{
|
||||||
position:relative;
|
position:relative;
|
||||||
width:100vw;
|
width:100vw;
|
||||||
@@ -16,40 +21,21 @@
|
|||||||
align-items:flex-end;
|
align-items:flex-end;
|
||||||
justify-content:center;
|
justify-content:center;
|
||||||
background:linear-gradient(to bottom,#bfe7ff 0%,#d8f1ff 35%,#f5fbff 100%);
|
background:linear-gradient(to bottom,#bfe7ff 0%,#d8f1ff 35%,#f5fbff 100%);
|
||||||
|
overflow:hidden
|
||||||
}
|
}
|
||||||
.scene-sky{
|
.scene-sky{
|
||||||
position:absolute;
|
position:absolute;
|
||||||
inset:0;
|
inset:0;
|
||||||
background:radial-gradient(circle at 20% 15%,#ffffffaa 0,transparent 40%);
|
background:radial-gradient(circle at 20% 15%,#ffffffaa 0,transparent 40%);
|
||||||
pointer-events:none;
|
pointer-events:none;
|
||||||
z-index:0;
|
z-index:0
|
||||||
}
|
}
|
||||||
.scene-svg{
|
.scene-svg{
|
||||||
position:relative;
|
position:relative;
|
||||||
width:100%;
|
width:100%;
|
||||||
height:100%;
|
height:100%;
|
||||||
display:block;
|
display:block;
|
||||||
z-index:1;
|
z-index:1
|
||||||
}
|
|
||||||
.title-wrap{
|
|
||||||
position:absolute;
|
|
||||||
top:7vh;
|
|
||||||
left:6vw;
|
|
||||||
z-index:5;
|
|
||||||
color:#0f2434;
|
|
||||||
text-shadow:0 2px 6px #00000026;
|
|
||||||
}
|
|
||||||
.title-wrap h1{
|
|
||||||
font-size:clamp(2.4rem,4vw,3.6rem);
|
|
||||||
font-weight:700;
|
|
||||||
letter-spacing:0.02em;
|
|
||||||
margin-bottom:0.25rem;
|
|
||||||
}
|
|
||||||
.title-wrap p{
|
|
||||||
font-size:clamp(0.9rem,1.2vw,1.05rem);
|
|
||||||
max-width:26rem;
|
|
||||||
line-height:1.5;
|
|
||||||
opacity:0.9;
|
|
||||||
}
|
}
|
||||||
@keyframes treeFloat{
|
@keyframes treeFloat{
|
||||||
0%{transform:translateY(0)}
|
0%{transform:translateY(0)}
|
||||||
@@ -62,35 +48,68 @@
|
|||||||
}
|
}
|
||||||
.tree{
|
.tree{
|
||||||
animation:treeFloat 4s ease-in-out infinite;
|
animation:treeFloat 4s ease-in-out infinite;
|
||||||
transform-origin:50% 100%;
|
transform-origin:50% 100%
|
||||||
}
|
}
|
||||||
.tree:nth-child(odd){animation-duration:5.2s}
|
.tree:nth-child(odd){animation-duration:5.2s}
|
||||||
.cloud{
|
.cloud{animation:cloudDrift 26s linear infinite alternate}
|
||||||
animation:cloudDrift 26s linear infinite alternate;
|
|
||||||
}
|
|
||||||
.ground-label{
|
.ground-label{
|
||||||
font-size:9px;
|
font-size:9px;
|
||||||
fill:#fdfdfd;
|
fill:#fdfdfd;
|
||||||
opacity:.82;
|
opacity:.82;
|
||||||
letter-spacing:.06em;
|
letter-spacing:.06em
|
||||||
}
|
}
|
||||||
@media (max-width:640px){
|
.content{
|
||||||
.title-wrap{top:5vh;left:5vw;right:8vw}
|
position:relative;
|
||||||
.title-wrap p{max-width:18rem}
|
z-index:10;
|
||||||
|
max-width:960px;
|
||||||
|
margin:0 auto;
|
||||||
|
padding:4rem 6vw 5rem;
|
||||||
|
color:#102331;
|
||||||
|
background:transparent
|
||||||
|
}
|
||||||
|
.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:.4rem
|
||||||
|
}
|
||||||
|
.section p{
|
||||||
|
font-size:.95rem;
|
||||||
|
line-height:1.6;
|
||||||
|
color:#1d3545
|
||||||
|
}
|
||||||
|
.highlight{
|
||||||
|
font-weight:600;
|
||||||
|
color:#0c5a2a
|
||||||
|
}
|
||||||
|
.warn{
|
||||||
|
font-weight:700;
|
||||||
|
color:#b00020
|
||||||
|
}
|
||||||
|
.muted{
|
||||||
|
opacity:.76
|
||||||
|
}
|
||||||
|
@media(max-width:640px){
|
||||||
|
.content{padding:3rem 5vw 3.6rem}
|
||||||
|
.section{margin-bottom:2.1rem;padding:1.1rem 1rem .9rem}
|
||||||
|
.section h2{font-size:1.0rem}
|
||||||
|
.section p{font-size:.9rem}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="scene-wrap">
|
<div class="scene-wrap">
|
||||||
<div class="scene-sky"></div>
|
<div class="scene-sky"></div>
|
||||||
<div class="title-wrap">
|
|
||||||
<h1>Privacy Index</h1>
|
|
||||||
<p>
|
|
||||||
A clear landscape of digital privacy.
|
|
||||||
View how services, products, and policies
|
|
||||||
stand on the horizon of trust.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<svg
|
<svg
|
||||||
class="scene-svg"
|
class="scene-svg"
|
||||||
viewBox="0 0 1440 900"
|
viewBox="0 0 1440 900"
|
||||||
@@ -141,6 +160,7 @@
|
|||||||
</g>
|
</g>
|
||||||
|
|
||||||
<path
|
<path
|
||||||
|
id="hill"
|
||||||
d="M0,530
|
d="M0,530
|
||||||
C240,480 420,470 720,500
|
C240,480 420,470 720,500
|
||||||
C1040,530 1180,500 1440,470
|
C1040,530 1180,500 1440,470
|
||||||
@@ -150,6 +170,7 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<path
|
<path
|
||||||
|
id="land"
|
||||||
d="M0,560
|
d="M0,560
|
||||||
C260,540 480,555 720,570
|
C260,540 480,555 720,570
|
||||||
C1040,590 1200,600 1440,610
|
C1040,590 1200,600 1440,610
|
||||||
@@ -158,6 +179,7 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<path
|
<path
|
||||||
|
id="dirt"
|
||||||
d="M0,720
|
d="M0,720
|
||||||
C220,700 430,715 720,730
|
C220,700 430,715 720,730
|
||||||
C1040,750 1220,760 1440,755
|
C1040,750 1220,760 1440,755
|
||||||
@@ -245,5 +267,157 @@
|
|||||||
>FOUNDATION: TRANSPARENT, VERIFIABLE PRIVACY SCORES</text>
|
>FOUNDATION: TRANSPARENT, VERIFIABLE PRIVACY SCORES</text>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<main class="content">
|
||||||
|
<section class="section">
|
||||||
|
<h2>VPN</h2>
|
||||||
|
<p>
|
||||||
|
<span class="highlight">Mullvad</span> and
|
||||||
|
<span class="highlight">Proton VPN</span> are preferred: strong privacy
|
||||||
|
posture, public audits, and resistance to invasive data collection.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<h2>Browser</h2>
|
||||||
|
<p>
|
||||||
|
<span class="highlight">Firefox</span> (hardened) for daily use.
|
||||||
|
<span class="highlight">Tor Browser</span> for anonymity-critical
|
||||||
|
activity.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<h2>Operating Systems</h2>
|
||||||
|
<p>
|
||||||
|
<span class="highlight">Qubes OS</span> for strict compartmentalization.
|
||||||
|
<span class="highlight">Tails</span> for amnesic, Tor-routed sessions.
|
||||||
|
<span class="highlight">Fedora</span> as a strong general-purpose choice.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<h2>Password Management + Auth</h2>
|
||||||
|
<p>
|
||||||
|
<span class="highlight">KeePassXC</span> on desktop (especially Windows),
|
||||||
|
<span class="highlight">KeePassDX</span> on mobile, plus
|
||||||
|
<span class="highlight">Firefox Password Manager</span> for integrated,
|
||||||
|
syncable credentials, and
|
||||||
|
<span class="highlight">Proton Pass</span> +
|
||||||
|
<span class="highlight">Proton Auth</span> for encrypted, ecosystem-based
|
||||||
|
secrets and 2FA.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<h2>Email</h2>
|
||||||
|
<p>
|
||||||
|
<span class="highlight">Proton Mail</span> for end-to-end encrypted,
|
||||||
|
jurisdiction-conscious mail.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<h2>File Storage</h2>
|
||||||
|
<p>
|
||||||
|
<span class="highlight">Proton Drive</span> for encrypted cloud storage
|
||||||
|
tied to a privacy-respecting provider.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<h2>Cryptocurrency</h2>
|
||||||
|
<p>
|
||||||
|
<span class="highlight">Monero</span> first-choice for privacy-focused
|
||||||
|
transactions. <span class="highlight">Bitcoin</span> second,
|
||||||
|
with strict self-custody and privacy hygiene.
|
||||||
|
</p>
|
||||||
|
<p class="warn">
|
||||||
|
Avoid Zcash:
|
||||||
|
influential figures, including Edward Snowden, have publicly promoted
|
||||||
|
it in ways that undermine trust; its model and ecosystem do not align
|
||||||
|
with this index's bar for credible privacy.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<h2>Instant Messaging</h2>
|
||||||
|
<p>
|
||||||
|
<span class="highlight">Signal</span> for default end-to-end encrypted
|
||||||
|
messaging with a strong track record.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<h2>Web Search</h2>
|
||||||
|
<p class="muted">
|
||||||
|
No engine currently meets a high enough standard to be recommended
|
||||||
|
without significant caveats.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<h2>Calendar</h2>
|
||||||
|
<p>
|
||||||
|
<span class="highlight">Proton Calendar</span> alongside Proton's
|
||||||
|
encrypted ecosystem.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<h2>Hosting</h2>
|
||||||
|
<p>
|
||||||
|
<span class="highlight">ovobox.org</span> as a focused, privacy-forward
|
||||||
|
hosting option.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
;(()=>{
|
||||||
|
const svg=document.querySelector('.scene-svg')
|
||||||
|
if(!svg)return
|
||||||
|
const hill=svg.querySelector('#hill')
|
||||||
|
const land=svg.querySelector('#land')
|
||||||
|
const dirt=svg.querySelector('#dirt')
|
||||||
|
const label=svg.querySelector('.ground-label')
|
||||||
|
const trees=[...svg.querySelectorAll('.tree')]
|
||||||
|
const base={
|
||||||
|
hill:hill.getAttribute('d'),
|
||||||
|
land:land.getAttribute('d'),
|
||||||
|
dirt:dirt.getAttribute('d')
|
||||||
|
}
|
||||||
|
const baseLabelY=parseFloat(label.getAttribute('y'))
|
||||||
|
const maxShift=520
|
||||||
|
const lerp=(a,b,t)=>a+(b-a)*t
|
||||||
|
const shiftPath=(d,dy)=>{
|
||||||
|
return d.replace(/(-?\d+(\.\d+)?)/g,(m)=>{
|
||||||
|
let n=parseFloat(m)
|
||||||
|
if(isNaN(n))return m
|
||||||
|
return String(n)
|
||||||
|
}).replace(/(,)(\d+(\.\d+)?)/g,(m,sep,num)=>{
|
||||||
|
const y=parseFloat(num)+dy
|
||||||
|
return sep+String(y)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const onScroll=()=>{
|
||||||
|
const maxScroll=window.innerHeight*1.4
|
||||||
|
const s=Math.min(window.scrollY/maxScroll,1)
|
||||||
|
const easing=s*s
|
||||||
|
const shift=-maxShift*easing
|
||||||
|
hill.setAttribute('d',shiftPath(base.hill,shift))
|
||||||
|
land.setAttribute('d',shiftPath(base.land,shift))
|
||||||
|
dirt.setAttribute('d',shiftPath(base.dirt,shift))
|
||||||
|
label.setAttribute('y',baseLabelY+shift)
|
||||||
|
trees.forEach(t=>{
|
||||||
|
const ty=t.__baseY||(t.__baseY=parseFloat((t.getAttribute('transform').match(/,([\d.]+)/)||[0,520])[1]))
|
||||||
|
const nx=ty+shift
|
||||||
|
t.setAttribute('transform',t.getAttribute('transform').replace(/,([\d.]+)\)/,','+nx+')'))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
window.addEventListener('scroll',onScroll,{passive:true})
|
||||||
|
onScroll()
|
||||||
|
})()
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user