summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--static/css/combo-style.css67
-rw-r--r--static/img/mobile-case.svg112
-rw-r--r--static/js/combo.public.js22
3 files changed, 201 insertions, 0 deletions
diff --git a/static/css/combo-style.css b/static/css/combo-style.css
index 62012df..9980f6d 100644
--- a/static/css/combo-style.css
+++ b/static/css/combo-style.css
@@ -879,3 +879,70 @@ span#counter {
display: none;
}
}
+
+div.textcell.tablette {
+ text-align: center;
+}
+
+div.mobile-case {
+ display: inline-block;
+ background: url(../img/mobile-case.svg) top left no-repeat;
+ width: 400px;
+ height: 720px;
+ position: relative;
+ overflow: hidden;
+}
+
+div.mobile-case div.screen {
+ position: absolute;
+ overflow: hidden;
+ left: 12px;
+ top: 52px;
+ bottom: 67px;
+ right: 28px;
+}
+
+div.mobile-case div.screen div.mobile-top-bar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: rgba(0, 0, 0, 0.7);
+ width: 100%;
+ text-align: right;
+ color: white;
+ box-sizing: border-box;
+ padding-right: 5px;
+ height: 21px;
+}
+
+div.mobile-case div.screen div.mobile-app-content {
+ position: absolute;
+ top: 21px;
+ left: 0;
+ width: 100%;
+ bottom: 0;
+}
+
+div.mobile-case + div.mobile-case {
+ position: relative;
+ top: 40px;
+}
+
+div.mobile-case + div.mobile-case + div.mobile-case {
+ position: relative;
+ top: 10px;
+}
+
+div.mobile-case .screen {
+ background: #dc1822;
+}
+
+div.mobile-case + div.mobile-case .screen {
+ background: #00aa9e;
+}
+
+div.mobile-case + div.mobile-case + div.mobile-case .screen {
+ background: #de3559;
+}
+
+@media(max-width: 668px) { div.tablette { display: none; } }
diff --git a/static/img/mobile-case.svg b/static/img/mobile-case.svg
new file mode 100644
index 0000000..7003916
--- /dev/null
+++ b/static/img/mobile-case.svg
@@ -0,0 +1,112 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="svg2"
+ xml:space="preserve"
+ width="386.93579"
+ height="707.42499"
+ viewBox="0 0 386.93579 707.42499"
+ sodipodi:docname="mobile-case.svg"
+ inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
+ id="metadata8"><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></dc:title></cc:Work></rdf:RDF></metadata><defs
+ id="defs6"><clipPath
+ clipPathUnits="userSpaceOnUse"
+ id="clipPath18"><path
+ d="M 0,410 H 1028 V 0 H 0 Z"
+ id="path16"
+ inkscape:connector-curvature="0" /></clipPath></defs><sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1920"
+ inkscape:window-height="1043"
+ id="namedview4"
+ showgrid="false"
+ inkscape:zoom="0.5"
+ inkscape:cx="-114.43322"
+ inkscape:cy="238.84637"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="g10"
+ inkscape:measure-start="27,428"
+ inkscape:measure-end="387,428"
+ fit-margin-top="0"
+ fit-margin-left="0"
+ fit-margin-right="0"
+ fit-margin-bottom="0" /><g
+ id="g10"
+ inkscape:groupmode="layer"
+ inkscape:label="x"
+ transform="matrix(1.3333333,0,0,-1.3333333,-3.6475299,539.99784)"><g
+ id="g20"
+ transform="matrix(1.8601685,0,0,1.8601685,309.66345,-151.14733)"
+ style="stroke-width:0.5"><path
+ d="m -10.548622,33.67008 c 0,-16.568 -13.431,-19.920268 -29.999,-19.920268 H -134.999 c -16.569,0 -30.001,3.352268 -30.001,19.920268 V 280.665 c 0,9.72565 13.432,18.31099 30.001,18.31099 h 94.451378 c 16.568,0 29.999,-9.44063 29.999,-18.31099 z"
+ style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.5"
+ id="path22"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="sssssssss" /></g><g
+ id="g24"
+ transform="matrix(1.8601685,0,0,1.8601685,300.67326,-142.46964)"
+ style="stroke-width:0.5"><path
+ d="m -10.120975,32.690552 c 0,-16.568 -13.432,-20.726646 -30,-20.726646 H -125.333 c -16.569,0 -30,4.158646 -30,20.726646 V 271.334 c 0,16.569 13.431,20.71282 30,20.71282 h 85.212025 c 16.568,0 30,-4.14382 30,-20.71282 z"
+ style="fill:#232323;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.5"
+ id="path26"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="sssssssss" /></g><g
+ id="g30"
+ transform="matrix(1.8601685,0,0,1.8601685,189.06408,381.94033)"
+ style="stroke-width:0.5"><path
+ d="m 0,0 c 0,-1 -1,-2 -2,-2 h -30 c -1,0 -2,1 -2,2 0,1 1,2 2,2 H -2 C -1,2 0,1 0,0"
+ style="fill:#0e0e0e;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.5"
+ id="path32"
+ inkscape:connector-curvature="0" /></g><g
+ id="g38"
+ transform="matrix(1.8601685,0,0,1.8601685,111.24393,381.94125)"
+ style="stroke-width:0.5"><path
+ d="m 0,0 c 0,-2 -1,-4 -4,-4 -2,0 -4,1 -4,4 0,2 1,4 4,4 2,0 4,-1 4,-4"
+ style="fill:#0e0e0e;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.5"
+ id="path40"
+ inkscape:connector-curvature="0" /></g><g
+ id="g42"
+ transform="matrix(1.8601685,0,0,1.8601685,108.45368,381.94125)"
+ style="stroke-width:0.5"><path
+ d="m 0,0 c 0,-1 -1,-2 -2,-2 -1,0 -3,1 -3,2 0,1 2,2 3,2 1,0 2,-1 2,-2"
+ style="fill:#2c2c2c;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.5"
+ id="path44"
+ inkscape:connector-curvature="0" /></g><g
+ id="g46"
+ transform="matrix(1.8601685,0,0,1.8601685,106.43911,381.94125)"
+ style="stroke-width:0.5"><path
+ d="m 0,0 c 0,0 0,-1 -1,-1 0,0 -1,0 -1,1 0,0 0,1 1,1 1,0 1,-1 1,-1"
+ style="fill:#373737;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.5"
+ id="path48"
+ inkscape:connector-curvature="0" /></g><path
+ d="m 292.9375,309.4375 h -3 v 41 h 3 z"
+ style="fill:#1a1a1a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1"
+ id="path50"
+ inkscape:connector-curvature="0" /><rect
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:0.8;fill:#00ffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.28346458;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="rect831"
+ width="270"
+ height="450"
+ x="11.735635"
+ y="-365.1778"
+ transform="scale(1,-1)" /></g></svg>
diff --git a/static/js/combo.public.js b/static/js/combo.public.js
index 238c72e..e4f7dbc 100644
--- a/static/js/combo.public.js
+++ b/static/js/combo.public.js
@@ -4,6 +4,28 @@ $(function() {
$('a[href^="#"]').on('click',
function() { $.scrollTo($(this).attr('href'), 1000); }
);
+
+ if ($('.mobile-case').length) {
+ setInterval(function() {
+ var $clock = $('.mobile-case .clock');
+ var date = new Date();
+ $clock.text(('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2));
+ }, 500);
+ }
+
+ $('.textcell.tablette img').each(function(idx, elem) {
+ var $cell = $(elem).parents('div.textcell');
+ var $mobile_case = $('<div class="mobile-case">' +
+ '<div class="screen">' +
+ '<div class="mobile-top-bar"><span class="clock">--:--</span></div>' +
+ '<div class="mobile-app-content">' +
+ '</div>' +
+ '</div>' +
+ '</div>');
+ $mobile_case.find('.mobile-app-content').append($(elem).detach());
+ $cell.append($mobile_case);
+ });
+
if ($('.ecrans').length > 0) {
var $window = $(window);
var offset = parseInt(Math.random()*2000);