175 lines
4.8 KiB
HTML
175 lines
4.8 KiB
HTML
|
{% load transdigest helpers %}
|
||
|
|
<?xml version="1.0" encoding="UTF-8"?>
|
||
|
|
<!DOCTYPE html PUBLIC
|
||
|
|
"-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||
|
|
<head profile="http://dublincore.org/documents/dcq-html/">
|
||
|
|
<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
|
||
|
|
<link rel="schema.DCTERMS" href="http://purl.org/dc/terms/" />
|
||
|
|
<link rel="stylesheet" type="text/css" href="{% media_url %}/homepage/css/web0.5.css" media="screen" />
|
||
|
|
|
||
|
|
<title>{% block title %}{% translate "WELCOME_TO_POINTTEC" %}{% endblock %}</title>
|
||
|
|
<meta name="DC.title" content="Homepage of point TEC" />
|
||
|
|
<meta name="DC.creator" content="Marek Kubica" />
|
||
|
|
<meta name="DC.subject" content="Presentation of products" />
|
||
|
|
<meta name="DC.publisher" content="point TEC" />
|
||
|
|
<meta name="DC.rights" content="copyright by point TEC" />
|
||
|
|
{% block htmlhead %}
|
||
|
|
|
||
|
|
{% endblock %}
|
||
|
|
<style type="text/css">
|
||
|
|
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
img {
|
||
|
|
border: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
html, body {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#distance {
|
||
|
|
width: 1px;
|
||
|
|
height: 50%;
|
||
|
|
margin-bottom: -175px;
|
||
|
|
}
|
||
|
|
#container {
|
||
|
|
position: relative;
|
||
|
|
margin: 0 auto;
|
||
|
|
height: 370px;
|
||
|
|
width: 500px;
|
||
|
|
background-color: #ffffff;
|
||
|
|
}
|
||
|
|
/* the horizontal bars */
|
||
|
|
#flashcontent * div {
|
||
|
|
background-color: #292926;
|
||
|
|
}
|
||
|
|
|
||
|
|
#pointer {
|
||
|
|
display: block;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
{ % endblock % }
|
||
|
|
</style>
|
||
|
|
<script type="text/javascript" src="{% media_url %}/homepage/js/jquery.js"></script>
|
||
|
|
<script type="text/javascript" src="{% media_url %}/homepage/js/jquery.preload.js"></script>
|
||
|
|
<script type="text/javascript" src="{% media_url %}/homepage/js/swfobject.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
function image_loaded(info) {
|
||
|
|
/* now we know that the image is loaded, we can add in to the
|
||
|
|
* document and position it as we want */
|
||
|
|
// create the element, set the ID and add in to the DOM,
|
||
|
|
// otherwise it won't have dimensions
|
||
|
|
var pointer = $('<img src="' + info.image + '" />');
|
||
|
|
pointer.attr('id', 'pointer');
|
||
|
|
var frame = $('#container');
|
||
|
|
pointer.appendTo(frame);
|
||
|
|
|
||
|
|
// put it into the center and make top & left be in the center
|
||
|
|
// of the image (cool hack)
|
||
|
|
pointer.css({
|
||
|
|
position: 'absolute',
|
||
|
|
top: '50%',
|
||
|
|
left: '50%',
|
||
|
|
margin: (-pointer.height() / 2) + 'px 0 0 ' +
|
||
|
|
(-pointer.width() / 2) + 'px'
|
||
|
|
});
|
||
|
|
|
||
|
|
// continue with the animation now
|
||
|
|
play_animation();
|
||
|
|
}
|
||
|
|
|
||
|
|
function prepare_animation() {
|
||
|
|
/* prepares animation by preloading stuff */
|
||
|
|
// hide all panels
|
||
|
|
$('a > img').css('visibility', 'hidden');
|
||
|
|
// create the logo - 'pointer': preload and center it
|
||
|
|
$.preload(['logo'], {
|
||
|
|
base: '{ % media_url % }/homepage/img/intro/',
|
||
|
|
ext: '.png',
|
||
|
|
onFinish: image_loaded
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function play_animation() {
|
||
|
|
/* plays the animations, adds callbacks */
|
||
|
|
var frame = $('#container');
|
||
|
|
var pointer = $('#pointer');
|
||
|
|
|
||
|
|
/* run the effects now: first fade in the pointer, then move it
|
||
|
|
* to the edge of the frame, then fade in the panels
|
||
|
|
*/
|
||
|
|
pointer.hide().fadeIn(2000)
|
||
|
|
.animate({
|
||
|
|
top: pointer.height() / 2 + 10,
|
||
|
|
left: frame.width() - pointer.width() / 2
|
||
|
|
}, 3000, undefined, function() {
|
||
|
|
var panels = $('a > img');
|
||
|
|
// show panels, fade them in and add callbacks
|
||
|
|
panels.css({ visibility: 'visible',
|
||
|
|
opacity: '0'})
|
||
|
|
.fadeTo(1000, 0.5)
|
||
|
|
.mouseover(fade_in)
|
||
|
|
.mouseout(fade_out);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function fade_in() {
|
||
|
|
/* fade in the panel */
|
||
|
|
$(this).fadeTo(300, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
function fade_out() {
|
||
|
|
/* fade out the panel */
|
||
|
|
$(this).fadeTo(300, 0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
// start JS magic when the page has loaded
|
||
|
|
$(document).ready(prepare_animation);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
{% block body %}
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="distance"></div>
|
||
|
|
<div id="container">
|
||
|
|
<div id="flashcontent">
|
||
|
|
|
||
|
|
<table border="0">
|
||
|
|
<tr>
|
||
|
|
<td colspan="3"><div style="height: 63px;" /></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><a href="/junkers/"><img src="{% media_url %}/homepage/img/intro/panel_junkers.jpg" alt="junkers" width="166" height="221" /></a></td>
|
||
|
|
<td><a href="/zeppelin/"><img src="{% media_url %}/homepage/img/intro/panel_zeppelin.jpg" alt="zeppelin" width="168" height="221" /></a></td>
|
||
|
|
<td><a href="/maximilian/"><img src="{% media_url %}/homepage/img/intro/panel_maximilian.jpg" alt="maximilian" width="162" height="221" /></a></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td colspan="3"><div style="height: 66px;" /></td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
// <![CDATA[
|
||
|
|
var so = new SWFObject("{% media_url % }/homepage/swf/intro_{ % translate "LANGUAGE_NAME" % }.swf", "intro", "500", "370", "9", "#FFF");
|
||
|
|
so.addParam("allowScriptAccess", "always");
|
||
|
|
so.write("flashcontent");
|
||
|
|
// ]]>
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
</html>
|