tra-analysis/website/functions/node_modules/colour/examples/example.html
2019-01-06 13:14:45 -06:00

91 lines
3.0 KiB
HTML

<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Colors Example</title>
<script src="../colors.js"></script>
<link rel="stylesheet" type="text/css" href="example.css" />
</head>
<body>
<script>
var test = colors.red("hopefully colorless output");
document.write('Rainbows are fun!'.rainbow + '<br/>');
document.write('So '.italic + 'are'.underline + ' styles! '.bold + 'inverse'.inverse); // styles not widely supported
document.write('Chains are also cool.'.bold.italic.underline.red); // styles not widely supported
//document.write('zalgo time!'.zalgo);
document.write(test.stripColors);
document.write("a".grey + " b".black);
document.write("Zebras are so fun!".zebra);
document.write(colors.rainbow('Rainbows are fun!'));
document.write("This is " + "not".strikethrough + " fun.");
document.write(colors.italic('So ') + colors.underline('are') + colors.bold(' styles! ') + colors.inverse('inverse')); // styles not widely supported
document.write(colors.bold(colors.italic(colors.underline(colors.red('Chains are also cool.'))))); // styles not widely supported
//document.write(colors.zalgo('zalgo time!'));
document.write(colors.stripColors(test));
document.write(colors.grey("a") + colors.black(" b"));
colors.addSequencer("america", function(letter, i, exploded) {
if(letter === " ") return letter;
switch(i%3) {
case 0: return letter.red;
case 1: return letter.white;
case 2: return letter.blue;
}
});
colors.addSequencer("random", (function() {
var available = ['bold', 'underline', 'italic', 'inverse', 'grey', 'yellow', 'red', 'green', 'blue', 'white', 'cyan', 'magenta'];
return function(letter, i, exploded) {
return letter === " " ? letter : letter[available[Math.round(Math.random() * (available.length - 1))]];
};
})());
document.write("AMERICA! F--K YEAH!".america);
document.write("So apparently I've been to Mars, with all the little green men. But you know, I don't recall.".random);
//
// Custom themes
//
colors.setTheme({
silly: 'rainbow',
input: 'grey',
verbose: 'cyan',
prompt: 'grey',
info: 'green',
data: 'grey',
help: 'cyan',
warn: 'yellow',
debug: 'blue',
error: 'red'
});
// outputs red text
document.write("this is an error".error);
// outputs yellow text
document.write("this is a warning".warn);
//
// Using CSS classes
//
colors.mode = "browser-css";
var stylesColors = ['white', 'grey', 'black', 'blue', 'cyan', 'green', 'magenta', 'red', 'yellow'];
var stylesNormal = stylesColors.concat(['bold', 'italic', 'underline', 'inverse']);
stylesNormal.forEach(function (style) {
var string = "Im feeling rather " + style + " today.";
document.write(string[style] + "<br>");
});
</script>
</body>
</html>