nnwhen/scritch-player
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

nnwhen edits

Browse source
This commit is contained in:
nnwhen 2025-06-01 15:44:23 +02:00
parent 5fdb84a3bb
commit 498710da35
14 changed files with 1926 additions and 2042 deletions
Download patch file Download diff file Expand all files Collapse all files

101
Album-Title.html Normal file
View file

@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="CCBot" content="nofollow" />
<meta name="robots" content="noai, noimageai" />
<meta name="tdm-reservation" content="1" />
<link
rel="icon"
href="res/asset-sitewide-favicon.png"
type="image/icon type"
/>
<meta charset="UTF-8" />
<meta name="description" content="Album-Description" />
<meta name="keywords" content="nnwhen, Album, EP, Music, Song" />
<meta name="author" content="nnwhen" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="viewport"
content="height=device-height, width=device-width, initial-scale=1"
/>
<title>Album-Title</title>
<meta property="og:title" content='"Album-Title" by Artist Name' />
<meta property="og:description" content="Album-Description" />
<meta property="og:image" content="Album-Cover-Link" />
<meta property="og:url" content="https://www.nnwhen.com/" />
<meta property="og:locale" content="en_US" />
<meta name="twitter:title" content='"Album-Title" by Artist Name' />
<meta name="twitter:description" content="Album-Description" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@nnwhen_" />
<meta name="twitter:creator" content="@nnwhen_" />
<meta name="twitter:image" content="Album-Cover-Link" />
<meta name="twitter:image:alt" content="Album-Cover-Link-Alt" />
<link rel="stylesheet" href="res/asset-css-reset.css" />
<link rel="stylesheet" href="res/asset-css-scritch.css" />
<base target="_parent" />
</head>
<body>
<div id="mainContainer">
<div id="titleContainer">
<div id="title"></div>
</div>
<div id="mediaColumn">
<div id="mediaContainer">
<img id="mediaImage" />
<video id="mediaVideo"></video>
</div>
<div id="mediaInfoContainer">
<div id="mediaInfo"></div>
</div>
</div>
<div id="contentColumn">
<div id="contentContainer">
<div id="audio">
<audio id="player" controls src=""></audio>
<button id="bigButton"></button>
<div id="controls">
<div class="riser"></div>
<div class="title">____</div>
<div class="time"></div>
<button id="scrubberTrackContainer">
<div id="scrubberTrackFull">
<div id="scrubberTrackPreview">
<div id="scrubberTrack">
<div id="scrubberFill"></div>
</div>
<div id="scrubber"></div>
</div>
</div>
</button>
<button id="prevTrack" class="icon-previous"></button>
<button id="nextTrack" class="icon-next"></button>
<button
id="loopSwitch"
class="icon-loop"
title="loop off"
></button>
<div class="spacer"></div>
<div id="volumeContainer">
<div id="volumeTrackContainer">
<div id="volumeTrack">
<div id="volumeFill"></div>
</div>
</div>
<div id="volumeIcon" class="icon-volume-high"></div>
</div>
</div>
</div>
<div id="tracks"></div>
<div id="description"></div>
</div>
</div>
</div>
</body>
<script src="res/asset-js-scritch-player.js"></script>
</html>

53
config.json
View file

@ -1,13 +1,44 @@
{
"title": "",
"media": [],
"cover": "",
"theme": {
"coverSize": 480,
"layoutStyle": "vertical",
"infoStyle": "overlaid",
"contentWidth": 400,
"nativePlayer": false
"title": "Album Title",
"media": [
{
"file": "01 - Song 01.flac",
"type": "audio",
"info": "<p>First Line<br>Second Line</p>",
"feature": true,
"title": "Song 01"
},
"description": ""
}
{
"file": "02 - Song 02.flac",
"type": "audio",
"info": "<p>First Line<br>Second Line</p>",
"title": "Song 02"
}
],
"cover": "cover.png",
"theme": {
"titleStyle": "none",
"layoutStyle": "vertical",
"infoStyle": "overlaid",
"hideInfoDropdown": false,
"contentWidth": "400",
"coverSize": "480",
"nativePlayer": false,
"customCSS": "",
"backgroundColor": "#181a1b",
"primaryColor": "#ffffff",
"primaryAltColor": "#e3beb3",
"secondaryColor": "#181a1b",
"highlightColor": "#8383834d",
"primaryTextColor": "#c8beb5",
"primaryAltTextColor": "#838383",
"previewStripeColor1": "#3c362e",
"previewStripeColor2": "#242627",
"linkColor": "#f18d74",
"overlayTextColor": "#ffffff",
"overlayBackgroundColor": "#00000080"
},
"description": "<h1>Description How To</h1><p>Use normal HTML formatting, inline.</p>",
"loopModeDefault": "none"
}

1766
index.html
View file

File diff suppressed because it is too large Load diff

0
media/put files here.txt
View file

0
src/reset.css → res/asset-css-reset.css
View file

733
res/asset-css-scritch.css Normal file
View file

