Initial commit of the Homescreen appsubmit/tizen/20140307.001019submit/tizen/20140307.000212accepted/tizen/ivi/20140307.010814

Change-Id: If1057f57109faac93ab1d9b1c28e7a9da800146a

13 files changed, 519 insertions, 0 deletions

diff --git a/css/images/dashboard_selector.png b/css/images/dashboard_selector.png
new file mode 100644
index 0000000..57a75e5
--- /dev/null
+++ b/css/images/dashboard_selector.png
diff --git a/css/images/default_icon.png b/css/images/default_icon.png
new file mode 100644
index 0000000..1335774
--- /dev/null
+++ b/css/images/default_icon.png
diff --git a/css/images/icon_direction_left.png b/css/images/icon_direction_left.png
new file mode 100644
index 0000000..d35b355
--- /dev/null
+++ b/css/images/icon_direction_left.png
diff --git a/css/images/icon_facebook.png b/css/images/icon_facebook.png
new file mode 100644
index 0000000..bcd6322
--- /dev/null
+++ b/css/images/icon_facebook.png
diff --git a/css/images/icon_speedmeter.png b/css/images/icon_speedmeter.png
new file mode 100644
index 0000000..7aeb804
--- /dev/null
+++ b/css/images/icon_speedmeter.png
diff --git a/css/images/icon_twitter.png b/css/images/icon_twitter.png
new file mode 100644
index 0000000..62f6991
--- /dev/null
+++ b/css/images/icon_twitter.png
diff --git a/css/images/music_selector.png b/css/images/music_selector.png
new file mode 100644
index 0000000..7bdaccd
--- /dev/null
+++ b/css/images/music_selector.png
diff --git a/css/images/navigation_selector.png b/css/images/navigation_selector.png
new file mode 100644
index 0000000..3742f7e
--- /dev/null
+++ b/css/images/navigation_selector.png
diff --git a/css/images/phone_selector.png b/css/images/phone_selector.png
new file mode 100644
index 0000000..e21edac
--- /dev/null
+++ b/css/images/phone_selector.png
diff --git a/css/images/radio_selector.png b/css/images/radio_selector.png
new file mode 100644
index 0000000..ea24db2
--- /dev/null
+++ b/css/images/radio_selector.png
diff --git a/css/images/social_selector.png b/css/images/social_selector.png
new file mode 100644
index 0000000..a563eff
--- /dev/null
+++ b/css/images/social_selector.png
diff --git a/css/images/video_selector.png b/css/images/video_selector.png
new file mode 100644
index 0000000..9ef9900
--- /dev/null
+++ b/css/images/video_selector.png
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