om/chatcontrol_dk
2
0
Fork 1
Code Issues Pull requests 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

189
da/index.html
View file

@ -1,107 +1,63 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="da-DK"> <html lang="en-GB">
<head>
<meta charset="utf-8" /> <head>
<title>ChatControl: Dine private beskeder skal overvåges!</title> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <title>ChatControl: Dine private beskeder skal overvåges!</title>
<link rel="stylesheet" type="text/css" href="../style.css" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" <link rel="stylesheet" type="text/css" href="../style.css" />
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="stylesheet" href="../../fonts/stylesheet.css">
<link rel="icon" href="data:," /><!-- no favicon for now --> <meta name="description"
</head> 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>
<body> <body>
<div style="width: 100%"> <div style="width: 100%">
<div id="content"> <!-- center content -->
<div id="content">
<div id="language_choice"> <div id="language_choice">
<a href="../da/"><img src="../img/dansk.svg" <a href="../da/"><img src="../img/dansk.svg" alt="dansk sprog" height="28" /></a>
alt="dansk sprog" <a href="../en/"><img src="../img/english.svg" alt="english language" height="28" /></a>
height="28" /></a> <a href="../tok/"><img src="../img/toki-pona.svg" alt="toki pona" height="28" /></a>
<a href="../en/"><img src="../img/english.svg" <a class="about-link" href="about.html">Om chatcontrol.dk</a>
alt="english language" </div>
height="28" /></a> <div id="phone">
<a href="../tok/"><img src="../img/toki-pona.svg" <div style="background-image: url(../img/phone_frame.svg)">
alt="toki pona" <object id="movie" data="../img/chatapp.svg?lang=da" type="image/svg+xml"></object>
height="28" /></a> <div style="min-height: 85px"></div><!-- spacer -->
<a class="about-link" href="about.html">Om chatcontrol.dk</a> </div>
</div> </div>
<div id="intro">
<h1><div class="besked">ChatControl: Dine private beskeder skal overvåges</div></h1> <div class="besked">
<h1><strong>Chat Control: </strong>Dine private beskeder skal overvåges</h1>
<div id="app-area"><!-- two columns --> </div>
<div id="phone_frame"> <p>
<div style="background-image: url(../img/phone_frame.svg)"> 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.
<object id="movie" </p>
data="../img/chatapp.svg?lang=da" <p>
type="image/svg+xml"></object> Lær mere om ChatControllen og hvorfor det er en dårlig idé, i vores interaktive ChatControl film ude til venstre.
<div style="min-height: 102px"></div><!-- spacer --> </p>
</div> <div id="backarrow">
</div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="40" viewBox="0 0 20 40">
<div id="movie-sidetext"> <polyline points="0,20 20,0 20,40" fill="#0084FF" onclick="swipe_viewport()" />
<p> </svg>
Lær mere om ChatControllen og hvorfor det er en dårlig idé, i vores interaktive ChatControl film ude til venstre. <p>
</p> Du kan bruge den blå pil for at åbne kontaktlisten
<p> </p>
<svg version="1.1" </div>
xmlns="http://www.w3.org/2000/svg" <p>
width="20" <input type="range" name="typing_speed" id="typing_speed" title="typing speed"
height="40" onChange="adjust_typing_speed(this.value)" value="50" min="0" max="100" />
viewBox="0 0 20 40"> <input type="text" value="50" id="speed_indicator" readonly size="1" />
<polyline points="0,20 20,0 20,40" Speed
fill="#0084FF" </p>
onclick="swipe_viewport()" /> <p><a href="#more">Finde ud af mere</a></p>
</svg> </div>
Du kan bruge den blå pil for at åbne kontaktlisten <div id="more">
</p> <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>
<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="text" value="50" id="speed_indicator" readonly size="1" />
Hastighed
</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>
<h4>Flere informationer</h4> <h4>Flere informationer</h4>
@ -174,8 +130,9 @@ eu:
&#127465;&#127466; &#127465;&#127466;
</li> </li>
</ul> </ul>
</div>
<h4>chatcontrol.dk får opbakning af</h4> <div id="sponsors">
<h4>chatcontrol.dk får opbakning af</h4>
<ul> <ul>
<li><a href="https://karenmelchior.eu/">Karen Melchior (MEP)</a></li> <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><a href="https://bornhack.dk">Bornhack</a>
<li>Og dig?</li> <li>Og dig?</li>
</ul> </ul>
</div>
</div><!-- end #content -->
</div><!-- end center content -->
<script>
function swipe_viewport() {
document.getElementById('movie').contentDocument.getElementById('to_contact_list_button').onclick();
}
</div><!-- end #content --> function adjust_typing_speed(new_value) {
</div><!-- end center content --> document.getElementById('movie').contentDocument.getElementById('message_input_box').onclick()(100 - new_value);
<script> document.getElementById('speed_indicator').value = new_value;
function swipe_viewport() { }
document.getElementById('movie').contentDocument.getElementById('to_contact_list_button').onclick(); </script>
}
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>
</body> </body>
</html>
</html>

