Skip to content

Commit

Permalink
Make application results more viral. Refs #26
Browse files Browse the repository at this point in the history
  • Loading branch information
@MathieuNls
MathieuNls committed Jun 4, 2015
1 parent 782b515 commit ab63d81
Show file tree
Hide file tree
Showing 10 changed files with 914 additions and 15 deletions.
2 changes: 2 additions & 0 deletions application/controllers/measures.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,10 +107,12 @@ public function get_accuracy()
{

$this->_headerData['headerClass'] = 'blue';
array_push($this->_headerData['javaScripts'], "jquery.sharrre.min", "sharrre.logic", "watch.animation");
$this->load->view('header', $this->_headerData);

$this->_bodyData['selectedWatch'] = $this->watch->getWatch($this->input->post('watchId'));
$this->_bodyData['measureId'] = $this->input->post('measureId');

$this->load->view('measure/get-accuracy', $this->_bodyData);
$this->load->view('measure/audio.php');

Expand Down
3 changes: 2 additions & 1 deletion application/core/MY_Controller.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ public function __construct()
parent::__construct();
$this->_headerData['userIsLoggedIn'] = $this->user->isLoggedIn();
$this->_headerData['styleSheets'] = array('main');
$this->_headerData['javaScripts'] = array('jquery.min', 'bootstrap.min', 'application', 'MediaElement/mediaelement-and-player.min', 'facebook');
$this->_headerData['javaScripts'] = array('jquery.min', 'bootstrap.min', 'application', 'MediaElement/mediaelement-and-player.min',
'facebook');
$this->_headerData['headerClass'] = '';

if($this->_needLoggedIn && !$this->user->isLoggedIn())
Expand Down
59 changes: 47 additions & 12 deletions application/views/measure/get-accuracy.php
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,34 @@
<div class="container container-fluid content first">
<div class="row">
<div class="col-md-12">
<center><h1>Check the accuracy</h1></center>
<center><h1 id="mainTitle">Check the accuracy</h1></center>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form class="form-horizontal" method="post" name="newAccuracy">

<div class="form-group">

<div id="mainExplanation" class="form-group">
<center>
At the end of the countdown, please enter below the exact time as it is on your watch. <br>Let's check the accuracy of your watch!
</center>
</div>
<div class="form-group watch-select">
<label for="brand" class="col-sm-4 control-label">Selected watch </label>
<div class="col-sm-8">
<div class="col-sm-6">
<select class="form-control" name="watchId">
<?php echo '<option value="'.$selectedWatch->watchId.'" selected>'.$selectedWatch->brand.' - '.$selectedWatch->name.'</option>'; ?>
</select>
</div>
</div>

<div class="form-group">
<div class="col-sm-12">
<center class="sync-time">5</center>
</div>
</div>
<div class="form-group sync-success" style="display:none;">
<div class="col-sm-12">
<div class="alert alert-success">
<center>
Congratulations, your watch accuracy is <strong><span class="watch-accuracy"></span> seconds a day!</strong>
</center>
</div>
</div>
</div>

<div class="form-group userTime">
<label for="watchTime" class="col-sm-4 control-label">Enter your time </label>
<div class="col-sm-8">
Expand All @@ -48,6 +42,46 @@
<span class="signup-error measure-error"><center>An error occured while synchronizing with Toolwatch’s accuracy system.<br>Please try again later.</center></span>
</div>
</div>

<div class="form-group sync-success" style="display:none;">

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

<canvas class="col-sm-4" id="canvas_animated_watch" width="250" height="250"></canvas>
<div class="col-sm-8">

<div class="col-sm-8">
<h1>Congratulations!</h1> <br/> <p class="accuracy-subtitle"> The accuracy of your <strong><span class="watch-brand"><?php echo $selectedWatch->brand;?></span></strong> is </p>
</div>
<div class="col-sm-8">
<strong><span class="watch-accuracy"></span> seconds a day!</strong>
</div>
</div>

<div class="share-plugin col-md-offset-1 col-sm-10">
<center><p><br />We are happy to have you around, help us spread the love for mechanical watches and share your accuracy on:</p></center>

<div class="col-sm-12">
<div class="share-button" id="twitter" data-url="<?php echo base_url();?>" data-text="My #<?php echo $selectedWatch->brand;?> runs at {WatchAccuracy} on @Toolwatch"></div>
<div class="share-button" id="facebook" data-url="<?php echo base_url();?>" data-text="My #<?php echo $selectedWatch->brand;?> runs at {WatchAccuracy} on @ToolwatchApp"></div>
<div class="share-button" id="googleplus" data-url="<?php echo base_url();?>" data-text="My #<?php echo $selectedWatch->brand;?> runs at {WatchAccuracy} on @ToolwatchApp"></div>
</div>


<center><p><br /><br /><br />We <i style="color:#4d77a7" class="fa fa-heart"></i> <a href="https://instagram.com/toolwatchapp/">Instagram</a>, tag us with your wristshots and share your results using #ToolwatchApp !</p></center>

<!-- www.intagme.com -->
<iframe src="http://www.intagme.com/in/?u=dG9vbHdhdGNoYXBwfGlufDEwMHw0fDJ8fHllc3w1fHVuZGVmaW5lZHx5ZXM=" allowTransparency="true" frameborder="0" scrolling="no" style="margin-left:5px; border:none; overflow:hidden; width:460px; height: 230px" ></iframe>

</div>

</div>

</div>


</div>

<div class="form-group">
<div class="col-sm-12">
<center>
Expand All @@ -62,4 +96,5 @@
</form>
</div>
</div>
<img style="display:none" id="watch" src="<?php echo img_url('flatwatch-blank.png');?>">
</div>
122 changes: 121 additions & 1 deletion assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -358,7 +358,6 @@ footer .fa
footer a
{
color: white;
transition: color 0.2s ease-in-out;
}
footer a:hover
{
Expand Down Expand Up @@ -684,3 +683,124 @@ button[name=syncDone],
margin-top: 10px;
}
}

