diff options
| author | codecalm <codecalm@gmail.com> | 2020-03-09 22:04:18 +0100 |
|---|---|---|
| committer | codecalm <codecalm@gmail.com> | 2020-03-09 22:04:18 +0100 |
| commit | 13dc327e8e61ac61bf2fbc75cbefd316412cb9e5 (patch) | |
| tree | 01a5a727481e76bdd5ec3bb8deb4d9e4d0fcb672 /src/index.html | |
| parent | crop, copyright, rotate (diff) | |
| download | tabler-icons-13dc327e8e61ac61bf2fbc75cbefd316412cb9e5.tar.xz | |
folder clean
Diffstat (limited to 'src/index.html')
| -rw-r--r-- | src/index.html | 160 |
1 files changed, 160 insertions, 0 deletions
diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..c0624f0 --- /dev/null +++ b/src/index.html @@ -0,0 +1,160 @@ +--- +--- +<!doctype html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" + content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> + <meta http-equiv="X-UA-Compatible" content="ie=edge"> + + <link rel="stylesheet" href="editor.css"> + <title>Tabler Icons</title> + + <style> + body { + display: none; + } + </style> +</head> +<body> +<div class="container"> + <div class="box"> + + {% assign icons = site.icons %} + + {% assign first-icon = site.icons | reverse | first %} + {% assign slug = first-icon.slug %} + {% capture first-icon %} + {% include icon.html name=slug %} + {% endcapture %} + + <div class="row mb js-icon-manager"> + <div class="col"> + + <div class="icon-preview-wrap"> + <div class="icon-preview"> + {{ first-icon }} + {{ first-icon }} + </div> + </div> + </div> + <div class="col-aside"> + + <h1 class="icon-title js-icon-name">{{ slug }}</h1> + + <div class="mb"> + <button class="btn"> + {{ first-icon }} Button + </button> + <button class="btn btn-icon"> + {{ first-icon }} + </button> + <button class="btn btn-link"> + {{ first-icon }} Button + </button> + </div> + + <div class="input-icon mb"> + <input type="text" class="input" value="Input value"> + {{ first-icon }} + </div> + + <div class="input-icon icon-left mb"> + {{ first-icon }} + <input type="text" class="input" placeholder="Input placeholder"> + </div> + + <div class="mb"> + <div class="avatar">{{ first-icon }}</div> + <div class="avatar avatar-sm">{{ first-icon }}</div> + + <a href="#">{{ first-icon }} Link</a> + </div> + + <div class="tabs mb"> + <a class="tab active">{{ first-icon }} Tab 1</a> + <a class="tab">Tab 2</a> + <a class="tab">Tab 3</a> + </div> + + + <div class="mt-auto"> + <input class="input-range js-input-range" type="range" min="1.25" max="2.75" step=".25" value="2"> + </div> + + </div> + </div> + + <h2 class="icon-subtitle">{{ site.icons.size }} icons</h2> + + <div class="mb"> + <div class="icons-list"> + {% for icon in icons %} + {% assign name = icon.slug %} + <a href="#" class="icons-list-icon js-icon" title="{{ icon.slug }}" data-icon="{{ name }}"> + {% include icon.html name=name %} + </a> + {% endfor %} + </div> + </div> + + <div class="mb"> + <div class="icons-list icons-list-borders"> + {% for icon in icons %} + {% assign name = icon.slug %} + <a href="#" class="icons-list-icon js-icon" title="{{ icon.slug }}" data-icon="{{ name }}"> + {% include icon.html name=name %} + </a> + {% endfor %} + </div> + </div> + + <div class="mb"> + <div class="icons-list icons-list-squares"> + {% for icon in icons %} + {% assign name = icon.slug %} + <a href="#" class="icons-list-icon js-icon" title="{{ icon.slug }}" data-icon="{{ name }}"> + {% include icon.html name=name %} + </a> + {% endfor %} + </div> + </div> + + </div> +</div> + +<script src="jquery-3.4.1.slim.min.js"></script> +<script> + + $(document).ready(function () { + $('body') + .on('click', '.js-icon', function (e) { + var icon = $(this).attr('data-icon'); + + $('.js-icon-name').html(icon); + localStorage.setItem('icon', icon); + + $('.js-icon-manager svg').replaceWith($(this).find('>svg:eq(0)').clone()); + + e.preventDefault(); + return false; + }) + .on('input', '.js-input-range', function(e){ + $('.js-icon svg').css('stroke-width', $(this).val()); + + e.preventDefault(); + return false; + }); + + + var icon = localStorage.getItem('icon'); + if (icon) { + $('.js-icon[data-icon="' + icon + '"]').eq(0).click(); + } + + document.body.style.display = "block" + }); +</script> +</body> +</html> |