Skip to content

Commit

Permalink
Melhorias diversas #1
Browse files Browse the repository at this point in the history
  • Loading branch information
@SrBedrock
SrBedrock authored Jul 17, 2024
2 parents b757eac + 0b1391c commit e038fba
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 49 deletions.
22 changes: 12 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@
<body id="bg" class="container" style="font-family: Quicksand;">

<div id="hexColorTemplate" style="display:none;">
<div class="row">
<div class="row padding-top">
<label for="color-$NUM">Cor HEX #$NUM</label>
<input class="form-control col-md-1 hexColor" id="color-$NUM" style="border-radius: 10px;" value="$VAL"
data-jscolor="{preset:'small dark', position:'right'}" oninput="javascript: updateOutputText(event)"
data-jscolor="{preset:'large dark thin', position:'bottom'}" oninput="javascript: updateOutputText(event)"
onchange="javascript: updateOutputText(event); Cookies.set(`#${$NUM}`, document.getElementById('color-$NUM').value, { expires: 7, path: '' })"/>
</div>
</div>
Expand All @@ -30,7 +30,7 @@
</div>
<div class="col-md-10" style="padding-right: 0;">
<div class="container-fluid">
<div class="row">
<div class="row padding-top">
<div id="output">
<label id="label4" for="outputText">Texto RGB</label>
<label id="graylabel2" class="gray" for="outputText" style="font-weight: normal;">Copie e cole este texto RGB no chat!</label>
Expand All @@ -44,13 +44,13 @@
</div>
<div class="row">
<div class="col-md-3" style="padding-left: 0;">
<label for="nickname">Mensagem</label>
<label for="nickname">Digite seu texto abaixo!</label>
<input class="form-control" id="nickname" type="text" maxlength="100" placeholder="Seu texto"
value="armamc.com" oninput="javascript: updateOutputText(event);"
onchange="javascript: updateOutputText(event)">
</div>
</div>
<div class="row" hidden style="margin-top: 10px;">
<div class="row" hidden style="margin-top: 10px; padding-top: 100px;">
<div class="col-md-3" style="padding-left: 0;">
<label for="output-format">Formato do Texto</label>
<select id="output-format"
Expand All @@ -66,25 +66,27 @@
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-md-3" style="padding-left: 0;">
<div class="col-md-3 padding-top" style="padding-left: 0px;">
<label for="color-preset">Predefinição de cores</label>
<select id="color-preset"
class="form-control"
onchange="preset(this.value); updateOutputText(event); ">
<option value='0'>Nenhum</option>
<option value='1'>Arco-íris</option>
<option value='2'>VIP Férias</option>
</select>
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="row padding-top" style="margin-top: 10px;">
<label for="numOfColors">Número de Cores</label>
<input class="form-control"
style="width: 75px;"
value="2" id="numOfColors" type="number" min="2" max="10"
onchange="updateOutputText(event); toggleColors(this.value);"
oninput="updateOutputText(event); toggleColors(this.value);"/>
</div>
<div class="row" style="margin-top: 10px;">
<div class="row padding-top" style="margin-top: 10px;">
<label for="color-preset">Formatos - Não funciona com <code>/nick</code></label>
<div id="dbold">
<input type="checkbox" id="bold" onclick="updateOutputText(event);"/>
<label for="bold">Negrito</label>
Expand All @@ -101,10 +103,10 @@
<input type="checkbox" id="strike" onclick="updateOutputText(event);"/>
<label for="strike">Tachado</label>
</div>
<div id="appearance">
<!-- <div id="appearance">
<input type="checkbox" id="darkmode" onclick="darkMode();"></input>
<label for="darkmode" style="margin-bottom: 0px;margin-top: 0px;">Modo Escuro</label>
</div>
</div> -->
</div>
</div>
</div>
Expand Down
63 changes: 24 additions & 39 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ const savedColors = ['084CFB', 'ADF3FD', getRandomHexColor(), getRandomHexColor(
const presets = {
1: {
colors: ["FF0000", "FF7F00", "FFFF00", "00FF00", "0000FF", "4B0082", "9400D3"],
},
2: {
colors: ["#AAFF99", "#73D1FF", "#FFB8B8", "#CD70FF"],
}
}
const formats = {
Expand Down Expand Up @@ -64,48 +67,31 @@ const formats = {
},
};

function darkMode() {
if (document.getElementById('darkmode').checked == true) {
document.body.classList.add('dark');
document.getElementById('output-format').classList.add("dark");
document.getElementById('color-preset').classList.add("dark");
document.getElementById('numOfColors').classList.add("dark");
document.getElementById('graylabel1').classList.replace("gray", "darkgray");
document.getElementById('graylabel2').classList.replace("gray", "darkgray");
document.getElementById('outputText').classList.replace("gray", "darkgray");
document.getElementById('outputText').classList.replace("gray", "darkgray");
document.getElementById('error').classList.replace("errortext", "darkerrortext");
document.getElementById('numOfColors').classList.add("darktextboxes");
document.getElementById('nickname').classList.add("darktextboxes");
document.getElementById('outputText').classList.add("darktextboxes");
Array.from(document.getElementsByClassName("hexColor")).forEach(e => {
document.getElementById(e.id).classList.add("darktextboxes");
})
} else {
document.body.classList.remove('dark');
document.getElementById('output-format').classList.remove("dark");
document.getElementById('color-preset').classList.remove("dark");
document.getElementById('numOfColors').classList.remove("dark");
document.getElementById('graylabel1').classList.replace("darkgray", "gray");
document.getElementById('graylabel2').classList.replace("darkgray", "gray");
document.getElementById('outputText').classList.replace("darkgray", "gray");
document.getElementById('error').classList.replace("darkerrortext", "errortext");
document.getElementById('numOfColors').classList.remove("darktextboxes");
document.getElementById('nickname').classList.remove("darktextboxes");
document.getElementById('outputText').classList.remove("darktextboxes");
Array.from(document.getElementsByClassName("hexColor")).forEach(e => {
document.getElementById(e.id).classList.remove("darktextboxes");
})
}
// Set dark mode by default
function setDarkMode() {
document.body.classList.add('dark');
document.getElementById('output-format').classList.add("dark");
document.getElementById('color-preset').classList.add("dark");
document.getElementById('numOfColors').classList.add("dark");
document.getElementById('graylabel1').classList.replace("gray", "darkgray");
document.getElementById('graylabel2').classList.replace("gray", "darkgray");
document.getElementById('outputText').classList.replace("gray", "darkgray");
document.getElementById('outputText').classList.replace("gray", "darkgray");
document.getElementById('error').classList.replace("errortext", "darkerrortext");
document.getElementById('numOfColors').classList.add("darktextboxes");
document.getElementById('nickname').classList.add("darktextboxes");
document.getElementById('outputText').classList.add("darktextboxes");
Array.from(document.getElementsByClassName("hexColor")).forEach(e => {
document.getElementById(e.id).classList.add("darktextboxes");
});
}

/* Get a random HEX color */
function getRandomHexColor() {
return Math.floor(Math.random()*16777215).toString(16).toUpperCase();
}

/*
Copies contents to clipboard

function copyTextToClipboard(text) {
let textArea = document.createElement('textarea');
textArea.value = text;
Expand All @@ -115,10 +101,9 @@ function copyTextToClipboard(text) {
textArea.select();

document.execCommand('copy');
alert('Copied output!');
alert('Texto copiado!');
document.body.removeChild(textArea);
}
*/

function showError(show) {
if (show) {
Expand Down Expand Up @@ -368,7 +353,7 @@ function preset(n) {
}
jscolor.install(); // Refresh all jscolor elements
}

toggleColors(2);
updateOutputText();
document.getElementById('darkmode').checked = true
darkMode()
setDarkMode()
3 changes: 3 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,4 +128,7 @@ select.dark {
}
body{
margin: auto;
}
.padding-top {
padding-top: 20px;
}

0 comments on commit e038fba

Please sign in to comment.