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

Compare commits

base: 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
...
compare: 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

8 commits
f5472112cd ... 00677633bc

Author SHA1 Message Date
om 00677633bc Merge branch 'master' into feature/links-section 
To resove merge conflict
 2022-10-14 12:06:29 +02:00
om cd65e92e9b Merge pull request 'Add mobile phone frame to page' (#6) from feature/more-mobile-phone into master 
Reviewed-on: #6
no language checks needed
 2022-10-14 10:02:41 +00:00
om becf04a5b4 Add mobile phone frame to page 2022-10-14 11:59:22 +02:00
om 13105b1c60 typo 2022-10-13 23:34:42 +02:00
om 16eff4c895 Style things a bit more up 2022-10-13 23:32:36 +02:00
om 942b948bb2 Merge pull request 'Detect language based on URL' (#4) from feature/automatic-language-switch into master 
Reviewed-on: #4
 2022-10-13 19:07:39 +00:00
om 2d13672dde Use URLSearchParams for more robust lang selection 2022-10-10 07:30:58 +02:00
om 758367ba69 Detect language based on URL 
If the outer website is english/danish, the chatapp will use the same
language.
 2022-10-09 22:13:21 +02:00
5 changed files with 247 additions and 38 deletions
Show stats Expand all files Collapse all files

62
da/index.html
View file

@ -7,6 +7,8 @@
<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"
@ -17,33 +19,54 @@
height="28" /></a> height="28" /></a>
</div> </div>
<h1><span class="besked">ChatControl: Dine private beskeder skal overvåges</span></h1> <h1><div class="besked">ChatControl: Dine private beskeder skal overvåges</div></h1>
<p> <p>
EU-kommissionen har lavet et nyt lovforslag for at beskytte børn mod misbrug. EU-kommissionen har lavet et nyt lovforslag for at beskytte børn mod misbrug&#x1F607;.
Formålet er godt, men loven er dårlig, fordi den kræver, at kommunikationstjenester Formålet er godt, men loven er dårlig&#x1F914;, fordi den kræver, at kommunikationstjenester
skal overvåges, hvis der er en mulighed for at børn skal overvåges&#x1F9D0;, hvis der er en mulighed for at børn&#x1F476;
bruger dem, eller hvis der er en mulighed for at dele billeder af børnemisbrug. bruger dem, eller hvis der er en mulighed for at dele billeder af børnemisbrug&#x1F4F2;.
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, fordi alle brugere af almindelige kommunikationstjenster vil blive overvåget&#x1F4F3;, fordi alle brugere af almindelige kommunikationstjenster
vil være mistænkte for børnemisbrug. vil være mistænkte for børnemisbrug&#x1F46E;.
</p> </p>
<div id="app-area"> <div id="app-area"><!-- two columns -->
<object id="movie" data="../img/chatapp.svg" type="image/svg+xml"></object> <div id="phone_frame">
<p id="movie-sidetext"> <div style="background-image: url(../img/phone_frame.svg)">
Lær mere om ChatControllen og hvorfor det er en dårlig idé, i vores interaktive ChatControl film ude til venstre. <object id="movie"
</p> data="../img/chatapp.svg?lang=da"
type="image/svg+xml"></object>
<div style="min-height: 102px"></div><!-- spacer -->
</div>
</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.
</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><!-- end #app-area -->
<p> <p>
Hvad kan man så gøre imod lovforslaget? Det er vigtigt at folk bliver oplyste om det. Hvad kan man så gøre imod lovforslaget?&#x1F607; Det er vigtigt at folk bliver oplyste om det&#x1F4E3;.
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> <a href="https://www.europarl.europa.eu/meps/da/full-list">dine politikere i Europaparlamentet</a>&#127466;&#127482;
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 og at politikere ved Det er vigtigt at der er en offentlig diskussion om emnet&#x1F5E8; og at politikere ved
at loven er en elendig idé - selvom tanken er god. at loven er en elendig idé&#x1F640; - selvom tanken er god&#x1F63E;.
</p> </p>
<h4>Flere informationer</h4> <h4>Flere informationer</h4>
@ -78,5 +101,12 @@ at loven er en elendig idé - selvom tanken er god.
</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,6 +7,8 @@
<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"
@ -17,38 +19,59 @@
height="28" /></a> height="28" /></a>
</div> </div>
<h1><span class="besked">Chat Control: Your private messages will be scanned</span></h1> <h1><div class="besked">Chat Control: Your private messages will be scanned</div></h1>
<p> <p>
The EU commission has proposed a new law to protect children against abuse. The EU commission has proposed a new law to protect children against abuse&#x1F607;.
The cause is good, but the law itself is bad, because it requires that The cause is good, but the law itself is bad&#x1F914;, because it requires that
online services with messaging functionality have to be surveilled online services with messaging functionality have to be surveilled&#x1F9D0;
if there is a possibility for children to use the service if there is a possibility for children&#x1F476; to use the service
or if users could potentially use the service to exchange child abuse material. or if users could potentially use the service to exchange child abuse material&#x1F4F2;.
This will affect many communication services This will affect many communication services
and it will mean that <em>your</em> communication will be scanned, and it will mean that <em>your</em> communication will be scanned&#x1F4F3;,
because all users of regular communication services because all users of regular communication services
will be treated as suspects for child abuse. will be treated as suspects for child abuse&#x1F46E;.
</p> </p>
<div id="app-area"> <div id="app-area"><!-- two columns -->
<object id="movie" data="../img/chatapp.svg" type="image/svg+xml"></object> <div id="phone_frame">
<p id="movie-sidetext"> <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>
</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? Whan can be done against this proposed law?&#x1F607;
It is important that more people know about it. It is important that more people know about it&#x1F4E3;.
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> <a href="https://www.europarl.europa.eu/meps/en/full-list">your representatives in the European Parliament</a>&#127466;&#127482;
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, It is important that there is a public discussion about this topic&#x1F5E8;,
so that politicians realise that the law is a bad idea so that politicians realise that the law is a bad idea&#x1F640;
even though this is for a good cause. even though this is for a good cause&#x1F63E;
</p> </p>
<h4>More information</h4> <h4>More information</h4>
@ -83,5 +106,12 @@ even though this is for a good cause.
</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,7 +68,9 @@ 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.
@ -698,7 +700,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()" /> <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,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 Normal file
View file

@ -0,0 +1,137 @@
<?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

After

Width:  |  Height:  |  Size: 3.9 KiB

14
style.css
View file

@ -1,3 +1,8 @@
#content {
max-width: 600px;
margin: 0 auto;
}
.besked { .besked {
color: #FFFFFF; color: #FFFFFF;
background-color: #0084FF; background-color: #0084FF;
@ -17,17 +22,22 @@ p {
#app-area { #app-area {
display: grid; display: grid;
grid-template-columns: 350px 300px; grid-template-columns: 350px 240px;
gap: 10px; gap: 10px;
grid-auto-rows: minmax(350px, auto); grid-auto-rows: minmax(350px, auto);
} }
#movie { #phone_frame {
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;