add cases to mobile screenshots
This commit is contained in:
parent
072105caf8
commit
402c0c8af9
|
|
@ -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; } }
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 5.2 KiB |
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue