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

111
da/index.html
View file

@ -1,107 +1,63 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="da-DK"> <html lang="en-GB">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>ChatControl: Dine private beskeder skal overvåges!</title> <title>ChatControl: Dine private beskeder skal overvåges!</title>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="../style.css" /> <link rel="stylesheet" type="text/css" href="../style.css" />
<link rel="stylesheet" href="../../fonts/stylesheet.css">
<meta name="description" <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." /> 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 --> <link rel="icon" href="data:," /><!-- no favicon for now -->
</head> </head>
<body> <body>
<div style="width: 100%"> <div style="width: 100%">
<!-- center content -->
<div id="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"
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> <a class="about-link" href="about.html">Om chatcontrol.dk</a>
</div> </div>
<div id="phone">
<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)"> <div style="background-image: url(../img/phone_frame.svg)">
<object id="movie" <object id="movie" data="../img/chatapp.svg?lang=da" type="image/svg+xml"></object>
data="../img/chatapp.svg?lang=da" <div style="min-height: 85px"></div><!-- spacer -->
type="image/svg+xml"></object>
<div style="min-height: 102px"></div><!-- spacer -->
</div> </div>
</div> </div>
<div id="movie-sidetext"> <div id="intro">
<div class="besked">
<h1><strong>Chat Control: </strong>Dine private beskeder skal overvåges</h1>
</div>
<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> <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> <div id="backarrow">
<svg version="1.1" <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="40" viewBox="0 0 20 40">
xmlns="http://www.w3.org/2000/svg" <polyline points="0,20 20,0 20,40" fill="#0084FF" onclick="swipe_viewport()" />
width="20"
height="40"
viewBox="0 0 20 40">
<polyline points="0,20 20,0 20,40"
fill="#0084FF"
onclick="swipe_viewport()" />
</svg> </svg>
<p>
Du kan bruge den blå pil for at åbne kontaktlisten Du kan bruge den blå pil for at åbne kontaktlisten
</p> </p>
<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>
</div><!-- end #app-area -->
<p> <p>
EU-kommissionen har lavet et nyt lovforslag for at beskytte børn mod misbrug. <input type="range" name="typing_speed" id="typing_speed" title="typing speed"
Formålet er godt, men loven er dårlig, fordi den kræver, at kommunikationstjenester onChange="adjust_typing_speed(this.value)" value="50" min="0" max="100" />
skal <span style="white-space: nowrap">overvåges,</span> hvis der er en mulighed for at børn <input type="text" value="50" id="speed_indicator" readonly size="1" />
bruger dem, eller hvis der er en mulighed for at dele billeder af børnemisbrug. Speed
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>
<p><a href="#more">Finde ud af mere</a></p>
</div>
<div id="more">
<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? 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>
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,7 +130,8 @@ eu:
&#127465;&#127466; &#127465;&#127466;
</li> </li>
</ul> </ul>
</div>
<div id="sponsors">
<h4>chatcontrol.dk får opbakning af</h4> <h4>chatcontrol.dk får opbakning af</h4>
<ul> <ul>
@ -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 #content -->
</div><!-- end center content --> </div><!-- end center content -->
<script> <script>
function swipe_viewport() { function swipe_viewport() {
document.getElementById('movie').contentDocument.getElementById('to_contact_list_button').onclick(); 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('movie').contentDocument.getElementById('message_input_box').onclick()(100 - new_value);
document.getElementById('speed_indicator').value = new_value; document.getElementById('speed_indicator').value = new_value;
} }
</script> </script>
</body> </body>
</html> </html>

180
en/index.html
View file

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

473
img/chatapp.svg
View file

