Skip to content

Instantly share code, notes, and snippets.

@hervehobbes

hervehobbes/home-portal-app.markdown

Created April 11, 2019 08:13
Show Gist options
  • Save hervehobbes/105c22c5629f3edfefead65e94ae6e0c to your computer and use it in GitHub Desktop.
Save hervehobbes/105c22c5629f3edfefead65e94ae6e0c to your computer and use it in GitHub Desktop.
Download ZIP
Home portal app
Raw
home-portal-app.markdown

Home portal app

It's a home portal app design concept with fix 800x480 resolution. Designed to Raspberry Pi2. Animation with awesome GSAP.

A Pen by Hervé on CodePen.

License.

Raw
index.pug
.page.page-home(style="display:block")
.bg
.overlay
.panel.panel-time
.span.time 15:06
.span.date Monday, 27 Juny 2015
.panel.panel-weather
.location Budapest, Hungary
//.icon.wi.wi-day-sunny-overcast
img(src="http://ultraimg.com/images/KlfpUAu.png")
.span.temp 28
span.degree °C
.span.text Sunny
.panel.panel-calendar
ul
li
.time 8:00 - 9:00
.title Shopping
li
.time 10:00 - 12:00
.title Meet Tom
li
.time 18:00 - 20:00
.title Go to cinema
.panel.panel-tasks
ul
li.checked
.check
.title Milk
li
.check
.title Bread & cheese
li
.check
.title Beer & wine
li.other
.plus
.title ... and 15 other tasks
.panel.panel-functions
.icon.icon-weather(data-page="weather")
i.fa.fa-sun-o
span.title Weather
.icon.icon-calendar(data-page="calendar")
i.fa.fa-calendar
span.title Calendar
.icon.icon-map(data-page="map")
i.fa.fa-globe
span.title Map
.icon.icon-tasks(data-page="tasks")
i.fa.fa-tasks
span.title Tasks
.icon.icon-news(data-page="news")
i.fa.fa-rss
span.title News
.page.page-weather
.bg
.overlay
.panel.panel-now
.mainInfo
//.icon.wi.wi-day-sunny
img(src="http://ultraimg.com/images/KlfpUAu.png")
.temp
span.value 27
span.degree °C
span.separator /
span.value 19
span.degree °C
.row
.info
i.wi.wi-strong-wind
span.value 15 km/h
.info
i.wi.wi-wind-default._150-deg
span.value NW
.info
i.wi.wi-sprinkles
span.value 40 %
.panel.panel-today
.box
.title Morning
//.icon.wi.wi-day-rain
img(src="http://ultraimg.com/images/Paf07R1.png")
.temp
span.value 16
span.degree °C
.box
.title Afternoon
//.icon.wi.wi-day-rain
img(src="http://ultraimg.com/images/KlfpUAu.png")
.temp
span.value 26
span.degree °C
.box
.title Tonight
//.icon.wi.wi-day-rain
img(src="http://ultraimg.com/images/NDKiHOg.png")
.temp
span.value 19
span.degree °C
.panel.panel-location
.title
span Budapest
span Hungary
.icon.fa.fa-map-marker
.panel.panel-forecast
.box
.title Tue
//.icon.wi.wi-day-rain
img(src="http://ultraimg.com/images/bosikG0.png")
.temp
span.value 31
span.degree °C
span.separator /
span.value 23
span.degree °C
.box
.title Wed
img(src="http://ultraimg.com/images/KlfpUAu.png")
.temp
span.value 25
span.degree °C
span.separator /
span.value 20
span.degree °C
.box
.title Thu
img(src="http://ultraimg.com/images/t8VL5lw.png")
.temp
span.value 18
span.degree °C
span.separator /
span.value 12
span.degree °C
.box
.title Fri
img(src="http://ultraimg.com/images/t8VL5lw.png")
.temp
span.value 16
span.degree °C
span.separator /
span.value 9
span.degree °C
.box
.title Sat
img(src="http://ultraimg.com/images/Paf07R1.png")
.temp
span.value 20
span.degree °C
span.separator /
span.value 13
span.degree °C
.box
.title Sun
img(src="http://ultraimg.com/images/bosikG0.png")
.temp
span.value 26
span.degree °C
span.separator /
span.value 22
span.degree °C
.page.page-calendar
.bg
.overlay
.panel.panel-calendar.left
.header
.title Today
.date Juny 25, 2015
ul
li
.time 8:00 - 9:00
.title Shopping
li
.time 10:00 - 12:00
.title Meet Tom
li
.time 18:00 - 20:00
.title Go to cinema
li
.time 23:00 - 24:00
.title Drinking
.panel.panel-calendar.right
.header
.title Tomorrow
.date Juny 26, 2015
ul
li
.time 9:00 - 10:00
.title Meeting
li
.time 11:00 - 13:00
.title Go to bank
li
.time 16:00 - 17:00
.title Dinner
li
.time 22:00 - 24:00
.title Party
.page.page-map
.bg
.overlay
.title Traffic map
.map
.page.page-tasks
.bg
.overlay
.wrapper
.panel.panel-tasklist
.header
.title Shopping list (4)
.newItem
.text
i.fa.fa-plus
span.title Add new item
input(type="text", placeholder="Add new item")
ul
li.checked
.check
.title Milk
li
.check
.title Bread
li
.check
.title Cheese
li
.check
.title Beer
.panel.panel-tasklist
.header
.title To-do list (5)
.newItem
.text
i.fa.fa-plus
span.title Add new item
input(type="text", placeholder="Add new item")
ul
li
.check
.title Cleaning
li
.check
.title Washing
li
.check
.title Shopping
li.checked
.check
.title Pay bills
li
.check
.title Dusting
.panel.panel-tasklist
.header
.title Long-term tasks (3)
.newItem
.text
i.fa.fa-plus
span.title Add new item
input(type="text", placeholder="Add new item")
ul
li
.check
.title Prepare boiler
li
.check
.title Buy a sofa
li
.check
.title Car service
.page.page-news
.bg
.overlay
.panel.panel-newslist-big
ul
li
.image(style="background-image: url('http://cnet1.cbsistatic.com/hub/i/2012/10/15/1b4b10cd-fdb7-11e2-8c7c-d4ae52e62bcc/4669586ec99fd664fe4862edf2249436/Sonos_Connect_33190898_02_540x386.jpg');")
.source CNET
.time June 26, 2015 7:12 PM
.title What is FLAC? The high-def MP3 explained
.description CNET explains what FLAC is, as well as where to buy music in the FLAC format, and how to play it on your iPhone, computer, or MP3 player. In the late …
li
.image(style="background-image: url('https://cdn.flipboard.com/forbes.com/a174e8925fbf44563a38c7e763c91ed733f05a60/original.jpg');")
.source Forbes
.time June 26, 2015 6:01 PM
.title Here Are The Phones That Will Fit Your 'Fallout 4' Pip-Boy Edition
.description Imagine this scenario: You recently contributed $119 to a Kickstarter campaign for an upcoming mobile RPG from one of your most respected developers. Good news, the project was successfully funded! Now the developer chooses this point in time to tell you which mobile operating system the game will …
li
.image(style="background-image: url('http://cnet1.cbsistatic.com/hub/i/2012/10/15/1b4b10cd-fdb7-11e2-8c7c-d4ae52e62bcc/4669586ec99fd664fe4862edf2249436/Sonos_Connect_33190898_02_540x386.jpg');")
.source CNET
.time June 26, 2015 7:12 PM
.title What is FLAC? The high-def MP3 explained
.description CNET explains what FLAC is, as well as where to buy music in the FLAC format, and how to play it on your iPhone, computer, or MP3 player. In the late …
li
.image(style="background-image: url('https://cdn.flipboard.com/forbes.com/a174e8925fbf44563a38c7e763c91ed733f05a60/original.jpg');")
.source Forbes
.time June 26, 2015 6:01 PM
.title Here Are The Phones That Will Fit Your 'Fallout 4' Pip-Boy Edition
.description Imagine this scenario: You recently contributed $119 to a Kickstarter campaign for an upcoming mobile RPG from one of your most respected developers. Good news, the project was successfully funded! Now the developer chooses this point in time to tell you which mobile operating system the game will …
li
.image(style="background-image: url('http://cnet1.cbsistatic.com/hub/i/2012/10/15/1b4b10cd-fdb7-11e2-8c7c-d4ae52e62bcc/4669586ec99fd664fe4862edf2249436/Sonos_Connect_33190898_02_540x386.jpg');")
.source CNET
.time June 26, 2015 7:12 PM
.title What is FLAC? The high-def MP3 explained
.description CNET explains what FLAC is, as well as where to buy music in the FLAC format, and how to play it on your iPhone, computer, or MP3 player. In the late …
li
.image(style="background-image: url('https://cdn.flipboard.com/forbes.com/a174e8925fbf44563a38c7e763c91ed733f05a60/original.jpg');")
.source Forbes
.time June 26, 2015 6:01 PM
.title Here Are The Phones That Will Fit Your 'Fallout 4' Pip-Boy Edition
.description Imagine this scenario: You recently contributed $119 to a Kickstarter campaign for an upcoming mobile RPG from one of your most respected developers. Good news, the project was successfully funded! Now the developer chooses this point in time to tell you which mobile operating system the game will …
li
.image(style="background-image: url('http://cnet1.cbsistatic.com/hub/i/2012/10/15/1b4b10cd-fdb7-11e2-8c7c-d4ae52e62bcc/4669586ec99fd664fe4862edf2249436/Sonos_Connect_33190898_02_540x386.jpg');")
.source CNET
.time June 26, 2015 7:12 PM
.title What is FLAC? The high-def MP3 explained
.description CNET explains what FLAC is, as well as where to buy music in the FLAC format, and how to play it on your iPhone, computer, or MP3 player. In the late …
li
.image(style="background-image: url('https://cdn.flipboard.com/forbes.com/a174e8925fbf44563a38c7e763c91ed733f05a60/original.jpg');")
.source Forbes
.time June 26, 2015 6:01 PM
.title Here Are The Phones That Will Fit Your 'Fallout 4' Pip-Boy Edition
.description Imagine this scenario: You recently contributed $119 to a Kickstarter campaign for an upcoming mobile RPG from one of your most respected developers. Good news, the project was successfully funded! Now the developer chooses this point in time to tell you which mobile operating system the game will …
li
.image(style="background-image: url('http://cnet1.cbsistatic.com/hub/i/2012/10/15/1b4b10cd-fdb7-11e2-8c7c-d4ae52e62bcc/4669586ec99fd664fe4862edf2249436/Sonos_Connect_33190898_02_540x386.jpg');")
.source CNET
.time June 26, 2015 7:12 PM
.title What is FLAC? The high-def MP3 explained
.description CNET explains what FLAC is, as well as where to buy music in the FLAC format, and how to play it on your iPhone, computer, or MP3 player. In the late …
li
.image(style="background-image: url('https://cdn.flipboard.com/forbes.com/a174e8925fbf44563a38c7e763c91ed733f05a60/original.jpg');")
.source Forbes
.time June 26, 2015 6:01 PM
.title Here Are The Phones That Will Fit Your 'Fallout 4' Pip-Boy Edition
.description Imagine this scenario: You recently contributed $119 to a Kickstarter campaign for an upcoming mobile RPG from one of your most respected developers. Good news, the project was successfully funded! Now the developer chooses this point in time to tell you which mobile operating system the game will …
li
.image(style="background-image: url('http://cnet1.cbsistatic.com/hub/i/2012/10/15/1b4b10cd-fdb7-11e2-8c7c-d4ae52e62bcc/4669586ec99fd664fe4862edf2249436/Sonos_Connect_33190898_02_540x386.jpg');")
.source CNET
.time June 26, 2015 7:12 PM
.title What is FLAC? The high-def MP3 explained
.description CNET explains what FLAC is, as well as where to buy music in the FLAC format, and how to play it on your iPhone, computer, or MP3 player. In the late …
li
.image(style="background-image: url('https://cdn.flipboard.com/forbes.com/a174e8925fbf44563a38c7e763c91ed733f05a60/original.jpg');")
.source Forbes
.time June 26, 2015 6:01 PM
.title Here Are The Phones That Will Fit Your 'Fallout 4' Pip-Boy Edition
.description Imagine this scenario: You recently contributed $119 to a Kickstarter campaign for an upcoming mobile RPG from one of your most respected developers. Good news, the project was successfully funded! Now the developer chooses this point in time to tell you which mobile operating system the game will …
.panel.panel-newslist-small
ul
li
.source CNET
.image(style="background-image: url('http://cnet1.cbsistatic.com/hub/i/2012/10/15/1b4b10cd-fdb7-11e2-8c7c-d4ae52e62bcc/4669586ec99fd664fe4862edf2249436/Sonos_Connect_33190898_02_540x386.jpg');")
.title What is FLAC? The high-def MP3 explained
.description CNET explains what FLAC is, as well as where to buy music in the FLAC format, and how to play it on your iPhone, computer, or MP3 player. In the late …
.time June 26, 2015 7:12 PM
li
.source Forbes
.image(style="background-image: url('https://cdn.flipboard.com/forbes.com/a174e8925fbf44563a38c7e763c91ed733f05a60/original.jpg');")
.title Here Are The Phones That Will Fit Your 'Fallout 4' Pip-Boy Edition
.description Imagine this scenario: You recently contributed $119 to a Kickstarter campaign for an upcoming mobile RPG from one of your most respected developers. Good news, the project was successfully funded! Now the developer chooses this point in time to tell you which mobile operating system the game will …
.time June 26, 2015 6:01 PM
li
.source CNET
.image(style="background-image: url('http://cnet1.cbsistatic.com/hub/i/2012/10/15/1b4b10cd-fdb7-11e2-8c7c-d4ae52e62bcc/4669586ec99fd664fe4862edf2249436/Sonos_Connect_33190898_02_540x386.jpg');")
.title What is FLAC? The high-def MP3 explained
.description CNET explains what FLAC is, as well as where to buy music in the FLAC format, and how to play it on your iPhone, computer, or MP3 player. In the late …
.time June 26, 2015 7:12 PM
li
.source Forbes
.image(style="background-image: url('https://cdn.flipboard.com/forbes.com/a174e8925fbf44563a38c7e763c91ed733f05a60/original.jpg');")
.title Here Are The Phones That Will Fit Your 'Fallout 4' Pip-Boy Edition
.description Imagine this scenario: You recently contributed $119 to a Kickstarter campaign for an upcoming mobile RPG from one of your most respected developers. Good news, the project was successfully funded! Now the developer chooses this point in time to tell you which mobile operating system the game will …
.time June 26, 2015 6:01 PM
li
.source CNET
.image(style="background-image: url('http://cnet1.cbsistatic.com/hub/i/2012/10/15/1b4b10cd-fdb7-11e2-8c7c-d4ae52e62bcc/4669586ec99fd664fe4862edf2249436/Sonos_Connect_33190898_02_540x386.jpg');")
.title What is FLAC? The high-def MP3 explained
.description CNET explains what FLAC is, as well as where to buy music in the FLAC format, and how to play it on your iPhone, computer, or MP3 player. In the late …
.time June 26, 2015 7:12 PM
li
.source Forbes
.image(style="background-image: url('https://cdn.flipboard.com/forbes.com/a174e8925fbf44563a38c7e763c91ed733f05a60/original.jpg');")
.title Here Are The Phones That Will Fit Your 'Fallout 4' Pip-Boy Edition
.description Imagine this scenario: You recently contributed $119 to a Kickstarter campaign for an upcoming mobile RPG from one of your most respected developers. Good news, the project was successfully funded! Now the developer chooses this point in time to tell you which mobile operating system the game will …
.time June 26, 2015 6:01 PM
li
.source CNET
.image(style="background-image: url('http://cnet1.cbsistatic.com/hub/i/2012/10/15/1b4b10cd-fdb7-11e2-8c7c-d4ae52e62bcc/4669586ec99fd664fe4862edf2249436/Sonos_Connect_33190898_02_540x386.jpg');")
.title What is FLAC? The high-def MP3 explained
.description CNET explains what FLAC is, as well as where to buy music in the FLAC format, and how to play it on your iPhone, computer, or MP3 player. In the late …
.time June 26, 2015 7:12 PM
li
.source Forbes
.image(style="background-image: url('https://cdn.flipboard.com/forbes.com/a174e8925fbf44563a38c7e763c91ed733f05a60/original.jpg');")
.title Here Are The Phones That Will Fit Your 'Fallout 4' Pip-Boy Edition
.description Imagine this scenario: You recently contributed $119 to a Kickstarter campaign for an upcoming mobile RPG from one of your most respected developers. Good news, the project was successfully funded! Now the developer chooses this point in time to tell you which mobile operating system the game will …
.time June 26, 2015 6:01 PM
li
.source CNET
.image(style="background-image: url('http://cnet1.cbsistatic.com/hub/i/2012/10/15/1b4b10cd-fdb7-11e2-8c7c-d4ae52e62bcc/4669586ec99fd664fe4862edf2249436/Sonos_Connect_33190898_02_540x386.jpg');")
.title What is FLAC? The high-def MP3 explained
.description CNET explains what FLAC is, as well as where to buy music in the FLAC format, and how to play it on your iPhone, computer, or MP3 player. In the late …
.time June 26, 2015 7:12 PM
li
.source Forbes
.image(style="background-image: url('https://cdn.flipboard.com/forbes.com/a174e8925fbf44563a38c7e763c91ed733f05a60/original.jpg');")
.title Here Are The Phones That Will Fit Your 'Fallout 4' Pip-Boy Edition
.description Imagine this scenario: You recently contributed $119 to a Kickstarter campaign for an upcoming mobile RPG from one of your most respected developers. Good news, the project was successfully funded! Now the developer chooses this point in time to tell you which mobile operating system the game will …
.time June 26, 2015 6:01 PM
li
.source CNET
.image(style="background-image: url('http://cnet1.cbsistatic.com/hub/i/2012/10/15/1b4b10cd-fdb7-11e2-8c7c-d4ae52e62bcc/4669586ec99fd664fe4862edf2249436/Sonos_Connect_33190898_02_540x386.jpg');")
.title What is FLAC? The high-def MP3 explained
.description CNET explains what FLAC is, as well as where to buy music in the FLAC format, and how to play it on your iPhone, computer, or MP3 player. In the late …
.time June 26, 2015 7:12 PM
li
.source Forbes
.image(style="background-image: url('https://cdn.flipboard.com/forbes.com/a174e8925fbf44563a38c7e763c91ed733f05a60/original.jpg');")
.title Here Are The Phones That Will Fit Your 'Fallout 4' Pip-Boy Edition
.description Imagine this scenario: You recently contributed $119 to a Kickstarter campaign for an upcoming mobile RPG from one of your most respected developers. Good news, the project was successfully funded! Now the developer chooses this point in time to tell you which mobile operating system the game will …
.time June 26, 2015 6:01 PM
Raw
script.coffeescript
###
Home Portal App - Design concent
Designed to Raspberry Pi 2
Note: you can switch back to home if you slide to right the page
For more information follow me on Twitter @Icebobcsi
https://twitter.com/Icebobcsi
Icons: http://fontawesome.io/
Animation: https://greensock.com/gsap
Weather icons: http://vclouds.deviantart.com/art/VClouds-Weather-Icons-179152045
Home screen inspired by: https://www.behance.net/gallery/20006383/PORTAL-Inspire-Greatness
###
mapLoaded = false
showPage = (pageName, cb) ->
$page = $(".page.page-" + pageName)
$prevPage = $(".page:visible");
if $prevPage.attr("class") is $page.attr("class")
return $page
# console.log("Show page " + pageName);
tl = new TimelineLite
paused: true,
onComplete: ->
if not mapLoaded and pageName is "map"
showMap()
mapLoaded = true
cb() if cb
if $prevPage.length > 0
# Slide out old
tl.to $prevPage, 0.5,
x: 800
ease: Power3.easeIn
clearProps:"scale"
onComplete: -> $prevPage.hide()
tl.from $page, 0.5,
scale: 0.6
delay: 0.2
ease: Power3.easeOut
onStart: -> $page.show()
# Animate home page
if pageName is "home"
tl.from ".page-home .panel-time", 0.6,
x: -400
ease: Power3.easeOut
tl.from ".page-home .panel-weather", 0.6,
x: "+=400"
ease: Power3.easeOut
, '-=0.3'
tl.staggerFrom ".page-home .panel-functions .icon", 1.5,
y: 150
clearProps: "opacity, scale"
ease: Elastic.easeOut
, 0.2, "-=0.4"
tl.staggerFrom ".page-home .panel-calendar li", 1.5,
x: -400
ease: Power3.easeOut
, 0.2, "-=2"
tl.staggerFrom ".page-home .panel-tasks li", 1.5,
x: 400
ease: Power3.easeOut
, 0.2, "-=1.8"
# Animate weather page
if pageName is "weather"
tl.from ".page-weather .panel-now", 0.6,
x: -500
ease: Power3.easeOut
tl.from ".page-weather .panel-today", 0.6,
x: -500
ease: Power3.easeOut
, '-=0.2'
tl.from ".page-weather .panel-location", 0.4,
x: "+=400"
ease: Power3.easeOut
, '-=0.5'
tl.staggerFrom ".page-weather .panel-forecast .box", 1.2,
y: 150
delay: 0.5
ease: Elastic.easeOut
, 0.1, "-=0.5"
# Animate calendar page
if pageName is "calendar"
tl.staggerFrom ".page-calendar .panel-calendar", 1.0,
y: -150
autoAlpha: 0
ease: Power3.easeOut
, 0.3
tl.staggerFrom ".page-calendar .panel-calendar li", 1.0,
y: 150
autoAlpha: 0
ease: Power3.easeOut
, 0.1, "-=0.6"
# Animate calendar page
if pageName is "tasks"
tl.staggerFrom ".page-tasks .panel-tasklist", 1.0,
y: -150
autoAlpha: 0
ease: Power3.easeOut
, 0.3, "-=0.2"
tl.staggerFrom ".page-tasks .panel-tasklist li", 1.0,
y: 150
autoAlpha: 0
ease: Power3.easeOut
, 0.1, "-=0.8"
# Play
tl.play()
return $page
$ ->
# $page = showPage "home"
# Gestures control
$('.page').each (i, page) ->
if $(page).hasClass "page-home" then return
mc = new Hammer page,
preventDefault: true
type = "pan"
mc.get(type).set({ direction: Hammer.DIRECTION_HORIZONTAL, threshold: 10 });
mc.on type + 'right', (ev) ->
mc.get(type).set({ enable: false });
console.log(ev)
showPage "home", ->
mc.get(type).set({ enable: true });
# Click handler for home buttons
$(".page-home .panel-functions .icon").on "click", ->
TweenLite.to $(this), 0.5,
scale: 2.0
clearProps: "opacity, scale"
opacity: 0
showPage $(this).attr('data-page')
$(".page-home .panel-weather").on "click", ->
showPage "weather"
$(".page-home .panel-tasks").on "click", ->
showPage "tasks"
$(".page-home .panel-tasks li .check").on "click", (e)->
e.preventDefault()
e.stopPropagation()
$(this).closest("li").toggleClass "checked"
$(".page-home .panel-calendar").on "click", ->
showPage "calendar"
# Task events
$(".page-tasks .panel-tasklist li").on "click", (e)->
e.preventDefault()
e.stopPropagation()
$(this).toggleClass "checked"
$(".page-tasks .newItem .text").on "click", (e)->
div = $(e.target).closest(".newItem")
div.find(".text").hide()
div.find("input").val('').show().focus()
$(".page-tasks .newItem input").on "keypress", (e)->
if e.keyCode is 13
value = $(e.target).val()
div = $(e.target).closest(".newItem")
div.find(".text").show()
div.find("input").hide()
ul = div.parent().find("ul");
newLI = $("<li/>").append([
$("<div/>").addClass("check"),
$("<div/>").addClass("title").text(value)
])
ul.prepend newLI
TweenMax.from newLI, 1.2,
y: -50
ease: Elastic.easeOut
$(".page-tasks .newItem input").on "blur", (e)->
div = $(e.target).parent()
div.find(".text").show()
div.find("input").hide()
# News scrolling
stopBigNews = false
$(".page-news .panel-newslist-big").on("mouseenter", ->
stopBigNews = true
).on("mouseleave", ->
stopBigNews = false
)
bigIndex = 1
setInterval ->
if stopBigNews then return
TweenLite.to(".page-news .panel-newslist-big ul", 1.5, {scrollTo:{x: bigIndex * (370 + 4)}, ease:Power2.easeInOut}); # 4 -> 0.25em margin cause of inline-block
bigIndex++
if bigIndex >= $(".page-news .panel-newslist-big li").length then bigIndex = 0
, 4000
stopSmallNews = false
$(".page-news .panel-newslist-small").on("mouseenter", ->
stopSmallNews = true
).on("mouseleave", ->
stopSmallNews = false
)
smallIndex = 1
setInterval ->
if stopSmallNews then return
li = $(".page-news .panel-newslist-small li:eq(#{smallIndex})")
top = li.offset().top
top0 = $(".page-news .panel-newslist-small li:eq(0)").offset().top
TweenLite.to(".page-news .panel-newslist-small", 1.5, {scrollTo:{y: top - top0}, ease:Power2.easeInOut});
smallIndex++
if smallIndex >= $(".page-news .panel-newslist-small li").length then smallIndex = 0
, 3000
# Show traffic map
showMap = ->
mapOptions =
center:
lat: 47.480865
lng: 19.060265
zoom: 12
# Cobalt Theme
styles: [
featureType: 'all',
elementType: 'all',
stylers: [
{ 'invert_lightness': false },
{ 'saturation': 20 },
{ 'lightness': 10 },
{ 'gamma': 0.5 },
{ 'hue': '#90C2DC' }
]
,
featureType: 'poi',
elementType: 'labels',
stylers: [
{ 'visibility': 'off' }
]
]
map = new google.maps.Map $(".page-map .map").get(0), mapOptions
trafficLayer = new google.maps.TrafficLayer()
trafficLayer.setMap map
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCMRGe3tisQkblfDg8yJ-OwSCDV_2uRq2U"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/102308/ScrollToPlugin.js"></script>
Raw
style.scss
@import "compass";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900|Dosis:300,400,600,700,800|Droid+Sans:400,700|Lato:300,400,700,900|PT+Sans:400,700|Ubuntu:300,400,500,700|Open+Sans:400,300,600,700|Roboto:400,300,500,700,900|Roboto+Condensed:400,300,700|Open+Sans+Condensed:300,700|Play:400,700|Maven+Pro:400,500,700,900&subset=latin,latin-ext);
$forestGreen: rgb(0, 255, 84);
$cityAqua: rgb(0, 233, 233);
$skyBlue: rgb(0, 181, 255);
$deepPurple: rgb(164, 49, 230);
$islandOrange: rgb(255, 49, 0);
$beachOrange: rgb(255, 97, 0);
$masterColor: $cityAqua;
$bg1: rgba($masterColor, 0.6);
$bg2: rgba($masterColor, 0.8);
$textColor: White;
$fontFamily: "Open Sans";
* {
@include box-sizing(border-box);
}
html {
background-color: #1d1f20;
font-size: 16px;
font-family: $fontFamily;
font-weight: 300;
color: White;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
}
@mixin clearfix() {
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
@mixin absolute($w: 100%, $h: 100%) {
position: absolute;
left: 0; right: 0; bottom: 0; top: 0;
width: $w;
height: $h;
margin: auto auto;
}
@mixin add-flex() {
@include display-flex();
align-items: center;
justify-content: space-around;
}
@mixin ellipsis() {
white-space: nowrap;
text-overflow: ellipsis;
}
@mixin scrollStyle($c) {
/* scrollbar design Chrome */
&::-webkit-scrollbar {
height: 10px;
width: 10px;
//background: #000;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: $c;
border: 1px solid darken($c, 10%);
}
&::-webkit-scrollbar-corner {
background: $c;
display: none;
opacity: 0;
}
}
body {
overflow: hidden;
}
.page {
display: none;
@include absolute(800px,480px);
background: Black;
@include border-radius(6px);
@include box-shadow(1px 1px 10px rgba(Black, 0.8));
@include user-select(none);
overflow: hidden;
.bg {
@include absolute(800px,480px);
background-image: url('http://ultraimg.com/images/yarQDmk.jpg');
background-size: cover;
$blur: 0px;
-webkit-filter: blur($blur);
-moz-filter: blur($blur);
-o-filter: blur($blur);
-ms-filter: blur($blur);
filter: blur($blur);
} // .bg
.overlay {
@include absolute(800px,480px);
background-color: rgba($masterColor, 0.1);
}
} // .page
$panelRadius: 5px;
.panel {
//background-color: $bg1;
background-color: rgba(black, 0.4);
@include text-shadow(0 0 4px rgba(Black, 0.4));
}
$skew: 10deg;
.page-home {
.panel-time {
position: absolute;
top: 30px;
width: 380px;
@include border-radius(0px $panelRadius $panelRadius 0px);
.time {
font-size: 7.0rem;
line-height: 8.0rem;
text-align: center;
} // .time
.date {
background-color: $bg1;
font-size: 1.5rem;
line-height: 2.5rem;
text-align: center;
@include border-radius(0px 0px $panelRadius 0px);
} // .date
} // .panel-time
.panel-weather {
position: absolute;
top: 30px;
width: 380px;
right: 0px;
text-align: center;
cursor: pointer;
@include border-radius($panelRadius 0px 0px $panelRadius);
background-color: rgba(Black, 0.3);
.location {
background-color: $bg1;
font-size: 1.1rem;
line-height: 1.5rem;
@include border-radius($panelRadius 0px 0px 0px);
}
.icon {
display: inline-block;
font-size: 3.0rem;
line-height: 4.0rem;
margin-right: 40px;
}
img {
width: 150px;
margin-right: 50px;
}
.temp {
display: inline-block;
vertical-align: top;
font-size: 5.0rem;
line-height: 6.5rem;
font-weight: 400;
.degree {
font-size: 2rem;
line-height: 4rem;
vertical-align: top;
}
}
.text {
font-weight: 400;
font-size: 1.4rem;
line-height: 2.5rem;
}
} // .panel-weather
.panel-calendar {
position: absolute;
top: 220px;
width: 380px;
height: 120px;
overflow: hidden;
cursor: pointer;
background-color: initial;
ul {
padding: 0px 20px;
li {
padding: 0;
margin: 8px 0px;
background-color: rgba(Black, 0.5);
@include border-radius(10px);
.time, .title {
display: inline-block;
font-size: 1.0rem;
line-height: 1.2rem;
padding: 2px 6px;
} // .time, .title
.time {
width: 120px;
text-align: center;
font-weight: 300;
background-color: $bg1;
@include border-radius(4px 0 0 4px);
} // .time
} // li
} // ul
} // .panel-calendar
.panel-tasks {
position: absolute;
top: 210px;
right: 0px;
width: 300px;
height: 140px;
overflow: hidden;
cursor: pointer;
background-color: initial;
ul {
padding-right: 30px;
li {
padding: 0;
margin: 8px 0px;
background-color: rgba(Black, 0.5);
@include border-radius(10px);
.check, .title, .plus {
display: inline-block;
font-size: 1.0rem;
line-height: 20px;
vertical-align: middle;
} // .time, .title
.title {
padding: 2px 6px;
}
.check {
position: relative;
margin: 0px 0px 0px 2px;
width: 20px;
height: 20px;
border: 2px solid $bg1;
@include border-radius(20px);
} // .check
&.checked .check {
&:after {
content: '\f00c';
position: absolute;
font-family: FontAwesome;
font-size: 0.9rem;
top: -2px;
left: 1px;
}
} // .checked
.plus {
width: 20px;
height: 20px;
} // .plus
&.other .title {
font-style: italic;
color: darken($textColor, 20%);
font-size: 0.9rem;
} // .other
} // li
} // ul
} // .panel-tasks
.panel-functions {
position: absolute;
width: 100%;
bottom: 0px;
padding: 20px 0px;
@include add-flex();
.icon {
$p: 15px;
$border: 6px;
$size: 45px;
$w: $size + $p * 2 + $border * 2;
margin: 0px 20px;
font-size: $size;
width: $w;
height: $w;
padding: $p;
text-align: center;
cursor: pointer;
border: $border solid $bg1;
@include border-radius($w);
.title {
font-size: 1.0rem;
text-align: center;
text-transform: uppercase;
display: none;
} // .title
} // .icon
} // .panel-functions
} // .page-home
.page-weather {
.bg {
background-image: url('http://ultraimg.com/images/WA9FyMb.jpg');
} // .bg
.panel-now {
position: absolute;
top: 10px;
left: 20px;
width: 400px;
height: 200px;
@include border-radius($panelRadius);
.mainInfo {
text-align: center;
@include text-shadow(1px 1px 4px rgba(Black, 0.6));
.icon {
display: block;
font-size: 4.0rem;
line-height: 6.0rem;
}
img {
display: block;
margin: auto;
height: 120px;
padding-right: 20px;
}
.temp {
display: block;
font-size: 3.0rem;
line-height: 4.0rem;
margin-bottom: 6px;
margin-top: -10px;
.value {
font-weight: 600;
}
.separator {
margin: 0 3px;
opacity: 0.4;
}
.degree {
margin-left: 5px;
font-size: 1.5rem;
line-height: 2.5rem;
font-weight: 300;
vertical-align: top;
}
} // .temp
} // .mainInfo
.row {
@include add-flex();
.info {
flex: 1;
text-align: center;
i {
margin-right: 10px;
color: lighten($islandOrange, 15%);
}
.value {
font-weight: 600;
}
} // .info
} // .row
} // .panel-now
.panel-location {
position: absolute;
top: 10px;
right: 20px;
width: 200px;
height: 100px;
text-align: right;
@include text-shadow(1px 1px 4px rgba(Black, 0.9));
@include border-radius($panelRadius);
background-color: initial;
.icon {
display: inline-block;
text-align: center;
font-size: 3.0rem;
line-height: 4.0rem;
}
.title {
display: inline-block;
text-align: center;
font-size: 1.0rem;
line-height: 1.2rem;
margin-right: 10px;
span {
display: block;
}
}
} // .panel-location
.panel-today {
position: absolute;
top: 220px;
left: 20px;
width: 400px;
height: 100px;
background-color: rgba(black, 0.5);
@include border-radius($panelRadius);
@include add-flex();
justify-content: space-between;
.box {
flex: 1;
height: 100%;
border-right: 2px solid rgba(Black, 0.3);
.title {
background-color: rgba(Black, 0.2);
font-size: 0.9rem;
line-height: 1.3rem;
font-weight: 600;
text-align: center;
color: lighten($islandOrange, 15%);
@include text-shadow(1px 1px 3px rgba(Black, 0.6));
} // .title
.icon {
display: block;
font-size: 2.0rem;
line-height: 4.0rem;
font-weight: 400;
text-align: center;
@include text-shadow(1px 1px 5px rgba(Black, 0.9));
//color: lighten($masterColor, 35%);
} // .icon
img {
display: block;
height: 50px;
margin-left: 20px;
}
.temp {
font-size: 1.1rem;
line-height: 2.0rem;
font-weight: 300;
text-align: center;
.value {
font-weight: 600;
}
.degree {
margin-left: 2px;
font-size: 0.7rem;
line-height: 1.8rem;
font-weight: 300;
vertical-align: top;
}
} // .temp
} // .box
} // .panel-today
.panel-forecast {
position: absolute;
bottom: 0;
width: 100%;
height: 150px;
background-color: rgba(black, 0.5);
@include add-flex();
justify-content: space-between;
.box {
flex: 1;
height: 100%;
border-right: 2px solid rgba(Black, 0.3);
.title {
background-color: rgba(Black, 0.2);
font-size: 1.5rem;
line-height: 2.0rem;
font-weight: 600;
text-align: center;
text-transform: uppercase;
color: lighten($islandOrange, 15%);
@include text-shadow(1px 1px 4px rgba(Black, 0.6));
} // .title
.icon {
display: block;
font-size: 2.0rem;
line-height: 4.0rem;
font-weight: 400;
text-align: center;
@include text-shadow(1px 1px 5px rgba(Black, 0.9));
//color: lighten($masterColor, 35%);
} // .icon
img {
display: block;
height: 75px;
margin-left: 5px;
}
.temp {
font-size: 1.8rem;
line-height: 3.0rem;
font-weight: 300;
text-align: center;
.value {
font-weight: 600;
}
.separator {
margin: 0 3px;
opacity: 0.4;
}
.degree {
margin-left: 2px;
font-size: 0.8rem;
line-height: 2.5rem;
font-weight: 300;
vertical-align: top;
}
} // .temp
} // .box
} // .panel-forecast
} // .page-weather
.page-map {
.bg {
background-image: url('http://ultraimg.com/images/9u0jRT1.jpg');
$blur: 2px;
-webkit-filter: blur($blur);
-moz-filter: blur($blur);
-o-filter: blur($blur);
-ms-filter: blur($blur);
filter: blur($blur);
} // .bg
.overlay {
background-color: rgba($skyBlue, 0.25);
} // .overlay
.title {
position: absolute;
width: 90%;
top: 10px;
left: 0; right: 0;
margin: auto;
text-align: center;
font-size: 2.5rem;
line-height: 3.5rem;
background-color: rgba(Black, 0.2);
@include border-radius($panelRadius * 2);
font-family: "Open Sans";
font-weight: 400;
@include text-shadow(1px 1px 4px rgba(Black, 0.6));
}
.map {
@include absolute(90%, 80%);
margin-top: 10%;
@include border-radius(8px);
@include box-shadow(0 0 10px rgba(Black, 0.6));
}
} // .page-map
.page-tasks {
$c: $forestGreen;
.bg {
background-image: url('http://ultraimg.com/images/gAbeciZ.jpg');
$blur: 0px;
-webkit-filter: blur($blur);
-moz-filter: blur($blur);
-o-filter: blur($blur);
-ms-filter: blur($blur);
filter: blur($blur);
} // .bg
.overlay {
background-color: rgba(darken($c, 20%), 0.30);
} // .overlay
.wrapper {
position: absolute;
top: 20px;
left: 20px;
width: 760px;
height: 440px;
overflow: hidden;
}
.panel-tasklist {
display: inline-block;
vertical-align: top;
width: 30%;
margin: 0 1%;
background-color: rgba(black, 0.40);
@include border-radius($panelRadius);
.header {
text-align: center;
.title {
font-size: 1.2rem;
line-height: 2.0rem;
background-color: rgba($c, 0.7);
@include border-radius($panelRadius $panelRadius 0 0);
} // .title
} // .header
.newItem {
padding: 15px 15px 0px 15px;
height: 35px;
.text {
cursor: pointer;
.title {
display: inline-block;
//font-style: italic;
color: darken($textColor, 20%);
font-size: 0.9rem;
}
i {
width: 20px;
height: 20px;
margin-right: 5px;
text-align: center;
color: darken($textColor, 20%);
line-height: 20px;
vertical-align: middle;
}
} // .text
input {
display: none;
width: 100%;
padding: 2px 6px;
background-color: darken($c, 30%);
border: 1px solid darken($c, 20%);
@include border-radius($panelRadius);
font-family: $fontFamily;
color: $textColor;
} // input
} // .newItem
ul {
height: 370px;
padding: 10px 10px;
overflow: auto;
@include scrollStyle(darken($c, 20%));
li {
padding: 0;
margin: 8px 0px;
@include border-radius(10px);
cursor: pointer;
.check, .title, .plus {
display: inline-block;
font-size: 1.0rem;
line-height: 20px;
vertical-align: top;
} // .check, .title, .plus
.check {
position: relative;
margin: 0px 0px 0px 2px;
width: 20px;
height: 20px;
border: 2px solid $c;
@include border-radius(20px);
} // .check
.title {
width: 170px;
padding: 2px 6px;
}
&.checked {
.check:after {
content: '\f00c';
position: absolute;
font-family: FontAwesome;
font-size: 0.9rem;
top: -2px;
left: 1px;
} // .check after
.title {
font-style: italic;
text-decoration: line-through;
color: darken($textColor, 30%);
} // .title
} // .checked
.plus {
width: 20px;
height: 20px;
} // .plus
} // li
} // ul
&.right {
left: auto;
right: 20px;
}
} // .panel-tasklist
} // .page-tasks
.page-calendar {
$c: $cityAqua;
.bg {
background-image: url('http://ultraimg.com/images/6XirZxd.jpg');
$blur: 0px;
-webkit-filter: blur($blur);
-moz-filter: blur($blur);
-o-filter: blur($blur);
-ms-filter: blur($blur);
filter: blur($blur);
} // .bg
.overlay {
background-color: rgba($c, 0.20);
} // .overlay
.panel-calendar {
position: absolute;
top: 20px;
left: 20px;
width: 360px;
height: 440px;
overflow: hidden;
background-color: rgba(black, 0.55);
@include border-radius($panelRadius);
.header {
text-align: center;
.title {
font-size: 1.5rem;
line-height: 2.0rem;
background-color: rgba($c, 0.8);
} // .title
.date {
font-size: 1.0rem;
line-height: 1.5rem;
background-color: rgba($c, 0.6);
} // .date
} // .header
ul {
height: 380px;
overflow: auto;
@include scrollStyle(darken($c, 10%));
padding: 10px 15px 10px 10px;
li {
padding: 8px 0px;
border-bottom: 1px solid rgba($c, 0.3);
.time, .title {
display: inline-block;
font-size: 0.9rem;
line-height: 1.0rem;
padding: 2px 6px;
} // .time, .title
.time {
width: 100px;
text-align: center;
font-weight: 300;
vertical-align: top;
//background-color: $c;
//@include border-radius(4px 0 0 4px);
} // .time
.title {
width: 220px;
vertical-align: top;
//@include ellipsis();
}
} // li
} // ul
&.right {
left: auto;
right: 20px;
}
} // .panel-calendar
} // .page-calendar
.page-news {
$c: $skyBlue;
.bg {
background-image: url('http://ultraimg.com/images/NRcVB9W.jpg');
$blur: 0px;
-webkit-filter: blur($blur);
-moz-filter: blur($blur);
-o-filter: blur($blur);
-ms-filter: blur($blur);
filter: blur($blur);
} // .bg
.overlay {
background-color: rgba($c, 0.20);
} // .overlay
.panel-newslist-big {
position: absolute;
top: 10px;
left: 10px;
width: 380px;
height: 460px;
background-color: rgba(black, 0.7);
@include border-radius($panelRadius);
padding: 10px;
ul {
white-space: nowrap;
overflow: hidden;
}
li {
display: inline-block;
white-space: normal;
vertical-align: top;
margin-right: 10px;
@include text-shadow(0 0 6px rgba(Black, 0.8));
.image {
position: relative;
width: 360px;
height: 200px;
background-size: cover;
@include border-radius($panelRadius);
overflow: hidden;
margin-top: 10px;
font-size: 0.8rem;
.source {
position: absolute;
padding: 4px 8px;
background-color: rgba($c, 0.8);
font-weight: 400;
} // .source
.time {
position: absolute;
padding: 4px 8px;
background-color: rgba($c, 0.8);
bottom: 0px;
left: 0px;
} // .time
} // .image
.title {
font-size: 1.6rem;
line-height: 1.8rem;
margin: 6px 0px;
} // .title
.description {
margin-top: 10px;
font-size: 1.0rem;
line-height: 1.1rem;
font-weight: 400;
} // .description
} // li
} // .panel-newslist-big
.panel-newslist-small {
position: absolute;
top: 10px;
right: 10px;
width: 380px;
height: 460px;
overflow: auto;
@include scrollStyle(darken($c, 10%));
background-color: rgba(black, 0.7);
@include border-radius($panelRadius);
padding: 10px;
li {
border-bottom: 1px solid lighten(Black, 10%);
margin-bottom: 10px;
padding-bottom: 10px;
@include text-shadow(0 0 6px rgba(Black, 0.8));
.source {
padding: 4px 0px;
color: darken($textColor, 30%);
font-size: 0.8rem;
font-weight: 400;
} // .source
.image {
float: right;
width: 100px;
height: 80px;
margin-left: 10px;
background-size: cover;
@include border-radius($panelRadius);
margin-top: 10px;
} // .image
.title {
font-size: 1.2rem;
line-height: 1.4rem;
font-weight: 700;
margin: 6px 0px;
color: lighten($c, 20%);
} // .title
.description {
margin: 10px 0px;
font-size: 1.0rem;
line-height: 1.2rem;
font-weight: 400;
} // .description
.time {
padding: 4px 0px;
color: darken($textColor, 30%);
font-size: 0.6rem;
font-weight: 300;
} // .time
} // li
} // .panel-newslist-small
} // .page-news
/* scrollbar design IE */
body {
scrollbar-track-color: rgba(Black, 0.6);
scrollbar-face-color: rgba(Black, 0.6);
}
Raw
styles
<link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/weather-icons/1.3.2/css/weather-icons.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment