2022-10-14 10:09:57 +00:00
5 changed files with 247 additions and 38 deletions
--- a/da/index.html
+++ b/da/index.html
@ -7,6 +7,8 @@
        <link rel="stylesheet" type="text/css" href="../style.css" />
    </head>
 <body>
+<div style="width: 100%">
+<div id="content">

 <div id="language_choice">
 <a href="../en/"><img src="../img/english.svg"
@ -17,33 +19,54 @@
                      height="28" /></a>
 </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>
-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 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.
+EU-kommissionen har lavet et nyt lovforslag for at beskytte børn mod misbrug&#x1F607;.
+Formålet er godt, men loven er dårlig&#x1F914;, fordi den kræver, at kommunikationstjenester
+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&#x1F4F2;.
 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 være mistænkte for børnemisbrug.
+vil blive overvåget&#x1F4F3;, fordi alle brugere af almindelige kommunikationstjenster
+vil være mistænkte for børnemisbrug&#x1F46E;.
 </p>


-<div id="app-area">
-<object id="movie" data="../img/chatapp.svg" type="image/svg+xml"></object>
-<p id="movie-sidetext">
+<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>
+</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>
-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
-<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).
-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.
+Det er vigtigt at der er en offentlig diskussion om emnet&#x1F5E8; og at politikere ved
+at loven er en elendig idé&#x1F640; - selvom tanken er god&#x1F63E;.
 </p>

 <h4>Flere informationer</h4>
@ -78,5 +101,12 @@ at loven er en elendig idé - selvom tanken er god.
    </li>
 </ul>

+</div><!-- end #content -->
+</div><!-- end center content -->
+<script>
+function swipe_viewport() {
+    document.getElementById('movie').contentDocument.getElementById('to_contact_list_button').onclick();
+}
+</script>
 </body>
 </html>
--- a/en/index.html
+++ b/en/index.html
@ -7,6 +7,8 @@
        <link rel="stylesheet" type="text/css" href="../style.css" />
    </head>
 <body>
+<div style="width: 100%"><!-- center content -->
+<div id="content">

 <div id="language_choice">
 <a href="../en/"><img src="../img/english.svg"
@ -17,38 +19,59 @@
                      height="28" /></a>
 </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>
-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 that
-online services with messaging functionality have 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.
+The EU commission has proposed a new law to protect children against abuse&#x1F607;.
+The cause is good, but the law itself is bad&#x1F914;, because it requires that
+online services with messaging functionality have to be surveilled&#x1F9D0;
+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&#x1F4F2;.
 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
-will be treated as suspects for child abuse.
+will be treated as suspects for child abuse&#x1F46E;.
 </p>

-<div id="app-area">
-<object id="movie" data="../img/chatapp.svg" type="image/svg+xml"></object>
-<p id="movie-sidetext">
+<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>
+</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.
  </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><!-- end #app-area -->

 <p>
-Whan can be done against this proposed law?
-It is important that more people know about it.
+Whan can be done against this proposed law?&#x1F607;
+It is important that more people know about it&#x1F4E3;.
 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>
+<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).
-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.
+It is important that there is a public discussion about this topic&#x1F5E8;,
+so that politicians realise that the law is a bad idea&#x1F640;
+even though this is for a good cause&#x1F63E;
 </p>

 <h4>More information</h4>
@ -83,5 +106,12 @@ even though this is for a good cause.
    </li>
 </ul>

+</div><!-- end #content -->
+</div><!-- end center content -->
+<script>
+function swipe_viewport() {
+    document.getElementById('movie').contentDocument.getElementById('to_contact_list_button').onclick();
+}
+</script>
 </body>
 </html>
--- a/img/chatapp.svg
+++ b/img/chatapp.svg
@ -68,7 +68,9 @@ const typing_speed = 50;

 var conversation_count = 0;
 var current_dialog = null;
-var current_language = "da";
+
+var current_language = new URLSearchParams(location.search).get('lang') ?? 'da';
+
 var current_dialog_fn = null;

 /// 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 -->
 <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()" />
+  <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>
--- a/img/phone_frame.svg
+++ b/img/phone_frame.svg
@ -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>
--- a/style.css
+++ b/style.css
@ -1,3 +1,8 @@
+#content {
+    max-width: 600px;
+    margin: 0 auto;
+}
+
 .besked {
    color: #FFFFFF;
    background-color: #0084FF;
@ -17,17 +22,22 @@ p {

 #app-area {
    display: grid;
-    grid-template-columns: 350px 300px;
+    grid-template-columns: 350px 240px;
    gap: 10px;
    grid-auto-rows: minmax(350px, auto);
 }

-#movie {
+#phone_frame {
  margin-left: 10px;
  grid-column: 1;
  grid-row: 1;
 }

+#movie {
+    margin-left: 17px;
+    margin-top: 77px;
+}
+
 #movie-sidetext {
  grid-column: 2;
  grid-row: 1;