@ -1,9 +1,6 @@
<?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"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" width="300"
height="600" height="600"
viewBox="0 0 300 600" viewBox="0 0 300 600"
@ -11,67 +8,181 @@
overflow="auto" overflow="auto"
style="font-family: sans; border-radius: 10px;" style="font-family: sans; border-radius: 10px;"
id="movie" id="movie"
> sodipodi:docname="chatapp.svg"
<defs> inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
<symbol id="kaereste_foto" width="60" height="200"> xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
<g style="fill: pink; stroke: pink;"> xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
<circle cx="20" cy="20" r="20" /> xmlns="http://www.w3.org/2000/svg"
<line x1="20" y1="40" x2="20" y2="60" /> xmlns:svg="http://www.w3.org/2000/svg">
<ellipse cx="20" cy="110" rx="10" ry="50" /> <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 --> <!-- left arm -->
<polyline fill="none" <polyline
points="15,70 5,50 0,40" /> fill="none"
points="15,70 5,50 0,40"
id="polyline8" />
<!-- right arm --> <!-- right arm -->
<polyline fill="none" <polyline
points="25,70 35,50 40,40" /> fill="none"
points="25,70 35,50 40,40"
id="polyline10" />
<!-- left leg --> <!-- left leg -->
<polyline fill="none" <polyline
points="15,155 5,135 0,125" /> fill="none"
points="15,155 5,135 0,125"
id="polyline12" />
<!-- right leg --> <!-- right leg -->
<polyline fill="none" <polyline
points="25,155 35,135 40,125" /> fill="none"
points="25,155 35,135 40,125"
id="polyline14" />
<!-- the thing --> <!-- 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> </g>
</symbol> </symbol>
<symbol id="strand" width="80" height="1200"> <symbol
<rect width="80" height="130" fill="yellow"></rect> id="strand"
<g style="fill: pink; stroke: pink;"> width="80"
<circle cx="60" cy="20" r="20" /> 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 --> <!-- spine -->
<line x1="55" y1="40" x2="22" y2="100" /> <line
x1="55"
y1="40"
x2="22"
y2="100"
id="line25" />
<!-- left leg --> <!-- 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 --> <!-- 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 --> <!-- left arm -->
<polyline fill="none" points="37,70 20,45" /> <polyline
fill="none"
points="37,70 20,45"
id="polyline31" />
<!-- right arm + bucket --> <!-- right arm + bucket -->
<polyline fill="none" points="39,71 70,50" /> <polyline
fill="none"
points="39,71 70,50"
id="polyline33" />
</g> </g>
</symbol> </symbol>
<symbol id="flag_denmark" width="20" height="15"> <symbol
<path fill="#c8102e" d="M0,0H20V15H0Z"/> id="flag_denmark"
<path fill="#fff" d="M0,6H6V0H8V6H20V8H8V15H6V8H0Z"/> width="20"
height="15">
<path
fill="#c8102e"
d="M0,0H20V15H0Z"
id="path38" />
<path
fill="#fff"
d="M0,6H6V0H8V6H20V8H8V15H6V8H0Z"
id="path40" />
</symbol> </symbol>
<symbol
<symbol id="flag_uk" width="50" height="30"> id="flag_uk"
<clipPath id="t"> width="50"
<path d="M25,15h25v15zv15h-25zh-25v-15zv-15h25z"/> height="30">
<clipPath
id="t">
<path
d="M25,15h25v15zv15h-25zh-25v-15zv-15h25z"
id="path43" />
</clipPath> </clipPath>
<path d="M0,0v30h50v-30z" fill="#012169"/> <path
<path d="M0,0 50,30M50,0 0,30" stroke="#fff" stroke-width="6"/> d="M0,0v30h50v-30z"
<path d="M0,0 50,30M50,0 0,30" clip-path="url(#t)" stroke="#C8102E" stroke-width="4"/> fill="#012169"
<path d="M-1 11h22v-12h8v12h22v8h-22v12h-8v-12h-22z" fill="#C8102E" stroke="#FFF" stroke-width="2"/> 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> </symbol>
</defs> </defs>
<script type="application/ecmascript"> <script
<![CDATA[ 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 --> <!-- [right] contact name view -->
<g id="contact_name_box"> <g
<rect x="300" y="0" width="300" height="50" fill="#F5F5F5"/> id="contact_name_box">
<polyline points="300,20 320,0 320,40" fill="#0084FF" onclick="swipe_viewport()" id="to_contact_list_button" /> <rect
<polyline points="560,20 600,20 580,0" fill="#0084FF" onclick="scroll_up()" /> x="300"
<polyline points="560,30 600,30 580,50" fill="#0084FF" onclick="scroll_down()" /> y="0"
<text x="325" y="30" id="contact_indicator">loading...</text> width="300"
<use href="#flag_denmark" x="500" y="35" onclick="switch_language('da')" /> height="50"
<g transform="scale(0.5,0.5)"> fill="#F5F5F5"
<use href="#flag_uk" x="1050" y="70" onclick="switch_language('en')" /> 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>
</g>
<!-- [right] messages view --> <!-- [right] messages view -->
<rect id="message_box" x="300" y="50" width="300" height="450" fill="white" /> <rect
<g id="messages"></g> id="message_box"
x="300"
y="50"
width="300"
height="450"
fill="white" />
<g
id="messages" />
<!-- [right] message status --> <!-- [right] message status -->
<rect id="message_status_box" x="300" y="520" fill="#FF7B00" width="300" height="30" /> <rect
<text id="message_status" x="310" y="540" fill="white">status</text> 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 --> <!-- [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
<rect id="message_submit_box" x="550" y="550" stroke="black" fill="#CCCCCC" width="50" height="50" /> id="message_input_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="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 --> <!-- [left] contact list -->
<rect x="0" y="0" width="300" height="50" fill="#E4E6EB" /> <rect
<text x="60" y="30">Dine kontakter</text> x="0"
<rect x="0" y="50" width="300" height="550" style="stroke: green; stroke-width: 0px" fill="white" /> 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 --> <!-- contact list -->
<g id="contacts"></g> <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;
} }