786db4d3e9
Add select indicator Animate selector circle Support for selecting 2 colors Make marker all nice and pretty Show selector numbers Add shadows to selected fields Don't allow reselection of secondary color Fix font baseline issue Avoid some white lines in wheel Add overlap to tiles New SVG filter for shadow Incorporate code into MaterialCustomizer prototype Revert "New SVG filter for shadow" This reverts commit bc23f0d2ba36e6181b527fb87f7b41eb3333cea2. Stronger shadow Refactor init procedure into subroutines First steps of customizer logic recycling Actually call template generation Implement forbidden accents Remove dead code Clean up CSS Make wheel scale Implement new customizer preview Cross browser check Remove slashes Give max-width to customizer Make jshint behave
86 lines
4.5 KiB
HTML
86 lines
4.5 KiB
HTML
<!doctype html>
|
||
<html lang="">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="description" content="">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Material Design Lite customizer</title>
|
||
|
||
<link href="//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel='stylesheet'>
|
||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||
rel="stylesheet">
|
||
|
||
<link rel="stylesheet" href="{{page.include_prefix}}material.min.css" id="main-stylesheet">
|
||
<link rel="stylesheet" href="{{page.include_prefix}}assets/customizer.css">
|
||
</head>
|
||
<body class="mdl-gen" onload="init();">
|
||
<div class="mdl-grid">
|
||
<div class="mdl-gen__panel mdl-gen__panel--left mdl-cell mdl-cell--6-col-desktop mdl-cell--8-col">
|
||
<div id="wheel">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||
<defs>
|
||
<filter id="drop-shadow">
|
||
<feGaussianBlur in="SourceAlpha" stdDeviation="3.2"/>
|
||
<feOffset dx="0" dy="0" result="offsetblur"/>
|
||
<feFlood flood-color="rgba(0,0,0,1)"/>
|
||
<feComposite in2="offsetblur" operator="in"/>
|
||
<feMerge>
|
||
<feMergeNode/>
|
||
<feMergeNode in="SourceGraphic"/>
|
||
</feMerge>
|
||
</filter>
|
||
</defs>
|
||
<g class="wheel--maing"></g>
|
||
</svg>
|
||
<div class="mdl-gen-download">
|
||
<a href="#" id="download" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--fab"><i class="material-icons">file_download</i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mdl-gen__panel--right mdl-gen__panel mdl-cell mdl-cell--6-col-desktop mdl-cell--8-col">
|
||
<div class="mdl-gen__desc">
|
||
<strong>Custom CSS theme builder</strong>
|
||
<p>Click on the color wheel to choose a primary (1) and accent (2) color to preview the theme below. When you’ve selected a color combination you like, download the CSS by clicking the white button in the middle.</p>
|
||
</div>
|
||
<div class="mdl-gen__preview">
|
||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||
<header class="mdl-layout__header">
|
||
<svg class="mdl-layout-icon" width="411px" height="406px" viewBox="0 0 411 406" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||
<g transform="translate(-51.000000, -54.000000)" fill="currentColor">
|
||
<path d="M253.532807,381.627 L205.905373,459.1512 L75.2987939,365.2047 L137.208794,290.0547 L51,265.8834 L100.217083,116.7498 L183.176447,150.0543 L176.402456,54 L337.901996,54 L331.203531,149.0202 L409.306732,116.4465 L461.243662,265.7448 L371.760263,290.7036 L429.826513,365.6628 L302.333596,459.2493 L253.532807,381.627 Z M222.176831,106.2 L291.098533,106.2 L282.729084,224.796484 L383.182429,182.939488 L404.947387,245.446521 L297.795289,275.304737 L368.114228,365.995226 L313.701833,405.9 L252.592681,308.789934 L192.876775,405.9 L137.348587,365.995226 L212.130699,275.304737 L105.539492,245.446521 L126.18666,182.939488 L230.548276,224.796484 L222.176831,106.2 Z"></path>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
<div class="mdl-layout__header-row">
|
||
<span class="mdl-layout-title">Theme Preview</span>
|
||
</div>
|
||
</header>
|
||
<div class="mdl-layout__drawer">
|
||
<span class="mdl-layout-title">Theme Preview</span>
|
||
<nav class="mdl-navigation">
|
||
<a class="mdl-navigation__link" href="#">Some</a>
|
||
<a class="mdl-navigation__link" href="#">Links</a>
|
||
<a class="mdl-navigation__link" href="#">Here</a>
|
||
</nav>
|
||
</div>
|
||
<main class="mdl-layout__content">
|
||
<h3>Try it out</h3>
|
||
<p>
|
||
Lorem ipsum dolor sit amet.
|
||
</p>
|
||
<button class="mdl-button mdl-button--colored mdl-button--raised">BUTTON</button>
|
||
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect">
|
||
<i class="material-icons">email</i>
|
||
</button>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="{{page.include_prefix}}assets/customizer.js"></script>
|
||
<script src="{{page.include_prefix}}material.min.js"></script>
|
||
</body>
|
||
</html>
|