oliver/RespectfulPlatforms
oliver/RespectfulPlatforms
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add first version

Browse source
This commit is contained in:
Daniel Supernault 2025-01-11 14:46:06 -07:00
commit bf675c847a
No known key found for this signature in database
GPG key ID: 23740873EE6F76A1
1 changed files with 296 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

296
index.html Normal file
View file

@ -0,0 +1,296 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Platform Charter of Rights</title>
<script src="https://cdn.tailwindcss.com"></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 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>
<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 living document, 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: "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."
}
]
}
];
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 initializeCharter() {
const articlesContainer = document.getElementById('articles');
articles.forEach((article, index) => {
articlesContainer.appendChild(createArticleElement(article, index));
});
}
document.addEventListener('DOMContentLoaded', initializeCharter);
</script>
</body>
</html>