Skip to content

Commit bf675c8

Browse files
committed
Add first version
0 parents  commit bf675c8

File tree

1 file changed

+296
-0
lines changed

1 file changed

+296
-0
lines changed

index.html

+296
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,296 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Digital Platform Charter of Rights</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<style>
9+
.article-content {
10+
max-height: 0;
11+
overflow: hidden;
12+
transition: max-height 0.3s ease-out;
13+
}
14+
.article-content.expanded {
15+
max-height: 1000px;
16+
transition: max-height 0.5s ease-in;
17+
}
18+
.chevron {
19+
transition: transform 0.3s ease;
20+
}
21+
.chevron.expanded {
22+
transform: rotate(180deg);
23+
}
24+
</style>
25+
</head>
26+
<body class="min-h-screen bg-gray-100 dark:bg-slate-950">
27+
<header class="bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-800">
28+
<div class="max-w-4xl mx-auto px-6 py-8">
29+
<div class="flex items-center justify-center mb-6">
30+
<svg class="w-12 h-12 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
31+
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
32+
<path d="M14 2v6h6"/>
33+
<path d="M16 13H8"/>
34+
<path d="M16 17H8"/>
35+
<path d="M10 9H8"/>
36+
</svg>
37+
</div>
38+
<h1 class="text-4xl font-serif text-center text-gray-900 dark:text-slate-50 mb-4">
39+
Digital Platform Charter of Rights
40+
</h1>
41+
<p class="text-center text-gray-600 dark:text-slate-300 max-w-2xl mx-auto">
42+
A declaration of fundamental rights and principles for ethical digital platforms,
43+
ensuring privacy, dignity, and fairness in online spaces.
44+
</p>
45+
</div>
46+
</header>
47+
48+
<main class="max-w-4xl mx-auto px-6 py-12">
49+
<div class="prose prose-blue max-w-none mb-12">
50+
<h2 class="font-serif text-2xl text-gray-900 dark:text-slate-50 mb-4">Preamble</h2>
51+
<p class="text-gray-600 leading-relaxed dark:text-slate-300">
52+
We, the architects and stewards of digital platforms, recognize the fundamental
53+
rights of all users to participate in online spaces that respect their privacy,
54+
dignity, and well-being. This Charter establishes the principles and standards
55+
that shall govern the development and operation of ethical digital platforms.
56+
</p>
57+
</div>
58+
59+
<div id="articles" class="space-y-6">
60+
</div>
61+
62+
<footer class="mt-12 pt-8 border-t border-gray-200 dark:border-slate-800">
63+
<p class="text-center text-gray-600 dark:text-slate-300 text-sm">
64+
This Charter is a living document, subject to regular review and amendment
65+
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>.
66+
</p>
67+
</footer>
68+
</main>
69+
70+
<script>
71+
const articles = [
72+
{
73+
title: "Right to Privacy",
74+
principles: [
75+
{
76+
title: "Data Minimization",
77+
description: "Only the data necessary for core functionalities is collected. Platforms must justify the necessity of each data point gathered."
78+
},
79+
{
80+
title: "Explicit Consent",
81+
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."
82+
},
83+
{
84+
title: "Privacy by Design",
85+
description: "Platform features and updates are developed with user privacy as a default, preventing unnecessary data exposure."
86+
}
87+
]
88+
},
89+
{
90+
title: "Freedom from Surveillance",
91+
principles: [
92+
{
93+
title: "No Non-Consensual Tracking",
94+
description: "Users are not secretly monitored or tracked across the internet. Any form of tracking must be explicitly disclosed and consented to."
95+
},
96+
{
97+
title: "Clear Oversight",
98+
description: "If analytics or tracking is used (for security, spam prevention, or debugging), it is transparently documented and limited in scope."
99+
},
100+
{
101+
title: "User-Controlled Visibility",
102+
description: "Users can easily adjust visibility settings for their profiles and content to manage their own privacy."
103+
}
104+
]
105+
},
106+
{
107+
title: "Safeguards Against Hate Speech",
108+
principles: [
109+
{
110+
title: "Zero Tolerance Policy",
111+
description: "Policies explicitly prohibit hate speech, harassment, and targeted violence, with swift and transparent moderation actions."
112+
},
113+
{
114+
title: "Accessible Reporting System",
115+
description: "A simple and accessible system allows users to flag harmful content for review."
116+
},
117+
{
118+
title: "Clear Community Standards",
119+
description: "Clear definitions and examples of harmful content are publicly posted, so users understand what is and isn't permissible."
120+
}
121+
]
122+
},
123+
{
124+
title: "Strong Protections for Vulnerable Communities",
125+
principles: [
126+
{
127+
title: "Inclusive Moderation Policies",
128+
description: "Moderation teams are trained to recognize and address content targeting race, ethnicity, gender, sexual orientation, disability, religion, or other marginalized identities."
129+
},
130+
{
131+
title: "Intersectional Approach",
132+
description: "Rules and enforcement protocols consider overlapping vulnerabilities that amplify harmful impacts."
133+
},
134+
{
135+
title: "Responsive Support",
136+
description: "Dedicated channels exist for users to quickly reach out if they feel threatened or unsafe on the platform."
137+
}
138+
]
139+
},
140+
{
141+
title: "Data Portability and User Agency",
142+
principles: [
143+
{
144+
title: "Easy Export",
145+
description: "Users have the right to download or export their data at any time, in a common format."
146+
},
147+
{
148+
title: "Right to Deletion",
149+
description: "Upon request, a user's data will be permanently deleted from the platform, subject to legal or safety exceptions."
150+
},
151+
{
152+
title: "Decentralized & Interoperable",
153+
description: "Whenever possible, the platform supports open protocols and standards to allow users freedom to migrate and connect across different services."
154+
}
155+
]
156+
},
157+
{
158+
title: "Transparency and Accountability",
159+
principles: [
160+
{
161+
title: "Open Governance",
162+
description: "Platform policies and governance processes are open, with regular community consultations and oversight."
163+
},
164+
{
165+
title: "Public Roadmaps",
166+
description: "Changes to platform policies or technology are made public, and stakeholders can comment or propose modifications."
167+
},
168+
{
169+
title: "Independent Oversight",
170+
description: "An impartial body or advisory group can audit or review moderation and data-handling practices to ensure they meet high ethical standards."
171+
}
172+
]
173+
},
174+
{
175+
title: "Safety and Well-Being",
176+
principles: [
177+
{
178+
title: "Content Warnings & Moderation Tools",
179+
description: "Robust tools empower users to shield themselves from disturbing or harmful content through content warnings and filter lists."
180+
},
181+
{
182+
title: "Mental Health Resources",
183+
description: "The platform shares resources and hotlines for mental health support to foster a healthier online environment."
184+
},
185+
{
186+
title: "Preventing Digital Harm",
187+
description: "Proactive measures like rate limits and thoughtful friction counteract addictive patterns, spam, and abuse."
188+
}
189+
]
190+
},
191+
{
192+
title: "Fairness in Algorithmic Systems",
193+
principles: [
194+
{
195+
title: "Explainable Feeds",
196+
description: "If a feed or search results are algorithmically curated, users deserve understandable explanations of key ranking factors."
197+
},
198+
{
199+
title: "Option to Opt Out",
200+
description: "Users can select a chronological feed or other simplified view if they do not wish to engage with algorithmic recommendations."
201+
},
202+
{
203+
title: "Bias Mitigation",
204+
description: "Regular audits ensure algorithms do not disproportionately suppress or amplify content based on protected characteristics."
205+
}
206+
]
207+
},
208+
{
209+
title: "Inclusive Community and Governance",
210+
principles: [
211+
{
212+
title: "Equitable Representation",
213+
description: "Community rules and leadership should reflect diverse voices and experiences."
214+
},
215+
{
216+
title: "Language Accessibility",
217+
description: "Key policies, help guides, and moderation guidelines are available in multiple languages, as resources allow."
218+
},
219+
{
220+
title: "Collaborative Policy Development",
221+
description: "Users are encouraged to participate in policy discussions and help shape the platform's continued evolution."
222+
}
223+
]
224+
},
225+
{
226+
title: "Continuous Improvement and Evolution",
227+
principles: [
228+
{
229+
title: "Periodic Review",
230+
description: "The Bill of Rights, policies, and implementation strategies are reviewed regularly and updated to meet changing social and technological landscapes."
231+
},
232+
{
233+
title: "Community Feedback",
234+
description: "Mechanisms exist for users to submit feedback, suggestions, or concerns, ensuring the platform remains responsive to its community."
235+
},
236+
{
237+
title: "Shared Responsibility",
238+
description: "All participants—users, maintainers, and external contributors—share the responsibility of upholding these principles."
239+
}
240+
]
241+
}
242+
];
243+
244+
function createArticleElement(article, index) {
245+
const articleElement = document.createElement('div');
246+
articleElement.className = 'mb-8 bg-white dark:bg-slate-900 rounded-lg border border-gray-200 dark:border-slate-600 overflow-hidden';
247+
248+
const articleHTML = `
249+
<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">
250+
<div class="flex items-center space-x-4">
251+
<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">
252+
${index + 1}
253+
</div>
254+
<h3 class="text-xl font-serif text-gray-900 dark:text-slate-300">${article.title}</h3>
255+
</div>
256+
<svg class="chevron w-5 h-5 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
257+
<polyline points="6 9 12 15 18 9"></polyline>
258+
</svg>
259+
</button>
260+
<div class="article-content">
261+
<div class="px-6 py-4">
262+
${article.principles.map(principle => `
263+
<div class="mb-10 last:mb-0">
264+
<h4 class="text-xl font-semibold text-gray-800 dark:text-slate-50 mb-2">${principle.title}</h4>
265+
<p class="text-gray-600 leading-relaxed dark:text-slate-300">${principle.description}</p>
266+
</div>
267+
`).join('')}
268+
</div>
269+
</div>
270+
`;
271+
272+
articleElement.innerHTML = articleHTML;
273+
274+
const button = articleElement.querySelector('button');
275+
const content = articleElement.querySelector('.article-content');
276+
const chevron = articleElement.querySelector('.chevron');
277+
278+
button.addEventListener('click', () => {
279+
content.classList.toggle('expanded');
280+
chevron.classList.toggle('expanded');
281+
});
282+
283+
return articleElement;
284+
}
285+
286+
function initializeCharter() {
287+
const articlesContainer = document.getElementById('articles');
288+
articles.forEach((article, index) => {
289+
articlesContainer.appendChild(createArticleElement(article, index));
290+
});
291+
}
292+
293+
document.addEventListener('DOMContentLoaded', initializeCharter);
294+
</script>
295+
</body>
296+
</html>

0 commit comments

Comments
 (0)