rm/chatcontrol_dk
1
0
Fork 0
forked from om/chatcontrol_dk
Code Issues Pull requests Packages Projects Releases Wiki Activity

redesigned website and proposed updates to dialogues

Browse source
This commit is contained in:
Jordan Maris 2023-02-01 10:32:06 +01:00
parent 3ed1f06e2f
commit 652bfe273d
14 changed files with 1742 additions and 538 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

149
da/index.html
View file

@ -1,107 +1,63 @@
<!DOCTYPE html>
<html lang="da-DK">
<head>
<html lang="en-GB">
<head>
<meta charset="utf-8" />
<title>ChatControl: Dine private beskeder skal overvåges!</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="../style.css" />
<link rel="stylesheet" href="../../fonts/stylesheet.css">
<meta name="description"
content="EU Kommissionen vil scanne alle chatbeskeder, selv om hvis du bruger cryptering. Lær mere om det og hvorfor det er en dårlig idé og hvordan vi kan forhindre at planerne bliver til lov." />
<link rel="icon" href="data:," /><!-- no favicon for now -->
</head>
</head>
<body>
<div style="width: 100%">
<div id="content">
<div style="width: 100%">
<!-- center content -->
<div id="content">
<div id="language_choice">
<a href="../da/"><img src="../img/dansk.svg"
alt="dansk sprog"
height="28" /></a>
<a href="../en/"><img src="../img/english.svg"
alt="english language"
height="28" /></a>
<a href="../tok/"><img src="../img/toki-pona.svg"
alt="toki pona"
height="28" /></a>
<a class="about-link" href="about.html">Om chatcontrol.dk</a>
</div>
<h1><div class="besked">ChatControl: Dine private beskeder skal overvåges</div></h1>
<div id="app-area"><!-- two columns -->
<div id="phone_frame">
<div style="background-image: url(../img/phone_frame.svg)">
<object id="movie"
data="../img/chatapp.svg?lang=da"
type="image/svg+xml"></object>
<div style="min-height: 102px"></div><!-- spacer -->
<div id="language_choice">
<a href="../da/"><img src="../img/dansk.svg" alt="dansk sprog" height="28" /></a>
<a href="../en/"><img src="../img/english.svg" alt="english language" height="28" /></a>
<a href="../tok/"><img src="../img/toki-pona.svg" alt="toki pona" height="28" /></a>
<a class="about-link" href="about.html">Om chatcontrol.dk</a>
</div>
<div id="phone">
<div style="background-image: url(../img/phone_frame.svg)">
<object id="movie" data="../img/chatapp.svg?lang=da" type="image/svg+xml"></object>
<div style="min-height: 85px"></div><!-- spacer -->
</div>
</div>
<div id="intro">
<div class="besked">
<h1><strong>Chat Control: </strong>Dine private beskeder skal overvåges</h1>
</div>
</div>
<div id="movie-sidetext">
<p>
Lær mere om ChatControllen og hvorfor det er en dårlig idé, i vores interaktive ChatControl film ude til venstre.
EU-kommissionen har lavet et nyt lovforslag for at beskytte børn mod misbrug. Formålet er godt, men loven er dårlig, fordi den kræver, at kommunikationstjenester skal <span style="white-space: nowrap">overvåges,</span> hvis der er en mulighed for at børn bruger dem, eller hvis der er en mulighed for at dele billeder af børnemisbrug. Det vil påvirke langt de fleste kommunikationstjenester og vil betyde at din kommunikation vil blive overvåget, fordi alle brugere af almindelige kommunikationstjenster vil være mistænkte for børnemisbrug. Konkret betyder det, at dine e-mails, chat-beskeder, video- og voiceopkald bliver analyseret af algorithme, for at vurdere hvis de har illegale indhold. Analysen vil foregår direkt på din computer/smartphone, så at algorithmene kan se hvad du skriver/siger før det bliver crypteret.
</p>
<p>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="40"
viewBox="0 0 20 40">
<polyline points="0,20 20,0 20,40"
fill="#0084FF"
onclick="swipe_viewport()" />
Lær mere om ChatControllen og hvorfor det er en dårlig idé, i vores interaktive ChatControl film ude til venstre.
</p>
<div id="backarrow">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="40" viewBox="0 0 20 40">
<polyline points="0,20 20,0 20,40" fill="#0084FF" onclick="swipe_viewport()" />
</svg>
<p>
Du kan bruge den blå pil for at åbne kontaktlisten
</p>
</div>
<p>
<input type="range"
name="typing_speed"
id="typing_speed"
title="hastighed"
onChange="adjust_typing_speed(this.value)"
value="50"
min="0"
max="100" />
<input type="range" name="typing_speed" id="typing_speed" title="typing speed"
onChange="adjust_typing_speed(this.value)" value="50" min="0" max="100" />
<input type="text" value="50" id="speed_indicator" readonly size="1" />
Hastighed
Speed
</p>
</div>
</div><!-- end #app-area -->
<p>
EU-kommissionen har lavet et nyt lovforslag for at beskytte børn mod misbrug.
Formålet er godt, men loven er dårlig, fordi den kræver, at kommunikationstjenester
skal <span style="white-space: nowrap">overvåges,</span> hvis der er en mulighed for at børn
bruger dem, eller hvis der er en mulighed for at dele billeder af børnemisbrug.
Det vil påvirke langt de fleste kommunikationstjenester og vil betyde at din kommunikation
vil blive overvåget, fordi alle brugere af almindelige kommunikationstjenster
vil være mistænkte for børnemisbrug.
Konkret betyder det, at dine e-mails, chat-beskeder,
video- og voiceopkald bliver analyseret af algorithme,
for at vurdere hvis de har illegale indhold.
Analysen vil foregår direkt på din computer/smartphone,
så at algorithmene kan se hvad du skriver/siger før det bliver crypteret.
</p>
<p>
Hvad kan man så gøre imod lovforslaget? Det er vigtigt at folk bliver oplyste om det.
Del linket til denne side! Snak med andre om det og tal med
<a href="https://www.europarl.europa.eu/meps/da/full-list">dine politikere i Europaparlamentet</a>
om det (eller skriv en venlig e-mail til dem).
Det er vigtigt at der er en offentlig diskussion om emnet og at politikere ved
at loven er en elendig idé - selvom tanken er god.
</p>
<p>
Hvis du vil hjælpe med kampagnen, så kom på vores mailingliste.
Derpå snakker vi om aktioner for at oplyse flere folk i Danmark om chatcontrol.
Vi skriver også om forbedringer af denne hjemmeside.
Hvis du har nogle gode idéer eller hvis du vil hjælpe, så er du meget velkommen til at komme på listen.
For at abonnere mailinglisten, skriv bare en e-mail til
<a href="mailto:campaign-subscribe@lists.chatcontrol.dk">campaign-subscribe@lists.chatcontrol.dk</a>
og følger instrukserne.
</p>
<p><a href="#more">Finde ud af mere</a></p>
</div>
<div id="more">
<p>
Hvad kan man så gøre imod lovforslaget? Det er vigtigt at folk bliver oplyste om det. Del linket til denne side! Snak med andre om det og tal med <a href="https://www.europarl.europa.eu/meps/da/full-list">dine politikere i Europaparlamentet</a> om det (eller skriv en venlig e-mail til dem). Det er vigtigt at der er en offentlig diskussion om emnet og at politikere ved at loven er en elendig idé - selvom tanken er god. </p> <p> Hvis du vil hjælpe med kampagnen, så kom på vores mailingliste. Derpå snakker vi om aktioner for at oplyse flere folk i Danmark om chatcontrol. Vi skriver også om forbedringer af denne hjemmeside. Hvis du har nogle gode idéer eller hvis du vil hjælpe, så er du meget velkommen til at komme på listen. For at abonnere mailinglisten, skriv bare en e-mail til <a href="mailto:campaign-subscribe@lists.chatcontrol.dk">campaign-subscribe@lists.chatcontrol.dk</a> og følger instrukserne. </p>
<h4>Flere informationer</h4>
@ -174,8 +130,9 @@ eu:
&#127465;&#127466;
</li>
</ul>
<h4>chatcontrol.dk får opbakning af</h4>
</div>
<div id="sponsors">
<h4>chatcontrol.dk får opbakning af</h4>
<ul>
<li><a href="https://karenmelchior.eu/">Karen Melchior (MEP)</a></li>
@ -188,17 +145,19 @@ eu:
<li><a href="https://bornhack.dk">Bornhack</a>
<li>Og dig?</li>
</ul>
</div><!-- end #content -->
</div><!-- end center content -->
<script>
function swipe_viewport() {
</div>
</div><!-- end #content -->
</div><!-- end center content -->
<script>
function swipe_viewport() {
document.getElementById('movie').contentDocument.getElementById('to_contact_list_button').onclick();
}
function adjust_typing_speed(new_value) {
}
function adjust_typing_speed(new_value) {
document.getElementById('movie').contentDocument.getElementById('message_input_box').onclick()(100 - new_value);
document.getElementById('speed_indicator').value = new_value;
}
</script>
}
</script>
</body>
</html>

