om/chatcontrol_dk
2
0
Fork 1
Code Issues Pull requests Projects Releases Wiki Activity

Compare commits

base: om:00677633bceefc304973657cc1ef2bd14950c04c
Branches Tags
om:master
om:feature/links-section
om:feature/more-mobile-phone
om:feature/meta-tags
om:feature/automatic-language-switch
om:fix/finish-mor-dialog
..
compare: om:f5472112cd52a0e1670aa4d090f9141ec4f0d684
Branches Tags
om:master
om:feature/links-section
om:feature/more-mobile-phone
om:feature/meta-tags
om:feature/automatic-language-switch
om:fix/finish-mor-dialog

No commits in common. "00677633bceefc304973657cc1ef2bd14950c04c" and "f5472112cd52a0e1670aa4d090f9141ec4f0d684" have entirely different histories.
00677633bc ... f5472112cd

5 changed files with 37 additions and 246 deletions
Show stats Expand all files Collapse all files

60
da/index.html
View file

@ -7,8 +7,6 @@
<link rel="stylesheet" type="text/css" href="../style.css" /> <link rel="stylesheet" type="text/css" href="../style.css" />
</head> </head>
<body> <body>
<div style="width: 100%">
<div id="content">
<div id="language_choice"> <div id="language_choice">
<a href="../en/"><img src="../img/english.svg" <a href="../en/"><img src="../img/english.svg"
@ -19,54 +17,33 @@
height="28" /></a> height="28" /></a>
</div> </div>
<h1><div class="besked">ChatControl: Dine private beskeder skal overvåges</div></h1> <h1><span class="besked">ChatControl: Dine private beskeder skal overvåges</span></h1>
<p> <p>
EU-kommissionen har lavet et nyt lovforslag for at beskytte børn mod misbrug&#x1F607;. EU-kommissionen har lavet et nyt lovforslag for at beskytte børn mod misbrug.
Formålet er godt, men loven er dårlig&#x1F914;, fordi den kræver, at kommunikationstjenester Formålet er godt, men loven er dårlig, fordi den kræver, at kommunikationstjenester
skal overvåges&#x1F9D0;, hvis der er en mulighed for at børn&#x1F476; skal overvåges, hvis der er en mulighed for at børn
bruger dem, eller hvis der er en mulighed for at dele billeder af børnemisbrug&#x1F4F2;. bruger dem, eller hvis der er en mulighed for at dele billeder af børnemisbrug.
Det vil påvirke langt de fleste chat tjenester og vil betyde at din kommunikation Det vil påvirke langt de fleste chat tjenester og vil betyde at din kommunikation
vil blive overvåget&#x1F4F3;, fordi alle brugere af almindelige kommunikationstjenster vil blive overvåget, fordi alle brugere af almindelige kommunikationstjenster
vil være mistænkte for børnemisbrug&#x1F46E;. vil være mistænkte for børnemisbrug.
</p> </p>
<div id="app-area"><!-- two columns --> <div id="app-area">
<div id="phone_frame"> <object id="movie" data="../img/chatapp.svg" type="image/svg+xml"></object>
<div style="background-image: url(../img/phone_frame.svg)"> <p id="movie-sidetext">
<object id="movie"
data="../img/chatapp.svg?lang=da"
type="image/svg+xml"></object>
<div style="min-height: 102px"></div><!-- spacer -->
</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. Lær mere om ChatControllen og hvorfor det er en dårlig idé, i vores interaktive ChatControl film ude til venstre.
</p> </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()" />
</svg>
Du kan bruge den blå pil for at åbne kontaktlisten
</p>
</div> </div>
</div><!-- end #app-area -->
<p> <p>
Hvad kan man så gøre imod lovforslaget?&#x1F607; Det er vigtigt at folk bliver oplyste om det&#x1F4E3;. 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 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>&#127466;&#127482; <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). om det (eller skriv en venlig e-mail til dem).
Det er vigtigt at der er en offentlig diskussion om emnet&#x1F5E8; og at politikere ved Det er vigtigt at der er en offentlig diskussion om emnet og at politikere ved
at loven er en elendig idé&#x1F640; - selvom tanken er god&#x1F63E;. at loven er en elendig idé - selvom tanken er god.
</p> </p>
<h4>Flere informationer</h4> <h4>Flere informationer</h4>
@ -101,12 +78,5 @@ at loven er en elendig idé&#x1F640; - selvom tanken er god&#x1F63E;.
</li> </li>
</ul> </ul>
</div><!-- end #content -->
</div><!-- end center content -->
<script>
function swipe_viewport() {
document.getElementById('movie').contentDocument.getElementById('to_contact_list_button').onclick();
}
</script>
</body> </body>
</html> </html>

