Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

initial

  • Loading branch information...
commit 0eb169ab8411546eb29b1cf27869d59bf31a3da4 0 parents
@kwhinnery authored
5 .gitignore
@@ -0,0 +1,5 @@
+.DS_Store
+.idea
+cloud/cloudConfig.js
+config/global.json
+www/config.json
3  README.md
@@ -0,0 +1,3 @@
+# Create a full-featured mobile app landing page using Twilio, Parse, and Dropbox.
+
+Snoogans.
4 cloud/cloudConfig.sample.js
@@ -0,0 +1,4 @@
+exports.accountSid = 'ACXXX';
+exports.authToken = 'XXX';
+exports.from = '+16515556677';
+exports.message = 'Download ReadGood now! Here\'s the link :) ';
29 cloud/main.js
@@ -0,0 +1,29 @@
+var twilio = require('twilio'),
+ cloudConfig = require('cloud/cloudConfig');
+
+//Initialize the Twilio cloud module
+twilio.initialize(cloudConfig.accountSid, cloudConfig.authToken);
+
+//Define a cloud function to send an SMS
+Parse.Cloud.define('sendLink', function(request, response) {
+ //format phone number
+ var n = request.params.phoneNumber.replace(/[^\d.]/g, '');
+ if (request.params.phoneNumber.indexOf('+') === 0) {
+ n = '+'+n;
+ }
+
+ twilio.sendSMS({
+ From: cloudConfig.from, //a twilio number you control
+ To: n,
+ Body: cloudConfig.message+request.params.redirect
+ }, {
+ success: function(httpResponse) {
+ console.log(httpResponse);
+ response.success('Link is on the way to your phone!');
+ },
+ error: function(httpResponse) {
+ console.error(httpResponse);
+ response.error('There was a problem sending the link - please check your phone number and try again.');
+ }
+ });
+});
11 config/global.sample.json
@@ -0,0 +1,11 @@
+{
+ "applications": {
+ "_default": {
+ "link": "YOUR_PARSE_APP_NAME"
+ },
+ "YOUR_PARSE_APP_NAME": {
+ "applicationId": "YOUR_PARSE_APPLICATION_ID",
+ "masterKey": "YOUR_PARSE_MASTER_KEY"
+ }
+ }
+}
9 www/config.sample.json
@@ -0,0 +1,9 @@
+{
+ "appName":"ReadGood",
+ "title":"Your kids want to ReadGood",
+ "description":"ReadGood is the new app for kids that want to learn to read good - and do other stuff good, too.",
+ "iosLink":"https://itunes.apple.com/us/app/plants-vs.-zombies/id350642635?mt=8",
+ "androidLink":"https://play.google.com/store/apps/details?id=com.popcap.pvz_na",
+ "parseAppId":"YOUR_PARSE_APPLICATION_ID",
+ "parseJavaScriptKey":"YOUR_PARSE_JAVASCRIPT_KEY"
+}
27 www/download.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Redirecting to download</title>
+ <meta name="description" content="A demo app landing page, powered by Twilio">
+ <meta name="author" content="Twilio Inc. via Kevin Whinnery (@kevinwhinnery)">
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+</head>
+<body>
+<p>Redirecting to app download...</p>
+<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+<script type="text/javascript">
+ //Grab configuration info, determine platform
+ $.getJSON('/config.json', function(data) {
+ config = data;
+
+ //populate app download links
+ $('#androidLink').attr('href', config.androidLink);
+ $('#iosLink').attr('href', config.iosLink);
+
+ //Initialize Parse JS SDK
+ Parse.initialize(config.parseAppId, config.parseJavaScriptKey);
+ });
+</script>
+</body>
+</html>
BIN  www/favicon.ico
Binary file not shown
BIN  www/img/appstore.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  www/img/bg-mobile.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  www/img/bg.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  www/img/play.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  www/img/poweredby.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
58 www/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>ReadGood: For kids that want to read good</title>
+ <meta name="description" content="A demo app landing page, powered by Twilio">
+ <meta name="author" content="Twilio Inc. via Kevin Whinnery (@kevinwhinnery)">
+ <link rel="shortcut icon" href="img/favicon.ico">
+
+ <!--
+ a cleaner solution might ultimately be a responsive design, but our content and JS loading
+ needs are different enough where a naive browser detection routine is significantly less code.
+ -->
+ <script type="text/javascript">
+ if (navigator.userAgent.match(/Android|iPhone|iPad|iPod|BlackBerry|Opera Mini|IEMobile/i)) {
+ window.location.href = '/m.html';
+ }
+ </script>
+
+ <!-- Desktop browser style -->
+ <link rel="stylesheet" href="styles/style.css"/>
+</head>
+<body>
+<div id="container">
+ <div id="inner">
+ <h1>ReadGood: For kids that want to read good</h1>
+
+ <p>ReadGood is the new app for kids that want to learn to read good - and do other stuff good, too.</p></div>
+
+ <!-- app links to be populated by config in JS later -->
+ <div id="downloads">
+ <a id="iosLink">
+ <img src="/img/appstore.png">
+ </a>
+ <a id="androidLink">
+ <img src="/img/play.png">
+ </a>
+ </div>
+ <div id="sms">
+ <h4>Send app link to my phone:</h4>
+ <form>
+ <p id="info" style="display:none;"></p>
+ <input id="phoneNumber" name="phoneNumber" type="tel" value="" placeholder="651-555-6666" required/>
+ <input id="submit" type="submit" value="Send me the link" disabled="true"/>
+ <input id="dummy" type="submit" value="Sending..." disabled="true" style="display:none;"/>
+ <p class="small">include a "+" and a country code if you are outside the US - e.g. +4455566677</p>
+ </form>
+ </div>
+</div>
+<div id="backdrop"></div>
+
+<a id="twilio" href="http://www.twilio.com"><img src="/img/poweredby.png" alt="Powered By Twilio"/></a>
+
+<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+<script type="text/javascript" src="//www.parsecdn.com/js/parse-1.1.15.min.js"></script>
+<script src="js/app.js"></script>
+</body>
+</html>
81 www/js/app.js
@@ -0,0 +1,81 @@
+(function() {
+ var config = {};
+
+ //Grab configuration info and fade in site content
+ $.getJSON('/config.json', function(data) {
+ config = data;
+
+ //populate app download links
+ $('#androidLink').attr('href', config.androidLink);
+ $('#iosLink').attr('href', config.iosLink);
+
+ //Initialize Parse JS SDK
+ Parse.initialize(config.parseAppId, config.parseJavaScriptKey);
+ });
+
+ //Do a bit of form validation and double submit protection
+ var $submit = $('#submit'),
+ $dummy = $('#dummy'),
+ $phoneNumber = $('#phoneNumber'),
+ $info = $('#info');
+
+ var validator = $phoneNumber.on('focus', function() {
+ return setInterval(function() {
+ if ($phoneNumber.val() === '') {
+ $submit.attr('disabled', true);
+ }
+ else {
+ $submit.attr('disabled', false);
+ }
+ },100);
+ });
+
+ //handle button UI changes
+ function toggle(on) {
+ if (on) {
+ $dummy.hide();
+ $submit.show();
+ setTimeout(function() {
+ $info.fadeOut();
+ },7000);
+ }
+ else {
+ $dummy.show();
+ $submit.hide();
+ }
+ }
+
+ //Handle the SMS form
+ $submit.on('click', function(e) {
+ toggle(false);
+
+ //Get a link to the download redirect page - should be on the same domain, same level, at download.html
+ var link = window.location.protocol + '//' + window.location.host + '/download.html';
+
+ //execute Parse cloud code to send an SMS
+ Parse.Cloud.run('sendLink', {
+ phoneNumber:$phoneNumber.val(),
+ redirect:link
+ }, {
+ success:function(response) {
+ $('#info').removeClass('error')
+ .addClass('info')
+ .html('Awesome! The link should be on it\'s way.')
+ .fadeIn();
+
+ toggle(true);
+ },
+ error: function(response) {
+ $('#info').removeClass('info')
+ .addClass('error')
+ .html('There was a problem sending the link - please check your number and try again')
+ .fadeIn();
+
+ toggle(true);
+ }
+ });
+
+ //don't submit the form
+ e.preventDefault();
+ });
+})();
7 www/js/mobile.js
@@ -0,0 +1,7 @@
+(function() {
+ //Grab configuration info and fade in site content
+ $.getJSON('/config.json', function(data) {
+ $('#androidLink').attr('href', data.androidLink);
+ $('#iosLink').attr('href', data.iosLink);
+ });
+})();
28 www/m.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>ReadGood: For kids that want to read good</title>
+ <meta name="description" content="A demo app landing page, powered by Twilio">
+ <meta name="author" content="Twilio Inc. via Kevin Whinnery (@kevinwhinnery)">
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <link rel="stylesheet" href="styles/mobile.css"/>
+</head>
+<body>
+<div id="container">
+
+ <div id="downloads">
+ <p>ReadGood <br/> helps kids read good.</p>
+ <a id="iosLink">
+ <img src="/img/appstore.png">
+ </a>
+ <a id="androidLink">
+ <img src="/img/play.png">
+ </a>
+ </div>
+</div>
+
+<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+<script src="js/mobile.js"></script>
+</body>
+</html>
33 www/styles/mobile.css
@@ -0,0 +1,33 @@
+html {
+ background: url(../img/bg-mobile.jpg) no-repeat;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -ms-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+}
+
+#container {
+ position:relative;
+ margin:10px auto 0 auto;
+ width:310px;
+ height:360px;
+}
+
+#downloads {
+ position:absolute;
+ bottom:0;
+ text-align: right;
+}
+
+#downloads p {
+ font-size: 14px;
+ float:right;
+ padding:5px;
+ border: 1px #fff solid;
+ border-radius:5px;
+ background-color: #000;
+ font-family: 'Helvetica Neue', Helvetica, sans-serif;
+ color:#fff;
+ font-weight: bold;
+}
111 www/styles/style.css
@@ -0,0 +1,111 @@
+html {
+ background-image: url(../img/bg.jpg);
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -ms-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+}
+
+h4 {
+ margin:0;
+ padding:0;
+ font-size:14px;
+ text-align:left;
+}
+
+p {
+ line-height:1.2em;
+}
+
+form {
+ margin-right:20px;
+}
+
+input[type="tel"] {
+ margin:5px 0 5px 0;
+ height:20px;
+ width:100%;
+ font-size:18px;
+}
+
+input[type="submit"] {
+ margin:0;
+ padding:0;
+}
+
+.small {
+ font-size: 11px;
+ font-style: italic;
+}
+
+#twilio {
+ position: absolute;
+ bottom:10px;
+ left:10px;
+}
+
+#info {
+ margin:0;
+ padding:5px;
+ background-color: #000;
+ border-radius:3px;
+ border:1px solid #fff;
+ font-size: 11px;
+}
+
+.info {
+ color:#adff2f;
+}
+
+.error {
+ color:#ff0033;
+}
+
+#backdrop {
+ z-index:-1;
+ border-radius:10px;
+ background-color: #000;
+ opacity:0.6;
+ position:absolute;
+ height:320px;
+ width:480px;
+ bottom:10px;
+ right:10px;
+ border:2px solid #fff;
+}
+
+#container {
+ position:absolute;
+ height:320px;
+ width:480px;
+ bottom:10px;
+ right:10px;
+
+ font-family: 'Helvetica Neue', Helvetica, sans-serif;
+ color:#fff;
+ font-size:14px;
+}
+
+#inner {
+ margin:10px 20px 20px 10px;
+}
+
+#downloads {
+ margin-left:10px;
+ width:200px;
+ float:left;
+}
+
+#downloads img {
+ margin:0 0 10px 0;
+}
+
+#sms {
+ margin:0 0 0 220px;
+}
+
+#sms h4 {
+ padding:0;
+ margin:0 0 10px 0;
+}
Please sign in to comment.
Something went wrong with that request. Please try again.