lencse-getmdl-dashboard
Version:
Free dashboard template with Material Design Lite edited by @lencse
509 lines (472 loc) • 26.3 kB
HTML
<!--
Material Design Lite
Copyright 2015 Google Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License
-->
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<link rel="icon" type="image/png" href="images/DB_16х16.png">
<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 Dashboard Lite</title>
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<!-- 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">
<!-- 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">
<!-- 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/">
-->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300,100,700,900' rel='stylesheet'
type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<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="search">Enter your query...</label>
</div>
</div>
<div class="material-icons mdl-badge mdl-badge--overlap mdl-button--icon notification" id="notification"
data-badge="23">
notifications_none
</div>
<ul class="mdl-menu mdl-list mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right mdl-shadow--2dp notifications-dropdown"
for="notification">
<li class="mdl-list__item">
You have 23 new notifications!
</li>
<li class="mdl-menu__item mdl-list__item list__item--border-top">
<span class="mdl-list__item-primary-content">
<span class="mdl-list__item-avatar background-color--primary">
<i class="material-icons">plus_one</i>
</span>
<span>You have 3 new orders.</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="label">just now</span>
</span>
</li>
<li class="mdl-menu__item mdl-list__item list__item--border-top">
<span class="mdl-list__item-primary-content">
<span class="mdl-list__item-avatar background-color--secondary">
<i class="material-icons">error_outline</i>
</span>
<span>Database error</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="label">1 min</span>
</span>
</li>
<li class="mdl-menu__item mdl-list__item list__item--border-top">
<span class="mdl-list__item-primary-content">
<span class="mdl-list__item-avatar background-color--primary">
<i class="material-icons">new_releases</i>
</span>
<span>The Death Star is built!</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="label">2 hours</span>
</span>
</li>
<li class="mdl-menu__item mdl-list__item list__item--border-top">
<span class="mdl-list__item-primary-content">
<span class="mdl-list__item-avatar background-color--primary">
<i class="material-icons">mail_outline</i>
</span>
<span>You have 4 new mails.</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="label">5 days</span>
</span>
</li>
<li class="mdl-list__item list__item--border-top">
<button href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">ALL NOTIFICATIONS</button>
</li>
</ul>
<div class="material-icons mdl-badge mdl-badge--overlap mdl-button--icon message" id="inbox" data-badge="4">
mail_outline
</div>
<ul class="mdl-menu mdl-list mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right mdl-shadow--2dp messages-dropdown"
for="inbox">
<li class="mdl-list__item">
You have 4 new messages!
</li>
<li class="mdl-menu__item mdl-list__item mdl-list__item--two-line list__item--border-top">
<span class="mdl-list__item-primary-content">
<span class="mdl-list__item-avatar background-color--primary">
<text>A</text>
</span>
<span>Alice</span>
<span class="mdl-list__item-sub-title">Birthday Party</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="label label--transparent">just now</span>
</span>
</li>
<li class="mdl-menu__item mdl-list__item mdl-list__item--two-line list__item--border-top">
<span class="mdl-list__item-primary-content">
<span class="mdl-list__item-avatar background-color--baby-blue">
<text>M</text>
</span>
<span>Mike</span>
<span class="mdl-list__item-sub-title">No theme</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="label label--transparent">5 min</span>
</span>
</li>
<li class="mdl-menu__item mdl-list__item mdl-list__item--two-line list__item--border-top">
<span class="mdl-list__item-primary-content">
<span class="mdl-list__item-avatar background-color--cerulean">
<text>D</text>
</span>
<span>Darth</span>
<span class="mdl-list__item-sub-title">Suggestion</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="label label--transparent">23 hours</span>
</span>
</li>
<li class="mdl-menu__item mdl-list__item mdl-list__item--two-line list__item--border-top">
<span class="mdl-list__item-primary-content">
<span class="mdl-list__item-avatar background-color--mint">
<text>D</text>
</span>
<span>Don McDuket</span>
<span class="mdl-list__item-sub-title">NEWS</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="label label--transparent">30 Nov</span>
</span>
</li>
<li class="mdl-list__item list__item--border-top">
<button href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">SHOW ALL MESSAGES</button>
</li>
</ul>
<div class="avatar-dropdown" id="icon">
<span>Luke</span>
<img src="images/Icon_header.png">
</div>
<ul class="mdl-menu mdl-list mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect mdl-shadow--2dp account-dropdown"
for="icon">
<li class="mdl-list__item mdl-list__item--two-line">
<span class="mdl-list__item-primary-content">
<span class="material-icons mdl-list__item-avatar"></span>
<span>Luke</span>
<span class="mdl-list__item-sub-title">Luke@skywalker.com</span>
</span>
</li>
<li class="list__item--border-top"></li>
<li class="mdl-menu__item mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">account_circle</i>
My account
</span>
</li>
<li class="mdl-menu__item mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">check_box</i>
My tasks
</span>
<span class="mdl-list__item-secondary-content">
<span class="label background-color--primary">3 new</span>
</span>
</li>
<li class="mdl-menu__item mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">perm_contact_calendar</i>
My events
</span>
</li>
<li class="list__item--border-top"></li>
<li class="mdl-menu__item mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">settings</i>
Settings
</span>
</li>
<li class="mdl-menu__item mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon text-color--secondary">exit_to_app</i>
Log out
</span>
</li>
</ul>
<button id="more"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect mdl-shadow--2dp settings-dropdown"
for="more">
<li class="mdl-menu__item">
Settings
</li>
<a class="mdl-menu__item" href="https://github.com/CreativeIT/getmdl-dashboard/issues">
Support
</a>
<li class="mdl-menu__item">
F.A.Q.
</li>
</ul>
</div>
</header>
<div class="mdl-layout__drawer">
<header>darkboard</header>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="index.html">
<i class="material-icons" role="presentation">dashboard</i>
Dashboard
</a>
<div class="sub-navigation sub-navigation--show">
<a class="mdl-navigation__link mdl-navigation__link--current">
<i class="material-icons">view_comfy</i>
UI
<i class="material-icons">keyboard_arrow_down</i>
</a>
<div class="mdl-navigation">
<a class="mdl-navigation__link" href="ui-buttons.html">
Buttons
</a>
<a class="mdl-navigation__link mdl-navigation__link--current" href="ui-cards.html">
Cards
</a>
<a class="mdl-navigation__link" href="ui-colors.html">
Colors
</a>
<a class="mdl-navigation__link" href="ui-components.html">
Components
</a>
<a class="mdl-navigation__link" href="ui-icons.html">
Icons
</a>
<a class="mdl-navigation__link" href="ui-typography.html">
Typography
</a>
</div>
</div>
<a class="mdl-navigation__link" href="forms.html">
<i class="material-icons" role="presentation">person</i>
Account
</a>
<a class="mdl-navigation__link" href="maps.html">
<i class="material-icons" role="presentation">map</i>
Maps
</a>
<a class="mdl-navigation__link" href="charts.html">
<i class="material-icons">multiline_chart</i>
Charts
</a>
<div class="mdl-layout-spacer"></div>
<a class="mdl-navigation__link" href="https://github.com/CreativeIT/getmdl-dashboard">
<i class="material-icons" role="presentation">link</i>
GitHub
</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="mdl-grid ui-cards">
<div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-cell--4-col-phone">
<h3>Basic cards</h3>
</div>
<div class="mdl-cell mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Shanghai</h2>
</div>
<div class="mdl-card__supporting-text">
<small>City in China</small>
Shanghai, on China’s central coast, is the country's biggest city and a global financial hub.
Its heart is the Bund, a famed waterfront promenade lined with colonial-era buildings.
Across the Huangpu River rises the Pudong district’s futuristic skyline, including
632m Shanghai Tower and the Oriental Pearl TV Tower, with distinctive pink spheres.
Sprawling Yu Garden has traditional pavilions, towers and ponds.
<br><br>
<b>Weather:</b> 9°C, Wind NE at 11 km/h, 79% Humidity
<br>
<b>Local time:</b> Thursday 9:58 PM
<br>
<b>Population:</b> 24.15 million (2015)
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Moscow</h2>
</div>
<div class="mdl-card__supporting-text mdl-card--expand">
<small>Capital of Russia</small>
Moscow, on the Moskva River in western Russia, is the nation’s cosmopolitan capital.
In its historic core is the Kremlin, a complex that’s home to the president and tsarist treasures in the Armoury.
Outside its walls is Red Square, Russia's symbolic center. It's home to Lenin’s Mausoleum,
the State Historical Museum's comprehensive collection and St. Basil’s Cathedral, known for its colorful,
onion-shaped domes.
<br><br>
<b>Weather:</b> 9°C, Wind W at 26 km/h, 47% Humidity
<br>
<b>Local time:</b> Thursday 5:13 PM
<br>
<b>Population:</b> 11.92 million (2012)
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button color-text--orange mdl-js-button mdl-js-ripple-effect"
href="https://www.google.by/maps/place/Moscow,+Russia/@55.7494733,37.35232,10z/data=!3m1!4b1!4m5!3m4!1s0x46b54afc73d4b0c9:0x3d44d6cc5757cf4c!8m2!3d55.755826!4d37.6173"
target="_blank">
Show on map
</a>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">London</h2>
</div>
<div class="mdl-card__supporting-text mdl-card--expand">
<small>Capital of England</small>
London, the capital of England and the United Kingdom, is a 21st-century city with history stretching back to Roman times.
At its centre stand the imposing Houses of Parliament, the iconic ‘Big Ben’ clock tower and Westminster Abbey,
site of British monarch coronations. Across the Thames River, the London Eye observation wheel provides panoramic
views of the South Bank cultural complex, and the entire city.
<br><br>
<b>Weather:</b> 11°C, Wind NE at 31 km/h, 57% Humidity
<br>
<b>Local time:</b> Thursday 2:22 PM
<br>
<b>Population:</b> 8.674 million (2015)
</div>
<div class="mdl-card__actions">
<a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored-yellow pull-right"
href="https://www.google.by/maps/place/London,+UK/data=!4m2!3m1!1s0x47d8a00baf21de75:0x52963a5addd52a99?sa=X&ved=0ahUKEwig76SihPfSAhVCCpoKHTuzBDsQ8gEIeTAN"
target="_blank">
Show on map
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">more_vert</i>
</button>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-cell--4-col-phone">
<h3>Image cards</h3>
</div>
<div class="mdl-cell mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Istanbul</h2>
</div>
<div class="mdl-card__supporting-text">
<small>City in Turkey</small>
Istanbul is a major city in Turkey that straddles Europe and Asia across the Bosphorus Strait.
Its Old City reflects cultural influences of the many empires that once ruled here.
In the Sultanahmet district, the open-air, Roman-era Hippodrome was for centuries the site of chariot races,
and Egyptian obelisks also remain.
The iconic Byzantine Hagia Sophia features a soaring 6th-century dome and rare Christian mosaics.
<br><br>
<b>Weather:</b> 12°C, Wind S at 13 km/h, 71% Humidity
<br>
<b>Local time:</b> Friday 4:00 PM
<br>
<b>Population:</b> 14.8 million (Dec 31, 2016)
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Tokyo</h2>
</div>
<div class="mdl-card__supporting-text mdl-card--expand">
<small>Capital of Japan</small>
Tokyo, officially Tokyo Metropolis, is the capital of Japan and one of its 47 prefectures.
The Greater Tokyo Area is the most populous metropolitan area in the world.
It is the seat of the Emperor of Japan and the Japanese government.
<a class="color-text--light-blue" href="https://en.wikipedia.org/wiki/Tokyo" target="_blank">Wikipedia</a>
<br><br>
<b>Weather:</b> 5°C, Wind NW at 26 km/h, 54% Humidity
<br>
<b>Local time:</b> Friday 10:04 PM
<br>
<b>Population:</b> 13.62 million (Jul 31, 2016)
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button color-text--light-blue mdl-js-button mdl-js-ripple-effect"
href="https://www.google.by/maps/place/Tokyo,+Japan/@35.6730185,139.4302008,10z/data=!3m1!4b1!4m5!3m4!1s0x605d1b87f02e57e7:0x2e01618b22571b89!8m2!3d35.6894875!4d139.6917064"
target="_blank">
Show on map
</a>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">São Paulo</h2>
</div>
<div class="mdl-card__supporting-text mdl-card--expand">
<small>Municipality in Brazil</small>
São Paulo, Brazil’s vibrant financial center, is among the world's most populous cities,
with numerous cultural institutions and a rich architectural tradition.
Its iconic buildings range from its neo-Gothic cathedral and the 1929 Martinelli skyscraper to modernist
architect Oscar Niemeyer’s curvy Edifício Copan.
The colonial-style Pátio do Colégio church marks where Jesuit priests founded the city in 1554.
<br><br>
<b>Weather:</b> 24°C, Wind E at 10 km/h, 62% Humidity
<br>
<b>Local time:</b> Friday 10:05 AM
<br>
<b>Population:</b> 12.04 million (2016)
</div>
<div class="mdl-card__actions">
<a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored-light-blue pull-right"
href="https://www.google.by/maps/place/S%C3%A3o+Paulo,+State+of+S%C3%A3o+Paulo,+Brazil/data=!4m2!3m1!1s0x94ce448183a461d1:0x9ba94b08ff335bae?sa=X&ved=0ahUKEwjQ1pf_g_fSAhVHWSwKHQoNDc0Q8gEIjwEwEQ"
target="_blank">
Show on map
</a>
</div>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">favorite_border</i>
</button>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- inject:js -->
<!-- endinject -->
</body>
</html>