Skip to content

Commit

Permalink
updae home page demo to reflect changes #58
Browse files Browse the repository at this point in the history
  • Loading branch information
@MathieuNls
MathieuNls committed Feb 12, 2016
1 parent 4207688 commit e5fecd7
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 111 deletions.
36 changes: 18 additions & 18 deletions application/views/home/demo.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,37 @@

<div id="demo" class="col-sm-12">

<div class=" col-sm-offset-2 col-sm-3" >
<div style="margin-top:60px;" 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 id="demo-first-step" class="form-group">
<div class="col-sm-5">
<center>
<br />
<br />
<br />
<a
style="display:none"
id="sync-button"
class="btn btn-primary btn-lg">
</a>
</center>
</div>
</div>

<div id="demo-fourth-step" class="col-sm-5" >

<div style="margin-top:100px;" id="demo-second-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>
<strong><span class="watch-accuracy"></span> seconds a day!</strong>
</div>
</div>

</div>

</div>
</div>
130 changes: 37 additions & 93 deletions assets/js/home.logic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,35 +23,56 @@ $( document ).ready(function() {

});

initCounDown();
initSize();
initDemo();

$('video,audio').mediaelementplayer({
enableAutosize: true,
features: []
});

$( "#demo-cta" ).click(function() {



});

var timeoutClick;

function initDemo(){

$("#sync-button").html("<span>"
+ "Press this button when <br /> the second-hand <br /><br />​​"
+ '<img src="../../assets/img/stepnew.jpg" style="width:30%;" />'
+ "<br /><br />"
+ "reaches <i><b>exactly</b></i>&nbsp; the twelve <br /> o'clock position </span> <br />"
);

$("#sync-button").show();
$("#demo-first-step").show();
$("#demo-second-step").hide();

var d = new Date();
var seconds = d.getSeconds();

timeoutClick = setTimeout(
function(){$( "#sync-button" ).click()},
(60 - seconds+1) * 1000);

$( "#sync-button" ).click(function() {

clearInterval(timeoutClick);

var result = delta;

$("#demo-pointer").hide();
$("#demo-third-step").hide();
$("#demo-fourth-step").fadeToggle();
$("#demo-first-step").hide();
$("#demo-second-step").fadeToggle();
$(".watch-accuracy").html(result.toFixed(1));
});

setTimeout(
function(){initDemo();},
10 * 1000);
});

});

function initCounDown(){
$("#demo-second-step").show();
$("#demo-third-step").hide();
$("#demo-fourth-step").hide();
$("#demo-sync-time").html(5);
$("#inputUserTime").val("");
$("#demo-pointer").removeAttr('style');
timeouts.push(setTimeout(countDownDisplay, 1000));
}

function initSize(){
Expand All @@ -78,80 +99,3 @@ function initSize(){
}, 2000);

}

function countDownDisplay(){
var countdown = $("#demo-sync-time").html();

$("#demo-sync-time").html(countdown - 1);
if(countdown > 1){
timeouts.push(setTimeout(countDownDisplay, 1000));
}else{
d = new Date(new Date().getTime());
similateInput();
}
}

function similateInput(){
$("#demo-second-step").hide();
$("#demo-third-step").fadeToggle("slow", function (){

var leftDelta = $("#demo-pointer").position().left
- $("#inputUserTime").position().left;

var topDelta = $("#demo-pointer").position().top
- $("#inputUserTime").position().top - $("#inputUserTime").height() /2;

$( "#demo-pointer" ).animate({
marginTop: "-="+topDelta,
marginLeft: "-="+leftDelta
}, 2000, function(){

var seconds = (d.getSeconds() + Math.floor(Math.abs(delta)));
if(seconds <= 9){
seconds = "0"+seconds;
}

var hours = d.getHours();

if(hours <= 9){
hours = "0"+seconds;
}

var minutes = d.getMinutes();

if(minutes <= 9){
minutes = "0"+minutes;
}

var date = hours + ':' + minutes + ':' + seconds;
writeToInput(date, 0);
});
});
}

function writeToInput(text, i){

if(i < text.length){
$("#inputUserTime").val($("#inputUserTime").val() + text.charAt(i));
i = i +1;
timeouts.push(setTimeout(writeToInput, Math.round(Math.random() * (300 - 100) + 100), text, i));
}else{
clickCTA();
}
}

function clickCTA(){
var leftDelta = $("#demo-pointer").position().left - $("#demo-cta").position().left + $("#demo-cta").width() * 2 + 30;

var topDelta = $("#demo-pointer").position().top - $("#demo-cta").position().top + $("#demo-cta").height() * 3;

$( "#demo-pointer" ).animate({
marginTop: "+="+topDelta,
marginLeft: "+="+leftDelta
}, 2000, function(){
$("#demo-cta").click();
});

timeouts = [];
setTimeout(initCounDown, 10000);
}

0 comments on commit e5fecd7

Please sign in to comment.