Gameplay footage page added. Screenshot nav tabs added.

This commit is contained in:
Matthew Bowra-Dean
2010-05-03 18:11:04 +12:00
committed by Chris Forbes
parent 4ddc63f6bf
commit 1a0e5329ff
5 changed files with 201 additions and 10 deletions

152
web/footage.html Normal file
View File

@@ -0,0 +1,152 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>OpenRA - Gameplay Footage</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<title>OpenRA</title>
<link rel="Stylesheet" type="text/css" href="openra.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
//Work out what to show for downloads
var useragent = navigator.userAgent.toLowerCase();
if (useragent.indexOf("x11") != -1 || useragent.indexOf("linux") != -1) {
$("#down_btn_linux").show();
$("#down_link_win").show();
$("#down_link_mac").show();
}
else if (useragent.indexOf("mac") != -1) {
$("#down_btn_mac").show();
$("#down_link_win").show();
$("#down_link_linux").show();
}
else {
$("#down_btn_win").show();
$("#down_link_mac").show();
$("#down_link_linux").show();
}
$.get("downloads.txt", function(data) {
$("#stats_down").html(data);
});
$.get("/master/list.php", function(data) {
if (data.length <= 3) return;
var m, sum = 0;
var p = /^\s*Players: (\d+)/g;
while ((m = p.exec(data)) != null) {
sum += (Number)(m[1]);
}
$("#stats_players").html(sum);
});
});
</script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-vbw" type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/css/gsearch.css");
</style>
<!-- Video Bar Code and Stylesheet -->
<script type="text/javascript">
window._uds_vbw_donotrepair = true;
</script>
<script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js?mode=new"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/solutions/videobar/gsvideobar.css");
</style>
<style type="text/css">
.playerInnerBox_gsvb .player_gsvb
{
width: 480px;
height: 380px;
}
.playerBox_gsvb div.alldone_gsvb
{
display: none;
}
.playerBox_gsvb a.title_gsvb
{
color:White;
}
.playerBox_gsvb a.title_gsvb:hover
{
color:White;
text-decoration:underline;
}
</style>
<script type="text/javascript">
function LoadVideoBar() {
var videoBar;
var options = {
largeResultSet: !true,
horizontal: true,
autoExecuteList: {
cycleTime: GSvideoBar.CYCLE_TIME_MEDIUM,
cycleMode: GSvideoBar.CYCLE_MODE_LINEAR,
executeList: ["ytchannel:ijwchrisf"]
},
}
videoBar = new GSvideoBar(document.getElementById("videoBar-bar"),
document.getElementById("videoPlayer"),
options);
videoBar.switchToListItem(0);
}
// arrange for this function to be called during body.onload
// event processing
GSearch.setOnLoadCallback(LoadVideoBar);
</script>
</head>
<body>
<div id="header" class="bar">
<h1>
<img src="soviet-logo.png" alt="Logo" />OpenRA</h1>
</div>
<div id="main">
<div id="menu">
<span class="links"><a href="index.html">Home</a></span> <span class="links"><a href="footage.html">
Gameplay Footage</a></span> <span class="links">Mods</span> <span class="links">Stats</span>
<span class="links"><a href="http://github.com/chrisforbes/OpenRA">Get Involved</a></span>
<span class="links"><a href="irc://irc.freenode.net/#openra">IRC</a></span>
</div>
<div style="margin-top: 20px">
<div id="videoPlayer" style="padding-top: 5px; height:410px; width: 500px; margin: 20px auto; background-color: Black; border: solid 3px #650b03"></div>
<div id="videoBar-bar">
<span style="color: #676767; font-size: 11px; margin: 10px; padding: 4px;">Loading...</span>
</div>
</div>
</div>
<div id="footer" class="bar">
<p id="trademarks">
<img src="soviet-logo.png" alt="OpenRA Logo" height="70px" style="float: right; margin-right: 10px" />
Command &amp; Conquer and Command &amp; Conquer Red Alert are trademarks or registered
trademarks of Electronic Arts Inc.in the U.S. and/or other countries.<br />
Windows is a registered trademark of Microsoft Corporation in the United States
and other countries.<br />
Mac OS X is a trademark of Apple Inc., registered in the U.S. and other countries.<br />
Linux is the registered trademark of Linus Torvalds in the U.S. and other countries.<br />
Mono is a registered trademark of Novell, Inc. in the United States and other countries.<br />
</p>
</div>
</body>
</html>

