dieren: hidden images as easter eggs
[sheet.git] / dieren.plp
1 <(common.inc.plp)><:
2
3 Html({
4         title => 'dieren cheat sheet',
5         version => '1.0',
6         description => [],
7         keywords => [qw'
8                 dier beest naam naamgeving woord taal nederlands gerelateerd
9                 relatie vernoemd vernoeming combinatie samenstelling onverwant
10                 land zee lucht  animals dutch language
11         '],
12         raw => <<'EOT',
13 <style>
14 table {
15         width: 100%;
16 }
17 tr:first-child th {
18         word-break: break-all;
19 }
20 img {
21         vertical-align: bottom;
22         width: 100%;
23 }
24 img[hidden] {
25         transition: opacity 1s 0s;
26         display: inline;
27         opacity: 0;
28 }
29 img[hidden]:hover {
30         opacity: 1;
31         transition-delay: 2s;
32 }
33 </style>
34 EOT
35 });
36
37 :>
38 <h1>Dierennamen <small>(Dutch animal names)</small></h1>
39
40 <p>Dieren die in het Nederlands vernoemd zijn naar andere dieren.</p>
41
42 <:
43 my @table = qw(
44         >:         origineel: zee-:        meer_water:  aardig:      anders:
45         >hond:     hond       zeehond      waterhond?   aardhond?    vleerhond
46         >kat:      kat        zeekat       meerkat      caterpillar? tijgerkat
47         >muis:     muis       zeemuis      waterrat?    aardmuis     vleermuis
48         >egel:     egel       zee-egel     wateregel?   aardegel?    mierenegel
49         >varken:   varken     zeevarken    waterzwijn   aardvarken   stekelvarken
50         >koe:      koe        zeekoe       meerkoetje   aardkoe?     haiku?
51         >paard:    paard      zeepaardje   nijlpaard    aardpaard?   luipaard
52         >beer:     beer       zeebeer      waterbeertje ijsbeer      wasbeer
53         >leeuw:    leeuw      zeeleeuw     waterleeuw?  aardleeuw?   mierenleeuw
54         >wolf:     wolf       zeewolf      waterwolf?   aardwolf     buidelwolf
55         >haan:     haan       zeehaan      waterhaan    rotshaan     sprinkhaan
56 );
57
58 say '<table>';
59 for my $name (@table) {
60         if ($name =~ s/^>//) {
61                 # leading dash starts a new row
62                 say '</tr>' if $name;
63                 print "<tr>";
64         }
65         if ($name =~ s/:$//) {
66                 # trailing colon indicates header text
67                 $name =~ y/_/ /;
68                 print "<th>$name</th>";
69                 next;
70         }
71         print qq{<td title="$name">};
72         my $hidden = $name =~ s/\?$//;
73         if (-e (my $img = "data/dieren/$name.jpg")) {
74                 printf '<img src="/%s"', $img;
75                 printf ' alt="%s"', -l $img ? readlink($img) =~ s/\.jpg$//r : $name;
76                 print ' hidden' if $hidden;
77                 print ' />';
78         }
79         elsif (!$hidden) {
80                 print $name;
81         }
82         print '</td>';
83 }
84 say '</tr></table>';