LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
15:06
Monday, 27 Juny 2015
Budapest, Hungary
28°C
Sunny
  • 8:00 - 9:00
    Shopping
  • 10:00 - 12:00
    Meet Tom
  • 18:00 - 20:00
    Go to cinema
  • Milk
  • Bread & cheese
  • Beer & wine
  • ... and 15 other tasks
Weather
Calendar
Map
Tasks
News
27°C/19°C
15 km/h
NW
40 %
Morning
16°C
Afternoon
26°C
Tonight
19°C
BudapestHungary
Tue
31°C/23°C
Wed
25°C/20°C
Thu
18°C/12°C
Fri
16°C/9°C
Sat
20°C/13°C
Sun
26°C/22°C
Today
Juny 25, 2015
  • 8:00 - 9:00
    Shopping
  • 10:00 - 12:00
    Meet Tom
  • 18:00 - 20:00
    Go to cinema
  • 23:00 - 24:00
    Drinking
Tomorrow
Juny 26, 2015
  • 9:00 - 10:00
    Meeting
  • 11:00 - 13:00
    Go to bank
  • 16:00 - 17:00
    Dinner
  • 22:00 - 24:00
    Party
Traffic map
Shopping list (4)
Add new item
  • Milk
  • Bread
  • Cheese
  • Beer
To-do list (5)
Add new item
  • Cleaning
  • Washing
  • Shopping
  • Pay bills
  • Dusting
Long-term tasks (3)
Add new item
  • Prepare boiler
  • Buy a sofa
  • Car service
  • CNET
    June 26, 2015 7:12 PM
    What is FLAC? The high-def MP3 explained
    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 …
  • Forbes
    June 26, 2015 6:01 PM
    Here Are The Phones That Will Fit Your 'Fallout 4' Pip-Boy Edition
    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 …
  • CNET
    June 26, 2015 7:12 PM
    What is FLAC? The high-def MP3 explained
    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 …
  • Forbes
    June 26, 2015 6:01 PM
    Here Are The Phones That Will Fit Your 'Fallout 4' Pip-Boy Edition
    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 …
  • CNET
    June 26, 2015 7:12 PM
    What is FLAC? The high-def MP3 explained
    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 …
  • Forbes
    June 26, 2015 6:01 PM
    Here Are The Phones That Will Fit Your 'Fallout 4' Pip-Boy Edition
    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 …
  • CNET
    June 26, 2015 7:12 PM
    What is FLAC? The high-def MP3 explained
    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 …
  • Forbes
    June 26, 2015 6:01 PM
    Here Are The Phones That Will Fit Your 'Fallout 4' Pip-Boy Edition
    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 …
  • CNET
    June 26, 2015 7:12 PM
    What is FLAC? The high-def MP3 explained
    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 …
  • Forbes
    June 26, 2015 6:01 PM
    Here Are The Phones That Will Fit Your 'Fallout 4' Pip-Boy Edition
    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 …
  • CNET
    June 26, 2015 7:12 PM
    What is FLAC? The high-def MP3 explained
    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 …
  • Forbes
    June 26, 2015 6:01 PM
    Here Are The Phones That Will Fit Your 'Fallout 4' Pip-Boy Edition
    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 …
  • CNET
    What is FLAC? The high-def MP3 explained
    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 …
    June 26, 2015 7:12 PM
  • Forbes
    Here Are The Phones That Will Fit Your 'Fallout 4' Pip-Boy Edition
    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 …
    June 26, 2015 6:01 PM
  • CNET
    What is FLAC? The high-def MP3 explained
    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 …
    June 26, 2015 7:12 PM
  • Forbes
    Here Are The Phones That Will Fit Your 'Fallout 4' Pip-Boy Edition
    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 …
    June 26, 2015 6:01 PM
  • CNET
    What is FLAC? The high-def MP3 explained
    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 …
    June 26, 2015 7:12 PM
  • Forbes
    Here Are The Phones That Will Fit Your 'Fallout 4' Pip-Boy Edition
    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 …
    June 26, 2015 6:01 PM
  • CNET
    What is FLAC? The high-def MP3 explained
    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 …
    June 26, 2015 7:12 PM
  • Forbes
    Here Are The Phones That Will Fit Your 'Fallout 4' Pip-Boy Edition
    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 …
    June 26, 2015 6:01 PM
  • CNET
    What is FLAC? The high-def MP3 explained
    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 …
    June 26, 2015 7:12 PM
  • Forbes
    Here Are The Phones That Will Fit Your 'Fallout 4' Pip-Boy Edition
    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 …
    June 26, 2015 6:01 PM
  • CNET
    What is FLAC? The high-def MP3 explained
    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 …
    June 26, 2015 7:12 PM
  • Forbes
    Here Are The Phones That Will Fit Your 'Fallout 4' Pip-Boy Edition
    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 …
    June 26, 2015 6:01 PM
