WhatsApp share button added

msg in screenshot added

css/style.css

@@ -461,4 +461,16 @@ div.slot-clash {
 .container-fluid .row {
   margin-right: 0!important;
   margin-left: 0!important;
+}
+
+#timetable_msg {
+  color: black;
+  background-color: white;
+}
+
+#timetable_msg tr,
+#timetable_msg td {
+  padding: 0!important;
+  border-color: white!important;
+  margin: 0!important;
 }

index.html

@@ -92,11 +92,15 @@
       </div>
     </div>
     <div class="row">
-      <span class="col-md-8 col-xs-12" id="site_heading">VIT Timetable Visualizer</span>
+      <div class="col-md-8 col-xs-12" id="site_heading">VIT Timetable Visualizer</div>
       <!--Like and Share Facebook buttons-->
-      <span class="text-right col-md-4 col-xs-12">
-        <span id="fb-like-share" class="fb-like" data-href="http://ffcsonthego.azurewebsites.net/" data-layout="button_count" data-action="like" data-size="large" data-show-faces="false" data-share="true"></span>
-      </span>
+      <div class="text-left col-xs-6 visible-xs">
+        <a href="whatsapp://send?text=FFCS made hassle free! Check this out http://ffcsonthego.azurewebsites.net/" class="btn btn-success"><strong>Share </strong><img src="images/whatsapp.png" alt="WhatsApp"></a>
+      </div>
+      <div class="text-right col-md-4 col-xs-6">
+        <div id="fb-like-share" class="fb-like" data-href="http://ffcsonthego.azurewebsites.net/" data-layout="button_count" data-action="like"
+          data-size="large" data-show-faces="false" data-share="true"></div>
+      </div>
       <!-- TODO -->
       <!--
         Add whatsapp share button
@@ -149,6 +153,9 @@
   <div class="container-fluid text-center">
     <div class="row table-responsive">
       <table id="timetable" class="table table-bordered">
+        <tr id="timetable_msg">
+          <td colspan="16">FFCSonTheGo</td>
+        </tr>
         <tr>
           <td class="ColumnOneDays">THEORY HOURS</td>
           <td class="TheoryHours">08:00 AM<br>to<br>08:50 AM</td>

js/script.js

@@ -1,3 +1,5 @@
+$('#timetable_msg').hide(); // hide msg
+
 // disable hover for touch screen devices
 function removeHoverCSSRule() {
     if ('createTouch' in document) {
@@ -23,6 +25,7 @@ function removeHoverCSSRule() {
 $('#takeScreenShot').on('click', function () {
     var original_width = $('body').width();
     $('body').width('1500');
+    $('#timetable_msg').show();
     html2canvas(document.getElementById('timetable'), {
         onrendered: function (canvas) {
             var img_src = canvas.toDataURL("image/jpeg");
@@ -33,6 +36,7 @@ $('#takeScreenShot').on('click', function () {
                 '</body></html>';
             var newWindow = window.open();
             newWindow.document.write(data);
+            $('#timetable_msg').hide();
             $('body').width(original_width);
         }
     });