380
en/index.html
View file

@ -1,210 +1,190 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-GB"> <html lang="en-GB">
<head>
<meta charset="utf-8" /> <head>
<title>Chat Control: Your private messages will be scanned!</title> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Chat Control: Your private messages will be scanned!</title>
<link rel="stylesheet" type="text/css" href="../style.css" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" <link rel="stylesheet" type="text/css" href="../style.css" />
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="stylesheet" href="../../fonts/stylesheet.css">
<link rel="icon" href="data:," /><!-- no favicon for now --> <meta name="description"
</head> 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>
<body> <body>
<div style="width: 100%"><!-- center content --> <div style="width: 100%">
<div id="content"> <!-- center content -->
<div id="content">
<div id="language_choice"> <div id="language_choice">
<a href="../da/"><img src="../img/dansk.svg" <a href="../da/"><img src="../img/dansk.svg" alt="dansk sprog" height="28" /></a>
alt="dansk sprog" <a href="../en/"><img src="../img/english.svg" alt="english language" height="28" /></a>
height="28" /></a> <a href="../tok/"><img src="../img/toki-pona.svg" alt="toki pona" height="28" /></a>
<a href="../en/"><img src="../img/english.svg" <a class="about-link" href="about.html">About chatcontrol.dk</a>
alt="english language" </div>
height="28" /></a> <div id="phone">
<a href="../tok/"><img src="../img/toki-pona.svg" <div style="background-image: url(../img/phone_frame.svg)">
alt="toki pona" <object id="movie" data="../img/chatapp.svg?lang=en" type="image/svg+xml"></object>
height="28" /></a> <div style="min-height: 85px"></div><!-- spacer -->
<a class="about-link" href="about.html">About chatcontrol.dk</a> </div>
</div> </div>
<div id="intro">
<div class="besked">
<h1><strong>Chat Control: </strong>Your private messages will be scanned</h1>
</div>
<p>
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>
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>
<p>
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>
<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>
<h1><div class="besked">Chat Control: Your private messages will be scanned</div></h1> <h4>More information</h4>
<div id="app-area"><!-- two columns --> <!--
<div id="phone_frame"> da:
<div style="background-image: url(../img/phone_frame.svg)"> &#127465;&#127472;
<object id="movie" de:
data="../img/chatapp.svg?lang=en" &#127465;&#127466;
type="image/svg+xml"></object> uk:
<div style="min-height: 102px"></div><!-- spacer --> &#127468;&#127463;
</div> eu:
</div> &#127466;&#127482;
<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>
<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> <ul>
The EU commission has proposed a new law to protect children against abuse. <li><a href="https://www.europarl.europa.eu/doceo/document/PV-9-2022-09-12-ITM-012_EN.html">
The cause is good, but the law itself is bad, because it requires The current proposal (12th of September 2022)</a>
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. </li>
This will affect many communication services <li><a href="https://itpol.dk/hoeringssvar/chat-control-eu-forordning">
and it will mean that <em>your</em> communication will be scanned, Consultation response from IT-Pol Denmark to the proposed law</a>
because all users of regular communication services 🇩🇰
will be treated as suspects for child abuse. </li>
More specifically this means that your e-mails, chat-messages, <li><a
video- and voicecalls will be analysed by algorithms, href="https://www.panoptikon.dk/eu-vil-scanne-alle-dine-beskeder-og-mails-som-led-i-kampen-mod-borneporno/">
to determine if they contain illegal content. News article on ChatControl (from panoptikon.dk)</a>
The analysis will happen directly on your computer/smartphone, 🇩🇰
so that the algorithms can see what you say/write before it becomes encrypted. </li>
</p> <li><a href="https://chatcontrol.eu">
More details about the planned law and timeline</a>
🇬🇧
</li>
<li><a href="https://media.ccc.de/v/bornhack2022-4190-danger-client-side-sca">
Presentation about ChatControl at BornHack</a>
🇬🇧
</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">
Mattias Tesfaye (danish minister of justice) is in favour of the surveillance law.</a>
🇩🇰
</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>
🇬🇧
</li>
<li><a href="https://chat-kontrolle.eu/">
German alliance against ChatControl</a>
🇩🇪
</li>
<li>
<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>
🇬🇧
</li>
<li>
<a href="https://stopscanningme.eu/en/">
Stop Scanning Me campaign</a>
🇬🇧
</li>
<li>
<a href="https://fsfe.org/news/2022/news-20221026-02.html">
If enforced, EU chat control will limit Free Software</a>
🇬🇧
</li>
<li>
<a href="https://www.internetsociety.org/resources/doc/2020/fact-sheet-client-side-scanning/">
Fact Sheet: Client-Side Scanning</a>
🇬🇧
</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>
🇩🇪
</li>
</ul>
</div>
<div id="sponsors">
<h4>Supporters of chatcontrol.dk</h4>
<p> <ul>
Whan can be done against this proposed law? <li><a href="https://karenmelchior.eu/">Karen Melchior (MEP)</a></li>
It is important that more people know about it. <li><a href="https://cryptoaarhus.dk/index_en.html">CryptoAarhus</a></li>
Share the link to this page! <li><a href="https://cryptohagen.dk/index_en.html">Cryptohagen</a></li>
Chat with others about it and talk with <li><a href="https://wiki.fsfe.org/LocalGroups/Aarhus">FSFE Denmark</a></li>
<a href="https://www.europarl.europa.eu/meps/en/full-list">your representatives in the European Parliament</a> <li><a href="https://itpol.dk/presentation-of-it-pol">IT-Pol Denmark</a></li>
about it (or write a nice e-mail to them). <li><a href="https://osaa.dk/">Open Space Aarhus</a></li>
It is important that there is a public discussion about this topic, <li><a href="https://www.patrick-breyer.de/en/">Patrick Breyer (MEP)</a></li>
so that politicians realise that the law is a bad idea <li><a href="https://bornhack.dk">Bornhack</a>
even though this is for a good cause </li>
</p> <li>And you?</li>
</ul>
</div>
</div><!-- end #content -->
</div><!-- end center content -->
<script>
function swipe_viewport() {
document.getElementById('movie').contentDocument.getElementById('to_contact_list_button').onclick();
}
<p> function adjust_typing_speed(new_value) {
If you want to help the campaign, you can join our mailing list. document.getElementById('movie').contentDocument.getElementById('message_input_box').onclick()(100 - new_value);
There we discuss actions for informing more people in Denmark about chatcontrol. document.getElementById('speed_indicator').value = new_value;
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. </script>
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>
<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/">
News article on ChatControl (from panoptikon.dk)</a>
&#127465;&#127472;
<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">
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/">
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>
<h4>Supporters of chatcontrol.dk</h4>
<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>
<li><a href="https://wiki.fsfe.org/LocalGroups/Aarhus">FSFE Denmark</a></li>
<li><a href="https://itpol.dk/presentation-of-it-pol">IT-Pol Denmark</a></li>
<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>And you?</li>
</ul>
</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) {
document.getElementById('movie').contentDocument.getElementById('message_input_box').onclick()(100 - new_value);
document.getElementById('speed_indicator').value = new_value;
}
</script>
</body> </body>
</html>
</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

