Mobile devices now have pictures instead of videos + light refactoring.

#32

application/controllers/home.php

@@ -2,10 +2,20 @@
 
 class Home extends MY_Controller 
 {
+
+    //TODO: Can we overide load view to append .mobile ?
+    private $viewName = "home/home";
+
 	function __construct()
 	{
 		parent::__construct();
         $this->load->model('measure');
+
+
+        if($this->agent->is_mobile()){
+            $this->viewName = "home/home-mobile";
+        }
+
 	}
 
 	function index()
@@ -18,7 +28,7 @@ function index()
         }
 
 		$this->load->view('header', $this->_headerData);
-		$this->load->view('home', $this->homeMessage());
+		$this->load->view($this->viewName, $this->homeMessage());
 		$this->load->view('footer');
 	}
 
@@ -33,7 +43,7 @@ function result(){
         $this->_headerData["meta_img"] = img_url("accuracy.jpg");
 
         $this->load->view('header', $this->_headerData);
-        $this->load->view('home', $this->homeMessage());
+        $this->load->view($this->viewName, $this->homeMessage());
         $this->load->view('footer');
     }
 
@@ -42,14 +52,21 @@ private function homeMessage(){
         $randBrands = rand ( 0 , 2 );
 
         $watchBrands = array('Seiko', 'Rolex', 'Omega');
-        $videos = array('Omega.mp4', 'Rolex.mp4', 'Zenith.mp4', 'Vacheron.mp4');
+        $videos = array('Omega', 'Rolex', 'Zenith', 'Vacheron');
 
         $video = vid_url('Zenith.mp4');
 
-        return  array('title'=>$this->measure
+        if(!$this->agent->is_mobile()){
+            return  array('title'=>$this->measure
                 ->getMeasuresCountByWatchBrand($watchBrands[$randBrands]) . 
                 ' ' . $watchBrands[$randBrands] . ' measured on Toolwatch.io',
-                'video_url'=>vid_url($videos[rand ( 0 , 3 )]));
+                'video_url'=>vid_url($videos[rand ( 0 , 3 )]) . '.mp4');
+        }else{
+            return  array('title'=>$this->measure
+                ->getMeasuresCountByWatchBrand($watchBrands[$randBrands]) . 
+                ' ' . $watchBrands[$randBrands] . ' measured on Toolwatch.io',
+                'video_url'=>img_url($videos[rand ( 0 , 3 )]) . '.png');
+        }
 
     }
 

application/views/home/demo.php

@@ -0,0 +1,38 @@
+<div class="row">
+
+    <div id="demo" class="col-sm-12">
+
+       <div class=" col-sm-offset-2 col-sm-3" >
+            <canvas id="canvas_animated_watch" width="250" height="250"></canvas>
+            <img style="display:none" id="watch" src="<?php echo img_url('flatwatch-blank.png');?>">
+       </div>
+
+        <div id="demo-second-step" class="col-sm-5" >
+            <center id="demo-sync-time">5</center>
+        </div>
+
+        <div id="demo-third-step" class="col-sm-5" >
+            <br />
+            <br />
+            <br />
+            <input type="text" id="inputUserTime" name="userTime" class="form-control" placeholder="ex: 12:34:56">
+            <br>Please use the 24-hour clock format
+            <span class="signup-error time-error">Your time should be hours:minutes:seconds (like 11:22:33).</span>
+            <button id="demo-cta" class="btn btn-primary btn-lg" name="startSync">Check now!</button>
+            <img id='demo-pointer' src="<?php echo img_url('pointer.png');?>">
+
+        </div>
+
+
+        <div id="demo-fourth-step" class="col-sm-5" >
+            <div class="col-sm-12">
+                <h1>Congratulations!</h1> <br/> <p class="accuracy-subtitle"> The accuracy of your <strong><span class="watch-brand">watch</span></strong> is </p>
+            </div>
+            <div class="col-sm-12">
+                <strong><span class="watch-accuracy"></span> seconds a day!</strong> 
+            </div>
+        </div>
+
+    </div>
+
+</div>

application/views/home/home-mobile.php

