Created
August 10, 2013 02:35
-
-
Save CharlesAMoss/6198787 to your computer and use it in GitHub Desktop.
A CodePen by charlie. clock widget - Clock Widget ------------
HTML CSS SASS(SCSS) JavaScript SVG *inspiration* dribbble rebound of MVben's design http://dribbble.com/shots/1145537-Plug-In1 *nuts and bolts* http://blog.stevenlevithan.com/archives/date-time-format http://stackoverflow.com/questions/1531093/how-to-get-current-date-in-javascript ht…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
dribbble rebound of MVben's design http://dribbble.com/shots/1145537-Plug-In1 | |
--> | |
<div class="main"> | |
<div class="nav"> | |
<ul> | |
<li class="al">Alarms</li> | |
<li class="sw">Stopwatch</li> | |
<li class="tm">Timer</li> | |
<li class="st">Site</li> | |
</ul> | |
</div> | |
<ul id="clock"> | |
<li id="hour"></li> | |
<li id="min"></li> | |
<li id="sec"></li> | |
</ul> | |
<div id="date"> | |
<span id="monthDay"></span> | |
<span id="year"></span> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Date Format 1.2.3 | |
* (c) 2007-2009 Steven Levithan <stevenlevithan.com> | |
* MIT license | |
* | |
* Includes enhancements by Scott Trenda <scott.trenda.net> | |
* and Kris Kowal <cixar.com/~kris.kowal/> | |
* | |
* Accepts a date, a mask, or a date and a mask. | |
* Returns a formatted version of the given date. | |
* The date defaults to the current date/time. | |
* The mask defaults to dateFormat.masks.default. | |
*/ | |
var dateFormat = function () { | |
var token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|"[^"]*"|'[^']*'/g, | |
timezone = /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g, | |
timezoneClip = /[^-+\dA-Z]/g, | |
pad = function (val, len) { | |
val = String(val); | |
len = len || 2; | |
while (val.length < len) val = "0" + val; | |
return val; | |
}; | |
// Regexes and supporting functions are cached through closure | |
return function (date, mask, utc) { | |
var dF = dateFormat; | |
// You can't provide utc if you skip other args (use the "UTC:" mask prefix) | |
if (arguments.length == 1 && Object.prototype.toString.call(date) == "[object String]" && !/\d/.test(date)) { | |
mask = date; | |
date = undefined; | |
} | |
// Passing date through Date applies Date.parse, if necessary | |
date = date ? new Date(date) : new Date; | |
if (isNaN(date)) throw SyntaxError("invalid date"); | |
mask = String(dF.masks[mask] || mask || dF.masks["default"]); | |
// Allow setting the utc argument via the mask | |
if (mask.slice(0, 4) == "UTC:") { | |
mask = mask.slice(4); | |
utc = true; | |
} | |
var _ = utc ? "getUTC" : "get", | |
d = date[_ + "Date"](), | |
D = date[_ + "Day"](), | |
m = date[_ + "Month"](), | |
y = date[_ + "FullYear"](), | |
H = date[_ + "Hours"](), | |
M = date[_ + "Minutes"](), | |
s = date[_ + "Seconds"](), | |
L = date[_ + "Milliseconds"](), | |
o = utc ? 0 : date.getTimezoneOffset(), | |
flags = { | |
d: d, | |
dd: pad(d), | |
ddd: dF.i18n.dayNames[D], | |
dddd: dF.i18n.dayNames[D + 7], | |
m: m + 1, | |
mm: pad(m + 1), | |
mmm: dF.i18n.monthNames[m], | |
mmmm: dF.i18n.monthNames[m + 12], | |
yy: String(y).slice(2), | |
yyyy: y, | |
h: H % 12 || 12, | |
hh: pad(H % 12 || 12), | |
H: H, | |
HH: pad(H), | |
M: M, | |
MM: pad(M), | |
s: s, | |
ss: pad(s), | |
l: pad(L, 3), | |
L: pad(L > 99 ? Math.round(L / 10) : L), | |
t: H < 12 ? "a" : "p", | |
tt: H < 12 ? "am" : "pm", | |
T: H < 12 ? "A" : "P", | |
TT: H < 12 ? "AM" : "PM", | |
Z: utc ? "UTC" : (String(date).match(timezone) || [""]).pop().replace(timezoneClip, ""), | |
o: (o > 0 ? "-" : "+") + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4), | |
S: ["th", "st", "nd", "rd"][d % 10 > 3 ? 0 : (d % 100 - d % 10 != 10) * d % 10] | |
}; | |
return mask.replace(token, function ($0) { | |
return $0 in flags ? flags[$0] : $0.slice(1, $0.length - 1); | |
}); | |
}; | |
}(); | |
// Some common format strings | |
dateFormat.masks = { | |
"default": "ddd mmm dd yyyy HH:MM:ss", | |
shortDate: "m/d/yy", | |
mediumDate: "mmm d, yyyy", | |
longDate: "mmmm d, yyyy", | |
fullDate: "dddd, mmmm d, yyyy", | |
shortTime: "h:MM TT", | |
mediumTime: "h:MM:ss TT", | |
longTime: "h:MM:ss TT Z", | |
isoDate: "yyyy-mm-dd", | |
isoTime: "HH:MM:ss", | |
isoDateTime: "yyyy-mm-dd'T'HH:MM:ss", | |
isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'" | |
}; | |
// Internationalization strings | |
dateFormat.i18n = { | |
dayNames: [ | |
"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", | |
"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" | |
], | |
monthNames: [ | |
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", | |
"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" | |
] | |
}; | |
// For convenience... | |
Date.prototype.format = function (mask, utc) { | |
return dateFormat(this, mask, utc); | |
}; | |
// Clock Widget's date and time... | |
var monthDay = dateFormat('mmm dd'); | |
$('#monthDay').append(monthDay); | |
var year = dateFormat('yyyy'); | |
$('#year').append(year); | |
// Clock Widget's Rotation | |
$(function() { | |
setInterval( function() { | |
var seconds = new Date().getSeconds(); | |
var sdegree = seconds * 6; | |
var srotate = "rotate(" + sdegree + "deg)"; | |
$("#sec").css({ "transform": srotate }); | |
}, 1000 ); | |
setInterval( function() { | |
var hours = new Date().getHours(); | |
var mins = new Date().getMinutes(); | |
var hdegree = hours * 30 + (mins / 2); | |
var hrotate = "rotate(" + hdegree + "deg)"; | |
$("#hour").css({ "transform": hrotate}); | |
}, 1000 ); | |
setInterval( function() { | |
var mins = new Date().getMinutes(); | |
var mdegree = mins * 6; | |
var mrotate = "rotate(" + mdegree + "deg)"; | |
$("#min").css({ "transform" : mrotate }); | |
}, 1000 ); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "compass"; | |
@mixin boxsizing-borderbox { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
html { | |
background-color: #594c4a; | |
} | |
* { | |
@include boxsizing-borderbox; | |
} | |
body { | |
font-family:"Chivo Regular", "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; | |
-webkit-font-smoothing: antialiased; | |
width: 95.5078125%; | |
margin: 0 auto; | |
width: 90%; | |
} | |
.main { | |
padding: 4px 0; | |
width: 508px; | |
height: 348px; | |
background-color: #f5f5f5; | |
margin: 100px auto; | |
@include border-radius(4px); | |
-webkit-box-shadow: 0px 10px 10px rgba(47, 40, 39, 0.9), | |
0px 35px 20px rgba(47, 40, 39, 0.4), | |
0px 50px 15px rgba(69, 57, 62, 0.6); // + clean up with a mixin | |
} | |
.nav { | |
float: left; | |
width: 215px; | |
ul { | |
padding: 0; | |
margin: 0; | |
list-style: none; | |
} | |
li { | |
padding: 30px 0 0 95px; | |
height: 84px; | |
border-bottom: 1px solid rgba(193,193,193, 0.5); | |
font-size: 25px; | |
color: rgba(188,185,184, 0.7); | |
&:hover { | |
color: #E0744D; | |
} | |
} | |
.al { | |
background: url('https://dl.dropboxusercontent.com/u/13526976/clock_wid/alams.svg') 15% center no-repeat; | |
} | |
.sw { | |
background: url('https://dl.dropboxusercontent.com/u/13526976/clock_wid/stopwatch.svg') 15% center no-repeat; | |
} | |
.tm { | |
background: url('https://dl.dropboxusercontent.com/u/13526976/clock_wid/timer.svg') 15% center no-repeat; | |
} | |
.st { | |
background: url('https://dl.dropboxusercontent.com/u/13526976/clock_wid/site.svg') 15% center no-repeat; | |
border-bottom: 0px; | |
} | |
} | |
#clock { | |
padding:0; | |
position: relative; | |
list-style: none; | |
margin: -50px 10px 0 0; | |
height: 234px; | |
width: 234px; | |
display: block; | |
float: right; | |
background: url('https://dl.dropboxusercontent.com/u/13526976/clock_wid/clockFace.svg') 5% center no-repeat; | |
/* -webkit-box-shadow: 0px 0px 20px rgba(47, 40, 39, 0.4); */ | |
} | |
#sec, #min, #hour { | |
position: absolute; | |
width: 24px; | |
height: 234px; | |
top: 0px; | |
left: 102px; | |
} | |
#sec { | |
background: url('https://dl.dropboxusercontent.com/u/13526976/clock_wid/sec.svg'); | |
z-index: 3; | |
} | |
#min { | |
background: url('https://dl.dropboxusercontent.com/u/13526976/clock_wid/min.svg'); | |
z-index: 2; | |
} | |
#hour { | |
background: url('https://dl.dropboxusercontent.com/u/13526976/clock_wid/hour.svg'); | |
z-index: 1; | |
} | |
#date { | |
float: right; | |
padding: 0 40px 40px 0; | |
#monthDay{ | |
display: block; | |
font-size: 60px; | |
} | |
#year{ | |
margin: 8px 0 0 55px; | |
display: block; | |
text-height: 50%; | |
font-size: 36px; | |
color: rgba(188,185,184, 0.7); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
See a demo here:
http://cdpn.io/atxyA
Thanks!