colors.html

   1 <?xml version="1.0" encoding="utf-8"?>
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   3         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   4 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   5 <head>
   6         <title>color.js test</title>
   7         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   8         <link rel="icon" type="image/ico" href="favicon.ico" />
   9
  10         <!-- load jquery from Google's CDN
  11         <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  12         <script type="text/javascript">
  13                 google.load("jquery", "1");
  14         </script>
  15         -->
  16
  17         <script type="text/javascript" src="rcolor/color.min.js"></script>
  18         <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
  19
  20         <script type="text/javascript">
  21                 $(document).ready(function() {
  22
  23                         // create the colors
  24                         var lorem = Color.random("green", "blue");
  25                         var proin = Color.random("green", "blue");
  26                         var etiam = Color.random("green", "blue");
  27                         var sed   = Color.random("green", "blue");
  28                         var nulla = Color.random("green", "blue");
  29
  30                         // get the hex values
  31                         var hex_lorem = lorem.toString();
  32                         var hex_proin = proin.toString();
  33                         var hex_etiam = etiam.toString();
  34                         var hex_sed = sed.toString();
  35                         var hex_nulla = nulla.toString();
  36
  37                         // set the background color value and add the hex value of the color
  38                         $("#lorem").css("background-color", lorem).append("Color: " + hex_lorem);
  39                         $("#proin").css("background-color", proin).append("Color: " + hex_proin);
  40                         $("#etiam").css("background-color", etiam).append("Color: " + hex_etiam);
  41                         $("#sed").css("background-color",     sed).append("Color: " + hex_sed);
  42                         $("#nulla").css("background-color", nulla).append("Color: " + hex_nulla);
  43
  44                         // css settings for the rest of the page
  45                         $("#content").css("color", "white");
  46                         $("body").css("margin", "2em");
  47                         $(".tk").css("color", "black");
  48
  49                 });
  50         </script>
  51 </head>
  52 <body>
  53         <div id="content">
  54
  55                 <p class="tk">
  56                         Little page showing generation of random color palettes. <br />
  57                         color.js for the random colors from <a href="http://github.com/eligrey/color.js">http://github.com/eligrey/color.js</a>,
  58                         jquery 1.4.2 for making it dynamic from <a href="http://jquery.com/">http://jquery.com/</a>
  59                 </p>
  60
  61                 <p id="lorem">
  62                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque velit orci, quis eleifend mi.
  63                         Morbi non enim orci, rhoncus auctor urna. Aliquam lacus sapien, bibendum ut convallis vitae, vulputate
  64                         vel tellus. Nulla facilisi. Quisque vulputate enim rhoncus nibh pellentesque in condimentum libero tempor.
  65                         Vivamus sit amet sapien sapien. Quisque nulla purus, consectetur eu ultrices nec, feugiat in tellus. Aenean
  66                         eu felis sit amet arcu ultricies ornare in vel lectus. Phasellus eleifend rhoncus erat, ut facilisis est
  67                         condimentum vitae. Praesent egestas rhoncus venenatis. Vestibulum erat ante, luctus ac lacinia quis, luctus
  68                         sed justo. Vivamus pulvinar tellus sed ligula suscipit ullamcorper. Vivamus dapibus gravida malesuada. Morbi
  69                         ultricies, est eu consequat molestie, leo eros fringilla turpis, at fringilla enim diam eu augue.
  70                 </p>
  71
  72                 <p id="proin">
  73                         Proin porta velit nulla. Nulla pretium molestie ante. Nam a nulla urna, non ultricies quam. Nulla accumsan
  74                         turpis non lacus blandit mollis. Integer molestie lorem nec dolor consequat facilisis. In mi nibh, feugiat
  75                         feugiat pulvinar non, tincidunt ut lacus. Quisque lacinia iaculis libero at aliquam. Donec ornare sagittis
  76                         rutrum. Donec sagittis convallis rutrum. Proin vestibulum volutpat urna vel pellentesque. Quisque bibendum,
  77                         magna ut adipiscing dignissim, elit velit placerat purus, nec aliquet leo lorem at nunc.
  78                 </p>
  79
  80                 <p id="etiam">
  81                         Etiam odio est, sollicitudin eu commodo eget, egestas quis sem. Sed iaculis quam vitae nisi molestie nec
  82                         pulvinar lectus iaculis. Fusce mollis adipiscing velit a adipiscing. Nullam tempus, nibh bibendum semper
  83                         fringilla, massa eros commodo neque, ac lacinia mauris quam sit amet nibh. Ut consequat sodales porta.
  84                         Pellentesque auctor erat vitae libero dignissim sagittis. Proin bibendum, lorem ac molestie rhoncus, velit
  85                         metus consequat mi, in bibendum sapien dolor ac massa. Etiam fringilla erat ut sem venenatis non sodales
  86                         magna blandit. Quisque faucibus tellus sit amet massa dictum et accumsan velit elementum. Nulla tellus
  87                         tellus, tincidunt viverra facilisis at, rutrum a dolor. Pellentesque vitae egestas elit.
  88                 </p>
  89
  90                 <p id="sed">
  91                         Sed lobortis convallis nisi, at lacinia nisl tincidunt ut. Proin sodales pellentesque neque ac adipiscing.
  92                         In id nisl non leo interdum dignissim vitae non risus. Morbi pellentesque, odio sed hendrerit adipiscing,
  93                         elit nunc fringilla ante, eget interdum sapien est ac augue. Cum sociis natoque penatibus et magnis dis
  94                         parturient montes, nascetur ridiculus mus. Proin a sapien diam, et posuere ligula. Nunc mauris felis,
  95                         convallis vitae auctor vitae, dapibus vel elit. Suspendisse tempor, erat ut venenatis molestie, enim sapien
  96                         blandit sapien, et consequat ante orci non ante. Nam id arcu sit amet nulla elementum dapibus. Donec eu
  97                         felis ac quam lacinia porttitor.
  98                 </p>
  99
 100                 <p id="nulla">
 101                         Nulla a phasellus sit amet urna ornare posuere vel sit amet sem. Vivamus ultrices urna est. In et augue
 102                         vitae velit iaculis ornare at nec felis. Sed mi nibh, dignissim vel fermentum ut, ullamcorper sed risus.
 103                         Fusce malesuada purus non lacus ornare sed fringilla magna tempus. Ut rutrum urna non sem porttitor ac malesuada
 104                         massa ultrices. Vestibulum libero ligula, ultricies id imperdiet in, tristique non libero. Proin auctor volutpat
 105                         ligula, sed aliquam mi ultrices vitae. Donec dignissim magna vel dui venenatis eget molestie velit vestibulum.
 106                         Aenean eget nunc mi. Curabitur risus mi, faucibus non commodo ac, scelerisque nec odio. Vivamus in lectus turpis,
 107                         ultricies cursus arcu.
 108                 </p>
 109
 110                 <p class="tk"><a href="index.html">Go back</a></p>
 111
 112         </div>
 113 </body>
 114 </html>