.watch-accuracy{
color:#4d77a7;
font-weight: bolder;
font-size: 40px;
}

.accuracy-subtitle{
margin-top: -30px;
}

.sharrre{
margin:0px 0 0 50px;
float:left;
}

.sharrre .box a:hover{
text-decoration:none;
}

.sharrre .count {
color:#525b67;
display:block;
font-size:18px;
font-weight:bold;
line-height:40px;
height:40px;
position:relative;
text-align:center;
width:70px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
border:1px solid #b2c6cc;
background: #fbfbfb; /* Old browsers */
background: -moz-linear-gradient(top, #fbfbfb 0%, #f6f6f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fbfbfb 0%,#f6f6f6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fbfbfb 0%,#f6f6f6 100%); /* IE10+ */
background: linear-gradient(top, #fbfbfb 0%,#f6f6f6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
}
.sharrre .count:before, .sharrre .count:after {
content:'';
display:block;
position:absolute;
left:49%;
width:0;
height:0;
}
.sharrre .count:before {
border:solid 7px transparent;
border-top-color:#b2c6cc;
margin-left:-7px;
bottom: -14px;
}
.sharrre .count:after {
border:solid 6px transparent;
margin-left:-6px;
bottom:-12px;
border-top-color:#fbfbfb;
}
.sharrre .share {
color:#FFFFFF;
display:block;
font-size:12px;
font-weight:bold;
height:30px;
line-height:30px;
margin-top:8px;
padding:0;
text-align:center;
text-decoration:none;
width:70px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#twitter .share {
text-shadow: 1px 0px 0px #0077be;
filter: dropshadow(color=#0077be, offx=1, offy=0);
border:1px solid #0075c5;
background: #26c3eb;
background: -moz-linear-gradient(top, #26c3eb 0%, #26b3e6 50%, #00a2e1 51%, #0080d6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#26c3eb), color-stop(50%,#26b3e6), color-stop(51%,#00a2e1), color-stop(100%,#0080d6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #26c3eb 0%,#26b3e6 50%,#00a2e1 51%,#0080d6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #26c3eb 0%,#26b3e6 50%,#00a2e1 51%,#0080d6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #26c3eb 0%,#26b3e6 50%,#00a2e1 51%,#0080d6 100%); /* IE10+ */
background: linear-gradient(top, #26c3eb 0%,#26b3e6 50%,#00a2e1 51%,#0080d6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26c3eb', endColorstr='#0080d6',GradientType=0 ); /* IE6-9 */
box-shadow: 0 1px 4px #DDDDDD, 0 1px 0 #5cd3f1 inset;
}
#facebook .share {
text-shadow: 1px 0px 0px #26427e;
filter: dropshadow(color=#26427e, offx=1, offy=0);
border:1px solid #24417c;
background: #5582c9; /* Old browsers */
background: -moz-linear-gradient(top, #5582c9 0%, #33539a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5582c9), color-stop(100%,#33539a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #5582c9 0%,#33539a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #5582c9 0%,#33539a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #5582c9 0%,#33539a 100%); /* IE10+ */
background: linear-gradient(top, #5582c9 0%,#33539a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5582c9', endColorstr='#33539a',GradientType=0 ); /* IE6-9 */
box-shadow: 0 1px 4px #DDDDDD, 0 1px 0 #80a1d6 inset;
}
#googleplus .share {
text-shadow: 1px 0px 0px #222222;
filter: dropshadow(color=#222222, offx=1, offy=0);
border:1px solid #262626;
background: #6d6d6d; /* Old browsers */
background: -moz-linear-gradient(top, #6d6d6d 0%, #434343 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6d6d6d), color-stop(100%,#434343)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6d6d6d 0%,#434343 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6d6d6d 0%,#434343 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #6d6d6d 0%,#434343 100%); /* IE10+ */
background: linear-gradient(top, #6d6d6d 0%,#434343 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d6d6d', endColorstr='#434343',GradientType=0 ); /* IE6-9 */
box-shadow: 0 1px 4px #DDDDDD, 0 1px 0 #929292 inset;
}
Binary file added assets/img/flatwatch-blank.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/flatwatch.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 8 additions & 1 deletion assets/js/application.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -315,13 +315,20 @@ $(document).ready(function()
$('button[name="restartCountdown"]').hide();
$('.sync-success').show();
$('.backToMeasure').show();
$('#mainTitle').hide();
$('#mainExplanation').hide();

if(result.accuracy != null)
{
if(result.accuracy > 0)
if(result.accuracy > 0){
result.accuracy = '+'+result.accuracy;
}

$('.watch-accuracy').html(result.accuracy);

$('.share-button').attr("data-text",
$('.share-button').attr("data-text").replace("{WatchAccuracy}", result.accuracy));

}
}
else
Expand Down
Loading

0 comments on commit ab63d81

Please sign in to comment.