Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Small changes demo page #129

Merged
merged 1 commit into from
Jul 19, 2023
Merged

Small changes demo page #129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/index.html
View file
Open in desktop
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
Open in desktop

Large diffs are not rendered by default.

20 changes: 10 additions & 10 deletions src/@demo/demo.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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