Gitiles
Code Review Sign In
gerrit.avm99963.com / hores-external / be50d49a1de3579494650ceb3cad0f04719b087f / . / node_modules / material-design-lite / dist / showcase / index.html
blob: 922f3831cd3c0b9d3b68a3e9d556910099275d4d [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +0100[diff] [blame^]1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
8 <title>Material Design Lite</title>
9
10 <!-- Add to homescreen -->
11 <link rel="manifest" href="manifest.json">
12
13 <!-- Fallback to homescreen for Chrome <39 on Android -->
14 <meta name="mobile-web-app-capable" content="yes">
15 <meta name="application-name" content="Material Design Lite">
16 <link rel="icon" sizes="192x192" href="../assets/android-desktop.png">
17
18 <!-- Add to homescreen for Safari on iOS -->
19 <meta name="apple-mobile-web-app-capable" content="yes">
20 <meta name="apple-mobile-web-app-status-bar-style" content="black">
21 <meta name="apple-mobile-web-app-title" content="Material Design Lite">
22 <link rel="apple-touch-icon" href="../assets/ios-desktop.png">
23
24 <!-- TODO: Tile icon for Win8 (144x144 + tile color) -->
25 <!-- <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png"> -->
26 <!-- <meta name="msapplication-TileColor" content="#3372DF"> -->
27
28 <meta name="theme-color" content="#263238">
29
30 <link rel="shortcut icon" href="../assets/favicon.png">
31 <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
32 <!--
33 <link rel="canonical" href="http://www.example.com/">
34 -->
35
36 <!-- Page styles -->
37 <link rel="stylesheet" href="../assets/prism-default.css">
38 <link rel="stylesheet" href="../material.min.css">
39 <link rel="stylesheet" href="../assets/main.css">
40
41 <!-- Fonts -->
42 <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
43 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
44 </head>
45 <body class="showcase">
46 <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
47 <script>
48 // if (document.location.hostname !== 'localhost' &&
49 // document.location.hostname !== '127.0.0.1' &&
50 // document.location.hostname.search('.corp.') === -1) {
51 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
52 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
53 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
54 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
55 ga('create', 'UA-25993200-9', 'auto');
56 // If a specific component page is loaded directly we'll attribute the
57 // page view to the specific component's page
58 if (window.location.pathname.indexOf('/components/') !== -1 &&
59 window.location.hash.indexOf('-section') !== -1) {
60 ga('send', 'pageview', '/components/' +
61 window.location.hash.split('#')[1].split('/')[0]);
62 } else {
63 ga('send', 'pageview');
64 }
65 // }
66
67 // Setup error tracking before anything else runs.
68 window.onerror = function(message, file, lineNumber, columnNumber, error) {
69 try {
70 if (error !== undefined) {
71 message = error.stack;
72 }
73 ga('send', 'event', 'error', file + ':' + lineNumber, String(message));
74 } catch (e) {
75 // no-op
76 }
77 };
78 </script>
79 <div class="image-preloader"></div>
80 <div class="docs-layout mdl-layout mdl-js-layout">
81 <header class="docs-layout-header mdl-layout__header">
82 <div class="mdl-layout__header-row">
83 <span class="docs-layout-title mdl-layout-title"><a href="../">Material<br>Design<br>Lite</a></span>
84 </div>
85 <div class="docs-navigation__container">
86 <nav class="docs-navigation mdl-navigation">
87 <a href="../index.html" class="mdl-navigation__link about">About</a>
88 <a href="../started/index.html" class="mdl-navigation__link started">Getting Started</a>
89 <a href="../templates/index.html" class="mdl-navigation__link templates">Templates</a>
90 <a href="../components/index.html" class="mdl-navigation__link components">Components</a>
91 <a href="../styles/index.html" class="mdl-navigation__link styles">Styles</a>
92 <a href="../customize/index.html" class="mdl-navigation__link customize">Customize</a>
93 <a href="../showcase/index.html" class="mdl-navigation__link showcase">Showcase</a>
94 <a href="../faq/index.html" class="mdl-navigation__link faq">FAQ</a>
95 <div class="spacer"></div>
96 <a href="https://github.com/google/material-design-lite" class="mdl-navigation__link mdl-navigation__link--icon github"><i class="material-icons">link</i><span>GitHub</span></a>
97 <a href="../started/index.html#download" class="mdl-navigation__link mdl-navigation__link--icon download">
98 <i class="material-icons">&#xE2C4;</i><span>Download</span>
99 <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--fab mdl-button--mini-fab mdl-color--lime-A200">
100 <i class="material-icons">&#xE2C4;</i>
101 </button>
102 </a>
103 </nav>
104 </div>
105 <i class="material-icons scrollindicator scrollindicator--right">&#xE315;</i>
106 <i class="material-icons scrollindicator scrollindicator--left">&#xE314;</i>
107 </header>
108 <main class="docs-layout-content mdl-layout__content mdl-color-text--grey-600">
109 <div class="content mdl-grid mdl-grid--no-spacing" id="content">
110 <div class="subpageheader mdl-cell--12-col">Showcase: sites using MDL</div>
111
112<div class="sites__content">
113<p>Material Design Lite is used on a wide range of sites. Below are just a small selection of the <strong>Google.com</strong> sites that have launched using us. We hope to expand the showcase to cover third-party and community sites built using MDL in the near future. To request your site be added, please file a <a href="https://github.com/Google/material-design-lite/issues/new?title=Site%20Showcase%20Request&body=Please%20include:%0A*%20Description%0A*%20Primary%20Link%0A*%20Screenshot">new issue</a> on our GitHub issue tracker.</p>
114</div>
115
116
117
118<section class="template template--wallet docs-text-styling mdl-grid mdl-cell mdl-cell--12-col">
119 <img src="../assets/showcase/wallet.jpg"
120 srcset="../assets/showcase/wallet.jpg 1x, ../assets/showcase/wallet_2x.jpg 2x"
121 class="template__preview mdl-cell mdl-cell--8-col">
122 <div class="template__meta mdl-cell mdl-cell--4-col mdl-grid mdl-grid--no-spacing">
123 <h3 class="template__header mdl-cell mdl-cell--12-col mdl-typography--body-2">Google Wallet</h3>
124 <p class="mdl-cell mdl-cell--12-col">
125 Google Wallet allows you to send money to anyone in the US with an email address. It&#39;s fast, easy, and free to send directly from your debit card, bank account, or Wallet Balance.
126 </p>
127 <a href="../assets/showcase/wallet_2x.jpg" class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
128 <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
129 <i class="material-icons">image</i>
130 </button>
131 Screenshot
132 </a>
133 <a href="https://www.google.com/wallet/" target="_blank" class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
134 <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
135 <i class="material-icons">arrow_forward</i>
136 </button>
137 Visit
138 </a>
139 </div>
140</section>
141
142<section class="template template--contributor docs-text-styling mdl-grid mdl-cell mdl-cell--12-col">
143 <img src="../assets/showcase/contributor.jpg"
144 srcset="../assets/showcase/contributor.jpg 1x, ../assets/showcase/contributor_2x.jpg 2x"
145 class="template__preview mdl-cell mdl-cell--8-col">
146 <div class="template__meta mdl-cell mdl-cell--4-col mdl-grid mdl-grid--no-spacing">
147 <h3 class="template__header mdl-cell mdl-cell--12-col mdl-typography--body-2">Google Contributor</h3>
148 <p class="mdl-cell mdl-cell--12-col">
149 Contribute a few dollars each month. See fewer ads. It&#39;s that simple. The money you contribute helps fund the sites you visit.
150 </p>
151 <a href="../assets/showcase/contributor_2x.jpg" class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
152 <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
153 <i class="material-icons">image</i>
154 </button>
155 Screenshot
156 </a>
157 <a href="https://www.google.com/contributor/welcome/" target="_blank" class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
158 <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
159 <i class="material-icons">arrow_forward</i>
160 </button>
161 Visit
162 </a>
163 </div>
164</section>
165
166<section class="template template--work_partners docs-text-styling mdl-grid mdl-cell mdl-cell--12-col">
167 <img src="../assets/showcase/work_partners.jpg"
168 srcset="../assets/showcase/work_partners.jpg 1x, ../assets/showcase/work_partners_2x.jpg 2x"
169 class="template__preview mdl-cell mdl-cell--8-col">
170 <div class="template__meta mdl-cell mdl-cell--4-col mdl-grid mdl-grid--no-spacing">
171 <h3 class="template__header mdl-cell mdl-cell--12-col mdl-typography--body-2">Google for Work</h3>
172 <p class="mdl-cell mdl-cell--12-col">
173 The Google for Work Partner Program enables you to sell, service, and innovate by leveraging our products and platforms across the Google for Work suite.
174 </p>
175 <a href="../assets/showcase/work_partners_2x.jpg" class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
176 <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
177 <i class="material-icons">image</i>
178 </button>
179 Screenshot
180 </a>
181 <a href="https://www.google.com/work/partners/" target="_blank" class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
182 <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
183 <i class="material-icons">arrow_forward</i>
184 </button>
185 Visit
186 </a>
187 </div>
188</section>
189
190<section class="template template--rework docs-text-styling mdl-grid mdl-cell mdl-cell--12-col">
191 <img src="../assets/showcase/rework.jpg"
192 srcset="../assets/showcase/rework.jpg 1x, ../assets/showcase/rework_2x.jpg 2x"
193 class="template__preview mdl-cell mdl-cell--8-col">
194 <div class="template__meta mdl-cell mdl-cell--4-col mdl-grid mdl-grid--no-spacing">
195 <h3 class="template__header mdl-cell mdl-cell--12-col mdl-typography--body-2">reWork with Google</h3>
196 <p class="mdl-cell mdl-cell--12-col">
197 Practices, research, and ideas from Google and other organizations to put people first.
198 </p>
199 <a href="../assets/showcase/rework_2x.jpg" class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
200 <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
201 <i class="material-icons">image</i>
202 </button>
203 Screenshot
204 </a>
205 <a href="https://rework.withgoogle.com/" target="_blank" class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
206 <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
207 <i class="material-icons">arrow_forward</i>
208 </button>
209 Visit
210 </a>
211 </div>
212</section>
213
214<section class="template template--developers docs-text-styling mdl-grid mdl-cell mdl-cell--12-col">
215 <img src="../assets/showcase/developers.jpg"
216 srcset="../assets/showcase/developers.jpg 1x, ../assets/showcase/developers_2x.jpg 2x"
217 class="template__preview mdl-cell mdl-cell--8-col">
218 <div class="template__meta mdl-cell mdl-cell--4-col mdl-grid mdl-grid--no-spacing">
219 <h3 class="template__header mdl-cell mdl-cell--12-col mdl-typography--body-2">Google Developers</h3>
220 <p class="mdl-cell mdl-cell--12-col">
221 Web Fundamentals is a comprehensive resource for multi-device web development hosted by Google Developers.
222 </p>
223 <a href="../assets/showcase/developers_2x.jpg" class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
224 <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
225 <i class="material-icons">image</i>
226 </button>
227 Screenshot
228 </a>
229 <a href="https://developers.google.com/web/fundamentals/" target="_blank" class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
230 <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
231 <i class="material-icons">arrow_forward</i>
232 </button>
233 Visit
234 </a>
235 </div>
236</section>
237
238<section class="template template--sunroof docs-text-styling mdl-grid mdl-cell mdl-cell--12-col">
239 <img src="../assets/showcase/sunroof.jpg"
240 srcset="../assets/showcase/sunroof.jpg 1x, ../assets/showcase/sunroof_2x.jpg 2x"
241 class="template__preview mdl-cell mdl-cell--8-col">
242 <div class="template__meta mdl-cell mdl-cell--4-col mdl-grid mdl-grid--no-spacing">
243 <h3 class="template__header mdl-cell mdl-cell--12-col mdl-typography--body-2">Google Project Sunroof</h3>
244 <p class="mdl-cell mdl-cell--12-col">
245 Project Sunroof puts Google&#39;s expansive data in mapping and computing resources to use, helping calculate the best solar plan for you.
246 </p>
247 <a href="../assets/showcase/sunroof_2x.jpg" class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
248 <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
249 <i class="material-icons">image</i>
250 </button>
251 Screenshot
252 </a>
253 <a href="https://www.google.com/get/sunroof/about/" target="_blank" class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
254 <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
255 <i class="material-icons">arrow_forward</i>
256 </button>
257 Visit
258 </a>
259 </div>
260</section>
261
262
263 </div>
264 <section class="docs-text-styling download mdl-color--grey-800">
265 <a href="../started/index.html#download" class="mdl-color-text--grey-50">Download Kit</a>
266 </section>
267 <footer class="docs-text-styling docs-footer mdl-mini-footer mdl-color--grey-900">
268 <ul>
269 <li class="mdl-mini-footer--social-btn">
270 <a href="https://twitter.com/googledesign" class="social-btn social-btn__twitter" role="button" title="Twitter"></a>
271 </li>
272 <li class="mdl-mini-footer--social-btn">
273 <a href="https://github.com/google/material-design-lite" class="social-btn social-btn__github" role="button" title="GitHub"></a>
274 </li>
275 <li class="mdl-mini-footer--social-btn">
276 <a href="https://plus.google.com/+googledesign" class="social-btn social-btn__gplus" role="button" title="Google+"></a>
277 </li>
278 </ul>
279 <ul class="docs-link-list">
280 <li><a class="mdl-color-text--grey-600" href="https://developers.google.com/web/starter-kit/">Web Starter Kit</a></li>
281 <li><a class="mdl-color-text--grey-600" href="https://github.com/google/material-design-lite/issues">Help</a></li>
282 </ul>
283 </footer>
284 </main>
285 </div>
286
287 <!-- IE Compatibility shims -->
288 <!--[if lt IE 9]>
289 <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js""></script>
290 <![endif]-->
291
292 <!--[if IE]>
293 <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.7/es5-shim.min.js"></script>
294 <script src="//cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script>
295 <script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
296 <script src="//cdnjs.cloudflare.com/ajax/libs/flexie/1.0.3/flexie.min.js"></script>
297 <link href="../assets/ie.css" rel="stylesheet">
298 <![endif]-->
299 <!-- end shims -->
300
301
302 <!-- Material Design Lite -->
303 <script src="../material.min.js"></script>
304 <!-- Add Copy-to-CodePen buttons to code blocks -->
305 <script src="../assets/codepen.js"></script>
306 <!-- Enable Prism syntax highlighting -->
307 <script src="../assets/prism.js"></script>
308 <script src="../assets/prism-markup.min.js"></script>
309 <script src="../assets/prism-javascript.min.js"></script>
310 <script src="../assets/prism-css.min.js"></script>
311 <script src="../assets/prism-bash.min.js"></script>
312 <script src="../assets/main.js"></script>
313 <!-- Built with love using Material Design Lite -->
314 </body>
315</html>