2023-06-10 20:43:27 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="pt_BR">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
<link
|
|
|
|
|
rel="shortcut icon"
|
|
|
|
|
href="data:image/png;base64,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"
|
|
|
|
|
/>
|
|
|
|
|
<title>Pixel Magic Tool - @ajotanc</title>
|
|
|
|
|
</head>
|
|
|
|
|
<style>
|
|
|
|
|
* {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::selection {
|
|
|
|
|
background: #1982c4;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html {
|
|
|
|
|
scroll-behavior: smooth;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
margin: 0;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
font-family: "Tahoma", monospace;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h1,
|
|
|
|
|
h2,
|
|
|
|
|
h3,
|
|
|
|
|
h4,
|
|
|
|
|
h5,
|
|
|
|
|
h6 {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h3 {
|
|
|
|
|
color: #5f5f5f;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.divider {
|
|
|
|
|
width: calc(100% - 10px);
|
|
|
|
|
height: 1px;
|
|
|
|
|
background: #ececec;
|
|
|
|
|
margin: 20px auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.container {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.content {
|
|
|
|
|
width: 100%;
|
|
|
|
|
min-width: 540px;
|
|
|
|
|
max-width: 900px;
|
|
|
|
|
margin: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#response,
|
|
|
|
|
#preview,
|
|
|
|
|
#image,
|
|
|
|
|
form,
|
|
|
|
|
canvas {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
form {
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
background-color: #f8f8f8;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
border: 1px solid #cccccc;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.row {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
margin: 20px 0 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.row:nth-child(2) {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.column {
|
|
|
|
|
flex-basis: calc(50% - 10px);
|
|
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
padding: 0 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
label {
|
|
|
|
|
display: block;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
button {
|
|
|
|
|
font-family: "Tahoma", monospace;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input[type="text"],
|
|
|
|
|
input[type="number"],
|
|
|
|
|
input[type="email"],
|
|
|
|
|
input[type="tel"],
|
|
|
|
|
select,
|
|
|
|
|
textarea {
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
border: none;
|
|
|
|
|
background-color: #f0f0f0;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
font-family: "Tahoma", monospace;
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input[type="color"] {
|
|
|
|
|
width: 32px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
padding: 0px 1px;
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.input-group {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.input-group input {
|
|
|
|
|
border-radius: 5px 0 0 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.input-description {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #626262;
|
|
|
|
|
background: #d9d9d9;
|
|
|
|
|
border-radius: 0px 5px 5px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
select {
|
|
|
|
|
appearance: none;
|
|
|
|
|
-webkit-appearance: none;
|
|
|
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M.6 2.6L4 6l3.4-3.4L8 3.2 4 7.2.1 3.3z'/%3E%3C/svg%3E");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-position: right 10px center;
|
|
|
|
|
background-size: 10px 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
textarea {
|
|
|
|
|
resize: vertical;
|
|
|
|
|
min-height: 120px;
|
|
|
|
|
margin: 0 0 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input[type="submit"] {
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
background-color: #4caf50;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dropzone {
|
|
|
|
|
width: 100%;
|
|
|
|
|
border: 1px dashed #a9a9a9;
|
|
|
|
|
background-color: #f5f5f5;
|
|
|
|
|
color: #666;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 40px 10px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
margin: 20px 0;
|
|
|
|
|
transition: all 0.5s ease-in-out;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dropzone p {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dropzone:hover {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
background-color: #eee;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dropzone.dragover {
|
|
|
|
|
background-color: #ddd;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.range-slider {
|
|
|
|
|
appearance: none;
|
|
|
|
|
background-color: #ddd;
|
|
|
|
|
height: 8px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
outline: none;
|
|
|
|
|
margin: 16px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.range-slider::-webkit-slider-thumb {
|
|
|
|
|
appearance: none;
|
|
|
|
|
height: 16px;
|
|
|
|
|
width: 16px;
|
|
|
|
|
background-color: #4caf50;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
border: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.range-slider::-moz-range-thumb {
|
|
|
|
|
appearance: none;
|
|
|
|
|
height: 16px;
|
|
|
|
|
width: 16px;
|
|
|
|
|
background-color: #4caf50;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
border: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 38px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch input {
|
|
|
|
|
outline: none;
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch-slider {
|
|
|
|
|
position: absolute;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
background-color: #ccc;
|
|
|
|
|
border-radius: 34px;
|
|
|
|
|
transition: 0.4s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch-slider:before {
|
|
|
|
|
position: absolute;
|
|
|
|
|
content: "";
|
|
|
|
|
height: 14px;
|
|
|
|
|
width: 14px;
|
|
|
|
|
left: 3px;
|
|
|
|
|
bottom: 3px;
|
|
|
|
|
background-color: white;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
transition: 0.4s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input:checked + .switch-slider {
|
|
|
|
|
background-color: #4caf50;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input:focus + .switch-slider {
|
|
|
|
|
box-shadow: 0 0 1px #4caf50;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input:checked + .switch-slider:before {
|
|
|
|
|
transform: translateX(18px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#toast-container {
|
|
|
|
|
position: fixed;
|
|
|
|
|
bottom: 20px;
|
|
|
|
|
right: 20px;
|
|
|
|
|
z-index: 9999;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toast {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
width: max-content;
|
|
|
|
|
padding: 6px 12px;
|
|
|
|
|
margin: 10px 0 0;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
transform: translateY(30px);
|
|
|
|
|
opacity: 0;
|
|
|
|
|
visibility: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toast .toast-body {
|
|
|
|
|
padding: 8px 0;
|
|
|
|
|
color: #fdfdfd;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toast.success {
|
|
|
|
|
background-color: #8ac926;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toast.error {
|
|
|
|
|
background-color: #ff595e;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toast.warning {
|
|
|
|
|
background-color: #ffca3a;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toast-progress {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 4px;
|
|
|
|
|
bottom: 4px;
|
|
|
|
|
width: calc(100% - 8px);
|
|
|
|
|
height: 3px;
|
|
|
|
|
transform: scaleX(0);
|
|
|
|
|
transform-origin: left;
|
|
|
|
|
border-radius: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toast.success .toast-progress {
|
|
|
|
|
background: linear-gradient(to right, #8ac926, #c5ca30);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toast.error .toast-progress {
|
|
|
|
|
background: linear-gradient(to right, #ff595e, #e23c4e);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toast.warning .toast-progress {
|
|
|
|
|
background: linear-gradient(to right, #ffca3a, #ffda3d);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#multipleCanvas {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#multipleCanvas .carousel {
|
|
|
|
|
display: flex;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#multipleCanvas .carousel img {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
border: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#multipleCanvas .carousel img:last-child {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button {
|
|
|
|
|
width: 100%;
|
|
|
|
|
border: 0;
|
|
|
|
|
padding: 10px 18px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
color: #fdfdfd;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
margin: 0 0 10px;
|
|
|
|
|
background: #1982c4;
|
|
|
|
|
transition: all 0.5s ease-in-out;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button:hover {
|
|
|
|
|
background: #4267ac;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button:last-child {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.buttons {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.buttonRainbow {
|
|
|
|
|
width: 100%;
|
|
|
|
|
border: 0;
|
|
|
|
|
padding: 10px 18px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
color: #fdfdfd;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
to right,
|
|
|
|
|
#ff595e,
|
|
|
|
|
#ffca3a,
|
|
|
|
|
#8ac926,
|
|
|
|
|
#1982c4,
|
|
|
|
|
#6a4c93
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.buttonRainbow:hover {
|
|
|
|
|
animation-play-state: paused;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#preview {
|
|
|
|
|
border: 1px solid #cccccc;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
margin: 20px 0;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#preview .buttons {
|
|
|
|
|
margin: 0 0 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.w-full {
|
|
|
|
|
flex-basis: 100% !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.margin-zero {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#overlay {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#overlay.loading::after {
|
|
|
|
|
content: "";
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: calc(50% - 19px);
|
|
|
|
|
left: calc(50% - 19px);
|
|
|
|
|
width: 26px;
|
|
|
|
|
height: 26px;
|
|
|
|
|
border: 6px solid rgba(255, 255, 255, 0.5);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
animation: spin 1s linear infinite;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input.invalid,
|
|
|
|
|
select.invalid,
|
|
|
|
|
textarea.invalid {
|
|
|
|
|
border: 1px solid #df1f1f;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input.invalid + .error-message,
|
|
|
|
|
select.invalid + .error-message,
|
|
|
|
|
textarea.invalid + .error-message {
|
|
|
|
|
display: block;
|
|
|
|
|
color: #df1f1f;
|
|
|
|
|
padding: 4px 0;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slide-container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
scroll-snap-type: x mandatory;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slide {
|
|
|
|
|
scroll-snap-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 0 0 30px;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header .brand {
|
|
|
|
|
width: 100%;
|
2023-06-12 19:21:14 +02:00
|
|
|
max-width: 200px;
|
2023-06-10 20:43:27 +02:00
|
|
|
height: 100%;
|
|
|
|
|
display: block;
|
|
|
|
|
outline: none;
|
|
|
|
|
border: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#alert {
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
border: 1px solid #ffe69c;
|
|
|
|
|
background: #fff3cd;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
margin: 20px 0 0;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #664d03;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.subtitle {
|
|
|
|
|
display: block;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
margin: 2px 0 5px;
|
|
|
|
|
color: #1982c4;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.subtitle a {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #1982c4;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.subtitle a:hover,
|
|
|
|
|
.subtitle a:focus,
|
|
|
|
|
.subtitle a:active {
|
|
|
|
|
color: #1982c4;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
.content {
|
|
|
|
|
min-width: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.row {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.column {
|
|
|
|
|
flex-basis: 100%;
|
|
|
|
|
margin: 20px 0 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.divider {
|
|
|
|
|
margin: 20px auto 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (min-width: 768px) {
|
|
|
|
|
.row {
|
|
|
|
|
flex-wrap: nowrap;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes progress {
|
|
|
|
|
to {
|
|
|
|
|
transform: scaleX(1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes spin {
|
|
|
|
|
to {
|
|
|
|
|
transform: rotate(360deg);
|
|
|
|
|
}
|
|
|
|
|
0% {
|
|
|
|
|
border-top-color: #ff595e;
|
|
|
|
|
}
|
|
|
|
|
25% {
|
|
|
|
|
border-top-color: #ffca3a;
|
|
|
|
|
}
|
|
|
|
|
50% {
|
|
|
|
|
border-top-color: #8ac926;
|
|
|
|
|
}
|
|
|
|
|
75% {
|
|
|
|
|
border-top-color: #1982c4;
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
border-top-color: #6a4c93;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes rainbow {
|
|
|
|
|
0% {
|
|
|
|
|
background-position: 0% 0%;
|
|
|
|
|
}
|
|
|
|
|
50% {
|
|
|
|
|
background-position: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
background-position: 0% 0%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes fadeIn {
|
|
|
|
|
5% {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
visibility: visible;
|
|
|
|
|
transform: translateY(0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
95% {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
transform: translateY(0);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<form id="formGenerate" novalidate>
|
|
|
|
|
<div class="header">
|
2023-06-12 19:21:14 +02:00
|
|
|
<img
|
2023-06-10 20:43:27 +02:00
|
|
|
class="brand"
|
2023-06-12 19:21:14 +02:00
|
|
|
src="data:image/png;base64,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
|
2023-06-10 20:43:27 +02:00
|
|
|
alt="Pixel Magic Tool"
|
|
|
|
|
title="Pixel Magic Tool"
|
2023-06-12 19:21:14 +02:00
|
|
|
/>
|
2023-06-10 20:43:27 +02:00
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="column valitade">
|
|
|
|
|
<label for="hostname">Hostname</label>
|
|
|
|
|
<input type="text" name="hostname" id="hostname" required />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="column valitade">
|
|
|
|
|
<label for="name">Preset Name</label>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
name="name"
|
|
|
|
|
id="name"
|
|
|
|
|
value="New Preset"
|
|
|
|
|
required
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="column valitade">
|
|
|
|
|
<label for="pattern">Pattern</label>
|
|
|
|
|
<select name="pattern" id="pattern" required>
|
|
|
|
|
<option value="">Select a choice</option>
|
|
|
|
|
<option value="1" title="['ffffff']" selected>
|
|
|
|
|
Individual
|
|
|
|
|
</option>
|
|
|
|
|
<option value="2" title="[0, 'ffffff']">Index</option>
|
|
|
|
|
<option value="3" title="[0, 5, 'ffffff']">Range</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="column valitade">
|
|
|
|
|
<label for="output">Output</label>
|
|
|
|
|
<select name="output" id="output" required>
|
|
|
|
|
<option value="">Select a choice</option>
|
|
|
|
|
<option value="json" selected>WLED JSON</option>
|
|
|
|
|
<option value="ha">Home Assistant</option>
|
|
|
|
|
<option value="curl">CURL</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row output" style="display: none">
|
|
|
|
|
<div class="column valitade">
|
|
|
|
|
<label for="device">Device</label>
|
|
|
|
|
<input type="text" name="device" id="device" required />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="column valitade">
|
|
|
|
|
<label for="uniqueId">Unique Id</label>
|
|
|
|
|
<input type="text" name="uniqueId" id="uniqueId" required />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="column valitade">
|
|
|
|
|
<label for="friendlyName">Friendly Name</label>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
name="friendlyName"
|
|
|
|
|
id="friendlyName"
|
|
|
|
|
required
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="column valitade">
|
|
|
|
|
<label for="segments">Segment Id</label>
|
|
|
|
|
<select name="segments" id="segments" required>
|
|
|
|
|
<option value="">Select a choice</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="column valitade">
|
|
|
|
|
<label for="brightness">Brightness</label>
|
|
|
|
|
<input
|
|
|
|
|
type="range"
|
|
|
|
|
name="brightness"
|
|
|
|
|
id="brightness"
|
|
|
|
|
min="0"
|
|
|
|
|
max="255"
|
|
|
|
|
value="128"
|
|
|
|
|
class="range-slider"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="column valitade">
|
|
|
|
|
<label for="animation">Animation</label>
|
|
|
|
|
<label class="switch">
|
|
|
|
|
<input type="checkbox" name="animation" id="animation" />
|
|
|
|
|
<span class="switch-slider"></span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="column valitade">
|
|
|
|
|
<label for="transparentImage">Transparent Image</label>
|
|
|
|
|
<label class="switch">
|
|
|
|
|
<input
|
|
|
|
|
type="checkbox"
|
|
|
|
|
name="transparentImage"
|
|
|
|
|
id="transparentImage"
|
|
|
|
|
/>
|
|
|
|
|
<span class="switch-slider"></span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="column valitade">
|
|
|
|
|
<label for="resizeImage">Resize Image</label>
|
|
|
|
|
<label class="switch">
|
|
|
|
|
<input type="checkbox" name="resizeImage" id="resizeImage" />
|
|
|
|
|
<span class="switch-slider"></span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row resizeImage" style="display: none">
|
|
|
|
|
<div class="column valitade">
|
|
|
|
|
<label for="width">Width</label>
|
|
|
|
|
<input type="number" name="width" id="width" value="32" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="column valitade">
|
|
|
|
|
<label for="height">Height</label>
|
|
|
|
|
<input type="number" name="height" id="height" value="32" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row animation" style="display: none">
|
|
|
|
|
<div class="column valitade">
|
|
|
|
|
<label for="frames">Frames</label>
|
|
|
|
|
<input type="number" name="frames" id="frames" value="4" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="column valitade">
|
|
|
|
|
<label for="duration">Duration</label>
|
|
|
|
|
<div class="input-group">
|
|
|
|
|
<input
|
|
|
|
|
type="number"
|
|
|
|
|
name="duration"
|
|
|
|
|
id="duration"
|
|
|
|
|
value="0.5"
|
|
|
|
|
required="required"
|
|
|
|
|
min="0"
|
|
|
|
|
step="0.1"
|
|
|
|
|
inputmode="numeric"
|
|
|
|
|
/>
|
|
|
|
|
<div class="input-description">sec</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="column valitade">
|
|
|
|
|
<label for="transition">Transition</label>
|
|
|
|
|
<div class="input-group">
|
|
|
|
|
<input
|
|
|
|
|
type="number"
|
|
|
|
|
name="transition"
|
|
|
|
|
id="transition"
|
|
|
|
|
value="0.2"
|
|
|
|
|
required="required"
|
|
|
|
|
min="0"
|
|
|
|
|
step="0.1"
|
|
|
|
|
inputmode="numeric"
|
|
|
|
|
/>
|
|
|
|
|
<div class="input-description">sec</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row transparentImage" style="display: none">
|
|
|
|
|
<div class="column valitade w-full">
|
|
|
|
|
<label for="color">Choose a color</label>
|
|
|
|
|
<small class="subtitle"
|
|
|
|
|
>Color that will replace the
|
|
|
|
|
<strong>transparent pixels</strong> in the image</small
|
|
|
|
|
>
|
|
|
|
|
<input type="color" name="color" id="color" value="#ffffff" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="column valitade w-full">
|
|
|
|
|
<label for="images">Images</label>
|
|
|
|
|
<small class="subtitle"
|
|
|
|
|
>Images uploaded to
|
|
|
|
|
<a href="http://[wled-ip]/edit" target="_blank">WLED</a>
|
|
|
|
|
or upload image</small
|
|
|
|
|
>
|
|
|
|
|
<select name="images" id="images" required>
|
|
|
|
|
<option value="">Select a choice</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="alert" style="display: none">
|
|
|
|
|
<span
|
|
|
|
|
>To define a large number of colors. 32x32 or larger matrix
|
|
|
|
|
presets need to be split into multiple requests at the same
|
|
|
|
|
time!</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="dropzone" class="dropzone valitade" style="display: none">
|
|
|
|
|
<p id="dropzoneLabel">
|
|
|
|
|
Drag and drop a file here or click to select a file
|
|
|
|
|
</p>
|
|
|
|
|
<input
|
|
|
|
|
type="file"
|
|
|
|
|
name="source"
|
|
|
|
|
id="source"
|
|
|
|
|
accept="image/*"
|
|
|
|
|
style="display: none"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="column w-full">
|
|
|
|
|
<button type="button" class="buttonRainbow" id="btnGenerate">
|
|
|
|
|
Generate
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
<div id="preview" style="display: none">
|
|
|
|
|
<div class="row margin-zero">
|
|
|
|
|
<div class="column w-full">
|
|
|
|
|
<textarea
|
|
|
|
|
name="response"
|
|
|
|
|
id="response"
|
|
|
|
|
cols="30"
|
|
|
|
|
rows="10"
|
|
|
|
|
readonly="readonly"
|
|
|
|
|
></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="isNotAnimation">
|
|
|
|
|
<div class="buttons">
|
|
|
|
|
<div class="row margin-zero">
|
|
|
|
|
<div class="column">
|
|
|
|
|
<button type="button" class="button" id="btnCopyToClipboard">
|
|
|
|
|
Copy to Clipboard
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="column">
|
|
|
|
|
<button type="button" class="button" id="btnDownloadPreset">
|
|
|
|
|
Download
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="divider"></div>
|
|
|
|
|
<div class="row margin-zero" id="notBigData">
|
|
|
|
|
<div class="column">
|
|
|
|
|
<button type="button" class="button" id="btnSimulatePreset">
|
|
|
|
|
Simulate
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="column">
|
|
|
|
|
<button type="button" class="button" id="btnSavePreset">
|
|
|
|
|
Save
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row margin-zero" id="bigData">
|
|
|
|
|
<div class="column w-full">
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="button"
|
|
|
|
|
id="btnSimulatePresetBigData"
|
|
|
|
|
>
|
|
|
|
|
Simulate
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="singleCanvas"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="isAnimation">
|
|
|
|
|
<div class="buttons">
|
|
|
|
|
<div class="row margin-zero">
|
|
|
|
|
<div class="column">
|
|
|
|
|
<button type="button" class="button" id="btnCopyToClipboard">
|
|
|
|
|
Copy to Clipboard
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="column">
|
|
|
|
|
<button type="button" class="button" id="btnDownloadPreset">
|
|
|
|
|
Download
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="divider"></div>
|
|
|
|
|
<div class="row margin-zero">
|
|
|
|
|
<div class="column w-full">
|
|
|
|
|
<button type="button" class="button" id="btnSavePlaylist">
|
|
|
|
|
Save
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="multipleCanvas"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="toast-container"></div>
|
|
|
|
|
<div id="overlay"></div>
|
|
|
|
|
</body>
|
|
|
|
|
<script>
|
2023-06-12 19:21:14 +02:00
|
|
|
const e="file:"===window.location.protocol?"http:":window.location.protocol,t=window.location.host||"0.0.0.0";let n=`${e}//${t}`;const a=document.getElementById("hostname");a.value=t,a.addEventListener("change",(async()=>{n=`${e}//${a.value}`,await r(),await d(),l()}));let o=[],s={},c=[];function l(){const e=document.getElementById("images").parentNode.querySelector("a");e.href=e.href.replace("[wled-ip]",a.value)}async function i(e,t=!1,a=5e3){const o=`${n}/presets.json`,s=`${n}/json`;let c=0;B();const l=e.map((async e=>new Promise(((t,n)=>{setTimeout((async()=>{try{const t=await fetch(o),n=await t.json(),a=Object.keys(n),c=a.find((t=>"object"==typeof n[t]&&!n[t].playlist&&n[t].n===e.n))||parseInt(a.pop())+1,l=Object.assign(e,{psave:c}),i={method:"POST",body:JSON.stringify(l)};try{const t=await fetch(s,i),{success:n}=await t.json();n&&I(`Preset "${e.n}" save successfully!`)}catch(e){I(`Error saving preset: ${e}`,"error")}}catch(e){I(e,"error")}finally{t()}}),a*c++)}))));await Promise.all(l),t?setTimeout((async()=>{await async function(){const{value:e}=document.getElementById("duration"),{value:t}=document.getElementById("transition"),{value:a}=document.getElementById("name"),o=`${n}/presets.json`,s=`${n}/json`;try{const n=await fetch(o),c=await n.json(),l=Object.keys(c),i=l.filter((e=>"object"==typeof c[e]&&!c[e].playlist&&c[e].n&&c[e].n.includes(a))),d={psave:l.find((e=>"object"==typeof c[e]&&c[e].playlist&&c[e].n&&c[e].n===a))||parseInt(l.pop())+1,n:a,on:!0,o:!1,playlist:{ps:i,dur:Array.from({length:i.length},(()=>10*e)),transition:Array.from({length:i.length},(()=>10*t)),repeat:0,end:0}},r={method:"POST",body:JSON.stringify(d)};try{const e=await fetch(s,r),{success:t}=await e.json();t&&I(`Playlist "${a}" save successfully!`)}catch(e){I(`Error saving preset: ${e}`,"error")}}catch(e){I(e,"error")}}().then((()=>{w()})).catch((()=>{w()}))}),a):w()}async function d(){const e=`${n}/edit?list=/`,t=document.getElementById("images");t.innerHTML="";[{text:"Select a choice",value:""},{text:"Upload",value:"upload"}].forEach((({text:e,value:n})=>{const a=new Option(e,n);t.appendChild(a)})),B();try{const a=await fetch(e),o=await a.json(),s=["jpeg","jpg","png","gif"];o.filter((e=>{const{name:t}=e,[n,a]=t.split(".");return e.name=t.replace("/",""),s.includes(a)})).map((e=>{const{name:a}=e,o=document.createElement("option");o.text=a,o.value=`${n}/${a}`,t.add(o)}))}catch(e){I(e,"error")}finally{w()}}async function r(){const e=document.getElementById("segments"),t=document.getElementById("width"),a=document.getElementById("height"),o=`${n}/json/state`;e.innerHTML="";[{text:"Select a choice",value:""}].forEach((({text:t,value:n})=>{const a=new Option(t,n);e.appendChild(a)})),B();try{const n=await fetch(o),{seg:s}=await n.json();s&&s.forEach((function({id:n,n:o,stop:s,stopY:c},l){const i=document.createElement("option");i.text=o||`Segment ${n}`,i.value=n,i.setAttribute("data-width",s),i.setAttribute("data-height",c),0===l&&(i.selected=!0,t.value=s,a.value=c),e.add(i)}))}catch(e){I(e,"error")}finally{w()}}!async function(){await r(),await d(),l()}();const m=document.getElementById("dropzone"),u=document.getElementById("source");function y(e){return new Promise(((t,n)=>{const a=new Image;a.addEventListener("load",(function(){t(a)})),a.addEventListener("error",(function(){n(new Error("Error loading image"))})),a.src=e}))}function g(e){const{value:t}=document.getElementById("pattern"),{value:n}=document.getElementById("segments"),{value:a}=document.getElementById("brightness"),{value:o}=document.getElementById("width"),{value:s}=document.getElementById("height"),{checked:c}=document.getElementById("resizeImage"),l=48,i=o*l,d=s*l,r=i<=768?14:18,m=o*s,u=[];let y=[];const{ctx:g}=E(o,s);g.drawImage(e,0,0,o,s);const h=g.getImageData(0,0,o,s).data,{canvas:v,ctx:I}=E(i,d);for(let e=0;e<s;e++)for(let t=0;t<o;t++){const n=e*o+t,a=p(h[4*n],h[4*n+1],h[4*n+2],h[4*n+3]),{r:s,g:c,b:i}=f(a);u.push(a);let d=t*l,m=e*l;I.fillStyle=`rgb(${s}, ${c}, ${i})`,I.fillRect(d,m,l,l),I.lineWidth=1,I.strokeStyle="#ffffff",I.strokeRect(d,m,l,l);let y=d+24,g=m+24;I.fo
|
2023-06-10 20:43:27 +02:00
|
|
|
</script>
|
|
|
|
|
</html>
|
