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

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