Chromium Code Reviews Chromium Code Reviews
Issue 2252063002:
Adding client code for new desktop First Run Experience. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| Index: chrome/browser/resources/welcome/welcome.html |
| diff --git a/chrome/browser/resources/welcome/welcome.html b/chrome/browser/resources/welcome/welcome.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..1e6d1d9822d9af0266b30c4e01ffbf138dbabc09 |
| --- /dev/null |
| +++ b/chrome/browser/resources/welcome/welcome.html |
| @@ -0,0 +1,225 @@ |
| +<html> |
| +<head> |
| + <title>$i18n{headerText}</title> |
| + |
| + <link rel="import" href="chrome://resources/html/polymer.html"> |
| + <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> |
| + <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html"> |
| + |
| + <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> |
| + |
| + <script src="chrome://resources/js/cr.js"></script> |
|
Moe
2016/08/23 21:15:31
nit: include cr.js and util.js once you need them.
|
| + <script src="chrome://resources/js/load_time_data.js"></script> |
| + <script src="chrome://resources/js/util.js"></script> |
| + <script src="chrome://welcome/welcome.js"></script> |
| + |
| + <style is="custom-style"> |
| + body { |
| + align-items: center; |
| + box-sizing: border-box; |
| + color: var(--paper-grey-900); |
| + display: flex; |
| + flex-direction: column; |
| + font-size: 100%; |
| + justify-content: center; |
| + min-height: 100vh; |
| + overflow-y: hidden; |
| + padding: 16px; |
| + } |
| + |
| + @keyframes slideUpContent { |
| + from { |
| + transform: translateY(186px); |
| + } |
| + } |
| + |
| + @keyframes fadeIn { |
| + from { |
| + opacity: 0; |
| + } |
| + } |
| + |
| + @keyframes fadeOut { |
| + to { |
| + opacity: 0; |
| + } |
| + } |
| + |
| + |
| + @keyframes fadeInAndSlideUp { |
| + from { |
| + opacity: 0; |
| + transform: translateY(8px); |
| + } |
| + } |
| + |
| + @keyframes spin { |
| + from { |
| + transform: rotate(-1440deg); |
| + } |
| + } |
| + |
| + @keyframes fadeInAndSlideDownShadow { |
| + from { |
| + opacity: .6; |
| + top: 8px; |
| + } |
| + } |
| + |
| + @keyframes scaleUp { |
| + 0% { |
| + transform: scale(.8); |
| + } |
| + } |
| + |
| + .spacer { |
| + flex: 1; |
| + max-height: 96px; |
| + } |
| + |
| + .content { |
| + animation: slideUpContent 600ms 1.8s cubic-bezier(.4, .2, 0, 1) both; |
| + display: flex; |
| + flex: 1; |
| + flex-direction: column; |
| + justify-content: center; |
| + max-width: 500px; |
| + text-align: center; |
| + } |
| + |
| + .heading { |
| + animation: fadeInAndSlideUp 600ms 1.9s cubic-bezier(.4, .2, 0, 1) both; |
| + font-size: 2.125em; |
| + margin-bottom: .25em; |
| + margin-top: 1.5em; |
| + } |
| + |
| + .subheading { |
| + animation: fadeInAndSlideUp 600ms 1.9s cubic-bezier(.4, .2, 0, 1) both; |
| + color: var(--google-grey-500); |
| + font-size: 1em; |
| + margin-top: .25em; |
| + } |
| + |
| + .logo { |
| + animation: fadeIn 600ms both; |
| + height: 96px; |
| + margin: 0 auto; |
| + position: relative; |
| + width: 96px; |
| + } |
| + |
| + .logo-icon { |
| + animation: scaleUp 600ms 500ms cubic-bezier(.5, -.5, 0, 2.25) both; |
| + background: white; |
| + border-radius: 50%; |
| + height: 96px; |
| + width: 96px; |
| + } |
| + |
| + .logo-bw, |
| + .logo-color { |
| + animation: fadeIn 600ms 500ms both, spin 2.4s cubic-bezier(.4, .2, 0, 1) both; |
| + content: -webkit-image-set(url(logo.png) 1x, url(logo2x.png) 2x); |
| + left: -5px; |
| + position: absolute; |
| + top: -5px; |
| + width: 106px; |
| + } |
| + |
| + .logo-bw { |
| + -webkit-filter: grayscale(100%); |
| + } |
| + |
| + .logo-color { |
| + animation: fadeIn 300ms 700ms both, spin 2.4s cubic-bezier(.4, .2, 0, 1) both; |
| + } |
| + |
| + .logo-shadow { |
| + -webkit-filter: blur(16px); |
| + animation: fadeInAndSlideDownShadow 300ms 600ms both; |
| + background: rgba(0, 0, 0, .2); |
| + border-radius: 50%; |
| + height: 96px; |
| + position: absolute; |
| + top: 16px; |
| + width: 96px; |
| + z-index: -1; |
| + } |
| + |
| + .signin { |
| + animation: fadeInAndSlideUp 600ms 2s cubic-bezier(.4, .2, 0, 1) both; |
| + margin-top: 3em; |
| + text-align: left; |
| + } |
| + |
| + .signin-description { |
| + font-size: .875em; |
| + line-height: 1.725em; |
| + margin: 0 auto; |
| + max-width: 344px; |
| + } |
| + |
| + .signin-buttons { |
| + align-items: center; |
| + display: flex; |
| + flex-direction: column; |
| + margin-top: 2em; |
| + } |
| + |
| + .action { |
| + background: var(--google-blue-500); |
| + color: white; |
| + font-size: .75em; |
| + font-weight: 500; |
| + line-height: 2.5em; |
| + padding: 0 1.25em; |
| + } |
| + |
| + .link { |
| + color: var(--google-blue-500); |
| + display: inline-block; |
| + font-size: .75em; |
| + margin: 1.5em; |
| + text-align: center; |
| + text-decoration: none; |
| + } |
| + |
| + .link:hover { |
| + text-decoration: underline; |
| + } |
| + |
| + .watermark { |
| + -webkit-mask-image: url(chrome://welcome/watermark.svg); |
| + -webkit-mask-repeat: no-repeat; |
| + -webkit-mask-size: 100%; |
| + background: var(--paper-grey-400); |
| + height: 24px; |
| + margin-top: 48px; |
| + width: 74px; |
| + } |
| + </style> |
| +</head> |
| +<body> |
| + <div class="spacer"></div> |
| + <div class="content"> |
| + <div class="logo"> |
| + <div class="logo-icon"> |
| + <img src="chrome://welcome/logo.png" class="logo-bw"> |
| + <img src="chrome://welcome/logo.png" class="logo-color"> |
| + </div> |
| + <div class="logo-shadow"></div> |
| + </div> |
| + <p class="heading">$i18n{headerText}</p> |
| + <p class="subheading">$i18n{subheaderText}</p> |
| + <div class="signin"> |
| + <p class="signin-description">$i18n{descriptionText}</p> |
| + <div class="signin-buttons"> |
| + <paper-button class="action">$i18n{acceptText}</paper-button> |
| + <a href="#" class="link">$i18n{declineText}</a> |
| + </div> |
| + </div> |
| + </div> |
| + <div class="watermark"> |
| +</body> |
| +</html> |
