A Pen by Abhishek Kumar on CodePen.
Created
July 3, 2018 13:10
-
-
Save abhisheksliam/64cd8a4c56a462e87e5a28829d0b3509 to your computer and use it in GitHub Desktop.
Display Schedule
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
<main> | |
<section v-for="(day, index) in schedule"> | |
<header> | |
</header> | |
<ul> | |
<li v-for="slot in day.agenda" v-bind:class="{ current: checkTime(slot.range[0], slot.range[1]) }"> | |
<h3><b></b>{{slot.range[0]}} - {{slot.range[1]}}</h3> | |
<div v-html="slot.desc"></div> | |
<div><small v-html="slot.location"></small></div> | |
</li> | |
<li class="after-hours"> | |
<div> | |
<b>Nothing scheduled</b> | |
<br />at this time | |
<br /><small><small>Take a break</small></small> | |
</div> | |
</li> | |
</ul> | |
</section> | |
</main> | |
<aside> | |
<div class="clock"> | |
<h3>{{time}}</h3> | |
</div> | |
<h1>August 1, 2018</h1> | |
<div id="upNext"> | |
<h3></h3> | |
</div> | |
</aside> |
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
((window) => { | |
let now = moment() | |
// JSON DATA | |
let schedule = [ | |
{ | |
day: "", | |
date: now, | |
agenda: [ | |
{range: ['7:00', '07:10'], location: ' by the CEO of Times Internet, Gautam Sinha', desc: 'Welcome Address', bg:"url(http://telecoms.com/wp-content/blogs.dir/1/files/2012/05/London.jpg)"}, | |
{range: ['07:10', '07:30'], location: 'by the Guest of Honour Col. Rajyavardhan Rathore, Honourable Minister of State (I/C) for Information & Broadcasting', desc: 'Keynote Address', bg:"url(https://upload.wikimedia.org/wikipedia/commons/6/62/Defense.gov_News_Photo_110609-D-XH843-003_-_Secretary_of_Defense_Robert_M._Gates_attends_the_NATO_and_non-NATO_ISAF_contributing_nations_meeting_during_the_NATO_formal_Defense_Ministerial_in.jpg)"}, | |
{range: ['07:30', '08:00'], location: 'by the Guest of Honour and the CEO of Times Internet, Gautam Sinha', desc: 'Joint launch of an Industry Report', bg:"url(http://www.renaissancesociety.org/media/files/rs_7341.jpg)"}, | |
{range: ['08:00', '08:20'], location: 'by the Guest of Honour and the CEO of Times Internet, Gautam Sinha', desc: 'Keynote on Shaping India\'s Digital Opinion', bg:"url(http://c2cinspiredlab.eu/wp-content/uploads/2015/07/6-parallel-session-Remko-Zuidema.jpg)"}, | |
{range: ['08:20', '08:50'], location: '', desc: 'Panel discussion on The Impact of Digital', bg:"url(https://reeecillinois.files.wordpress.com/2015/05/refreshments-2.jpg)"}, | |
{range: ['08:50', '09:00'], location: '', desc: 'Vote of thanks ', bg:"url(https://upload.wikimedia.org/wikipedia/commons/3/34/Secretary_Kerry_Holds_Initial_Meeting_with_Interagency_Team_%289757144093%29.jpg)"}, | |
{range: ['09:00', '21:15'], location: '', desc: 'Dinner and Networking', bg:"url(https://s-media-cache-ak0.pinimg.com/originals/c3/ce/0a/c3ce0a214166f132d96be4641560a656.jpg)"} | |
] | |
} | |
] | |
let timeFromNum = (num, sep, ampm) => { | |
let hh = parseInt(num); | |
let mm = Math.round((num-hh) * 60); | |
if(mm == 60){hh +=1; mm=0;} | |
sep = sep || ''; | |
return (hh)+sep+('00'+mm).substr(-2); | |
} | |
let numFromTime = (time) => { | |
let set = time.split(/[.:]/) | |
let hh = parseInt(set[0]) | |
let mm = set[1] ? parseInt(set[1]) : 0 | |
return parseFloat((hh + mm / 60).toFixed(1)) | |
} | |
let app = new Vue({ | |
el: 'aside', | |
data: { | |
now: numFromTime(moment(now).format('HH:mm')), | |
time: moment().format('HH:mm'), | |
showTimeTraveller: false | |
} | |
}) | |
let sked = new Vue({ | |
el: 'main', | |
filters: { | |
date: function(date) { | |
return date.format('ddd, MMM D'); | |
} | |
}, | |
data: { | |
now: numFromTime(moment(now).format('HH:mm')), | |
schedule: schedule | |
}, | |
methods: { | |
checkTime: function(ts, te) { | |
return (this.now >= numFromTime(ts) && this.now < numFromTime(te)) | |
}, | |
} | |
}) | |
let setClockPos = () => { | |
setTimeout(() => { | |
let anchor = document.querySelector('.current') | |
let t = '1em' | |
if(anchor) { | |
t = Math.round(anchor.getBoundingClientRect().top) + 'px' | |
} | |
document.documentElement.style.setProperty('--y', t) | |
var agen = sked.schedule[0].agenda; | |
for(var i =0; i< agen.length; i++){ | |
if(sked.checkTime(agen[i].range[0],agen[i].range[1])){ | |
document.documentElement.style.setProperty('--bg', agen[i].bg); | |
if(agen[i+1]){ | |
var nxt = document.getElementById("upNext"); | |
nxt.style.display = "block"; | |
var nxtitem = agen[i+1]; | |
nxt.innerHTML="<h7>Next: " + nxtitem.desc + "</h7><br><small>" + nxtitem.range[0] + " @ " + nxtitem.location; | |
}else{ | |
var nxt = document.getElementById("upNext"); | |
nxt.style.display = "none"; | |
} | |
} | |
} | |
}, 350) | |
} | |
let timeTraveler | |
let setTime = function() { | |
let now = moment() | |
app.now = sked.now = numFromTime(moment(now).format('HH:mm')) | |
app.time = moment(now).format('HH:mm') | |
} | |
let runTimer = () => { | |
setClockPos() | |
timeTraveler = setInterval(function() { | |
setTime() | |
}, 60000) | |
} | |
runTimer() | |
var targettime = 7; | |
let demoTimer = () => { | |
targettime+=0.0075; | |
app.time = timeFromNum(targettime, ':', true) | |
sked.now = targettime | |
setClockPos(); | |
if(targettime < 23.8){ | |
timeTraveler = setTimeout(function() { | |
demoTimer(); | |
}, 25); | |
}else{ | |
targettime= 7; | |
setTime(); | |
timeTraveler = setTimeout(function() { | |
demoTimer(); | |
}, 15000); | |
} | |
} | |
demoTimer() | |
// resize capture | |
let resizeTimer | |
window.addEventListener('resize', (e) => { | |
clearTimeout(resizeTimer); | |
resizeTimer = setTimeout(() => { | |
setClockPos() | |
}, 60); | |
}, false) | |
})(window) |
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
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script> |
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 url("https://fonts.googleapis.com/css?family=News+Cycle"); | |
:root { | |
--font: 'News Cycle', Helvetica, sans-serif; | |
--accent: #ff8f44; | |
--bg: #403638; | |
--transform: translate(-50%, -50%); | |
} | |
aside { | |
position: relative; | |
-webkit-box-flex: 1; | |
-ms-flex: 1; | |
flex: 1; | |
-webkit-box-ordinal-group: 2; | |
-ms-flex-order: 1; | |
order: 1; | |
} | |
main { | |
position: relative; | |
-webkit-box-flex: 1; | |
-ms-flex: 1; | |
flex: 1; | |
-webkit-box-ordinal-group: 3; | |
-ms-flex-order: 2; | |
order: 2; | |
overflow: auto; | |
height: 100vh; | |
} | |
main section { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
min-height: 100vh; | |
} | |
main { | |
background: rgba(0, 0, 17, 0.8); | |
color: #fff; | |
} | |
main header { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 auto; | |
flex: 0 0 auto; | |
-webkit-writing-mode: vertical-rl; | |
-ms-writing-mode: tb-rl; | |
writing-mode: vertical-rl; | |
padding: 1em .5em; | |
color: rgba(0, 0, 17, 0.4); | |
background: #0070bb; | |
} | |
main ul { | |
list-style: none; | |
margin: 0; | |
padding: 2rem; | |
-webkit-box-flex: 1; | |
-ms-flex: 1; | |
flex: 1; | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
-webkit-box-pack: justify; | |
-ms-flex-pack: justify; | |
justify-content: space-between; | |
} | |
main li { | |
position: relative; | |
-webkit-transition: font-size 300ms ease-in, opacity 300ms ease-in; | |
transition: font-size 300ms ease-in, opacity 300ms ease-in; | |
font-size: .5em; | |
opacity: 1; | |
line-height: 1.2; | |
} | |
main li.current { | |
font-size: 1em; | |
opacity: 1; | |
} | |
main li.current::after { | |
content: ''; | |
position: absolute; | |
top: 0; | |
left: -2rem; | |
-webkit-transform: translateY(-0.5rem); | |
transform: translateY(-0.5rem); | |
border: .5em solid; | |
border-width: 1em 0 1em .625em; | |
border-color: transparent; | |
border-left-color: currentColor; | |
} | |
main li.current ~ li { | |
opacity: 1; | |
} | |
main li.current + li { | |
font-size: .675em; | |
opacity: 0.8; | |
} | |
h1 { | |
position: relative; | |
top: .65em; | |
left: .65em; | |
margin: 0; | |
line-height: 1; | |
display: inline; | |
} | |
h3 { | |
margin: 0; | |
text-transform: uppercase; | |
font-weight: 200; | |
font-size: 1.325em; | |
} | |
h3 b { | |
font-weight: 900; | |
} | |
.clock h3 { | |
-webkit-transform: rotate(90deg) translate( var(--y),-115px); | |
transform: rotate(90deg) translate( var(--y),-115px ); | |
} | |
.clock { | |
width:130px; | |
position: absolute; | |
font-size: 1em; | |
top: 1em; | |
right: 1em; | |
-webkit-transition: -webkit-transform 300ms ease-out; | |
transition: -webkit-transform 300ms ease-out; | |
transition: transform 300ms ease-out; | |
transition: transform 300ms ease-out, -webkit-transform 300ms ease-out; | |
} | |
small { | |
font-size: .75em; | |
color: var(--accent); | |
-webkit-transition: color 3000ms linear; | |
transition: color 3000ms linear; | |
} | |
small small { | |
font-size: .85em; | |
} | |
main li.after-hours { | |
-webkit-animation: fade-in 1000ms ease-in 80ms forwards; | |
animation: fade-in 1000ms ease-in 80ms forwards; | |
position: fixed; | |
font-size: 1.2em; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
background: rgba(0, 0, 0, 0.85); | |
line-height: 1.5; | |
width: 100vw; | |
height: 100vh; | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
opacity: 0; | |
text-align: center; | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
-webkit-box-pack: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
} | |
main li.current ~ li.after-hours { | |
display: none; | |
opacity: 0; | |
} | |
@-webkit-keyframes fade-in { | |
100% { | |
opacity: 1; | |
} | |
} | |
@keyframes fade-in { | |
100% { | |
opacity: 1; | |
} | |
} | |
*, *::before, *::after { | |
box-sizing: border-box; | |
} | |
body { | |
margin: 0; | |
min-height: 100vh; | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-ms-flex-flow: row wrap; | |
flex-flow: row wrap; | |
-webkit-box-pack: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
overflow: hidden; | |
font-family: var(--font); | |
font-size: calc(1em + 1.5vmin); | |
background: var(--bg); | |
background-repeat: no-repeat; | |
background-position: center center; | |
background-size: cover; | |
-webkit-transition: background 1500ms linear; | |
transition: background 1500ms linear; | |
color: #fff; | |
} | |
main header { | |
height: 100%; | |
} | |
main header { | |
width: 0px; | |
padding: 1em 1.25em; | |
line-height: 0; | |
} | |
#upNext{ | |
position:absolute; | |
bottom:-5px; | |
left:-5px; | |
display:block; | |
background:rgba(0, 0, 17, 0.8); | |
padding:20px; | |
border-radius:5px; | |
border:3px solid rgb(0, 0, 17); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment