mirror of
https://github.com/google/material-design-lite.git
synced 2024-11-09 16:58:39 +03:00
155 lines
5.7 KiB
HTML
155 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html class="no-js no-touch" itemscope itemtype="http://schema.org/Article">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Web Starter Kit</title>
|
|
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
|
|
<meta name="HandheldFriendly" content="True">
|
|
<meta name="MobileOptimized" content="320">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
|
|
<meta http-equiv="cleartype" content="on">
|
|
|
|
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/touch/apple-touch-icon-144x144-precomposed.png">
|
|
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/touch/apple-touch-icon-114x114-precomposed.png">
|
|
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/touch/apple-touch-icon-72x72-precomposed.png">
|
|
<link rel="apple-touch-icon-precomposed" href="images/touch/apple-touch-icon-57x57-precomposed.png">
|
|
<link rel="shortcut icon" sizes="196x196" href="images/touch/touch-icon-196x196.png">
|
|
<link rel="shortcut icon" href="images/touch/apple-touch-icon.png">
|
|
<meta name="msapplication-tap-highlight" content="no" />
|
|
|
|
<!-- Tile icon for Win8 (144x144 + tile color) -->
|
|
<meta name="msapplication-TileImage" content="images/touch/apple-touch-icon-144x144-precomposed.png">
|
|
<meta name="msapplication-TileColor" content="#222222">
|
|
|
|
<!-- SEO: If mobile URL is different from desktop URL, add a canonical link to the desktop page -->
|
|
<!--
|
|
<link rel="canonical" href="http://www.example.com/" >
|
|
-->
|
|
|
|
<!-- Add to homescreen for Chrome on Android -->
|
|
<!--
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
-->
|
|
|
|
<!-- For iOS web apps. Delete if not needed. https://github.com/h5bp/mobile-boilerplate/issues/94 -->
|
|
<!--
|
|
<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="">
|
|
-->
|
|
|
|
<!-- This script prevents links from opening in Mobile Safari. https://gist.github.com/1042026 -->
|
|
<!--
|
|
<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>
|
|
-->
|
|
<!-- build:css styles/main.min.css -->
|
|
<link rel="stylesheet" href="styles/h5bp.css">
|
|
<!-- endbuild -->
|
|
<style>
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
background-color: #C9DAF8;
|
|
}
|
|
|
|
.tab-bar {
|
|
display: -ms-flexbox;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
|
|
width: 100%;
|
|
|
|
position: fixed;
|
|
|
|
left: 0;
|
|
bottom: 0;
|
|
|
|
-ms-flex-direction: row;
|
|
-webkit-flex-direction: row;
|
|
flex-direction: row;
|
|
|
|
-ms-flex-pack: justify;
|
|
-webkit-justify-content: space-around;
|
|
justify-content: space-around;
|
|
|
|
background: #3C78D8;
|
|
}
|
|
|
|
.tab-bar button {
|
|
width: 40px;
|
|
height:40px;
|
|
|
|
margin: 8px;
|
|
|
|
border: none;
|
|
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
|
|
border-radius: 100%;
|
|
|
|
-webkit-transition: background-color 0.4s ease-out;
|
|
transition: background-color 0.4s ease-out;
|
|
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.tab-bar button:hover{
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.tab-bar button:focus {
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
outline: 0;
|
|
}
|
|
|
|
.tab-bar button:active {
|
|
background-color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.tab-bar button.selected {
|
|
background-color: rgba(255, 255, 255, 1.0);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="tab-bar">
|
|
<button class="tab-btn tab-1 selected"></button>
|
|
<button class="tab-btn tab-2"></button>
|
|
<button class="tab-btn tab-3"></button>
|
|
<button class="tab-btn tab-4"></button>
|
|
</nav>
|
|
|
|
<script>
|
|
var tabBtns = document.querySelectorAll('.tab-bar > .tab-btn');
|
|
|
|
for(var i = 0; i < tabBtns.length; i++) { tabBtns[i].addEventListener('click', onTabClick, true);
|
|
}
|
|
|
|
function onTabClick(e) {
|
|
var currentTab = document.querySelector('.tab-bar > .tab-btn.selected');
|
|
if(currentTab) {
|
|
currentTab.classList.remove('selected');
|
|
}
|
|
var btn = e.target;
|
|
btn.classList.add('selected');
|
|
}
|
|
</script>
|
|
|
|
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
|
|
<script>
|
|
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
|
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
|
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
|
e.src='//www.google-analytics.com/analytics.js';
|
|
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
|
ga('create','UA-XXXXX-X');ga('send','pageview');
|
|
</script>
|
|
</body>
|
|
</html>
|