CSS
@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);
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  background-color: #1d1f20;
  font-size: 16px;
  font-family: "Open Sans";
  font-weight: 300;
  color: White;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}

body {
  overflow: hidden;
}

.page {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 800px;
  height: 480px;
  margin: auto auto;
  background: Black;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.8);
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.8);
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
}
.page .bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 800px;
  height: 480px;
  margin: auto auto;
  background-image: url("http://ultraimg.com/images/yarQDmk.jpg");
  background-size: cover;
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
}
.page .overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 800px;
  height: 480px;
  margin: auto auto;
  background-color: rgba(0, 233, 233, 0.1);
}

.panel {
  background-color: rgba(0, 0, 0, 0.4);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

.page-home .panel-time {
  position: absolute;
  top: 30px;
  width: 380px;
  -moz-border-radius: 0px 5px 5px 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px 5px 5px 0px;
}
.page-home .panel-time .time {
  font-size: 7.0rem;
  line-height: 8.0rem;
  text-align: center;
}
.page-home .panel-time .date {
  background-color: rgba(0, 233, 233, 0.6);
  font-size: 1.5rem;
  line-height: 2.5rem;
  text-align: center;
  -moz-border-radius: 0px 0px 5px 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px 0px 5px 0px;
}
.page-home .panel-weather {
  position: absolute;
  top: 30px;
  width: 380px;
  right: 0px;
  text-align: center;
  cursor: pointer;
  -moz-border-radius: 5px 0px 0px 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px 0px 0px 5px;
  background-color: rgba(0, 0, 0, 0.3);
}
.page-home .panel-weather .location {
  background-color: rgba(0, 233, 233, 0.6);
  font-size: 1.1rem;
  line-height: 1.5rem;
  -moz-border-radius: 5px 0px 0px 0px;
  -webkit-border-radius: 5px;
  border-radius: 5px 0px 0px 0px;
}
.page-home .panel-weather .icon {
  display: inline-block;
  font-size: 3.0rem;
  line-height: 4.0rem;
  margin-right: 40px;
}
.page-home .panel-weather img {
  width: 150px;
  margin-right: 50px;
}
.page-home .panel-weather .temp {
  display: inline-block;
  vertical-align: top;
  font-size: 5.0rem;
  line-height: 6.5rem;
  font-weight: 400;
}
.page-home .panel-weather .temp .degree {
  font-size: 2rem;
  line-height: 4rem;
  vertical-align: top;
}
.page-home .panel-weather .text {
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.5rem;
}
.page-home .panel-calendar {
  position: absolute;
  top: 220px;
  width: 380px;
  height: 120px;
  overflow: hidden;
  cursor: pointer;
  background-color: initial;
}
.page-home .panel-calendar ul {
  padding: 0px 20px;
}
.page-home .panel-calendar ul li {
  padding: 0;
  margin: 8px 0px;
  background-color: rgba(0, 0, 0, 0.5);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.page-home .panel-calendar ul li .time, .page-home .panel-calendar ul li .title {
  display: inline-block;
  font-size: 1.0rem;
  line-height: 1.2rem;
  padding: 2px 6px;
}
.page-home .panel-calendar ul li .time {
  width: 120px;
  text-align: center;
  font-weight: 300;
  background-color: rgba(0, 233, 233, 0.6);
  -moz-border-radius: 4px 0 0 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px 0 0 4px;
}
.page-home .panel-tasks {
  position: absolute;
  top: 210px;
  right: 0px;
  width: 300px;
  height: 140px;
  overflow: hidden;
  cursor: pointer;
  background-color: initial;
}
.page-home .panel-tasks ul {
  padding-right: 30px;
}
.page-home .panel-tasks ul li {
  padding: 0;
  margin: 8px 0px;
  background-color: rgba(0, 0, 0, 0.5);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.page-home .panel-tasks ul li .check, .page-home .panel-tasks ul li .title, .page-home .panel-tasks ul li .plus {
  display: inline-block;
  font-size: 1.0rem;
  line-height: 20px;
  vertical-align: middle;
}
.page-home .panel-tasks ul li .title {
  padding: 2px 6px;
}
.page-home .panel-tasks ul li .check {
  position: relative;
  margin: 0px 0px 0px 2px;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 233, 233, 0.6);
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}
.page-home .panel-tasks ul li.checked .check:after {
  content: '\f00c';
  position: absolute;
  font-family: FontAwesome;
  font-size: 0.9rem;
  top: -2px;
  left: 1px;
}
.page-home .panel-tasks ul li .plus {
  width: 20px;
  height: 20px;
}
.page-home .panel-tasks ul li.other .title {
  font-style: italic;
  color: #cccccc;
  font-size: 0.9rem;
}
.page-home .panel-functions {
  position: absolute;
  width: 100%;
  bottom: 0px;
  padding: 20px 0px;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.page-home .panel-functions .icon {
  margin: 0px 20px;
  font-size: 45px;
  width: 87px;
  height: 87px;
  padding: 15px;
  text-align: center;
  cursor: pointer;
  border: 6px solid rgba(0, 233, 233, 0.6);
  -moz-border-radius: 87px;
  -webkit-border-radius: 87px;
  border-radius: 87px;
}
.page-home .panel-functions .icon .title {
  font-size: 1.0rem;
  text-align: center;
  text-transform: uppercase;
  display: none;
}

.page-weather .bg {
  background-image: url("http://ultraimg.com/images/WA9FyMb.jpg");
}
.page-weather .panel-now {
  position: absolute;
  top: 10px;
  left: 20px;
  width: 400px;
  height: 200px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.page-weather .panel-now .mainInfo {
  text-align: center;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}
.page-weather .panel-now .mainInfo .icon {
  display: block;
  font-size: 4.0rem;
  line-height: 6.0rem;
}
.page-weather .panel-now .mainInfo img {
  display: block;
  margin: auto;
  height: 120px;
  padding-right: 20px;
}
.page-weather .panel-now .mainInfo .temp {
  display: block;
  font-size: 3.0rem;
  line-height: 4.0rem;
  margin-bottom: 6px;
  margin-top: -10px;
}
.page-weather .panel-now .mainInfo .temp .value {
  font-weight: 600;
}
.page-weather .panel-now .mainInfo .temp .separator {
  margin: 0 3px;
  opacity: 0.4;
}
.page-weather .panel-now .mainInfo .temp .degree {
  margin-left: 5px;
  font-size: 1.5rem;
  line-height: 2.5rem;
  font-weight: 300;
  vertical-align: top;
}
.page-weather .panel-now .row {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.page-weather .panel-now .row .info {
  flex: 1;
  text-align: center;
}
.page-weather .panel-now .row .info i {
  margin-right: 10px;
  color: #ff6f4d;
}
.page-weather .panel-now .row .info .value {
  font-weight: 600;
}
.page-weather .panel-location {
  position: absolute;
  top: 10px;
  right: 20px;
  width: 200px;
  height: 100px;
  text-align: right;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: initial;
}
.page-weather .panel-location .icon {
  display: inline-block;
  text-align: center;
  font-size: 3.0rem;
  line-height: 4.0rem;
}
.page-weather .panel-location .title {
  display: inline-block;
  text-align: center;
  font-size: 1.0rem;
  line-height: 1.2rem;
  margin-right: 10px;
}
.page-weather .panel-location .title span {
  display: block;
}
.page-weather .panel-today {
  position: absolute;
  top: 220px;
  left: 20px;
  width: 400px;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.5);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-around;
  justify-content: space-between;
}
.page-weather .panel-today .box {
  flex: 1;
  height: 100%;
  border-right: 2px solid rgba(0, 0, 0, 0.3);
}
.page-weather .panel-today .box .title {
  background-color: rgba(0, 0, 0, 0.2);
  font-size: 0.9rem;
  line-height: 1.3rem;
  font-weight: 600;
  text-align: center;
  color: #ff6f4d;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}
.page-weather .panel-today .box .icon {
  display: block;
  font-size: 2.0rem;
  line-height: 4.0rem;
  font-weight: 400;
  text-align: center;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.9);
}
.page-weather .panel-today .box img {
  display: block;
  height: 50px;
  margin-left: 20px;
}
.page-weather .panel-today .box .temp {
  font-size: 1.1rem;
  line-height: 2.0rem;
  font-weight: 300;
  text-align: center;
}
.page-weather .panel-today .box .temp .value {
  font-weight: 600;
}
.page-weather .panel-today .box .temp .degree {
  margin-left: 2px;
  font-size: 0.7rem;
  line-height: 1.8rem;
  font-weight: 300;
  vertical-align: top;
}
.page-weather .panel-forecast {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 150px;
  background-color: rgba(0, 0, 0, 0.5);
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-around;
  justify-content: space-between;
}
.page-weather .panel-forecast .box {
  flex: 1;
  height: 100%;
  border-right: 2px solid rgba(0, 0, 0, 0.3);
}
.page-weather .panel-forecast .box .title {
  background-color: rgba(0, 0, 0, 0.2);
  font-size: 1.5rem;
  line-height: 2.0rem;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  color: #ff6f4d;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}
.page-weather .panel-forecast .box .icon {
  display: block;
  font-size: 2.0rem;
  line-height: 4.0rem;
  font-weight: 400;
  text-align: center;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.9);
}
.page-weather .panel-forecast .box img {
  display: block;
  height: 75px;
  margin-left: 5px;
}
.page-weather .panel-forecast .box .temp {
  font-size: 1.8rem;
  line-height: 3.0rem;
  font-weight: 300;
  text-align: center;
}
.page-weather .panel-forecast .box .temp .value {
  font-weight: 600;
}
.page-weather .panel-forecast .box .temp .separator {
  margin: 0 3px;
  opacity: 0.4;
}
.page-weather .panel-forecast .box .temp .degree {
  margin-left: 2px;
  font-size: 0.8rem;
  line-height: 2.5rem;
  font-weight: 300;
  vertical-align: top;
}

.page-map .bg {
  background-image: url("http://ultraimg.com/images/9u0jRT1.jpg");
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}
.page-map .overlay {
  background-color: rgba(0, 181, 255, 0.25);
}
.page-map .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(0, 0, 0, 0.2);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  font-family: "Open Sans";
  font-weight: 400;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}
.page-map .map {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 90%;
  height: 80%;
  margin: auto auto;
  margin-top: 10%;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.page-tasks .bg {
  background-image: url("http://ultraimg.com/images/gAbeciZ.jpg");
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
}
.page-tasks .overlay {
  background-color: rgba(0, 153, 50, 0.3);
}
.page-tasks .wrapper {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 760px;
  height: 440px;
  overflow: hidden;
}
.page-tasks .panel-tasklist {
  display: inline-block;
  vertical-align: top;
  width: 30%;
  margin: 0 1%;
  background-color: rgba(0, 0, 0, 0.4);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.page-tasks .panel-tasklist .header {
  text-align: center;
}
.page-tasks .panel-tasklist .header .title {
  font-size: 1.2rem;
  line-height: 2.0rem;
  background-color: rgba(0, 255, 84, 0.7);
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px;
  border-radius: 5px 5px 0 0;
}
.page-tasks .panel-tasklist .newItem {
  padding: 15px 15px 0px 15px;
  height: 35px;
}
.page-tasks .panel-tasklist .newItem .text {
  cursor: pointer;
}
.page-tasks .panel-tasklist .newItem .text .title {
  display: inline-block;
  color: #cccccc;
  font-size: 0.9rem;
}
.page-tasks .panel-tasklist .newItem .text i {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  text-align: center;
  color: #cccccc;
  line-height: 20px;
  vertical-align: middle;
}
.page-tasks .panel-tasklist .newItem input {
  display: none;
  width: 100%;
  padding: 2px 6px;
  background-color: #006622;
  border: 1px solid #009932;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-family: "Open Sans";
  color: White;
}
.page-tasks .panel-tasklist ul {
  height: 370px;
  padding: 10px 10px;
  overflow: auto;
  /* scrollbar design Chrome */
}
.page-tasks .panel-tasklist ul::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
.page-tasks .panel-tasklist ul::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #009932;
  border: 1px solid #006622;
}
.page-tasks .panel-tasklist ul::-webkit-scrollbar-corner {
  background: #009932;
  display: none;
  opacity: 0;
}
.page-tasks .panel-tasklist ul li {
  padding: 0;
  margin: 8px 0px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  cursor: pointer;
}
.page-tasks .panel-tasklist ul li .check, .page-tasks .panel-tasklist ul li .title, .page-tasks .panel-tasklist ul li .plus {
  display: inline-block;
  font-size: 1.0rem;
  line-height: 20px;
  vertical-align: top;
}
.page-tasks .panel-tasklist ul li .check {
  position: relative;
  margin: 0px 0px 0px 2px;
  width: 20px;
  height: 20px;
  border: 2px solid #00ff54;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}
.page-tasks .panel-tasklist ul li .title {
  width: 170px;
  padding: 2px 6px;
}
.page-tasks .panel-tasklist ul li.checked .check:after {
  content: '\f00c';
  position: absolute;
  font-family: FontAwesome;
  font-size: 0.9rem;
  top: -2px;
  left: 1px;
}
.page-tasks .panel-tasklist ul li.checked .title {
  font-style: italic;
  text-decoration: line-through;
  color: #b3b3b3;
}
.page-tasks .panel-tasklist ul li .plus {
  width: 20px;
  height: 20px;
}
.page-tasks .panel-tasklist.right {
  left: auto;
  right: 20px;
}

.page-calendar .bg {
  background-image: url("http://ultraimg.com/images/6XirZxd.jpg");
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
}
.page-calendar .overlay {
  background-color: rgba(0, 233, 233, 0.2);
}
.page-calendar .panel-calendar {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 360px;
  height: 440px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.55);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.page-calendar .panel-calendar .header {
  text-align: center;
}
.page-calendar .panel-calendar .header .title {
  font-size: 1.5rem;
  line-height: 2.0rem;
  background-color: rgba(0, 233, 233, 0.8);
}
.page-calendar .panel-calendar .header .date {
  font-size: 1.0rem;
  line-height: 1.5rem;
  background-color: rgba(0, 233, 233, 0.6);
}
.page-calendar .panel-calendar ul {
  height: 380px;
  overflow: auto;
  /* scrollbar design Chrome */
  padding: 10px 15px 10px 10px;
}
.page-calendar .panel-calendar ul::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
.page-calendar .panel-calendar ul::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #00b6b6;
  border: 1px solid #008383;
}
.page-calendar .panel-calendar ul::-webkit-scrollbar-corner {
  background: #00b6b6;
  display: none;
  opacity: 0;
}
.page-calendar .panel-calendar ul li {
  padding: 8px 0px;
  border-bottom: 1px solid rgba(0, 233, 233, 0.3);
}
.page-calendar .panel-calendar ul li .time, .page-calendar .panel-calendar ul li .title {
  display: inline-block;
  font-size: 0.9rem;
  line-height: 1.0rem;
  padding: 2px 6px;
}
.page-calendar .panel-calendar ul li .time {
  width: 100px;
  text-align: center;
  font-weight: 300;
  vertical-align: top;
}
.page-calendar .panel-calendar ul li .title {
  width: 220px;
  vertical-align: top;
}
.page-calendar .panel-calendar.right {
  left: auto;
  right: 20px;
}

.page-news .bg {
  background-image: url("http://ultraimg.com/images/NRcVB9W.jpg");
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
}
.page-news .overlay {
  background-color: rgba(0, 181, 255, 0.2);
}
.page-news .panel-newslist-big {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 380px;
  height: 460px;
  background-color: rgba(0, 0, 0, 0.7);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 10px;
}
.page-news .panel-newslist-big ul {
  white-space: nowrap;
  overflow: hidden;
}
.page-news .panel-newslist-big li {
  display: inline-block;
  white-space: normal;
  vertical-align: top;
  margin-right: 10px;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}
.page-news .panel-newslist-big li .image {
  position: relative;
  width: 360px;
  height: 200px;
  background-size: cover;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 10px;
  font-size: 0.8rem;
}
.page-news .panel-newslist-big li .image .source {
  position: absolute;
  padding: 4px 8px;
  background-color: rgba(0, 181, 255, 0.8);
  font-weight: 400;
}
.page-news .panel-newslist-big li .image .time {
  position: absolute;
  padding: 4px 8px;
  background-color: rgba(0, 181, 255, 0.8);
  bottom: 0px;
  left: 0px;
}
.page-news .panel-newslist-big li .title {
  font-size: 1.6rem;
  line-height: 1.8rem;
  margin: 6px 0px;
}
.page-news .panel-newslist-big li .description {
  margin-top: 10px;
  font-size: 1.0rem;
  line-height: 1.1rem;
  font-weight: 400;
}
.page-news .panel-newslist-small {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 380px;
  height: 460px;
  overflow: auto;
  /* scrollbar design Chrome */
  background-color: rgba(0, 0, 0, 0.7);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 10px;
}
.page-news .panel-newslist-small::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
.page-news .panel-newslist-small::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #0091cc;
  border: 1px solid #006d99;
}
.page-news .panel-newslist-small::-webkit-scrollbar-corner {
  background: #0091cc;
  display: none;
  opacity: 0;
}
.page-news .panel-newslist-small li {
  border-bottom: 1px solid #1a1a1a;
  margin-bottom: 10px;
  padding-bottom: 10px;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}
.page-news .panel-newslist-small li .source {
  padding: 4px 0px;
  color: #b3b3b3;
  font-size: 0.8rem;
  font-weight: 400;
}
.page-news .panel-newslist-small li .image {
  float: right;
  width: 100px;
  height: 80px;
  margin-left: 10px;
  background-size: cover;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin-top: 10px;
}
.page-news .panel-newslist-small li .title {
  font-size: 1.2rem;
  line-height: 1.4rem;
  font-weight: 700;
  margin: 6px 0px;
  color: #66d3ff;
}
.page-news .panel-newslist-small li .description {
  margin: 10px 0px;
  font-size: 1.0rem;
  line-height: 1.2rem;
  font-weight: 400;
}
.page-news .panel-newslist-small li .time {
  padding: 4px 0px;
  color: #b3b3b3;
  font-size: 0.6rem;
  font-weight: 300;
}

/* scrollbar design IE */
body {
  scrollbar-track-color: rgba(0, 0, 0, 0.6);
  scrollbar-face-color: rgba(0, 0, 0, 0.6);
}
JS
###
	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 = $("
  • ").append([ $("
    ").addClass("check"), $("
    ").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
  • Host Instantly Drag and Drop Website Builder

     

    Description

    It's a home portal app design concept with fix 800x480 resolution. Designed to Raspberry Pi2. Animation with awesome GSAP.
    Term
    Mon, 11/27/2017 - 21:38

    Related Codes

    Pen ID
    Pen ID
    Pen ID