diff --git a/index.css b/index.css index ec4a909..6dbc228 100644 --- a/index.css +++ b/index.css @@ -1,16 +1,154 @@ -body { - background-color: #80d4ea; +html, body, div, span, applet, object, iframe, +blockquote, pre, h1, p, a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + vertical-align: baseline; +} + +/*input, textarea { + -webkit-appearance: none; + -webkit-border-radius: 0; +}*/ + +html, body { + display: flex; + flex-flow: column nowrap; + + justify-content: flex-start; + min-height: 100%; + width: 100%; + + background-image: linear-gradient(to top right, #58105b, #105a5b); + color: #fff; + font-family: 'Source Sans', serif; + font-weight: 400; + + font-size: 1rem; + + +} + +#days { + display: flex; + flex-flow: row nowrap; + + align-content: center; + justify-content: center; + height: 5vh; +} + +#days p { + padding: 3rem 1rem; + + color: white; + font-size: 1rem; + font-family: 'Source Sans Pro', serif; + font-weight: 300; + letter-spacing: .06rem; + text-transform: uppercase; +} + +main { + display: flex; + flex-flow: column nowrap; + flex: 1 1 auto; + + align-items: center; + justify-content: center; + + min-height: 95vh; + justify-content: center; +} + +#date { + color: white; + font-size: 4rem; + font-family: 'Roboto Condensed', serif; + font-weight: bold; + letter-spacing: -.1rem; } #clock { - height: 100px; - width: 800px; - margin: auto; - position: absolute; - top: 0; left: 0; bottom: 0; right: 0; - padding-top: 70px; - font-family: courier, monospace; - text-align: center; - color: white; - font-size: 100px; + display: flex; + flex-flow: row nowrap; + + color: white; + font-size: 1rem; +} + +#time span { + color: white; + font-family: 'Roboto Condensed', serif; + font-weight: bold; + font-size: 13rem; + text-align: left; + +} + +form { + padding: 3rem 0 2rem; + + color: white; + font-family: 'Source Sans Pro', serif; + font-size: 1.4rem; + font-weight: 400; + letter-spacing: .04rem; + text-align: center; + text-decoration: none; + text-transform: uppercase; +} + +input.radio-button { + display: none; +} +input.radio-button + label { + margin: 0 1rem; + padding: 1rem 3rem; + + border: 1px solid white; + border-radius: 30px; + cursor: pointer; +} +input.radio-button:not(:checked) + label:hover { + box-shadow: 0px 1px 100px; +} +input.radio-button + label:active, +input.radio-button:checked + label { + background: rgba(255, 255, 255, 0.2); +} + + +@media screen and (min-width: 992px) { + html { + font-size: 1rem; + } +} + +@media screen and (max-width: 991px) { + html { + font-size: .8rem; + } +} + +@media screen and (max-width: 767px) { + html { + font-size: .6rem; + } +} + +@media screen and (max-width: 479px) { + html { + font-size: .4rem; + } } diff --git a/index.html b/index.html index 191d3cc..594f8ba 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,40 @@ - - Clock Tower - - - - - -
- - + + Time Travel + + + + + + + + +
+
+ +
- +
+
+
+
+
+ +
+ + + + + +
+
+ + + + + diff --git a/index.js b/index.js index 877a3aa..977ec25 100644 --- a/index.js +++ b/index.js @@ -1 +1,156 @@ -// Your code here +$(document).ready(function() { + var days = [ + ['Sunday', 'Sun'], + ['Monday', 'Mon'], + ['Tuesday', 'Tue'], + ['Wednesday', 'Wed'], + ['Thursday', 'Thu'], + ['Friday', 'Fri'], + ['Saturday', 'Sat'] + ]; + + var months = [ + ['January'], + ['February'], + ['March'], + ['April'], + ['May'], + ['June'], + ['July'] + ['August'], + ['September'], + ['October'], + ['November'], + ['December'] + ]; + + var radioButton = $("input[name=clock]:radio") + + var squatter = setInterval(function() { refreshSquatterTime () }, 1000); + var trotter = setInterval(function() { refreshTrotterTime () }, 1000); + + + function refreshColor() { + var today = new Date(), + hours = today.getHours(); + switch(true) { + case (hours > 18) : + $('body').css('background', 'linear-gradient(to top right, #58105b, #105a5b)'); + break; + case (hours > 16 && hours < 19) : + $('body').css('background', 'linear-gradient(to top right, #b04708, #105a5b)'); + break; + default: + $('body').css('background', 'linear-gradient(to top right, #e9d659, #105a5b)'); + } + } + + function refreshDay(){ + + var today = new Date(), + currentDay = today.getDate(), + currentWeekday = today.getDay(), + currentMonth = today.getMonth(), + currentYear = today.getFullYear(); + + if (matchMedia) { + var screenSize = window.matchMedia('(max-width: 767px)'); + screenSize.addListener(WidthChange); + WidthChange(screenSize); + } + + function WidthChange(screenSize) { + if (screenSize.matches) { + $('p').remove(); + for (i = 0; i < 7; i++) { + if (currentWeekday == [i]) { + $('p').css('background', 'rgba(255, 255, 255, 0.3)'); + var weekday = '

' + days[i][1] + '

'; + } else { + var weekday = '

' + days[i][1] + '

'; + } + $('#days').append(weekday); + } + } else { + $( 'p' ).remove(); + for (i = 0; i < 7; i++) { + if (currentWeekday == [i]) { + $( 'p' ).css( 'color', 'rgba(255, 255, 255, 0.3)'); + var weekday = '

' + days[i][0] + '

'; + } else { + var weekday = '

' + days[i][0] + '

'; + } + $('#days').append(weekday); + } + } + } + + var currentDate = currentDay + ' ' + months[currentMonth] + ' ' + currentYear; + $('#date').html(currentDate); + }; + + function refreshTrotterTime() { + + var today = new Date(), + hours = today.getHours(), + minutes = today.getMinutes(), + seconds = today.getSeconds(); + + if (hours.toString().length < 2) { + hours = '0' + hours; + } + + if (minutes.toString().length < 2) { + minutes = '0' + minutes; + } + + if (seconds.toString().length < 2) { + seconds = '0' + seconds; + } + var currentTime = '' + hours + ':' + minutes + ': ' + seconds + ''; + $('#time').html(currentTime); + }; + + function refreshSquatterTime() { + + var today = new Date(), + hours = today.getHours(), + minutes = today.getMinutes(), + seconds = today.getSeconds(); + + if (hours > 12) { + hours = hours - 12; + } + + if (minutes.toString().length < 2) { + minutes = '0' + minutes; + } + + if (seconds.toString().length < 2) { + seconds = '0' + seconds; + } + var currentTime = '' + hours + ':' + minutes + ': ' + seconds + ''; + $('#time').html(currentTime); + }; + + var refreshTime = radioButton.change(function () { + + if ($('input[name=clock]:checked').val() == "24-hour") { + clearInterval(squatter) + refreshTrotterTime(); + trotter = setInterval(function() { refreshTrotterTime () }, 1000); + + } else if ($('input[name=clock]:checked').val() == "12-hour") { + clearInterval(trotter) + refreshSquatterTime(); + squatter = setInterval(function() { refreshSquatterTime () }, 1000); + } + }); + + refreshColor(); + window.setInterval(refreshColor, 1000); + + refreshDay(); + window.setInterval(refreshDay, 60000); + +});