@@ -0,0 +1,15 @@
+<div class="home-intro">
+
+    <?php $this->load->view('home/intro-mobile'); ?>
+
+</div>
+
+<div class="home-picto">
+    <div id="demo-screen" class="container container-fluid">
+
+        <?php 
+            $this->load->view('home/slogan'); 
+        ?>
+
+    </div>
+</div>

application/views/home/home.php

@@ -0,0 +1,18 @@
+<div class="home-intro">
+
+    <?php $this->load->view('home/intro'); ?>
+
+</div>
+
+<div class="home-picto">
+    <div id="demo-screen" class="container container-fluid">
+
+        <?php 
+            $this->load->view('home/demo'); 
+            $this->load->view('home/slogan'); 
+        ?>
+
+    </div>
+</div>
+
+<?php $this->load->view('home/mosa'); ?>

application/views/home/intro-mobile.php

@@ -0,0 +1,28 @@
+<div class="home-intro-overlay">
+
+    <img id="home-video" src="<?php echo $video_url;?>" width="100%" height="100%"/>
+
+    <div class="container container-fluid first slogan-home">
+
+        <div class="row">
+            <div class="col-md-12">
+                <center>
+
+                    <?php 
+                        if($userIsLoggedIn)
+                        {
+                            echo '<a class="btn btn-lg btn-white" href="/measures/">Measure your watch now!</a>';
+                        }
+                        else
+                        {
+
+                            echo '<a class="btn btn-lg btn-white" href="#" title="Signup" data-toggle="modal" data-target="#pageModal" data-modal-update="true" data-cta="MEASURE_NOW" data-href="/sign-up/">Measure your watch now!</a>';
+                        }
+                    ?>
+
+                </center>
+            </div>
+        </div>
+
+    </div>
+</div>

application/views/home/intro.php

@@ -0,0 +1,44 @@
+<div class="home-intro-overlay">
+
+    <video id="home-video" src="<?php echo $video_url;?>" width="100%" height="100%" autoplay loop muted></video>
+
+    <div class="container container-fluid first slogan-home">
+
+        <div class="row">
+            <div class="col-md-12">
+                <center>
+                    <h1>Measure your watch's accuracy</h1>
+                </center>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-12">
+                <center>
+
+                    <?php 
+                        if($userIsLoggedIn)
+                        {
+                            echo '<a class="btn btn-lg btn-white" href="/measures/">Measure your watch now!</a>';
+                        }
+                        else
+                        {
+
+                            echo '<a class="btn btn-lg btn-white" href="#" title="Signup" data-toggle="modal" data-target="#pageModal" data-modal-update="true" data-cta="MEASURE_NOW" data-href="/sign-up/">Measure your watch now!</a>';
+                        }
+                    ?>
+
+                </center>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-12">
+                <center>
+                    <h2>The most convenient way to measure <br /> the accuracy of your mechanical watch</h2>
+                </center>
+            </div>
+        </div>
+
+    </div>
+</div>

application/views/home/mosa.php

@@ -0,0 +1,20 @@
+<div id="mosa-screen" class="home-mosa">
+
+    <div class="home-mosa-stats">
+        <img src="<?php echo img_url('logo-blue.png');?>">
+        <h2><?php echo $title; ?></h2>
+        <p>The most convenient way to measure the accuracy of your mechanical watch.</p>
+    </div>
+
+    <div class="home-mosa-pictures">
+        <div id="mosa-picture-1" style="background-image: url('<?php echo img_url('1.1.jpg'); ?>');" class="home-mosa-picture">
+        </div>
+        <div id="mosa-picture-2" style="background-image: url('<?php echo img_url('2.1.jpg'); ?>');" class="home-mosa-picture">
+        </div>
+        <div id="mosa-picture-3" style="background-image: url('<?php echo img_url('3.1.jpg'); ?>');" class="home-mosa-picture">
+        </div>
+        <div id="mosa-picture-4" style="background-image: url('<?php echo img_url('4.1.jpg'); ?>');" class="home-mosa-picture">
+        </div>
+    </div>
+
+</div>