forked from RespectfulPlatforms/website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
381 lines (366 loc) · 19.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RespectfulPlatforms.org - Digital Platform Charter of Rights</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="/js/languagePicker.js?v=1"></script>
<style>
.article-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.article-content.expanded {
max-height: 1000px;
transition: max-height 0.5s ease-in;
}
.chevron {
transition: transform 0.3s ease;
}
.chevron.expanded {
transform: rotate(180deg);
}
</style>
</head>
<body class="min-h-screen bg-gray-100 dark:bg-slate-950">
<header class="bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-800">
<div id="language-picker-container" class="w-full flex justify-end p-2"></div>
<div class="max-w-4xl mx-auto px-6 py-8">
<div class="flex items-center justify-center mb-6">
<svg class="w-12 h-12 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<path d="M14 2v6h6"/>
<path d="M16 13H8"/>
<path d="M16 17H8"/>
<path d="M10 9H8"/>
</svg>
</div>
<h1 class="text-4xl font-serif text-center text-gray-900 dark:text-slate-50 mb-4">
Digital Platform Charter of Rights
</h1>
<p class="text-center text-gray-600 dark:text-slate-300 max-w-2xl mx-auto">
A declaration of fundamental rights and principles for ethical digital platforms,
ensuring privacy, dignity, and fairness in online spaces.
</p>
</div>
</header>
<main class="max-w-4xl mx-auto px-6 py-12">
<div class="prose prose-blue max-w-none mb-12">
<h2 class="font-serif text-2xl text-gray-900 dark:text-slate-50 mb-4">Preamble</h2>
<p class="text-gray-600 leading-relaxed dark:text-slate-300">
We, the architects and stewards of digital platforms, recognize the fundamental
rights of all users to participate in online spaces that respect their privacy,
dignity, and well-being. This Charter establishes the principles and standards
that shall govern the development and operation of ethical digital platforms.
</p>
</div>
<div id="articles" class="space-y-6">
</div>
<section id="pledged-orgs" class="my-16">
<h2 class="font-serif text-2xl text-gray-900 dark:text-slate-50 mb-6">Organizations That Have Pledged</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="org-grid">
<div class="bg-white dark:bg-slate-900 rounded-lg p-4 shadow-sm border border-gray-200 dark:border-slate-800">
<div class="flex items-start justify-between">
<div>
<h3 class="font-semibold text-gray-900 dark:text-slate-200">Pixelfed</h3>
<p class="text-sm text-gray-600">Pledged on Jan 11, 2025</p>
</div>
<a
class="inline-flex items-center gap-x-1.5 rounded-full px-2 py-1 text-xs font-medium text-gray-900 dark:text-slate-200 dark:hover:text-slate-400 dark:hover:ring-slate-800 ring-1 ring-inset ring-gray-200 dark:ring-slate-600"
href="https://pixelfed.org"
target="_blank">
Website
</a>
</div>
<p class="text-gray-700 dark:text-slate-500 text-sm mt-2">
"As a founding signatory, Pixelfed built these principles directly into our federated photo-sharing platform's architecture, with privacy-first design, no tracking, and data portability at its core."
</p>
</div>
</div>
</section>
<section id="pledge-form" class="bg-white dark:bg-slate-900 rounded-lg shadow-md p-8 border-l-4 border-slate-600">
<h2 class="text-2xl font-bold mb-6 dark:text-slate-50">Take the Pledge</h2>
<p class="text-sm text-gray-600 dark:text-slate-300 mb-6">
By pledging, your organization commits to implementing and upholding these principles.
To apply, please send an email from your ethical organization with your website, and a statement about the pledge to <a href="mailto:pledge@pixelfed.org" target="_blank" class="font-bold">pledge@pixelfed.org</a>. All pledges are reviewed before being publicly listed.
</p>
</section>
<footer class="mt-12 pt-8 border-t border-gray-200 dark:border-slate-800">
<p class="text-center text-gray-600 dark:text-slate-300 text-sm">
This Charter is a <a href="https://github.com/RespectfulPlatforms/website" class="font-bold" target="_blank">living document</a>, subject to regular review and amendment
through community consultation and evolving ethical standards in digital spaces. Created by developers of <a href="https://fediverse.info" class="font-bold">the fediverse</a>.
</p>
</footer>
</main>
<script>
const articles = [
{
title: "Right to Privacy",
principles: [
{
title: "Data Minimization",
description: "Only the data necessary for core functionalities is collected. Platforms must justify the necessity of each data point gathered."
},
{
title: "Explicit Consent",
description: "Users must give informed consent before any personal data is gathered, stored, or shared with third parties. Consent must be freely given, specific, and revocable."
},
{
title: "Privacy by Design",
description: "Platform features and updates are developed with user privacy as a default, preventing unnecessary data exposure."
}
]
},
{
title: "Freedom from Surveillance",
principles: [
{
title: "No Non-Consensual Tracking",
description: "Users are not secretly monitored or tracked across the internet. Any form of tracking must be explicitly disclosed and consented to."
},
{
title: "Clear Oversight",
description: "If analytics or tracking is used (for security, spam prevention, or debugging), it is transparently documented and limited in scope."
},
{
title: "User-Controlled Visibility",
description: "Users can easily adjust visibility settings for their profiles and content to manage their own privacy."
}
]
},
{
title: "Safeguards Against Hate Speech",
principles: [
{
title: "Zero Tolerance Policy",
description: "Policies explicitly prohibit hate speech, harassment, and targeted violence, with swift and transparent moderation actions."
},
{
title: "Accessible Reporting System",
description: "A simple and accessible system allows users to flag harmful content for review."
},
{
title: "Clear Community Standards",
description: "Clear definitions and examples of harmful content are publicly posted, so users understand what is and isn't permissible."
}
]
},
{
title: "Strong Protections for Vulnerable Communities",
principles: [
{
title: "Inclusive Moderation Policies",
description: "Moderation teams are trained to recognize and address content targeting race, ethnicity, gender, sexual orientation, disability, religion, or other marginalized identities."
},
{
title: "Intersectional Approach",
description: "Rules and enforcement protocols consider overlapping vulnerabilities that amplify harmful impacts."
},
{
title: "Responsive Support",
description: "Dedicated channels exist for users to quickly reach out if they feel threatened or unsafe on the platform."
}
]
},
{
title: "Data Portability and User Agency",
principles: [
{
title: "Easy Export",
description: "Users have the right to download or export their data at any time, in a common format."
},
{
title: "Right to Deletion",
description: "Upon request, a user's data will be permanently deleted from the platform, subject to legal or safety exceptions."
},
{
title: "Decentralized & Interoperable",
description: "Whenever possible, the platform supports open protocols and standards to allow users freedom to migrate and connect across different services."
}
]
},
{
title: "Transparency and Accountability",
principles: [
{
title: "Open Governance",
description: "Platform policies and governance processes are open, with regular community consultations and oversight."
},
{
title: "Public Roadmaps",
description: "Changes to platform policies or technology are made public, and stakeholders can comment or propose modifications."
},
{
title: "Independent Oversight",
description: "An impartial body or advisory group can audit or review moderation and data-handling practices to ensure they meet high ethical standards."
}
]
},
{
title: "Safety and Well-Being",
principles: [
{
title: "Content Warnings & Moderation Tools",
description: "Robust tools empower users to shield themselves from disturbing or harmful content through content warnings and filter lists."
},
{
title: "Mental Health Resources",
description: "The platform shares resources and hotlines for mental health support to foster a healthier online environment."
},
{
title: "Preventing Digital Harm",
description: "Proactive measures like rate limits and thoughtful friction counteract addictive patterns, spam, and abuse."
}
]
},
{
title: "Transparent Cybersecurity Posture",
principles: [
{
title: "Security Posture Transparency",
description: "Regular publication - at least annual - of security practices, implemented safeguards, enabling users to make informed decisions about platform trustworthiness."
},
{
title: "Incident Disclosure",
description: "Security incidents affecting user data or platform integrity must be promptly disclosed to all impacted users with clear impact assessment."
},
{
title: "Public Post-Mortems",
description: "Detailed post-incident analysis reports are published for all security incidents and unplanned downtime, explaining root causes, remediation steps, and preventive measures implemented to prevent future occurrences."
}
]
},
{
title: "Fairness in Algorithmic Systems",
principles: [
{
title: "Explainable Feeds",
description: "If a feed or search results are algorithmically curated, users deserve understandable explanations of key ranking factors."
},
{
title: "Option to Opt Out",
description: "Users can select a chronological feed or other simplified view if they do not wish to engage with algorithmic recommendations."
},
{
title: "Bias Mitigation",
description: "Regular audits ensure algorithms do not disproportionately suppress or amplify content based on protected characteristics."
}
]
},
{
title: "Inclusive Community and Governance",
principles: [
{
title: "Equitable Representation",
description: "Community rules and leadership should reflect diverse voices and experiences."
},
{
title: "Language Accessibility",
description: "Key policies, help guides, and moderation guidelines are available in multiple languages, as resources allow."
},
{
title: "Collaborative Policy Development",
description: "Users are encouraged to participate in policy discussions and help shape the platform's continued evolution."
}
]
},
{
title: "Continuous Improvement and Evolution",
principles: [
{
title: "Periodic Review",
description: "The Bill of Rights, policies, and implementation strategies are reviewed regularly and updated to meet changing social and technological landscapes."
},
{
title: "Community Feedback",
description: "Mechanisms exist for users to submit feedback, suggestions, or concerns, ensuring the platform remains responsive to its community."
},
{
title: "Shared Responsibility",
description: "All participants—users, maintainers, and external contributors—share the responsibility of upholding these principles."
}
]
}
];
const pledges = [
{
name: "NextGraph.org",
date: "Jan 13, 2025",
website: "https://NextGraph.org",
statement: "NextGraph.org is committed to data portability at its core, as it even goes further and beyond federation, for a truly decentralized network. It does guarantee perfect privacy as everything is encrypted end to end. The upcoming work on implementing a social platform we have planned, will uphold the principles listed in the Digital Platform Charter of Rights, as we strongly support diversity, minority communities and safety for everyone."
},
];
function createArticleElement(article, index) {
const articleElement = document.createElement('div');
articleElement.className = 'mb-8 bg-white dark:bg-slate-900 rounded-lg border border-gray-200 dark:border-slate-600 overflow-hidden';
const articleHTML = `
<button class="w-full px-6 py-4 flex items-center justify-between bg-gray-50 dark:bg-slate-800 border-b border-gray-200 dark:border-slate-600 hover:bg-gray-100 hover:dark:bg-slate-700 transition-colors">
<div class="flex items-center space-x-4">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-50 flex items-center justify-center font-serif">
${index + 1}
</div>
<h3 class="text-xl font-serif text-gray-900 dark:text-slate-300">${article.title}</h3>
</div>
<svg class="chevron w-5 h-5 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
<div class="article-content">
<div class="px-6 py-4">
${article.principles.map(principle => `
<div class="mb-10 last:mb-0">
<h4 class="text-xl font-semibold text-gray-800 dark:text-slate-50 mb-2">${principle.title}</h4>
<p class="text-gray-600 leading-relaxed dark:text-slate-300">${principle.description}</p>
</div>
`).join('')}
</div>
</div>
`;
articleElement.innerHTML = articleHTML;
const button = articleElement.querySelector('button');
const content = articleElement.querySelector('.article-content');
const chevron = articleElement.querySelector('.chevron');
button.addEventListener('click', () => {
content.classList.toggle('expanded');
chevron.classList.toggle('expanded');
});
return articleElement;
}
function displayPledges() {
const grid = document.getElementById('org-grid');
pledges.forEach(pledge => {
const pledgeEl = document.createElement('div');
pledgeEl.className = 'bg-white dark:bg-slate-900 rounded-lg p-4 shadow-sm border border-gray-200 dark:border-slate-800';
pledgeEl.innerHTML = `
<div class="flex items-start justify-between">
<div>
<h3 class="font-semibold text-gray-900 dark:text-slate-200">${pledge.name}</h3>
<p class="text-sm text-gray-600">Pledged on ${pledge.date}</p>
</div>
<a
class="inline-flex items-center gap-x-1.5 rounded-full px-2 py-1 text-xs font-medium text-gray-900 dark:text-slate-200 dark:hover:text-slate-400 dark:hover:ring-slate-800 ring-1 ring-inset ring-gray-200 dark:ring-slate-600"
href="${pledge.website}"
target="_blank">
Website
</a>
</div>
<p class="text-gray-700 dark:text-slate-500 text-sm mt-2">${pledge.statement}</p>
`;
grid.appendChild(pledgeEl);
});
}
function initializeCharter() {
const articlesContainer = document.getElementById('articles');
articles.forEach((article, index) => {
articlesContainer.appendChild(createArticleElement(article, index));
});
}
document.addEventListener('DOMContentLoaded', function() {
initializeCharter();
displayPledges();
});
</script>
</body>
</html>