Created
September 14, 2016 14:57
-
-
Save Harrisonkamau/1753c157564257cb20392f210291dac1 to your computer and use it in GitHub Desktop.
These are my files. I would like to receive an sms when i enter my phone number on the Send link form. Currently, the system works when I run the code on the terminal.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> | |
| <title>OCharge</title> | |
| <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,700" rel="stylesheet"> | |
| <!-- Bootstrap --> | |
| <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> | |
| <!--plugins--> | |
| <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"> | |
| <link href="bower_components/flexslider/flexslider.css" rel="stylesheet"> | |
| <link href="bower_components/lightbox2/dist/css/lightbox.css" rel="stylesheet"> | |
| <link href="owl-carousel/owl.carousel.css" rel="stylesheet"> | |
| <link href="owl-carousel/owl.theme.css" rel="stylesheet"> | |
| <link href="owl-carousel/owl.transitions.css" rel="stylesheet"> | |
| <link href="et-line-icons/style.css" rel="stylesheet"> | |
| <link href="css/animate.css" rel="stylesheet"> | |
| <!--custom css file--> | |
| <link href="css/style.css" rel="stylesheet"> | |
| <link href="custom/css/style.css" rel="stylesheet"> | |
| <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> | |
| <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> | |
| <!--[if lt IE 9]> | |
| <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> | |
| <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> | |
| <![endif]--> | |
| </head> | |
| <body data-spy="scroll"> | |
| <!-- Static navbar --> | |
| <nav class="navbar header-v1 header-transparent navbar-default navbar-fixed-top"> | |
| <div class="container"> | |
| <div class="navbar-header scroll-to"> | |
| <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"> | |
| <a href="https://play.google.com/store/apps/details?id=com.ocharge" target="_blank"><img src="custom/img/google-play-badge.png" class="gplay" width="190" /></a> | |
| </button> | |
| <a class="navbar-brand" href="index.html"><img src="custom/img/logo-white.png" class="whiteone" width="170" /></a> | |
| <a class="navbar-brand" href="index.html"><img src="custom/img/logo-red.png" class="redone" width="170"/></a> | |
| </div> | |
| <div id="navbar" class="navbar-collapse collapse"> | |
| <ul class="nav navbar-nav navbar-right"> | |
| <li><a href="https://play.google.com/store/apps/details?id=com.ocharge" target="_blank"><img id="playstore" src="custom/img/google-play-badge.png" width="190" /></a></li> | |
| </ul> | |
| </div><!--/.nav-collapse --> | |
| </div><!--/.container-fluid --> | |
| </nav><!--navigation end here--> | |
| <section id="home" class="banner-intro banner-slider"> | |
| <div class="ochargex"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-10 col-md-offset-1 col-sm-12 no-padding"> | |
| <div class="col-md-6 no-padding hidden-xs hidden-sm"> | |
| <img id="img-topphone"src="custom/img/topphone.png" class="img-responsive"/> | |
| </div> | |
| <div class="col-md-6 no-padding text-center"> | |
| <img src="custom/img/stuff.png" class="img-responsive"/> | |
| <br/> | |
| <a id="find-out" href="https://player.vimeo.com/video/181299321"target="_blank" class="btn btn-lg btn-primary btn-sky-blue">Find out here ▷</a> | |
| </div> | |
| <div class="col-md-6 no-padding visible-xs visible-sm "> | |
| <div class="space-20"></div> | |
| <img id="img-topphone" src="custom/img/topphone.png" class="img-responsive center-block"/> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="features"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-sm-8 col-sm-offset-2 center-title"> | |
| <p class="biggerfontp">Get Rewarded with <strong>Deals & Discounts</strong> from your Favourite Brands around you, every time you <strong>Top-Up your airtime</strong> using OCharge!</p> | |
| </div> | |
| </div><!--center title row end--> | |
| <div class="vertical-align-child aside-feature-row"> | |
| <div class="col-sm-4 col-md-offset-1 wow animated fadeInLeft margin-b-30 hidden-sm hidden-xs" data-wow-delay="0.3s"> | |
| <div id="ocharge-features1" class="ocharge-features active"> | |
| <h3>Recharge Airtime</h3> | |
| <p>Buy airtime for yourself, or for a friend, for <strong>any network in Kenya!</strong></p> | |
| <img src="custom/img/networks.png" width="250"/> | |
| </div> | |
| <div id="ocharge-features2" class="ocharge-features"> | |
| <h3>Earn Points</h3> | |
| <p>Earn Points equivalent to the amount you've spent on Airtime. <strong>1 Shilling Airtime = 1 OCharge Point</strong>.</p> | |
| </div> | |
| <div id="ocharge-features3" class="ocharge-features"> | |
| <h3>Pick Up Deals!</h3> | |
| <p>We keep updating the App with Awesome Deals from your favorite <strong>Food / Drinks / Travel / Entertainment / Fashion / Home / Electronics</strong> Brands!</p> | |
| </div> | |
| </div> | |
| <div class="col-sm-12 wow animated fadeInLeft margin-b-30 visible-sm visible-xs" data-wow-delay="0.3s"> | |
| <div id="ocharge-mobile-features1" class="ocharge-features"> | |
| <h3>Recharge Airtime</h3> | |
| <p>Buy airtime for yourself, or for a friend, for <strong>any network in Kenya!</strong></p> | |
| <img src="custom/img/networks.jpg" /> | |
| </div> | |
| <div id="ocharge-mobile-features2" class="ocharge-features" style="display:none;"> | |
| <h3>Earn Points</h3> | |
| <p>Earn Points equivalent to the amount you've spent on Airtime. <strong>1 Shilling Airtime = 1 OCharge Point</strong>.</p> | |
| </div> | |
| <div id="ocharge-mobile-features3" class="ocharge-features" style="display:none;"> | |
| <h3>Pick Up Deals</h3> | |
| <p>We keep updating the App with Awesome Deals from your favorite <strong>Food / Drinks / Travel / Entertainment / Fashion / Home / Electronics</strong> Brands</p> | |
| </div> | |
| </div> | |
| <div class="col-sm-12 wow animated fadeInLeft margin-b-30 visible-sm visible-xs text-center" data-wow-delay="0.3s"> | |
| <span class="toggla"> | |
| <i class="fa fa-circle" aria-hidden="true" id="toggla1"></i> | |
| <i class="fa fa-circle-o" aria-hidden="true" id="toggla2"></i> | |
| <i class="fa fa-circle-o" aria-hidden="true" id="toggla3"></i> | |
| </span> | |
| </div> | |
| <div class="col-sm-5 col-sm-offset-2 wow animated fadeInRight" data-wow-delay="0.4s"> | |
| <img src="custom/img/recharge.jpg" class="img-responsive ochimg1" alt="" width="440"> | |
| <img src="custom/img/points.jpg" class="img-responsive ochimg2" alt="" width="350" style="display:none;"> | |
| <img src="custom/img/deals.jpg" class="img-responsive ochimg3" alt="" width="440" style="display:none;"> | |
| </div> | |
| </div><!--side by side left right features row end, use the class .vertical-align-child .aside-feature-row into row--> | |
| <hr> | |
| <div class="space-40"></div> | |
| <div class="row"> | |
| <div class="col-sm-8 col-sm-offset-2 center-title"> | |
| <h2 class="otitle">Download the FREE App Now!</h2> | |
| <p class="biggerfontp">Enter your Kenya Mobile Number and we'll text a <strong>Download Link</strong> directly to your phone.</p> | |
| <div class="space-20"></div> | |
| <form id="sendsms"class="form col-md-10 col-md-offset-1" action=""> | |
| <div class="form-exampleInputName2group col-md-6"> | |
| <input type="text" class="form-control input-lg input-rounded" id="phonenumber" name="phonenumber" placeholder="+254" value="" required=""> | |
| </div> | |
| <div class="form-group col-md-6"> | |
| <button id="send-me" type="submit" class="btn btn-primary btn-lg btn-block btn-pinkish">Send Link</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div><!--center title row end--> | |
| <hr> | |
| <div class="space-40"></div> | |
| <div class="row"> | |
| <div class="col-sm-12 center-title"> | |
| <h2 class="otitle">News & Media</h2> | |
| <div class="col-md-12 text-left"> | |
| <h3 id="africa">Africa's most rewarding recharge experience.</h3> | |
| <p class="kiasifontp">Video Promo</p> | |
| </div> | |
| <!-- <a href="#popupVideo" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Launch video</a> --> | |
| <div data-role ="pop-up" id="popupVideo" data-overlay-theme="b" data-tolerance="15, 15" class="ui-content"> | |
| <iframe src="https://player.vimeo.com/video/181299321" controls autoplay frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> | |
| </div> | |
| <!-- <div class="col-md-4 video-embed"> --> | |
| <!-- <iframe width="100%" height="180px" src="https://www.youtube.com/embed/uvcCwnioM6c" frameborder="0" allowfullscreen></iframe> --> | |
| <!-- <iframe width="560" height="320" src="https://player.vimeo.com/video/181299321" controls autoplay frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> --> | |
| <!-- </div> --> | |
| <div class="clearfix"></div> | |
| <div class="space-40"></div> | |
| <div class="col-md-12 text-left"> | |
| <h3 id="news">In the NEWS</h3> | |
| <p><img src="custom/img/news.jpg" class="img-responsive" /></p> | |
| </div> | |
| </div> | |
| </div><!--center title row end--> | |
| </div> | |
| </section> | |
| <!--section features end--> | |
| <hr style="width:88%;"> | |
| <!--footer start--> | |
| <footer class="footer"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-6 col-md-offset-3 socials text-center"> | |
| <a href="https://www.facebook.com/OChargeKE" target="_blank"><img src="custom/img/facebook.png" /></a> | |
| <a href="https://twitter.com/OChargeKE" target="_blank"><img src="custom/img/twitter.png" /></a> | |
| <a href="https://www.instagram.com/ochargeke/" target="_blank"><img src="custom/img/instagram.png" /></a> | |
| </div> | |
| <div class="space-60"></div> | |
| <div class="col-md-10 col-md-offset-1 hidden-xs hidden-sm"> | |
| <div class="col-sm-4 margin-b-30"> | |
| <h2 class="one">About</h2> | |
| <ul class="list-unstyled clearfix"> | |
| <li class="clearfix"> | |
| <a href="about.html">Company</a> | |
| </li> | |
| <li class="clearfix"> | |
| <a href="http://isongrp.com/" target="_blank">Investors - iSON Group</a> | |
| </li> | |
| <li class="clearfix"> | |
| <a href="contact.html">Contact</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="col-sm-4 margin-b-30"> | |
| <h2 class="two">Legal</h2> | |
| <ul class="list-unstyled clearfix"> | |
| <li class="clearfix"> | |
| <a href="terms.html">Terms & Conditions</a> | |
| </li> | |
| <li class="clearfix"> | |
| <a href="privacy.html">Privacy Policy</a> | |
| </li> | |
| </ul> | |
| </div><!--col4 end--> | |
| <div class="col-sm-4 margin-b-30"> | |
| <h2 class="three">Work with us</h2> | |
| <ul class="list-unstyled clearfix"> | |
| <li class="clearfix"> | |
| <a href="mailto:email@harrison.kamau@ocharge.co.ke?subject=Job Application body=Please consider my application">Jobs</a> | |
| </li> | |
| <li class="clearfix"> | |
| <a href="ombassador.html">Ombassadors Internship Program</a> | |
| </li> | |
| </ul> | |
| </div><!--col4 end--> | |
| </div> | |
| <div class="col-md-10 col-md-offset-1 collapsible visible-xs visible-sm"> | |
| <div class="panel-group" id="accordion"> | |
| <div class="panel panel-default"> | |
| <div class="panel-heading accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne"> | |
| <h2 class="one">About</h2> | |
| </div> | |
| <div id="collapseOne" class="panel-collapse collapse in"> | |
| <div class="panel-body"> | |
| <ul class="list-unstyled clearfix"> | |
| <li class="clearfix"> | |
| <a href="about.html">Company</a> | |
| </li> | |
| <li class="clearfix"> | |
| <a href="http://isongrp.com/" target="_blank">Investors - iSON Group</a> | |
| </li> | |
| <li class="clearfix"> | |
| <a href="contact.html">Contact</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="panel panel-default"> | |
| <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo"> | |
| <h2 class="two">Legal</h2> | |
| </div> | |
| <div id="collapseTwo" class="panel-collapse collapse"> | |
| <div class="panel-body"> | |
| <ul class="list-unstyled clearfix"> | |
| <li class="clearfix"> | |
| <a href="terms.html" target="_blank">Terms & Conditions</a> | |
| </li> | |
| <li class="clearfix"> | |
| <a href="privacy.html" target="_blank">Privacy Policy</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="panel panel-default"> | |
| <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapseThree"> | |
| <h2 class="three">Work with us</h2> | |
| </div> | |
| <div id="collapseThree" class="panel-collapse collapse"> | |
| <div class="panel-body"> | |
| <ul class="list-unstyled clearfix"> | |
| <li class="clearfix"> | |
| <a href="mailto:email@harrison.kamau@ocharge.co.ke?subject=Job Application body=Please consider my application">Jobs</a> | |
| </li> | |
| <li class="clearfix"> | |
| <a href="ombassador.html">Ombassadors Internship Program</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div><!--row end--> | |
| <div class="row"> | |
| <div class="col-sm-12 text-center"> | |
| <div class="footer-bottom"> | |
| <p class="powered"><img width="200" height="auto" src="/images/powered_by_oliza.png" alt="" /></p> | |
| </ul> | |
| <span> Copyright ©2016. Oliza. All Rights Reserved</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!--footer end--> | |
| <!-- scroll to top --> | |
| <a href="#0" class="cd-top">Top</a> | |
| <script src="bower_components/jquery/dist/jquery.min.js"></script> | |
| <script src="js/jquery-migrate.min.js" type="text/javascript"></script> | |
| <script src="js/jquery.easing.1.3.min.js" type="text/javascript"></script> | |
| <script src="js/jquery.backstretch.min.js" type="text/javascript"></script> | |
| <script src="bootstrap/js/bootstrap.min.js"></script> | |
| <script src="js/smoothscroll.js"></script> | |
| <script src="bower_components/wow/dist/wow.min.js"></script> | |
| <script src="bower_components/lightbox2/dist/js/lightbox.min.js" type="text/javascript"></script> | |
| <script src="owl-carousel/owl.carousel.min.js" type="text/javascript"></script> | |
| <script src="js/modernizr.custom.97074.js" type="text/javascript"></script> | |
| <script src="js/parallax.min.js" type="text/javascript"></script> | |
| <script src="js/custom.js" type="text/javascript"></script> | |
| <script src="script.js" type="text/javascript"></script> | |
| <script src="js/back-to-top.js" type="text/javascript"></script> | |
| <!-- Vimeo video API --> | |
| <script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script> | |
| <script type="text/javascript" src="js/vimeo.js"></script> | |
| <script src="js/popup.js" type="text/javascript"></script> | |
| <script> | |
| $('#ocharge-features1').click(function(){ | |
| $('#ocharge-features1').toggleClass('active'); | |
| $('#ocharge-features2').removeClass('active'); | |
| $('#ocharge-features3').removeClass('active'); | |
| $('.ochimg1').show(); | |
| $('.ochimg2').hide(); | |
| $('.ochimg3').hide(); | |
| }); | |
| $('#ocharge-features2').click(function(){ | |
| $('#ocharge-features2').toggleClass('active'); | |
| $('#ocharge-features1').removeClass('active'); | |
| $('#ocharge-features3').removeClass('active'); | |
| $('.ochimg2').show(); | |
| $('.ochimg1').hide(); | |
| $('.ochimg3').hide(); | |
| }); | |
| $('#ocharge-features3').click(function(){ | |
| $('#ocharge-features3').toggleClass('active'); | |
| $('#ocharge-features2').removeClass('active'); | |
| $('#ocharge-features1').removeClass('active'); | |
| $('.ochimg3').show(); | |
| $('.ochimg2').hide(); | |
| $('.ochimg1').hide(); | |
| }); | |
| $('#toggla1').click(function(){ | |
| $('#toggla3').removeClass("fa-circle").addClass("fa-circle-o"); | |
| $('#toggla2').removeClass("fa-circle").addClass("fa-circle-o"); | |
| $('#toggla1').removeClass("fa-circle-o").addClass("fa-circle"); | |
| $('#ocharge-mobile-features1').show(); | |
| $('#ocharge-mobile-features2').hide(); | |
| $('#ocharge-mobile-features3').hide(); | |
| $('.ochimg1').show(); | |
| $('.ochimg2').hide(); | |
| $('.ochimg3').hide(); | |
| }); | |
| $('#toggla2').click(function(){ | |
| $('#toggla3').removeClass("fa-circle").addClass("fa-circle-o"); | |
| $('#toggla1').removeClass("fa-circle").addClass("fa-circle-o"); | |
| $('#toggla2').removeClass("fa-circle-o").addClass("fa-circle"); | |
| $('#ocharge-mobile-features2').show(); | |
| $('#ocharge-mobile-features1').hide(); | |
| $('#ocharge-mobile-features3').hide(); | |
| $('.ochimg2').show(); | |
| $('.ochimg1').hide(); | |
| $('.ochimg3').hide(); | |
| }); | |
| $('#toggla3').click(function(){ | |
| $('#toggla1').removeClass("fa-circle").addClass("fa-circle-o"); | |
| $('#toggla2').removeClass("fa-circle").addClass("fa-circle-o"); | |
| $('#toggla3').removeClass("fa-circle-o").addClass("fa-circle"); | |
| $('#ocharge-mobile-features3').show(); | |
| $('#ocharge-mobile-features2').hide(); | |
| $('#ocharge-mobile-features1').hide(); | |
| $('.ochimg3').show(); | |
| $('.ochimg2').hide(); | |
| $('.ochimg1').hide(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // We need this to build our post string | |
| var querystring = require('querystring'); | |
| var https = require('https'); | |
| // Your login credentials | |
| var username = 'psy'; | |
| var apikey = 'f9b5445c5ff69131747344fa646e957a4492ec9ee5caac037edd0b59d4474953'; | |
| // getting data from the form | |
| // var form = document.forms.sendsms; | |
| // var phoneNumber = form.phonenumber; | |
| function sendMessage() { | |
| // Define the recipient numbers in a comma separated string | |
| // Numbers should be in international format as shown | |
| var to = '+254717725010'; | |
| // get the user input | |
| //Load the users input from the form | |
| // var to = document.getElementById('exampleInputName2').value; | |
| // And of course we want our recipients to know what we really do | |
| var message = "https://play.google.com/store/apps/details?id=com.ocharge"; | |
| // Build the post string from an object | |
| var post_data = querystring.stringify({ | |
| 'username' : username, | |
| 'to' : to, | |
| 'message' : message | |
| }); | |
| var post_options = { | |
| host : 'api.africastalking.com', | |
| path : '/version1/messaging', | |
| method : 'POST', | |
| rejectUnauthorized : false, | |
| requestCert : true, | |
| agent : false, | |
| headers: { | |
| 'Content-Type' : 'application/x-www-form-urlencoded', | |
| 'Content-Length': post_data.length, | |
| 'Accept': 'application/json', | |
| 'apikey': apikey | |
| } | |
| }; | |
| var post_req = https.request(post_options, function(res) { | |
| res.setEncoding('utf8'); | |
| res.on('data', function (chunk) { | |
| var jsObject = JSON.parse(chunk); | |
| var recipients = jsObject.SMSMessageData.Recipients; | |
| if ( recipients.length > 0 ) { | |
| for (var i = 0; i < recipients.length; ++i ) { | |
| var logStr = 'number=' + recipients[i].number; | |
| logStr += ';cost=' + recipients[i].cost; | |
| logStr += ';status=' + recipients[i].status; // status is either "Success" or "error message" | |
| console.log(logStr); | |
| } | |
| } else { | |
| console.log('Error while sending: ' + jsObject.SMSMessageData.Message); | |
| } | |
| }); | |
| }); | |
| // Add post parameters to the http request | |
| post_req.write(post_data); | |
| post_req.end(); | |
| } | |
| //Call sendMessage method | |
| sendMessage(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment