1use strict;
2use warnings;
3
4use Color::Palette;
5use Color::Palette::Schema;
6use HTML::Entities;
7use JSON;
8
9my $pb_palette = Color::Palette->new({
10  colors => {
11    background => [ 0xEE, 0xEE, 0xEE ],
12
13    plainText  => 'black',
14    errorText  => 'poboxRedDark',
15    brightText => 'poboxBlueLight',
16
17    highlight  => 'poboxBlue',
18    lowlight   => [ 0x33, 0x33, 0x33 ],
19
20    linkText   => 'poboxBlueDark',
21
22    black      => [ 0x00, 0x00, 0x00 ],
23    white      => [ 0xFF, 0xFF, 0xFF ],
24
25    poboxBlue      => [ 0x0A, 0x5E, 0xFF ],
26    poboxBlueDark  => [ 0x04, 0x3F, 0xA6 ],
27    poboxBlueLight => [ 0xC8, 0xDF, 0xFE ],
28    poboxRedDark   => [ 0xA4, 0x00, 0x05 ],
29  },
30});
31
32my $lb_palette = Color::Palette->new({
33  colors => {
34    background => [ 0xEE, 0xEE, 0xEE ],
35
36    plainText  => 'black',
37    errorText  => 'listboxRedDark',
38    brightText => 'listboxGreenLight',
39
40    highlight  => 'listboxGreen',
41    lowlight   => [ 0x33, 0x33, 0x33 ],
42
43    linkText   => 'listboxGreenDark',
44
45    black      => [ 0x00, 0x00, 0x00 ],
46    white      => [ 0xFF, 0xFF, 0xFF ],
47
48    listboxGreen      => [ 0x66, 0x99, 0x00 ],
49    listboxGreenDark  => [ 0x3E, 0x51, 0x13 ],
50    listboxGreenLight => [ 0xB9, 0xDB, 0x5D ],
51    listboxRedDark    => [ 0xA4, 0x00, 0x05 ],
52  },
53});
54
55my $template = Color::Palette::Schema->new({
56  required_colors => [ qw(
57    background plainText errorText brightText highlight lowlight linkText
58  ) ],
59});
60
61my $opb_palette = $pb_palette->optimize_for($template);
62my $olb_palette = $lb_palette->optimize_for($template);
63
64my $pcs = JSON->new->encode($opb_palette->hex_triples);
65my $lcs = JSON->new->encode($olb_palette->hex_triples);
66
67my $HTML = <<"HTML";
68<html>
69<head>
70  <title>Test Page</title>
71  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
72</head>
73
74<script>
75var palette = {
76  pobox  : $pcs,
77  listbox: $lcs,
78};
79
80function applyStyle(which) {
81  var pal = palette[ which ];
82  var rgb_str;
83
84  \$("body").css({ backgroundColor: pal.background });
85
86  \$("h1").css({ color: pal.highlight });
87
88  \$(".error").css({ color: pal.errorText });
89
90  \$("blockquote").css({
91    color: pal.highlight,
92    backgroundColor: pal.lowlight
93  });
94
95  \$("pre").css({
96    border: "medium dashed " + pal.linkText
97  });
98}
99</script>
100
101<body>
102  <h1>This is a Demo Page</h1>
103
104  <div class='error'>error text</div>
105  <blockquote>
106    This is some demo text.
107  </blockquote>
108
109  <p>
110    ...and here is some boring normal text.
111  </p>
112
113  <button onClick="applyStyle('pobox')">Pobox</button>
114  <button onClick="applyStyle('listbox')">Listbox</button>
115
116<pre>
117PROGRAM_SOURCE
118</pre>
119</body>
120</html>
121HTML
122
123my $source = do {
124  seek *DATA, 0, 0;
125  local $/;
126  <DATA>;
127};
128
129$source = encode_entities($source);
130$HTML =~ s/PROGRAM_SOURCE/$source/;
131
132print $HTML;
133__DATA__
134