Skip to content

Commit

Permalink
Small changes demo page
Browse files Browse the repository at this point in the history
  • Loading branch information
@elchininet
elchininet committed Jul 19, 2023
1 parent ee6b1ce commit 9461f8d
Show file tree
Hide file tree
Showing 8 changed files with 24 additions and 24 deletions.
2 changes: 1 addition & 1 deletion docs/index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,user-scalable=yes"/><title>ColorTranslator demo</title><meta name="description" content="A JavaScript library, written in TypeScript, to convert among different color models"/><link rel="icon" href="favicon.png"><script defer="defer" src="scripts/bundle.js"></script><link href="styles/styles.css" rel="stylesheet"></head><body><header class="separator"><a href="https://github.com/elchininet/ColorTranslator" target="_blank" rel="noopener noreferrer"><img class="logo" src="images/logo_white.svg"/></a></header><div class="github-buttons"><a class="github-button" href="https://github.com/elchininet/ColorTranslator/archive/master.zip" data-icon="octicon-cloud-download" data-size="large" aria-label="Download elchininet/ColorTranslator on GitHub">Download</a> <a class="github-button" href="https://github.com/elchininet/ColorTranslator/fork" data-icon="octicon-repo-forked" data-size="large" aria-label="Fork elchininet/ColorTranslator on GitHub">Fork</a> <a class="github-button" href="https://github.com/elchininet/ColorTranslator" data-icon="octicon-star" data-size="large" aria-label="Star elchininet/ColorTranslator on GitHub">Star</a></div><h3>Modify colour saturation and luminance</h3><div id="demo1" role="presentation" class="demo demo-square separator"></div><h3>Modify colour hue</h3><div id="demo2" role="presentation" class="demo demo-square-half separator"></div><h3>Wiphala modifying colour hue</h3><div id="demo3" role="presentation" class="demo demo-square separator"></div><h3>Desaturate primary colours</h3><div id="demo4" role="presentation" class="demo demo-square separator"></div><h3>Blends between two colours</h3><div id="demo5" role="presentation" class="demo demo-square separator"></div><h3>Shades and tints of a colour</h3><div id="demo6" role="presentation" class="demo demo-square separator"></div><h3>Mix colours additive mode</h3><div id="demo7" role="presentation" class="demo demo-square separator"></div><h3>Mix colours subtractive mode</h3><div id="demo8" role="presentation" class="demo demo-square separator"></div><h3>Additive Colour Harmonies</h3><div id="demo9" role="presentation" class="demo demo-square separator"></div><h3>Subtractive Colour Harmonies</h3><div id="demo10" role="presentation" class="demo demo-square separator"></div><script async defer="defer" src="https://buttons.github.io/buttons.js"></script></body></html>
<!doctype html><html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,user-scalable=yes"/><title>ColorTranslator demo</title><meta name="description" content="A JavaScript library, written in TypeScript, to convert among different color models"/><link rel="icon" href="favicon.png"><script defer="defer" src="scripts/bundle.js"></script><link href="styles/styles.css" rel="stylesheet"></head><body><header class="separator"><a href="https://github.com/elchininet/ColorTranslator" target="_blank" rel="noopener noreferrer"><img class="logo" src="images/logo_white.svg"/></a></header><div class="github-buttons"><a class="github-button" href="https://github.com/elchininet/ColorTranslator/archive/master.zip" data-icon="octicon-cloud-download" data-size="large" aria-label="Download elchininet/ColorTranslator on GitHub">Download</a> <a class="github-button" href="https://github.com/elchininet/ColorTranslator/fork" data-icon="octicon-repo-forked" data-size="large" aria-label="Fork elchininet/ColorTranslator on GitHub">Fork</a> <a class="github-button" href="https://github.com/elchininet/ColorTranslator" data-icon="octicon-star" data-size="large" aria-label="Star elchininet/ColorTranslator on GitHub">Star</a></div><h3>Modifing color saturation and luminance</h3><div id="demo1" role="presentation" class="demo demo-square separator"></div><h3>Modifing color hue</h3><div id="demo2" role="presentation" class="demo demo-square-half separator"></div><h3>Wiphala modifying color hue</h3><div id="demo3" role="presentation" class="demo demo-square separator"></div><h3>Desaturating primary colors</h3><div id="demo4" role="presentation" class="demo demo-square separator"></div><h3>Blending between two colors</h3><div id="demo5" role="presentation" class="demo demo-square separator"></div><h3>Shades and tints of a color</h3><div id="demo6" role="presentation" class="demo demo-square separator"></div><h3>Mixing colors in additive mode</h3><div id="demo7" role="presentation" class="demo demo-square separator"></div><h3>Mixing colors in subtractive mode</h3><div id="demo8" role="presentation" class="demo demo-square separator"></div><h3>Additive Color Harmonies</h3><div id="demo9" role="presentation" class="demo demo-square separator"></div><h3>Subtractive Color Harmonies</h3><div id="demo10" role="presentation" class="demo demo-square separator"></div><script async defer="defer" src="https://buttons.github.io/buttons.js"></script></body></html>
2 changes: 1 addition & 1 deletion docs/scripts/bundle.js
View file

