blob: 66abc08328f2b3e50cf65b043f8921f96164dafa [file] [log] [blame]
<!-- Copyright 2016 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<!--
OOBE Welcome screen
-->
<iron-iconset-svg name="oobe-welcome-dialog-20" size="20">
<svg>
<defs>
<g id="accessibility" fill-rule="evenodd">
<defs>
<path id="a" d="M17.556 4.6c-2.32.63-5.04.9-7.556.9s-5.236-.27-7.556-.9L2 6.4c1.653.45 3.722.747 5.5.9V19H9v-5.5h2V19h1.5V7.3c1.778-.153 3.847-.45 5.5-.9l-.444-1.8zM10 4.6c.978 0 1.778-.81 1.778-1.8S10.978 1 10 1s-1.778.81-1.778 1.8.8 1.8 1.778 1.8z">
</path>
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h20v20H0z"></path>
<use fill="#1A73E8" fill-rule="nonzero" xlink:href="#a"></use>
</g>
</g>
<g id="language" fill="none" fill-rule="evenodd">
<path d="M0 0h20v20H0z"></path>
<path fill="#1A73E8" fill-rule="nonzero" d="M9.992 2C5.576 2 2 5.584 2 10s3.576 8 7.992 8C14.416 18 18 14.416 18 10s-3.584-8-8.008-8zm5.544 4.8h-2.36c-.256-1-.624-1.96-1.104-2.848A6.424 6.424 0 0 1 15.536 6.8zM10 3.632A11.27 11.27 0 0 1 11.528 6.8H8.472A11.27 11.27 0 0 1 10 3.632zM3.808 11.6A6.594 6.594 0 0 1 3.6 10c0-.552.08-1.088.208-1.6h2.704A13.212 13.212 0 0 0 6.4 10c0 .544.048 1.072.112 1.6H3.808zm.656 1.6h2.36c.256 1 .624 1.96 1.104 2.848A6.39 6.39 0 0 1 4.464 13.2zm2.36-6.4h-2.36a6.39 6.39 0 0 1 3.464-2.848A12.52 12.52 0 0 0 6.824 6.8zM10 16.368A11.27 11.27 0 0 1 8.472 13.2h3.056A11.27 11.27 0 0 1 10 16.368zm1.872-4.768H8.128A11.77 11.77 0 0 1 8 10c0-.544.056-1.08.128-1.6h3.744c.072.52.128 1.056.128 1.6s-.056 1.072-.128 1.6zm.2 4.448a12.52 12.52 0 0 0 1.104-2.848h2.36a6.424 6.424 0 0 1-3.464 2.848zm1.416-4.448c.064-.528.112-1.056.112-1.6s-.048-1.072-.112-1.6h2.704c.128.512.208 1.048.208 1.6s-.08 1.088-.208 1.6h-2.704z">
</path>
</g>
</defs>
</svg>
</iron-iconset-svg>
<iron-iconset-svg name="oobe-welcome-dialog-40" size="40">
<svg>
<defs>
<g id="accessibility" fill-rule="evenodd">
<defs>
<path id="a" d="M35.111 9.2C30.471 10.46 25.031 11 20 11c-5.031 0-10.471-.54-15.111-1.8L4 12.8c3.307.9 7.444 1.494 11 1.8V38h3V27h4v11h3V14.6c3.556-.306 7.693-.9 11-1.8l-.889-3.6zM20 9.2c1.956 0 3.556-1.62 3.556-3.6S21.956 2 20 2s-3.556 1.62-3.556 3.6 1.6 3.6 3.556 3.6z">
</path>
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z"></path>
<use fill="#1A73E8" fill-rule="nonzero" xlink:href="#a"></use>
</g>
</g>
<g id="language" fill="none" fill-rule="evenodd">
<path d="M0 0h40v40H0z"></path>
<path fill="#1A73E8" fill-rule="nonzero" d="M19.984 4C11.152 4 4 11.168 4 20s7.152 16 15.984 16C28.832 36 36 28.832 36 20S28.832 4 19.984 4zm11.088 9.6h-4.72c-.512-2-1.248-3.92-2.208-5.696a12.847 12.847 0 0 1 6.928 5.696zM20 7.264a22.539 22.539 0 0 1 3.056 6.336h-6.112A22.539 22.539 0 0 1 20 7.264zM7.616 23.2A13.187 13.187 0 0 1 7.2 20c0-1.104.16-2.176.416-3.2h5.408c-.128 1.056-.224 2.112-.224 3.2s.096 2.144.224 3.2H7.616zm1.312 3.2h4.72c.512 2 1.248 3.92 2.208 5.696A12.779 12.779 0 0 1 8.928 26.4zm4.72-12.8h-4.72a12.779 12.779 0 0 1 6.928-5.696 25.039 25.039 0 0 0-2.208 5.696zM20 32.736a22.539 22.539 0 0 1-3.056-6.336h6.112A22.539 22.539 0 0 1 20 32.736zm3.744-9.536h-7.488C16.112 22.144 16 21.088 16 20s.112-2.16.256-3.2h7.488c.144 1.04.256 2.112.256 3.2s-.112 2.144-.256 3.2zm.4 8.896a25.039 25.039 0 0 0 2.208-5.696h4.72a12.847 12.847 0 0 1-6.928 5.696zm2.832-8.896c.128-1.056.224-2.112.224-3.2s-.096-2.144-.224-3.2h5.408c.256 1.024.416 2.096.416 3.2s-.16 2.176-.416 3.2h-5.408z">
</path>
</g>
</defs>
</svg>
</iron-iconset-svg>
<dom-module id="oobe-welcome-dialog">
<template>
<link rel="stylesheet" href="oobe_fonts.css">
<link rel="stylesheet" href="oobe_dialog_host.css">
<link rel="stylesheet" href="oobe_flex_layout.css">
<link rel="stylesheet" href="oobe_welcome_dialog.css">
<style include="cr-shared-style"></style>
<div class="layout horizontal flex">
<div class="vertical-margin"></div>
<div class="welcome-content flex layout vertical center">
<div class="layout vertical end-justified" id="titleContainer">
<h1 id="title">[[i18nDynamic(locale, 'welcomeScreenGreeting')]]</h1>
</div>
<div class="welcome-illustration">
<if expr="chromeos and _google_chrome">
<video muted hidden oobe_devices="chromebox"
oobe_orientations="portrait,landscape" oobe_types="intro"
src="../../../internal/resources/chromeos/animations/oobe-welcome/chromebox_intro_2x.webm">
</video>
<video muted loop hidden oobe_devices="chromebox"
oobe_orientations="portrait,landscape" oobe_types="loop"
src="../../../internal/resources/chromeos/animations/oobe-welcome/chromebox_loop_2x.webm">
</video>
<video muted hidden oobe_devices="laptop_G"
oobe_orientations="portrait,landscape" oobe_types="intro"
src="../../../internal/resources/chromeos/animations/oobe-welcome/laptop_G_intro_2x.webm">
</video>
<video muted loop hidden oobe_devices="laptop_G"
oobe_orientations="portrait,landscape" oobe_types="loop"
src="../../../internal/resources/chromeos/animations/oobe-welcome/laptop_G_loop_2x.webm">
</video>
<video muted hidden oobe_devices="laptop"
oobe_orientations="portrait,landscape" oobe_types="intro"
src="../../../internal/resources/chromeos/animations/oobe-welcome/laptop_intro_2x.webm">
</video>
<video muted loop hidden oobe_devices="laptop"
oobe_orientations="portrait,landscape" oobe_types="loop"
src="../../../internal/resources/chromeos/animations/oobe-welcome/laptop_loop_2x.webm">
</video>
<video muted hidden oobe_devices="tablet_G"
oobe_orientations="portrait,landscape" oobe_types="intro"
src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_G_intro_2x.webm">
</video>
<video muted loop hidden oobe_devices="tablet_G"
oobe_orientations="portrait,landscape" oobe_types="loop"
src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_G_loop_2x.webm">
</video>
<video muted hidden oobe_devices="tablet"
oobe_orientations="portrait,landscape" oobe_types="intro"
src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_intro_2x.webm">
</video>
<video muted loop hidden oobe_devices="tablet"
oobe_orientations="portrait,landscape" oobe_types="loop"
src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_loop_2x.webm">
</video>
</if>
</div>
<div hidden="[[!debuggingLinkVisible]]">
<a href="#" on-tap="onDebuggingLinkClicked_" id="enableDebuggingLink">
[[i18nDynamic(locale, 'debuggingFeaturesLink')]]
</a>
</div>
<div class="flex"></div>
<div id="buttons" class="layout horizontal center">
<oobe-welcome-secondary-button id="languageSelectionButton"
icon1x="oobe-welcome-dialog-20:language"
icon2x="oobe-welcome-dialog-40:language"
on-tap="onLanguageClicked_"
label-for-aria$="[[formatMessage_('languageButtonLabel',
currentLanguage)]]">
<div>[[currentLanguage]]</div>
</oobe-welcome-secondary-button>
<oobe-welcome-secondary-button id="accessibilitySettingsButton"
icon1x="oobe-welcome-dialog-20:accessibility"
icon2x="oobe-welcome-dialog-40:accessibility"
on-tap="onAccessibilityClicked_">
<div>[[i18nDynamic(locale, 'accessibilityLink')]]</div>
</oobe-welcome-secondary-button>
<oobe-welcome-secondary-button id="timezoneSettingsButton"
icon1x="oobe-welcome-32:timezone"
icon2x="oobe-welcome-64:timezone"
on-tap="onTimezoneClicked_"
hidden="[[!timezoneButtonVisible]]">
<div>[[i18nDynamic(locale, 'timezoneButtonText')]]</div>
</oobe-welcome-secondary-button>
<div class="flex"></div>
<oobe-next-button id="welcomeNextButton"
inverse on-tap="onNextClicked_">
<div>[[i18nDynamic(locale, 'welcomeNextButtonText')]]</div>
</oobe-text-button>
</div>
<div id="bottom-margin"></div>
</div>
<div class="vertical-margin"></div>
</div>
</template>
</dom-module>