rm/chatcontrol_dk
1
0
Fork 0
forked from om/chatcontrol_dk
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add mobile phone frame to page

Browse source
This commit is contained in:
om 2022-10-14 11:59:22 +02:00
parent 13105b1c60
commit becf04a5b4
4 changed files with 168 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
da/index.html
View file

@ -32,8 +32,15 @@ vil være mistænkte for børnemisbrug👮.
</p> </p>
<div id="app-area"> <div id="app-area"><!-- two columns -->
<object id="movie" data="../img/chatapp.svg?lang=da" type="image/svg+xml"></object> <div id="phone_frame">
<div style="background-image: url(../img/phone_frame.svg)">
<object id="movie"
data="../img/chatapp.svg?lang=da"
type="image/svg+xml"></object>
<div style="min-height: 102px"></div><!-- spacer -->
</div>
</div>
<div id="movie-sidetext"> <div id="movie-sidetext">
<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.
@ -51,7 +58,7 @@ Lær mere om ChatControllen og hvorfor det er en dårlig idé, i vores interakti
Du kan bruge den blå pil for at åbne kontaktlisten Du kan bruge den blå pil for at åbne kontaktlisten
</p> </p>
</div> </div>
</div> </div><!-- end #app-area -->
<p> <p>
Hvad kan man så gøre imod lovforslaget?&#x1F607; Det er vigtigt at folk bliver oplyste om det&#x1F4E3;. Hvad kan man så gøre imod lovforslaget?&#x1F607; Det er vigtigt at folk bliver oplyste om det&#x1F4E3;.
@ -62,8 +69,8 @@ Det er vigtigt at der er en offentlig diskussion om emnet&#x1F5E8; og at politik
at loven er en elendig idé&#x1F640; - selvom tanken er god&#x1F63E;. at loven er en elendig idé&#x1F640; - selvom tanken er god&#x1F63E;.
</p> </p>
</div> </div><!-- end #content -->
</div> </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();

19
en/index.html
View file

@ -7,7 +7,7 @@
<link rel="stylesheet" type="text/css" href="../style.css" /> <link rel="stylesheet" type="text/css" href="../style.css" />
</head> </head>
<body> <body>
<div style="width: 100%"> <div style="width: 100%"><!-- center content -->
<div id="content"> <div id="content">
<div id="language_choice"> <div id="language_choice">
@ -33,8 +33,15 @@ because all users of regular communication services
will be treated as suspects for child abuse&#x1F46E;. will be treated as suspects for child abuse&#x1F46E;.
</p> </p>
<div id="app-area"> <div id="app-area"><!-- two columns -->
<object id="movie" data="../img/chatapp.svg?lang=en" type="image/svg+xml"></object> <div id="phone_frame">
<div style="background-image: url(../img/phone_frame.svg)">
<object id="movie"
data="../img/chatapp.svg?lang=en"
type="image/svg+xml"></object>
<div style="min-height: 102px"></div><!-- spacer -->
</div>
</div>
<div id="movie-sidetext"> <div id="movie-sidetext">
<p> <p>
Learn more about Chat Control and why it is a bad idea by watching our Learn more about Chat Control and why it is a bad idea by watching our
@ -53,7 +60,7 @@ interactive film on the left.
You can use the blue arrow to open the contact list You can use the blue arrow to open the contact list
</p> </p>
</div> </div>
</div> </div><!-- end #app-area -->
<p> <p>
Whan can be done against this proposed law?&#x1F607; Whan can be done against this proposed law?&#x1F607;
@ -67,8 +74,8 @@ so that politicians realise that the law is a bad idea&#x1F640;
even though this is for a good cause&#x1F63E; even though this is for a good cause&#x1F63E;
</p> </p>
</div> </div><!-- end #content -->
</div> </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();

137
img/phone_frame.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 3.9 KiB

7
style.css
View file

@ -27,12 +27,17 @@ p {
grid-auto-rows: minmax(350px, auto); grid-auto-rows: minmax(350px, auto);
} }
#movie { #phone_frame {
margin-left: 10px; margin-left: 10px;
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
} }
#movie {
margin-left: 17px;
margin-top: 77px;
}
#movie-sidetext { #movie-sidetext {
grid-column: 2; grid-column: 2;
grid-row: 1; grid-row: 1;