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
4 additional winners will get a Google Home Max
Up to 25 others will win a Google Home Mini + +- title: Can I submit more than one project? + content: No, we limit one project per participant. + +- title: I already have an approved app, can I submit that for the challenge? + content: Unfortunately, no. Only new apps or UI’s can be submitted for approval + +- title: Is there an age limit to participate? + content: You must not be a minor (per your local law) to be eligible to win. + +- title: If I have more questions, where should I go? + content: Take a look through our official rules. You can also send us an email to flutter-create@google.com. \ No newline at end of file diff --git a/src/clock/index.html b/src/clock/index.html index 71c6573b8f..83786a7370 100644 --- a/src/clock/index.html +++ b/src/clock/index.html @@ -1,31 +1,250 @@ --- title: Clock -layout: base +layout: landing show_banner: False -show_footer: False body_class: clock --- +{% assign url_links = "&url=https://flutter.dev/clock" %} +{% assign hashtags = "hashtags=FlutterClock" %} +{% assign twitter_url = "https://twitter.com/intent/tweet?" | append: hashtags | append: url_links %} +{% assign window_options = "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600" %} -
-

Timing is everything. Stay tuned.

-
- 00 - : - 00 - : - 00 - : - 00 -
- -
-
-
-
-
-
-
+
+
+
+
+

Take the Flutter Clock challenge

+

+ +

+

+ + Watch video + +

+
+
+
+ +
+
+
+
+ {% asset clock/Lenovo-WTM.png alt='Lenovo Clock' class="card-img-top" %} +
+
+

+ Create a beautiful clock face UI +

+

+ 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). +

+
+
+

Entries will be judged by a panel of Google experts against the following criteria:

+
+ {% for entry in site.data.clock.entries %} +
+
+

{{entry.title}}

+ {% asset {{entry.logo}} class="fas" %} +
+
+ {% endfor %} +
+
+
+

+ Flutter Clock contest is brought to you in partnership with Google Assistant and Lenovo. +

+
+ {% asset clock/Flutter-logo.svg alt='Flutter Logo' class='wtm-logo' %} + {% asset clock/G-Assistant-logo.svg alt='Google Assistant Logo' class='wtm-logo' %} + {% asset clock/Lenovo-logo.svg alt='Lenovo Logo' class='wtm-logo' %} +
+
+
+
+ +
+
+
+
+ Prizes +
    + {% for prize in site.data.clock.prizes %} +
  • +

    {{prize.title}}

    +

    {{prize.paragraph}}

    +
  • + {% endfor %} +
+
+
+ {% asset clock/iMac.png class="card-img-top" %} +
+
+
+

+ 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! +

+
+
+
+ +
+
+
+

Getting Started

+

+ Use the following instructions to get started. Also, make sure to familiarize yourself with the submission requirements and contest rules. +

+
    + {% for item in site.data.clock.getting_started_items %} +
  1. + {{item.title}} + {% if item.subItems %} +
      + {% for subItem in item.subItems %} +
    1. + {{subItem.text}} + {% if subItem.subItems %} +
        + {% for subItemSecondLevel in subItem.subItems%} +
      • {{subItemSecondLevel.text}}
      • + {% endfor %} +
      + {% endif %} +
    2. + {% endfor %} +
    + {% endif %} +
  2. + {% endfor %} +
+
+
+
+ +
+
+
+

+ Enter your clock face for a chance to win +

+ + Submit your project + +
+
+
+ +
+
+
+

+ Submission Requirements +

+

+ 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 %} +

{{item.title}}

+
    + {% for subItem in item.subItems %} +
  • + {{subItem.text}} + {% if subItem.subItems %} +
      + {% for subItemSecondLevel in subItem.subItems %} +
    • + {{subItemSecondLevel.text}} +
    • + {% endfor %} +
    + {% endif %} +
  • + {% endfor %} +
+ {% endfor %} +
+
+
+
+ +
+
+
+

+ Contest Rules +

+

+ Full details and rules are provided in our + + Official Rules. Here’s a summary of some of the key points: +

+
    + {% for item in site.data.clock.contest_rules %} +
  • + {{item.title}} +
  • + {% endfor %} +
+
+
+
+ +
+
+
+
+

FAQ

+ {% for faq in site.data.clock.faqs %} +
+
+
+ +
+
+
+ {{ faq.content }} +
+
+
+
+ {% endfor %} +
+
+
-{% asset countdown %} +