View File

@@ -9,11 +9,19 @@
<link rel="stylesheet" type="text/css" href="ie7.css"> <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]--> <![endif]-->
<script src="jquery-1.4.2.min.js" type="text/javascript"></script> <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.cycle.lite.1.0.min.js" type="text/javascript"></script> <script src="jquery.cycle.min.js" type="text/javascript"></script>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#screenshots").cycle(); $("#screenshots").cycle({
sync: true,
pager: '#nav',
timeout: 5000,
pagerAnchorBuilder: function(idx, slide) {
return '#nav li:eq(' + idx + ')';
},
pagerEvent: 'mouseover'
});
//Work out what to show for downloads //Work out what to show for downloads
var useragent = navigator.userAgent.toLowerCase(); var useragent = navigator.userAgent.toLowerCase();
@@ -50,6 +58,7 @@
</script> </script>
</head> </head>
<body> <body>
<div id="header" class="bar"> <div id="header" class="bar">
@@ -57,9 +66,8 @@
</div> </div>
<div id="main"> <div id="main">
<div id="menu"> <div id="menu">
<span class="links"><a href="index.html">Home</a></span> <span class="links"><a href="index.html">Home</a></span>
<span class="links">Gameplay Footage</span> <span class="links"><a href="footage.html">Gameplay Footage</a></span>
<span class="links">Mods</span> <span class="links">Mods</span>
<span class="links">Stats</span> <span class="links">Stats</span>
<span class="links"><a href="http://github.com/chrisforbes/OpenRA">Get Involved</a></span> <span class="links"><a href="http://github.com/chrisforbes/OpenRA">Get Involved</a></span>
@@ -108,6 +116,14 @@
<div id="content"> <div id="content">
<h2>Welcome Back, Commander</h2> <h2>Welcome Back, Commander</h2>
<ul id="nav" style="margin: 0; padding: 0">
<li></li>
<li></li>
</ul>
<div id="screenshots" style="clear: left">
<img width="506" src="ss1.jpg" alt="Screenshot 1" />
<img width="506" src="ss2.jpg" alt="Screenshot 2" />
</div>
<p> <p>
OpenRA is an Open Source reimplementation of Command & Conquer: Red Alert. OpenRA is an Open Source reimplementation of Command & Conquer: Red Alert.
</p> </p>
@@ -121,10 +137,6 @@
OpenRA should run on any modern PC running Windows, Mac OS X or Linux. Requires Microsoft .NET Framework v3.5 SP1 or OpenRA should run on any modern PC running Windows, Mac OS X or Linux. Requires Microsoft .NET Framework v3.5 SP1 or
later; or an up-to-date version of Mono. later; or an up-to-date version of Mono.
</p> </p>
<div id="screenshots">
<img width="506" src="ss1.jpg" alt="Screenshot 1" />
<img width="506" src="ss2.jpg" alt="Screenshot 2" />
</div>
</div> </div>
</div> </div>
<div id="footer" class="bar"> <div id="footer" class="bar">

View File

