91 lines
3.1 KiB
HTML
91 lines
3.1 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>
|