535
img/chatapp.svg
View file

@ -1,77 +1,188 @@
<?xml version="1.0"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" <svg
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> version="1.1"
<svg version="1.1" width="300"
xmlns="http://www.w3.org/2000/svg" height="600"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 600"
width="300" onload="run()"
height="600" overflow="auto"
viewBox="0 0 300 600" style="font-family: sans; border-radius: 10px;"
onload="run()" id="movie"
overflow="auto" sodipodi:docname="chatapp.svg"
style="font-family: sans; border-radius: 10px;" inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
id="movie" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
> xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
<defs> xmlns="http://www.w3.org/2000/svg"
<symbol id="kaereste_foto" width="60" height="200"> xmlns:svg="http://www.w3.org/2000/svg">
<g style="fill: pink; stroke: pink;"> <sodipodi:namedview
<circle cx="20" cy="20" r="20" /> id="namedview90"
<line x1="20" y1="40" x2="20" y2="60" /> pagecolor="#ffffff"
<ellipse cx="20" cy="110" rx="10" ry="50" /> bordercolor="#000000"
<!-- left arm --> borderopacity="0.25"
<polyline fill="none" inkscape:showpageshadow="2"
points="15,70 5,50 0,40" /> inkscape:pageopacity="0.0"
<!-- right arm --> inkscape:pagecheckerboard="0"
<polyline fill="none" inkscape:deskcolor="#d1d1d1"
points="25,70 35,50 40,40" /> showgrid="false"
<!-- left leg --> inkscape:zoom="1.1125147"
<polyline fill="none" inkscape:cx="371.23105"
points="15,155 5,135 0,125" /> inkscape:cy="272.80538"
<!-- right leg --> inkscape:window-width="1920"
<polyline fill="none" inkscape:window-height="1011"
points="25,155 35,135 40,125" /> inkscape:window-x="0"
<!-- the thing --> inkscape:window-y="0"
<text x="14" y="160" style="font: bold 20px sans-serif" fill="black">?</text> inkscape:window-maximized="1"
</g> inkscape:current-layer="contact_name_box" />
</symbol> <defs
<symbol id="strand" width="80" height="1200"> id="defs55">
<rect width="80" height="130" fill="yellow"></rect> <symbol
<g style="fill: pink; stroke: pink;"> id="kaereste_foto"
<circle cx="60" cy="20" r="20" /> width="60"
<!-- spine --> height="200">
<line x1="55" y1="40" x2="22" y2="100" /> <g
style="fill: pink; stroke: pink;"
<!-- left leg --> id="g18">
<polyline fill="none" points="20,100 60,90 35,125" /> <circle
cx="20"
<!-- right leg --> cy="20"
<polyline fill="none" points="20,100 50,75 25,120" /> r="20"
id="circle2" />
<!-- left arm --> <line
<polyline fill="none" points="37,70 20,45" /> x1="20"
y1="40"
<!-- right arm + bucket --> x2="20"
<polyline fill="none" points="39,71 70,50" /> y2="60"
id="line4" />
</g> <ellipse
</symbol> cx="20"
<symbol id="flag_denmark" width="20" height="15"> cy="110"
<path fill="#c8102e" d="M0,0H20V15H0Z"/> rx="10"
<path fill="#fff" d="M0,6H6V0H8V6H20V8H8V15H6V8H0Z"/> ry="50"
</symbol> id="ellipse6" />
<!-- left arm -->
<symbol id="flag_uk" width="50" height="30"> <polyline
<clipPath id="t"> fill="none"
<path d="M25,15h25v15zv15h-25zh-25v-15zv-15h25z"/> points="15,70 5,50 0,40"
</clipPath> id="polyline8" />
<path d="M0,0v30h50v-30z" fill="#012169"/> <!-- right arm -->
<path d="M0,0 50,30M50,0 0,30" stroke="#fff" stroke-width="6"/> <polyline
<path d="M0,0 50,30M50,0 0,30" clip-path="url(#t)" stroke="#C8102E" stroke-width="4"/> fill="none"
<path d="M-1 11h22v-12h8v12h22v8h-22v12h-8v-12h-22z" fill="#C8102E" stroke="#FFF" stroke-width="2"/> points="25,70 35,50 40,40"
</symbol> id="polyline10" />
</defs> <!-- left leg -->
<script type="application/ecmascript"> <polyline
<![CDATA[ fill="none"
points="15,155 5,135 0,125"
id="polyline12" />
<!-- right leg -->
<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"
id="text16">?</text>
</g>
</symbol>
<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"
id="line25" />
<!-- left leg -->
<polyline
fill="none"
points="20,100 60,90 35,125"
id="polyline27" />
<!-- right leg -->
<polyline
fill="none"
points="20,100 50,75 25,120"
id="polyline29" />
<!-- left arm -->
<polyline
fill="none"
points="37,70 20,45"
id="polyline31" />
<!-- right arm + bucket -->
<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"
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"
id="path43" />
</clipPath>
<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"
id="script57"><![CDATA[
'use strict'; 'use strict';
const svgns = "http://www.w3.org/2000/svg"; const svgns = "http://www.w3.org/2000/svg";
@ -407,7 +518,7 @@ function start_chat(index) {
let contact = contact_list[current_language][index]; let contact = contact_list[current_language][index];
let who = contact.name; let who = contact.name;
let indicator = document.getElementById('contact_indicator'); let indicator = document.getElementById('contact_indicator');
indicator.childNodes[0].data = `Kontakt: ${who}`; indicator.childNodes[0].data = `Contact: ${who}`;
removeAllChildren(document.getElementById('messages')); removeAllChildren(document.getElementById('messages'));
swipe_viewport(); swipe_viewport();
@ -651,18 +762,23 @@ async function dialog_kaereste_da() {
async function dialog_kaereste_en() { async function dialog_kaereste_en() {
let d = new Dialog(); let d = new Dialog();
current_dialog = d; current_dialog = d;
await d.me('Hi beautiful'); await d.me('Morning, gourgeous');
await d.you('hi, I just thought about you'); await d.you('Hey ;) how are you doing?');
await d.you("and that's why I have taken a sexy picture"); await d.you("I'm feeling... cheeky");
await d.you('#kaereste_foto'); await d.you('#kaereste_foto', true);
await d.me('Thanks! I missed that!', true); await d.me('Wow 😍! You look STUNNING', true);
await d.me('you still look so young.'); await d.me('oh no... i think our conversation was just reported...');
await d.me('I think we have to be careful, because our messages are being read'); await d.you('Reported????? What do you mean?');
await d.you('What the fuck??? Who is watching us?????'); await d.me('There is this new EU law, chatcontrol, it scans everything in our conversations, even when they are encrypted');
await d.me('It can be that the chat provider does this, because they are allowed to search for illegal material'); await d.you('But why did it report us?');
await d.me('But in the future it will also become mandatory to scan chat messages in the EU'); await d.me('It uses Artificial Intelligence to scan pictures, I think it thinks you are underage.. ');
await d.me('And if a message looks like child pornography then the police will get a copy of it'); await d.you("BUT I'M 27!");
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("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'); await d.end('Your better half is offline now');
} }
@ -754,24 +870,31 @@ async function dialog_nabopige_da() {
async function dialog_nabopige_en() { async function dialog_nabopige_en() {
let d = new Dialog(); let d = new Dialog();
current_dialog = d; current_dialog = d;
await d.you("Guess who's birthday it is soon!"); await d.you("Hi! It's Ellie!");
await d.me("It's yours?"); await d.me("Ellie? What are you doing with your mums phone?");
await d.you('Right! That was maybe too easy'); await d.you("guess whos birthday it is soon!");
await d.me('How old will you be?'); await d.me("Yours?");
await d.you('ten'); await d.you("yep! I'm having a party on friday! mummy told me to invite you!");
await d.you('I am excited for the party. I have invited a lot of people'); await d.me("How old will you be?");
await d.you('You are also invited!'); await d.you("ten");
await d.you('Hi, I want to tell you a secret'); await d.me("Ten? Wow! I wouldn't want to miss your tenth birthday party! I promise i'll be there!");
await d.you("But I just can't do that in the chat"); await d.you("how old are you?");
await d.you('Because what we write here is being analysed'); await d.me("Very old! I'm 48!", true);
await d.you('And it is not going to be a secret when there are others who read the messages'); await d.you("you must have lots of candles on your cake!");
await d.me('You can tell me the secret tomorrow, when I come to your house', true); await d.me("Could you give the phone to your mum please?");
await d.me('I am surprised that you know about the chat surveillance'); await d.you("okay");
await d.you("Yes, it is stupid. I have read about it and I really don't like it"); await d.you("Hi! whats up? can you make it to the party?");
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("Yeah! of course, but just to warn you: i think our conversation just got reported");
await d.me('Completely agree'); await d.you("Reported? why?");
await d.me('Children also need their secrets and confidentiality'); await d.me("It is chatcontrol, a new EU law that scans all our conversations.");
await d.end('The girl is gone now'); 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() { async function dialog_erasmus_da() {
@ -912,62 +1035,6 @@ async function dialog_nerd_en() {
await d.end('The nerd is rebooting'); 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 = { const contact_list = {
"da": [ "da": [
@ -986,9 +1053,7 @@ const contact_list = {
{name: "Erasmus", {name: "Erasmus",
dialog: dialog_erasmus_da}, dialog: dialog_erasmus_da},
{name: "Nørd", {name: "Nørd",
dialog: dialog_nerd_da}, dialog: dialog_nerd_da}
{name: "Hacker",
dialog: dialog_hacker_da}
], ],
"en": [ "en": [
{name: "Friend", {name: "Friend",
@ -1001,14 +1066,12 @@ const contact_list = {
dialog: dialog_politi_en}, dialog: dialog_politi_en},
{name: "Chat support", {name: "Chat support",
dialog: dialog_support_en}, dialog: dialog_support_en},
{name: "Neighborhood girl", {name: "Neighbor",
dialog: dialog_nabopige_en}, dialog: dialog_nabopige_en},
{name: "Erasmus", {name: "Erasmus",
dialog: dialog_erasmus_en}, dialog: dialog_erasmus_en},
{name: "Nerd", {name: "Nerd",
dialog: dialog_nerd_en}, dialog: dialog_nerd_en}
{name: "Hacker",
dialog: dialog_hacker_en}
] ]
}; };
@ -1037,42 +1100,104 @@ function run() {
fill_contact_list(current_language); fill_contact_list(current_language);
start_chat(current_discussion_index); start_chat(current_discussion_index);
} }
]]> ]]></script>
</script> <!-- [right] contact name view -->
<g
<!-- [right] contact name view --> id="contact_name_box">
<g id="contact_name_box"> <rect
<rect x="300" y="0" width="300" height="50" fill="#F5F5F5"/> x="300"
<polyline points="300,20 320,0 320,40" fill="#0084FF" onclick="swipe_viewport()" id="to_contact_list_button" /> y="0"
<polyline points="560,20 600,20 580,0" fill="#0084FF" onclick="scroll_up()" /> width="300"
<polyline points="560,30 600,30 580,50" fill="#0084FF" onclick="scroll_down()" /> height="50"
<text x="325" y="30" id="contact_indicator">loading...</text> fill="#F5F5F5"
<use href="#flag_denmark" x="500" y="35" onclick="switch_language('da')" /> id="rect59" />
<g transform="scale(0.5,0.5)"> <polyline
<use href="#flag_uk" x="1050" y="70" onclick="switch_language('en')" /> 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>
</g> <!-- [right] messages view -->
<rect
<!-- [right] messages view --> id="message_box"
<rect id="message_box" x="300" y="50" width="300" height="450" fill="white" /> x="300"
<g id="messages"></g> y="50"
width="300"
<!-- [right] message status --> height="450"
<rect id="message_status_box" x="300" y="520" fill="#FF7B00" width="300" height="30" /> fill="white" />
<text id="message_status" x="310" y="540" fill="white">status</text> <g
id="messages" />
<!-- [right] text input --> <!-- [right] message status -->
<rect id="message_input_box" x="300" y="550" stroke="black" fill="white" width="250" height="50" onclick="return set_typing_speed" /> <rect
<rect id="message_submit_box" x="550" y="550" stroke="black" fill="#CCCCCC" width="50" height="50" /> id="message_status_box"
<text id="message_input_data" x="310" y="575" fill="black"></text> x="300"
<text id="message_submit_button" x="555" y="580" fill="black">SEND</text> y="520"
fill="#FF7B00"
<!-- [left] contact list --> width="300"
<rect x="0" y="0" width="300" height="50" fill="#E4E6EB" /> height="30" />
<text x="60" y="30">Dine kontakter</text> <text
<rect x="0" y="50" width="300" height="550" style="stroke: green; stroke-width: 0px" fill="white" /> id="message_status"
x="310"
<!-- contact list --> y="540"
<g id="contacts"></g> 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> </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 { #content {
max-width: 600px; display: grid;
margin: 0 auto; 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 { .besked {
@ -11,26 +81,26 @@
padding-bottom: 10px; padding-bottom: 10px;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
position: relative;
} }
p { .besked:after {
margin-left: 10px; content: '';
border: 1px dashed black; position: absolute;
padding: 5px; right: 0;
max-width: 800px; 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 { #phone>div{
display: grid; background-repeat:no-repeat;
grid-template-columns: 350px 240px;
gap: 10px;
grid-auto-rows: minmax(350px, auto);
}
#phone_frame {
margin-left: 10px;
grid-column: 1;
grid-row: 1;
} }
#movie { #movie {
@ -43,6 +113,22 @@ p {
grid-row: 1; 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 { .about-link {
float: right; float: right;
} }