emacs/nxhtml/tests/in/kubica-080516-freezing-2j.html

   1 {% load transdigest helpers %}
   2 <?xml version="1.0" encoding="UTF-8"?>
   3 <!DOCTYPE html PUBLIC
   4     "-//W3C//DTD XHTML 1.0 Transitional//EN"
   5     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   6 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   7     <head profile="http://dublincore.org/documents/dcq-html/">
   8         <link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
   9         <link rel="schema.DCTERMS" href="http://purl.org/dc/terms/" />
  10         <link rel="stylesheet" type="text/css" href="{% media_url %}/homepage/css/web0.5.css" media="screen" />
  11
  12         <title>{% block title %}{% translate "WELCOME_TO_POINTTEC" %}{% endblock %}</title>
  13         <meta name="DC.title" content="Homepage of point TEC" />
  14         <meta name="DC.creator" content="Marek Kubica" />
  15         <meta name="DC.subject" content="Presentation of products" />
  16         <meta name="DC.publisher" content="point TEC" />
  17         <meta name="DC.rights" content="copyright by point TEC" />
  18         {% block htmlhead %}
  19
  20         {% endblock %}
  21         <style type="text/css">
  22
  23         * {
  24                 margin: 0;
  25                 padding: 0;
  26         }
  27         img {
  28                 border: 0
  29         }
  30
  31         html, body {
  32                 height: 100%;
  33         }
  34
  35         #distance {
  36                 width: 1px;
  37                 height: 50%;
  38                 margin-bottom: -175px;
  39         }
  40         #container {
  41                 position: relative;
  42                 margin: 0 auto;
  43                 height: 370px;
  44                 width: 500px;
  45                 background-color: #ffffff;
  46         }
  47         /* the horizontal bars */
  48         #flashcontent * div {
  49                 background-color: #292926;
  50         }
  51
  52         #pointer {
  53                 display: block;
  54                 margin: 0 auto;
  55         }
  56
  57                 { % endblock % }
  58         </style>
  59         <script type="text/javascript" src="{% media_url %}/homepage/js/jquery.js"></script>
  60         <script type="text/javascript" src="{% media_url %}/homepage/js/jquery.preload.js"></script>
  61         <script type="text/javascript" src="{% media_url %}/homepage/js/swfobject.js"></script>
  62         <script type="text/javascript">
  63         function image_loaded(info) {
  64                 /* now we know that the image is loaded, we can add in to the
  65                  * document and position it as we want */
  66                 // create the element, set the ID and add in to the DOM,
  67                 // otherwise it won't have dimensions
  68                 var pointer = $('<img src="' + info.image + '" />');
  69                 pointer.attr('id', 'pointer');
  70                 var frame = $('#container');
  71                 pointer.appendTo(frame);
  72
  73                 // put it into the center and make top & left be in the center
  74                 // of the image (cool hack)
  75                 pointer.css({
  76                         position: 'absolute',
  77                         top: '50%',
  78                         left: '50%',
  79                         margin: (-pointer.height() / 2) + 'px 0 0 ' +
  80                                 (-pointer.width() / 2) + 'px'
  81                 });
  82
  83                 // continue with the animation now
  84                 play_animation();
  85         }
  86
  87         function prepare_animation() {
  88                 /* prepares animation by preloading stuff */
  89                 // hide all panels
  90                 $('a > img').css('visibility', 'hidden');
  91                 // create the logo - 'pointer': preload and center it
  92                 $.preload(['logo'], {
  93                         base: '{ % media_url % }/homepage/img/intro/',
  94                         ext: '.png',
  95                         onFinish: image_loaded
  96                 });
  97         }
  98
  99         function play_animation() {
 100         /* plays the animations, adds callbacks */
 101         var frame = $('#container');
 102         var pointer = $('#pointer');
 103
 104         /* run the effects now: first fade in the pointer, then move it
 105          * to the edge of the frame, then fade in the panels
 106          */
 107         pointer.hide().fadeIn(2000)
 108                .animate({
 109                         top: pointer.height() / 2 + 10,
 110                         left: frame.width() - pointer.width() / 2
 111                         }, 3000, undefined, function() {
 112                                 var panels = $('a > img');
 113                                 // show panels, fade them in and add callbacks
 114                                 panels.css({ visibility: 'visible',
 115                                         opacity: '0'})
 116                                       .fadeTo(1000, 0.5)
 117                                       .mouseover(fade_in)
 118                                       .mouseout(fade_out);
 119                                 });
 120         }
 121
 122         function fade_in() {
 123                 /* fade in the panel */
 124                 $(this).fadeTo(300, 1);
 125         }
 126
 127         function fade_out() {
 128                 /* fade out the panel */
 129                 $(this).fadeTo(300, 0.5);
 130         }
 131
 132         // start JS magic when the page has loaded
 133         $(document).ready(prepare_animation);
 134         </script>
 135
 136     </head>
 137
 138 {% block body %}
 139 <body>
 140
 141 <div id="distance"></div>
 142 <div id="container">
 143   <div id="flashcontent">
 144
 145     <table border="0">
 146       <tr>
 147         <td colspan="3"><div style="height: 63px;" /></td>
 148       </tr>
 149       <tr>
 150         <td><a href="/junkers/"><img src="{% media_url %}/homepage/img/intro/panel_junkers.jpg" alt="junkers" width="166" height="221" /></a></td>
 151         <td><a href="/zeppelin/"><img src="{% media_url %}/homepage/img/intro/panel_zeppelin.jpg" alt="zeppelin" width="168" height="221" /></a></td>
 152         <td><a href="/maximilian/"><img src="{% media_url %}/homepage/img/intro/panel_maximilian.jpg" alt="maximilian" width="162" height="221" /></a></td>
 153       </tr>
 154       <tr>
 155         <td colspan="3"><div style="height: 66px;" /></td>
 156       </tr>
 157     </table>
 158   </div>
 159
 160   <script type="text/javascript">
 161         // <![CDATA[
 162         var so = new SWFObject("{% media_url % }/homepage/swf/intro_{ % translate "LANGUAGE_NAME" % }.swf", "intro", "500", "370", "9", "#FFF");
 163         so.addParam("allowScriptAccess", "always");
 164         so.write("flashcontent");
 165         // ]]>
 166   </script>
 167
 168 </div>
 169 </div>
 170
 171 </body>
 172 {% endblock %}
 173
 174 </html>