Kings of Leon
From Labmm2
(Difference between revisions)
(→Principais scripts desenvolvidas (JavaScript)) |
(→Referências bibliográficas) |
||
| Line 2,657: | Line 2,657: | ||
== Referências bibliográficas == | == Referências bibliográficas == | ||
| + | |||
| + | *www.hotscripts.com | ||
| + | *www.zenelements.com | ||
| + | *www.html5rocks.com | ||
| + | *www.head2heart.us | ||
| + | *www.talks20.com | ||
| + | *www.foofighters.com | ||
Revision as of 23:01, 21 June 2011
Relatório
Grupo
- Diogo Nunes 61585
- Gonçalo Silva 59711
- Pedro Baptista 35694
- Tiago Almeida 59483
Apresentação e contextualização do tema do projecto
Quando nos foi apresentado o projecto, a ideia que nos veio imediatamente à cabeça, foi fazer um site de uma qualquer banda de música. De seguida procurámos gostos em comum entre os diversos membros do grupo e decidimos procurar de entre todas as sugestões, a banda que apresentasse um site menos apelativo. Daí até chegarmos aos Kings of Leon foi um pequeno passo, pois todos concordamos que a imagem do site quando comparado com o de bandas como Foo Fighters ou The Strokes, é efectivamente fraco e não se coaduna com a reputação da banda. Partindo desse ponto, e tendo em conta os conhecimentos adquiridos nos desafios teóricos de Lab 2, começamos a pensar como criar algo minimamente inovador e atractivo ao nível da interactividade. O objectivo principal desta aplicação é fazer a divulgação da banda em questão, promovendo assim o gosto pelas músicas e pelo estilo dos mesmos através de elementos de animação e de alguma interactividade com o utilizador. Assim tendo em conta a imagem da banda, os “típicos” fans da mesma e os amantes da música no geral procuramos criar algo que corresponda aos desejos e expectativas dos mesmos. Num contexto mais académico procuramos para além de cimentar os conhecimentos de Lab2 e Guionismo, fomentar a nossa procura por elementos extra-curriculares e assim abrir os horizontes dos nossos conhecimentos.
Fluxograma
Layouts
 Ecrã Principal |
 Ecrã Notícias |
 Ecrã Tour |
 Ecrã Biografia |
 Ecrã Discografia |
 Ecrã Discografia |
 Ecrã Media |
 Ecrã Fans |
