From 0f81f67b346814f220c2d9843c87b39cbfa2e2c8 Mon Sep 17 00:00:00 2001 From: brianjjones Date: Thu, 6 Mar 2014 15:57:42 -0800 Subject: Initial commit of the Homescreen app Change-Id: If1057f57109faac93ab1d9b1c28e7a9da800146a --- css/images/dashboard_selector.png | Bin 0 -> 12543 bytes css/images/default_icon.png | Bin 0 -> 57641 bytes css/images/icon_direction_left.png | Bin 0 -> 1304 bytes css/images/icon_facebook.png | Bin 0 -> 1370 bytes css/images/icon_speedmeter.png | Bin 0 -> 2475 bytes css/images/icon_twitter.png | Bin 0 -> 1382 bytes css/images/music_selector.png | Bin 0 -> 11158 bytes css/images/navigation_selector.png | Bin 0 -> 20708 bytes css/images/phone_selector.png | Bin 0 -> 11583 bytes css/images/radio_selector.png | Bin 0 -> 9358 bytes css/images/social_selector.png | Bin 0 -> 15135 bytes css/images/video_selector.png | Bin 0 -> 11817 bytes css/style.css | 519 +++++++++++++++++++++++++++++++++++++ 13 files changed, 519 insertions(+) create mode 100644 css/images/dashboard_selector.png create mode 100644 css/images/default_icon.png create mode 100644 css/images/icon_direction_left.png create mode 100644 css/images/icon_facebook.png create mode 100644 css/images/icon_speedmeter.png create mode 100644 css/images/icon_twitter.png create mode 100644 css/images/music_selector.png create mode 100644 css/images/navigation_selector.png create mode 100644 css/images/phone_selector.png create mode 100644 css/images/radio_selector.png create mode 100644 css/images/social_selector.png create mode 100644 css/images/video_selector.png create mode 100644 css/style.css (limited to 'css') diff --git a/css/images/dashboard_selector.png b/css/images/dashboard_selector.png new file mode 100644 index 0000000..57a75e5 Binary files /dev/null and b/css/images/dashboard_selector.png differ diff --git a/css/images/default_icon.png b/css/images/default_icon.png new file mode 100644 index 0000000..1335774 Binary files /dev/null and b/css/images/default_icon.png differ diff --git a/css/images/icon_direction_left.png b/css/images/icon_direction_left.png new file mode 100644 index 0000000..d35b355 Binary files /dev/null and b/css/images/icon_direction_left.png differ diff --git a/css/images/icon_facebook.png b/css/images/icon_facebook.png new file mode 100644 index 0000000..bcd6322 Binary files /dev/null and b/css/images/icon_facebook.png differ diff --git a/css/images/icon_speedmeter.png b/css/images/icon_speedmeter.png new file mode 100644 index 0000000..7aeb804 Binary files /dev/null and b/css/images/icon_speedmeter.png differ diff --git a/css/images/icon_twitter.png b/css/images/icon_twitter.png new file mode 100644 index 0000000..62f6991 Binary files /dev/null and b/css/images/icon_twitter.png differ diff --git a/css/images/music_selector.png b/css/images/music_selector.png new file mode 100644 index 0000000..7bdaccd Binary files /dev/null and b/css/images/music_selector.png differ diff --git a/css/images/navigation_selector.png b/css/images/navigation_selector.png new file mode 100644 index 0000000..3742f7e Binary files /dev/null and b/css/images/navigation_selector.png differ diff --git a/css/images/phone_selector.png b/css/images/phone_selector.png new file mode 100644 index 0000000..e21edac Binary files /dev/null and b/css/images/phone_selector.png differ diff --git a/css/images/radio_selector.png b/css/images/radio_selector.png new file mode 100644 index 0000000..ea24db2 Binary files /dev/null and b/css/images/radio_selector.png differ diff --git a/css/images/social_selector.png b/css/images/social_selector.png new file mode 100644 index 0000000..a563eff Binary files /dev/null and b/css/images/social_selector.png differ diff --git a/css/images/video_selector.png b/css/images/video_selector.png new file mode 100644 index 0000000..9ef9900 Binary files /dev/null and b/css/images/video_selector.png differ diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..09c5b7b --- /dev/null +++ b/css/style.css @@ -0,0 +1,519 @@ +.wrapper { + width: 720px; + height: 1280px; + overflow: hidden; + position: absolute; + top: 0; + left: 0; +} + +.wrapper .backGround { + position: absolute; + width: 720px; + height: 1280px; + top: 0; + left: 0; + -webkit-perspective: 1000; + -webkit-transition: -webkit-transform, opacity 1000ms ease-out; + -webkit-transition-duration: 500ms; + opacity: 0; +} + +.wrapper .live { + -webkit-transition: -webkit-transform, opacity 2000ms ease-out; +} + +.dateTime { + top: 0; + opacity: 0.3; + z-index: 2; + -webkit-transform: translate3d(0px, -200px, 0); + transform: translate3d(0px, -200px, 0); +} + +.showDT { + opacity: 1; + -webkit-transform: translate3d(0px, 0px, 0); + transform: translate3d(0px, 0px, 0); + -webkit-transition: -webkit-transform 400ms ease-out, opacity 400ms + ease-in; +} + +.topBarIcons { + opacity: 0.3; + z-index: 4; + -webkit-transform: translate3d(0px, -200px, 0); + transform: translate3d(0px, -200px, 0); + -webkit-transition: -webkit-transform 400ms ease-out, opacity 400ms + ease-in; +} + +.showTBI { + opacity: 1; + -webkit-transform: translate3d(0px, 0px, 0); + transform: translate3d(0px, 0px, 0); +} + +.indSize { + position: absolute; + width: 200px; + height: 200px; +} + +.indicator { + -webkit-transition: -webkit-transform 300ms ease-out, opacity 500ms; + -webkit-transform: translate3d(260px, 575px, 0) scale(0); + transform: translate3d(260px, 575px, 0) scale(0); + -webkit-perspective: 10000; + float: left; + opacity: 0; + z-index: 2; +} + +.showI { + -webkit-transform: translate3d(260px, 575px, 0) scale(1); + transform: translate3d(260px, 575px, 0) scale(1); + opacity: 1; +} + +.centerIco { + position: absolute; + top: 60px; + left: 60px; + width: 80px; + height: 80px; + display: block; +} + +.corpus { + -webkit-perspective: 1000; + -webkit-transition: -webkit-transform; + -webkit-transform: translate3d(0px, 0px, 0); + transform: translate3d(0px, 0px, 0); + -webkit-transition-duration: 1500ms; +} + +.item { + position: absolute; + -webkit-transition: -webkit-transform 400ms ease-out, opacity 700ms + ease-out; + /* -webkit-transform: translate3d(0px,0px,0);*/ + -webkit-perspective: 1000; + opacity: 0; + height: 535px; + width: 528px; + text-transform: uppercase; +} + +.abs { + position: absolute; +} + +.item.selected img { + opacity: 0.8; + -webkit-transition: opacity 300ms ease-in +} + +.item img { + position: absolute; + top: 0; + left: 0; + opacity : 0; + -webkit-transition: opacity 500ms ease-out; +} + +.sector1 { + -webkit-transform: translate3d(110px, 148px, 0px); + transform: translate3d(110px, 148px, 0px); +} + +.sector1icon { + top: 110px; + left: 120px; + width: 44px; + height: 33px; +} + +.sector1street { + top: 110px; + left: 180px; + width: 280px; + overflow: hidden; + text-align: left; +} + +.sector1distance { + top: 140px; + left: 180px; +} + +.sector2 { + -webkit-transform: translate3d(392px, 324px, 0px); + transform: translate3d(392px, 324px, 0px); + text-align: center; +} + +.sector2valInterior { + top: 120px; + left: 160px; + width: 150px; + overflow: hidden; +} + +.sector2Interior { + top: 170px; + left: 160px; + width: 150px; +} + +.sector2valExterior { + top: 210px; + left: 100px; + width: 150px; + overflow: hidden; +} + +.sector2Exterior { + top: 260px; + left: 100px; + width: 150px; +} + +.sector3 { + -webkit-transform: translate3d(402px, 630px, 0px); + transform: translate3d(402px, 630px, 0px); + overflow: hidden; + text-align: center; +} + +.sector3header { + top: 65px; + left: 65px; + width: 250px; +} + +.sector3title { + top: 85px; + left: 65px; + width: 250px; +} + +.sector3subHeader { + top: 115px; + left: 90px; + width: 200px; +} + +.sector4 { +/* -webkit-transform: translate3d(314px, 724px, 0px); + transform: translate3d(314px, 724px, 0px); +*/ -webkit-transform: translate3d(340px, 703px, 0px) rotateZ(-5deg); + transform: translate3d(340px, 703px, 0px) rotateZ(-5deg); +} + +.sector4name { + top: 200px; + left: 60px; + width: 150px; + height: 80px; + text-align: left; + overflow: hidden; +} + +.sector5 { + -webkit-transform: translate3d(44px, 702px, 0px); + transform: translate3d(44px, 702px, 0px); +} + +.sector6 { + -webkit-transform: translate3d(0px, 590px, 0px); + transform: translate3d(0px, 590px, 0px); +} + +.sector6postsWrapper { + top: 70px; + left: 25px; + width: 205px; + height: 90px; +} + +.sector6row { + width: 100%; + height: 18px; + overflow: hidden; + text-align: left; +} + +.sector6icon { + top: 1px; + width: 15px; + height: 15px; + float: left; +} + +.sector6time { + width: 65px; + float: left; + margin-right: 5px; + text-align: right; +} + +.sector6text { + float: left; + text-align: right; +} + +.sector7 { + -webkit-transform: translate3d(0px, 316px, 0px); + transform: translate3d(0px, 316px, 0px); +} + +.sector7iconSpeed { + top: 135px; + left: 10px; + width: 37px; + height: 35px; +} + +.sector7valSpeed { + top: 115px; + right: 390px; + text-align: right; +} + +.sector7SpeedUnits { + top: 155px; + left: 145px; + text-transform: lowercase; +} + +.sector7iconBattery { + top: 200px; + left: 10px; + width: 37px; + height: 23px; +} + +.sector7valBatteryPerc { + top: 197px; + left: 50px; + width: 70px; + text-align: right; +} + +.sector7valRange { + top: 197px; + left: 125px; +} + +.bottomPanel { + opacity: 0.3; + z-index: 4; + -webkit-transform: translate3d(0px, 200px, 0); + transform: translate3d(0px, 200px, 0); +} + +.showBP { + opacity: 1; + -webkit-transform: translate3d(0px, 0px, 0); + transform: translate3d(0px, 0px, 0); + -webkit-transition: -webkit-transform 400ms ease-out, opacity 400ms + ease-in; +} + +.volumeControl { + z-index: 4; + position: absolute; + top: 100px; + left: 450px; + width: 240px; + height: 50px; +} + +.audioButtons { + position: absolute; + top: 110px; + left: 53px; +} + +.controlsBtn { + z-index: 4; + position: absolute; + width: 28px; + height: 28px; +} + +.previousBtn { + opacity: 1; +} + +.prevBtnInactive { + opacity: 0.5; +} + +.previousBtnActive { + opacity: 1; +} + +.pauseBtn { + opacity: 1; + left: 96px; +} + +.playBtn { + opacity: 1; + left: 96px; +} + +.nextBtn { + opacity: 1; + left: 191px; +} + +.nextBtnInactive { + opacity: 0.5; + left: 191px; +} + +.nextBtnActive { + opacity: 1; + left: 191px; +} + +.actionsCatcher { + position: absolute; + width: 100%; + height: 100%; + z-index: 3; + opacity: 0; +} + +.homeScrAppGridView { + position: absolute; + top: 0; + left: 0; + width: 654px; + height: 1214px; + z-index: 5; + padding: 33px; + display: none; + overflow-x: hidden; + overflow-y: scroll; +} + +.HSAGWHeading { + text-transform: uppercase; + margin: 0 0 25px 0; +} + +.homeScrAppGridFrame { + width: 212px; + height: 212px; + background-color: rgb(0, 0, 0); + background-color: rgba(0, 0, 0, 0.2); + float: left; + margin: 3px; + text-align: center; +} + +.homeScrAppGridText { + background-color: rgb(0, 0, 0); + background-color: rgba(0, 0, 0, 0.4); + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 80px; +} + +.homeScrAppGridView .exitButton { + position: absolute; + top: 25px; + right: 25px; + width: 42px; + height: 42px; +} + +.homeScrAppGridTitle { + position: absolute; + bottom: 29px; + right: 0; + left: 0; + text-transform: uppercase; + line-height: 25px; +} + +.homeScrAppGridCategory { + font-weight: normal; + line-height: 25px; + font-size: 16px; + display: none; +} + +.homeScrAppGridImg img { + margin: 0 auto; + width: 120px; + height: 120px; +} + +/* ICONS */ +.iconSpeed { + background-image: url("./images/icon_speedmeter.png"); +} + +.iconLeftImg { + background-image: url("./images/icon_direction_left.png"); +} + +.iconFacebook { + background-image: url("images/icon_facebook.png"); +} + +.iconTwitter { + background-image: url("images/icon_twitter.png"); +} + +/* Animations */ +.rollRight { + -webkit-animation-name: rotateR; + -webkit-animation-duration: 10s; + -webkit-animation-delay: 0s; + -webkit-animation-timing-function: linear; + -webkit-animation-iteration-count: 1;/*infinite;*/ +} + +.rollLeft { + -webkit-animation-name: rotateL; + -webkit-animation-duration: 10s; + -webkit-animation-delay: 0s; + -webkit-animation-timing-function: linear; + -webkit-animation-iteration-count: 1;/*infinite;*/ +} + +.liveBg { + -webkit-animation-name: live; + -webkit-animation-duration: 7s; + -webkit-animation-delay: 0s; + -webkit-animation-timing-function: ease-out; + -webkit-animation-iteration-count: 1; + -webkit-transition: opacity 500ms ease-out; +} + +@-webkit-keyframes rotateR { + 0% {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);} + 50% {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg);} + 100% {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);} +} + +@-webkit-keyframes rotateL { + 0% {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);} + 50% {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg);} + 100% {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);} +} + +@-webkit-keyframes live { + 0% {opacity: 0.4;} + 15% {opacity: 1;} + 55% {opacity: 0.4;} + 100% {opacity: 0.4;} +} \ No newline at end of file -- cgit v1.2.3