Large diffs are not rendered by default.

20 changes: 10 additions & 10 deletions src/@demo/demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,34 +45,34 @@
>Star</a
>
</div>
<h3>Modify colour saturation and luminance</h3>
<h3>Modifing color saturation and luminance</h3>
<div id="demo1" role="presentation" class="demo demo-square separator"></div>

<h3>Modify colour hue</h3>
<h3>Modifing color hue</h3>
<div id="demo2" role="presentation" class="demo demo-square-half separator"></div>

<h3>Wiphala modifying colour hue</h3>
<h3>Wiphala modifying color hue</h3>
<div id="demo3" role="presentation" class="demo demo-square separator"></div>

<h3>Desaturate primary colours</h3>
<h3>Desaturating primary colors</h3>
<div id="demo4" role="presentation" class="demo demo-square separator"></div>

<h3>Blends between two colours</h3>
<h3>Blending between two colors</h3>
<div id="demo5" role="presentation" class="demo demo-square separator"></div>

<h3>Shades and tints of a colour</h3>
<h3>Shades and tints of a color</h3>
<div id="demo6" role="presentation" class="demo demo-square separator"></div>

<h3>Mix colours additive mode</h3>
<h3>Mixing colors in additive mode</h3>
<div id="demo7" role="presentation" class="demo demo-square separator"></div>

<h3>Mix colours subtractive mode</h3>
<h3>Mixing colors in subtractive mode</h3>
<div id="demo8" role="presentation" class="demo demo-square separator"></div>

<h3>Additive Colour Harmonies</h3>
<h3>Additive Color Harmonies</h3>
<div id="demo9" role="presentation" class="demo demo-square separator"></div>

<h3>Subtractive Colour Harmonies</h3>
<h3>Subtractive Color Harmonies</h3>
<div id="demo10" role="presentation" class="demo demo-square separator"></div>

<script async defer src="https://buttons.github.io/buttons.js"></script>
Expand Down
4 changes: 2 additions & 2 deletions src/@demo/demo4/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ export default (ColorTranslator) => {

for (let row = 0; row < total; row++) {

const hsl = ColorTranslator.toHSLObject(colors[row], { decimals: 0 });
const hsl = ColorTranslator.toHSLObject(colors[row]);
const step = hsl.s / (total - 1);

for (let col = 0; col < total; col++) {

const rgb = ColorTranslator.toHEX(hsl, { decimals: 0 });
const rgb = ColorTranslator.toHEX(hsl);
const cmyk = ColorTranslator.toCMYKObject(hsl, { decimals: 0 });

const box = document.createElement('div');
Expand Down
2 changes: 1 addition & 1 deletion src/@demo/demo5/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default (ColorTranslator) => {

for (let i = 0; i < rows; i++) {

const blends = ColorTranslator.getBlendHEX('#FF0000', '#FFFF00', mult + i * mult);
const blends = ColorTranslator.getBlendHEX('#F00', '#FF0', mult + i * mult);

blends.forEach((blend, index) => {
const box = document.createElement('div');
Expand Down
2 changes: 1 addition & 1 deletion src/@demo/demo6/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export default (ColorTranslator) => {

const container = document.createElement('div');

const colors = ['#F00', '#FF8000', '#FF0', '#0F0', '#00F', '#AA00FF', '#FF00AA'];
const colors = ['#F00', '#FF8000', '#FF0', '#0F0', '#00F', '#A0F', '#F0A'];

const createBox = (color, type) => {
const box = document.createElement('div');
Expand Down
8 changes: 4 additions & 4 deletions src/@demo/demo7/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ export default (ColorTranslator) => {
const container = document.createElement('div');

const mixes = [
'#FF0000',
'#00FF00',
'#0000FF',
'#F00',
'#0F0',
'#00F',
[1, 3],
[1, 2],
[2, 3],
Expand All @@ -18,7 +18,7 @@ export default (ColorTranslator) => {
const fillPlanes = () => {
const planes = container.querySelectorAll('#planes path');
planes.forEach((plane, index) => {
let color = '#CCCCCC';
let color = '#CCC';
if (typeof mixes[index] === 'string') {
color = mixes[index];
} else if(mixes[index]) {
Expand Down
8 changes: 4 additions & 4 deletions src/@demo/demo8/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ export default (ColorTranslator, { Mix }) => {
const container = document.createElement('div');

const mixes = [
'#FF0000',
'#FFFF00',
'#0000FF',
'#F00',
'#FF0',
'#00F',
[1, 3],
[1, 2],
[2, 3],
Expand All @@ -17,7 +17,7 @@ export default (ColorTranslator, { Mix }) => {
const fillPlanes = () => {
const planes = container.querySelectorAll('#planes path');
planes.forEach((plane, index) => {
let color = '#CCCCCC';
let color = '#CCC';
if (typeof mixes[index] === 'string') {
color = mixes[index];
} else if(mixes[index]) {
Expand Down

0 comments on commit 9461f8d

Please sign in to comment.