diff --git a/README.md b/README.md
index 24de508..bf9c03b 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
uptimey
=======
-[](https://travis-ci.org/stefanbc/uptimey) [](https://www.versioneye.com/user/projects/572c7efaa0ca35004cf77288)
+[](https://travis-ci.org/stefanbc/uptimey) [](https://www.versioneye.com/user/projects/572c7efaa0ca35004cf77288)
If you're proud of your server uptime, because you put a lot of time into configuring it, then you can showcase it with **uptimey** - a beautiful Server Uptime Monitor!
@@ -17,9 +17,9 @@ Features
* Knows your aprox server location (based on IP).
* Tweet your awesome uptime!
* Screenshot the server uptime and show it to your devops buddies! :)
-* Configure it to your liking. You can modify the `client/bin/settings.json` file.
+* Configure it to your liking. You can modify the `client/bin/settings.json` file. Checkout the [SETTINGS.md](SETTINGS.md) file for more info.
-
+
Requirements
--
@@ -48,6 +48,6 @@ Available Grunt tasks:
* `grunt` - will build the whole project.
* `grunt watch` - will watch for any file modifications and will build. Will also build on start.
-* `grunt test` - will test the main app js file using `jshint` (more tests are comming soon).
+* `grunt test` - will test the main app js file using `jshint` (more tests are coming soon).
For local development you can use Vagrant and you can check if the build passes using Travis-CI.
diff --git a/SETTINGS.md b/SETTINGS.md
new file mode 100644
index 0000000..ce8fc91
--- /dev/null
+++ b/SETTINGS.md
@@ -0,0 +1,173 @@
+Settings
+===
+
+If you want to modify the way uptimey behaves and looks you can use the `client/bin/settings.json` file. This file once modified will adjust various things.
+
+Below are the things that can be modified and the explanation to each one of them.
+
+File structure
+---
+
+By default this is how the file should look. By removing any of the lines, you might break the app.
+
+```
+{
+ "background_color" : "",
+ "background_image" : "",
+ "buttons": [{
+ "refresh" : true,
+ "advanced" : true,
+ "twitter" : true,
+ "google-plus" : false,
+ "facebook" : false,
+ "screenshot" : true
+ }],
+ "debug_mode" : false,
+ "default_view" : "default",
+ "display_timezone" : "Europe/Bucharest",
+ "font_color" : "",
+ "font_family" : "",
+ "menu_placement" : "top",
+ "remove_menu" : false,
+ "show_am_pm" : true,
+ "show_location" : true,
+ "show_menu_always" : false,
+ "use_24h_clock" : false
+}
+```
+
+Parameters
+---
+
+```
+background_color
+```
+**(string) (optional)** You can set the desired background color for the app in a HEX or RGB format.
+
+**Default**: empty
+
+---
+
+```
+background_image
+```
+**(string) (optional)** By default the app uses a random image from [Unsplash](http://unsplash.com) but you can specify an URL to another image.
+
+**Default**: empty
+
+---
+
+```
+buttons
+```
+**(bool) (required)** If you want you can disable or enable one of the buttons in the top menu using a boolean value. Available buttons are: refresh, advanced, twitter, google-plus, facebook, screenshot.
+
+**Default**:
+
+```
+"refresh" : true,
+"advanced" : true,
+"twitter" : true,
+"google-plus" : false,
+"facebook" : false,
+"screenshot" : true
+```
+
+---
+
+```
+debug_mode
+```
+**(bool) (optional)** You can enable the debug mode for the app.
+
+**Default**: false
+
+---
+
+```
+default_view
+```
+**(string) (required)** Changed the default view of the app. Available options include: default, advanced.
+
+**Default**: default
+
+---
+
+```
+display_timezone
+```
+**(string) (required)** Set the display timezone for all dates and time featured in the app. You can use the timezones featured [here](http://php.net/manual/en/timezones.php).
+
+**Default**: Europe/Bucharest
+
+---
+
+```
+font_color
+```
+**(string) (optional)** You can set the desired font color for the app in a HEX or RGB format.
+
+**Default**: empty
+
+---
+
+```
+font_family
+```
+**(string) (optional)** You can set the desired font family for the app.
+
+**Default**: empty
+
+---
+
+```
+menu_placement
+```
+**(string) (required)** Set the default placement for the top menu. Available options include: top, bottom, left, right.
+
+**Default**: top
+
+---
+
+```
+remove_menu
+```
+**(bool) (optional)** Remove the main buttons menu entirely.
+
+**Default**: false
+
+---
+
+```
+show_am_pm
+```
+**(bool) (required)** Use this to show or hide the AM / PM operators when showing the time.
+
+**Default**: true
+
+---
+
+```
+show_location
+```
+**(bool) (required)** If you want to show or hide the location of your server you can use this parameter.
+
+**Default**: true
+
+---
+
+```
+show_menu_always
+```
+**(bool) (optional)** Use this parameter if you want to main button menu to be always toggled and opened.
+
+**Default**: false
+
+---
+
+```
+use_24h_clock
+```
+**(bool) (optional)** You can show the clock in a 24h format if you don't want to show it in a 12h format.
+
+**Default**: false
diff --git a/client/bin/app.min.js b/client/bin/app.min.js
index 0218ef4..e03832c 100644
--- a/client/bin/app.min.js
+++ b/client/bin/app.min.js
@@ -1 +1 @@
-(function(){var a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r;p="https://github.com/stefanbc/uptimey",h="./client/lib/models/data.php",g="./client/bin/config.js",q="./client/bin/settings.json",m=require("moment"),j=require("humane"),a="",b="",c="",n=function(a){return j.log(a,{timeout:5e3,baseCls:"humane-libnotify"})},f=function(a){return $(a).addClass("pulse"),$(a).on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",function(){$(this).removeClass("pulse")})},l=function(a){return!isNaN(parseFloat(a))},i=function(a){var b,c;if("number"==typeof a||"boolean"==typeof a)return!1;if("undefined"==typeof a||null===a)return!0;if("undefined"!=typeof a.length)return 0===a.length;b=0;for(c in a)a.hasOwnProperty(c)&&b++;return 0===b},d=function(a){var b,c,d,e,g;switch(d="",a){case"toggle":d=$(".toggle-button").attr("data-status"),"closed"===d?($(".button-container").animate({top:0}),$(".toggle-button").attr("data-status","open"),$(".toggle-button").removeClass("fa-angle-double-down"),$(".toggle-button").addClass("fa-angle-double-up")):"open"===d&&($(".button-container").animate({top:"-80px"}),$(".toggle-button").attr("data-status","closed"),$(".toggle-button").removeClass("fa-angle-double-up"),$(".toggle-button").addClass("fa-angle-double-down"));break;case"advanced":f(".advanced-button"),d=$(".advanced-button").attr("data-status"),"default"===d?($(".advanced-button").attr("data-status","advanced"),$(".advanced-button").addClass("active"),$(".default-panel").fadeOut(500),$(".advanced-panel").fadeIn(500),$.ajax(h,{method:"GET",data:{action:"advanced",flag:"advanced"},success:function(a){$(".advanced-panel .top-container").html(a)}})):"advanced"===d&&($(".advanced-button").attr("data-status","default"),$(".advanced-button").removeClass("active"),$(".advanced-panel").fadeOut(500),$(".default-panel").fadeIn(500));break;case"refresh":$(".refresh-button").addClass("fa-spin"),o("uptime","refresh"),o("time","refresh"),o("ping"),setTimeout(function(){$(".refresh-button").removeClass("fa-spin")},1e3);break;case"twitter":f(".twitter-button"),g="",0!==$("#days").attr("data-value")&&(g+=$("#days").attr("data-value")+" days "),0!==$("#hours").attr("data-value")&&(g+=$("#hours").attr("data-value")+" hours "),0!==$("#minutes").attr("data-value")&&(g+=$("#minutes").attr("data-value")+" minutes"),e=g+" server uptime. Can you beat this? via",b="uptimey,devops",window.open("http://twitter.com/share?url="+p+"&text="+e+"&hashtags="+b+"&","twitterwindow","height=450, width=550, top="+($(window).height()/2-225)+", left="+$(window).width()/2+", toolbar=0, location=0, menubar=0, directories=0, scrollbars=0");break;case"google-plus":f(".google-plus-button"),n("Feature still in development");break;case"facebook":f(".facebook-button"),n("Feature still in development");break;case"screenshot":c=$(".screenshot-button"),f(c),c.hasClass("fa-camera")?(c.removeClass("fa-camera").addClass("fa-download"),html2canvas(document.body,{onrendered:function(a){var b,d;b=a.toDataURL("image/png").replace("image/png","image/octet-stream"),c.attr("href",b),d=m().format("DDMMYYYYHHmmss"),c.attr("download","Screenshot_"+d+".png")}})):setTimeout(function(){return c.removeClass("fa-download").addClass("fa-camera"),c.removeAttr("href").removeAttr("download")},3e3);break;case"clear":$.ajax(h,{method:"GET",data:{action:"clear"}})}},r=function(){var a;return a=document.createElement("style"),a.appendChild(document.createTextNode("")),document.head.appendChild(a),a.sheet}(),e=function(a,b,c){"insertRule"in a?a.insertRule(b+"{"+c+"}",a.cssRules.length):"addRule"in a&&a.addRule(b,c,a.cssRules.length)},g=function(){$.ajax(h,{method:"GET",data:{action:"override",flag:"override"},error:function(a){return console.log(a)},success:function(a){var b,c,f;g=$.parseJSON(a),i(g.background_color)||(b="background-color: "+g.background_color+";"),i(g.font_family)||(b+="font-family: "+g.font_family+";"),i(g.font_color)||(b+="color: "+g.font_color+";"),e(r,"body",b),$.each(g.buttons[0],function(a,b){var c;b===!1&&(c="display: none",e(r,"."+a+"-button",c))}),"advanced"===g.default_view&&d("advanced"),"top"!==g.menu_placement&&$(".button-container").removeClass("top-menu").addClass(g.menu_placement+"-menu"),g.remove_menu===!0&&(f="display: none",e(r,".button-container",f)),g.show_location===!1&&(c="display: none",e(r,".location-inner",c)),g.show_menu_always===!0&&d("toggle")}})},o=function(d,e){var f;switch(d){case"image":$.ajax(h,{method:"GET",data:{action:d},success:function(a){a=a.split(";"),$("body").css("backgroundImage","url("+a[0]+")")}}),f="Made with Uptimey. ",f+="Image from Unsplash.",$("#copy").html(f);break;case"location":$.ajax(h,{method:"GET",data:{action:d},success:function(d){var e;e="http://ipinfo.io/"+d,$.getJSON(e,function(d){var e;$("#location").text(d.city+", "+d.region+", "+d.country).addClass("fadeIn"),e=d.loc.split(","),$("#location").attr("data-latlong",e[0]+"+"+e[1]),a=d.city+", "+d.region+", "+d.country,$.simpleWeather({location:a,success:function(a){b=a.sunrise,c=a.sunset}})}),$(".location-inner").addClass("fadeIn")}});break;case"uptime":$.ajax(h,{method:"GET",data:{action:d,flag:e},success:function(a){a=a.split(";"),$("#days").text(a[0]).addClass("fadeIn"),$("#days").attr("data-value",a[0]),$("#hours").text(a[1]).addClass("fadeIn"),$("#hours").attr("data-value",a[1]),$("#minutes").text(a[2]).addClass("fadeIn"),$("#minutes").attr("data-value",a[2]),$(".bottom-container").addClass("fadeIn")}});break;case"time":$.ajax(h,{method:"GET",data:{action:d,flag:e},success:function(a){var d;a=a.split(";"),$("#current").text(a[0]).addClass("fadeIn"),d=a[1].split(":"),$("#time").html(d[0]+":"+d[1]).addClass("fadeIn"),$("#since").text(a[2]).addClass("fadeIn"),setTimeout(function(){var d,e,f;d=m(b,"h:m a").format("X"),e=m(c,"h:m a").format("X"),f=m(a[1],"h:m a").format("X"),f>=d&&e>=f?($(".time .fa").removeClass("fa-moon-o fa-circle-o"),$(".time .fa").addClass("fa-sun-o")):($(".time .fa").removeClass("fa-sun-o fa-circle-o"),$(".time .fa").addClass("fa-moon-o"))},3e3),$(".top-container").addClass("fadeIn")}});break;case"ping":$.ajax(h,{method:"GET",data:{action:d},error:function(a,b){return n(b)},success:function(a){return n(a)}})}$(".val").each(function(){$(this).on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",function(){$(this).removeClass("fadeIn")})})},k=function(){return g(),$(".top-container").addClass("animated"),$(".bottom-container").addClass("animated"),$(".val").addClass("animated"),$(".button").addClass("animated"),o("image"),o("location"),o("uptime"),o("time")},$(function(){k(),setInterval(function(){o("uptime"),o("time")},6e4),setInterval(function(){o("ping")},3e5),$(".button").each(function(){$(this).on("click",function(){var a;a=$(this).attr("data-action"),d(a)})}),$("#location").on("click",function(){var a;a=$(this).attr("data-latlong"),window.location.href="https://www.google.com/maps/place/"+a})})}).call(this);
\ No newline at end of file
+(function(){var a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s;q="https://github.com/stefanbc/uptimey",i="./client/lib/models/data.php",h="./client/bin/config.js",r="./client/bin/settings.json",n=require("moment"),k=require("humane"),a="",b="",c="",o=function(a){return k.log(a,{timeout:5e3,baseCls:"humane-libnotify"})},f=function(a){return $(a).addClass("pulse"),$(a).on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",function(){$(this).removeClass("pulse")})},g=function(a,b,c){return $(a).removeClass(b).addClass(c)},m=function(a){return!isNaN(parseFloat(a))},j=function(a){var b,c;if("number"==typeof a||"boolean"==typeof a)return!1;if("undefined"==typeof a||null===a)return!0;if("undefined"!=typeof a.length)return 0===a.length;b=0;for(c in a)a.hasOwnProperty(c)&&b++;return 0===b},d=function(a){var b,c,d,e,h,j,k,l;switch(j="",a){case"toggle":if(j=$(".toggle-button").attr("data-status"),b=$(".toggle-button").parent().attr("data-position"),"closed"===j)switch($(".button-container").animate((d={},d[""+b]=0,d)),$(".toggle-button").attr("data-status","open"),b){case"top":g(".toggle-button","fa-angle-double-down","fa-angle-double-up");break;case"bottom":g(".toggle-button","fa-angle-double-up","fa-angle-double-down")}else if("open"===j)switch($(".button-container").animate((e={},e[""+b]="-80px",e)),$(".toggle-button").attr("data-status","closed"),b){case"top":g(".toggle-button","fa-angle-double-up","fa-angle-double-down");break;case"bottom":g(".toggle-button","fa-angle-double-down","fa-angle-double-up")}break;case"advanced":f(".advanced-button"),j=$(".advanced-button").attr("data-status"),"default"===j?($(".advanced-button").attr("data-status","advanced"),$(".advanced-button").addClass("active"),$(".default-panel").fadeOut(500),$(".advanced-panel").fadeIn(500),$.ajax(i,{method:"GET",data:{action:"advanced",flag:"advanced"},success:function(a){$(".advanced-panel .top-container").html(a)}})):"advanced"===j&&($(".advanced-button").attr("data-status","default"),$(".advanced-button").removeClass("active"),$(".advanced-panel").fadeOut(500),$(".default-panel").fadeIn(500));break;case"refresh":$(".refresh-button").addClass("fa-spin"),p("uptime","refresh"),p("time","refresh"),p("ping"),setTimeout(function(){$(".refresh-button").removeClass("fa-spin")},1e3);break;case"twitter":f(".twitter-button"),l="",0!==$("#days").attr("data-value")&&(l+=$("#days").attr("data-value")+" days "),0!==$("#hours").attr("data-value")&&(l+=$("#hours").attr("data-value")+" hours "),0!==$("#minutes").attr("data-value")&&(l+=$("#minutes").attr("data-value")+" minutes"),k=l+" server uptime. Can you beat this? via",c="uptimey,devops",window.open("http://twitter.com/share?url="+q+"&text="+k+"&hashtags="+c+"&","twitterwindow","height=450, width=550, top="+($(window).height()/2-225)+", left="+$(window).width()/2+", toolbar=0, location=0, menubar=0, directories=0, scrollbars=0");break;case"google-plus":f(".google-plus-button"),o("Feature still in development");break;case"facebook":f(".facebook-button"),o("Feature still in development");break;case"screenshot":h=$(".screenshot-button"),f(h),h.hasClass("fa-camera")?(h.removeClass("fa-camera").addClass("fa-download"),html2canvas(document.body,{onrendered:function(a){var b,c;b=a.toDataURL("image/png").replace("image/png","image/octet-stream"),h.attr("href",b),c=n().format("DDMMYYYYHHmmss"),h.attr("download","Screenshot_"+c+".png")}})):setTimeout(function(){return h.removeClass("fa-download").addClass("fa-camera"),h.removeAttr("href").removeAttr("download")},3e3);break;case"clear":$.ajax(i,{method:"GET",data:{action:"clear"}})}},s=function(){var a;return a=document.createElement("style"),a.appendChild(document.createTextNode("")),document.head.appendChild(a),a.sheet}(),e=function(a,b,c){"insertRule"in a?a.insertRule(b+"{"+c+"}",a.cssRules.length):"addRule"in a&&a.addRule(b,c,a.cssRules.length)},h=function(){$.ajax(i,{method:"GET",data:{action:"override",flag:"override"},error:function(a){return console.log(a)},success:function(a){var b,c,f,i;if(h=$.parseJSON(a),j(h.background_color)||(b="background-color: "+h.background_color+";"),j(h.font_family)||(b+="font-family: "+h.font_family+";"),j(h.font_color)||(b+="color: "+h.font_color+";"),e(s,"body",b),$.each(h.buttons[0],function(a,b){var c;b===!1&&(c="display: none",e(s,"."+a+"-button",c))}),"advanced"===h.default_view&&d("advanced"),"top"!==h.menu_placement)switch(c="overflow: hidden",e(s,".container",c),$(".button-container").removeClass("top-menu").addClass(h.menu_placement+"-menu"),$(".button-container").attr("data-position",""+h.menu_placement),h.menu_placement){case"bottom":g(".toggle-button","fa-angle-double-down","fa-angle-double-up"),$(".button-container .toggle-button").insertBefore(".button-container .button-block")}h.remove_menu===!0&&(i="display: none",e(s,".button-container",i)),h.show_location===!1&&(f="display: none",e(s,".location-inner",f)),h.show_menu_always===!0&&d("toggle")}})},p=function(d,e){var f;switch(d){case"image":$.ajax(i,{method:"GET",data:{action:d},success:function(a){a=a.split(";"),$("body").css("backgroundImage","url("+a[0]+")")}}),f="Made with Uptimey. ",f+="Image from Unsplash.",$("#copy").html(f);break;case"location":$.ajax(i,{method:"GET",data:{action:d},success:function(d){var e;e="http://ipinfo.io/"+d,$.getJSON(e,function(d){var e;$("#location").text(d.city+", "+d.region+", "+d.country).addClass("fadeIn"),e=d.loc.split(","),$("#location").attr("data-latlong",e[0]+"+"+e[1]),a=d.city+", "+d.region+", "+d.country,$.simpleWeather({location:a,success:function(a){b=a.sunrise,c=a.sunset}})}),$(".location-inner").addClass("fadeIn")}});break;case"uptime":$.ajax(i,{method:"GET",data:{action:d,flag:e},success:function(a){a=a.split(";"),$("#days").text(a[0]).addClass("fadeIn"),$("#days").attr("data-value",a[0]),$("#hours").text(a[1]).addClass("fadeIn"),$("#hours").attr("data-value",a[1]),$("#minutes").text(a[2]).addClass("fadeIn"),$("#minutes").attr("data-value",a[2]),$(".bottom-container").addClass("fadeIn")}});break;case"time":$.ajax(i,{method:"GET",data:{action:d,flag:e},success:function(a){var d;a=a.split(";"),$("#current").text(a[0]).addClass("fadeIn"),d=a[1].split(":"),$("#time").html(d[0]+":"+d[1]).addClass("fadeIn"),$("#since").text(a[2]).addClass("fadeIn"),setTimeout(function(){var d,e,f;d=n(b,"h:m a").format("X"),e=n(c,"h:m a").format("X"),f=n(a[1],"h:m a").format("X"),f>=d&&e>=f?($(".time .fa").removeClass("fa-moon-o fa-circle-o"),$(".time .fa").addClass("fa-sun-o")):($(".time .fa").removeClass("fa-sun-o fa-circle-o"),$(".time .fa").addClass("fa-moon-o"))},3e3),$(".top-container").addClass("fadeIn")}});break;case"ping":$.ajax(i,{method:"GET",data:{action:d},error:function(a,b){return o(b)},success:function(a){return o(a)}})}$(".val").each(function(){$(this).on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",function(){$(this).removeClass("fadeIn")})})},l=function(){return h(),$(".top-container").addClass("animated"),$(".bottom-container").addClass("animated"),$(".val").addClass("animated"),$(".button").addClass("animated"),p("image"),p("location"),p("uptime"),p("time")},$(function(){l(),setInterval(function(){p("uptime"),p("time")},6e4),setInterval(function(){p("ping")},3e5),$(".button").each(function(){$(this).on("click",function(){var a;a=$(this).attr("data-action"),d(a)})}),$("#location").on("click",function(){var a;a=$(this).attr("data-latlong"),window.location.href="https://www.google.com/maps/place/"+a})})}).call(this);
\ No newline at end of file
diff --git a/client/bin/css/global.min.css b/client/bin/css/global.min.css
index aea440a..706d337 100644
--- a/client/bin/css/global.min.css
+++ b/client/bin/css/global.min.css
@@ -1 +1 @@
-.button-container .button-block:after,.bottom-container section .col:first-child:before,.bottom-container section .col:nth-child(3):before{content:"";height:1px;background:-moz-linear-gradient(left, transparent 0%, #939393 50%, transparent 100%);background:-webkit-gradient(linear, left top, right top, color-stop(0%, transparent), color-stop(50%, #939393), color-stop(100%, transparent));background:-webkit-linear-gradient(left, transparent 0%, #939393 50%, transparent 100%);background:-o-linear-gradient(left, transparent 0%, #939393 50%, transparent 100%);background:-ms-linear-gradient(left, transparent 0%, #939393 50%, transparent 100%);background:linear-gradient(to right, transparent 0%, #939393 50%, transparent 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 );display:block}a,.button-container .button,.humane,.humane-libnotify{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;-ms-transition:all 0.5s ease;transition:all 0.5s ease}.notice,.button-container{left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-o-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}@-webkit-keyframes blink{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@-moz-keyframes blink{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@-ms-keyframes blink{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@-o-keyframes blink{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@keyframes blink{0%{opacity:0}50%{opacity:1}100%{opacity:0}}html{height:100%}body{height:100%;background-color:#222;background-repeat:no-repeat;background-position:center;background-size:cover;font-family:Raleway,sans-serif;font-weight:200;color:#fff}a{color:#fff;text-decoration:none}a:hover,a:focus{text-decoration:underline}.blink{-webkit-animation:blink 2s infinite;-moz-animation:blink 2s infinite;-ms-animation:blink 2s infinite;-o-animation:blink 2s infinite;animation:blink 2s infinite}.notice{position:absolute;bottom:0;background:rgba(0,0,0,0.7);padding:35px}.container{background:rgba(0,0,0,0.6);height:100%;width:100%;position:relative}.button-container{position:absolute;top:-80px;text-align:center;font-size:1.5em;z-index:10}.button-container .button-block{margin-top:25px}.button-container .button-block:after{margin-top:25px}.button-container .button{cursor:pointer;margin:0 30px;position:relative}.button-container .button:after{content:attr(data-action);position:absolute;visibility:hidden;color:#fff;font-family:Raleway,sans-serif;font-weight:200;font-size:0.5em;line-height:30px;text-align:center;background:rgba(0,0,0,0.6);width:100px;height:30px;border-radius:6px}.button-container .button:hover:after{visibility:visible;opacity:1;top:35px;left:50%;margin-left:-50px;z-index:999}.button-container .refresh-button:hover{color:#00ac8a}.button-container .advanced-button.active{color:#e74b3b}.button-container .twitter-button:hover{color:#55acee}.button-container .google-plus-button:hover{color:#dd4b39}.button-container .facebook-button:hover{color:#3B5998}.button-container .screenshot-button{text-decoration:none}.button-container .screenshot-button:hover{color:#f7d61c}.advanced-panel{display:none}.top-container{margin:0 auto;position:absolute;bottom:400px;left:0;width:100%}.top-container section{width:960px;margin:0 auto;position:relative}.top-container section .row{display:block;margin-bottom:20px}.top-container section .row .val{display:block;font-size:2.5em;padding-bottom:10px}.top-container section .block-right{position:absolute;top:0;right:30px}.top-container section .time{padding:20px 0}.top-container section .time .fa{font-size:3em;margin-right:15px}.top-container section .time .fa-sun-o{color:#ffd900}.top-container section .time .fa-moon-o{color:#3498db}.top-container section .time .val{font-size:4em}.top-container section .location{top:-80px;font-size:1.5em;cursor:pointer}.top-container section .location:hover{text-decoration:underline}.top-container section .location .fa{margin-right:15px}.top-container h2{margin:0;font-weight:lighter;font-size:1.1em}.top-container .notif{width:960px;margin:0 auto;position:relative;display:block;font-family:FontAwesome,Raleway,sans-serif;font-weight:200}.top-container .notif:before{padding-right:10px}.top-container .notif a{text-decoration:underline}.bottom-container{text-align:center;position:absolute;bottom:150px;left:0;width:100%}.bottom-container section{width:960px;margin:0 auto}.bottom-container section .col{width:33%;display:inline-block;padding-top:15px}.bottom-container section .col:first-child:before{margin-bottom:25px}.bottom-container section .col:nth-child(3):before{margin-bottom:25px}.bottom-container section .col .val{display:block;font-size:6em;padding-bottom:10px}.bottom-container section .col .label{text-transform:capitalize}.bottom-container h2{font-weight:lighter;font-size:1.1em;margin-bottom:-25px}footer{position:absolute;bottom:10px;right:20px;color:#ddd;font-size:0.7em;text-align:right}footer a{text-decoration:underline}.humane,.humane-libnotify{color:#fff;font-family:Raleway,sans-serif;font-weight:200;font-size:0.8em;text-align:center;background:rgba(0,0,0,0.6);position:fixed;top:10px;right:10px;z-index:100000;opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);width:165px;padding:10px;border-radius:6px;-moz-transform:translateY(-40px);-webkit-transform:translateY(-40px);-ms-transform:translateY(-40px);-o-transform:translateY(-40px);transform:translateY(-40px)}.humane.humane-animate,.humane-libnotify.humane-libnotify-animate{opacity:1;-moz-transform:translateY(0);-webkit-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}.humane.humane-animate,.humane-libnotify.humane-libnotify-js-animate{opacity:1;-moz-transform:translateY(0);-webkit-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}.humane.humane-libnotify-info{background:rgba(0,0,100,0.9)}.humane.humane-libnotify-success{background:rgba(0,100,0,0.9)}.humane.humane-libnotify-error{background:rgba(100,0,0,0.9)}.humane-libnotify.humane-libnotify-info{background:rgba(0,0,100,0.9)}.humane-libnotify.humane-libnotify-success{background:rgba(0,100,0,0.9)}.humane-libnotify.humane-libnotify-error{background:rgba(100,0,0,0.9)}
+.button-container.top-menu .button-block:after,.button-container.bottom-menu .button-block:before,.bottom-container section .col:first-child:before,.bottom-container section .col:nth-child(3):before{content:"";height:1px;background:-moz-linear-gradient(left, transparent 0%, #939393 50%, transparent 100%);background:-webkit-gradient(linear, left top, right top, color-stop(0%, transparent), color-stop(50%, #939393), color-stop(100%, transparent));background:-webkit-linear-gradient(left, transparent 0%, #939393 50%, transparent 100%);background:-o-linear-gradient(left, transparent 0%, #939393 50%, transparent 100%);background:-ms-linear-gradient(left, transparent 0%, #939393 50%, transparent 100%);background:linear-gradient(to right, transparent 0%, #939393 50%, transparent 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 );display:block}a,.button-container .button,.humane,.humane-libnotify{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;-ms-transition:all 0.5s ease;transition:all 0.5s ease}.button-container.top-menu,.button-container.bottom-menu{left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-o-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}@-webkit-keyframes blink{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@-moz-keyframes blink{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@-ms-keyframes blink{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@-o-keyframes blink{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@keyframes blink{0%{opacity:0}50%{opacity:1}100%{opacity:0}}html{height:100%}body{height:100%;background-color:#222;background-repeat:no-repeat;background-position:center;background-size:cover;font-family:Raleway,sans-serif;font-weight:200;color:#fff}a{color:#fff;text-decoration:none}a:hover,a:focus{text-decoration:underline}.blink{-webkit-animation:blink 2s infinite;-moz-animation:blink 2s infinite;-ms-animation:blink 2s infinite;-o-animation:blink 2s infinite;animation:blink 2s infinite}.container{background:rgba(0,0,0,0.6);height:100%;width:100%;position:relative}.button-container{position:absolute;text-align:center;font-size:1.5em;z-index:10}.button-container.top-menu{top:-80px}.button-container.top-menu .button-block{margin-top:25px}.button-container.top-menu .button-block:after{margin-top:25px}.button-container.bottom-menu{bottom:-80px}.button-container.bottom-menu .button-block{margin-bottom:25px}.button-container.bottom-menu .button-block:before{margin-bottom:25px}.button-container .button{cursor:pointer;margin:0 30px;position:relative}.button-container .button:after{content:attr(data-action);position:absolute;visibility:hidden;color:#fff;font-family:Raleway,sans-serif;font-weight:200;font-size:0.5em;line-height:30px;text-align:center;background:rgba(0,0,0,0.6);width:100px;height:30px;border-radius:6px}.button-container .button:hover:after{visibility:visible;opacity:1;top:35px;left:50%;margin-left:-50px;z-index:999}.button-container .refresh-button:hover{color:#00ac8a}.button-container .advanced-button.active{color:#e74b3b}.button-container .twitter-button:hover{color:#55acee}.button-container .google-plus-button:hover{color:#dd4b39}.button-container .facebook-button:hover{color:#3B5998}.button-container .screenshot-button{text-decoration:none}.button-container .screenshot-button:hover{color:#f7d61c}.advanced-panel{display:none}.top-container{margin:0 auto;position:absolute;bottom:400px;left:0;width:100%}.top-container section{width:960px;margin:0 auto;position:relative}.top-container section .row{display:block;margin-bottom:20px}.top-container section .row .val{display:block;font-size:2.5em;padding-bottom:10px}.top-container section .block-right{position:absolute;top:0;right:30px}.top-container section .time{padding:20px 0}.top-container section .time .fa{font-size:3em;margin-right:15px}.top-container section .time .fa-sun-o{color:#ffd900}.top-container section .time .fa-moon-o{color:#3498db}.top-container section .time .val{font-size:4em}.top-container section .location{top:-80px;font-size:1.5em;cursor:pointer}.top-container section .location:hover{text-decoration:underline}.top-container section .location .fa{margin-right:15px}.top-container h2{margin:0;font-weight:lighter;font-size:1.1em}.top-container .notif{width:960px;margin:0 auto;position:relative;display:block;font-family:FontAwesome,Raleway,sans-serif;font-weight:200}.top-container .notif:before{padding-right:10px}.top-container .notif a{text-decoration:underline}.bottom-container{text-align:center;position:absolute;bottom:150px;left:0;width:100%}.bottom-container section{width:960px;margin:0 auto}.bottom-container section .col{width:33%;display:inline-block;padding-top:15px}.bottom-container section .col:first-child:before{margin-bottom:25px}.bottom-container section .col:nth-child(3):before{margin-bottom:25px}.bottom-container section .col .val{display:block;font-size:6em;padding-bottom:10px}.bottom-container section .col .label{text-transform:capitalize}.bottom-container h2{font-weight:lighter;font-size:1.1em;margin-bottom:-25px}footer{position:absolute;bottom:10px;right:20px;color:#ddd;font-size:0.7em;text-align:right}footer a{text-decoration:underline}.humane,.humane-libnotify{color:#fff;font-family:Raleway,sans-serif;font-weight:200;font-size:0.8em;text-align:center;background:rgba(0,0,0,0.6);position:fixed;top:10px;right:10px;z-index:100000;opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);width:165px;padding:10px;border-radius:6px;-moz-transform:translateY(-40px);-webkit-transform:translateY(-40px);-ms-transform:translateY(-40px);-o-transform:translateY(-40px);transform:translateY(-40px)}.humane.humane-animate,.humane-libnotify.humane-libnotify-animate{opacity:1;-moz-transform:translateY(0);-webkit-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}.humane.humane-animate,.humane-libnotify.humane-libnotify-js-animate{opacity:1;-moz-transform:translateY(0);-webkit-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}.humane.humane-libnotify-info{background:rgba(0,0,100,0.9)}.humane.humane-libnotify-success{background:rgba(0,100,0,0.9)}.humane.humane-libnotify-error{background:rgba(100,0,0,0.9)}.humane-libnotify.humane-libnotify-info{background:rgba(0,0,100,0.9)}.humane-libnotify.humane-libnotify-success{background:rgba(0,100,0,0.9)}.humane-libnotify.humane-libnotify-error{background:rgba(100,0,0,0.9)}
diff --git a/client/bin/settings.json b/client/bin/settings.json
index a358cdb..35db713 100644
--- a/client/bin/settings.json
+++ b/client/bin/settings.json
@@ -14,7 +14,7 @@
"display_timezone" : "Europe/Bucharest",
"font_color" : "",
"font_family" : "",
- "menu_placement" : "top",
+ "menu_placement" : "bottom",
"remove_menu" : false,
"show_am_pm" : true,
"show_location" : true,
diff --git a/client/lib/controllers/actions.coffee b/client/lib/controllers/actions.coffee
index aaa98e3..a1dbb4b 100644
--- a/client/lib/controllers/actions.coffee
+++ b/client/lib/controllers/actions.coffee
@@ -5,23 +5,30 @@ action = (type) ->
when 'toggle'
# Get the status of the button
status = $('.toggle-button').attr('data-status')
+ buttonPlacement = $('.toggle-button').parent().attr("data-position")
# Check the status
if status is 'closed'
# Animate the container (bring it down)
- $('.button-container').animate top: 0
+ $('.button-container').animate "#{buttonPlacement}": 0
# Change the button status
$('.toggle-button').attr 'data-status', 'open'
# Change the icon
- $('.toggle-button').removeClass 'fa-angle-double-down'
- $('.toggle-button').addClass 'fa-angle-double-up'
+ switch buttonPlacement
+ when 'top'
+ changeIcon '.toggle-button', 'fa-angle-double-down', 'fa-angle-double-up'
+ when 'bottom'
+ changeIcon '.toggle-button', 'fa-angle-double-up', 'fa-angle-double-down'
else if status is 'open'
# Animate the container (bring it up)
- $('.button-container').animate top: '-80px'
+ $('.button-container').animate "#{buttonPlacement}": '-80px'
# Change the button status
$('.toggle-button').attr 'data-status', 'closed'
# Change the icon
- $('.toggle-button').removeClass 'fa-angle-double-up'
- $('.toggle-button').addClass 'fa-angle-double-down'
+ switch buttonPlacement
+ when 'top'
+ changeIcon '.toggle-button', 'fa-angle-double-up', 'fa-angle-double-down'
+ when 'bottom'
+ changeIcon '.toggle-button', 'fa-angle-double-down', 'fa-angle-double-up'
return
when 'advanced'
# Animated it
diff --git a/client/lib/controllers/config.coffee b/client/lib/controllers/config.coffee
index 49973c4..90f9b49 100644
--- a/client/lib/controllers/config.coffee
+++ b/client/lib/controllers/config.coffee
@@ -45,7 +45,14 @@ config = ->
action 'advanced'
if config.menu_placement isnt 'top'
+ containerRules = "overflow: hidden";
+ addCSSRule sheet, '.container', containerRules
$('.button-container').removeClass('top-menu').addClass("#{config.menu_placement}-menu")
+ $('.button-container').attr 'data-position', "#{config.menu_placement}"
+ switch config.menu_placement
+ when 'bottom'
+ changeIcon '.toggle-button', 'fa-angle-double-down', 'fa-angle-double-up'
+ $('.button-container .toggle-button').insertBefore('.button-container .button-block')
if config.remove_menu is true
menuRules = "display: none"
diff --git a/client/lib/helpers/utils.coffee b/client/lib/helpers/utils.coffee
index 08770ad..8bdb1e0 100644
--- a/client/lib/helpers/utils.coffee
+++ b/client/lib/helpers/utils.coffee
@@ -11,6 +11,10 @@ animateElement = (element) ->
$(this).removeClass 'pulse'
return
+### Change button icon ###
+changeIcon = (element, removedClass, addedClass) ->
+ $(element).removeClass(removedClass).addClass(addedClass)
+
### Check if variable is number ###
isNumber = (obj) ->
!isNaN(parseFloat(obj))
diff --git a/client/lib/style/global.scss b/client/lib/style/global.scss
index 48c092d..b0e754d 100644
--- a/client/lib/style/global.scss
+++ b/client/lib/style/global.scss
@@ -23,7 +23,7 @@
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
-%align-center {
+%horizontal-align-center {
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
@@ -31,6 +31,14 @@
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
+%vertical-align-center {
+ top: 50%;
+ -webkit-transform: translateY(-50%);
+ -moz-transform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+}
@mixin keyframes($animation-name) {
@-webkit-keyframes #{$animation-name} {
@content;
@@ -89,13 +97,6 @@ a {
.blink {
@include animation('blink 2s infinite');
}
-.notice {
- position: absolute;
- bottom: 0;
- @extend %align-center;
- background: rgba(0,0,0,.7);
- padding: 35px;
-}
//
// Layout and UI
@@ -108,16 +109,29 @@ a {
}
.button-container {
position: absolute;
- top: -80px;
- @extend %align-center;
text-align: center;
font-size: 1.5em;
z-index: 10;
- .button-block {
- margin-top: 25px;
- &:after {
- @extend %border;
+ &.top-menu {
+ @extend %horizontal-align-center;
+ top: -80px;
+ .button-block {
margin-top: 25px;
+ &:after {
+ @extend %border;
+ margin-top: 25px;
+ }
+ }
+ }
+ &.bottom-menu {
+ @extend %horizontal-align-center;
+ bottom: -80px;
+ .button-block {
+ margin-bottom: 25px;
+ &:before {
+ @extend %border;
+ margin-bottom: 25px;
+ }
}
}
.button {
diff --git a/client/lib/views/index.jade b/client/lib/views/index.jade
index 5788c07..43fd966 100644
--- a/client/lib/views/index.jade
+++ b/client/lib/views/index.jade
@@ -13,7 +13,7 @@ html(lang='en')
link(href='client/bin/css/global.min.css', rel='stylesheet', type='text/css')
body
.container
- .button-container.top-menu
+ .button-container.top-menu(data-position='top')
.button-block
span.button.refresh-button.fa.fa-refresh(data-action='refresh')
span.button.advanced-button.fa.fa-dashboard(data-status='default', data-action='advanced')
diff --git a/index.html b/index.html
index 4a2f53d..a86c6df 100644
--- a/index.html
+++ b/index.html
@@ -1,3 +1,3 @@
-Uptimey | Beautiful Server Uptime MonitorCurrent date on server
Server is active since
Your server's uptime until now...