Skip to content

Commit

Permalink
Home page. Video + header. #32
Browse files Browse the repository at this point in the history
  • Loading branch information
@MathieuNls
MathieuNls committed Jun 8, 2015
1 parent 964a24e commit 3f4bff0
Show file tree
Hide file tree
Showing 52 changed files with 249 additions and 89 deletions.
1 change: 1 addition & 0 deletions application/controllers/home.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ function __construct()

function index()
{
array_push($this->_headerData['javaScripts'], "watch.animation");
$this->load->view('header', $this->_headerData);
$this->load->view('home');
$this->load->view('footer');
Expand Down
8 changes: 8 additions & 0 deletions application/helpers/assets_helper.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,14 @@ function css_url($nom)
}
}

if ( ! function_exists('vid_url'))
{
function vid_url($nom)
{
return base_url() . 'assets/videos/' . $nom;
}
}

if ( ! function_exists('ico_url'))
{
function ico_url($nom)
Expand Down
28 changes: 16 additions & 12 deletions application/views/header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,29 +72,33 @@
</div>
<header class="navbar <?php echo $headerClass; ?>">
<div class="container container-fluid">
<div class="row">
<div class="col-md-12"><a href="<?php echo base_url(); ?>"><div class="logo"></div></a></div>
</div>
<div class="row collapse navbar-collapse" id="nav-menu">
<div class="col-md-12">
<ul class="nav navbar-nav">
<div class="nav navbar-nav">

<div class="col-md-2">
<a href="<?php echo base_url(); ?>"><div class="logo"></div></a>
</div>
<div style="margin-top: 10px" class="col-md-1 col-md-offset-5 text-center">
<a href="/blog/watch-tips/">Features</a>
</div>
<div style="margin-top: 10px" class="col-md-1 text-center">
<a href="/about/">Blog</a>
</div>
<?php
if($userIsLoggedIn)
{
echo '<li><a href="/logout/" title="Logout">Logout</a></li>';
echo '<li><a href="/measures/" title="Measures">Measures</a></li>';
echo '<div style="margin-top: 10px" class="col-md-1 text-center"><a href="/logout/" title="Logout">Logout</a></div>';
echo '<div class="col-md-1 "><a class="btn btn-lg btn-white"" href="/measures/" title="Measures">Measures</a></div>';
}
else
{

echo '<li><a href="#" title="Login" data-toggle="modal" data-target="#pageModal" data-modal-update="true" data-href="/login/">Login</a></li>';
echo '<li><a href="#" title="Measures" data-toggle="modal" data-target="#pageModal" data-modal-update="true" data-href="/login/">Measures</a></li>';
echo '<div style="margin-top: 10px" class="col-md-1 text-center"><a href="#" title="Login" data-toggle="modal" data-target="#pageModal" data-modal-update="true" data-href="/login/">Login</a></div>';
echo '<div class="col-md-1 "><a href="#" title="Measures" data-toggle="modal" data-target="#pageModal" data-modal-update="true" data-href="/login/">Measures</a></div>';
}
?>
<li><a href="/blog/watch-tips/">Watch Tips</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
Expand Down
213 changes: 172 additions & 41 deletions application/views/home.php
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,208 @@
<div class="home-intro">
<div class="home-intro-overlay">
<div class="container container-fluid first">
<video id="home-video" src="<?php echo vid_url('home.mp4');?>" width="100%" height="90%" autoplay loop></video>
<div class="container container-fluid first slogan-home">

<div class="row">
<div class="col-md-12">
<center>
<h1>Mechanical watch lover's favorite tool</h1>
<h1>Measure your watch's accuracy</h1>
</center>
</div>
</div>
<div class="row">
<div class="col-md-12">
<center>
<h2>The most convenient way to measure the accuracy of your mechanical watch</h2>
<a class="btn btn-lg btn-white" href="#" title="Signup" data-toggle="modal" data-target="#pageModal" data-modal-update="true" data-href="/sign-up/">Measure your watch now!</a>
</center>
</div>
</div>
<div class="row">
<div class="col-md-12">
<center>
<a class="btn btn-lg btn-white" href="#" title="Signup" data-toggle="modal" data-target="#pageModal" data-modal-update="true" data-href="/sign-up/">Measure your watch now!</a>
<h2>The most convenient way to measure <br /> the accuracy of your mechanical watch</h2>
</center>
</div>
</div>

<div class="row continue">
<div class="col-md-12">
<center>
<span class="fa fa-chevron-down"></span>
</center>
</div>
</div>


</div>
</div>
</div>
<div class="home-picto">
<div class="container container-fluid">
<div class="row">
<div class="col-md-4">
<div class="picto chrono"></div>
<center>Measure the accuracy of your mechanical watch with great precision</center>
</div>
<div class="col-md-4">
<div class="picto accuracy"></div>
<center>Track and monitor the accuracy over time of your mechanical watch</center>
</div>
<div class="col-md-4">
<div class="picto light"></div>
<center>Learn the best tips to keep your watch accuracy at its best</center>
</div>
</div>
<div class="row">
<div class="col-md-12">
<center><a class="btn btn-lg btn-default" href="#" title="Signup" data-toggle="modal" data-target="#pageModal" data-modal-update="true" data-href="/sign-up/">Sign up and get started!</a></center>
</div>
</div>
<div class="row">
<div class="col-md-12"><span class="line black"></span></div>
</div>
<div class="row">
<div class="col-md-12">
<center>
We believe every single watch lover wants to get the most out of his mechanical watches.<br>
Keeping your watch in the best conditions is key for a better accuracy. It’s also the best way to keep it in good shape for the next generations!<br>
Toolwatch is totally free and brought to you by a team of passionate watch aficionados.<br>
</center>
</div>
</div>
<div class="row">
<div class="col-md-12">
<center><a class="btn btn-lg btn-default" href="#" title="Signup" data-toggle="modal" data-target="#pageModal" data-modal-update="true" data-href="/sign-up/">Measure your watch now!</a></center>

<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>
<button style="margin-left:50px;margin-top:20px" id="demo-new" class="btn btn-primary btn-lg" name="startSync">New measure</button>
</div>

</div>
</div>

</div>

</div>
</div>

<script>
// using jQuery


var delta = Math.round((Math.random() * (-5 - 5) + -5));
var d;

$( document ).ready(function() {

$("#demo-third-step").hide();
$("#demo-fourth-step").hide();

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

$(".continue").click(function(){
setTimeout(countDownDisplay, 1000);
});

$ ("#demo-new").click(function (){
$("#demo-third-step").hide();
$("#demo-fourth-step").hide();
$("#demo-second-step").show();
$("#inputUserTime").val("");
$("#demo-sync-time").html("5");

similateInput = function(){

$("#demo-second-step").hide();
$("#demo-third-step").fadeToggle();
};

setTimeout(countDownDisplay, 1000);
});

$( "#demo-cta" ).click(function() {
$( "#demo-pointer" ).hide();
$("#demo-third-step").hide();
$("#demo-fourth-step").fadeToggle();
$(".watch-accuracy").html(delta);
});

$( ".slogan-home" ).animate({
marginTop: "-=70"
}, 2000);
});

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

$("#demo-sync-time").html(countdown - 1);
if(countdown > 1){
setTimeout(countDownDisplay, 1000);
}else{
d = new Date();
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(){

$("#inputUserTime").focus();

var seconds = (d.getSeconds() + 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;
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();
});
}

</script>
Loading

0 comments on commit 3f4bff0

Please sign in to comment.