Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
with
203 additions
and 2 deletions.
- +23 −0 extras/resources.framerjs.com/pages/mirror/index.html
- +176 −0 extras/resources.framerjs.com/static/css/mirror.css
- BIN extras/resources.framerjs.com/static/images/mirror/icon-arrow.png
- BIN extras/resources.framerjs.com/static/images/mirror/icon-arrow@2x.png
- BIN extras/resources.framerjs.com/static/images/mirror/icon-close.png
- BIN extras/resources.framerjs.com/static/images/mirror/icon-close@2x.png
- BIN extras/resources.framerjs.com/static/images/mirror/icon-framer.png
- BIN extras/resources.framerjs.com/static/images/mirror/icon-framer@2x.png
- BIN extras/resources.framerjs.com/static/images/mirror/icon-share.png
- BIN extras/resources.framerjs.com/static/images/mirror/icon-share@2x.png
- +4 −2 extras/resources.framerjs.com/templates/base.html
@@ -0,0 +1,23 @@ | ||
{% extends "base.html" %} | ||
{% block title %}Install Prototype{% endblock %} | ||
|
||
{% block stylesheets %} | ||
<link rel="stylesheet" href="{% static '/css/mirror.css' %}"> | ||
{% endblock stylesheets %} | ||
|
||
{% block content %} | ||
|
||
<img class="icon-close"></figure> | ||
|
||
<section class="wrapper"> | ||
<figure class="icon-framer"></figure> | ||
<h1>Install Prototype</h1> | ||
|
||
<p>Tap <div class="share"><figure class="icon-share"></figure> Share</div>, then choose "Add to Home Screen"</p> | ||
|
||
<section class="arrow"> | ||
<figure class="icon-arrow"></figure> | ||
</section> | ||
</section> | ||
|
||
{% endblock content %} |
@@ -0,0 +1,176 @@ | ||
* { | ||
margin: 0; | ||
padding: 0; | ||
border: none; | ||
-webkit-user-select: none; | ||
-webkit-tap-highlight-color: rgba(0,0,0,0); | ||
} | ||
html, body, .wrapper { | ||
height: 100%; | ||
} | ||
body { | ||
background: #fff; | ||
font: 300 20px "Helvetica Neue", Helvetica, sans-serif; | ||
overflow: hidden; | ||
cursor: url('images/cursor.png') 39 39, auto; | ||
text-align: center; | ||
position: relative; | ||
-webkit-font-smoothing: antialiased; | ||
text-rendering: optimizeLegibility; | ||
color: #333740; | ||
} | ||
a { | ||
color: gray; | ||
} | ||
.framerAlert { | ||
font: 12px/1.6em Menlo; | ||
margin: 10px; | ||
color: gray; | ||
} | ||
::-webkit-scrollbar { | ||
display: none; | ||
} | ||
.wrapper { | ||
width:100%; | ||
max-width: 240px; | ||
margin: 0 auto; | ||
padding-top: 38%; | ||
position: relative; | ||
} | ||
/* Text */ | ||
h1 { | ||
font-size: 22px; | ||
font-weight: 400; | ||
margin-top: 0px; | ||
line-height: 1.5; | ||
color: black; | ||
|
||
margin-bottom: 8px; | ||
margin-top: 16px; | ||
} | ||
h2 { | ||
font-size: 14px; | ||
font-weight: 400; | ||
color: #788594; | ||
} | ||
hr { | ||
border: none; width: 100%; | ||
border-bottom: 1px solid #EFF1F3; | ||
display: block; | ||
margin: 40px auto 32px auto; | ||
} | ||
p { | ||
display: inline-block; | ||
line-height: 1.5; | ||
} | ||
figure { | ||
display: inline-block; | ||
} | ||
.share { | ||
color: #007AFF; | ||
display: inline-block; | ||
margin-left: 8px; | ||
} | ||
.icon-share { | ||
margin-right: 0px; | ||
position: relative; | ||
top:0.5px; | ||
} | ||
.arrow { | ||
position: absolute; | ||
max-width: 240px; | ||
width: 100%; | ||
left:50%; margin-left:-120px; | ||
bottom: 24%; | ||
} | ||
|
||
.arrow figure { | ||
-webkit-animation: bounce 1.25s ease infinite; | ||
-moz-animation: bounce 1.25s ease infinite; | ||
-o-animation: bounce 1.25s ease infinite; | ||
animation: bounce 1.25s ease infinite; | ||
|
||
-webkit-transform-origin: center bottom; | ||
-ms-transform-origin: center bottom; | ||
transform-origin: center bottom; | ||
} | ||
|
||
@-webkit-keyframes bounce { | ||
0%, 100% { | ||
-webkit-transform: translate3d(0,0,0); | ||
transform: translate3d(0,0,0); | ||
} | ||
50% { | ||
-webkit-transform: translate3d(0, -16px, 0); | ||
transform: translate3d(0, -16px, 0); | ||
} | ||
} | ||
@keyframes bounce { | ||
0%, 100% { | ||
-webkit-transform: translate3d(0,0,0); | ||
transform: translate3d(0,0,0); | ||
} | ||
50% { | ||
-webkit-transform: translate3d(0, -16px, 0); | ||
transform: translate3d(0, -16px, 0); | ||
} | ||
} | ||
|
||
/* Close */ | ||
.icon-close { | ||
background-image: url("/static/images/mirror/icon-close.png"); | ||
position: absolute; | ||
top:16px; | ||
right:16px; | ||
cursor: pointer; | ||
cursor: hand; | ||
} | ||
.icon-framer { | ||
background-image: url("/static/images/mirror/icon-framer.png"); | ||
width: 60px; | ||
height: 60px; | ||
} | ||
.icon-share { | ||
background-image: url("/static/images/mirror/icon-share.png"); | ||
width: 11px; | ||
height: 18px; | ||
} | ||
.icon-arrow { | ||
background-image: url("/static/images/mirror/icon-arrow.png"); | ||
width: 18px; | ||
height: 30px; | ||
} | ||
|
||
@media screen and (orientation:portrait) { | ||
html, body, .wrapper { | ||
overflow: hidden; | ||
} | ||
} | ||
/* iPad share icon is positioned in the navigation bar */ | ||
@media screen and (min-width: 576px){ | ||
.arrow { | ||
display: none; | ||
} | ||
.wrapper { | ||
padding-bottom: 25%; | ||
} | ||
} | ||
/* Landscape modes */ | ||
@media screen and (orientation:landscape) { | ||
.arrow { | ||
display: none; | ||
} | ||
.wrapper { | ||
padding-top: 10%; | ||
padding-bottom: 0; | ||
} | ||
} | ||
/* iPhone 6 Portrait*/ | ||
@media screen and (min-device-width:375px) and (max-device-width:667px) and (-webkit-min-device-pixel-ratio:2) and (orientation:portrait) { | ||
.wrapper { | ||
padding-top: 48%; | ||
} | ||
.arrow { | ||
bottom: 27%; | ||
} | ||
} |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.