@ -0,0 +1,733 @@
:root {
--backgroundColor: #181a1b;
--primaryColor: #ffffff;
--primaryAltColor: #e3beb3;
--secondaryColor: #181a1b;
--highlightColor: #8383834d;
--primaryTextColor: #c8beb5;
--primaryAltTextColor: #838383;
--previewStripeColor1: #3c362e;
--previewStripeColor2: #242627;
--linkColor: #f18d74;
--overlayTextColor: #ffffff;
--overlayBackgroundColor: #00000080;
--font: sans-serif;
}
@keyframes pulse {
0% {
opacity: 0.5;
}
50% {
opacity: 1;
}
100% {
opacity: 0.5;
}
}
/* basic layout */
html,
body {
width: 100%;
height: 100%;
overflow: auto;
}
body {
color: var(--primaryTextColor);
background-color: var(--backgroundColor);
font-family: var(--font);
}
a {
color: var(--linkColor);
}
#mainContainer {
position: relative;
display: grid;
justify-content: space-evenly;
width: 100%;
max-width: 960px;
left: 0;
right: 0;
margin: auto;
}
#mainContainer.vertical {
grid-template-columns: auto;
}
a[href]:not([tabindex="-1"]):focus-visible,
area[href]:not([tabindex="-1"]):focus-visible,
input:not([disabled]):not([tabindex="-1"]):focus-visible,
select:not([disabled]):not([tabindex="-1"]):focus-visible,
textarea:not([disabled]):not([tabindex="-1"]):focus-visible,
button:not([disabled]):not([tabindex="-1"]):focus-visible,
iframe:not([tabindex="-1"]):focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
[contentEditable="true"]:not([tabindex="-1"]):focus-visible {
outline: 2px solid rgb(83, 186, 255);
outline-offset: 2px;
border-radius: 2px;
}
/*** title ***/
#titleContainer {
height: 0;
}
#titleContainer.active {
height: auto;
}
#title {
margin: 20px 20px 4px 20px;
font-size: 26px;
display: none;
}
#titleContainer.active #title {
display: block;
}
#mainContainer.vertical #title {
margin: 20px;
text-align: center;
}
#mainContainer.title-span #title {
margin: 20px;
text-align: center;
}
#mainContainer:not(.vertical).title-span #titleContainer {
grid-column: 1/3;
}
@media (max-width: 590px) {
#mainContainer #title {
margin: 20px;
text-align: center;
}
#mainContainer.title-span.title-span #titleContainer {
grid-column: 1;
}
#mainContainer {
grid-template-columns: auto;
}
#mainContainer #mediaColumn {
grid-row: 2;
grid-column: 1;
position: relative;
top: 0;
}
}
/*** media column ***/
#mediaColumn {
display: flex;
grid-row: 1/3;
grid-column: 2;
flex-direction: column;
position: sticky;
top: 10px;
margin-left: auto;
margin-right: auto;
}
#mainContainer.vertical #mediaColumn {
grid-row: 2;
grid-column: 1;
position: relative;
top: 0;
}
#mainContainer.title-span #mediaColumn {
grid-row: 2/3;
}
.info-overlaid #mediaColumn,
.info-overlaid-toggle #mediaColumn {
max-width: 480px;
height: fit-content;
}
#mediaContainer {
width: 100%;
max-width: 480px;
display: flex;
position: relative;
overflow: hidden;
}
#mediaContainer > * {
width: 100%;
/* display: none; */
visibility: hidden;
margin-right: -100%;
}
#mediaContainer .active {
/* display: block; */
visibility: visible;
}
#mediaContainer .active {
/* display: block; */
visibility: visible;
}
#mediaInfoContainer {
display: none;
overflow-y: auto;
background-color: var(--highlightColor);
border-radius: 8px;
}
#mediaInfoContainer.active {
display: block;
padding: 10px;
margin-top: 12px;
}
.info-overlaid #mediaInfoContainer,
.info-overlaid-toggle #mediaInfoContainer {
padding: 30px;
margin: 0;
position: absolute;
backdrop-filter: blur(3px);
width: 100%;
height: 100%;
color: var(--overlayTextColor);
background-color: var(--overlayBackgroundColor);
border-radius: 0;
display: flex;
text-align: center;
font-size: 20px;
opacity: 0;
transition: opacity 0.25s;
}
.info-overlaid #mediaInfoContainer.active,
.info-overlaid-toggle #mediaInfoContainer.active {
opacity: 1;
}
.info-overlaid #mediaInfo,
.info-overlaid-toggle #mediaInfo {
margin: auto;
position: relative;
top: 0;
bottom: 0;
}
.info-below #mediaInfoContainer {
display: block;
opacity: 0;
transition: opacity 0.25s;
}
.info-below #mediaInfoContainer.active {
opacity: 1;
}
.info-none #mediaInfoContainer {
display: none !important;
}
/*** content column ***/
#contentColumn {
min-width: 270px;
grid-column: 1;
}
#contentContainer {
padding: 0 10px;
margin: auto;
}
/* player controls */
#audio {
width: 100%;
display: flex;
margin-bottom: 20px;
user-select: none;
}
#player {
width: 100%;
display: none;
}
#audio.native {
height: 70px;
}
#audio.native #player {
display: block;
}
#audio.native #player.video {
visibility: hidden;
pointer-events: none;
}
#bigButton {
width: 54px;
height: 54px;
background-color: var(--primaryColor);
border-radius: 50%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0;
flex-basis: 54px;
margin-left: 0;
cursor: pointer;
margin-top: 26px;
margin-right: 22px;
}
#bigButton:not(.loading):after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 14px inset transparent;
border-bottom: 14px inset transparent;
border-left: 23px solid var(--secondaryColor);
border-right: 0;
margin-left: 5px;
}
#bigButton:not(.loading).pause:after {
content: "";
border: 0;
border-left: 8px solid var(--secondaryColor);
border-right: 8px solid var(--secondaryColor);
height: 24px;
margin: 4px auto;
width: 2px;
padding: 3px;
left: 0;
}
#bigButton.loading:after {
content: "\25cc";
color: var(--secondaryColor);
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
font-size: 40px;
animation: pulse 1s infinite;
}
#bigButton.looped:before {
content: attr(loopcount);
display: block;
width: 20px;
height: 20px;
position: absolute;
top: -6px;
right: -6px;
color: var(--secondaryColor);
background-color: var(--primaryColor);
border: 2px solid var(--backgroundColor);
border-radius: 20px;
font-weight: 600;
font-size: 14px;
text-align: center;
}
#controls {
display: flex;
flex-wrap: wrap;
flex: 1 0;
align-items: center;
position: relative;
}
#controls .title {
flex: 1 0;
font-weight: 600;
align-self: end;
font-size: 28px;
line-height: 28px;
width: 100px;
word-break: break-word;
overflow: hidden;
/* height: 60px; */
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
user-select: none;
flex-basis: 8px;
}
#controls .riser {
height: 60px;
}
#controls .time {
font-size: 12px;
align-self: end;
color: var(--primaryAltTextColor);
user-select: none;
text-align: right;
}
#controls #scrubberTrackContainer {
flex-basis: 100%;
height: 16px;
position: relative;
padding: 4px 0;
user-select: none;
cursor: pointer;
touch-action: none;
}
#controls #scrubberTrackFull {
width: 100%;
height: 100%;
position: relative;
background: repeating-linear-gradient(
135deg,
var(--previewStripeColor1),
var(--previewStripeColor1) 8px,
var(--previewStripeColor2) 8px,
var(--previewStripeColor2) 16px
);
border-radius: 12px;
}
#controls #scrubberTrackContainer #scrubberTrackPreview {
width: 100%;
height: 100%;
position: relative;
}
#controls #scrubberTrackContainer.preview #scrubberTrackPreview {
border: 2px solid var(--backgroundColor);
box-sizing: content-box;
top: -2px;
left: -2px;
margin-right: -4px;
border-radius: 12px;
}
#controls #scrubberTrack {
background-color: var(--primaryAltColor);
overflow: hidden;
width: 100%;
height: 100%;
border-radius: 12px;
position: relative;
}
#scrubberFill {
position: absolute;
height: 100%;
background-color: var(--primaryColor);
content: "";
}
#controls #scrubber {
box-sizing: content-box;
width: 8px;
height: 8px;
background-color: var(--primaryColor);
border: 2px solid var(--backgroundColor);
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
margin: auto -2px;
}
#controls #nextTrack,
#controls #prevTrack,
#controls #loopSwitch {
border: none;
margin-right: 20px;
flex: 0 0;
background: none;
color: var(--primaryColor);
padding: 0;
align-self: start;
cursor: pointer;
}
#controls #loopSwitch {
opacity: 0.5;
}
#controls .spacer {
flex: 1 1;
}
#controls #volumeContainer {
display: flex;
align-items: center;
user-select: none;
height: 20px;
position: absolute;
right: 0;
bottom: 0;
}
#controls #volumeContainer #volumeTrackContainer {
flex: 1 0;
cursor: pointer;
width: 0px;
height: 100%;
overflow: hidden;
position: relative;
align-self: start;
transition: width 0.2s;
touch-action: none;
}
#controls #volumeContainer.hover #volumeTrackContainer {
width: 80px;
}
#controls #volumeContainer #volumeTrackContainer #volumeTrack {
background-color: var(--primaryAltColor);
width: 80px;
height: 6px;
border-radius: 10px;
position: absolute;
right: 0;
overflow: hidden;
margin: auto;
top: 0;
bottom: 0;
}
#controls #volumeContainer #volumeTrackContainer #volumeFill {
background-color: var(--primaryColor);
position: absolute;
width: 100%;
height: 100%;
border-radius: 10px;
border: 2px solid var(--backgroundColor);
box-sizing: content-box;
margin: -2px;
}
#controls #volumeContainer #volumeIcon {
flex: 0 0;
align-self: start;
cursor: pointer;
margin-left: 6px;
cursor: pointer;
color: var(--primaryColor);
}
#audio.native #controls,
#audio.native #bigButton {
display: none;
}
/* track list */
#tracks {
display: flex;
flex-direction: column;
width: 100%;
}
.track {
display: flex;
position: relative;
overflow: hidden;
flex-wrap: wrap;
border-radius: 6px;
}
.track.locked {
opacity: 0.5;
}
.track.active:before {
content: "";
width: 100%;
height: 100%;
opacity: 0.3;
background-color: var(--highlightColor);
position: absolute;
pointer-events: none;
}
.track.active .main {
background-color: var(--highlightColor);
align-items: center;
}
.track .main {
display: flex;
flex: 1 0 100%;
padding: 6px;
border-radius: 6px;
align-items: center;
}
.track .playButton {
margin-right: 12px;
width: 26px;
height: 26px;
background-color: var(--primaryColor);
color: var(--secondaryColor);
border-radius: 3px;
flex: 0 0 26px;
cursor: pointer;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.track .playButton:not(.loading, .error, .locked):after {
content: "";
display: block;
width: 0px;
height: 0;
border-top: 6px inset transparent;
border-bottom: 6px inset transparent;
border-left: 10px solid var(--secondaryColor);
border-right: 0;
margin: auto;
position: relative;
left: 1px;
}
.track .playButton:not(.loading, .error, .locked).pause:after {
content: "";
border: 0;
border-left: 4px solid var(--secondaryColor);
border-right: 4px solid var(--secondaryColor);
height: 12px;
margin: 4px auto;
width: 2px;
padding: 1px;
left: 0;
}
.track .playButton.loading.loading:after {
content: "\1f506";
color: var(--secondaryColor);
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
font-size: 20px;
animation: pulse 1s infinite;
}
.track .playButton.error {
opacity: 0.5;
cursor: default;
}
.track .playButton.locked {
cursor: default;
}
.track .playButton.locked:after {
content: "\1f512";
color: var(--secondaryColor);
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
font-size: 20px;
}
.track.looped .playButton:before {
content: attr(loopcount);
display: block;
width: 15px;
height: 15px;
position: absolute;
top: -6px;
right: -6px;
color: var(--secondaryColor);
background-color: var(--primaryColor);
border: 2px solid var(--backgroundColor);
border-radius: 20px;
font-weight: 600;
font-size: 10px;
text-align: center;
}
.track.active.looped .playButton:before {
border-color: var(--secondaryColor);
}
.track .title {
word-break: break-word;
}
.track .details {
display: flex;
margin-top: 2px;
align-items: center;
flex-basis: 100%;
}
.track .number {
margin-right: 4px;
color: var(--primaryAltTextColor);
}
.track .duration {
margin-left: 14px;
color: var(--primaryAltTextColor);
font-size: 14px;
flex: 0 0 30px;
white-space: nowrap;
}
.track .spacer {
flex: 1 1;
}
.track .toggleInfo {
margin-left: 8px;
margin-right: 4px;
border-radius: 2px;
cursor: pointer;
color: var(--primaryAltTextColor);
}
.track.active .toggleInfo {
color: var(--primaryColor);
}
.hide-info .track .toggleInfo {
cursor: auto;
}
.track .infoContainer {
width: 100%;
transition: height 0.5s;
}
.track .infoContainer:not(.active) {
height: 0px !important;
overflow: hidden;
}
.hide-info .track .infoContainer {
display: none;
}
.track .info {
padding: 10px;
padding-left: 45px;
}
/* description */
#description {
display: none;
padding: 8px;
margin-top: 24px;
word-break: break-word;
margin-bottom: 40px;
}
#description.active {
display: block;
}
/*** layered style ***/
#mainContainer.overlaid {
width: fit-content;
margin: auto;
}
#mainContainer.overlaid #contentColumn {
position: absolute;
display: flex;
flex-direction: column;
max-height: 100%;
overflow: hidden;
backdrop-filter: blur(5px);
width: 100%;
max-width: unset !important;
padding: 0 14px;
}
#mainContainer.overlaid #tracks {
overflow-y: auto;
}