246
en/index.html
View file

@ -1,189 +1,166 @@
<!DOCTYPE html>
<html lang="en-GB">
<head>
<head>
<meta charset="utf-8" />
<title>Chat Control: Your private messages will be scanned!</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="../style.css" />
<link rel="stylesheet" href="../../fonts/stylesheet.css">
<meta name="description"
content="The EU commission wants to scan all chat messages, even if they are encrypted. Learn more about why this is a bad idea and how to prevent those plans from becoming reality." />
<link rel="icon" href="data:," /><!-- no favicon for now -->
</head>
</head>
<body>
<div style="width: 100%"><!-- center content -->
<div id="content">
<div style="width: 100%">
<!-- center content -->
<div id="content">
<div id="language_choice">
<a href="../da/"><img src="../img/dansk.svg"
alt="dansk sprog"
height="28" /></a>
<a href="../en/"><img src="../img/english.svg"
alt="english language"
height="28" /></a>
<a href="../tok/"><img src="../img/toki-pona.svg"
alt="toki pona"
height="28" /></a>
<a class="about-link" href="about.html">About chatcontrol.dk</a>
</div>
<h1><div class="besked">Chat Control: Your private messages will be scanned</div></h1>
<div id="app-area"><!-- two columns -->
<div id="phone_frame">
<div style="background-image: url(../img/phone_frame.svg)">
<object id="movie"
data="../img/chatapp.svg?lang=en"
type="image/svg+xml"></object>
<div style="min-height: 102px"></div><!-- spacer -->
<div id="language_choice">
<a href="../da/"><img src="../img/dansk.svg" alt="dansk sprog" height="28" /></a>
<a href="../en/"><img src="../img/english.svg" alt="english language" height="28" /></a>
<a href="../tok/"><img src="../img/toki-pona.svg" alt="toki pona" height="28" /></a>
<a class="about-link" href="about.html">About chatcontrol.dk</a>
</div>
<div id="phone">
<div style="background-image: url(../img/phone_frame.svg)">
<object id="movie" data="../img/chatapp.svg?lang=en" type="image/svg+xml"></object>
<div style="min-height: 85px"></div><!-- spacer -->
</div>
</div>
<div id="intro">
<div class="besked">
<h1><strong>Chat Control: </strong>Your private messages will be scanned</h1>
</div>
</div>
<div id="movie-sidetext">
<p>
Learn more about Chat Control and why it is a bad idea by watching our
interactive film on the left.
The European Commission is preparing a new law designed to protect children against abuse. The law seeks to
prevent the spread of child abuse material by scanning all citizens' messages. Protecting children is
essential, but the proposed law would allow governments to scan all our communications, seriously infringing
on citizens' rights, and would not actually help address child abuse.
</p>
<p>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="40"
viewBox="0 0 20 40">
<polyline points="0,20 20,0 20,40"
fill="#0084FF"
onclick="swipe_viewport()" />
Discover how the chatcontrol proposal would affect you by watching our
interactive film on the left.
</p>
<div id="backarrow">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="40" viewBox="0 0 20 40">
<polyline points="0,20 20,0 20,40" fill="#0084FF" onclick="swipe_viewport()" />
</svg>
You can use the blue arrow to open the contact list
</p>
<p>
<input type="range"
name="typing_speed"
id="typing_speed"
title="typing speed"
onChange="adjust_typing_speed(this.value)"
value="50"
min="0"
max="100" />
Check out how chatcontrol could affect you in different conversations using the blue back arrow on the
phone.
</p>
</div>
<p>
<input type="range" name="typing_speed" id="typing_speed" title="typing speed"
onChange="adjust_typing_speed(this.value)" value="50" min="0" max="100" />
<input type="text" value="50" id="speed_indicator" readonly size="1" />
Speed
</p>
</div>
</div><!-- end #app-area -->
<p><a href="#more">Find out More</a></p>
</div>
<div id="more">
<p> The EU commission has proposed a new law to protect children against abuse. The cause is good, but the law
itself is bad, because it requires online services with messaging functionality to be surveilled, if there is
a possibility for children to use the service or if users could potentially use the service to exchange child
abuse material. This will affect many communication services and it will mean that <em>your</em> communication
will be scanned, because all users of regular communication services will be treated as suspects for child
abuse. More specifically this means that your e-mails, chat-messages, video- and voicecalls will be analysed
by algorithms, to determine if they contain illegal content. The analysis will happen directly on your
computer/smartphone, so that the algorithms can see what you say/write before it becomes encrypted. </p>
<p> Whan can be done against this proposed law? It is important that more people know about it. Share the link
to this page! Chat with others about it and talk with <a
href="https://www.europarl.europa.eu/meps/en/full-list">your representatives in the European Parliament</a>
about it (or write a nice e-mail to them). It is important that there is a public discussion about this topic,
so that politicians realise that the law is a bad idea even though this is for a good cause </p>
<p> If you want to help the campaign, you can join our mailing list. There we discuss actions for informing more
people in Denmark about chatcontrol. We also talk about improvements of this website. If you have some good
ideas or want to help out, you are also very welcome to join the list. To subscribe to the mailing list,
simply write an e-mail to <a
href="mailto:campaign-subscribe@lists.chatcontrol.dk">campaign-subscribe@lists.chatcontrol.dk</a> and follow
the instructions. </p>
<p>
The EU commission has proposed a new law to protect children against abuse.
The cause is good, but the law itself is bad, because it requires
online services with messaging functionality to be surveilled,
if there is a possibility for children to use the service
or if users could potentially use the service to exchange child abuse material.
This will affect many communication services
and it will mean that <em>your</em> communication will be scanned,
because all users of regular communication services
will be treated as suspects for child abuse.
More specifically this means that your e-mails, chat-messages,
video- and voicecalls will be analysed by algorithms,
to determine if they contain illegal content.
The analysis will happen directly on your computer/smartphone,
so that the algorithms can see what you say/write before it becomes encrypted.
</p>
<h4>More information</h4>
<p>
Whan can be done against this proposed law?
It is important that more people know about it.
Share the link to this page!
Chat with others about it and talk with
<a href="https://www.europarl.europa.eu/meps/en/full-list">your representatives in the European Parliament</a>
about it (or write a nice e-mail to them).
It is important that there is a public discussion about this topic,
so that politicians realise that the law is a bad idea
even though this is for a good cause
</p>
<!--
da:
&#127465;&#127472;
de:
&#127465;&#127466;
uk:
&#127468;&#127463;
eu:
&#127466;&#127482;
-->
<p>
If you want to help the campaign, you can join our mailing list.
There we discuss actions for informing more people in Denmark about chatcontrol.
We also talk about improvements of this website.
If you have some good ideas or want to help out, you are also very welcome to join the list.
To subscribe to the mailing list, simply write an e-mail to
<a href="mailto:campaign-subscribe@lists.chatcontrol.dk">campaign-subscribe@lists.chatcontrol.dk</a>
and follow the instructions.
</p>
<h4>More information</h4>
<!--
da:
&#127465;&#127472;
de:
&#127465;&#127466;
uk:
&#127468;&#127463;
eu:
&#127466;&#127482;
-->
<ul>
<ul>
<li><a href="https://www.europarl.europa.eu/doceo/document/PV-9-2022-09-12-ITM-012_EN.html">
The current proposal (12th of September 2022)</a>
&#127468;&#127463;
&#127466;&#127482;
🇬🇧
🇪🇺
</li>
<li><a href="https://itpol.dk/hoeringssvar/chat-control-eu-forordning">
Consultation response from IT-Pol Denmark to the proposed law</a>
&#127465;&#127472;
🇩🇰
</li>
<li><a href="https://www.panoptikon.dk/eu-vil-scanne-alle-dine-beskeder-og-mails-som-led-i-kampen-mod-borneporno/">
<li><a
href="https://www.panoptikon.dk/eu-vil-scanne-alle-dine-beskeder-og-mails-som-led-i-kampen-mod-borneporno/">
News article on ChatControl (from panoptikon.dk)</a>
&#127465;&#127472;
🇩🇰
</li>
<li><a href="https://chatcontrol.eu">
More details about the planned law and timeline</a>
&#127468;&#127463;
🇬🇧
</li>
<li><a href="https://media.ccc.de/v/bornhack2022-4190-danger-client-side-sca">
Presentation about ChatControl at BornHack</a>
&#127468;&#127463;
🇬🇧
</li>
<li><a href="https://www.altinget.dk/artikel/trods-frygt-for-oeget-overvaagning-tesfaye-ser-positivt-paa-eu-forslag-om-screening-for-seksuelle-overgreb-paa-boern">
<li><a
href="https://www.altinget.dk/artikel/trods-frygt-for-oeget-overvaagning-tesfaye-ser-positivt-paa-eu-forslag-om-screening-for-seksuelle-overgreb-paa-boern">
Mattias Tesfaye (danish minister of justice) is in favour of the surveillance law.</a>
&#127465;&#127472;
🇩🇰
</li>
<li><a href="https://www.theguardian.com/technology/2022/aug/22/google-csam-account-blocked">
Story about a false positive in a chat with a medical doctor</a>
&#127468;&#127463;
🇬🇧
</li>
<li><a href="https://chat-kontrolle.eu/">
German alliance against ChatControl</a>
&#127465;&#127466;
🇩🇪
</li>
<li>
<a href="https://www.technologyreview.com/2022/10/16/1061713/wechat-accounts-begging-tencent-beijing-protest/">
<a
href="https://www.technologyreview.com/2022/10/16/1061713/wechat-accounts-begging-tencent-beijing-protest/">
Chat surveilance in China against pro-democratic protests</a>
&#127468;&#127463;
🇬🇧
</li>
<li>
<a href="https://stopscanningme.eu/en/">
Stop Scanning Me campaign</a>
&#127468;&#127463;
🇬🇧
</li>
<li>
<a href="https://fsfe.org/news/2022/news-20221026-02.html">
If enforced, EU chat control will limit Free Software</a>
&#127468;&#127463;
🇬🇧
</li>
<li>
<a href="https://www.internetsociety.org/resources/doc/2020/fact-sheet-client-side-scanning/">
Fact Sheet: Client-Side Scanning</a>
&#127468;&#127463;
🇬🇧
</li>
<li><a href="https://netzpolitik.org/2022/chatkontrolle-akute-gefahr-fuer-offene-software/">
Chatcontrol is an acute threat against open source in the EU</a>
&#127465;&#127466;
🇩🇪
</li>
</ul>
</ul>
</div>
<div id="sponsors">
<h4>Supporters of chatcontrol.dk</h4>
<h4>Supporters of chatcontrol.dk</h4>
<ul>
<ul>
<li><a href="https://karenmelchior.eu/">Karen Melchior (MEP)</a></li>
<li><a href="https://cryptoaarhus.dk/index_en.html">CryptoAarhus</a></li>
<li><a href="https://cryptohagen.dk/index_en.html">Cryptohagen</a></li>
@ -192,19 +169,22 @@ eu:
<li><a href="https://osaa.dk/">Open Space Aarhus</a></li>
<li><a href="https://www.patrick-breyer.de/en/">Patrick Breyer (MEP)</a></li>
<li><a href="https://bornhack.dk">Bornhack</a>
</li>
<li>And you?</li>
</ul>
</div><!-- end #content -->
</div><!-- end center content -->
<script>
function swipe_viewport() {
</ul>
</div>
</div><!-- end #content -->
</div><!-- end center content -->
<script>
function swipe_viewport() {
document.getElementById('movie').contentDocument.getElementById('to_contact_list_button').onclick();
}
function adjust_typing_speed(new_value) {
}
function adjust_typing_speed(new_value) {
document.getElementById('movie').contentDocument.getElementById('message_input_box').onclick()(100 - new_value);
document.getElementById('speed_indicator').value = new_value;
}
</script>
}
</script>
</body>
</html>