@@ -1 +0,0 @@
(function(D){var A="Lite-1.0";D.fn.cycle=function(E){return this.each(function(){E=E||{};if(this.cycleTimeout){clearTimeout(this.cycleTimeout)}this.cycleTimeout=0;this.cyclePause=0;var I=D(this);var J=E.slideExpr?D(E.slideExpr,this):I.children();var G=J.get();if(G.length<2){if(window.console&&window.console.log){window.console.log("terminating; too few slides: "+G.length)}return }var H=D.extend({},D.fn.cycle.defaults,E||{},D.metadata?I.metadata():D.meta?I.data():{});H.before=H.before?[H.before]:[];H.after=H.after?[H.after]:[];H.after.unshift(function(){H.busy=0});var F=this.className;H.width=parseInt((F.match(/w:(\d+)/)||[])[1])||H.width;H.height=parseInt((F.match(/h:(\d+)/)||[])[1])||H.height;H.timeout=parseInt((F.match(/t:(\d+)/)||[])[1])||H.timeout;if(I.css("position")=="static"){I.css("position","relative")}if(H.width){I.width(H.width)}if(H.height&&H.height!="auto"){I.height(H.height)}var K=0;J.css({position:"absolute",top:0,left:0}).hide().each(function(M){D(this).css("z-index",G.length-M)});D(G[K]).css("opacity",1).show();if(D.browser.msie){G[K].style.removeAttribute("filter")}if(H.fit&&H.width){J.width(H.width)}if(H.fit&&H.height&&H.height!="auto"){J.height(H.height)}if(H.pause){I.hover(function(){this.cyclePause=1},function(){this.cyclePause=0})}D.fn.cycle.transitions.fade(I,J,H);J.each(function(){var M=D(this);this.cycleH=(H.fit&&H.height)?H.height:M.height();this.cycleW=(H.fit&&H.width)?H.width:M.width()});J.not(":eq("+K+")").css({opacity:0});if(H.cssFirst){D(J[K]).css(H.cssFirst)}if(H.timeout){if(H.speed.constructor==String){H.speed={slow:600,fast:200}[H.speed]||400}if(!H.sync){H.speed=H.speed/2}while((H.timeout-H.speed)<250){H.timeout+=H.speed}}H.speedIn=H.speed;H.speedOut=H.speed;H.slideCount=G.length;H.currSlide=K;H.nextSlide=1;var L=J[K];if(H.before.length){H.before[0].apply(L,[L,L,H,true])}if(H.after.length>1){H.after[1].apply(L,[L,L,H,true])}if(H.click&&!H.next){H.next=H.click}if(H.next){D(H.next).bind("click",function(){return C(G,H,H.rev?-1:1)})}if(H.prev){D(H.prev).bind("click",function(){return C(G,H,H.rev?1:-1)})}if(H.timeout){this.cycleTimeout=setTimeout(function(){B(G,H,0,!H.rev)},H.timeout+(H.delay||0))}})};function B(J,E,I,K){if(E.busy){return }var H=J[0].parentNode,M=J[E.currSlide],L=J[E.nextSlide];if(H.cycleTimeout===0&&!I){return }if(I||!H.cyclePause){if(E.before.length){D.each(E.before,function(N,O){O.apply(L,[M,L,E,K])})}var F=function(){if(D.browser.msie){this.style.removeAttribute("filter")}D.each(E.after,function(N,O){O.apply(L,[M,L,E,K])})};if(E.nextSlide!=E.currSlide){E.busy=1;D.fn.cycle.custom(M,L,E,F)}var G=(E.nextSlide+1)==J.length;E.nextSlide=G?0:E.nextSlide+1;E.currSlide=G?J.length-1:E.nextSlide-1}if(E.timeout){H.cycleTimeout=setTimeout(function(){B(J,E,0,!E.rev)},E.timeout)}}function C(E,F,I){var H=E[0].parentNode,G=H.cycleTimeout;if(G){clearTimeout(G);H.cycleTimeout=0}F.nextSlide=F.currSlide+I;if(F.nextSlide<0){F.nextSlide=E.length-1}else{if(F.nextSlide>=E.length){F.nextSlide=0}}B(E,F,1,I>=0);return false}D.fn.cycle.custom=function(K,H,I,E){var J=D(K),G=D(H);G.css({opacity:0});var F=function(){G.animate({opacity:1},I.speedIn,I.easeIn,E)};J.animate({opacity:0},I.speedOut,I.easeOut,function(){J.css({display:"none"});if(!I.sync){F()}});if(I.sync){F()}};D.fn.cycle.transitions={fade:function(F,G,E){G.not(":eq(0)").css("opacity",0);E.before.push(function(){D(this).show()})}};D.fn.cycle.ver=function(){return A};D.fn.cycle.defaults={timeout:4000,speed:1000,next:null,prev:null,before:null,after:null,height:"auto",sync:1,fit:0,pause:0,delay:0,slideExpr:null}})(jQuery)

11
web/jquery.cycle.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@@ -8,7 +8,7 @@ a:visited { color: White }
div#main div#main
{ {
width: 1024px; width: 1024px;
height:768px; /*height:768px;*/
background-image: url("background.png"); background-image: url("background.png");
background-repeat: no-repeat; background-repeat: no-repeat;
margin: 0 auto; margin: 0 auto;
@@ -149,3 +149,20 @@ div.rounded
-webkit-border-radius: 10px; -webkit-border-radius: 10px;
-khtml-border-radius: 10px; -khtml-border-radius: 10px;
} }
#nav li
{
list-style-type: none;
display: block;
height: 15px;
width: 20px;
background-color: white;
margin-right: 10px;
float: left;
cursor: pointer;
}
#nav li.activeSlide
{
background-color: #650b03;
}