1050
res/asset-js-scritch-player.js Normal file
View file

File diff suppressed because it is too large Load diff

35
src/common.css
View file

@ -1,35 +0,0 @@
blockquote {
border-left: 2px solid;
padding-left: 20px;
}
hr {
border-width: 0;
border-bottom-width: 1px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.17em;
}
h4 {
font-size: 1em;
}
h5 {
font-size: 0.83em;
}
h6 {
font-size: 0.67em;
}
ol {
list-style: decimal;
}
ol, ul {
padding-left: 30px;
}

172
src/fonts.css
View file

@ -1,172 +0,0 @@
@font-face {
font-family: 'icons';
src: url('fonts/icons.eot?7p075h');
src: url('fonts/icons.eot?7p075h#iefix') format('embedded-opentype'),
url('fonts/icons.ttf?7p075h') format('truetype'),
url('fonts/icons.woff?7p075h') format('woff'),
url('fonts/icons.svg?7p075h#icons') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icons' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
font-size: 20px;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-plus-big:before {
content: "\2b";
}
.icon-drop-big:before {
content: "\2b07";
}
.icon-loading-big:before {
content: "\25cc";
}
.icon-loop-edit:before {
content: "\1f504";
}
.icon-loop-1:before {
content: "\1f502";
}
.icon-loop:before {
content: "\1f501";
}
.icon-play-loop:before {
content: "\27f2";
}
.icon-duration-preview:before {
content: "\1f55b";
}
.icon-duration:before {
content: "\1f553";
}
.icon-duration-dot:before {
content: "\23f2";
}
.icon-end:before {
content: "\23f5";
}
.icon-start:before {
content: "\23f4";
}
.icon-cut:before {
content: "\2700";
}
.icon-marker-help:before {
content: "\2753";
}
.icon-marker-info:before {
content: "\1f6c8";
}
.icon-marker-warning:before {
content: "\2757";
}
.icon-lock-file:before {
content: "\1f513";
}
.icon-lock:before {
content: "\1f512";
}
.icon-config:before {
content: "\1f4c3";
}
.icon-title:before {
content: "\1e6e";
}
.icon-edit-info:before {
content: "\1f4dd";
}
.icon-info:before {
content: "\1f5c9";
}
.icon-lyrics:before {
content: "\1f3bc";
}
.icon-pull:before {
content: "\2913";
}
.icon-text:before {
content: "\1f5b9";
}
.icon-error:before {
content: "\24e7";
}
.icon-exclamation:before {
content: "\21";
}
.icon-unknown:before {
content: "\3f";
}
.icon-warning:before {
content: "\26a0";
}
.icon-x:before {
content: "\d7";
}
.icon-cover:before {
content: "\1f4bd";
}
.icon-star:before {
content: "\2605";
}
.icon-star-outline:before {
content: "\2606";
}
.icon-grab:before {
content: "\2630";
}
.icon-audio:before {
content: "\266b";
}
.icon-image:before {
content: "\1f5bc";
}
.icon-trash:before {
content: "\1f5d1";
}
.icon-video:before {
content: "\1f4f9";
}
.icon-dots:before {
content: "\22ef";
}
.icon-loading:before {
content: "\1f506";
}
.icon-next:before {
content: "\23ed";
}
.icon-previous:before {
content: "\23ee";
}
.icon-volume-high:before {
content: "\1f50a";
}
.icon-volume-low:before {
content: "\1f509";
}
.icon-volume-none:before {
content: "\1f508";
}
.icon-volume-x:before {
content: "\1f507";
}
.icon-pause:before {
content: "\23f8";
}
.icon-play:before {
content: "\25b6";
}

BIN
src/fonts/icons.eot
View file

Binary file not shown.

58
src/fonts/icons.svg
View file

@ -1,58 +0,0 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icons" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="942.08" descent="-81.92" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#x21;" glyph-name="exclamation" d="M512 716.8c28.278 0 51.2-22.923 51.2-51.2v-307.2c0-28.278-22.922-51.2-51.2-51.2-28.277 0-51.2 22.922-51.2 51.2v307.2c0 28.277 22.923 51.2 51.2 51.2zM563.2 153.6c0-28.277-22.923-51.2-51.2-51.2s-51.2 22.923-51.2 51.2c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2z" />
<glyph unicode="&#x2b;" glyph-name="plus-big" d="M563.2 793.6h-153.6v-281.6h-281.6v-153.6h281.6v-281.6h153.6v281.6h281.6v153.6h-281.6v281.6z" />
<glyph unicode="&#x3f;" glyph-name="unknown" d="M563.2 102.4c0-28.277-22.923-51.2-51.2-51.2s-51.2 22.923-51.2 51.2c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2zM512 665.6c-56.554 0-102.4-45.846-102.4-102.4 0-28.277-22.923-51.2-51.2-51.2s-51.2 22.923-51.2 51.2c0 113.108 91.692 204.8 204.8 204.8 113.106 0 204.8-91.692 204.8-204.8 0-77.596-43.172-145.033-106.568-179.738-15.119-8.274-27.981-18.007-36.495-27.94-8.294-9.667-10.537-17.091-10.537-22.723v-76.8c0-28.278-22.922-51.2-51.2-51.2s-51.2 22.922-51.2 51.2v76.8c0 36.782 15.978 66.964 35.208 89.388 19.008 22.161 42.97 39.009 65.057 51.099 31.892 17.459 53.335 51.219 53.335 89.913 0 56.554-45.844 102.4-102.4 102.4z" />
<glyph unicode="&#xd7;" glyph-name="x" d="M292.204 701.804c-19.995 19.995-52.413 19.995-72.408 0s-19.995-52.413 0-72.408l219.796-219.796-219.796-219.796c-19.995-19.994-19.995-52.413 0-72.407s52.413-19.994 72.408 0l219.796 219.796 219.796-219.796c19.994-19.994 52.413-19.994 72.407 0s19.994 52.413 0 72.407l-219.796 219.796 219.796 219.796c19.994 19.995 19.994 52.413 0 72.408s-52.413 19.995-72.407 0l-219.796-219.796-219.796 219.796z" />
<glyph unicode="&#x1e6e;" glyph-name="title" d="M256 768c0 28.277 22.923 51.2 51.2 51.2h409.6c28.278 0 51.2-22.923 51.2-51.2v-102.4c0-28.277-22.922-51.2-51.2-51.2s-51.2 22.923-51.2 51.2v51.2h-102.4v-409.6h51.2c28.278 0 51.2-22.922 51.2-51.2s-22.922-51.2-51.2-51.2h-204.8c-28.277 0-51.2 22.922-51.2 51.2s22.923 51.2 51.2 51.2h51.2v409.6h-102.4v-51.2c0-28.277-22.923-51.2-51.2-51.2s-51.2 22.923-51.2 51.2v102.4zM460.8 51.2c0-28.277-22.923-51.2-51.2-51.2s-51.2 22.923-51.2 51.2c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2zM256 51.2c0-28.277-22.923-51.2-51.2-51.2s-51.2 22.923-51.2 51.2c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2zM665.6 51.2c0-28.277-22.923-51.2-51.2-51.2s-51.2 22.923-51.2 51.2c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2zM870.4 51.2c0-28.277-22.923-51.2-51.2-51.2s-51.2 22.923-51.2 51.2c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2z" />
<glyph unicode="&#x22ef;" glyph-name="dots" d="M614.4 409.6c0-56.554-45.846-102.4-102.4-102.4s-102.4 45.846-102.4 102.4c0 56.554 45.846 102.4 102.4 102.4s102.4-45.846 102.4-102.4zM307.2 409.6c0-56.554-45.846-102.4-102.4-102.4s-102.4 45.846-102.4 102.4c0 56.554 45.846 102.4 102.4 102.4s102.4-45.846 102.4-102.4zM921.6 409.6c0-56.554-45.846-102.4-102.4-102.4s-102.4 45.846-102.4 102.4c0 56.554 45.846 102.4 102.4 102.4s102.4-45.846 102.4-102.4z" />
<glyph unicode="&#x23ed;" glyph-name="next" d="M102.4 102.4v614.4l358.4-307.2-358.4-307.2zM460.8 102.4v614.4l358.4-307.2-358.4-307.2zM819.2 716.8h102.4v-614.4h-102.4v614.4z" />
<glyph unicode="&#x23ee;" glyph-name="previous" d="M921.6 102.4v614.4l-358.4-307.2 358.4-307.2zM563.2 102.4v614.4l-358.4-307.2 358.4-307.2zM204.8 716.8h-102.4v-614.4h102.4v614.4z" />
<glyph unicode="&#x23f2;" glyph-name="duration-dot" d="M307.2 665.6c0-56.554-45.846-102.4-102.4-102.4s-102.4 45.846-102.4 102.4c0 56.554 45.846 102.4 102.4 102.4s102.4-45.846 102.4-102.4zM214.545 486.661c-3.227-0.173-6.476-0.261-9.745-0.261-32.752 0-63.452 8.786-89.871 24.131-8.182-32.286-12.529-66.101-12.529-100.931 0-226.217 183.384-409.6 409.6-409.6s409.6 183.383 409.6 409.6c0 226.216-183.383 409.6-409.6 409.6-61.002 0-118.888-13.335-170.905-37.25 22.121-25.889 36.996-58.157 41.482-93.663 39.332 18.297 83.184 28.512 129.422 28.512 169.661 0 307.2-137.538 307.2-307.2s-137.539-307.2-307.2-307.2c-169.662 0-307.2 137.539-307.2 307.2 0 26.613 3.384 52.435 9.745 77.061zM512 665.6c28.278 0 51.2-22.923 51.2-51.2v-183.592l87.404-87.404c19.994-19.994 19.994-52.413 0-72.407s-52.413-19.994-72.407 0l-102.401 102.4c-9.265 9.267-14.996 22.067-14.996 36.204v204.8c0 28.277 22.923 51.2 51.2 51.2z" />
<glyph unicode="&#x23f4;" glyph-name="start" d="M307.2 716.8c28.277 0 51.2-22.923 51.2-51.2v-42.666c0-28.277-22.923-51.2-51.2-51.2s-51.2 22.923-51.2 51.2v42.666c0 28.277 22.923 51.2 51.2 51.2zM307.2 503.466c28.277 0 51.2-22.923 51.2-51.2v-85.331c0-28.278-22.923-51.2-51.2-51.2s-51.2 22.922-51.2 51.2v85.331c0 28.277 22.923 51.2 51.2 51.2zM307.2 247.465c28.277 0 51.2-22.922 51.2-51.2v-42.665c0-28.278-22.923-51.2-51.2-51.2s-51.2 22.922-51.2 51.2v42.665c0 28.278 22.923 51.2 51.2 51.2zM753.004 650.604c19.994-19.995 19.994-52.413 0-72.408l-168.596-168.596 168.596-168.596c19.994-19.994 19.994-52.413 0-72.407s-52.413-19.994-72.407 0l-204.801 204.8c-19.995 19.994-19.995 52.412 0 72.408l204.801 204.8c19.994 19.995 52.413 19.995 72.407 0z" />
<glyph unicode="&#x23f5;" glyph-name="end" d="M716.8 716.8c-28.278 0-51.2-22.923-51.2-51.2v-42.666c0-28.277 22.922-51.2 51.2-51.2s51.2 22.923 51.2 51.2v42.666c0 28.277-22.922 51.2-51.2 51.2zM716.8 503.466c-28.278 0-51.2-22.923-51.2-51.2v-85.331c0-28.278 22.922-51.2 51.2-51.2s51.2 22.922 51.2 51.2v85.331c0 28.277-22.922 51.2-51.2 51.2zM716.8 247.465c-28.278 0-51.2-22.922-51.2-51.2v-42.665c0-28.278 22.922-51.2 51.2-51.2s51.2 22.922 51.2 51.2v42.665c0 28.278-22.922 51.2-51.2 51.2zM270.996 650.604c-19.995-19.995-19.995-52.413 0-72.408l168.596-168.596-168.596-168.596c-19.995-19.994-19.995-52.413 0-72.407s52.413-19.994 72.408 0l204.799 204.8c19.994 19.994 19.994 52.412 0 72.408l-204.799 204.8c-19.995 19.995-52.413 19.995-72.408 0z" />
<glyph unicode="&#x23f8;" glyph-name="pause" d="M256 716.8h204.8v-614.4h-204.8v614.4zM563.2 716.8h204.8v-614.4h-204.8v614.4z" />
<glyph unicode="&#x24e7;" glyph-name="error" d="M512 0c226.217 0 409.6 183.383 409.6 409.6s-183.383 409.6-409.6 409.6c-226.216 0-409.6-183.384-409.6-409.6s183.384-409.6 409.6-409.6zM322.196 599.404c19.995 19.995 52.413 19.995 72.408 0l117.396-117.396 117.396 117.396c19.994 19.995 52.413 19.995 72.407 0s19.994-52.413 0-72.408l-117.396-117.396 117.396-117.396c19.994-19.994 19.994-52.413 0-72.407s-52.413-19.994-72.407 0l-117.396 117.396-117.396-117.396c-19.995-19.994-52.413-19.994-72.408 0s-19.995 52.413 0 72.407l117.396 117.396-117.396 117.396c-19.995 19.995-19.995 52.413 0 72.408z" />
<glyph unicode="&#x25b6;" glyph-name="play" d="M256 102.4v614.4l512-307.2-512-307.2z" />
<glyph unicode="&#x25cc;" glyph-name="loading-big" d="M716.8 435.2c0 28.278 22.922 51.2 51.2 51.2h102.4c28.278 0 51.2-22.922 51.2-51.2s-22.922-51.2-51.2-51.2h-102.4c-28.278 0-51.2 22.922-51.2 51.2zM102.4 435.2c0 28.278 22.923 51.2 51.2 51.2h102.4c28.278 0 51.2-22.922 51.2-51.2s-22.922-51.2-51.2-51.2h-102.4c-28.277 0-51.2 22.922-51.2 51.2zM512 640c-28.278 0-51.2 22.922-51.2 51.2v102.4c0 28.277 22.922 51.2 51.2 51.2s51.2-22.923 51.2-51.2v-102.4c0-28.278-22.922-51.2-51.2-51.2zM512 25.6c-28.278 0-51.2 22.922-51.2 51.2v102.4c0 28.278 22.922 51.2 51.2 51.2s51.2-22.922 51.2-51.2v-102.4c0-28.278-22.922-51.2-51.2-51.2zM656.817 580.017c-19.996 19.994-19.996 52.411 0 72.407l72.407 72.408c19.994 19.995 52.413 19.995 72.407 0 19.996-19.995 19.996-52.414 0-72.408l-72.407-72.407c-19.996-19.996-52.413-19.996-72.407 0zM222.369 145.569c-19.995 19.994-19.995 52.413 0 72.407l72.407 72.407c19.996 19.996 52.413 19.996 72.407 0 19.996-19.994 19.996-52.411 0-72.407l-72.407-72.407c-19.994-19.996-52.412-19.996-72.407 0zM656.817 290.383c19.994 19.996 52.411 19.996 72.407 0l72.407-72.407c19.996-19.994 19.996-52.413 0-72.407-19.994-19.996-52.413-19.996-72.407 0l-72.407 72.407c-19.996 19.996-19.996 52.413 0 72.407zM222.369 724.831c19.995 19.995 52.413 19.995 72.407 0l72.41-72.408c19.994-19.996 19.994-52.413 0-72.407-19.996-19.996-52.413-19.996-72.41 0l-72.407 72.407c-19.995 19.994-19.995 52.413 0 72.408z" />
<glyph unicode="&#x2605;" glyph-name="star" d="M466.716 810.171c19.211 36.411 71.355 36.411 90.565 0l99.461-188.512c7.409-14.042 20.915-23.852 36.557-26.558l210.022-36.339c40.561-7.018 56.678-56.613 27.986-86.135l-148.552-152.847c-11.064-11.382-16.225-27.259-13.962-42.972l30.341-210.97c5.857-40.75-36.332-71.398-73.272-53.233l-191.273 94.044c-14.244 7.009-30.935 7.009-45.181 0l-191.27-94.044c-36.943-18.166-79.131 12.483-73.271 53.233l30.34 210.97c2.26 15.713-2.897 31.59-13.962 42.972l-148.551 152.847c-28.692 29.522-12.578 79.116 27.987 86.135l210.021 36.339c15.644 2.706 29.146 12.517 36.555 26.558l99.46 188.512z" />
<glyph unicode="&#x2606;" glyph-name="star-outline" d="M512 676.559l54.175-102.684c22.226-42.124 62.735-71.555 109.665-79.675l114.401-19.794-80.916-83.258c-33.198-34.15-48.671-81.772-41.887-128.916l16.522-114.918-104.182 51.231c-42.742 21.018-92.814 21.018-135.554 0l-104.186-51.231 16.526 114.918c6.779 47.145-8.693 94.766-41.888 128.916l-80.916 83.258 114.4 19.794c46.93 8.12 87.438 37.551 109.663 79.675l54.177 102.684zM557.286 810.172c-19.215 36.41-71.359 36.41-90.57-0.001l-99.461-188.512c-7.408-14.041-20.911-23.852-36.555-26.558l-210.021-36.339c-40.565-7.019-56.679-56.613-27.987-86.135l148.551-152.847c11.065-11.382 16.223-27.259 13.963-42.972l-30.34-210.97c-5.86-40.75 36.327-71.398 73.27-53.233l191.27 94.044c14.247 7.009 30.938 7.009 45.187 0l191.268-94.044c36.941-18.166 79.13 12.483 73.272 53.233l-30.341 210.97c-2.258 15.713 2.898 31.59 13.962 42.972l148.552 152.847c28.692 29.522 12.575 79.116-27.986 86.135l-210.022 36.339c-15.642 2.707-29.148 12.517-36.557 26.558l-99.456 188.513z" />
<glyph unicode="&#x2630;" glyph-name="grab" d="M102.4 614.4v102.4h819.2v-102.4h-819.2zM102.4 358.4v102.4h819.2v-102.4h-819.2zM102.4 102.4v102.4h819.2v-102.4h-819.2z" />
<glyph unicode="&#x266b;" glyph-name="audio" d="M307.2 640l460.8 128v-486.4c0-70.692-57.308-128-128-128s-128 57.308-128 128c0 70.692 57.308 128 128 128 8.765 0 17.326-0.881 25.6-2.56v156.16l-256-76.8v-307.2c0-70.692-57.308-128-128-128s-128 57.308-128 128c0 70.692 57.308 128 128 128 8.767 0 17.328-0.881 25.6-2.56v335.36z" />
<glyph unicode="&#x26a0;" glyph-name="warning" d="M556.626 791.067c-19.574 34.798-69.677 34.798-89.251 0l-373.256-663.564c-19.198-34.13 5.466-76.303 44.624-76.303h746.509c39.163 0 63.826 42.173 44.626 76.303l-373.253 663.564zM512 614.4c28.278 0 51.2-22.923 51.2-51.2v-204.8c0-28.278-22.922-51.2-51.2-51.2s-51.2 22.922-51.2 51.2v204.8c0 28.277 22.923 51.2 51.2 51.2zM563.2 204.8c0-28.278-22.922-51.2-51.2-51.2s-51.2 22.922-51.2 51.2c0 28.278 22.923 51.2 51.2 51.2s51.2-22.922 51.2-51.2z" />
<glyph unicode="&#x2700;" glyph-name="cut" d="M566.308 282.885l216.689-216.689c19.994-19.994 52.413-19.994 72.407 0s19.994 52.413 0 72.407l-216.689 216.689-72.407-72.407zM281.6 716.8c-42.416 0-76.8-34.384-76.8-76.8s34.384-76.8 76.8-76.8c42.416 0 76.8 34.384 76.8 76.8s-34.384 76.8-76.8 76.8zM102.4 640c0 98.97 80.23 179.2 179.2 179.2s179.2-80.23 179.2-179.2c0-30.861-7.801-59.9-21.539-85.253l72.739-72.739 270.996 270.996c19.994 19.995 52.413 19.995 72.407 0s19.994-52.413 0-72.408l-416.143-416.143c13.738-25.354 21.539-54.39 21.539-85.253 0-98.97-80.23-179.2-179.2-179.2s-179.2 80.23-179.2 179.2c0 98.97 80.23 179.2 179.2 179.2 30.861 0 59.9-7.803 85.253-21.54l72.739 72.74-72.739 72.739c-25.353-13.738-54.392-21.539-85.253-21.539-98.97 0-179.2 80.23-179.2 179.2zM281.6 256c-42.416 0-76.8-34.386-76.8-76.8s34.384-76.8 76.8-76.8c42.416 0 76.8 34.386 76.8 76.8s-34.384 76.8-76.8 76.8z" />
<glyph unicode="&#x2753;" glyph-name="marker-help" d="M563.2 204.8c0-28.277-22.923-51.2-51.2-51.2s-51.2 22.923-51.2 51.2c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2zM512 716.8c-169.662 0-307.2-137.538-307.2-307.2s137.538-307.2 307.2-307.2c169.661 0 307.2 137.539 307.2 307.2s-137.539 307.2-307.2 307.2zM102.4 409.6c0 226.216 183.384 409.6 409.6 409.6s409.6-183.384 409.6-409.6c0-226.217-183.383-409.6-409.6-409.6s-409.6 183.383-409.6 409.6zM512 563.2c-28.277 0-51.2-22.923-51.2-51.2s-22.923-51.2-51.2-51.2c-28.277 0-51.2 22.923-51.2 51.2 0 84.831 68.769 153.6 153.6 153.6 84.833 0 153.6-68.769 153.6-153.6 0-58.214-32.404-108.785-79.913-134.794-8.919-4.884-15.647-10.184-19.574-14.766-2.038-2.381-2.719-3.799-2.913-4.352v-16.584c0-28.278-22.922-51.2-51.2-51.2-28.277 0-51.2 22.922-51.2 51.2v16.896c0 29.716 12.942 53.629 27.583 70.702 14.419 16.813 32.244 29.23 48.131 37.926 16.010 8.766 26.685 25.659 26.685 44.972 0 28.277-22.922 51.2-51.2 51.2zM563.128 357.811c-0.005 0 0.005 0.072 0.051 0.21-0.020-0.138-0.041-0.205-0.051-0.21z" />
<glyph unicode="&#x2757;" glyph-name="marker-warning" d="M563.2 256c0-28.277-22.923-51.2-51.2-51.2s-51.2 22.923-51.2 51.2c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2zM512 716.8c-169.662 0-307.2-137.538-307.2-307.2s137.538-307.2 307.2-307.2c169.661 0 307.2 137.539 307.2 307.2s-137.539 307.2-307.2 307.2zM102.4 409.6c0 226.216 183.384 409.6 409.6 409.6s409.6-183.384 409.6-409.6c0-226.217-183.383-409.6-409.6-409.6s-409.6 183.383-409.6 409.6zM512 614.4c28.278 0 51.2-22.923 51.2-51.2v-170.496c0-28.278-22.922-51.2-51.2-51.2-28.277 0-51.2 22.922-51.2 51.2v170.496c0 28.277 22.923 51.2 51.2 51.2z" />
<glyph unicode="&#x27f2;" glyph-name="play-loop" d="M426.667 238.933v341.333l277.333-170.667-277.333-170.667zM213.88 427.819c9.416 156.465 139.289 280.448 298.12 280.448 164.949 0 298.667-133.718 298.667-298.667s-133.717-298.667-298.667-298.667c-83.772 0-159.423 34.432-213.708 90.027-16.463 16.858-43.476 17.182-60.335 0.717-16.86-16.461-17.182-43.473-0.719-60.335 69.68-71.36 167.076-115.742 274.762-115.742 212.079 0 384 171.921 384 384 0 212.077-171.921 384-384 384-206.283 0-374.575-162.656-383.618-366.707l-34.212 34.21c-16.663 16.661-43.677 16.661-60.34 0s-16.662-43.678 0-60.339l136.837-136.836 136.837 136.836c16.662 16.661 16.662 43.678 0 60.339s-43.677 16.661-60.34 0l-33.283-33.284z" />
<glyph unicode="&#x2913;" glyph-name="pull" d="M512 819.2c28.278 0 51.2-22.923 51.2-51.2v-388.393l117.396 117.397c19.994 19.995 52.413 19.995 72.407 0s19.994-52.413 0-72.408l-204.8-204.799c-19.994-19.994-52.412-19.994-72.408 0l-204.8 204.799c-19.995 19.995-19.995 52.413 0 72.408s52.413 19.995 72.408 0l117.396-117.397v388.393c0 28.277 22.923 51.2 51.2 51.2zM563.2 51.2c0-28.277-22.923-51.2-51.2-51.2s-51.2 22.923-51.2 51.2c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2zM358.4 51.2c0-28.277-22.923-51.2-51.2-51.2s-51.2 22.923-51.2 51.2c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2zM768 51.2c0-28.277-22.923-51.2-51.2-51.2s-51.2 22.923-51.2 51.2c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2z" />
<glyph unicode="&#x2b07;" glyph-name="drop-big" d="M512 25.6c-226.217 0-409.6 183.383-409.6 409.6s183.383 409.6 409.6 409.6c226.217 0 409.6-183.383 409.6-409.6s-183.383-409.6-409.6-409.6zM563.2 665.6c0 28.277-22.922 51.2-51.2 51.2s-51.2-22.923-51.2-51.2v-337.193l-142.996 142.996c-19.994 19.996-52.413 19.996-72.407 0-19.995-19.994-19.995-52.413 0-72.407l230.4-230.4c19.994-19.996 52.413-19.996 72.407 0l230.4 230.4c19.996 19.994 19.996 52.413 0 72.407-19.994 19.996-52.413 19.996-72.407 0l-142.996-142.996v337.193z" />
<glyph unicode="&#x1f3bc;" glyph-name="lyrics" d="M819.2 870.4c56.556 0 102.4-45.846 102.4-102.4v-97.891l-102.4-30.72v128.611h-614.4v-716.8h206.206c4.157-37.601 17.363-72.479 37.392-102.4h-243.598c-56.554 0-102.4 45.844-102.4 102.4v716.8c0 56.554 45.846 102.4 102.4 102.4h614.4zM768 332.8v-256c0-70.692-57.308-128-128-128s-128 57.308-128 128c0 70.692 57.308 128 128 128 8.765 0 17.326-0.881 25.6-2.56v284.16l256 76.8v-179.2l-153.6-51.2zM307.2 614.4c0 28.277 22.923 51.2 51.2 51.2h256c28.278 0 51.2-22.923 51.2-51.2s-22.922-51.2-51.2-51.2h-256c-28.277 0-51.2 22.923-51.2 51.2zM307.2 409.6c0 28.277 22.923 51.2 51.2 51.2h153.6c28.278 0 51.2-22.923 51.2-51.2 0-28.278-22.922-51.2-51.2-51.2h-153.6c-28.277 0-51.2 22.922-51.2 51.2zM307.2 204.8c0 28.278 22.923 51.2 51.2 51.2h51.2c28.277 0 51.2-22.922 51.2-51.2s-22.923-51.2-51.2-51.2h-51.2c-28.277 0-51.2 22.922-51.2 51.2z" />
<glyph unicode="&#x1f4bd;" glyph-name="cover" d="M548.204 714.227c59.986 59.984 157.24 59.984 217.221 0 59.986-59.984 59.986-157.239 0-217.223l-36.204-36.204 36.204-36.204c59.986-59.985 59.986-157.24 0-217.226-59.981-59.981-157.235-59.981-217.221 0l-36.204 36.209-36.204-36.204c-59.984-59.986-157.239-59.986-217.223 0-59.984 59.981-59.984 157.235 0 217.221l36.204 36.204-36.204 36.204c-59.984 59.984-59.984 157.239 0 217.223s157.239 59.984 217.224 0l36.203-36.204 36.204 36.204zM512 358.4c56.556 0 102.4 45.844 102.4 102.4 0 56.554-45.844 102.4-102.4 102.4-56.554 0-102.4-45.846-102.4-102.4 0-56.556 45.846-102.4 102.4-102.4zM102.4 921.6c-56.554 0-102.4-45.846-102.4-102.4v-819.2c0-56.556 45.846-102.4 102.4-102.4h819.2c56.556 0 102.4 45.844 102.4 102.4v819.2c0 56.554-45.844 102.4-102.4 102.4h-819.2zM102.4 819.2h819.2v-716.8h-819.2v716.8z" />
<glyph unicode="&#x1f4c3;" glyph-name="config" d="M614.4 819.2h-358.4c-28.277 0-51.2-22.923-51.2-51.2v-665.6c0-28.278 22.923-51.2 51.2-51.2h512c28.278 0 51.2 22.922 51.2 51.2v512l-204.8 204.8zM640 665.6c14.136 0 25.6-11.462 25.6-25.6s-11.464-25.6-25.6-25.6h-132.37c-10.543-29.829-38.991-51.2-72.43-51.2s-61.887 21.371-72.43 51.2h-81.17c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6h81.17c10.543 29.829 38.991 51.2 72.43 51.2s61.887-21.371 72.43-51.2h132.37zM256 435.2c0 14.138 11.462 25.6 25.6 25.6h234.772c10.542 29.829 38.989 51.2 72.428 51.2s61.885-21.371 72.428-51.2h81.172c14.136 0 25.6-11.462 25.6-25.6s-11.464-25.6-25.6-25.6h-81.172c-10.542-29.829-38.989-51.2-72.428-51.2s-61.885 21.371-72.428 51.2h-234.772c-14.138 0-25.6 11.462-25.6 25.6zM256 230.4c0 14.136 11.462 25.6 25.6 25.6h81.17c10.543 29.829 38.991 51.2 72.43 51.2s61.887-21.371 72.43-51.2h234.77c14.136 0 25.6-11.464 25.6-25.6s-11.464-25.6-25.6-25.6h-234.77c-10.543-29.829-38.991-51.2-72.43-51.2s-61.887 21.371-72.43 51.2h-81.17c-14.138 0-25.6 11.464-25.6 25.6z" />
<glyph unicode="&#x1f4dd;" glyph-name="edit-info" d="M776.786 870.4l-102.4-102.4h-469.586v-716.8h614.4v367.185l102.4 102.4v-469.585c0-56.556-45.844-102.4-102.4-102.4h-614.4c-56.554 0-102.4 45.844-102.4 102.4v716.8c0 56.554 45.846 102.4 102.4 102.4h571.986zM571.986 665.6l-102.402-102.4h-111.184c-28.277 0-51.2 22.923-51.2 51.2s22.923 51.2 51.2 51.2h213.586zM409.6 460.8v-102.4h-51.2c-28.277 0-51.2 22.922-51.2 51.2 0 28.277 22.923 51.2 51.2 51.2h51.2zM307.2 204.8c0 28.278 22.923 51.2 51.2 51.2h307.2c28.278 0 51.2-22.922 51.2-51.2s-22.922-51.2-51.2-51.2h-307.2c-28.277 0-51.2 22.922-51.2 51.2zM512 460.8l204.8 204.8 102.4-102.4-204.8-204.8h-102.4v102.4zM870.4 614.4l-102.4 102.4 29.993 29.992c13.578 13.579 31.995 21.208 51.2 21.208 39.987 0 72.407-32.418 72.407-72.408 0-19.204-7.629-37.621-21.207-51.2l-29.993-29.992z" />
<glyph unicode="&#x1f4f9;" glyph-name="video" d="M256 665.6h307.2c56.554 0 102.4-45.846 102.4-102.4v-307.2c0-56.554-45.846-102.4-102.4-102.4h-307.2c-56.554 0-102.4 45.846-102.4 102.4v307.2c0 56.554 45.846 102.4 102.4 102.4zM716.8 307.2v204.8l153.6 102.4h51.2v-409.6h-51.2l-153.6 102.4z" />
<glyph unicode="&#x1f501;" glyph-name="loop" d="M640 494.933l192 128-192 128v-85.333h-256c-141.385 0-256-114.615-256-256 0-57.583 19.062-110.835 51.203-153.626l68.23 51.251c-21.422 28.518-34.099 63.906-34.099 102.374 0 94.257 76.41 170.667 170.667 170.667h256v-85.333zM362.667 68.267l-192 128 192 128v-85.333h277.333c94.255 0 170.667 76.412 170.667 170.667 0 38.468-12.676 73.856-34.099 102.375l68.228 51.249c32.141-42.79 51.204-96.042 51.204-153.625 0-141.385-114.615-256-256-256h-277.333v-85.333z" />
<glyph unicode="&#x1f502;" glyph-name="loop-1" d="M472.875 665.6h-88.875c-141.385 0-256-114.615-256-256 0-57.583 19.062-110.835 51.203-153.626l68.23 51.251c-21.422 28.518-34.099 63.906-34.099 102.374 0 94.257 76.41 170.667 170.667 170.667h88.875c-2.33 13.876-3.541 28.13-3.541 42.667s1.212 28.791 3.541 42.667zM808.222 380.651c32.367 11.068 61.811 28.446 86.869 50.658 0.602-7.159 0.909-14.4 0.909-21.709 0-141.385-114.615-256-256-256h-277.333v-85.333l-192 128 192 128v-85.333h277.333c84.39 0 154.47 61.248 168.222 141.717zM725.333 409.6c117.82 0 213.333 95.513 213.333 213.333s-95.514 213.333-213.333 213.333c-117.82 0-213.333-95.513-213.333-213.333s95.514-213.333 213.333-213.333zM714.487 494.933v192l-42.667-42.667-31.821 31.823 74.487 74.844h53.513v-256h-53.513z" />
<glyph unicode="&#x1f504;" glyph-name="loop-edit" d="M840.438 644.628c14.561 10.191 14.561 31.753 0 41.945l-185.759 130.031c-16.968 11.877-40.279-0.262-40.279-20.973v-78.831h-204.8c-169.662 0-307.2-137.538-307.2-307.2 0-43.597 9.112-85.197 25.584-122.9 11.321-25.912 41.505-37.74 67.416-26.419 25.912 11.325 37.74 41.508 26.419 67.42-10.93 25.016-17.019 52.68-17.019 81.9 0 113.108 91.692 204.8 204.8 204.8h204.8v-78.831c0-20.711 23.311-32.849 40.279-20.973l185.759 130.032zM183.561 132.628c-14.559 10.189-14.559 31.754 0 41.943l185.759 130.033c16.967 11.878 40.281-0.261 40.281-20.972v-78.833h204.8c113.106 0 204.8 91.694 204.8 204.8 0 29.221-6.088 56.886-17.019 81.901-11.32 25.912 0.507 56.095 26.419 67.416s56.095-0.506 67.415-26.418c16.471-37.701 25.585-79.303 25.585-122.899 0-169.661-137.539-307.2-307.2-307.2h-204.8v-78.833c0-20.71-23.313-32.85-40.281-20.972l-185.759 130.033z" />
<glyph unicode="&#x1f506;" glyph-name="loading" d="M716.8 409.6c0 28.277 22.922 51.2 51.2 51.2h102.4c28.278 0 51.2-22.923 51.2-51.2 0-28.278-22.922-51.2-51.2-51.2h-102.4c-28.278 0-51.2 22.922-51.2 51.2zM102.4 409.6c0 28.277 22.923 51.2 51.2 51.2h102.4c28.277 0 51.2-22.923 51.2-51.2 0-28.278-22.923-51.2-51.2-51.2h-102.4c-28.277 0-51.2 22.922-51.2 51.2zM512 614.4c-28.277 0-51.2 22.923-51.2 51.2v102.4c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2v-102.4c0-28.277-22.922-51.2-51.2-51.2zM512 0c-28.277 0-51.2 22.922-51.2 51.2v102.4c0 28.278 22.923 51.2 51.2 51.2s51.2-22.922 51.2-51.2v-102.4c0-28.278-22.922-51.2-51.2-51.2zM656.814 554.416c-19.994 19.995-19.994 52.413 0 72.408l72.407 72.408c19.999 19.995 52.413 19.995 72.412 0 19.994-19.995 19.994-52.413 0-72.408l-72.412-72.408c-19.994-19.995-52.408-19.995-72.407 0zM222.369 119.967c-19.995 19.999-19.995 52.413 0 72.412l72.408 72.407c19.995 19.994 52.413 19.994 72.408 0 19.995-19.999 19.995-52.413 0-72.407l-72.408-72.412c-19.995-19.994-52.413-19.994-72.408 0zM656.814 264.786c19.999 19.994 52.413 19.994 72.407 0l72.412-72.407c19.994-19.999 19.994-52.413 0-72.412-19.999-19.994-52.413-19.994-72.412 0l-72.407 72.412c-19.994 19.994-19.994 52.408 0 72.407zM222.369 699.231c19.995 19.995 52.413 19.995 72.408 0l72.408-72.408c19.995-19.995 19.995-52.413 0-72.408s-52.413-19.995-72.408 0l-72.408 72.408c-19.995 19.995-19.995 52.413 0 72.408z" />
<glyph unicode="&#x1f507;" glyph-name="volume-x" d="M256 563.2h-204.8v-307.2h204.8l204.8-204.8h51.2v716.8h-51.2l-204.8-204.8zM614.4 512v51.2h51.2l102.4-102.4 102.4 102.4h51.2v-51.2l-102.4-102.4 102.4-102.4v-51.2h-51.2l-102.4 102.4-102.4-102.4h-51.2v51.2l102.4 102.4-102.4 102.4z" />
<glyph unicode="&#x1f508;" glyph-name="volume-none" d="M256 563.2h-204.8v-307.2h204.8l204.8-204.8h51.2v716.8h-51.2l-204.8-204.8z" />
<glyph unicode="&#x1f509;" glyph-name="volume-low" d="M256 563.2h-204.8v-307.2h204.8l204.8-204.8h51.2v716.8h-51.2l-204.8-204.8zM665.6 409.6c0-28.278-22.922-51.2-51.2-51.2v-102.4c84.833 0 153.6 68.767 153.6 153.6 0 84.831-68.767 153.6-153.6 153.6v-102.4c28.278 0 51.2-22.923 51.2-51.2z" />
<glyph unicode="&#x1f50a;" glyph-name="volume-high" d="M256 563.2h-204.8v-307.2h204.8l204.8-204.8h51.2v716.8h-51.2l-204.8-204.8zM870.4 409.6c0 141.385-114.616 256-256 256v102.4c197.939 0 358.4-160.461 358.4-358.4s-160.461-358.4-358.4-358.4v102.4c141.384 0 256 114.616 256 256zM665.6 409.6c0-28.278-22.922-51.2-51.2-51.2v-102.4c84.833 0 153.6 68.767 153.6 153.6 0 84.831-68.767 153.6-153.6 153.6v-102.4c28.278 0 51.2-22.923 51.2-51.2z" />
<glyph unicode="&#x1f512;" glyph-name="lock" d="M307.2 563.2c0 113.108 91.692 204.8 204.8 204.8 113.106 0 204.8-91.692 204.8-204.8v-51.2c28.278 0 51.2-22.923 51.2-51.2v-307.2c0-28.278-22.922-51.2-51.2-51.2h-409.6c-28.277 0-51.2 22.922-51.2 51.2v307.2c0 28.277 22.923 51.2 51.2 51.2v51.2zM512 665.6c-56.554 0-102.4-45.846-102.4-102.4v-51.2h204.8v51.2c0 56.554-45.844 102.4-102.4 102.4zM563.2 332.8c0 28.278-22.922 51.2-51.2 51.2-28.277 0-51.2-22.922-51.2-51.2v-51.2c0-28.278 22.923-51.2 51.2-51.2s51.2 22.922 51.2 51.2v51.2z" />
<glyph unicode="&#x1f513;" glyph-name="lock-file" d="M307.2 614.4c0 113.108 91.692 204.8 204.8 204.8 113.106 0 204.8-91.692 204.8-204.8v-102.4h25.6c42.414 0 76.8-34.384 76.8-76.8v-358.4c0-42.414-34.386-76.8-76.8-76.8h-460.8c-42.416 0-76.8 34.386-76.8 76.8v358.4c0 42.416 34.384 76.8 76.8 76.8h25.6v102.4zM512 716.8c-56.554 0-102.4-45.846-102.4-102.4v-102.4h204.8v102.4c0 56.554-45.844 102.4-102.4 102.4zM563.2 307.2c0 28.278-22.922 51.2-51.2 51.2-28.277 0-51.2-22.922-51.2-51.2v-102.4c0-28.278 22.923-51.2 51.2-51.2s51.2 22.922 51.2 51.2v102.4z" />
<glyph unicode="&#x1f553;" glyph-name="duration" d="M512 716.8c-169.662 0-307.2-137.538-307.2-307.2s137.538-307.2 307.2-307.2c169.661 0 307.2 137.539 307.2 307.2s-137.539 307.2-307.2 307.2zM102.4 409.6c0 226.216 183.384 409.6 409.6 409.6s409.6-183.384 409.6-409.6c0-226.217-183.383-409.6-409.6-409.6s-409.6 183.383-409.6 409.6zM512 665.6c28.278 0 51.2-22.923 51.2-51.2v-183.592l87.404-87.404c19.994-19.994 19.994-52.413 0-72.407s-52.413-19.994-72.407 0l-102.401 102.4c-9.265 9.267-14.996 22.067-14.996 36.204v204.8c0 28.277 22.923 51.2 51.2 51.2z" />
<glyph unicode="&#x1f55b;" glyph-name="duration-preview" d="M563.2 563.2c0 28.277-22.922 51.2-51.2 51.2-28.277 0-51.2-22.923-51.2-51.2v-153.6c0-6.943 1.382-13.563 3.885-19.599 2.499-6.036 6.202-11.694 11.111-16.604l76.801-76.8c19.994-19.994 52.413-19.994 72.407 0s19.994 52.413 0 72.407l-61.804 61.804v132.392zM468.262 816.888c14.387 1.529 28.98 2.312 43.738 2.312 14.756 0 29.353-0.783 43.74-2.312 28.119-2.989 48.486-28.207 45.496-56.325-2.985-28.119-28.206-48.49-56.325-45.501-10.793 1.148-21.775 1.738-32.911 1.738s-22.116-0.59-32.913-1.738c-28.119-2.989-53.336 17.382-56.326 45.501s17.382 53.336 45.501 56.325zM697.042 720.827c17.756 22.007 49.992 25.453 71.997 7.696 22.764-18.366 43.52-39.12 61.885-61.883 17.756-22.007 14.31-54.241-7.695-71.997-22.011-17.757-54.241-14.311-71.997 7.696-13.798 17.1-29.394 32.693-46.495 46.491-22.006 17.756-25.452 49.991-7.695 71.997zM326.957 720.827c17.757-22.007 14.311-54.241-7.696-71.997-17.1-13.797-32.693-29.39-46.491-46.491-17.756-22.007-49.991-25.453-71.997-7.696s-25.453 49.991-7.696 71.997c18.366 22.763 39.12 43.516 61.883 61.883 22.007 17.756 54.241 14.31 71.997-7.696zM161.037 498.839c28.119-2.99 48.49-28.207 45.501-56.326-1.148-10.798-1.738-21.777-1.738-32.913s0.59-22.118 1.738-32.911c2.989-28.119-17.382-53.34-45.501-56.325-28.119-2.99-53.336 17.377-56.325 45.496-1.529 14.387-2.312 28.984-2.312 43.74 0 14.758 0.783 29.351 2.312 43.738 2.989 28.119 28.207 48.49 56.325 45.501zM862.961 498.839c28.119 2.989 53.34-17.382 56.325-45.501 1.531-14.387 2.314-28.98 2.314-43.738 0-14.756-0.783-29.353-2.314-43.74-2.985-28.119-28.206-48.486-56.325-45.496-28.119 2.985-48.486 28.206-45.496 56.325 1.147 10.793 1.736 21.775 1.736 32.911s-0.589 22.116-1.736 32.913c-2.99 28.119 17.377 53.336 45.496 56.326zM200.773 224.558c22.007 17.756 54.241 14.31 71.997-7.695 13.797-17.101 29.39-32.696 46.491-46.495 22.007-17.756 25.453-49.987 7.696-71.997-17.756-22.006-49.991-25.452-71.997-7.695-22.763 18.365-43.516 39.122-61.883 61.885-17.756 22.006-14.31 54.241 7.696 71.997zM823.229 224.558c22.006-17.756 25.452-49.992 7.695-71.997-18.365-22.764-39.122-43.52-61.885-61.885-22.006-17.756-54.241-14.31-71.997 7.695-17.756 22.011-14.31 54.241 7.695 71.997 17.101 13.798 32.696 29.394 46.495 46.495 17.756 22.006 49.987 25.452 71.997 7.695zM422.761 58.639c2.99 28.119 28.207 48.486 56.326 45.496 10.798-1.147 21.777-1.736 32.913-1.736s22.118 0.589 32.911 1.736c28.119 2.99 53.34-17.377 56.325-45.496 2.99-28.119-17.377-53.34-45.496-56.325-14.387-1.531-28.984-2.314-43.74-2.314-14.758 0-29.351 0.783-43.738 2.314-28.119 2.985-48.49 28.206-45.501 56.325z" />
<glyph unicode="&#x1f5b9;" glyph-name="text" d="M614.4 768l204.8-204.8v-460.8c0-28.278-22.922-51.2-51.2-51.2h-512c-28.277 0-51.2 22.922-51.2 51.2v614.4c0 28.277 22.923 51.2 51.2 51.2h358.4zM358.4 665.6c-28.277 0-51.2-22.923-51.2-51.2s22.923-51.2 51.2-51.2h204.8c28.278 0 51.2 22.923 51.2 51.2s-22.922 51.2-51.2 51.2h-204.8zM307.2 409.6c0-28.278 22.923-51.2 51.2-51.2h307.2c28.278 0 51.2 22.922 51.2 51.2 0 28.277-22.922 51.2-51.2 51.2h-307.2c-28.277 0-51.2-22.923-51.2-51.2zM358.4 256c-28.277 0-51.2-22.922-51.2-51.2s22.923-51.2 51.2-51.2h307.2c28.278 0 51.2 22.922 51.2 51.2s-22.922 51.2-51.2 51.2h-307.2z" />
<glyph unicode="&#x1f5bc;" glyph-name="image" d="M921.6 102.4l-307.2 460.8-204.8-307.2-102.4 153.6-204.8-307.2h819.2zM358.4 614.4c0-56.554-45.846-102.4-102.4-102.4s-102.4 45.846-102.4 102.4c0 56.554 45.846 102.4 102.4 102.4s102.4-45.846 102.4-102.4z" />
<glyph unicode="&#x1f5c9;" glyph-name="info" d="M921.6 768c0 56.554-45.844 102.4-102.4 102.4h-614.4c-56.554 0-102.4-45.846-102.4-102.4v-716.8c0-56.556 45.846-102.4 102.4-102.4h614.4c56.556 0 102.4 45.844 102.4 102.4v716.8zM204.8 768h614.4v-716.8h-614.4v716.8zM307.2 614.4c0 28.277 22.923 51.2 51.2 51.2h307.2c28.278 0 51.2-22.923 51.2-51.2s-22.922-51.2-51.2-51.2h-307.2c-28.277 0-51.2 22.923-51.2 51.2zM307.2 409.6c0 28.277 22.923 51.2 51.2 51.2h307.2c28.278 0 51.2-22.923 51.2-51.2 0-28.278-22.922-51.2-51.2-51.2h-307.2c-28.277 0-51.2 22.922-51.2 51.2zM307.2 204.8c0 28.278 22.923 51.2 51.2 51.2h307.2c28.278 0 51.2-22.922 51.2-51.2s-22.922-51.2-51.2-51.2h-307.2c-28.277 0-51.2 22.922-51.2 51.2z" />
<glyph unicode="&#x1f5d1;" glyph-name="trash" horiz-adv-x="973" d="M153.6 665.6v102.4h153.6l51.2 51.2h256l51.2-51.2h153.6v-102.4h-665.6zM768 614.4v-512c0-56.556-45.844-102.4-102.4-102.4h-358.4c-56.554 0-102.4 45.844-102.4 102.4v512h563.2zM358.4 512h-51.2v-409.6h51.2v409.6zM614.4 512v-409.6h51.2v409.6h-51.2zM512 512h-51.2v-409.6h51.2v409.6z" />
<glyph unicode="&#x1f6c8;" glyph-name="marker-info" d="M460.8 563.2c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2c0-28.277-22.923-51.2-51.2-51.2s-51.2 22.923-51.2 51.2zM512 716.8c-169.662 0-307.2-137.538-307.2-307.2s137.538-307.2 307.2-307.2c169.661 0 307.2 137.539 307.2 307.2s-137.539 307.2-307.2 307.2zM102.4 409.6c0 226.216 183.384 409.6 409.6 409.6s409.6-183.384 409.6-409.6c0-226.217-183.383-409.6-409.6-409.6s-409.6 183.383-409.6 409.6zM512 204.8c-28.277 0-51.2 22.922-51.2 51.2v170.496c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2v-170.496c0-28.278-22.922-51.2-51.2-51.2z" />
</font></defs></svg>
Side by side

Before

Width:  |  Height:  |  Size: 30 KiB

BIN
src/fonts/icons.ttf
View file

Binary file not shown.

BIN
src/fonts/icons.woff
View file

Binary file not shown.

BIN
src/fonts/rubikNumbers-edit.woff2
View file

Binary file not shown.