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