BIN
fonts/Inter-Black.woff Normal file
View file

Binary file not shown.

BIN
fonts/Inter-Black.woff2 Normal file
View file

Binary file not shown.

BIN
fonts/Inter-Bold.woff Normal file
View file

Binary file not shown.

BIN
fonts/Inter-Bold.woff2 Normal file
View file

Binary file not shown.

BIN
fonts/Inter-Light.woff Normal file
View file

Binary file not shown.

BIN
fonts/Inter-Light.woff2 Normal file
View file

Binary file not shown.

BIN
fonts/Inter-Regular.woff Normal file
View file

Binary file not shown.

BIN
fonts/Inter-Regular.woff2 Normal file
View file

Binary file not shown.

36
fonts/stylesheet.css Normal file
View file

@ -0,0 +1,36 @@
@font-face {
font-family: 'Inter';
src: url('Inter-Black.woff2') format('woff2'),
url('Inter-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('Inter-Bold.woff2') format('woff2'),
url('Inter-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('Inter-Light.woff2') format('woff2'),
url('Inter-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('Inter-Regular.woff2') format('woff2'),
url('Inter-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

1018
img/chatapp (copy).svg Normal file
View file

File diff suppressed because it is too large Load diff
Side by side

After

Width:  |  Height:  |  Size: 44 KiB

487
img/chatapp.svg
View file

@ -1,9 +1,6 @@
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
version="1.1"
width="300"
height="600"
viewBox="0 0 300 600"
@ -11,67 +8,181 @@
overflow="auto"
style="font-family: sans; border-radius: 10px;"
id="movie"
>
<defs>
<symbol id="kaereste_foto" width="60" height="200">
<g style="fill: pink; stroke: pink;">
<circle cx="20" cy="20" r="20" />
<line x1="20" y1="40" x2="20" y2="60" />
<ellipse cx="20" cy="110" rx="10" ry="50" />
sodipodi:docname="chatapp.svg"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview90"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
showgrid="false"
inkscape:zoom="1.1125147"
inkscape:cx="371.23105"
inkscape:cy="272.80538"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="contact_name_box" />
<defs
id="defs55">
<symbol
id="kaereste_foto"
width="60"
height="200">
<g
style="fill: pink; stroke: pink;"
id="g18">
<circle
cx="20"
cy="20"
r="20"
id="circle2" />
<line
x1="20"
y1="40"
x2="20"
y2="60"
id="line4" />
<ellipse
cx="20"
cy="110"
rx="10"
ry="50"
id="ellipse6" />
<!-- left arm -->
<polyline fill="none"
points="15,70 5,50 0,40" />
<polyline
fill="none"
points="15,70 5,50 0,40"
id="polyline8" />
<!-- right arm -->
<polyline fill="none"
points="25,70 35,50 40,40" />
<polyline
fill="none"
points="25,70 35,50 40,40"
id="polyline10" />
<!-- left leg -->
<polyline fill="none"
points="15,155 5,135 0,125" />
<polyline
fill="none"
points="15,155 5,135 0,125"
id="polyline12" />
<!-- right leg -->
<polyline fill="none"
points="25,155 35,135 40,125" />
<polyline
fill="none"
points="25,155 35,135 40,125"
id="polyline14" />
<!-- the thing -->
<text x="14" y="160" style="font: bold 20px sans-serif" fill="black">?</text>
<text
x="14"
y="160"
style="font: bold 20px sans-serif"
fill="black"
id="text16">?</text>
</g>
</symbol>
<symbol id="strand" width="80" height="1200">
<rect width="80" height="130" fill="yellow"></rect>
<g style="fill: pink; stroke: pink;">
<circle cx="60" cy="20" r="20" />
<symbol
id="strand"
width="80"
height="1200">
<rect
width="80"
height="130"
fill="yellow"
id="rect21" />
<g
style="fill: pink; stroke: pink;"
id="g35">
<circle
cx="60"
cy="20"
r="20"
id="circle23" />
<!-- spine -->
<line x1="55" y1="40" x2="22" y2="100" />
<line
x1="55"
y1="40"
x2="22"
y2="100"
id="line25" />
<!-- left leg -->
<polyline fill="none" points="20,100 60,90 35,125" />
<polyline
fill="none"
points="20,100 60,90 35,125"
id="polyline27" />
<!-- right leg -->
<polyline fill="none" points="20,100 50,75 25,120" />
<polyline
fill="none"
points="20,100 50,75 25,120"
id="polyline29" />
<!-- left arm -->
<polyline fill="none" points="37,70 20,45" />
<polyline
fill="none"
points="37,70 20,45"
id="polyline31" />
<!-- right arm + bucket -->
<polyline fill="none" points="39,71 70,50" />
<polyline
fill="none"
points="39,71 70,50"
id="polyline33" />
</g>
</symbol>
<symbol id="flag_denmark" width="20" height="15">
<path fill="#c8102e" d="M0,0H20V15H0Z"/>
<path fill="#fff" d="M0,6H6V0H8V6H20V8H8V15H6V8H0Z"/>
<symbol
id="flag_denmark"
width="20"
height="15">
<path
fill="#c8102e"
d="M0,0H20V15H0Z"
id="path38" />
<path
fill="#fff"
d="M0,6H6V0H8V6H20V8H8V15H6V8H0Z"
id="path40" />
</symbol>
<symbol id="flag_uk" width="50" height="30">
<clipPath id="t">
<path d="M25,15h25v15zv15h-25zh-25v-15zv-15h25z"/>
<symbol
id="flag_uk"
width="50"
height="30">
<clipPath
id="t">
<path
d="M25,15h25v15zv15h-25zh-25v-15zv-15h25z"
id="path43" />
</clipPath>
<path d="M0,0v30h50v-30z" fill="#012169"/>
<path d="M0,0 50,30M50,0 0,30" stroke="#fff" stroke-width="6"/>
<path d="M0,0 50,30M50,0 0,30" clip-path="url(#t)" stroke="#C8102E" stroke-width="4"/>
<path d="M-1 11h22v-12h8v12h22v8h-22v12h-8v-12h-22z" fill="#C8102E" stroke="#FFF" stroke-width="2"/>
<path
d="M0,0v30h50v-30z"
fill="#012169"
id="path46" />
<path
d="M0,0 50,30M50,0 0,30"
stroke="#fff"
stroke-width="6"
id="path48" />
<path
d="M0,0 50,30M50,0 0,30"
clip-path="url(#t)"
stroke="#C8102E"
stroke-width="4"
id="path50" />
<path
d="M-1 11h22v-12h8v12h22v8h-22v12h-8v-12h-22z"
fill="#C8102E"
stroke="#FFF"
stroke-width="2"
id="path52" />
</symbol>
</defs>
<script type="application/ecmascript">
<![CDATA[
</defs>
<script
type="application/ecmascript"
id="script57"><![CDATA[
'use strict';
const svgns = "http://www.w3.org/2000/svg";
@ -407,7 +518,7 @@ function start_chat(index) {
let contact = contact_list[current_language][index];
let who = contact.name;
let indicator = document.getElementById('contact_indicator');
indicator.childNodes[0].data = `Kontakt: ${who}`;
indicator.childNodes[0].data = `Contact: ${who}`;
removeAllChildren(document.getElementById('messages'));
swipe_viewport();
@ -651,18 +762,23 @@ async function dialog_kaereste_da() {
async function dialog_kaereste_en() {
let d = new Dialog();
current_dialog = d;
await d.me('Hi beautiful');
await d.you('hi, I just thought about you');
await d.you("and that's why I have taken a sexy picture");
await d.you('#kaereste_foto');
await d.me('Thanks! I missed that!', true);
await d.me('you still look so young.');
await d.me('I think we have to be careful, because our messages are being read');
await d.you('What the fuck??? Who is watching us?????');
await d.me('It can be that the chat provider does this, because they are allowed to search for illegal material');
await d.me('But in the future it will also become mandatory to scan chat messages in the EU');
await d.me('And if a message looks like child pornography then the police will get a copy of it');
await d.you("I don't want to share my nudes with the police. This is my body and I decide who I share it with!");
await d.me('Morning, gourgeous');
await d.you('Hey ;) how are you doing?');
await d.you("I'm feeling... cheeky");
await d.you('#kaereste_foto', true);
await d.me('Wow 😍! You look STUNNING', true);
await d.me('oh no... i think our conversation was just reported...');
await d.you('Reported????? What do you mean?');
await d.me('There is this new EU law, chatcontrol, it scans everything in our conversations, even when they are encrypted');
await d.you('But why did it report us?');
await d.me('It uses Artificial Intelligence to scan pictures, I think it thinks you are underage.. ');
await d.you("BUT I'M 27!");
await d.me("Yeah... it's really unreliable. I heard it is even worse for minorities and trans folk...");
await d.you('So what happens now?');
await d.me('Well, the police might see the picture...');
await d.you("WHAT?! THAT IS INSANE! I DON'T WANT THE POLICE TO SEE MY NUDES.");
await d.you("WHAT IF THEY SHARE THEM OR POST THEM ONLINE?");
await d.you("THIS IS A MASSIVE INFRINGEMENT ON MY PRIVACY!");
await d.end('Your better half is offline now');
}
@ -754,24 +870,31 @@ async function dialog_nabopige_da() {
async function dialog_nabopige_en() {
let d = new Dialog();
current_dialog = d;
await d.you("Guess who's birthday it is soon!");
await d.me("It's yours?");
await d.you('Right! That was maybe too easy');
await d.me('How old will you be?');
await d.you('ten');
await d.you('I am excited for the party. I have invited a lot of people');
await d.you('You are also invited!');
await d.you('Hi, I want to tell you a secret');
await d.you("But I just can't do that in the chat");
await d.you('Because what we write here is being analysed');
await d.you('And it is not going to be a secret when there are others who read the messages');
await d.me('You can tell me the secret tomorrow, when I come to your house', true);
await d.me('I am surprised that you know about the chat surveillance');
await d.you("Yes, it is stupid. I have read about it and I really don't like it");
await d.you('It is better to have adult friends whom I can trust that a computer who reads everything that I write.');
await d.me('Completely agree');
await d.me('Children also need their secrets and confidentiality');
await d.end('The girl is gone now');
await d.you("Hi! It's Ellie!");
await d.me("Ellie? What are you doing with your mums phone?");
await d.you("guess whos birthday it is soon!");
await d.me("Yours?");
await d.you("yep! I'm having a party on friday! mummy told me to invite you!");
await d.me("How old will you be?");
await d.you("ten");
await d.me("Ten? Wow! I wouldn't want to miss your tenth birthday party! I promise i'll be there!");
await d.you("how old are you?");
await d.me("Very old! I'm 48!", true);
await d.you("you must have lots of candles on your cake!");
await d.me("Could you give the phone to your mum please?");
await d.you("okay");
await d.you("Hi! whats up? can you make it to the party?");
await d.me("Yeah! of course, but just to warn you: i think our conversation just got reported");
await d.you("Reported? why?");
await d.me("It is chatcontrol, a new EU law that scans all our conversations.");
await d.me("It's supposed to protect kids from abuse, but sometimes it flags totally normal conversations...");
await d.you("That is crazy :o So will the police read our conversation?");
await d.me("I'm not sure...");
await d.you("What a waste of time!");
await d.you("the police don't even have the time to deal with the cases they know about, let alone to investigate a 10 year olds birthday invitation");
await d.me("Yeah... I have a friend who is a policeman, he says they have to review loads of reports now...");
await d.you("What a disaster... anyway, see you at the party!");
await d.end("Don't forget to get Ellie a present!");
}
async function dialog_erasmus_da() {
@ -912,62 +1035,6 @@ async function dialog_nerd_en() {
await d.end('The nerd is rebooting');
}
async function dialog_hacker_da() {
let d = new Dialog();
current_dialog = d;
await d.you('hejsa');
await d.me('hej, jeg har ikke hørt fra dig i lang tid!');
await d.you('ja, jeg havde lidt travlt på grund af chatcontrollen');
await d.me('åh, så er du allerede bekendt med det?');
await d.you('Ja, angreb på privatliv er noget vi hackere tager meget alvorligt.');
await d.you('Fordi vi synes at livet på nettet skal være så privat som det "reelle" liv');
await d.me('Og hvad skal man gøre så?');
await d.you('nå, rent teknisk er der en nemt løsning: Man krypterer sine beskeder før skanningen kan få fat af dem.');
await d.you('Dvs. at du bruger en ektra software som beskytter dine beskeder');
await d.you('Jeg har faktisk lavet sådan en software. Det er en plug-in til vores chatprogram');
await d.you('Og med min plug-in er du sikkert');
await d.you('Jeg sender dig lige filen');
await d.me('Tak. Jeg har modtaget den.');
await d.me('Din plug-in bliver installeret');
await d.you('Jeg kan godt forestille mig at forbrydere vil bruge noget lignende i fremtiden for at undgå chatcontrollen');
await d.you('Og så rammer chatcontrollen kun uskyldige borgere');
await d.me('installationen er færdig. Jeg aktiverer det lige.');
await d.me('ehlnwo dfgien dfignhhug enodeonia endtrio nedosdiaen srnisdite ng');
await d.you('rondhkd rtn3vgoh niartne sgornidena sudtor giean drtanodfg undae');
await d.you('onfdgnxrt nare ndiatrsn dxvun gdnra edt nadhndgfn air nd');
await d.me('endtrion idfgen teria non daenr bdoadtern udnre draien diae rtdnoa');
await d.me('rian dondvglne dgon fgdndul noa gfhdfghsgndga odnane dodfgvunle da');
await d.end('chatcontrollen virker ikke');
}
async function dialog_hacker_en() {
let d = new Dialog();
current_dialog = d;
await d.you('Hi there');
await d.me("hi, I haven't heard from you in a long time");
await d.you('yeah, I was busy because of chatcontrol');
await d.me('oh, so you already know about it?');
await d.you('yes, attacks on privacy are something that we hackers take very seriously.');
await d.you('because we think that the private life on the net should be as private as the "real" life');
await d.me('and what should be done about it then?');
await d.you('well, from a technical perspective there is a simple solution: You encrypt your messages before the scanner can get a hold of them');
await d.you('that means you use an extra software that protects your messages');
await d.you('I have actually created such a software. It is a plugin to our chatprogram');
await d.you('and with my plugin you will be safe');
await d.you('I will send you the file right away');
await d.me('Thanks. I have received it.');
await d.me('Your plugin is being installed');
await d.you('I can imagine that crimials will use something similar in the future to avoid chatcontrol');
await d.you('and then chatcontrol will only affect innocent citizens');
await d.me('the installation is done. I will activate it now.');
await d.me('ehlnwo dfgien dfignhhug enodeonia endtrio nedosdiaen srnisdite ng');
await d.you('rondhkd rtn3vgoh niartne sgornidena sudtor giean drtanodfg undae');
await d.you('onfdgnxrt nare ndiatrsn dxvun gdnra edt nadhndgfn air nd');
await d.me('endtrion idfgen teria non daenr bdoadtern udnre draien diae rtdnoa');
await d.me('rian dondvglne dgon fgdndul noa gfhdfghsgndga odnane dodfgvunle da');
await d.end('chatcontrol does not work');
}
const contact_list = {
"da": [
@ -986,9 +1053,7 @@ const contact_list = {
{name: "Erasmus",
dialog: dialog_erasmus_da},
{name: "Nørd",
dialog: dialog_nerd_da},
{name: "Hacker",
dialog: dialog_hacker_da}
dialog: dialog_nerd_da}
],
"en": [
{name: "Friend",
@ -1001,14 +1066,12 @@ const contact_list = {
dialog: dialog_politi_en},
{name: "Chat support",
dialog: dialog_support_en},
{name: "Neighborhood girl",
{name: "Neighbor",
dialog: dialog_nabopige_en},
{name: "Erasmus",
dialog: dialog_erasmus_en},
{name: "Nerd",
dialog: dialog_nerd_en},
{name: "Hacker",
dialog: dialog_hacker_en}
dialog: dialog_nerd_en}
]
};
@ -1037,42 +1100,104 @@ function run() {
fill_contact_list(current_language);
start_chat(current_discussion_index);
}
]]>
</script>
<!-- [right] contact name view -->
<g id="contact_name_box">
<rect x="300" y="0" width="300" height="50" fill="#F5F5F5"/>
<polyline points="300,20 320,0 320,40" fill="#0084FF" onclick="swipe_viewport()" id="to_contact_list_button" />
<polyline points="560,20 600,20 580,0" fill="#0084FF" onclick="scroll_up()" />
<polyline points="560,30 600,30 580,50" fill="#0084FF" onclick="scroll_down()" />
<text x="325" y="30" id="contact_indicator">loading...</text>
<use href="#flag_denmark" x="500" y="35" onclick="switch_language('da')" />
<g transform="scale(0.5,0.5)">
<use href="#flag_uk" x="1050" y="70" onclick="switch_language('en')" />
]]></script>
<!-- [right] contact name view -->
<g
id="contact_name_box">
<rect
x="300"
y="0"
width="300"
height="50"
fill="#F5F5F5"
id="rect59" />
<polyline
points="300,20 320,0 320,40"
fill="#0084ff"
onclick="swipe_viewport()"
id="to_contact_list_button"
transform="translate(6,4)" />
<text
x="343"
y="28"
id="contact_indicator"
inkscape:label="contact_indicator">loading...</text>
<g
transform="scale(0.5,0.5)"
id="g71" />
</g>
</g>
<!-- [right] messages view -->
<rect id="message_box" x="300" y="50" width="300" height="450" fill="white" />
<g id="messages"></g>
<!-- [right] message status -->
<rect id="message_status_box" x="300" y="520" fill="#FF7B00" width="300" height="30" />
<text id="message_status" x="310" y="540" fill="white">status</text>
<!-- [right] text input -->
<rect id="message_input_box" x="300" y="550" stroke="black" fill="white" width="250" height="50" onclick="return set_typing_speed" />
<rect id="message_submit_box" x="550" y="550" stroke="black" fill="#CCCCCC" width="50" height="50" />
<text id="message_input_data" x="310" y="575" fill="black"></text>
<text id="message_submit_button" x="555" y="580" fill="black">SEND</text>
<!-- [left] contact list -->
<rect x="0" y="0" width="300" height="50" fill="#E4E6EB" />
<text x="60" y="30">Dine kontakter</text>
<rect x="0" y="50" width="300" height="550" style="stroke: green; stroke-width: 0px" fill="white" />
<!-- contact list -->
<g id="contacts"></g>
<!-- [right] messages view -->
<rect
id="message_box"
x="300"
y="50"
width="300"
height="450"
fill="white" />
<g
id="messages" />
<!-- [right] message status -->
<rect
id="message_status_box"
x="300"
y="520"
fill="#FF7B00"
width="300"
height="30" />
<text
id="message_status"
x="310"
y="540"
fill="white">status</text>
<!-- [right] text input -->
<rect
id="message_input_box"
x="300"
y="550"
stroke="black"
fill="white"
width="250"
height="50"
onclick="return set_typing_speed" />
<rect
id="message_submit_box"
x="550"
y="550"
stroke="black"
fill="#CCCCCC"
width="50"
height="50" />
<text
id="message_input_data"
x="310"
y="575"
fill="black" />
<text
id="message_submit_button"
x="555"
y="580"
fill="black">SEND</text>
<!-- [left] contact list -->
<rect
x="0"
y="0"
width="300"
height="50"
fill="#E4E6EB"
id="rect82" />
<text
x="60"
y="30"
id="text84">Dine kontakter</text>
<rect
x="0"
y="50"
width="300"
height="550"
style="stroke: green; stroke-width: 0px"
fill="white"
id="rect86" />
<!-- contact list -->
<g
id="contacts" />
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 47 KiB

122
style.css
View file

@ -1,6 +1,76 @@
/*First lets set some basic styles*/
body {
font-family:"Inter", Arial, Helvetica, sans-serif;
color:white;
background-image: linear-gradient(to right, #434343 0%, black 100%);
font-size:1.1em;
}
a{
color:rgb(0, 191, 255);
font-weight:bold;
text-decoration:none;
}
p{
line-height: 1.5;
}
/*Throw a CSS grid in for layout*/
#content {
max-width: 600px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(350px,4fr) minmax(30px,0.5fr) minmax(350px,4fr);
grid-column-gap: 0px;
grid-row-gap: 20px;
align-items: center;
max-width:1000px;
margin:auto;
}
/*h1 overrides for the bubble*/
#intro h1 {
font-weight:Normal;
}
#intro h1 strong{
font-weight:bolder;
}
#intro p{
padding-left:10px;
margin: 15px 0 15px 0;
}
.div4 { grid-area: 3 / 1 / 4 / 4; }
.div5 { grid-area: 4 / 1 / 5 / 4; }
#language_choice{
grid-area: 1 / 1 / 2 / 4;
font-size: 24px;
}
#language_choice img{
object-fit:cover;
width:42px;
border-radius:5px;
}
#intro{
grid-area: 2 / 3 / 3 / 4;
}
#phone{
grid-area: 2 / 1 / 3 / 2;
}
#more{
padding-top:80px;
grid-area: 3 / 1 / 3 / 4;
}
#more, #sponsors{
font-size:1.3em;
}
#sponsors{
grid-area: 4 / 1 / 4 / 4;
}
.besked {
@ -11,26 +81,26 @@
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
position: relative;
}
p {
margin-left: 10px;
border: 1px dashed black;
padding: 5px;
max-width: 800px;
.besked:after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 0;
height: 0;
border: 20px solid transparent;
border-left-color: #0084FF;
border-right: 0;
border-bottom: 0;
margin-top: -10px;
margin-right: -20px;
}
#app-area {
display: grid;
grid-template-columns: 350px 240px;
gap: 10px;
grid-auto-rows: minmax(350px, auto);
}
#phone_frame {
margin-left: 10px;
grid-column: 1;
grid-row: 1;
#phone>div{
background-repeat:no-repeat;
}
#movie {
@ -43,6 +113,22 @@ p {
grid-row: 1;
}
#backarrow{
display: flex;
align-items: center;
}
a[href="#more"]{
display:inline-block;
padding: 6px 8px;
border-radius:5px;
background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
font-size:1.3em;
color:rgba(39, 15, 15, 0.746);
border:1px solid rgba(255, 255, 255, 0.717);
float:right;
}
.about-link {
float: right;
}