Protótipo
OBS: Não é possível ver o vídeo de fundo no protótipo, visto que não foi feito o seu upload devido ao seu tamanho.
Estrutura XHTML implementada
<!DOCTYPE HTML>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><style type="text/css">@media print { .gmnoprint { display:none }}@media screen { .gmnoscreen { display:none } </style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>King of Leon Website</title>
<link rel="stylesheet" type="text/css" href="site2_ficheiros/style.css">
<link href="site2_ficheiros/vinil.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="site2_ficheiros/imagepuzzle.css">
<link href="site2_ficheiros/pageflip.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<!-- THUMBMAIL SCRIPT -->
<script type="text/javascript">
$(document).ready(function(){
$('.menuitem img').animate({width: 150}, 0);
$('.menuitem').mouseover(function(){
gridimage = $(this).find('img');
gridimage.stop().animate({width: 200}, 150);
}).mouseout(function(){
gridimage.stop().animate({width: 150}, 150);
});
});
</script>
<script language="JavaScript" src="site2_ficheiros/imagepuzzle.js"></script>
<script src="site2_ficheiros/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="site2_ficheiros/ga.js" async="" type="text/javascript"></script>
<script src="site2_ficheiros/jquery-1.js"></script>
<script src="site2_ficheiros/ninja.js" charset="UTF-8" type="text/javascript"></script>
<script src="site2_ficheiros/main.js" charset="UTF-8" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
type="text/javascript"></script>
<script type="text/javascript">
var envio_form=0;
function validacampoobrigatorio(valor, tipovalidacao) {
if (valor.value.length == 0) {
if (tipovalidacao == 1) valor.focus();
valor.style.backgroundColor="#D67B7B";
if (valor == form1.firstname) {
document.getElementById("imagem1").style.visibility="visible";
} else if (valor == form1.lastname) {
document.getElementById("imagem2").style.visibility="visible";
}else {
document.getElementById("imagem1").style.visibility="hidden";
document.getElementById("imagem2").style.visibility="hidden";
}
} else {
valor.style.backgroundColor="#C3EAB5";
if (tipovalidacao == 0) envio_form++;
}
}
function validanumero(valor, tipovalidacao) {
if (isNaN(valor.value) || valor.value.length == 0) {
if (tipovalidacao == 1) {
valor.focus();
valor.select();
}
valor.style.backgroundColor="#D67B7B";
document.getElementById("erros").innerHTML = "You have not entered your age";
} else {
valor.style.backgroundColor="#C3EAB5";
if (tipovalidacao == 0) envio_form++;
}
}
function validaemail(valor, tipovalidacao) {
if (valor.value.indexOf("@")==-1) {
if (tipovalidacao == 1) {
valor.focus();
valor.select();
}
valor.style.backgroundColor="#D67B7B";
document.getElementById("imagem3").style.visibility="visible";
} else {
valor.style.backgroundColor="#C3EAB5";
document.getElementById("imagem3").style.visibility="hidden";
if (tipovalidacao == 0) envio_form++;
}
}
function contacaract(numcaract, campovalor, idvalor) {
var y=campovalor.value;
document.getElementById(idvalor).innerHTML = "You got " + (numcaract-y.length) + " characters remaining";
}
function ismaxlength(obj){
var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""
if (obj.getAttribute && obj.value.length>mlength)
obj.value=obj.value.substring(0,mlength)
}
<!--
function validateForm(objForm) {
var returnStatus = 1;
if (objForm.genre.selectedIndex == 0) {
document.form1.genre.focus();
document.getElementById("imagem4").style.visibility="visible";
returnStatus = 0;
} else {
limpaajuda();
if (tipovalidacao == 0)
envio_form++;
}
}
// -->
function validacaoglobal() {
validacampoobrigatorio(form1.firstname, 0);
validacampoobrigatorio(form1.lastname, 0);
validanumero(form1.age, 0);
validaemail(form1.email, 0);
if (document.getElementById("none").checked){
alert("ola");
document.getElementById("imagem4").style.visibility="visible";
} else {
document.getElementById("imagem3").style.visibility="hidden";
if (tipovalidacao == 0) envio_form++;
}
if (envio_form == 6) {
envio_form = true;
} else {
envio_form = false;
}
return envio_form;
}
function limpaajuda() {
document.getElementById("imagem1").style.visibility="hidden";
document.getElementById("imagem2").style.visibility="hidden";
document.getElementById("imagem3").style.visibility="hidden";
document.getElementById("imagem4").style.visibility="hidden";
document.getElementById("imagem5").style.visibility="hidden";
}
</script>
<script>
function playy(){
var video = document.getElementById("my_video2");
video.play();
document.getElementById("play_toggle2").innerHTML='<img src="site2_ficheiros/images/pause.png" onClick="pausee();">'
}
function pausee(){
var video = document.getElementById("my_video2");
video.pause();
document.getElementById("play_toggle2").innerHTML='<img src="site2_ficheiros/images/play.png" onClick="playy();">'
}
</script>
</head>
<body onLoad="site2_ficheiros/ninja.js">
<!-- Header e Footer -->
<div id="header">
<div class="headerinside">
<div id="menuNav">
<a href="#news"><span id="newsMenu" onclick="mudarClasse('newsMenu')">NEWS</span></a>
<a href="#tour"><span id="tourMenu" onclick="mudarClasse('tourMenu')">TOUR</span></a>
<a href="#bio"><span id="bioMenu" onclick="mudarClasse('bioMenu')">BIOGRAPHY</span></a>
<a href="#disco"><span id="discoMenu" onclick="mudarClasse('discoMenu')">DISCOGRAPHY</span></a>
<a href="#media"><span id="mediaMenu" onclick="mudarClasse('mediaMenu')">MEDIA</span></a>
<a href="#fans"><span id="fansMenu" onclick="mudarClasse('fansMenu')">FANS</span></a>
</div>
<div id="video_controls">
<div id="play_toggle2">
<img src="site2_ficheiros/images/play.png" onClick="playy();">
</div>
</div>
</div>
</div>
<div id="footer">
<br><br>
<div class="content"><span> Copyright © 2011, MegaProduções. All Rights Reserved.</span></div>
<div class="aboutus"><a href="#about"><span>about us</span></a></div>
<div class="contact"><a href="#contact"> <span>contact</span></a></div>
</div>
<!--[if lte IE 8]>
<script>
var isIE = true;
location.href="lite";
</script>
<![endif]-->
<script>
if(navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i) ||
$(window).width() <= 960) {
location.href="lite";
}
</script>
<div style="width: 4320px; height: 2772px;" id="tiles">
<!--LINE1 -->
<!-- HOME SCREEN -->
<div style="width: 1440px; height: 693px;" id="home" class="tile" name="home">
<video class="my_video2" id="my_video2" width="90%" height="90%" preload="none" poster="site2_ficheiros/images/poster.png">
<source src="video/home.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="video/home.theora.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<p>Your browser does not support HTML5 video.</p>
</video>
<a class="right" href="#news">down</a>
</div>
<!-- NEWS SCREEN -->
<div style="width: 1440px; height: 693px; overflow:hidden;" id="news" class="tile" name="news">
<div id="book">
<canvas id="pageflip-canvas"></canvas>
<div id="pages">
<section>
<div>
<h2>May 28, 2011 05:16PM</h2>
<p><img src="site2_ficheiros\images\Untitled-1.jpg" style="z-index:999; position:relative; float:right; margin:5px;" width="100" height="100">"Back Down South" will be premiering on Vevo on May 31. The clip was shot in May an hour south of Nashville, TN, and perfectly captures the spirit of the song as an homage to the south. It was directed by Casey McGrath (Talihina Sky, Pyro) and features the band performing live outdoors in a rural setting in front of a group of lucky members of the KOL fan club as well as kids from the local community. The live footage is interspersed with vignettes depicting teenagers in the American south who all converge at an outdoor party the band is hosting. Like the song, the mood of the video is celebratory, reflective and nostalgic. </p>
</div>
</section>
<section>
<div>
<h2>May 25, 2011 05:51AM</h2>
<p><img src="site2_ficheiros\images\imge7f89af5754ad0a112c156c077c167b8.jpg" style="z-index:999; position:relative; float:right; margin:5px;" width="100" height="100">MTV announced the winners of The Road to Slane Castle contest where two of the biggest Kings of Leon fans will be documenting the epic concert at Ireland's Slane Castle. MTV.com will debut the concert on June 9th with select clips going into video rotation on MTV. "We're glad that American fans will get to experience the craziness of Irish crowds that we've enjoyed for almost ten years now," said Nathan Followill of Kings of Leon. Caila Noel Curtis, 22 of Denton, TX and Sam Magro, 19 of Pennsauken, NJ, will join the band in Ireland and profile them behind the scenes before they take the stage at Slane Castle on May 28. </p>
</div>
</section>
<section>
<div>
<h2>May 12, 2011 03:13AM</h2>
<p><img src="site2_ficheiros\images\VH1-logo.gif" style="z-index:999; position:relative; float:right; margin:5px;" width="100" height="100">VH1 Storytellers' is one of my favorite shows. I always used to watch all these people talk about their inspirations… this is an honor for me," said Kings of Leon lead singer Caleb Followill during the taping outside of Nashville, TN on April 5th. The band performed 12 songs in front of an intimate 150-member audience. While introducing "Radioactive: lead singer Followill told the audience, "You know there's always gonna be an element of our background in the songs and our background was the church - or is the church.</p>
</div>
</section>
<section>
<div>
<h2>May 2, 2011 23:49PM</h2>
<p><img src="site2_ficheiros\images\200kingofbrixton.jpg" style="z-index:999; position:relative; float:right; margin:5px;" width="100" height="100">Kings of Leon have confirmed summer 2011 tour dates with special guests Band of Horses (U.S. only). Coming off a triumphant headlining slot at this year's Coachella, about which the LA Times said the Kings "touched down into something wistful and real, as nostalgic as rock 'n' roll itself," the tour... </p>
</div>
</section>
</div>
</div>
<a class="right" href="#tour">left</a>
<a class="left" href="#home">down</a>
</div>
<!-- TOUR SCREEN -->
<div id="tour" class="tile" name="tour">
<script type="text/javascript">
var texto=new Array();
texto[0]="HYDE PARK";
texto[1]="HYDE PARK";
texto[2]="MURRAYFIELD STADIUM";
texto[3]="PEACE & LOVE";
texto[4]="ROCK WERCHTER";
texto[5]="ROSKILDE FESTIVAL";
</script>
<div id="tour_date">
<div class="tour_b" id="22june" onclick="initialize(53.446353, -2.075987, texto[0])">22nd JUNE - HYDE PARK (LONDON, UK) </div>
<div class="tour_b" id="23june" onclick="initialize(53.446353, -2.075987, texto[1])">23rd JUNE - HYDE PARK (LONDON, UK) </div>
<div class="tour_b" id="26june" onclick="initialize(55.940993, -3.241911, texto[2])">26th JUNE - MURRAYFIELD (EDINBURGH, UK) </div>
<div class="tour_b" id="29june" onclick="initialize(60.48518, 15.431285, texto[3])">29th JUNE - PEACE & LOVE (BORLANGE, SWEDEN) </div>
<div class="tour_b" id="1july" onclick="initialize(50.968265, 4.684167, texto[4])">1st JULY - ROCK WERCHTER (WERCHTER, BELGIUM) </div>
<div class="tour_b" id="3july" onclick="initialize(55.686488, 12.55291, texto[5])">3rd JUNE - ROSKILDE FESTIVAL (ROSKILDE, DENMARK) </div>
<div style="width: 500px; height: 300px" id="mapa" class="mapa"></div>
<img src="site2_ficheiros/images/tour.png" style="z-index:-100">
</div>
<a class="left" href="#news">left</a>
<a class="right" href="#bio">ri</a>
</div>
<!-- BIOGRAPHY SCREEN -->
<div style="width: 1440px; height: 693px;" id="bio" class="tile" name="bio">
<a class="left" href="#tour">left</a>
<a class="right" href="#disco">right</a>
<a class="down" href="#bioi">down</a>
</div>
<!-- DISCOGRAPHY SCREEN -->
<div style="width: 1440px; height: 693px;" id="disco" class="tile" name="disco">
<div id="menuwrapper">
<div id="menu">
<a href="#disco1" class="menuitem"><img src="site2_ficheiros/images/cd1.jpg"></a>
<a href="#disco2" class="menuitem"><img src="site2_ficheiros/images/cd2.jpg"></a>
<a href="#disco3" class="menuitem"><img src="site2_ficheiros/images/cd3.jpg"></a>
<a href="#disco4" class="menuitem"><img src="site2_ficheiros/images/cd4.jpg"></a>
<a href="#disco5" class="menuitem"><img src="site2_ficheiros/images/cd5.jpg"></a>
<a class="left" href="#bio">left</a>
<a class="right" href="#media">right</a>
<a class="down" href="#disco1">down</a>
</div>
</div>
</div>
<!-- MEDIA SCREEN -->
<div style="width: 1440px; height: 693px;" id="media" class="tile" name="media">
<div class="photoI">
<a href="#photos"><img src="site2_ficheiros/images/camera.png"></a>
</div>
<div class="videoI">
<a href="#video"><img src="site2_ficheiros/images/Video.png"></a>
</div>
<div class="joystickI">
<a href="#game"><img src="site2_ficheiros/images/joystick.png"></a>
</div>
<a class="left" href="#disco">left</a>
<a class="right" href="#fans">ri</a>
<a class="down" href="#photos">ri</a>
</div>
<!-- FANS SCREEN -->
<div style="width: 1440px; height: 693px;" id="fans" class="tile" name="fans">
<div class="facebook">
<a href="http://www.facebook.com/KingsOfLeon?sk=app_178091127385" target="_new"><img src="site2_ficheiros/images/facebook.png"></a>
</div>
<div class="twitter">
<a href="http://twitter.com/#!/kingsofleonband" target="_new"><img src="site2_ficheiros/images/twitter.png"></a>
</div>
<div class="myspace">
<a href="http://www.myspace.com/kingsofleon" target="_new"><img src="site2_ficheiros/images/myspace.png"></a>
</div>
<a class="left" href="#media">left</a>
</div>
<div class="clearfix"></div>
<!--LINE2 -->
<!-- CONTACT -->
<div style="width: 1440px; height: 693px; overflow:hidden;" id="contact" class="tile" name="contact" >
<div id="container" >
<div id="contact-form" class="clearfix">
<h1 id="errors2">Contact Us</h1><br>
<div id="imagem1"> <span>You have not entered your first name</span> </div>
<div id="imagem2"> <span>You have not entered your last name</span> </div>
<div id="imagem3"> <span>You have not entered a valid email address</span> </div>
<div id="imagem4"> <span>You have not entered your genre</span> </div>
<div id="imagem5"> <span>Your message must be greater than 20 characters</span> </div>
<form id="form1" name="form1" method="post" action="http://blogs.ua.pt/heldercaixinha/form_result.php" onSubmit="return validacaoglobal();" >
<label for="name">First Name: </label>
<input name="firstname" type="text" id="firstname" size="30" maxlength="30" onFocus="limpaajuda(); ajuda(1);" onBlur="validacampoobrigatorio(this, 1);" onKeyUp="contacaract(30, this, 'info1');" onKeyDown="contacaract(30, this, 'info1');" value="" placeholder="Your first name" required />
<label for="name">Last Name: </label>
<input name="lastname" type="text" id="lastname" size="30" maxlength="30" onFocus="limpaajuda(); ajuda(1);" onBlur="validacampoobrigatorio(this, 1);" onKeyUp="contacaract(30, this, 'info1');" onKeyDown="contacaract(30, this, 'info1');" value="" placeholder="Your last name" required />
<label for="email">Email Address: </label>
<input name="email" type="text" id="email" size="40" maxlength="40" onFocus="limpaajuda(); ajuda(4);" onBlur="validaemail(this, 1);" value="" placeholder="your_email@example.com" required />
<label for="genre">Genre: </label>
<select name="genre" id="genre "onfocus="limpaajuda(); ajuda(4);" onBlur="validateForm(document.form1)">
<option value="0" selected>Select One</option>
<option value="1">Male</option>
<option value="2">Female</option>
</SELECT>
<label for="message">Message: </label>
<textarea id="message" name="message" onFocus="limpaajuda(); ajuda(4);" onBlur="message(this, 1);" placeholder="Your message here" onKeyUp="contacaract(200, this, 'restantes'); return ismaxlength(this)" onKeyDown="contacaract(200, this, 'restantes'); return ismaxlength(this)" maxlength="200">
</textarea>
<div id="restantes"> </div>
<span id="loading"></span>
<input name="enviar" type="submit" id="enviar" value=" enviar dados " onFocus="limpaajuda();" />
</form>
</div>
</div>
<a class="up" href="#home">up</a>
</div>
<!-- ABOUT SCREEN -->
<div style="width: 1440px; height: 693px;" id="about" class="tile" name="about">
<img style="margin-top:230px; margin-left:730px; overflow:hidden;" src="site2_ficheiros/images/fundoAbout.png">
</div>
<!-- EMPTY SCREEN -->
<div style="width: 1440px; height: 693px;" id="empty" class="tile" name="empty">
</div>
<!-- INDIVIDUAL BIO SCREEN -->
<div style="width: 1440px; height: 693px; overflow:hidden" id="bioi" class="tile" name="bioi">
<iframe class="tile" id="bioi" name="bioi" src="ext/ExpandingMenu/index.html">
</iframe>
<a class="up" href="#bio">up</a>
</div>
<!-- DISCO1 SCREEN -->
<div style="width: 1440px; height: 693px;" id="disco1" class="tile" name="disco1">
<div style="float:left">
<ul class="tunes">
<li>
<div class="album"> <img src="site2_ficheiros/images/cd1.jpg" /> <span class="vinyl">
<div></div>
</span>
<div>
<h5>Youth and Young Manhood</h5>
</div>
<span class="gloss"></span> </div>
</li>
</ul>
<div class="track"> <img src="site2_ficheiros/images/track_young.png"/>
</div>
</div>
<a class="up" href="#disco">up</a>
<a class="down" href="#disco2">down</a>
</div>
<!-- PHOTOS SCREEN -->
<div style="width: 1440px; height: 693px; overflow:hidden;" id="photos" class="tile" name="photos">
<iframe src="ext/DragDrop/dragdrop.html">
</iframe>
<a class="up" href="#media">up</a>
<a class="down" href="#video">down</a>
</div>
<div class="clearfix"></div>
<!--LINE3 -->
<!-- EMPTY SCREEN -->
<div style="width: 1440px; height: 693px;" id="empty" class="tile" name="empty">
</div>
<!-- EMPTY SCREEN -->
<div style="width: 1440px; height: 693px;" id="empty" class="tile" name="empty">
</div>
<!-- EMPTY SCREEN -->
<div style="width: 1440px; height: 693px;" id="empty" class="tile" name="empty">
</div>
<!-- EMPTY SCREEN -->
<div style="width: 1440px; height: 693px;" id="empty" class="tile" name="empty">
</div>
<!-- CD2 SCREEN -->
<div style="width: 1440px; height: 693px;" id="disco2" class="tile" name="disco2">
<ul class="tunes">
<li>
<div class="album"> <img src="site2_ficheiros/images/cd2.jpg" /> <span class="vinyl">
<div></div>
</span>
<div>
<h5>Aha Shake Hearbreak</h5>
</div>
<span class="gloss"></span> </div>
</li>
</ul>
<div class="track"> <img src="site2_ficheiros/images/track_hearthbreak.png"/>
</div>
<a class="up" href="#disco1">up</a>
<a class="down" href="#disco3">down</a>
</div>
<!-- VIDEO SCREEN -->
<div style="width: 1440px; height: 693px;" id="video" class="tile" name="video">
<div id="videoplayer" style="overflow:hidden;">
<table width="1400" height="620" style="overflow:hidden" >
<tr>
<td>
<video width="80%" height="80%" preload="none" poster="video/Kings Of Leon - Back Down South (Behind the Scenes).png" controls > <source src="video/Kings Of Leon - Back Down South (Behind the Scenes).iphone.mp4" type='video/mp4; />
<source src="video/Kings Of Leon - Back Down South (Behind the Scenes).webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="video/Kings Of Leon - Back Down South (Behind the Scenes).theora.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<p>Your browser does not support HTML5 video.</p>
</video></td>
<td>
<video width="80%" height="80%" preload="none" poster="video/Kings of Leon - Fans (Live @ Reading).png" controls>
<source src="video/Kings of Leon - Fans (Live @ Reading).iphone.mp4" type='video/mp4; />
<source src="video/Kings of Leon - Fans (Live @ Reading).webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="video/Kings of Leon - Fans (Live @ Reading).theora.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<p>Your browser does not support HTML5 video.</p>
</video>
</td>
<td><video width="80%" height="80%" preload="none" poster="video/Kings Of Leon - On Call.png" controls>
<source src="video/Kings Of Leon - On Call.iphone.mp4" type='video/mp4; />
<source src="video/Kings Of Leon - On Call.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="video/Kings Of Leon - On Call.theora.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<p>Your browser does not support HTML5 video.</p>
</video>
</td>
</tr>
<tr>
<td>
<video width="80%" height="80%" preload="none" poster="video/Kings Of Leon - Sex On Fire.png" controls >
<source src="video/Kings Of Leon - Sex On Fire.iphone.mp4" type='video/mp4; />
<source src="video/Kings Of Leon - Sex On Fire.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="video/Kings Of Leon - Sex On Fire.theora.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<p>Your browser does not support HTML5 video.</p>
</video></td>
<td>
<video width="80%" height="80%" preload="none" poster="video/Kings Of Leon - The Making of _Pyro_.png" controls>
<source src="video/Kings Of Leon - The Making of _Pyro_.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="video/Kings Of Leon - The Making of _Pyro_.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<p>Your browser does not support HTML5 video.</p>
</video>
</td>
<td><video width="80%" height="80%" preload="none" poster="video/Making Of Kings Of Leon - Use Somebody Video.png" controls>
<source src="video/Making Of Kings Of Leon - Use Somebody Video.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="video/Making Of Kings Of Leon - Use Somebody Video.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<p>Your browser does not support HTML5 video.</p>
</video>
</table>
</div>
<a class="down" href="#game">down</a>
<a class="up" href="#photos">up</a>
</div>
<div class="clearfix"></div>
<!-- LINE 4 -->
<!-- EMPTY SCREEN -->
<div style="width: 1440px; height: 693px;" id="empty" class="tile" name="empty">
</div>
<!-- EMPTY SCREEN -->
<div style="width: 1440px; height: 693px;" id="empty" class="tile" name="empty">
</div>
<!-- EMPTY SCREEN -->
<div style="width: 1440px; height: 693px;" id="empty" class="tile" name="empty">
</div>
<!-- EMPTY SCREEN -->
<div style="width: 1440px; height: 693px;" id="empty" class="tile" name="empty">
</div>
<!-- CD3 SCREEN -->
<div style="width: 1440px; height: 693px;" id="disco3" class="tile" name="disco3">
<ul class="tunes">
<li>
<div class="album"> <img src="site2_ficheiros/images/cd3.jpg" /> <span class="vinyl">
<div></div>
</span>
<div>
<h5>Because of the Times</h5>
</div>
<span class="gloss"></span> </div>
</li>
</ul>
<div class="track"> <img src="site2_ficheiros/images/track_because.png"/>
</div>
<a class="up" href="#disco2">up</a>
<a class="down" href="#disco4">down</a>
</div>
<!-- GAME SCREEN -->
<div style="width: 1440px; height: 693px;" id="game" class="tile" name="game">
<div id="quiz">
<a href="ext/Quiz/quiz.html"><img src="site2_ficheiros/images/quiz.png" /></a>
</div>
<div id="quiz">
<a href="ext/puzzle/puzzle.html"><img src="site2_ficheiros/images/puzzle.png" /></a>
</div> <a class="up" href="#video">down</a>
</div>
<div class="clearfix"></div>
<!-- LINE 5 -->
<!-- EMPTY SCREEN -->
<div style="width: 1440px; height: 693px;" id="empty" class="tile" name="empty">
</div>
<!-- EMPTY SCREEN -->
<div style="width: 1440px; height: 693px;" id="empty" class="tile" name="empty">
</div>
<!-- EMPTY SCREEN -->
<div style="width: 1440px; height: 693px;" id="empty" class="tile" name="empty">
</div>
<!-- EMPTY SCREEN -->
<div style="width: 1440px; height: 693px;" id="empty" class="tile" name="empty">
</div>
<!-- CD4 SCREEN -->
<div style="width: 1440px; height: 693px;" id="disco4" class="tile" name="disco4">
<ul class="tunes">
<li>
<div class="album"> <img src="site2_ficheiros/images/cd4.jpg" /> <span class="vinyl">
<div></div>
</span>
<div>
<h5>Only by the Night</h5>
</div>
<span class="gloss"></span> </div>
</li>
</ul>
<div class="track"> <img src="site2_ficheiros/images/track_night.png"/>
</div>
<a class="up" href="#disco3">up</a>
<a class="down" href="#disco5">down</a>
</div>
<div class="clearfix"></div>
<!-- LINE 6 -->
<!-- EMPTY SCREEN -->
<div style="width: 1440px; height: 693px;" id="empty" class="tile" name="empty">
</div>
<!-- NEWS5 SCREEN -->
<div style="width: 1440px; height: 693px;" id="news5" class="tile" name="news5">
NEWS5
<a class="up" href="#news4">up</a>
<a class="down" href="#news6">down</a>
</div>
<!-- EMPTY SCREEN -->
<div style="width: 1440px; height: 693px;" id="empty" class="tile" name="empty">
</div>
<!-- EMPTY SCREEN -->
<div style="width: 1440px; height: 693px;" id="empty" class="tile" name="empty">
</div>
<!-- CD5 SCREEN -->
<div style="width: 1440px; height: 693px;" id="disco5" class="tile" name="disco5">
<ul class="tunes">
<li>
<div class="album"> <img src="site2_ficheiros/images/cd5.jpg" /> <span class="vinyl">
<div></div>
</span>
<div>
<h5>Come Around Sundown</h5>
</div>
<span class="gloss"></span> </div>
</li>
</ul>
<div class="track"> <img src="site2_ficheiros/images/track_come.png"/>
</div>
<a class="up" href="#disco4">up</a>
<a class="down" href="#disco6">down</a>
</div>
<div class="clearfix"></div>
</div>
<!-------------------------GOOGLE MAP---------------------->
<script type="text/javascript">
initialize(53.446353, -2.075987,texto[0]);
function initialize(valor1, valor2, nome) {
var map = new GMap2(document.getElementById("mapa"));
map.setCenter(new GLatLng(valor1, valor2), 15);
map.openInfoWindow(map.getCenter(),document.createTextNode(nome));
var point = new GLatLng(valor1, valor2);
map.addOverlay(new GMarker(point));
map.enableScrollWheelZoom(point);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
}
</script>
<script src="site2_ficheiros/jquery_002.js"></script>
<script src="site2_ficheiros/jquery.js"></script>
<script type="text/javascript" src="site2_ficheiros/js"></script>
<script type="text/javascript" src="site2_ficheiros/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="site2_ficheiros/pageflip.js"></script>
</body></html>
Folhas de estilos (CSS)
- CSS Geral:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display:block;
}
body {
line-height:1;
}
ol, ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after {
content:'';
content:none;
}
ins {
text-decoration:none;
}
del {
text-decoration:line-through;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/*------------------------------------*\
MAIN
\*------------------------------------*/
body {
overflow: hidden;
background-color:#120906;
color: #FFF;
font-family: "Junction", sans-serif;
font-size: 62.5%;
}
.clearfix {
clear: both;
}
img {
display: block;
}
a {
color: #ec008c;
-moz-transition: color 0.1s linear;
-webkit-transition: color 0.1s linear;
-o-transition: color 0.1s linear;
transition: color 0.1s linear;
}
a:hover {
color: #EF48AB;
}
a:active {
color: #8c008c;
-moz-transition: color 0s linear;
-webkit-transition: color 0s linear;
-o-transition: color 0s linear;
transition: color 0s linear;
}
b {
font-weight: bold;
}
@font-face {
font-family: 'Junction';
src: url('./fonts/Junction/Junction.otf') format('opentype'), url('./fonts/Junction/Junction.ttf') format('truetype');
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: 'LeagueGothic';
src: url('./fonts/LeagueGothic/LeagueGothic.otf') format('opentype');
font-style: normal;
font-weight: normal;
}
/* *\
* TILES *
\* */
#tiles {
/*
background: url('../images/maze/middle.png') no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
*/
}
#tiles > .tile {
display: block;
float: left;
width: 0; /* so that when we start the page, before any js runs, the page is clear */
height: 100%;
position: relative;
overflow: auto;
overflow-x: hidden;
-ms-overflow-x: hidden;
}
#tiles > .tile .up, #tiles > .tile .down, #tiles > .tile .left, #tiles > .tile .right {
display: none;
}
#tiles > .tile > .inner {
width: 900px;
min-width: 900px;
min-height: 600px;
margin: 0 auto;
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding: 30px 30px 0 30px;
text-align: left;
}
#tiles > .tile > .top {
padding-top: 50px;
min-height: 580px;
}
/*---------------Menu--------------------*/
#menuNav {
margin-left:380px;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
padding-top:32px;
}
#menuNav a{
text-decoration:none;
}
#menuNav span {
background-color:#120906;
color:#FFF;
margin-left:20px;
}
#menuNav span:hover {
background-color:#514623;
color:#000;
}
/*---------------HOME SCREEN---------------------*/
#home {
padding-top:110px;
background-color:#120906;
}
/*-----------------------------*\
* TOUR SCREEN *
\*-----------------------------*/
#tour {
width:800px;
height:1000px;
}
#tour_date img {
width:120%;
height:100%;
position:absolute;
top:0px;
left:-100px;
overflow:hidden;
}
#tour_date {
margin-top:200px;
margin-left:150px;
}
#mapa {
position:absolute;
right:200px;
top:200px;
border:solid #666 10px;
border-radius:15px;
color:#000;
}
.tour_b {
background: #222;
width:300px;
font-weight:bold;
margin-bottom:1px;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px #ccc;
-webkit-box-shadow: 0 1px 3px #ccc;
text-shadow: 0 -1px 1px #222;
border-bottom: 1px solid #222;
position: relative;
cursor: pointer;
}
/*-------------------BIOGRAPHY SCREEN-----------------------------*/
#bio {
background-image:url(images/bio.png);
background-repeat:no-repeat;
position:absolute;
right:20px;
}
/*---------------DISCOGRAPHY SCREEN-----------------*/
#disco {
background-image:url(images/disco.png);
background-repeat:no-repeat;
}
/* The container which the menu is "locked" to the bottom of */
#menuwrapper {
position:relative;
height:210px;
margin-top:260px;
}
/* Fixes the whole menu to the bottom of the parent div */
#menu {
padding-left:270px;
position:absolute;
bottom:0;
left:0;
}
/* Each individual menu item fixed to the bottom with display:inline-block to create elasticity */
.menuitem {
position:fixed relative;
bottom:0px;
display:inline-block;
}
#disco1 {
background-image:url(images/disco.png);
background-repeat:no-repeat;
padding-top:150px;
}
#disco2 {
background-image:url(images/disco.png);
background-repeat:no-repeat;
padding-top:150px;
}
#disco3 {
background-image:url(images/disco.png);
background-repeat:no-repeat;
padding-top:150px;
}
#disco4 {
background-image:url(images/disco.png);
background-repeat:no-repeat;
padding-top:150px;
}
#disco5 {
background-image:url(images/disco.png);
background-repeat:no-repeat;
padding-top:150px;
}
.track {
padding-left:750px;
}
/*---------------MEDIA SCREEN-----------------*/
#media {
background-image:url(images/media.png);
background-repeat:no-repeat;
}
.photoI img {
background-color:#CCC;
-moz-box-shadow: 0px 0px 4px 4px #CCC;
-webkit-box-shadow: 0px 0px 4px 4px #ccc;
box-shadow: 0px 0px 4px 4px #ccc;
margin-top:250px;
margin-left:200px;
z-index:400;
border-radius:20px;
float:left;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
cursor:pointer;
}
.photoI img:hover {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transform: rotate(-15deg) scale(1.0);
-moz-transform: rotate(-15deg) scale(1.0);
-o-transform: rotate(-15deg) scale(1.0);
}
.videoI img {
padding-top:10px;
padding-left:5px;
padding-right:5px;
padding-bottom:10px;
background-color:#CCC;
-moz-box-shadow: 0px 0px 4px 4px #CCC;
-webkit-box-shadow: 0px 0px 4px 4px #ccc;
box-shadow: 0px 0px 4px 4px #ccc;
margin-top:250px;
margin-left:270px;
z-index:400;
border-radius:20px;
float:left;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
cursor:pointer;
}
.videoI img:hover {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transform: rotate(-15deg) scale(1.0);
-moz-transform: rotate(-15deg) scale(1.0);
-o-transform: rotate(-15deg) scale(1.0);
}
.joystickI img {
background-color:#CCC;
-moz-box-shadow: 0px 0px 4px 4px #CCC;
-webkit-box-shadow: 0px 0px 4px 4px #ccc;
box-shadow: 0px 0px 4px 4px #ccc;
margin-top:250px;
margin-left:270px;
z-index:400;
border-radius:20px;
float:left;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
cursor:pointer;
}
.joystickI img:hover {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transform: rotate(-15deg) scale(1.0);
-moz-transform: rotate(-15deg) scale(1.0);
-o-transform: rotate(-15deg) scale(1.0);
}
/* --------------------PHOTOS SCREEN------------------------------*/
#photos {
background-image:url(images/fundo_fotos.jpg);
background-repeat:no-repeat;
}
/*--------------------GAME SCREEN-------------------------------------*/
#game{
background-image:url(images/gameF.jpg);
width:120%;
background-repeat:no-repeat;
}
/* ----------------FANS SCREEN ----------------- */
#fans {
background-image:url(images/fansF.png);
background-repeat:no-repeat;
}
.facebook img {
margin-top:250px;
margin-left:200px;
z-index:400;
float:left;
cursor:pointer;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-o-transform: scale(0.7);
}
.twitter img {
margin-top:250px;
margin-left:100px;
z-index:400;
float:left;
cursor:pointer;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-o-transform: scale(0.7);
}
.myspace img {
margin-top:250px;
margin-left:100px;
z-index:400;
float:left;
cursor:pointer;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-o-transform: scale(0.7);
}
/* -----------------HEADER--------------- */
#header {
width:100%;
height:120px;
position:fixed;
z-index:520;
background-color:#120906;
}
#header .headerinside {
width:1000px;
height:120px;
margin:0 auto;
background-color:#120906;
background-image:url(images/header.png);
background-repeat:no-repeat;
}
.btn{
background-color:#675b38;
height:30px;
width:30px;
}
#home_btn {
top:50px;
left:300px;
}
/* -----------------FOOTER--------------- */
#footer {
width:100%;
height:40px;
padding:13px 0px 0px 0px;
position:fixed;
bottom:0px;
left:0px;
margin-bottom:0px;
z-index:520;
background-image:url(images/footer.png);
background-position:bottom;
background-repeat:repeat-x;
display:block;
font-size:1em;
}
#footer .content span {
width:300px;
height:30px;
}
#footer .content spacer {
display:block;
left:100px;
}
#footer .aboutus span {
width:50px;
height:30px;
position:fixed;
bottom:0px;
right:200px;
}
#footer .contact span {
width:30px;
height:30px;
position:fixed;
bottom:0px;
right:270px;
}
#footer .contact a{
text-decoration:none;
color:#FFF;
}
#footer .aboutus a{
text-decoration:none;
color:#FFF;
}
/* -----------------CONTENT--------------- */
#home {
top:0px;
left:0px;
}
#home video {
vertical-align:middle;
margin:0px 65px;
top:0px;
left:0px;
overflow:hidden;
}
#quiz{
margin-top:110px;
margin-left:125px;
overflow:hidden;
float:left;}
/* -----------------VIDEO SCREEN--------------- */
#videoplayer{
float:left;
margin-top:150px;
padding-left:0px;
background-image:url(images/background_video.jpg);
}
#video_controls {
top:80px;
left:1150px;
position:absolute;
width: 30px;
height: 30px;
background-color: #333;
color: #fff;
font-family: Verdana, sans-serif;
font-size: 12px;
text-transform: uppercase;
cursor:pointer;
}
#play_toggle2 img {
float: left;
width:100%;
height:100%;
line-height: 20px;
}
.player-button {
width: 50px;
text-align: center;
cursor: pointer;
}
/*--------------IFRAME----------------------*/
#bioi iframe {
padding-top:100px;
width:100%;
height:600px;
overflow:hidden;
}
#photos iframe {
margin-top:150px;
width:1440px;
height:600px;
overflow:hidden;
}
/*----------------------CONTACT SCREEN-----------------------------*/
#contact {
font-size:0.8em;
overflow:hidden;
}
label {
color:#000;
font-size:0.8em;
}
#restantes {
color:#000;
font-size:1.2em;
text-align:center;
}
input, textarea, select {
border: 1px solid #555;
padding: 0.5em;
font-size: 0.8em;
line-height: 1em;
width: 60%;
background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
-webkit-appearance: none;
-webkit-box-shadow: 1px 1px 1px #fff;
-webkit-border-radius: 0.5em;
}
input:focus, textarea:focus, select:focus {
outline: none;
border: 2px solid #058cf5;
margin: -1px;
}
textarea {
height: 37px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #aaa), color-stop(0.05, #fff));
}
select {
padding: 0.5em 1em 0.5em 0.75em;
background: #fff url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%0C%80%00%00%00%40%08%02%00%00%00W%AEz%EF%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%04%E5IDATx%DA%EC%DD%3DN%E3Z%18%06%E0%B1oD%82%A8%E8(%A8%D2Q%D2%D0%40%83%C4%12%D8%01%3Db%09P%81%A0%40%A2%60%05%D9%05%BB%A0%04%09!B%3A%9A%10%07%F2g%E7%22%90f(%98%E09%23Y7%E7%3EOi%1F%1FK_%FD%EA%FD%92%E9t%FA%03%00%00%00%00%00%00%00%00%80%3F%97%1A%01%00%00%00%00%00%00%00%00%40%98%9A%06%2C%00%00%00%00%00%00%00%00%20%0E%D5%A7%A14%60%01%00%00%00%00%00%00%00%00%04%D2%80%05%00%00%00%00%00%00%00%00DB%03%16%00%00%00%00%00%00%00%00%C0%DC%D0%80%05%00%00%00%00%00%00%00%00D%A2(%8A%8A%FF(%80%05%00%00%00%00%00%00%00%00D%C2%0AB%00%00%00%00%00%00%00%00%80%B9%A1%01%0B%00%00%00%00%00%00%00%00%88%84%15%84%00%00%00%00%00%00%00%00%00%81%AC%20%04%00%00%00%00%00%00%00%00%98%1B%1A%B0%00%00%00%00%00%00%00%00%80HXA%08%00%00%00%00%00%00%00%00%10%A8%FA4%94%00%16%00%00%00%00%00%00%00%00%10%09%0DX%00%00%00%00%00%00%00%00%00%81%AAOC%A5%86%0E%00%00%00%00%00%00%00%00%10F%03%16%00%00%00%00%00%00%00%00%10%09%2B%08%01%00%00%00%00%00%00%00%00%02U%9F%86%12%C0%02%00%00%00%00%00%00%00%00%22!%80%05%00%00%00%00%00%00%00%00%10%C8%0AB%00%00%00%00%00%00%00%00%80%40%1A%B0%00%00%00%00%00%00%00%00%00%02i%C0%02%00%00%00%00%00%00%00%00%08%A4%01%0B%00%00%00%00%00%00%00%00%20%90%06%2C%00%00%00%00%00%00%00%00%80%40%02X%00%00%00%00%00%00%00%00%00%81%AC%20%04%00%00%00%00%00%00%00%00%08%24%80%05%00%00%00%00%00%00%00%00%10%C8%0AB%00%00%00%00%00%00%00%00%80%40%1A%B0%00%00%00%00%00%00%00%00%00%02i%C0%02%00%00%00%00%00%00%00%00%084%3B%0Du%7B%7B%7Bzz%3A%18%0C%CA_%D8h4%F6%F6%F6677%F3%3C%FF%F2%40%D2%E9t%CC%1D%00%00%00%00%00%00%00%00%88%40%96e3%DE%26I2%18%0C%8E%8F%8F%EF%EE%EE%CA%DC%B6%BC%BC%7Cxx%D8l6_%5E%5EF%A3%D1%97%E9%AE%D4%D0%01%00%00%00%00%00%00%00%80%FF%83%E9t%BA%B8%B8xvv%B6%B3%B3%F3%ED%E1%F5%F5%F5V%AB%B5%B6%B66%99L~W%7F%F5%26y%7C%7C4Y%00%00%00%00%00%00%00%00%20%02%BD%5E%EF%DB3i%9A%D6%EB%F5%AB%AB%ABV%AB%F5%BBu%84%BB%BB%BB%FB%FB%FB%FD~%3F%CB%B2%B73%B3%02X%EDv%DB%DC%01%00%00%00%00%00%00%00%80%08%94%09%60%FDx%DFE%B8%B0%B0%D0n%B7%2F..%3A%9D%CE%E7W%8DF%E3%E8%E8hcc%23%7B7%1C%0E%BF%DC%3C%F8%EB%AA%87%87%07s%07%00%00%00%00%00%00%00%00%22%F0%FC%FC%5C%F2d%9A%A6%B5Zm2%99%9C%9F%9F___%7F%3C%5C%5D%5D%3D99YYY%E9%F5z%FD~%7F%3C%1E%17E1%FB%9E%7F%0E%0E%0E%CC%1D%00%00%00%00%00%00%00%00%88%C0p8%2Cyr%3A%9D%E6y%9E%A6%E9%F6%F6%F6h4%BA%B9%B9%D9%DA%DA%BA%BC%BC%AC%D5j%DDn7%CB%B2%B7%87%B3%BB%AF%3E%24%F7%F7%F7%E6%0E%00%00%00%00%00%00%00%00D%A0%7C%03%D6Oi%9A%D6%EB%F5n%B7%DBl6%C7%E3q%96e%AF%AF%AF%DF%16_%FDT%2B%93%D2%02%00%00%00%00%00%00%00%00%F8%EF%2B%1F%9C%FA%FC%C9%9B%A5%A5%A5%A7%A7%A7%3C%CF%CB%AC%1D%FCL%00%0B%00%00%00%00%00%00%00%00%88DX%1A*%7F%97%24I%C0%E7%02X%00%00%00%00%00%00%00%00%40%24%FE%26%0D%15%F6%AD%00%16%00%00%00%00%00%00%00%00%10%89%80%15%84%7FI%00%0B%00%00%00%00%00%00%00%00%88D%F5i(%01%2C%00%00%00%00%00%00%00%00%20%12%1A%B0%00%00%00%00%00%00%00%00%00%02i%C0%02%00%00%00%00%00%00%00%00%08%24%80%05%00%00%00%00%00%00%00%00%10%C8%0AB%00%00%00%00%00%00%00%00%80%40%D5%A7%A1RC%07%00%00%00%00%00%00%00%00%08%A3%01%0B%00%00%00%00%00%00%00%00%88%84%15%84%00%00%00%00%00%00%00%00%00%81%AAOC%09%60%01%00%00%00%00%00%00%00%00%91%10%C0%02%00%00%00%00%00%00%00%00%08T%FD%0A%C2%D4%D0%01%00%00%00%00%00%00%00%00%C2h%C0%02%00%00%00%00%00%00%00%00%22a%05!%00%00%00%00%00%00%00%00%40%A0%EA%D3PV%10%02%00%00%00%00%00%00%00%00%04%D2%80%05%00%00%00%00%00%00%00%00D%A2(%8A%8A%FF(%80%05%00%00%00%00%00%00%00%00D%C2%0AB%00%00%00%00%00%00%00%00%80%B9%A1%01%0B%00%00%00%00%00%00%00%00%88%84%06%2C%00%00%00%00%00%00%00%00%80%B9%A1%01%0B%00%00%00%00%00%00%00%00%88DQ%14%15%FF%F1_%01%06%00md%E2%BF%C9%C3%19%DA%00%00%00%00IEND%AEB%60%82") no-repeat right center;
-webkit-background-size: 1600px 32px;
}
input[type=text] {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #aaa), color-stop(0.12, #fff));
}
input[type=submit] {
width: auto;
border-radius: 2em;
padding: 0.25em 1em;
line-height: 1.5em;
}
input[type=checkbox], input[type=radio] {
display: inline-block;
font-size: 0.8em;
line-height: 1em;
margin: 0 0.25em 0 0;
padding: 0;
width: 1em;
height: 1em;
-webkit-border-radius: 0.25em;
vertical-align: text-top;
}
input[type=radio] {
-webkit-border-radius: 2em;
width:28px;
height:28px;
}
input[type=checkbox]:checked {
background: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%008%00%00%008%08%02%00%00%00'%E4%ACI%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%04DIDATx%DA%EC%98%B9J%2CA%14%86%EF%F4%AC%8E%5B%24%F8%00%93%BA%83%89%89%A1%22n%A1%81%89%B8%22%82%2B%06%A2%E2%82%B8%20%1A%A9(%B8%BC%87%8F%E0%12%09%3E%82K%AA%20%EAu%EEo%FFw%0EEuO%2F3%A3%5C%2F%FD%07E%F5Lu%F7%D7%FF9u%BA%BA%22%A9T%EA%D7O%90%F1%EB%87(%00%0D%40%03%D0%004%00%0D%40%03%D0%FF%1B4%F2%3D%B7I%A7%D3%B6%BF%87B%A1%7F%05T%105V%22%F2G%2F%B8%91oC%D4%40qH%3E%B4%D2w%CA%D1%D0%D7H%F3%89%94%86aloo%0F%0C%0C%D8%BA%EB%7C%C1H8%1C%FE%22%2F%D3%19%FD%B5%C40677%BB%BB%BB%D1%8F%C5b%7B%7B%7B%B6%8F%975%F4%BE%40%ADs%C2zu%8D%F2%E3%E3%03-%EE%B2%B1%B1AJhjj%0A'%EE%EF%EF%A3%C5%03xa%8D%409%F09g%95%20B%18%06%CA%F5%F5u%A1%A4%26''qk%F8%8A%7FU%DC%AC%A0%D1h%D4c%1C%1D%1C%95%1Bp%00%11y%08%8E%B5%B5%B5%AE%AE.%EB%95%9B%9A%9A%8E%8F%8F1Re%CD%11T%8B%23%95L%26%CB%CA%CA%EE%EE%EE%D4y%23%E5F%CCF%07%9E%AD%AC%ACtvvZ%AF%7Cyy944%04J%8C%01%A8%9A%00%F6%A0%C8kWJ%E6%19%DBD%22%B1%BB%BB%5BYY988x%7F%7FouB%BCD%BB%B4%B4%D4%D1%D1a%BD%F2%C5%C5%C5%F0%F0%F0%EB%EB%2Bl%22(Mu%02upT%9D%10%BC%7D%3C%1E%DF%D9%D9%A9%A9%A9A%FF%F0%F0%10%96%3C%3C%3C%A8%09%A0V%C7%E5%E5%E5%F6%F6v%5BJ%3C%E4%DB%DB%1B))W%D0P%5B%5B%9B%83%9DD%FCm%0A%DEommUWW%CB%18D%1F%C6%3C%3E%3E%8A%A98%0B%23%D1.%2C%2C%B4%B6%B6%3AP%C6LEM1%F4%CE%F3)%A4MF%DB%99%FB%FE%FE%8E_%40YUU%A5%0DSY%25%EE%F3%F3%F3---%0E%94%88%8C%80%D2Q%D7%1C5bn%E2%85%00%7D%7D%7Dm%3D%1F%C9zppPQQA%D7%F1%0B%BC%CCF%89T%C1%18d9%40%13%A6%E2%A6x%23%B5oU%B8%BE%BE%3E%9CEj8%00zuu%05%C3jkk5%82%92%92%92%E6%E6%E6%F3%F3%F3%A7%A7%A7%C5%C5E%5BJ%CC%F1%91%91%11P%0A%A2J%C9%04%90d%B5U%04C%B3%85%9Eqg%9A%F3%F0%EC%EC%0Cm__%9F%D5%D7%A3%A3%A3%DB%DB%5B%10%5B%2F%85'%1C%1D%1De%5DSm%23%9Cj%87S%1D%CDV%9E%98%A3%F0%80%C9%C7%FC%C3%E1%E9%E9)%3A%FD%FD%FDVV%C8%96rll%0C%97*..%8Eg%24%94%5E*%A8%0FP%89%3E%7D%3D99A%07%8B%20%D7w%2F%D2z%7C%7C%9C%94%92%9A%DAd%F7B%F9%09%EA%10zb%81U%EA%9C%FC%05_%D1qf%05%E5%C4%C4%04%93X%CDK%A1t%AD%9D%3E%0A%3EA%ADi%84%16%ACh%AD9%40%DD%DC%DC%90%12yYd%8A%94%B4%D3%2F%A5K%E8%A5%E0%AB%F3%D1%C8%88%AC%A8%FF%8D%8D%8D%DA%B9%CF%CF%CF%B3%B3%B3%18%03%3E%82%D2N%EB%04%F2%FE%D9%94%D5Qu9%C2%9A%2F%AC2%09%A0%E9%E9i%BCT%1B%1A%1AT%CA%9E%9E%9E%97%97%17D%5C%B33gJ%F7%D0%0B%2B%86%91U%2Bu8%9C%99%99%C1%07F%5D%5D%1D)%7B%7B%7B%B1%DA(--M%9AR%83.1%F1K%E9%BEpVYU8%E2%A2%C5%03%80%60nn%0EK%E3T*%85%E9%85%E7%C1%22%B0(%23%A1T%8B%91_JO%9F%22%C2%AA%BD%B1%84%18%10x%7D%AF%AE%AE%82%09%C3%CA%CB%CB%B5%D7%8FV%8Cr%A0%F4%FA%CD%24%AC%E4c%2B%8E%22%D0p%91%8B%26%D4K%B1Y%DE%40%EA%8A37%CAOP%2F%A7%C9BS-Ob*PdE%A2%FEH%E2%82P%FA%D8%80%10Vy%A3%0A%2Bhh'%07%A8%95A%94'%A5%BF%9D%12%8D%95%1D%88%B5V6g%C8*%E5%B6%20%94%BE%B7tlY%85R%C6%C8%87T%3E%B3'%DF%BD'%8D%953L%FD%92%B6%EE%EA%E4O%99%E3%26%99%F6%11%E7%BC%7DR%10%CA%DCw%F3%D4%95%94-J%A1%F8%0A%B6%EDXp%A0%60%0F%3F%00%0D%40%03%D0%00%F4k%F4G%80%01%00%E2%BB%B3%8D%BD%BE%0E%DE%00%00%00%00IEND%AEB%60%82") no-repeat center center;
-webkit-background-size: 28px 28px;
}
input[type=radio]:checked {
background: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%008%00%00%008%08%02%00%00%00'%E4%ACI%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%03%99IDATx%DA%EC%98AKrA%14%86%BBj%A6%9F%11%04R%B9ID%A1%82%16%11n%A4m%8Bh%11%ED%04%D7%FE%8Bh%95%D8%0F%A8e%7F%40%DADT%B4%8FvA%1BA%DA%84%06%ADZ'%95%A9%BD%DF%7D%F10%DF%CDl%E6*%1F%08s%16r%EF8%F7%CEs%DFsf%CE%99q2%99%CC%C48X%60bL%CC%82ZP%0BjA-%A8%05%B5%A0%16%D4%82%9AXh%24o%E9v%BB%03%FEu%1Cg%04%A0%C3%BCE%F8%F0%92%9FX%D5%F7%0F3V(%18%0C%0EC%A9%FE%AA%ED%C2%E4%B8%26-%BEY%FD%80z%10%85%D2s%ED%7C%B3apC0%7F%94b%9DN%07-%CB%CB%CB%F9%7C~cc%23%99L%E2%B6%D1h%DC%DE%DEV*%95%87%87%07%60%05%02%81%BE%C4%FA%E6d%B3YSP%B1v%BB%0D%CAp8%BC%BF%BF%BF%B3%B3%F3%F1%F1%D1j%B5%C8%0D%B2%C9%C9I%FCu~~~pp%80%BF%D0%02%EFyp%0D%40s%B9%9C%0F%CA%8Ek%00%85CNNNVVV%DE%DE%DE%FA%3E%12%89Dj%B5Z%B1X%FC%FC%FC%04h%C05%1F%AC%C1t%3A%1D41%19%86%DC%7B%7B%7Bp%F7%FB%FB%BB%F3%83%E1c%12%89%C4%FC%FC%FC%CD%CDM%C85%BC%24%D43%FDqCp%90%91%9C%14%12%B7%B8XZZ%DA%DD%DD%7D%7D%7D%1D%AC%0D%3E%03%DDNOO%1F%1F%1F%19%00%9E%0F%D6%9ALSSS%FA%A0%A4%C4%18%04-%14%0A%08J%9D%C1%D0%0D%9D%CB%E52%10!%8D%CA%AA%0B%8Ax%D7%EC%CA%B8%E4%DBq%81%98%5B%5B%5Bc%8B%CE%B3%EB%EB%EBxP%FC.%F1%3AbP%99%E6LB%1Cfaa%01%B8%9A%AA%CC%CD%CD%89%DF%85U%DF%FB%06%A0%22'%AE%C1G1%8Cf.%25%04%22%BC%2F%A2%EA%82j%C6(A%A9%1F%A5E%D8%BD%BC%BC%C4%E3%F1%C1%15%89%24Rtf%80%8A%81%D5%00%D4%B7%A2%18%E6%FE%FE~kk%8B%2B%FC%AFZ%A23%3D%CED%F0%3F%40)-F%3A%3B%3B%DB%DE%DE%D6Q%14%0F%A2%B3h%E9%07%D4%C8%F5%8C*%DE%C2%FB%F5z%FD%EA%EA%0A%AC%83E%C5%23%E8%86%CE%D3%D3%D3%11%D70%A81%A8%FE%82%CF%15%94%AE%E7%82%0A%5D%8F%8E%8E%16%17%17WWW%07%D4%A3%D5j%15%DD%041%EC%9A%AC%A6%BA)tssS3s%AA%E9Dd%00%EB%F5%F5%F5%EC%EC%2C%B2%94T%9Fb%E8%7FyyY*%95%20%5E%2C%16%FB%E3%9A%E0%92U3%91%3A%87%87%87F%F9%13d%98%EF%C8%8A%A8B%9A%CD%26%F2g%D3%B5T*%85%18%40-%06%81%D1%FF%E9%E9%E9%EE%EE%EE%E2%E2%02%F5%1E%F9%08%FA%DD%EF%23v%3D%3D%CB0U%8B%20*%8DQ%9F%9F%9F%8F%8F%8F%3De%1E%98fff%A2%D1(%10%A3%AEQKYD%F5Wb%83%C2%99%A2%06%FE5RblH%85%A2%13z%0B(%DBA%16%E9%99Ji%94%96%CC%B6%22%14U%82U(%A9%1C%ABf%96%D2%D2%8D%2B%11qeI%A2%D3M%13%9B%D9%9E%89%8ArA%95%AC%8D%E1%5B%AE%B5%5D%93%CD%1D%3B%A8yH%ADEL%0Bg%E3%ED%B2%3A%A3%05%17%1C%ED%9Ey%40%E5%7B%C4%DD%B2v%9A%81%9ARr%7B%89%C1%04%88%1A%13%11%17j%3Bq%D5%98%F6%BD%B93%3E)%11VUZ%16~%EA%8EY%80%04NMB~%B6%CB%3E%CE%02d%C3D%C1d%E5%EA%7B%00%E1%994%FE%0F%20%7C%9F%B1%A8%B8%7FS%DCo%93r%C8%13%A8a%0F%C9Fr%00f%CFG-%A8%05%B5%A0%16%D4%82%8E%1F%E8%97%00%03%00%2CK3%C0%95%A6%DFv%00%00%00%00IEND%AEB%60%82") no-repeat center center;
-webkit-background-size: 28px 28px;
}
body #imagem1 {
background-image:url(images/balao.png);
background-repeat:no-repeat;
height:100px;
width:200px;
position:absolute;
top:90px;
left:170px;
cursor:pointer;
visibility:hidden;
}
body #imagem1 span {
width:190px;
position:absolute;
top:23px;
left:-2px;
text-align:center;
font-size:1.17em;
color:#FFFFFF;
}
body #imagem2 {
background-image:url(images/balao.png);
background-repeat:no-repeat;
height:100px;
width:200px;
position:absolute;
top:147px;
left:170px;
cursor:pointer;
visibility:hidden;
}
body #imagem2 span {
width:190px;
position:absolute;
top:23px;
left:-2px;
text-align:center;
font-size:1.17em;
color:#FFFFFF;
}
body #imagem3 {
background-image:url(images/balao.png);
background-repeat:no-repeat;
height:100px;
width:200px;
position:absolute;
top:202px;
left:170px;
cursor:pointer;
visibility:hidden;
}
body #imagem3 span {
width:180px;
position:absolute;
top:23px;
left:-2px;
text-align:center;
font-size:1.17em;
color:#FFFFFF;
}
body #imagem4 {
background-image:url(images/balao.png);
background-repeat:no-repeat;
height:100px;
width:200px;
position:absolute;
top:255px;
left:170px;
cursor:pointer;
visibility:hidden;
}
body #imagem4 span {
width:190px;
position:absolute;
top:23px;
left:-2px;
text-align:center;
font-size:1.17em;
color:#FFFFFF;
}
body #imagem5 {
background-image:url(images/balao.png);
background-repeat:no-repeat;
height:100px;
width:200px;
position:absolute;
top:451px;
left:170px;
cursor:pointer;
visibility:hidden;
}
body #imagem5 span {
width:180px;
position:absolute;
top:23px;
left:-2px;
text-align:center;
font-size:1.17em;
color:#FFFFFF;
}
#contact-form {
background-color:#F2F7F9;
width:465px;
padding:20px;
margin: 120px auto;
border: 6px solid #F2F7F9;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
position:relative;
}
#contact-form h1 {
font-size:30px;
color:#666;
}
#contact-form input, #contact-form select, #contact-form textarea, #contact-form label {
font-size:1.2em;
margin-bottom:2px;
}
#contact-form input, #contact-form select, #contact-form textarea {
width:450px;
border: 1px solid #CEE1E8;
margin-bottom:20px;
padding:4px;
}
#contact-form input:focus, #contact-form select:focus, #contact-form textarea:focus {
border: 1px solid #AFCDD8;
background-color: #EBF2F4;
}
#contact-form textarea {
height:80px;
resize: none;
}
#contact-form label {
display:block;
}
#contact-form .required {
font-weight:bold;
color:#F00;
}
#contact-form #submit-button {
width: 100px;
background-color:#333;
color:#FFF;
border:none;
display:block;
float:right;
margin-bottom:0px;
margin-right:6px;
background-color:#8FB5C1;
-moz-border-radius:8px;
}
#contact-form #submit-button:hover {
background-color: #A6CFDD;
}
#contact-form #submit-button:active {
position:relative;
top:1px;
}
#contact-form #loading {
width:32px;
height:32px;
background-image:url(../img/loading.gif);
display:block;
position:absolute;
right:130px;
bottom:16px;
display:none;
}
/* Remove box shadow firefox, chrome and opera put around required fields. It looks rubbish. */
input:required, textarea:required {
-moz-box-shadow:none;
-webkit-box-shadow:none;
-o-box-shadow:none;
box-shadow:none;
}
/* Normalize placeholder styles */
/* chrome, safari */
::-webkit-input-placeholder {
color:#CCC;
font-style:italic;
}
/* mozilla */
input:-moz-placeholder, textarea:-moz-placeholder {
color:#CCC;
font-style:italic;
}
/* ie (faux placeholder) */
input.placeholder-text, textarea.placeholder-text {
color:#CCC;
font-style:italic;
}
.ir {
display: block;
text-indent: -999em;
overflow: hidden;
background-repeat: no-repeat;
text-align: left;
direction: ltr;
}
.hidden {
display: none;
visibility: hidden;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
.invisible {
visibility: hidden;
}
.clearfix:before, .clearfix:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
@media all and (orientation:portrait) {
}
@media all and (orientation:landscape) {
}
@media screen and (max-device-width: 480px) {
/* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}
@media print {
* {
background: transparent !important;
color: black !important;
text-shadow: none !important;
filter:none !important;
-ms-filter: none !important;
}
a, a:visited {
color: #444 !important;
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
content: "";
}
pre, blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr, img {
page-break-inside: avoid;
}
@page {
margin: 0.5cm;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3 {
page-break-after: avoid;
}
- CSS aplicado ao CD:
ul.tunes {
margin-left: -20px;
}
ul.tunes li {
position: relative;
width: 200px;
height: 190px;
float: left;
margin-left: 150px;
}
ul.tunes li div.album {
margin: 0 0 48px 0;
display: inline;
background: #;
width: 200px;
height: 120px;
position: absolute;
text-decoration: none;
-webkit-transition: all .15s linear;
color: #000;
left: 0px;
top: 0px;
}
ul.tunes img {
width: 300px;
height:308px;
position: relative;
z-index: 30;
float: left;
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .5);
-webkit-border-radius: 2px;
}
ul.tunes li div.album div {
display: block;
opacity: .95;
text-align: center;
-webkit-transition: all .25s linear;
clear: left;
width: 120px;
}
ul.tunes li div.album div h5 {
text-align: center;
}
ul.tunes li div.album:hover div {
opacity: 1;
}
ul.tunes li div.album span.vinyl {
width: 116px;
height: 116px;
z-index: 1;
display: block;
-webkit-transition: all .25s linear;
position: absolute;
top: 2px;
left: 2px;
margin-left: 16px;
}
ul.tunes li div.album span.vinyl div {
position: absolute;
top: 2px;
left: 2px;
display: block;
z-index: 10;
width: 300px;
height: 300px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .5);
-webkit-transition: all .25s linear;
overflow: hidden;
border: solid 1px 255, 248, 220, 1;
background:
-webkit-gradient( linear, left top, left bottom, from(transparent), color-stop(0.1, transparent), color-stop(0.5, rgba(255, 255, 255, 0.25)), color-stop(0.9, transparent), to(transparent)), -webkit-gradient( radial, 150 150, 20, 150 150, 120, from(transparent), color-stop(0.01, transparent), color-stop(0.40, rgba(255, 255, 255, 1)), color-stop(0.40, rgba(175, 175, 175, 1)), /*cor do rebordo do CD*/ color-stop(0.1, rgba(175, 175, 175, 1)), /*cor do CD*/ to(rgba(80,80,80, 1)));
border-top: 1px solid rgba(255, 255, 255, .25);
}
ul.tunes li div.album:hover span.vinyl {
-webkit-transform: translateX(200px);
} /* Distancia Rotação Vynil*/
ul.tunes li div.album:hover span.vinyl div {
-webkit-transform: rotate(120deg);
border-top: 0;
border-left: 1px solid rgba(255, 255, 255, .25);
}
ul.tunes li span.gloss {
display: block;
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 120px;
background: url(/playground/sliding-vinyl/sheen3.png) no-repeat;
z-index: 100;
}
ul.tunes li {
text-shadow: 0 2px 3px rgba(0, 0, 0, .75);
}
ul.tunes h5 {
padding-top: 8px;
color: #fff;
position:relative;
left:90px;
}
ul.tunes small {
color: #fff;
opacity: .75;
}
- CSS aplicado ao jogo:
.ptext{
background-color:white;
border:0px;
font-weight:bold;
font-size:10px;
font-family:verdana;
color:darkblue;
text-align:right;
width:100;
}
.pbutton{
background-color:white;
border:1px solid blue;
font-weight:bold;
font-size:10px;
font-family:verdana;
color:darkblue;
width:100px;
vertical-align:bottom;
}
- CSS aplicado ao ecrá notícias:
p{
font-size:10px;
}
#news {
background-color: #444;
color: #333;
font-family: Helvetica, sans-serif;
background-image:url(images/fundoNews.jpg);
}
#book {
background:url(images/book.png)no-repeat;
position: absolute;
width: 830px;
height: 500px;
left: 50%;
top: 50%;
margin-left: -430px;
margin-top: -100px;
}
#pages section {
background:url(images/paper.png) no-repeat;
display: block;
width: 400px;
height: 500px;
position: absolute;
left: 415px;
top: 5px;
overflow: hidden;
}
#pages section>div {
display: block;
width: 400px;
height: 250px;
font-size: 12px;
}
#pages section p,
#pages section h2 {
padding: 3px 35px;
line-height: 1.4em;
text-align: justify;
}
#pages section h2{
margin: 15px 0 10px;
}
#pageflip-canvas {
position: absolute;
z-index: 100;
}
Principais scripts desenvolvidas (JavaScript)
Alguns dos javscript's utilizados:
- Navegação:
$.fn.adjustedPosition = function() {
var a = $(this).position();
return {
left:this.data("dx")
,top:this.data("dy"),
}
};
$(function() {
var r = "38";
var g = "39";
var c = "40";
var w = "37";
var k = 500;
var h = true;
if(typeof(isIE) !== "undefined") {
return
}
$("#loading").css("opacity","0");
x();
q();
m();
s(true);
setTimeout(function() {
var z = window.location.hash || "#home";
z = z.replace(/^#/,"");
$("#navigation .tile[name='" + z + "']").click();
$("#loading").remove()
}
,2500);
$(window).resize(function() {
q();
x()
});
$("#tiles").localScroll({
axis:"xy"
,queue:false
,hash:true
,duration:k,
});
$(".left, .right, .up, .down").click(function() {
var z = window.location.hash || "#home";
z = z.replace(/^#/,"")
});
$(window).keydown(function(A) {
var z = A.keyCode || A.which;
if(z == r || z == c || z == w || z == g) {
t(A,z);
return false
}
});
function t(B,z) {
var C = window.location.hash || "#home";
if(z == c) {
var A = $(C + " .down");
if(A != null) {
A.click()
}
} else {
if(z == g) {
var A = $(C + " .right");
if(A != null) {
A.click()
}
} else {
if(z == r) {
var A = $(C + " .up");
if(A != null) {
A.click()
}
} else {
if(z == w) {
var A = $(C + " .left");
if(A != null) {
A.click()
}
}
}
}
}
}
function q() {
var B = $(window).width();
var z = $(window).height();
$("#tiles").css("width",B * 7);
$("#tiles").css("height",z * 4);
$("#tiles > .tile").css("width",B);
$("#tiles > .tile").css("height",z);
$("#navigation").css("width",B * 7);
$("#navigation").css("height",z * 4);
var A = $("#navigation .tile");
var D = A.outerWidth(true) - A.innerWidth();
var C = A.outerHeight(true) - A.innerHeight();
A.css("width",B - D);
A.css("height",z - C);
$("#tiles > .tile").each(function() {
var E = $(this).position();
$(this).data({
dx:E.left
,dy:E.top
})
});
$("#cultivate, #clown, #build").each(function() {
if(B < 1280) {
var F;
var E = $(this);
$("<img/>").attr("src",$(this).attr("src")).load(function() {
F = this.width;
E.css("width",F * B/1280)
})
}
})
}
function x() {
var B = $(window).width();
var z = $(window).height();
var D = 30;
$(".maze-top").css("width",B * 7 - D * 2);
$(".maze-right").css("height",z * 5);
$(".maze-bottom").css("width",B * 7 - D * 2);
$(".maze-left").css("height",z * 5);
$(".maze-middle1").css("height",z * 4.2);
$(".maze-middle11").css("height",z * 5);
$(".maze-middle2").css("width",B * 1.02);
$(".maze-middle22").css("width",B * 1.02);
$(".maze-middle3").css("height",z * 2);
$(".maze-middle33").css("height",z * 2);
var A = $(".maze-top").height();
var G = $(".maze-left").width();
var F = G;
var E = $(".maze-middle2").height();
var C = G;
$(".maze-middle1").css("width",F);
$(".maze-middle11").css("width",F);
$(".maze-middle3").css("width",C);
$(".maze-middle33").css("width",C);
$(".maze-top").css("margin-top", - z * 5);
$(".maze-top").css("margin-left",D);
$(".maze-right").css("margin-left",B * 7 - G - D);
$(".maze-right").css("margin-top", - z * 5);
$(".maze-bottom").css("margin-top", - A);
$(".maze-bottom").css("margin-left",D);
$(".maze-left").css("margin-top", - z * 5);
$(".maze-left").css("margin-left",D);
$(".maze-middle1").css("margin-top", - z * 4.02);
$(".maze-middle1").css("margin-left",B - F - D);
$(".maze-middle11").css("margin-top", - z * 4.02);
$(".maze-middle11").css("margin-left",B + F);
$(".maze-middle2").css("margin-top", - (z * 1.95));
$(".maze-middle2").css("margin-left",B * 0.95);
$(".maze-middle22").css("margin-top", - (z * 2) - E);
$(".maze-middle22").css("margin-left",B * 1.02);
$(".maze-middle3").css("margin-top", - z * 3);
$(".maze-middle3").css("margin-left",B * 2 - C - D);
$(".maze-middle33").css("margin-top", - z * 3);
$(".maze-middle33").css("margin-left",B * 2 + C);
$(".small-maze-top").css("width",B * 7);
$(".small-maze-right").css("height",z * 5);
$(".small-maze-bottom").css("width",B * 7);
$(".small-maze-left").css("height",z * 5);
$(".small-maze-middle1").css("height",z * 5);
$(".small-maze-middle2").css("width",B);
$(".small-maze-middle3").css("height",z * 2);
$(".small-maze-middle1").css("width",F);
$(".small-maze-middle3").css("width",C);
$(".small-maze-top").css("margin-top", - z * 5);
$(".small-maze-top").css("margin-left",D);
$(".small-maze-right").css("margin-left",B * 7 - G);
$(".small-maze-right").css("margin-top", - z * 5);
$(".small-maze-bottom").css("margin-top", - A);
$(".small-maze-left").css("margin-top", - z * 5);
$(".small-maze-middle1").css("margin-top", - z * 5);
$(".small-maze-middle1").css("margin-left",B - F/2);
$(".small-maze-middle2").css("margin-top", - (z * 2) - E/2);
$(".small-maze-middle2").css("margin-left",B);
$(".small-maze-middle3").css("margin-top", - z * 3);
$(".small-maze-middle3").css("margin-left",B * 2 - C/2)
}
var v;
var d = false;
var y = true;
var b = 0;
var i = 0;
function s(F) {
var G = window.location.hash || "#home";
G = G.replace(/^#/,"");
var E
,A;if( ! y) {
y = true;
$("#navigation").css("opacity","1.0");
$("#navigation").css("visibility","visible");
$('#navigation .tile[name="' + G + '"]').addClass("selected");
v = G;
E = 0.8 * $(window).height()/$("#navigation > .container").height();var D=($(window).width()-E*$("#navigation > .container").width())/2;
var z = ($(window).height() - E * $("#navigation > .container").height())/2;
A = "translate(" + D + "px, " + z + "px) scale(" + E + ")"
} else {
E = 1;
y = false;
m();
A = "translate(" + b + "px, " + i + "px) scale(" + E + ")"
}
var C = ["-moz-","-webkit-","-o-",""];
for(var B=0;B<C.length;B++) {
if(h) {
h = false
} else {
$("#navigation > .container").css(C[B] + "transition",C[B] + "transform 0.3s linear")
}
$("#navigation > .container").css(C[B] + "transform-origin","top left");
$("#navigation > .container").css(C[B] + "transform",A)
}
if(F) {
if(window.location.hash != "" && window.location.hash != "#home") {
setTimeout(function() {
y = true;
var H = $("#navHelper");
H.css("visibility","visible");
H.css("opacity","1.0")
}
,3000)
}
}
}
function m() {
var D = window.location.hash || "#home";
var C = $(D).adjustedPosition();
b = - C.left;
i = - C.top;
var z = "translate(" + b + "px, " + i + "px)";
var B = ["-moz-","-webkit-","-o-",""];
for(var A=0;A<B.length;A++) {
$("#navigation > .container").css(B[A] + "transition",B[A] + "transform 0s linear");
$("#navigation > .container").css(B[A] + "transform-origin","top left");
$("#navigation > .container").css(B[A] + "transform",z)
}
}
});
//* B valor horizontal, z valor vertical
- Jogo:
var over = false;
var arr = new Array();
var time;
var T1 = null;
var start = false;
var str = "";
var l;
var t;
var piece = new Array();
var teller = 0;
var hteller;
function initPuzzle(){
var tmpPuzzle = "<div style='vertical-align:bottom;position:relative;height:"+(img_height+50)+"px;width="+img_width+"px' valign=bottom><form name=frm_info>";
tmpPuzzle += "<table><tr><td style='vertical-align:bottom;height:"+(img_height+50)+"px;width:"+(img_width/3)+"px'>";
for(i=0; i < cols; i++){
stop = rows;
arr[i] = new Array();
if((i+1) == cols) stop--;
for(j=0;j< stop; j++){
l = Math.round((img_width/cols)*(i));
t = Math.round((img_height/rows)*(j)) ;
id = "i_"+i+"j_"+j;
arr[i][j] = new Array("",l,t,false);
tmpPuzzle += "<div style='height:"+Math.round((img_height/rows))+"px;overflow:hidden;position:absolute;left:"+l+"px;top:"+t+"px;z-index:10;width:"+Math.round((img_width/cols))+"px' id='"+ id +"' onclick=set('"+this.id+"') ><img src='"+img.src+"' style='position:absolute;top:"+(-t)+"px;left:"+(-l)+"px'></div>";
piece[teller] = new Array(id,l,t,false,teller);
teller++;
}
}
l = ((img_width/cols)*(cols-1));
t = (img_height/rows)*(rows-1);
hteller = teller;
arr[(cols-1)][(rows-1)] = new Array("",l,t);
piece[teller] = new Array("B",0,0,false,teller);
tmpPuzzle += "<input type='button' value='Shake' onclick='reseter()' class='pbutton'></td><td style='vertical-align:bottom;height:"+(img_height+50)+"px;width:"+(img_width/3)+"px' align=middle><div id=txttimer class=ptext>00:00:00</div></td><td style='vertical-align:bottom;height:"+(img_height+50)+"px;width:"+(img_width/3)+"px' align=right><div id=txtgood class=ptext></div></td></tr></table></form></div>";
teller--;
document.getElementById("puzzle").innerHTML = tmpPuzzle;
checker();
}
function reseter(){
start = true;
time = new Date();
arr[(cols-1)][(rows-1)] = new Array("",l,t);
piece[hteller] = new Array("B",0,0,false,hteller);
for(i=0;i<=teller;i++) piece[i][3] = false;
changer();
checker();
set_time();
}
function set_time(){
temp = new Date();
between = Math.round((temp-time)/1000);
sec = between%60;
min = Math.floor((between-sec)/60);
hou = Math.floor(min/60);
min = min%60;
if (sec < 10) sec = "0"+ sec;
if (min < 10) min = "0"+ min;
if (hou < 10) hou = "0"+ hou;
str = hou+":"+min+":"+sec;
document.getElementById("txttimer").innerHTML = str;
if(start)T1 = setTimeout("set_time()",1000);
}
function changer(){
for(i=0;i<cols;i++){
stop = rows;
if((i+1) == cols) stop--;
for(j=0;j<stop;j++){
ok = false;
while(ok == false){
check = Math.floor((teller*Math.random())+0.5);
id = "i_"+i+"j_"+j;
if((piece[check][3] == false)){
piece[check][3] = true;
mob = document.getElementById(id).style;
mob.left = piece[check][1] +"px";
mob.top = piece[check][2] +"px";
arr[i][j][0] = piece[check][0];
arr[i][j][3] = get_jpos(piece[check][0],i,j)
ok = true;
}
}
}
}
}
function get_jpos(over,i,j){
jpos = over.indexOf("j");
ipos = parseInt(over.substr(2,(jpos-2)));
jpos = parseInt(over.substr((jpos+2),(over.length -(jpos+2))));
if((i == ipos) && (j==jpos)) return true;
else return false;
}
function check_blank(i,j){
if ((i == (cols-1)) && (j == (rows-1))) return true;
else return false;
}
function set(id){
if(!start) {
alert("Please press first on the shake button (re)start the game.");
return false;
}
i = Math.round(parseInt(document.getElementById(id).style.left)/(img_width/cols));
j = Math.round(parseInt(document.getElementById(id).style.top)/(img_height/rows));
if(i != (cols-1) && arr[i+1][j] && arr[i+1][j][0] == "") {
document.getElementById(id).style.left = arr[i+1][j][1] +"px";
document.getElementById(id).style.top = arr[i+1][j][2] +"px";
arr[i+1][j][0] = id;
arr[i][j][0] = "";
arr[i][j][3] = check_blank(i,j);
hi = i+1;
arr[i+1][j][3] = get_jpos(id,hi,j);
}
if(j != (rows-1) && arr[i][j+1] && arr[i][j+1][0] == "") {
document.getElementById(id).style.left = arr[i][j+1][1] +"px";
document.getElementById(id).style.top = arr[i][j+1][2] +"px";
arr[i][j+1][0] = id;
arr[i][j][0] = "";
arr[i][j][3] = check_blank(i,j);
hj = j+1;
arr[i][j+1][3] = get_jpos(id,i,hj);
}
if(i != 0 && arr[i-1][j] && arr[i-1][j][0] == "") {
document.getElementById(id).style.left = arr[i-1][j][1] +"px";
document.getElementById(id).style.top = arr[i-1][j][2] +"px";
arr[i-1][j][0] = id;
arr[i][j][0] = "";
arr[i][j][3] = check_blank(i,j);
hi = i-1;
arr[i-1][j][3] = get_jpos(id,hi,j);
}
if(j != 0 && arr[i][j-1] && arr[i][j-1][0] == "") {
document.getElementById(id).style.left = arr[i][j-1][1]+"px";
document.getElementById(id).style.top = arr[i][j-1][2]+"px";
arr[i][j-1][0] = id;
arr[i][j][0] = "";
arr[i][j][3] = check_blank(i,j);
hj = j-1;
arr[i][j-1][3] = get_jpos(id,i,hj);
}
checker();
}
function checker(){
good = 0;
further = true;
for(i=0;i<cols;i++){
for(j=0;j<rows;j++){
if(arr[i][j][3] == false) {
further = false;
}
else good++;
}
}
strgood = good +"/"+ (rows*cols);
if(!start) strgood = (rows*cols)+"/"+(rows*cols);
document.getElementById("txtgood").innerHTML = strgood;
if(further){
clearTimeout(T1);
start = false;
alert("Congratulations, puzle solved in "+ str +"!");
}
}
window.onload = initPuzzle;
- Animação do ecrã News:
(function() {
// Dimensions of the whole book
var BOOK_WIDTH = 830;
var BOOK_HEIGHT = 260;
// Dimensions of one page in the book
var PAGE_WIDTH = 400;
var PAGE_HEIGHT = 250;
// Vertical spacing between the top edge of the book and the papers
var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2;
// The canvas size equals to the book dimensions + this padding
var CANVAS_PADDING = 60;
var page = 0;
var canvas = document.getElementById( "pageflip-canvas" );
var context = canvas.getContext( "2d" );
var mouse = { x: 0, y: 0 };
var flips = [];
var book = document.getElementById( "book" );
// List of all the page elements in the DOM
var pages = book.getElementsByTagName( "section" );
// Organize the depth of our pages and create the flip definitions
for( var i = 0, len = pages.length; i < len; i++ ) {
pages[i].style.zIndex = len - i;
flips.push( {
// Current progress of the flip (left -1 to right +1)
progress: 1,
// The target value towards which progress is always moving
target: 1,
// The page DOM element related to this flip
page: pages[i],
// True while the page is being dragged
dragging: false
} );
}
// Resize the canvas to match the book size
canvas.width = BOOK_WIDTH + ( CANVAS_PADDING * 2 );
canvas.height = BOOK_HEIGHT + ( CANVAS_PADDING * 2 );
// Offset the canvas so that it's padding is evenly spread around the book
canvas.style.top = -CANVAS_PADDING + "px";
canvas.style.left = -CANVAS_PADDING + "px";
// Render the page flip 60 times a second
setInterval( render, 1000 / 60 );
document.addEventListener( "mousemove", mouseMoveHandler, false );
document.addEventListener( "mousedown", mouseDownHandler, false );
document.addEventListener( "mouseup", mouseUpHandler, false );
function mouseMoveHandler( event ) {
// Offset mouse position so that the top of the book spine is 0,0
mouse.x = event.clientX - book.offsetLeft - ( BOOK_WIDTH / 2 );
mouse.y = event.clientY - book.offsetTop;
}
function mouseDownHandler( event ) {
// Make sure the mouse pointer is inside of the book
if (Math.abs(mouse.x) < PAGE_WIDTH) {
if (mouse.x < 0 && page - 1 >= 0) {
// We are on the left side, drag the previous page
flips[page - 1].dragging = true;
}
else if (mouse.x > 0 && page + 1 < flips.length) {
// We are on the right side, drag the current page
flips[page].dragging = true;
}
}
// Prevents the text selection
event.preventDefault();
}
function mouseUpHandler( event ) {
for( var i = 0; i < flips.length; i++ ) {
// If this flip was being dragged, animate to its destination
if( flips[i].dragging ) {
// Figure out which page we should navigate to
if( mouse.x < 0 ) {
flips[i].target = -1;
page = Math.min( page + 1, flips.length );
}
else {
flips[i].target = 1;
page = Math.max( page - 1, 0 );
}
}
flips[i].dragging = false;
}
}
function render() {
// Reset all pixels in the canvas
context.clearRect( 0, 0, canvas.width, canvas.height );
for( var i = 0, len = flips.length; i < len; i++ ) {
var flip = flips[i];
if( flip.dragging ) {
flip.target = Math.max( Math.min( mouse.x / PAGE_WIDTH, 1 ), -1 );
}
// Ease progress towards the target value
flip.progress += ( flip.target - flip.progress ) * 0.2;
// If the flip is being dragged or is somewhere in the middle of the book, render it
if( flip.dragging || Math.abs( flip.progress ) < 0.997 ) {
drawFlip( flip );
}
}
}
function drawFlip( flip ) {
// Strength of the fold is strongest in the middle of the book
var strength = 1 - Math.abs( flip.progress );
// Width of the folded paper
var foldWidth = ( PAGE_WIDTH * 0.5 ) * ( 1 - flip.progress );
// X position of the folded paper
var foldX = PAGE_WIDTH * flip.progress + foldWidth;
// How far the page should outdent vertically due to perspective
var verticalOutdent = 20 * strength;
// The maximum width of the left and right side shadows
var paperShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( 1 - flip.progress, 0.5 ), 0 );
var rightShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( strength, 0.5 ), 0 );
var leftShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( strength, 0.5 ), 0 );
// Change page element width to match the x position of the fold
flip.page.style.width = Math.max(foldX, 0) + "px";
context.save();
context.translate( CANVAS_PADDING + ( BOOK_WIDTH / 2 ), PAGE_Y + CANVAS_PADDING );
// Draw a sharp shadow on the left side of the page
context.strokeStyle = 'rgba(0,0,0,'+(0.05 * strength)+')';
context.lineWidth = 30 * strength;
context.beginPath();
context.moveTo(foldX - foldWidth, -verticalOutdent * 0.5);
context.lineTo(foldX - foldWidth, PAGE_HEIGHT + (verticalOutdent * 0.5));
context.stroke();
// Right side drop shadow
var rightShadowGradient = context.createLinearGradient(foldX, 0, foldX + rightShadowWidth, 0);
rightShadowGradient.addColorStop(0, 'rgba(0,0,0,'+(strength*0.2)+')');
rightShadowGradient.addColorStop(0.8, 'rgba(0,0,0,0.0)');
context.fillStyle = rightShadowGradient;
context.beginPath();
context.moveTo(foldX, 0);
context.lineTo(foldX + rightShadowWidth, 0);
context.lineTo(foldX + rightShadowWidth, PAGE_HEIGHT);
context.lineTo(foldX, PAGE_HEIGHT);
context.fill();
// Left side drop shadow
var leftShadowGradient = context.createLinearGradient(foldX - foldWidth - leftShadowWidth, 0, foldX - foldWidth, 0);
leftShadowGradient.addColorStop(0, 'rgba(0,0,0,0.0)');
leftShadowGradient.addColorStop(1, 'rgba(0,0,0,'+(strength*0.15)+')');
context.fillStyle = leftShadowGradient;
context.beginPath();
context.moveTo(foldX - foldWidth - leftShadowWidth, 0);
context.lineTo(foldX - foldWidth, 0);
context.lineTo(foldX - foldWidth, PAGE_HEIGHT);
context.lineTo(foldX - foldWidth - leftShadowWidth, PAGE_HEIGHT);
context.fill();
// Gradient applied to the folded paper (highlights & shadows)
var foldGradient = context.createLinearGradient(foldX - paperShadowWidth, 0, foldX, 0);
foldGradient.addColorStop(0.35, '#fafafa');
foldGradient.addColorStop(0.73, '#eeeeee');
foldGradient.addColorStop(0.9, '#fafafa');
foldGradient.addColorStop(1.0, '#e2e2e2');
context.fillStyle = foldGradient;
context.strokeStyle = 'rgba(0,0,0,0.06)';
context.lineWidth = 0.5;
// Draw the folded piece of paper
context.beginPath();
context.moveTo(foldX, 0);
context.lineTo(foldX, PAGE_HEIGHT);
context.quadraticCurveTo(foldX, PAGE_HEIGHT + (verticalOutdent * 2), foldX - foldWidth, PAGE_HEIGHT + verticalOutdent);
context.lineTo(foldX - foldWidth, -verticalOutdent);
context.quadraticCurveTo(foldX, -verticalOutdent * 2, foldX, 0);
context.fill();
context.stroke();
context.restore();
}
})();
Integração com outras tecnologias (frameworks, linguagens, etc...)
Com o projecto final de lab2/guionismo procuramos criar um site da banda Kings of Leon baseando-nos nas novas funções do HTML5 e CSS3, para além do Javascript, CSS2, xHTML e jQuerry.
Assim procuramos para além de divulgar a banda e toda a sua música, criar um site que seja interactivo e atractivo do ponto de vista visual e de utilização.
Sugestões técnicas para problemas encontrados
Um dos principais problemas dos web developers é a compatibilidade entre browser's. Nós não fomos excepção e tivemos sérios problemas com a compatibilidade entre os diversos browsers existentes. A nossa página web funciona bem no Firefox, Google Chrome e Opera (nas versões mais actualizadas) mas é impossível de visualizar no Internet Explorer.
Este problema com o Internet Explorer forçou-nos a criar uma página Lite para que quem utilize este navegador possa visualizar o site, embora perca diversas funcionalidades.
Assim, as transições horizontais, o vídeo do fundo, a integração do Google Maps no ecrã Tour, as animações no ecrã Biography e no ecrã Discography e as imagens e vídeos do ecrã Media desaparecem nesta versão.
Desta forma o site Lite foi criado,principalmente, com recurso a âncoras.
Melhoramentos Futuros
Existem alguns aspectos em que poderíamos melhorar o nosso site.
De entre os quais destaco a falta de RSS nas notícias da banda (tivemos dificuldades neste aspecto, quer pela dificuldade em encontrar o código, quer pelo facto do site official da banda não estar actualmente online).
No ecrã da discografia poderiam ser implementados previews das músicas presentes nas trackilists.
O contacto com as redes socias poderia ser implementado de outra forma, para que os utilizadores possam interagir de forma mais dinâmica com as novidades da banda.
Por fim, o facto da compatibilidade entre browser's seria outro ponto a rever e a melhorar no futuro.
Conclusões
Referências bibliográficas
- www.hotscripts.com
- www.zenelements.com
- www.html5rocks.com
- www.head2heart.us
- www.talks20.com
- www.foofighters.com
