material-theme-creator
Version:
Converting Angular Material themes to CSS Custom Properties (Variables)
234 lines (219 loc) • 47.2 kB
HTML
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Material Theme Creator</title><link rel="stylesheet" href="styles.css"><link href="./styles.css" rel="stylesheet"></head><body><input class="visually-hidden" type="checkbox" id="switch-theme"><div class="page"><div class="theme-background"></div><main><div class="header"><label class="switch-theme" for="switch-theme" title="Switch theme"><span class="icon"><svg class="moon" width="48" height="48"><use href="./assets/sprite.svg#moon"></use></svg><svg class="sun" width="48" height="48"><use href="./assets/sprite.svg#sun"></use></svg></span><span class="prompt"><svg width="64" height="64"><use href="./assets/sprite.svg#arrow"></use></svg><span>Click here to switch theme</span></span></label><h1>Material Theme Creator</h1></div><p><a href="https://github.com/Artik-Man/material-theme-creator" target="_blank">GitHub</a> | <a href="https://artik-man.github.io/material-theme-creator-demo-page/" target="_blank">Demo page</a></p><section><h2>Create a custom theme from one color in real time. It's pure CSS, without JavaScript</h2><div class="create-theme"><h3>Hue</h3><div class="value -h"></div><div class="mdc-slider mdc-slider--discrete" data-step="1" data-id="creator-h"><div class="mdc-slider__track"><div class="mdc-slider__track--inactive"></div><div class="mdc-slider__track--active"><div class="mdc-slider__track--active_fill"></div></div></div><div class="mdc-slider__thumb" role="slider" tabindex="0" aria-label="Hue" aria-valuemin="0" aria-valuemax="360" aria-valuenow="220"><div class="mdc-slider__value-indicator-container"><div class="mdc-slider__value-indicator"><span class="mdc-slider__value-indicator-text">220</span></div></div><div class="mdc-slider__thumb-knob"></div></div></div><h3>Saturation</h3><div class="value -s"></div><div class="mdc-slider mdc-slider--discrete" data-step="1" data-id="creator-s"><div class="mdc-slider__track"><div class="mdc-slider__track--inactive"></div><div class="mdc-slider__track--active"><div class="mdc-slider__track--active_fill"></div></div></div><div class="mdc-slider__thumb" role="slider" tabindex="0" aria-label="Saturation" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80"><div class="mdc-slider__value-indicator-container"><div class="mdc-slider__value-indicator"><span class="mdc-slider__value-indicator-text">80</span></div></div><div class="mdc-slider__thumb-knob"></div></div></div><h3>Lightness</h3><div class="value -l"></div><div class="mdc-slider mdc-slider--discrete" data-step="1" data-id="creator-l"><div class="mdc-slider__track"><div class="mdc-slider__track--inactive"></div><div class="mdc-slider__track--active"><div class="mdc-slider__track--active_fill"></div></div></div><div class="mdc-slider__thumb" role="slider" tabindex="0" aria-label="Lightness" aria-valuemin="0" aria-valuemax="100" aria-valuenow="60"><div class="mdc-slider__value-indicator-container"><div class="mdc-slider__value-indicator"><span class="mdc-slider__value-indicator-text">60</span></div></div><div class="mdc-slider__thumb-knob"></div></div></div><h3>Contrast threshold</h3><div class="value -cc">65%</div><div class="mdc-slider mdc-slider--discrete" data-step="1" data-id="creator-cc"><div class="mdc-slider__track"><div class="mdc-slider__track--inactive"></div><div class="mdc-slider__track--active"><div class="mdc-slider__track--active_fill"></div></div></div><div class="mdc-slider__thumb" role="slider" tabindex="0" aria-label="Contrast threshold" aria-valuemin="0" aria-valuemax="100" aria-valuenow="65"><div class="mdc-slider__value-indicator-container"><div class="mdc-slider__value-indicator"><span class="mdc-slider__value-indicator-text">65</span></div></div><div class="mdc-slider__thumb-knob"></div></div></div></div><div class="your-theme"><span class="point" data-point="50">50<div class="info">var(--my-theme-50)<br><br>hsla(<br> var(--my-theme-50)-h,<br> var(--my-theme-50)-s,<br> var(--my-theme-50)-l,<br> 100%,<br>)</div></span><span class="point" data-point="100">100<div class="info">var(--my-theme-100)<br><br>hsla(<br> var(--my-theme-100)-h,<br> var(--my-theme-100)-s,<br> var(--my-theme-100)-l,<br> 100%,<br>)</div></span><span class="point" data-point="200">200<div class="info">var(--my-theme-200)<br><br>hsla(<br> var(--my-theme-200)-h,<br> var(--my-theme-200)-s,<br> var(--my-theme-200)-l,<br> 100%,<br>)</div></span><span class="point" data-point="300">300<div class="info">var(--my-theme-300)<br><br>hsla(<br> var(--my-theme-300)-h,<br> var(--my-theme-300)-s,<br> var(--my-theme-300)-l,<br> 100%,<br>)</div></span><span class="point" data-point="400">400<div class="info">var(--my-theme-400)<br><br>hsla(<br> var(--my-theme-400)-h,<br> var(--my-theme-400)-s,<br> var(--my-theme-400)-l,<br> 100%,<br>)</div></span><span class="point" data-point="500">500<div class="info">var(--my-theme-500)<br><br>hsla(<br> var(--my-theme-500)-h,<br> var(--my-theme-500)-s,<br> var(--my-theme-500)-l,<br> 100%,<br>)</div></span><span class="point" data-point="600">600<div class="info">var(--my-theme-600)<br><br>hsla(<br> var(--my-theme-600)-h,<br> var(--my-theme-600)-s,<br> var(--my-theme-600)-l,<br> 100%,<br>)</div></span><span class="point" data-point="700">700<div class="info">var(--my-theme-700)<br><br>hsla(<br> var(--my-theme-700)-h,<br> var(--my-theme-700)-s,<br> var(--my-theme-700)-l,<br> 100%,<br>)</div></span><span class="point" data-point="800">800<div class="info">var(--my-theme-800)<br><br>hsla(<br> var(--my-theme-800)-h,<br> var(--my-theme-800)-s,<br> var(--my-theme-800)-l,<br> 100%,<br>)</div></span><span class="point" data-point="900">900<div class="info">var(--my-theme-900)<br><br>hsla(<br> var(--my-theme-900)-h,<br> var(--my-theme-900)-s,<br> var(--my-theme-900)-l,<br> 100%,<br>)</div></span><span class="point" data-point="A100">A100<div class="info">var(--my-theme-A100)<br><br>hsla(<br> var(--my-theme-A100)-h,<br> var(--my-theme-A100)-s,<br> var(--my-theme-A100)-l,<br> 100%,<br>)</div></span><span class="point" data-point="A200">A200<div class="info">var(--my-theme-A200)<br><br>hsla(<br> var(--my-theme-A200)-h,<br> var(--my-theme-A200)-s,<br> var(--my-theme-A200)-l,<br> 100%,<br>)</div></span><span class="point" data-point="A400">A400<div class="info">var(--my-theme-A400)<br><br>hsla(<br> var(--my-theme-A400)-h,<br> var(--my-theme-A400)-s,<br> var(--my-theme-A400)-l,<br> 100%,<br>)</div></span><span class="point" data-point="A700">A700<div class="info">var(--my-theme-A700)<br><br>hsla(<br> var(--my-theme-A700)-h,<br> var(--my-theme-A700)-s,<br> var(--my-theme-A700)-l,<br> 100%,<br>)</div></span></div><form class="download-theme" id="form"><label class="pure-material-textfield-standard"><input class="mdc-text-field__input" placeholder="Theme name" id="theme-name" value="my-theme"><span>Theme name</span></label><button class="mdc-button mdc-button--raised"><span class="mdc-button__label">Download<span class="hidden-xs"> theme</span></span></button></form></section><section class="markdown"><h1>Material Theme Creator</h1><p>How to use themes correctly on your site.</p><p>PLUS Converting Angular Material themes to CSS Custom Properties (Variables)</p><p><a href="https://artik-man.github.io/material-theme-creator/">Full Documentation: artik-man.github.io/material-theme-creator</a></p><h2>Contents</h2><ul><li>How it works?</li><li>How to use Material Theme Creator<ul><li>Pure CSS use</li><li>Use with SCSS</li><li>Use with Angular Material</li></ul></li><li>Description of functionality</li></ul><h2>How it works?</h2><p>We use CSS Custom Properties and HSL color space for dynamic theme colors’ calculation.</p><pre><code class="language-css">:root {
--primary-h: 260;
--primary-s: 80%;
--primary-l: 40%;
--primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}
</code></pre><p>We have already created a color consisting of H, S and L components of the HSL color space. But how can we create the whole theme palette? We need to do some calculations for this.</p><pre><code class="language-css"> :root {
--primary-400: hsl(
calc(var(--primary-h) * var(--h-400)),
calc(var(--primary-s) * var(--s-400)),
calc(var(--primary-l) * var(--l-400))
);
--primary-500: hsl(
calc(var(--primary-h) * var(--h-500)),
calc(var(--primary-s) * var(--s-500)),
calc(var(--primary-l) * var(--l-500))
);
}
</code></pre><p>In fact, the code is a bit more complicated, but this piece of code is enough to understand the algorithm.</p><h2>How to use Material Theme Creator</h2><h3>1. Pure CSS use</h3><p>You can download your theme by clicking on the button "Download theme" which is located above. Then you should include it to your page in any convenient way. For example:</p><pre><code class="language-html">
<link href="./my-theme.css" rel="stylesheet">
</code></pre><p>After that you can create the second theme style:</p><pre><code class="language-css">.second-theme {
--my-theme-h: 190;
--my-theme-s: 80;
--my-theme-l: 40;
--my-theme-contrast-threshold: 50%;
}
</code></pre><p>And you can apply the theme with some button:</p><pre><code class="language-javascript">const changeThemeButton = document.querySelector('button.change-theme-btn');
changeThemeButton.addEventListener('click', () => {
document.documentElement.classList.toggle('second-theme');
});
</code></pre><p>How can you use theme on your elements? 14 theme colors will be available for you. For each of these colors you will have access to one contrasting color. See example:</p><pre><code class="language-css">button {
background-color: var(--my-theme);
color: var(--my-theme-contrast);
}
button:hover {
background-color: var(--my-theme-700);
color: var(--my-theme-700-contrast);
}
</code></pre><p>How can we set transparency of the color? You can adjust it yourself:</p><pre><code class="language-css">div {
background-color: hsla(
var(--my-theme-500-h),
var(--my-theme-500-s),
var(--my-theme-500-l),
62% /* alpha */
);
}
</code></pre><hr><h3>2. Use with SCSS</h3><p>You can have more options to manage the theme if you use SCSS.</p><h4>Installation:</h4><pre><code class="language-bash">npm install material-theme-creator
</code></pre><h4>Use:</h4><pre><code class="language-scss">@use "~material-theme-creator/core" as mtc;
// root variables initializing
@include mtc.init();
body {
// Creating a theme based on some color
// Passing arguments to the mixin:
// 1. theme name
// 2. some color
// 3. contrast threshold (for fonts)
@include mtc.create-variables-from-color('primary', #cc3300, 50%);
}
body.secondary-theme {
@include mtc.update-theme('primary', #6200ee, 55%);
}
button {
color: mtc.color-contrast('primary');
background-color: mtc.color('primary');
&:hover {
color: mtc.color-contrast('primary', 700);
background-color: mtc.color('primary', 700, 92%);
}
}
</code></pre><hr><h3>3. Use with <a href="https://material.angular.io/">Angular Material</a></h3><p>You can use ngx-mtc module to convert Angular Material themes to use CSS Custom Properties.</p><h4>Installation:</h4><pre><code class="language-bash">npm install material-theme-creator
</code></pre><h4>Setup</h4><pre><code class="language-scss">@use '~@angular/material' as mat;
@use "~material-theme-creator/ngx-mtc" as ngx-mtc;
@include mat.core();
@include ngx-mtc.init();
$primary-map: ngx-mtc.create-theme-map('primary');
$accent-map: ngx-mtc.create-theme-map('accent');
$warn-map: ngx-mtc.create-theme-map('warn');
</code></pre><h4>Set up main theme</h4><p>Use <code>ngx-mtc.create-variables-from-color</code> to create theme from one color. In this case, each theme will consist of just a few lines of code.</p><p>You can also use <code>ngx-mtc.create-variables-from-map</code> to create theme from color-map like <code>mat.$red-palette</code></p><p>WARNING: The <code>mat.define-light-theme</code> and <code>mat.define-dark-theme</code> mixins generate a lot of CSS code for each theme. Use this as sparingly as possible.</p><pre><code class="language-scss">:root {
--is-dark-theme: 1; // Is dark theme? 1 or 0;
@include ngx-mtc.theme-base(); // Creates base colors
// Creates theme colors
@include ngx-mtc.create-variables-from-color('primary', #009688, 38%); // can update
@include ngx-mtc.create-variables-from-color('accent', #2196f3, 57%); // can update
@include ngx-mtc.create-variables-from-map('warn', mat.$red-palette); // can not update this theme
}
$primary-palette: mat.define-palette($primary-map);
$accent-palette: mat.define-palette($accent-map);
$warn-palette: mat.define-palette($warn-map);
// Custom theme
$theme: ngx-mtc.custom-theme($primary-palette, $accent-palette, $warn-palette);
// Creates Angular Material Theme
@include mat.all-component-themes($theme);
</code></pre><h4>Set up second theme</h4><pre><code class="language-scss"> html.second-theme {
--is-dark-theme: 0;
@include ngx-mtc.update-theme('primary', #142148, 45%);
@include ngx-mtc.update-theme('accent', #658e14, 50%);
}
</code></pre><h4>How to use</h4><p>Use standard Angular material <code>mat.color</code> and <code>mat.contrast</code> mixins to extract specific colors from the theme.</p><pre><code class="language-scss">button {
color: mat.contrast($primary-map, 500);
background-color: mat.color($primary-map, 500);
&:hover {
color: mat.contrast($primary-map, 700);
background-color: mat.color($primary-map, 700, 92%);
}
}
</code></pre><h2>Description of functionality</h2><h3>Core</h3><pre><code class="language-scss">@use '~material-theme-creator/core' as mtc;
</code></pre><h4>init()</h4><p>Library Initialization</p><pre><code class="language-scss">@include mtc.init()
</code></pre><h4>create-variables-from-color($theme-name, $color, $contrast-threshold: 50%)</h4><p>Creates CSS Custom Properties for mat-palette from one color</p><pre><code class="language-scss">:root {
@include mtc.create-variables-from-color('primary', #f00, 45%);
}
</code></pre><p>Returns CSS Custom Properties:</p><pre><code class="language-css">:root {
--primary: hsl(...);
--primary-50: hsl(...);
--primary-50-contrast: hsl(...);
--primary-100: hsl(...);
--primary-100-contrast: hsl(...);
/*...*/
--primary-A700: hsl(...);
--primary-A700-contrast: hsl(...);
}
</code></pre><h4>update-theme($theme-name, $color, $contrast-threshold: 50%)</h4><p>Update theme</p><pre><code class="language-scss">.second-theme {
@include mtc.update-theme('primary', hsl(212, 95%, 80%), 55%);
}
</code></pre><p>Returns CSS Custom Properties: Hue, Lightness, Saturation for CSS Color and contrast threshold for this theme</p><pre><code class="language-css">.second-theme {
--primary-h: 212;
--primary-s: 95;
--primary-l: 80;
--primary-contrast-threshold: 50%;
}
</code></pre><h4>color($theme-name, $index: 500, $alpha: 100%)</h4><p>Get theme color</p><pre><code class="language-scss">button {
background: mtc.color('primary', 400, 70%);
}
</code></pre><h4>color-contrast($theme-name, $index: 500)</h4><p>Get theme contrast color</p><pre><code class="language-scss">button {
color: mtc.color-contrast('primary', 400);
}
</code></pre><h4>theme-component($min:0, $max:100, $unit: 1, $dark-theme-variable: --is-dark-theme)</h4><p>Returns a value according to the current theme (light/dark) Based on CSS Custom Properties</p><pre><code class="language-scss">main {
background: hsl(123deg, 85%, #{mtc.theme-component(34, 72, 1%)});
}
</code></pre><p>In light theme:</p><pre><code class="language-css">main {
background: hsl(123deg, 85%, 34%);
}
</code></pre><p>In dark theme:</p><pre><code class="language-css">main {
background: hsl(123deg, 85%, 72%);
}
</code></pre><h4>theme-color($light, $dark, $dark-theme-variable: --is-dark-theme)</h4><p>Returns a color according to current theme (light/dark) Based on CSS Custom Properties</p><pre><code class="language-scss">main {
background: mtc.theme-color(#fff, #333);
}
</code></pre><p>In light theme:</p><pre><code class="language-css">main {
background: #fff;
}
</code></pre><p>In dark theme:</p><pre><code class="language-css">main {
background: #333;
}
</code></pre><h3>NGX</h3><pre><code class="language-scss">@use '~material-theme-creator/ngx-mtc' as ngx-mtc;
</code></pre><h4>init()</h4><p>Library Initialization</p><pre><code class="language-scss">@include ngx-mtc.init();
</code></pre><h4>create-variables-from-color($theme-name, $color, $contrast-threshold: 50%)</h4><p>Creates CSS Custom Properties for mat-palette from one color</p><pre><code class="language-scss">:root {
@include ngx-mtc.create-variables-from-color('primary', #f00, 45%);
}
</code></pre><p>Returns CSS Custom Properties:</p><pre><code class="language-css">:root {
--primary: hsl(...);
--primary-50: hsl(...);
--primary-50-contrast: hsl(...);
--primary-100: hsl(...);
--primary-100-contrast: hsl(...);
/*...*/
--primary-A700: hsl(...);
--primary-A700-contrast: hsl(...);
}
</code></pre><h4>create-variables-from-map($theme-name, $theme-map)</h4><p>Creates CSS Custom Properties for mat-palette from mat-palette</p><p>You can use theme-map from <code>~@angular/material/core/theming/_palette</code> (e.g. <code>$red-palette</code> or <code>$pink-palette</code>...)</p><pre><code class="language-scss"> @include ngx-mtc.create-variables-from-map('primary', mat.$red-palette);
</code></pre><p>Returns CSS Custom Properties:</p><pre><code class="language-css">:root {
--primary: hsl(...);
--primary-50: hsl(...);
--primary-50-contrast: hsl(...);
--primary-100: hsl(...);
--primary-100-contrast: hsl(...);
/*...*/
--primary-A700: hsl(...);
--primary-A700-contrast: hsl(...);
}
</code></pre><h4>theme-base()</h4><p>Creates base colors CSS Variables for angular material theme.</p><pre><code class="language-scss">:root {
@include ngx-mtc.theme-base();
}
</code></pre><p>Returns CSS Custom Properties:</p><pre><code class="language-css">:root {
--mtc-background-status-bar: hsl(...);
--mtc-background-app-bar: hsl(...);
--mtc-background-background: hsl(...);
--mtc-background-hover: hsl(...);
/*...*/
--mtc-foreground-slider-off-active: hsl(...);
</code></pre><h4>update-theme($theme-name, $color, $contrast-threshold: 50%)</h4><p>Update theme</p><pre><code class="language-scss">.second-theme {
@include ngx-mtc.update-theme('primary', hsl(212, 95%, 80%), 55%);
}
</code></pre><p>Returns CSS Custom Properties: Hue, Lightness, Saturation for CSS Color and contrast threshold for this theme</p><pre><code class="language-css">.second-theme {
--primary-h: 212;
--primary-s: 95;
--primary-l: 80;
--primary-contrast-threshold: 50%;
}
</code></pre><h4>create-theme-map($theme-name)</h4><p>Creates a theme-map for use in Angular Material</p><pre><code class="language-scss">$primary-map: ngx-mtc.create-theme-map('primary');
</code></pre><h4>custom-theme($primary, $accent, $warn)</h4><p>Set base colors CSS Variables into angular material</p><pre><code class="language-scss">$primary-palette: mat.define-palette($primary-map);
$accent-palette: mat.define-palette($accent-map);
$warn-palette: mat.define-palette($warn-map);
$theme: ngx-mtc.custom-theme($primary-palette, $accent-palette, $warn-palette);
</code></pre><h4>color($theme-name, $index: 500, $alpha: 100%)</h4><p>Get theme color</p><pre><code class="language-scss">button {
background: ngx-mtc.color('primary', 400, 70%);
}
</code></pre><h4>color-contrast($theme-name, $index: 500)</h4><p>Get theme contrast color</p><pre><code class="language-scss">button {
color: ngx-mtc.color-contrast('primary', 400);
}
</code></pre><h4>theme-color($light, $dark, $dark-theme-variable: --is-dark-theme)</h4><p>Returns a color according to current theme (light/dark) Based on CSS Custom Properties</p><pre><code class="language-scss">main {
background: ngx-mtc.theme-color(#fff, #333);
}
</code></pre><p>In light theme:</p><pre><code class="language-css">main {
background: #fff;
}
</code></pre><p>In dark theme:</p><pre><code class="language-css">main {
background: #333;
}
</code></pre></section><section><h2 id="article-testing">Testing [<code>@mixin create-variables-from-color</code>]</h2><div class="themes"><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div><div class="theme"><span class="point" data-point="50">50</span><span class="point" data-point="100">100</span><span class="point" data-point="200">200</span><span class="point" data-point="300">300</span><span class="point" data-point="400">400</span><span class="point" data-point="500">500</span><span class="point" data-point="600">600</span><span class="point" data-point="700">700</span><span class="point" data-point="800">800</span><span class="point" data-point="900">900</span><span class="point" data-point="A100">A100</span><span class="point" data-point="A200">A200</span><span class="point" data-point="A400">A400</span><span class="point" data-point="A700">A700</span></div></div></section></main></div><div class="test"></div><script src="./main.js"></script></body></html>