66
en/index.html
View file

@ -7,8 +7,6 @@
<link rel="stylesheet" type="text/css" href="../style.css" /> <link rel="stylesheet" type="text/css" href="../style.css" />
</head> </head>
<body> <body>
<div style="width: 100%"><!-- center content -->
<div id="content">
<div id="language_choice"> <div id="language_choice">
<a href="../en/"><img src="../img/english.svg" <a href="../en/"><img src="../img/english.svg"
@ -19,59 +17,38 @@
height="28" /></a> height="28" /></a>
</div> </div>
<h1><div class="besked">Chat Control: Your private messages will be scanned</div></h1> <h1><span class="besked">Chat Control: Your private messages will be scanned</span></h1>
<p> <p>
The EU commission has proposed a new law to protect children against abuse&#x1F607;. The EU commission has proposed a new law to protect children against abuse.
The cause is good, but the law itself is bad&#x1F914;, because it requires that The cause is good, but the law itself is bad, because it requires that
online services with messaging functionality have to be surveilled&#x1F9D0; online services with messaging functionality have to be surveilled
if there is a possibility for children&#x1F476; to use the service if there is a possibility for children to use the service
or if users could potentially use the service to exchange child abuse material&#x1F4F2;. or if users could potentially use the service to exchange child abuse material.
This will affect many communication services This will affect many communication services
and it will mean that <em>your</em> communication will be scanned&#x1F4F3;, and it will mean that <em>your</em> communication will be scanned,
because all users of regular communication services because all users of regular communication services
will be treated as suspects for child abuse&#x1F46E;. will be treated as suspects for child abuse.
</p> </p>
<div id="app-area"><!-- two columns --> <div id="app-area">
<div id="phone_frame"> <object id="movie" data="../img/chatapp.svg" type="image/svg+xml"></object>
<div style="background-image: url(../img/phone_frame.svg)"> <p id="movie-sidetext">
<object id="movie"
data="../img/chatapp.svg?lang=en"
type="image/svg+xml"></object>
<div style="min-height: 102px"></div><!-- spacer -->
</div>
</div>
<div id="movie-sidetext">
<p>
Learn more about Chat Control and why it is a bad idea by watching our Learn more about Chat Control and why it is a bad idea by watching our
interactive film on the left. interactive film on the left.
</p> </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()" />
</svg>
You can use the blue arrow to open the contact list
</p>
</div> </div>
</div><!-- end #app-area -->
<p> <p>
Whan can be done against this proposed law?&#x1F607; Whan can be done against this proposed law?
It is important that more people know about it&#x1F4E3;. It is important that more people know about it.
Share the link to this page! Share the link to this page!
Chat with others about it and talk with 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>&#127466;&#127482; <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). about it (or write a nice e-mail to them).
It is important that there is a public discussion about this topic&#x1F5E8;, It is important that there is a public discussion about this topic,
so that politicians realise that the law is a bad idea&#x1F640; so that politicians realise that the law is a bad idea
even though this is for a good cause&#x1F63E; even though this is for a good cause.
</p> </p>
<h4>More information</h4> <h4>More information</h4>
@ -106,12 +83,5 @@ even though this is for a good cause&#x1F63E;
</li> </li>
</ul> </ul>
</div><!-- end #content -->
</div><!-- end center content -->
<script>
function swipe_viewport() {
document.getElementById('movie').contentDocument.getElementById('to_contact_list_button').onclick();
}
</script>
</body> </body>
</html> </html>

6
img/chatapp.svg
View file

