121 lines
6.1 KiB
HTML
121 lines
6.1 KiB
HTML
<!doctype html>
|
|
<html lang="">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Material Design Lite</title>
|
|
|
|
<!-- Add to homescreen -->
|
|
<link rel="manifest" href="manifest.json">
|
|
|
|
<!-- Fallback to homescreen for Chrome <39 on Android -->
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="application-name" content="Material Design Lite">
|
|
<link rel="icon" sizes="192x192" href="{{page.include_prefix}}assets/android-desktop.png">
|
|
|
|
<!-- Add to homescreen for Safari on iOS -->
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
|
|
<link rel="apple-touch-icon" href="{{page.include_prefix}}assets/ios-desktop.png">
|
|
|
|
<!-- TODO: Tile icon for Win8 (144x144 + tile color) -->
|
|
<!-- <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png"> -->
|
|
<!-- <meta name="msapplication-TileColor" content="#3372DF"> -->
|
|
|
|
<meta name="theme-color" content="#263238">
|
|
|
|
<link rel="shortcut icon" href="{{page.include_prefix}}assets/favicon.png" />
|
|
<!-- 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 -->
|
|
<!--
|
|
<link rel="canonical" href="http://www.example.com/">
|
|
-->
|
|
|
|
<!-- Fonts -->
|
|
<link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
|
rel="stylesheet">
|
|
|
|
<!-- Page styles -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
|
|
<link rel="stylesheet" href="{{page.include_prefix}}material.min.css">
|
|
<link rel="stylesheet" href="{{page.include_prefix}}assets/main.css">
|
|
<script src="{{page.include_prefix}}material.min.js"></script>
|
|
</head>
|
|
<body class="{{page.bodyclass}}">
|
|
<div class="docs-layout mdl-layout mdl-js-layout">
|
|
<header class="docs-layout-header mdl-layout__header">
|
|
<div class="mdl-layout__header-row">
|
|
<span class="docs-layout-title mdl-layout-title"><a href="/">Material<br>Design<br>Lite</a></span>
|
|
<div class="mdl-layout-spacer"></div>
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
|
|
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
|
|
<i class="material-icons">search</i>
|
|
</label>
|
|
<div class="mdl-textfield__expandable-holder">
|
|
<input class="mdl-textfield__input" type="text" id="search" />
|
|
<label class="mdl-textfield__label" for="expando1">Enter your query...</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<nav class="docs-navigation mdl-navigation mdl-js-ripple-effect">
|
|
<a href="{{page.include_prefix}}" class="mdl-navigation__link about">About</a>
|
|
<a href="{{page.include_prefix}}started" class="mdl-navigation__link started">Getting Started</a>
|
|
<a href="{{page.include_prefix}}templates" class="mdl-navigation__link templates">Templates</a>
|
|
<a href="{{page.include_prefix}}components" class="mdl-navigation__link components">Components</a>
|
|
<a href="{{page.include_prefix}}styles" class="mdl-navigation__link styles">Styles</a>
|
|
<a href="{{page.include_prefix}}customize" class="mdl-navigation__link customize">Customize</a>
|
|
<div class="mdl-layout-spacer"></div>
|
|
<a href="https://github.com/google/material-design-lite" class="mdl-navigation__link"><span class="mdl-icon mdl-icon--link"></span>GitHub</a>
|
|
<a href="#" class="download">
|
|
Download
|
|
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--fab mdl-button--mini-fab mdl-color--lime-A200">
|
|
<i class="material-icons">file_download</i>
|
|
</button>
|
|
</a>
|
|
</nav>
|
|
</header>
|
|
<div class="subpageheader">{{page.title}}</div>
|
|
<main class="docs-layout-content mdl-layout__content mdl-color-text--grey-600">
|
|
<div class="content mdl-grid mdl-grid--no-spacing">
|
|
{% block content %}
|
|
{{content|safe}}
|
|
{% endblock %}
|
|
</div>
|
|
<section class="docs-text-styling download mdl-color--grey-800">
|
|
<a href="#" class="mdl-color-text--grey-50">Download Kit</a>
|
|
</section>
|
|
<footer class="docs-text-styling docs-footer mdl-mini-footer mdl-color--grey-900">
|
|
<ul>
|
|
<button class="mdl-mini-footer--social-btn social-btn social-btn__twitter"></button>
|
|
<button class="mdl-mini-footer--social-btn social-btn social-btn__blogger"></button>
|
|
<button class="mdl-mini-footer--social-btn social-btn social-btn__gplus"></button>
|
|
</ul>
|
|
<ul>
|
|
<a class="mdl-color-text--grey-600" href="https://developers.google.com/web/starter-kit/">Web Starter Kit</a>
|
|
<a class="mdl-color-text--grey-600" href="#">Help</a>
|
|
<a class="mdl-color-text--grey-600" href="#">Privacy & Terms</a>
|
|
</ul>
|
|
</footer>
|
|
</main>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
ga('create', 'UA-XXXXX-X', 'auto');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
<!-- Enable Prism syntax highlighting -->=
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>
|
|
<!-- Built with love using Material Design Lite -->
|
|
</body>
|
|
</html>
|