Eine kleine Website um "DDOS-Datenanfragen" an deiner Schule durchzuführen. Schüler*innen klicken dann einfach nur auf einen Knopf um Datenanfragen zu senden und können so die Verantwortlichen zum umdenken bewegen.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

349 lines
17 KiB

<!DOCTYPE html>
<html lang="de">
<head>
<title>Datenanfrage</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="[fontawesome-url]">
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="manifest" href="favicon/site.webmanifest">
</head>
<body>
<noscript>
<strong>Bitte aktiviere JavaScript, damit die Seite korrekt funktioniert</strong>
</noscript>
<div class="jumbotron text-center jumbotron-microsoft text-white" style="background-color: #aa0000; border-radius: 0px 0px 0px 0px; ">
<br>
<h2 >Hol dir deine Daten von der [Schule] zurück!</h2><br>
<h6><i class="far fa-check-circle"></i> Das geht ganz einfach und schnell - und hilft den Datenschutz an der [Schule] zu verbessern</h6>
<br><br>
</div>
<center><p style="margin-right: 5%; margin-left: 5%;">Frage durch den unteren Button deine Daten per E-Mail an - du musst nur noch deinen Namen unter die Mail schreiben und die Anfrage ist fertig</p><a data-toggle="modal" style="background-color: #024086" data-target="#modal_mail" class="btn btn-lg btn-light text-white" style="color: white"><i class="far fa-paper-plane"></i> E-Mail generieren</a>
<br><br><p><strong>Du weißt nicht, was das ist oder was es bringt? </strong><br> Weitere Informationen findest du unten</p></center>
<div class="container">
<div class="row" style="padding: 1%">
<div class="col-sm-4">
<h4>Das Problem mit dem Datenschutz an der [Schule]</h4>
<hr style="background-color: #024086">
<p>Wir haben herausgefunden, dass unsere Schule Daten von Euch sammelt, ohne Euch jemals gefragt zu haben. Wir fordern Transparenz und setzen uns gegen die Benutzung von US-Produkten wie Microsoft 365 ein.</p>
</div>
<div class="col-sm-4">
<h4>Unsere Forderungen an die [Schule]</h4>
<hr style="background-color: #024086">
<p><strong>1. Transparenz: </strong><br>Wir wollen die Information, welche Daten von uns verarbeitet werden!</p>
<p><strong>2. Freiwilligkeit: </strong><br>Per Einwilligung sollte abgefragt werden, ob man Kunde von einem Unternehmen sein möchte, dass nicht teil der Schule ist</p>
Das aktuelle Vorgehen der Schule ist willkürlich und nicht legal, da eine Rechtsgrundlage für die Datenverarbeitungen fehlt.<br>
</div>
<div class="col-sm-4">
<h4>So kannst Du deine Daten einfordern</h4>
<hr style="background-color: #024086">
<p>Laut der DSGVO hast Du das Recht, zu wissen, welche Daten wer über dich speichert. Das bedeutet, dass Du die Schule auffordern kannst, dir alles über deine Daten und deren Verarbeitung zu schreiben.</p>
<p>Das bezweckt nicht nur das du einen Überblick erhälst, sondern auch, dass die Schule sich um den Datenschutz kümmern muss. Je mehr Menschen sich für ein Thema engagieren, desto mehr werden sich auch die Verantwortlichen mit dem Thema beschäftigen.</p>
</div>
</div>
</div>
<div class="container" style="">
<div class="row" style="padding: 1%; color: #024086">
<div class="col-sm-5">
<h3>Warum ist das so wichtig?</h3>
<strong><blockquote class="text-light jumbotron bg-dark" style="background-color: #024086; min-height: 50%; height: 50%;">
Wir haben den <mark> Klimawandel </mark> - das ist eine wichtig Sache. Wir haben die <mark>Privatsphäre</mark> - das ist wichtig... . .
Und sie sollten so gewichtet werden, und wir sollten höchste Anstrengungen erstreben und entscheiden,
wie wir diese <mark> Dinge besser machen </mark> können und wie wir der nächsten Generation etwas hinterlassen, das viel besser ist als die aktuelle Situation."</strong>
<p style="color: light-green">Tim Cook, 2021</p>
</blockquote>
<div class="text-light jumbotron" style="background-color: #024086; margin-top: 50%: min-height: 34%; height: 34%;">
<h2>Datenschutz ist ein Grundrecht</h2>
<h6>Auch in der Schule</h6>
</div>
</div>
<div class="col-sm-7 jumbotron bg-light" style="color: #024086; min-height: 50%; height: 50%;">
<h4>Digitale Nachhaltigkeit ist essentiell für schnelle und sichere Digitalisierung</h4>
<p>Digitale Nachhaltigkeit bedeutet, dass ein digitales Gut, z.B. eine Anwendung dauerhaft sicher eingesetzt werden kann. Wichtig hierfür ist beispielsweise auch, dass der Quellcode für Bildungssoftware offengelegt wird.</p>
<div class="row">
<div class="col-2">
<center><i style="font-size: 90px" class="fas fa-exclamation"></i></center>
</div>
<div class="col-10">
<p>Datenschutz ist ein weiterer wichtiger Aspekt. Während ein einzelner Datenpunkt, z.B. wann Du dich in Microsoft Teams einloggst keinerlei relevanz hat ändert sich das schlagartig wenn mit deinem Profil weitere Daten verknüpft werden.</p>
</div>
</div>
<div class="row">
<div class="col-12">
Plötzlich können beispielsweise Leistungsprofile erstellt werden, die dich später beeinflussen können. Ein gutes Beispiel ist hier der österreichische AMS-Algorithmus: dieser hat bis vor kurzem Jobsuchende auf einer zweifelhaften Datenbasis
in verschiedene Kategorien aufgeteilt und somit über deren Zukunft entschieden.
</div>
</div>
<div class="row">
<div class="col-3">
<p><center><i style="font-size: 60px" class="fas fa-chalkboard-teacher"></i></center></p>
</div>
<div class="col-9">
<p>Wenn jetzt Unternehmen anfangen schon zu Beginn der Schule ein Datenverknüpfungspaket zu schüren, stehen die daraus resultierenden Gefahren unmittelbar bevor.</p>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="jumbotron text-center text-white mb-0" style="background-color: #024086; min-height: 93%; border-radius: 0px 0px 0px 0px; ">
<h2>Weitere Information</h2>
<br>
<!--<a class="btn btn-md btn-light" href="https://netzpolitik.org/2021/microsoft-teams-oder-nichts/">Artikel auf netzpolitik.org <small>Lukas Wagner<small></a>-->
<!-- Hier ggf. Artikel bzw. weitere Publikationen verlinken -->
<!-- ACCORDION -->
<div id="accordion" class="myaccordion">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button style="border: 0" class="d-flex align-items-center justify-content-between btn btn-acc collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Was ist eine Datenanfrage genau?
<span class="fa-stack fa-sm">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-plus fa-stack-1x fa-inverse"></i>
</span>
</button>
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<p style="text-align: left" >Mit einer Datenanfrage kannst du schnell, einfach und kostenlos bei einer Institution deine Daten anfragen. Für deine Schule musst du nichts mehr hinzufügen außer deinen Namen - drücke einfach auf den obigen Generator-Knopf.
Nach einer Weile (spätestens aber nach 30 Tagen) erhälst du von der Schule eine Auskunft, die aufschlüsseln soll welche Daten über dich verarbeitet werden. Nur dann kannst du entscheiden, welche Daten deine Schule von dir verarbeiten soll - und welche nicht!</p>
</div>
</div>
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="d-flex align-items-center justify-content-between btn btn-acc collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Was bringt das für die Aktion?
<span class="fa-stack fa-sm">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-plus fa-stack-1x fa-inverse"></i>
</span>
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
<p style="text-align: left">Wenn sehr viele ihre Daten anfragen merken die Verantwortlichen, dass Datenschutz für uns Schüler*innen wichtig ist. </p>
</div>
</div>
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="d-flex align-items-center justify-content-between btn btn-acc collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Was kann ich noch tun?
<span class="fa-stack fa-sm">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-plus fa-stack-1x fa-inverse"></i>
</span>
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div style="text-align: left" class="card-body">
<p>Auch du kannst neben dieser Anfrage noch einiges tun!</p>
<ul>
<li>Teile diese Seite mit deinen Mitschüler*innen</li>
<li>Kontaktiere uns für weitere Möglichkeiten der Partizipation</li>
<li>Rede mit deinen Lehrer*innen, z.B. über den Einsatz von datenschutzfreundlichen Videokonferenzsystemen wie z.B. BigBlueButton</li>
</ul>
</div>
</div>
</div>
<a href="mailto:[Schule]" class="btn btn-lg btn-light text-body"><i class="far fa-paper-plane"></i> Kontakt</a><br><br>
</div>
<!-- Datenschutz/Impressum -->
<div class="text-center text-white container-fluid" style="background-color: #024086">
<small>Bei dieser Seite handelt es sich um <strong>keine</strong> offizielle Seite der [Schule]</small><br>
<a data-toggle="modal" data-target="#modal_datenschutz" style="color: white">Datenschutz</a>
<a data-toggle="modal" data-target="#modal_impressum" style="color: white">Impressum</a><br><br><br>
</div>
</body>
<!-- Impressum und Datenschutz -->
<div class="modal fade" id="modal_datenschutz">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Datenschutz</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<!-- DATENSCHUTZHINWEISEG -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Schließen</button>
</div>
</div>
</div>
</div><!-- Datenschutz #modal_datenschutz -->
<div class="modal fade" id="modal_impressum">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Impressum</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div style="font-size: 15px; text-align:left" class="modal-body">
<!-- IMPRESSUM -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Schließen</button>
</div>
</div>
</div>
</div><!-- E-Mail senden #modal_email -->
<div class="modal fade" id="modal_mail" tabindex="-1" role="dialog" aria-labelledby="mail_Title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-body" id="mail_Title">E-Mail versenden</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div style="font-size: 15px; text-align:left" class="modal-body text-body">
<h6>Schritt 1</h6>
<p>Gebe deinen Namen ein, damit du zugeordnet werden kannst</p>
<input class="form-control form-control-lg" type="text" id ="sender_name" placeholder="Max Mustermann"><br>
<h6>Schritt 2</h6>
<button style="background-color: #024086" type="button" onclick="generate()" class="btn btn-lg btn-light text-white"><i class="far fa-paper-plane"></i> Mail senden</button><br>
<small>Wir würden uns freuen, wenn du die Kopie an uns stehen lässt, damit wir wissen wieviele Menschen eine Anfrage geschickt haben</small><br><br>
<h6>Schritt 3</h6>
<p> Auf Antwort warten </p>
Du kannst uns die Antwort gerne weiterleiten (zensiert)
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
</div>
</div>
</div>
</div>
</html>
<style>
html, body {
height: 100%;
}
mark {
background-color: red;
color: white;
border-radius: 1px 1px 1px 1px;
}
.jumbotron-microsoft {
-background-image: linear-gradient(rgba(2, 64, 134, 0.8), rgba(2, 64, 134, 0.8)), url("microsoft.jpg");
background-image: linear-gradient(rgba(2, 64, 134, 0.8), rgba(20, 20, 20, 0.8)), url("microsoft.jpg");
background-size: cover;
background-position: 100% 20%;
}
.myaccordion {
max-width: 500px;
margin: 50px auto;
box-shadow: 0 0 1px rgba(0,0,0,0.1);
}
.myaccordion .card,
.myaccordion .card:last-child .card-header {
border: none;
}
.myaccordion .card-header {
border-bottom-color: #ffffff;
background-color: #ffffff;
border: none;
}
.myaccordion .card-body {
border-bottom-color: #ffffff;
background-color: #eeeeee;
color: black;
border: none;
font-size: 14px;
}
.myaccordion .fa-stack {
font-size: 18px;
}
.myaccordion .btn {
width: 100%;
font-weight: bold;
color: #004987;
background-color: #ffffff;
padding: 0;
}
.myaccordion .btn-link:hover,
.myaccordion .btn-acc:focus {
outline: none;
box-shadow: none;
}
.myaccordion li + li {
margin-top: 10px;
}
.panel-body {border-top: 0 !important;}
jumbotron-microsoft {
min-height: 30%;
}
@media only screen and (min-width: 601px) {
jumbotron-microsoft {
height: 50%;
}
}
</style>
<script>
function generate()
{
var deadline = new Date();
deadline.setDate(deadline.getDate() + 30);
let formatted_date = deadline.getDate() + "." + (deadline.getMonth() + 1) + "." + deadline.getFullYear();
var name = document.getElementById('sender_name').value;
var formattedBody = "Sehr geehrte Damen und Herren, \n \n ich bin Schüler an Ihrer Schule und habe erfahren, dass automatisch ein Microsoft Konto für meine Person in Ihrer Schule erstellt wurde. Ich befürchte, dass die von Microsoft gesammelten Daten an Dritte weitergeleitet und beliebig verarbeitet werden. Gerne möchte ich erfahren, welche meiner Daten erfasst und an Microsoft weitergeleitet wurden. Gibt es auch andere Dritte, an die Daten von mir weitergeleitet werden? Nach meiner Information kann ich nach Artikel 15 DSGVO Auskunft über Daten die Sie über mich speichern, verlangen.\n \n 1. Welche personenbezogenen Daten verarbeiten Sie mich betreffend? \nBitte nennen sie pro Datenkategorie die Rechtsgrundlage auf dessen die Verarbeitung beruht. \n 2. Zu welchen Zwecken verarbeiten Sie diese Daten? \n 3. Woher stammen diese mich betreffenden Daten? \n 4. Haben Sie diese Daten an Dritte übermittelt oder planen Sie, diese an Dritte zu übermitteln? \n Wenn ja, an wen, wann und zu welchem Zweck? \n 5. Wenn personenbezogene Daten an Drittländer oder internationale Organisationen übermittelt wurden, welche geeigneten Garantien haben Sie für die Datenübermittlung vorgesehen? \n Dies umfasst rechtlich bindende Dokumente, verbindliche interne Datenschutzvorschriften, Verhaltensregeln und Verplichtungen oder andere Zertifizierungsmechanismen, die mich bereffenden Rechte sowie weitere Vorgaben, gemäß Art. 46 DSGVO.\n 6. Wie sieht ihr Datenlöschkonzept aus? Wie lange werden Sie die Daten von mir verarbeiten? \n 7. Verarbeiten Sie die mich betreffenden Daten mithilfe einer weiteren automatisierten Entscheidungsfindung? Falls ja, informieren Sie mich bitte mit aussagekräftigen Informationen über die involvierte Logik, sowie die Tragweite und die angestrebten Auswirkungen einer derartigen Verarbeitung für mich.\n Ich bitte um eine Eingangsbestätigung meines Antrags.\n \n Aufgrund der in Art. 12 Absatz 3 DSGVO genannten Bearbeitungsfrist von einem Monat, würde ich mich auf Ihre Antwort bis zum " + formatted_date + " freuen. \n \n Für Rückfragen stehe ich Ihnen gerne bereit. \n \n Mit freundlichen Grüßen \n" + name;
var mailToLink = "mailto:[Mailadresse]?body=" + encodeURIComponent(formattedBody) + "&bcc=[deineAdresse]" + "&subject=Datenanfrage";
window.location.href = mailToLink;
}
</script>