@ -68,9 +68,7 @@ const typing_speed = 50;
var conversation_count = 0; var conversation_count = 0;
var current_dialog = null; var current_dialog = null;
var current_language = "da";
var current_language = new URLSearchParams(location.search).get('lang') ?? 'da';
var current_dialog_fn = null; var current_dialog_fn = null;
/// SVG 1.1 doesn't do proper text splitting into several lines. /// SVG 1.1 doesn't do proper text splitting into several lines.
@ -700,7 +698,7 @@ async function dialog_nabopige_en() {
<!-- [right] contact name view --> <!-- [right] contact name view -->
<g id="contact_name_box"> <g id="contact_name_box">
<rect x="300" y="0" width="300" height="50" fill="#F5F5F5"/> <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="300,20 320,0 320,40" fill="#0084FF" onclick="swipe_viewport()" />
<polyline points="560,20 600,20 580,0" fill="#0084FF" onclick="scroll_up()" /> <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()" /> <polyline points="560,30 600,30 580,50" fill="#0084FF" onclick="scroll_down()" />
<text x="325" y="30" id="contact_indicator">loading...</text> <text x="325" y="30" id="contact_indicator">loading...</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

137
img/phone_frame.svg
View file

@ -1,137 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="480"
height="1020"
viewBox="20 100 130 100"
version="1.1"
id="svg8"
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14, custom)"
sodipodi:docname="phone_frame.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<!--
license: public domain
origin: https://freesvg.org/mobile-phone-silhouette
-->
<title
id="title3727">generic_edge_android_phone_device</title>
<defs
id="defs2">
<linearGradient
inkscape:collect="always"
id="linearGradient3719">
<stop
style="stop-color:#666666;stop-opacity:1"
offset="0"
id="stop3715" />
<stop
id="stop3725"
offset="0.08058813"
style="stop-color:#f3f3f3;stop-opacity:1;" />
<stop
id="stop3723"
offset="0.90476203"
style="stop-color:#ffffff;stop-opacity:1" />
<stop
style="stop-color:#f2f2f2;stop-opacity:0;"
offset="1"
id="stop3717" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3719"
id="linearGradient3721"
x1="109.84773"
y1="45.198696"
x2="129.29164"
y2="45.131882"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(4.9876188,0,0,6.181233,-528.78249,-67.440936)" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.4"
inkscape:cx="92.142857"
inkscape:cy="586.78571"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1676"
inkscape:window-height="1004"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:showpageshadow="2"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>generic_edge_android_phone_device</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-106.49998)">
<rect
id="rect10"
width="89.313583"
height="200.25793"
x="21.762379"
y="122.34576"
style="stroke-width:1.46436"
ry="14.773128"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<rect
style="fill:url(#linearGradient3721);fill-opacity:1;stroke:none;stroke-width:1.55052"
id="rect20"
width="85.314461"
height="168.09663"
x="23.761925"
y="133.67665"
ry="5.9881759"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<circle
style="fill:#f2f2f2;stroke:none;stroke-width:1.31964"
id="path22"
cx="66.419189"
cy="311.68604"
r="5.8320432"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<rect
style="fill:#f2f2f2;stroke:none;stroke-width:1.31964076"
id="rect24"
width="19.794613"
height="2.7099769"
x="56.521885"
y="126.9505"
ry="1.3549885"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 3.9 KiB

14
style.css
View file

@ -1,8 +1,3 @@
#content {
max-width: 600px;
margin: 0 auto;
}
.besked { .besked {
color: #FFFFFF; color: #FFFFFF;
background-color: #0084FF; background-color: #0084FF;
@ -22,22 +17,17 @@ p {
#app-area { #app-area {
display: grid; display: grid;
grid-template-columns: 350px 240px; grid-template-columns: 350px 300px;
gap: 10px; gap: 10px;
grid-auto-rows: minmax(350px, auto); grid-auto-rows: minmax(350px, auto);
} }
#phone_frame { #movie {
margin-left: 10px; margin-left: 10px;
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
} }
#movie {
margin-left: 17px;
margin-top: 77px;
}
#movie-sidetext { #movie-sidetext {
grid-column: 2; grid-column: 2;
grid-row: 1; grid-row: 1;