resources.framerjs / mirror setup

extras/resources.framerjs.com/pages/mirror/index.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 %}

extras/resources.framerjs.com/static/css/mirror.css

@@ -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%;
+	}
+}

extras/resources.framerjs.com/templates/base.html

@@ -3,8 +3,10 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-	<meta name="viewport" content="width=device-width">
+	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 
+	{% block stylesheets %}
+	{% endblock stylesheets %}
 
 	{% block header %}
 	<title>{% block title %}Default{% endblock %}</title>
@@ -17,6 +19,6 @@
 	{% endblock content %}
 
 	{% block scripts %}
-	{% endblock scripts%}
+	{% endblock scripts %}
 </body>
 </html>