diff --git a/src/_assets/css/_clock.scss b/src/_assets/css/_clock.scss
index bb3634a0c5..f3239e32de 100644
--- a/src/_assets/css/_clock.scss
+++ b/src/_assets/css/_clock.scss
@@ -1,214 +1,763 @@
.clock {
- $vertical-line-color: #384753;
-
- background-color: $flutter-dark-blue-texture;
+ $clock-color-dark: #212c34;
+ $clock-color-blue: #01579b;
+ $clock-color-light-blue: #aecbfa;
+ $clock-color-light-grey: #f8f9fa;
+ $clock-color-grey: #555;
+ $color-code-block: #252525;
+
+ color: $clock-color-grey;
font-family: $site-font-family-alt;
+ font-size: 18px;
+
+ // Background texture shared by all sections
+ &__texture {
+ height: 100%;
+ margin-left: calc(50% - 50vw);
+ position: absolute;
+ width: 100vw;
+ }
- .center {
- align-items: center;
- display: flex;
- flex-direction: column;
- height: calc(100vh - 66px);
- justify-content: center;
+ // Common styles for clock sections
+ &__section {
+ margin-left: calc(50% - 50vw);
+ margin-right: calc(50% - 50vw);
}
- .heading {
- animation: clock-slide-in 1s .3s;
- animation-fill-mode: both;
+ // Styles for section clock__hero
+ &__hero {
+ background-color: $clock-color-dark;
color: $site-color-white;
- font-size: 18px;
- margin: 0 0 24px;
+ padding-bottom: 104px;
+ position: relative;
text-align: center;
- width: 100%;
- @include media-breakpoint-up(md) {
+ .heading {
font-size: 32px;
- margin: 0 0 22px;
+ margin: 120px 27px 40px 27px;
}
- @include media-breakpoint-up(lg) {
- font-size: 40px;
- margin: 0 0 20px;
+ .youtube-link, .twitter-link {
+ color: $twitter-color;
+
+ i {
+ margin-right: 5px;
+ }
}
- }
- .time-number {
- animation: clock-slide-in 1s;
- animation-fill-mode: both;
- color: $site-color-primary;
- display: flex;
- font-size: 52px;
- justify-content: center;
- margin: 0;
- text-align: center;
- width: 100%;
- z-index: 2;
+ .twitter-link {
+ display: inline-block;
+ margin-bottom: 8px;
+ }
+
+ &__texture {
+ background-color: $clock-color-dark;
+ background-image: asset_url('clock/hero/hero-circle.svg'),
+ asset_url('clock/hero/hero-clock.svg'),
+ asset_url('clock/hero/hero-diamond.svg'),
+ asset_url('clock/hero/hero-dots.svg'),
+ asset_url('clock/hero/hero-oval.svg');
+ background-repeat: no-repeat;
+ background-position: top 61px right -220px, bottom -50px right -80px, bottom -50px left -200px, top -30px center,top 100px left -250px;
+ background-size: 320px, 280px, 270px, 90px, 310px;
+ }
+
+ @include media-breakpoint-up(sm) {
+ .heading {
+ font-size: 38px;
+ }
+ }
@include media-breakpoint-up(md) {
- font-size: 110px;
+ &__texture {
+ background-position: top 43px right -70%, bottom 20px right -20px, bottom -30% left 30px, top -40px center,top 30px left -60%;
+ background-size: 55%, 30%, 25%, 14%, 50%;
+ }
}
@include media-breakpoint-up(lg) {
- font-size: 160px;
+ .heading {
+ font-size: 72px;
+ margin: 120px auto 40px;
+ max-width: 642px;
+ }
+
+ &__texture {
+ background-position: top 43px right -20px, bottom 74px right -20px, bottom -30px left 200px, top -40px center,top 30px left -20px;
+ background-size: 35%, 25%, 18%, 11%, 30%;
+ }
}
@include media-breakpoint-up(xl) {
- font-size: 180px;
+ &__texture {
+ background-size: 30%, 22%, 15%, 8%, 25%;
+ }
}
- @include media-breakpoint-up(xxl) {
- font-size: 230px;
+ @media screen and (min-width: 1800px) {
+ &__texture {
+ background-size: 30%, 20%, 10%, 5%, 15%;
+ }
}
}
- .digits_container {
- display: inline-block;
- width: 68px;
+ // Styles for section clock__wtm (What to make)
+ &__wtm {
+ position: relative;
- @include media-breakpoint-up(md) {
- width: 142px;
+ &__texture {
+ background-color: $site-color-white;
+ background-image: asset_url('clock/wtm__background-bottom.svg'), asset_url('clock/wtm__background-top.svg');
+ background-position: right top 200px, left top 50px;
+ background-repeat: no-repeat;
+ background-size: 25%, 35%;
+ }
+
+ &_container {
+ margin: 80px 0;
+ }
+
+ @include media-breakpoint-up(sm) {
+ &__texture {
+ background-position: right top 450px, left top 50px;
+ background-size: 15%, 25%;
+ }
}
@include media-breakpoint-up(lg) {
- width: 200px;
+
+ &_container {
+ margin: 100px 0;
+ }
+
+ &__texture {
+ background-position: top 520px right, left top 100px;
+ background-size: initial;
+ }
}
+ }
- @include media-breakpoint-up(xl) {
- width: 248px;
+ // Styles for wtm copy
+ &__wtm-copy {
+ .subheading {
+ color: $clock-color-dark;
+ font-size: 24px;
+ margin: 40px 0 24px;
+ }
+
+ .paragraph {
+ font-size: 16px;
+ }
+
+ .paragraph-conditions {
+ font-family: $site-font-family-base;
+ font-size: 14px;
+ margin: 0;
}
- @include media-breakpoint-up(xxl) {
- width: 294px;
+ @include media-breakpoint-up(sm) {
+ .subheading {
+ font-size: 32px;
+ }
+ }
+
+ @include media-breakpoint-up(lg) {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-bottom: 0;
+
+ .subheading {
+ font-size: 56px;
+ margin: 0 0 24px;
+ }
+
+ .paragraph {
+ font-size: 20px;
+ }
}
}
- .animations {
- animation-name: clock-geometric-small-background;
- animation-duration: 1.2s;
- animation-fill-mode: both;
- animation-timing-function: cubic-bezier(.87, 1.15, 1, .99);
- background-image: asset_url('clock/left_rectangle.svg'), asset_url('clock/right_rectangle.svg'), asset_url('clock/oval.svg');
- background-repeat: no-repeat;
- background-size: 181px 247px, 140px 121px, 280px 163px;
- height: calc(100% - 66px);
- overflow: hidden;
- position: absolute;
- top: 66px;
- width: 100%;
- z-index: -1;
+ // Styles for wtm entries
+ &__wtm-entries {
+ margin-top: 80px;
- @include media-breakpoint-up(md) {
- animation-name: clock-geometric-medium-background;
- background-size: 400px 556px, 317px 258px, auto;
+ &_container {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ margin-bottom: 64px;
+ }
+
+ .heading {
+ color: $clock-color-dark;
+ font-size: 20px;
+ line-height: 32px;
+ margin: 0 auto 40px;
+ max-width: 630px;
+ text-align: center;
+ }
+
+ .card {
+ background-color: #F8F9FA;
+ border: none;
+ border-radius: 8px;
+ height: 40vw;
+ margin-bottom: 16px;
+ width: 48%;
+
+ &:nth-of-type(4), &:nth-of-type(3) {
+ margin-bottom: 0;
+ }
+ }
+
+ .entries__card-body {
+ position: relative;
+ padding: 24px 16px;
+
+ .paragraph {
+ font-size: 16px;
+ line-height: 20px;
+ text-align: left;
+ }
+
+ .fas {
+ bottom: 16px;
+ left: 16px;
+ position: absolute;
+ width: 34px;
+ }
+ }
+
+ @include media-breakpoint-up(sm) {
+ .heading {
+ font-size: 24px;
+ }
+
+ .card {
+ height: 135px;
+ width: 22%;
+ }
+
+ .entries__card-body {
+ .fas {
+ width: 41px;
+ }
+ }
}
@include media-breakpoint-up(lg) {
- background-size: auto;
+ margin-top: 72px;
+
+ &_container {
+ flex-wrap: initial;
+ margin-bottom: 80px;
+ justify-content: center;
+ }
+
+ .heading {
+ font-size: 32px;
+ line-height: 40px;
+ margin: 0 auto 88px;
+ }
+
+ .card {
+ height: 190px;
+ margin-bottom: 0;
+ width: 190px;
+ margin-right: 28px;
+
+ &:last-of-type {
+ margin-right: 0;
+ }
+ }
+
+ .entries__card-body {
+ padding: 24px;
+
+ .paragraph {
+ font-size: 20px;
+ margin-bottom: 50px;
+ }
+
+ .fas {
+ bottom: 24px;
+ left: 24px;
+ position: absolute;
+ width: 48px;
+ }
+ }
}
}
- .vertical-line {
- animation-duration: 1s;
- animation-fill-mode: both;
- animation-name: clock-vertical-lines;
- animation-timing-function: ease;
- background-color: $vertical-line-color;
- position: fixed;
- top: 0;
- width: 1px;
- z-index: -1;
+ &__wtm-logos {
- &--first {
- left: 4%;
+ .logos-heading {
+ font-size: 16px;
+ margin-bottom: 24px;
}
- &--second {
- animation-delay: .2s;
- left: 27%;
+ .logos-container {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ height: 250px;
+ justify-content: space-around;
}
- &--thrid {
- animation-delay: .4s;
- left: 50%;
+ .wtm-logo {
+ max-height: 35px;
}
- &--fourth {
- animation-delay: .6s;
- left: 73%;
+ @include media-breakpoint-up(sm) {
+
+ .logos-container {
+ flex-direction: row;
+ height: auto;
+ justify-content: space-evenly;
+ }
+
+ .wtm-logo {
+ max-width: 30%;
+
+ &:first-of-type {
+ max-height: 30px;
+ }
+
+ &:last-of-type {
+ max-height: 20px;
+ }
+ }
}
- &--first, &--thrid {
- display: none;
+ @include media-breakpoint-up(lg) {
+
+ .logos-heading {
+ font-size: 20px;
+ margin-bottom: 40px;
+ }
+
+ .wtm-logo {
+ max-height: initial;
- @include media-breakpoint-up(lg) {
- display: block;
+ &:first-of-type {
+ max-height: 40px;
+ }
+
+ &:last-of-type {
+ max-height: initial;
+ }
}
}
}
- .share-twitter__paragraph {
- animation: clock-slide-in 1s .6s;
- animation-fill-mode: both;
+ // Styles for section clock__prizes
+ &__prizes {
+ background-color: $clock-color-blue;
color: $site-color-white;
- font-size: 14px;
- margin: 20px 0 0;
- padding: 0 37px;
- text-align: center;
- width: 100%;
+ font-family: $site-font-family-base;
+ position: relative;
- @include media-breakpoint-up(md) {
+ ul {
+ padding: 0;
+ margin: 0;
+ }
+
+ li {
+ list-style: none;
+ }
+
+ hr {
+ background-color: $clock-color-light-blue;
+ margin: 40px 0;
+ width: 100%;
+ }
+
+ &_container {
+ margin: 80px 0;
+ }
+
+ &_image {
+ margin-bottom: 40px;
+ }
+
+ &__texture {
+ background-color: $clock-color-blue;
+ background-image: asset_url('clock/prizes__background.svg');
+ background-position: right 50px top 150px;
+ background-repeat: no-repeat;
+ }
+
+ .prizes-text {
+ display: inline-block;
font-size: 16px;
- margin: 22px 0 0;
+ margin-bottom: 16px;
}
- @include media-breakpoint-up(lg) {
+ .subheading {
font-size: 20px;
- margin: 24px 0 0;
+ margin: 8px 0;
+ }
+
+ .paragraph {
+ font-size: 14px;
+ margin-bottom: 24px;
+ }
+
+ .info-paragraph {
+ font-size: 14px;
+ margin-bottom: 0;
+ }
+
+ &__texture {
+ background-color: $clock-color-blue;
+ background-image: asset_url('clock/prizes__background.svg');
+ background-position: right 20px top 25px;
+ background-repeat: no-repeat;
+ background-size: 90%, 100%;
+ }
+
+ .prize-link {
+ color: $site-color-white;
+ text-decoration: underline;
+ }
+
+ @include media-breakpoint-up(sm) {
+ &_container {
+ margin: 160px 0 80px;
+ }
+
+ .prizes-text {
+ font-size: 20px;
+ }
+
+ .subheading {
+ font-size: 24px;
+ }
+ }
+
+ @include media-breakpoint-up(lg) {
+
+ &_container {
+ margin: 160px 0;
+ }
+
+ &_image {
+ padding-top: 126px;
+ }
+
+ &__texture {
+ background-position: right 50px top 150px;
+ background-size: inherit;
+ }
+
+ .prizes-text {
+ font-size: 20px;
+ }
+
+ .subheading {
+ font-size: 40px;
+ margin: 24px 0;
+ }
+
+ .paragraph {
+ font-size: 20px;
+ margin-bottom: inherit;
+ }
+
+ .info-paragraph {
+ font-size: 18px;
+ }
+
+ hr {
+ margin: 56px 0;
+ }
}
}
- .learn-more__button {
- display: block;
- margin: 0 auto;
- width: 120px;
+ // Styles for section clock__getting (Getting Started)
+ &__getting {
+ ol {
+ padding-left: 16px;
+ }
+
+ li {
+ font-size: 16px;
+ font-weight: 500;
+ padding: 16px 0;
+ word-break: break-word;
+ }
+
+ &_container {
+ margin: 80px 0;
+ }
+
+ .subheading {
+ color: $clock-color-dark;
+ font-size: 24px;
+ margin: 0 0 16px 0;
+ }
+
+ .paragraph {
+ font-family: $site-font-family-base;
+ font-size: 14px;
+ margin-bottom: 24px;
+ }
+
+ .sub-item {
+ font-family: $site-font-family-base;
+ font-size: 14px;
+ font-weight: normal;
+ padding: 8px 0;
+
+ .sub-item {
+ list-style-type: circle;
+ }
+ }
+
+ .sub-item:last-child {
+ padding-bottom: 0;
+ }
+
+ @include media-breakpoint-up(sm) {
+ .subheading {
+ font-size: 32px;
+ }
+
+ .sub-item {
+ font-size: 16px;
+ }
+ }
+
+ @include media-breakpoint-up(lg) {
+
+ .subheading {
+ font-size: 56px;
+ }
+
+ .paragraph {
+ font-size: 18px;
+ }
+
+ li {
+ font-size: 20px;
+ }
+
+ .sub-item {
+ font-size: 18px;
+ }
+ }
}
-}
-// animations
-@keyframes clock-vertical-lines {
- from {
- height: 0;
+ // Styles for section clock__submit
+ &__submit {
+ background-color: $clock-color-light-grey;
+ color: $clock-color-dark;
+ margin: 0 calc(50% - 50vw) 80px calc(50% - 50vw);
+ padding-left: 0;
+ padding-right: 0;
+ text-align: center;
+
+ &_container {
+ padding: 80px 16px;
+ }
+
+ .subheading {
+ font-size: 24px;
+ margin: 0 auto 32px;
+ text-align: center;
+ }
+
+ .submit-app__button {
+ font-size: 14px;
+ padding: 16px 24px;
+ }
+
+ @include media-breakpoint-up(sm) {
+ .subheading {
+ font-size: 32px;
+ }
+ }
+
+ @include media-breakpoint-up(lg) {
+ margin: 0 0 80px 0;
+
+ &_container {
+ padding: 80px;
+ }
+
+ .subheading {
+ font-size: 48px;
+ max-width: 626px;
+ }
+
+ .submit-app__button {
+ font-size: 18px;
+ }
+ }
}
- to {
- height: 100%;
+
+ // Style for submissions
+ &__submissions, &__contest {
+ font-family: $site-font-family-base;
+
+ ul {
+ padding-left: 18px;
+ }
+
+ li {
+ font-size: 14px;
+ padding: 8px 0;
+ }
+
+ hr {
+ margin: 40px 0 0;
+ }
+
+ .subheading {
+ font-size: 20px;
+ margin: 0 0 16px;
+ }
+
+ .paragraph {
+ font-size: 14px;
+ margin-bottom: 40px;
+ }
+
+ .title {
+ font-family: $site-font-family-base;
+ font-size: 14px;
+ font-weight: 600;
+ margin: 40px 0 16px;
+ }
+
+ .code-font {
+ color: $color-code-block;
+ font-family: $site-font-family-courier;
+ }
+
+ @include media-breakpoint-up(sm) {
+ .subheading {
+ font-size: 24px;
+ }
+ }
+
+ @include media-breakpoint-up(lg) {
+ li {
+ font-size: 18px;
+ }
+
+ .subheading {
+ font-size: 32px;
+ }
+
+ .paragraph {
+ font-size: 18px;
+ }
+
+ .title {
+ font-size: 18px;
+ margin: 0;
+ }
+ }
}
-}
-@keyframes clock-slide-in {
- from {
- transform: translateY(50px);
- opacity: 0;
+ // Style for contest
+ &__contest {
+ padding-top: 48px;
}
- to {
- transform: none;
- opacity: 1;
+
+ // Styles for section clock__faqs
+ &__faqs {
+ margin-top: 80px;
+ position: relative;
+
+ &__texture {
+ background-color: $clock-color-light-grey;
+ }
+
+ &_container {
+ padding: 80px 0;
+
+ .faqs_button {
+ align-items: center;
+ color: $clock-color-grey;
+ display: flex;
+ font-size: 20px;
+ justify-content: space-between;
+ padding: 0;
+ text-align: left;
+ user-select: text;
+ width: 100%;
+ }
+
+ .faqs_card {
+ &:last-of-type {
+ .card-header {
+ border-bottom: 1px solid rgba(85, 85, 85, 0.2);
+ }
+ }
+ }
+
+ .faqs_card-header {
+ background-color: transparent;
+ border-bottom: 0;
+ border-top: 1px solid rgba(85, 85, 85, 0.2);
+ border-radius: 0;
+ padding: 17px 0;
+ }
+ }
+
+ .subheading {
+ color: $clock-color-dark;
+ font-size: 24px;
+ margin: 0 0 40px;
+ }
+
+ .faq__card-body {
+ font-family: $site-font-family-base;
+ font-size: 14px;
+ padding: 0 24px 24px 0;
+ }
+
+ @include media-breakpoint-up(sm) {
+ .subheading {
+ font-size: 32px;
+ }
+ }
+
+ @include media-breakpoint-up(lg) {
+ margin-top: 100px;
+
+ .subheading {
+ font-size: 56px;
+ }
+
+ .faq__card-body {
+ font-size: 18px;
+ }
+ }
}
-}
-@keyframes clock-geometric-medium-background {
- from {
- background-position: top 150px left -270px, top right -488px, bottom -348px left -140px;
+ //dropdown button
+ .dropdown__button {
+ box-shadow: none;
+ outline: none;
}
- to {
- background-position: top 150px left, top right, bottom left;
+
+ .code-font {
+ color: $color-code-block;
+ font-family: $site-font-family-courier;
}
-}
-@keyframes clock-geometric-small-background {
- from {
- background-position: bottom 90px left -144px, top right -140px, bottom -164px left -100px;
+ .dropdown__button[aria-expanded="true"] {
+ i {
+ transform: rotate(180deg);
+ }
}
- to {
- background-position: bottom 90px left, top right, bottom left;
+
+ .no-list-style {
+ list-style: none;
+ margin-left: -16px;
}
}
diff --git a/src/_assets/css/_variables.scss b/src/_assets/css/_variables.scss
index 0e87a60c20..43db0d078b 100644
--- a/src/_assets/css/_variables.scss
+++ b/src/_assets/css/_variables.scss
@@ -14,12 +14,14 @@ $site-color-body: #4A4A4A;
$site-color-body-light: rgba(74/255, 74/255, 74/255, .8);
$site-color-footer: #303c42;
$site-color-primary: $flutter-color-blue-500;
+$twitter-color: #60CAF6;
// Fonts
$site-font-family-base: 'Roboto', sans-serif;
$site-font-family-alt: 'Google Sans', 'Roboto', sans-serif;
$site-font-family-icon: 'Material Icons';
$site-font-family-monospace: 'Roboto Mono', monospace;
+$site-font-family-courier: 'Courier', monospace;
$site-font-icon: 24px/1 $site-font-family-icon;
// Layout
diff --git a/src/_assets/image/clock/Flutter-logo.svg b/src/_assets/image/clock/Flutter-logo.svg
new file mode 100644
index 0000000000..16b21690ea
--- /dev/null
+++ b/src/_assets/image/clock/Flutter-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/_assets/image/clock/G-Assistant-logo.svg b/src/_assets/image/clock/G-Assistant-logo.svg
new file mode 100644
index 0000000000..7694695231
--- /dev/null
+++ b/src/_assets/image/clock/G-Assistant-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/_assets/image/clock/Lenovo-WTM.png b/src/_assets/image/clock/Lenovo-WTM.png
new file mode 100644
index 0000000000..f61dc170fa
Binary files /dev/null and b/src/_assets/image/clock/Lenovo-WTM.png differ
diff --git a/src/_assets/image/clock/Lenovo-logo.svg b/src/_assets/image/clock/Lenovo-logo.svg
new file mode 100644
index 0000000000..f7a4c78211
--- /dev/null
+++ b/src/_assets/image/clock/Lenovo-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/_assets/image/clock/card-beauty.png b/src/_assets/image/clock/card-beauty.png
new file mode 100755
index 0000000000..67880f3abc
Binary files /dev/null and b/src/_assets/image/clock/card-beauty.png differ
diff --git a/src/_assets/image/clock/card-code-quality.png b/src/_assets/image/clock/card-code-quality.png
new file mode 100755
index 0000000000..edf1033cf6
Binary files /dev/null and b/src/_assets/image/clock/card-code-quality.png differ
diff --git a/src/_assets/image/clock/card-execution.png b/src/_assets/image/clock/card-execution.png
new file mode 100755
index 0000000000..e44f51b47f
Binary files /dev/null and b/src/_assets/image/clock/card-execution.png differ
diff --git a/src/_assets/image/clock/card-novelty.png b/src/_assets/image/clock/card-novelty.png
new file mode 100755
index 0000000000..8234125895
Binary files /dev/null and b/src/_assets/image/clock/card-novelty.png differ
diff --git a/src/_assets/image/clock/hero/hero-circle.svg b/src/_assets/image/clock/hero/hero-circle.svg
new file mode 100644
index 0000000000..af1476254b
--- /dev/null
+++ b/src/_assets/image/clock/hero/hero-circle.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/_assets/image/clock/hero/hero-clock.svg b/src/_assets/image/clock/hero/hero-clock.svg
new file mode 100644
index 0000000000..3f2b6bfb71
--- /dev/null
+++ b/src/_assets/image/clock/hero/hero-clock.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/_assets/image/clock/hero/hero-diamond.svg b/src/_assets/image/clock/hero/hero-diamond.svg
new file mode 100644
index 0000000000..3c428dbe6f
--- /dev/null
+++ b/src/_assets/image/clock/hero/hero-diamond.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/_assets/image/clock/hero/hero-dots.svg b/src/_assets/image/clock/hero/hero-dots.svg
new file mode 100644
index 0000000000..f33192e1fe
--- /dev/null
+++ b/src/_assets/image/clock/hero/hero-dots.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/_assets/image/clock/hero/hero-oval.svg b/src/_assets/image/clock/hero/hero-oval.svg
new file mode 100644
index 0000000000..13ae243f2c
--- /dev/null
+++ b/src/_assets/image/clock/hero/hero-oval.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/_assets/image/clock/iMac.png b/src/_assets/image/clock/iMac.png
new file mode 100644
index 0000000000..ad5f9558c0
Binary files /dev/null and b/src/_assets/image/clock/iMac.png differ
diff --git a/src/_assets/image/clock/prizes__background.svg b/src/_assets/image/clock/prizes__background.svg
new file mode 100644
index 0000000000..4a368de2f6
--- /dev/null
+++ b/src/_assets/image/clock/prizes__background.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/_assets/image/clock/wtm__background-bottom.svg b/src/_assets/image/clock/wtm__background-bottom.svg
new file mode 100644
index 0000000000..86aa9e62e6
--- /dev/null
+++ b/src/_assets/image/clock/wtm__background-bottom.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/_assets/image/clock/wtm__background-top.svg b/src/_assets/image/clock/wtm__background-top.svg
new file mode 100644
index 0000000000..cb5189b85d
--- /dev/null
+++ b/src/_assets/image/clock/wtm__background-top.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/_data/clock/contest_rules.yml b/src/_data/clock/contest_rules.yml
new file mode 100644
index 0000000000..32bdd18beb
--- /dev/null
+++ b/src/_data/clock/contest_rules.yml
@@ -0,0 +1,49 @@
+- title: >
+ All work must be that of the contest entrant.
+- title: >
+ Only one submission per entrant. If you submit multiple, we will review only the most recent.
+- title: >
+ Do not submit a clock that already existed before the announcement of this contest.
+- title: >
+ Clocks may not be submitted by any person who is a minor at the time of entry.
+- title: >
+ Alphabet or Google employees and contractors, Lenovo employees and contractors, contest judges, and members of their
+ immediate families are not eligible to enter.
+- title: >
+ Persons from the following countries or regions can submit entries but will not be considered eligible for the
+ contest due to local rules and restrictions, including exclusion from judging and prizes: Italy, Brazil, Quebec,
+ and Mexico.
+- title: >
+ Persons from the following embargoed countries or regions should not submit entries and will not be considered
+ eligible for the contest, including exclusion from judging and prizes: Crimea, Cuba, Iran, Syria, North Korea,
+ and Sudan.
+- title: >
+ Entries will be collected via the website using an online
+ Google form.
+- title: >
+ Submissions must not be derogatory, offensive, threatening, defamatory, disparaging, libellous or contain any
+ content that is inappropriate, indecent, sexual, profane, torturous, slanderous, discriminatory in any way, or that
+ promotes hatred or harm against any group or person, or otherwise does not comply with the theme and spirit of the
+ contest.
+- title: >
+ Submissions must not contain content, material, or any element that is unlawful, or otherwise in violation of or
+ contrary to all applicable federal, state, or local laws and regulations including the laws or regulations in any
+ state where the clock and supporting statement are created.
+- title: >
+ Submissions must not contain any content, material, or element that displays any third party advertising, slogan,
+ logo, trademark, representation of characters indicating a sponsorship or endorsement by a third party, commercial
+ entity, or that are not within the spirit of the Contest, as determined by the Sponsor, in its sole discretion.
+- title: >
+ Submissions must be original, unpublished works that do not contain, incorporate, or otherwise use any content,
+ material, or element that is owned by a third party or entity.
+- title: >
+ Submissions cannot contain any content, element, or material that violates a third party's publicity, privacy, or
+ intellectual property rights.
+- title: >
+ The submission must not be the subject of any actual or threatened litigation or claim.
+- title: >
+ The entrant does not include any disparaging remarks relating to the Sponsor or a third party.
+
+
+
+
diff --git a/src/_data/clock/entries.yml b/src/_data/clock/entries.yml
new file mode 100644
index 0000000000..16d50da093
--- /dev/null
+++ b/src/_data/clock/entries.yml
@@ -0,0 +1,12 @@
+- title: 'Visual
beauty'
+ logo: 'clock/card-beauty.png'
+
+- title: 'Novelty of
idea'
+ logo: 'clock/card-novelty.png'
+
+- title: 'Code
quality'
+ logo: 'clock/card-code-quality.png'
+
+- title: Overall execution
+ logo: 'clock/card-execution.png'
+
diff --git a/src/_data/clock/faqs.yml b/src/_data/clock/faqs.yml
new file mode 100644
index 0000000000..9be562a054
--- /dev/null
+++ b/src/_data/clock/faqs.yml
@@ -0,0 +1,182 @@
+- title: What is Flutter Clock?
+ content: >
+ Flutter Clock is a skills-based contest offered by Google, including participation by the Flutter, Google
+ Assistant, and Lenovo teams. Flutter Clock challenges you to use Flutter to build a beautiful and innovative clock
+ face application.
+
+- title: What is the judging criteria?
+ content: >
+ Each entry will be rated against the following rubric: Visual beauty, Novelty of idea, Code quality, and Overall
+ execution (including accessibility).
+
+- title: Who are the judges?
+ content: >
+ Entries will be judged by employees of Google and/or individuals from the Flutter open source community that are
+ experienced developers and designers.
+
+- title: What are the deadlines for the contest?
+ content: >
+ You need to have your clock submitted via the Google form by January 20th, 11:59pm PST (GMT - 8), and published
+ publicly on Github by February 5th, 11:59pm PST (GMT - 8).
+
+- title: I submitted my clock. Can I make changes to it?
+ content: >
+ Yes, as long as your changes occur before January 20th, 11:59pm PST (GMT - 8).
+
+- title: When will the winners be selected?
+ content: >
+ Winners will be selected around February 10th and announced around February 25th.
+
+- title: What are the prizes?
+ content: >
+ 1 Grand prize winner receives:
+
A loaded Apple iMac Pro valued at ~$10,000 USD (detailed specifications may vary based on availability and + applicable law in the potential winner’s country of residence).
+ 4 Winners each receive: +A Lenovo 10" Smart Display with the Google Assistant valued at ~$249.00 USD (based on availability and applicable + law in the potential winner’s country of residence).
+ Up to 25 Winners each receive: +A Lenovo Smart Clock with the Google Assistant valued at ~$79.00 USD (based on availability and applicable law + in the potential winner’s country of residence).
+In addition, all participants who submit complete and valid entries will receive a digital certificate of + completion when their code repository is made public by February 5th, 2020. Also, some submissions may be integrated + into the Lenovo Smart Clock's lineup of clock faces, or may be used as inspiration for future clock faces.
+ +- title: What do I submit? + content: > + See the submission instructions in the ‘Getting Started’ section, and the + + Official Rules for more details. + +- title: Can I submit more than one entry? + content: > + We limit entries to one per participant. We encourage you to submit your best entry! In the event of multiple + submissions from a single participant, we'll only judge the most recent. + +- title: I've already built a clock face; can I submit that for the challenge? + content: > + Unfortunately, no. Only new clock faces built after November 18th, 2019 can be submitted for consideration. + +- title: Can I make fresh updates to an existing clock face built in the past, and submit that? + content: > + No, you must submit a new clock face started for this contest to qualify. + +- title: Does the clock have to show the time? + content: > + The viewer should be able to tell the time. Whether that be with digits, clock hands, a sundial shadow, or colors + flashing in Morse code, there should be some way for a user to reliably determine the time. (It’s OK if telling the + time requires some thinking.) +- title: Do I need to add any extra functionality like alarms or stopwatches? + content: > + No, this will not be considered by the judges when determining winners. +- title: Does the clock have to use data retrieved from ClockModel? + content: > + No. We provide the ClockModel mockable API for system-level information on the Lenovo Smart Clock. This API is + available to you in your clock face, but using it is not required. + +- title: Must my clock have both a dark and light mode? Should I animate the transition between dark and light mode? + content: > + No, to both questions. The Lenovo Smart Clock has a feature that animates a clock between dark and light mode based + on the room's brightness. You can use it to determine a dark and light theme, but it's not required. You can also + animate between themes using, for example, an AnimatedBuilder or ValueListenableBuilder, but it's also not required. + +- title: Does the clock have to show other information, such as weather and date? + content: > + No. We provide the ClockModel, a mockable API including weather information on the Lenovo Smart Clock. You don't + have to display or use any of this information. + +- title: How do I change the clock settings (e.g. weather, location, 24 hr time format)? + content: > + Tap the sample clock face to show/hide the settings cog in the top right corner, and then tap on the settings cog. + +- title: What language(s) should the clock use? + content: > + Any. If you have words in your clock, consider + internationalizing + them. Note that written parts of your submission must be in English to be eligible for judging, and your submission must, at a minimum, support English language + evaluation. However, we will not judge your clock face for language inclusion. Please ensure that your clock face’s + text does not include profanity in any language, and is built and submitted in accordance with the + + Official Rules. + +- title: What accessibility requirements should I add? + content: > + Google values accessibility, and it will be a consideration in your submission as part of the “overall execution” + criteria. Check the + Flutter accessibility page for details. + +- title: > + Will the judgement of my clock have the same UX considerations as for the Lenovo Smart Clock? For example: Should I + consider how the clock looks in a bedroom setting, or in a dimly lit room? Must I consider use cases such as the + user waking up in the middle of the night, or viewing the clock from across the room? + content: > + No. See the judging criteria in the + + Official Rules for more details. + +- title: What tips do you have to check the performance of my clock? + content: > + Take a look at Flutter performance profiling, + and enable the performance + overlay feature in the + Flutter + Inspector to see whether frames are being drawn redundantly. + +- title: Is there an age limit to participate? + content: > + You must not be a minor (per your country of residence) to be eligible for the contest. + +- title: Can I use Flare animations? + content: > + Yes, you can use Flare animations in your submission. + +- title: > + Can I store data in a separate file? For example, can I store a list of ways to say 'Good Morning' in a JSON file? + content: > + Yes. Make sure to include such files as assets in your submission. + +- title: Do contest submissions have to be formatted by the Dart formatter? + content: > + Yes. This ensures more consistent and readable code. + You can do this from your IDE or at the command + line. + +- title: Speaking of code formatting, what are some good coding practices for Flutter? + content: > + Check out Effective Dart. + (Note that the Flutter codebase has its own formatting guidelines and doesn't adhere to Effective Dart.) + +- title: Can a team of people submit a single clock? + content: > + A team of people can work on a single clock, but the person submitting the clock through our form should be + authorized to submit the clock (including all code and assets) on behalf of every person in the entire team, and + each winning clock is only eligible for 1 prize. + +- title: Do assets (art, fonts) also have to be created by participants? + content: > + All assets must comply with our + + Official Rules for submissions, and participants must either create or have permission to use (e.g. via a license) and + submit all parts of their submission. + +- title: My clock looks or behaves differently on web! What do I do? + content: > + We will not be judging your clock on web. Web is currently in technical preview and is missing some features, but is + a great way to share your app with others. + +- title: If I have more questions, where should I go? + content: > + Take a look through our + + Official Rules and, if you still have questions, please + file a Flutter Clock GitHub issue. + +- title: How can I share my clock face online? + content: > + We’re glad you asked! Flutter’s web support is in technical preview and you can use to share your clock face online. + Once you enable web support, test your app by selecting + Chrome as the target device in your IDE, or at the command line with flutter run -d chrome. Build a web + version of your app for deployment using flutter build web. Then, you can host it using + GitHub Pages, Firebase, + or any other web hosting solution. If you share a link to your app on social media, be sure to include the + #FlutterClock hashtag! diff --git a/src/_data/clock/getting_started_items.yml b/src/_data/clock/getting_started_items.yml new file mode 100644 index 0000000000..288495875e --- /dev/null +++ b/src/_data/clock/getting_started_items.yml @@ -0,0 +1,73 @@ +- title: > + Download the Flutter Clock GitHub repo using + git clone. + +- title: > + Choose a sample clock and enter that folder using: + cd <path-to-repo>/flutter_clock/<name>_clock + subItems: + - text: > + Sample clock 1: + Basic analog clock. + - text: > + Sample clock 2: + Basic digital clock. + +- title: > + Run the clock app in your IDE, or by using flutter run at the command line. + +- title: > + Build your clock inside a folder called <name>_clock. + noListItemStyle: true + subItems: + - text: > + You can build upon the existing code (analog_clock or + digital_clock), or you can start from scratch (flutter create <name>_clock). + If you are new to Flutter, check out the + Write your first Flutter app codelab. + +- title: > + Prepare your clock for submission: + subItems: + - text: > + Format the Dart code. + - text: > + Verify that your clock builds and runs on + + the latest Flutter stable channel. + - text: > + In your <name>_clock directory, reduce the clock’s size: + subItems: + - text: > + Delete the <name>_clock/ios, + <name>_clock/android, and + <name>_clock/web (if present) folders. + - text: > + Run flutter clean. + - text: > + In your <path-to-repo>/flutter_clock folder, zip these two folders: + subItems: + - text: > + flutter_clock_helper (unedited) + - text: > + <name>_clock (your clock) + +- title: > + Verify that your <project>.zip file works, using the following steps: + noListItemStyle: true + subItems: + - text: > + flutter channel stable + - text: > + flutter upgrade + - text: > + unzip <project>.zip + - text: > + cd <name>_clock + - text: > + flutter create . + - text: > + flutter run (on Android or iOS in landscape) +- title: > + + Submit your clock. diff --git a/src/_data/clock/prizes.yml b/src/_data/clock/prizes.yml new file mode 100644 index 0000000000..fb972a3d4e --- /dev/null +++ b/src/_data/clock/prizes.yml @@ -0,0 +1,23 @@ +- title: > + Grand prize: + paragraph: > + A loaded Apple iMac Pro + valued at ~$10,000 USD (detailed specifications may vary based on availability and applicable law in the potential + winner’s country of residence) + +- title: > + 4 winners: + paragraph: > + A Lenovo 10" Smart Display + with the Google Assistant valued at ~$249.00 USD (based on availability and applicable law in the potential winner’s + country of residence) + +- title: > + Up to 25 winners: + paragraph: > + A Lenovo Smart Clock with the Google + Assistant valued at ~$79.00 USD (based on availability and applicable law in the potential winner’s country of + residence) + + + diff --git a/src/_data/clock/submission_requirements.yml b/src/_data/clock/submission_requirements.yml new file mode 100644 index 0000000000..ded76864c1 --- /dev/null +++ b/src/_data/clock/submission_requirements.yml @@ -0,0 +1,44 @@ +- title: > + Design and data notes: + subItems: + - text: > + The ClockModel API with mock data is provided to you. Using this API is optional, + but it provides system information such as the brightness mode, weather, and time format. + - text: > + The clock design should use landscape mode, with a 5:3 aspect ratio. + - text: > + You may use Material Design icons. + - text: > + All other assets, fonts, icons, images, and so on should be your own, or licensed under a + BSD-3, or + OFL license (for fonts). + - text: > + Your clock should not: + subItems: + - text: > + Have user interaction (such as tapping, gestures, dragging, mouse, keyboard, and so on). + - text: > + Play audio, including an alarm. + - text: > + Make network requests. + - text: > + Collect data in violation of applicable laws (including privacy laws). + - text: > + Contain copyrighted or trademarked content. + +- title: > + Submissions: + subItems: + - text: > + + Submit your final clock by January 20th, 11:59pm PST (GMT-8). + - text: > + Your clock must be made public on GitHub under a + BSD-3 license (with assets under a BSD-3 or + OFL license, as appropriate) before February 5th, 2020. + Your repo can be private during the contest period. + - text: > + Specify on the submission form which platform (Android or iOS) you would like the judges to use when evaluating + your submission. Judges will not be testing on web. + - text: > + Please also submit a video (of less than 30 seconds) of your clock and a screenshot via the form. diff --git a/src/_data/clock_cards.yml b/src/_data/clock_cards.yml new file mode 100644 index 0000000000..98df5e65f2 --- /dev/null +++ b/src/_data/clock_cards.yml @@ -0,0 +1,21 @@ +- title: Git clone this repo + redirect: '#' + +- title: How do you want to build your clock? + links: + + - text: 'Sample clock 1: Basic analog clock' + link: '#' + + - text: 'Sample clock 2: Decorative clock' + link: '#' + + - text: 'Create your own clock package' + link: '#' + +- title: Run your clock package using this clock customizer app + redirect: '#' + +- title: Run your clock using the clock customizer app + redirect: '#' + \ No newline at end of file diff --git a/src/_data/faqs.yml b/src/_data/faqs.yml new file mode 100644 index 0000000000..fedbfae410 --- /dev/null +++ b/src/_data/faqs.yml @@ -0,0 +1,35 @@ +- title: What is Flutter Clock? + content: Flutter Clock is a contest where new and experienced developers can submit a project built using Flutter. It’s a fun way to learn Flutter, try building out interfaces, and possibly win prizes. + +- title: What is the judging criteria? + content: 'Each entry will be rated against the following rubric: visual beauty, code quality, novelty of idea, and overall execution.' + +- title: Who are the judges? + content: Entries will be judged by members of the Flutter team and experienced developers from the Flutter community. + +- title: What are the deadlines for the project? + content: You need to have your project submitted by April 7th at 11:59pm PST. + +- title: I submitted my project, can I make changes to it? + content: Yes, as long as your change occurs before April 7th at 11:59pm PST. + +- title: How will the winners be selected? + content: 'Judges will evaluate based on four criteria: visual beauty, code quality, novelty of idea, and overall execution.' + +- title: When will winners be selected? + content: Winners will be selected around April 25 and announced at Google I/O. + +- title: What are the prizes? + content: 1 grand prize winner will get an iMac Pro 5K+ + Share #FlutterClock with friends + +
++ + Watch video + +
++ Build a beautiful clock face UI with Flutter for the Lenovo Smart Clock for a chance to win an iMac Pro, + Lenovo Smart Display, or Lenovo Smart Clock. +
++ All projects must be submitted by January 20, 2020, 11:59PM PST (GMT-8). +
+{{entry.title}}
+ {% asset {{entry.logo}} class="fas" %} ++ Flutter Clock contest is brought to you in partnership with Google Assistant and Lenovo. +
+{{prize.paragraph}}
++ All complete and valid submissions will receive a digital certificate of completion. Some of the clock + contest submissions might be integrated into the Lenovo Smart Clock's lineup of clock faces, or used as + inspiration for future clock faces! +
++ Use the following instructions to get started. Also, make sure to familiarize yourself with the submission requirements and contest rules. +
++ Here are the requirements, including some guidelines, for contest submissions. See the contest’s + + Official Rules for full details. +
+ + {% for item in site.data.clock.submission_requirements %} ++ Full details and rules are provided in our + + Official Rules. Here’s a summary of some of the key points: +
+