GNOME.org
 

[gnome3-web] added video and countdown

commit d7b7a0db1472887c7708c045e6b01be6b2a3e44b
Author: Andreas Nilsson <nisses mail home se>
Date:   Mon Mar 28 13:53:45 2011 +0200

    added video and countdown

 css/gnome3.css   |   16 +++++++++-
 faq.html         |    4 ++-
 img/play.png     |  Bin 0 -> 5107 bytes
 index.html       |   13 +++++++-
 js/countdown.js  |   58 ++++++++++++++++++++++++++++++++++++++
 js/fancyvideo.js |    7 ++++
 js/showvideo.js  |    8 +++++
 src/play.png     |  Bin 0 -> 1564 bytes
 src/play.svg     |   82 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 tryit.html       |    4 ++-
 10 files changed, 186 insertions(+), 6 deletions(-)
---
diff --git a/css/gnome3.css b/css/gnome3.css
index c8d5a55..4e2e1ee 100644
--- a/css/gnome3.css
+++ b/css/gnome3.css
@@ -67,12 +67,18 @@ a.faq {
     text-shadow: 0 2px 15px #000000;
   }
 
-  #splash img {
+  #splash .alpha-banner {
     position: absolute;
     right: 0px;
     top: 0px;
   }
 
+  #splash .play-button {
+    position: absolute;
+    left: 400px;
+    top: 150px;
+  }
+
 .faq-splash {
   background-image: url(../img/search-splash.png) !important;
 }
@@ -104,7 +110,7 @@ ul.navigation {
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
-  margin-top: 50px;
+  margin-top: 39px;
   padding: 10px 0px;
 
 }
@@ -121,3 +127,9 @@ ul.navigation li a {
   text-decoration: none;
   color: #fff;
 }
+
+.countdown {
+  margin-top: -10px;
+  text-align: right;
+  color: gray;
+}
diff --git a/faq.html b/faq.html
index d035088..b863c37 100644
--- a/faq.html
+++ b/faq.html
@@ -9,6 +9,7 @@
 <link rel="stylesheet" href="css/text.css" />
 <link rel="stylesheet" href="css/960.css" />
 <link rel="stylesheet" href="css/gnome3.css" />
+<script src="js/countdown.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 
@@ -19,12 +20,13 @@
   <div class="grid_10 prefix_1">
     <ul class="navigation"><li><a href="index.html">Home</a></li><li><a href="faq.html">Common questions and answers
 </a></li><li><a href="tryit.html">Try it out!</a></li></ul>
+<div class="countdown">Releasing awesome in: <span id="countbox"></span></div>
   </div><!-- grid_12 -->
 </div>
 <div class="container_16">
   <div class="grid_16">
       <div id="splash" class="faq-splash">
-        <img src="img/alpha-banner.png"/>
+        <img class="alpha-banner" src="img/alpha-banner.png"/>
         <h1>Common questions and answers</h1>
       </div>
   </div>
diff --git a/img/play.png b/img/play.png
new file mode 100644
index 0000000..21011c3
Binary files /dev/null and b/img/play.png differ
diff --git a/index.html b/index.html
index 4fd9f64..d0e86dc 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,8 @@
 <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/jquery.fancybox.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/gnome3.js" type="text/javascript" charset="utf-8"></script>
+<script src="js/countdown.js" type="text/javascript" charset="utf-8"></script>
+<script src="js/showvideo.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 
@@ -24,22 +26,29 @@
   <div class="grid_10 prefix_1">
     <ul class="navigation"><li><a href="index.html">Home</a></li><li><a href="faq.html">Common questions and answers
 </a></li><li><a href="tryit.html">Try it out!</a></li></ul>
+<div class="countdown">Releasing awesome in: <span id="countbox"></span></div>
   </div><!-- grid_12 -->
 </div>
 <div class="container_16">
   <div class="grid_16">
       <div id="splash">
-        <img src="img/alpha-banner.png"/>
+        <img class="alpha-banner" src="img/alpha-banner.png"/>
+        <a id="slick-show" href="#"><img class="play-button" src="img/play.png"></a>
         <h1>Introducing the next generation GNOME desktop</h1>
       </div>
+
+<div class="video-splash">
+<iframe title="YouTube video player" width="940" height="405" src="http://www.youtube.com/embed/Ip9Bgjaspjs"; frameborder="0" allowfullscreen></iframe>
+</div>
+
     <p>For GNOME 3, the GNOME Project has started from scratch and created a completely new, modern desktop designed for today's users and technologies. Here are some of the things that you can expect from the new GNOME:</p>
+
   </div>
 </div>
 
 <div class="container_16">
   <div class="grid_6"><a href="img/overview-big.png" rel="fancybox"><img class="screenshot" src="img/overview.png"/></a></div>
   <div class="grid_10">
-
   <h2>Simply beautiful</h2>
 
   <p>GNOME's new desktop takes elegance to a new level. We've swept away the clutter and made a simple and easy-to-use desktop, and we've made this the most beautiful GNOME desktop ever, with a new visual theme, a refined new font and carefully crafted animations.</p>
diff --git a/js/countdown.js b/js/countdown.js
new file mode 100644
index 0000000..5c0137f
--- /dev/null
+++ b/js/countdown.js
@@ -0,0 +1,58 @@
+//######################################################################################
+// Author: ricocheting.com
+// For: public release (freeware)
+// Date: 4/24/2003 (update: 6/26/2009)
+// Description: displays the amount of time until the "dateFuture" entered below.
+
+
+// NOTE: the month entered must be one less than current month. ie; 0=January, 11=December
+// NOTE: the hour is in 24 hour format. 0=12am, 15=3pm etc
+// format: dateFuture = new Date(year,month-1,day,hour,min,sec)
+// example: dateFuture = new Date(2003,03,26,14,15,00) = April 26, 2003 - 2:15:00 pm
+
+dateFuture = new Date(2011,3,06,8,15,31);
+
+// TESTING: comment out the line below to print out the "dateFuture" for testing purposes
+//document.write(dateFuture +"<br />");
+
+
+//###################################
+//nothing beyond this point
+function GetCount(){
+
+	dateNow = new Date();									//grab current date
+	amount = dateFuture.getTime() - dateNow.getTime();		//calc milliseconds between dates
+	delete dateNow;
+
+	// time is already past
+	if(amount < 0){
+		document.getElementById('countbox').innerHTML="Now!";
+	}
+	// date is still good
+	else{
+		days=0;hours=0;mins=0;secs=0;out="";
+
+		amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs
+
+		days=Math.floor(amount/86400);//days
+		amount=amount%86400;
+
+		hours=Math.floor(amount/3600);//hours
+		amount=amount%3600;
+
+		mins=Math.floor(amount/60);//minutes
+		amount=amount%60;
+
+		secs=Math.floor(amount);//seconds
+
+		if(days != 0){out += days +" day"+((days!=1)?"s":"")+", ";}
+		if(days != 0 || hours != 0){out += hours +" hour"+((hours!=1)?"s":"")+", ";}
+		if(days != 0 || hours != 0 || mins != 0){out += mins +" minute"+((mins!=1)?"s":"")+", ";}
+		out += secs +" seconds";
+		document.getElementById('countbox').innerHTML=out;
+
+		setTimeout("GetCount()", 1000);
+	}
+}
+
+window.onload=GetCount;//call when everything has loaded
diff --git a/js/fancyvideo.js b/js/fancyvideo.js
new file mode 100644
index 0000000..3c69124
--- /dev/null
+++ b/js/fancyvideo.js
@@ -0,0 +1,7 @@
+    $(document).ready(function() {
+        $("a[rel=fancyvideo]").fancybox({
+            overlayShow: true,
+            frameWidth:640,
+            frameHeight:360
+        });
+    });
diff --git a/js/showvideo.js b/js/showvideo.js
new file mode 100644
index 0000000..860408d
--- /dev/null
+++ b/js/showvideo.js
@@ -0,0 +1,8 @@
+$(document).ready(function() {
+  $('.video-splash').hide();
+  $('#slick-show').click(function() {
+    $('.video-splash').show();
+    $('#splash').hide();
+    return false;
+  });
+});
diff --git a/src/play.png b/src/play.png
new file mode 100644
index 0000000..3dadb23
Binary files /dev/null and b/src/play.png differ
diff --git a/src/play.svg b/src/play.svg
new file mode 100644
index 0000000..23781a8
--- /dev/null
+++ b/src/play.svg
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/";
+   xmlns:cc="http://creativecommons.org/ns#";
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+   xmlns:svg="http://www.w3.org/2000/svg";
+   xmlns="http://www.w3.org/2000/svg";
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+   width="128"
+   height="128"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.0 r9654"
+   sodipodi:docname="play.svg"
+   inkscape:export-filename="/home/andreas/development/gnome3-web/img/play.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2"
+     inkscape:cx="71.486318"
+     inkscape:cy="98.163869"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:snap-global="true"
+     inkscape:snap-bbox="true"
+     inkscape:snap-nodes="false"
+     inkscape:snap-grids="false"
+     inkscape:window-width="1366"
+     inkscape:window-height="707"
+     inkscape:window-x="0"
+     inkscape:window-y="26"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-924.36215)">
+    <g
+       id="g3791"
+       style="opacity:0.75">
+      <path
+         transform="matrix(1.9578149,0,0,1.9578149,-0.80680538,922.18293)"
+         d="m 63.260803,33.758556 a 30.115173,30.115173 0 1 1 -60.2303465,0 30.115173,30.115173 0 1 1 60.2303465,0 z"
+         sodipodi:ry="30.115173"
+         sodipodi:rx="30.115173"
+         sodipodi:cy="33.758556"
+         sodipodi:cx="33.14563"
+         id="path2985"
+         style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:5.10773515999999983;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         sodipodi:type="arc" />
+      <path
+         inkscape:connector-curvature="0"
+         id="rect2987"
+         d="m 86.760821,988.25379 -39.746493,-26.24067 0,52.52568 39.746493,-26.28501 z"
+         style="color:#000000;fill:#eeeeec;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+    </g>
+  </g>
+</svg>
diff --git a/tryit.html b/tryit.html
index 446b757..4dc5909 100644
--- a/tryit.html
+++ b/tryit.html
@@ -9,6 +9,7 @@
 <link rel="stylesheet" href="css/text.css" />
 <link rel="stylesheet" href="css/960.css" />
 <link rel="stylesheet" href="css/gnome3.css" />
+<script src="js/countdown.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 
@@ -19,12 +20,13 @@
   <div class="grid_10 prefix_1">
     <ul class="navigation"><li><a href="index.html">Home</a></li><li><a href="faq.html">Common questions and answers
 </a></li><li><a href="tryit.html">Try it out!</a></li></ul>
+<div class="countdown">Releasing awesome in: <span id="countbox"></span></div>
   </div><!-- grid_12 -->
 </div>
 <div class="container_16">
   <div class="grid_16">
       <div id="splash" class="getit-splash">
-        <img src="img/alpha-banner.png"/>
+        <img class="alpha-banner" src="img/alpha-banner.png"/>
         <h1>Try out GNOME 3</h1>
       </div>
     <p>GNOME 3 is under active development and will not be completed until April 2011. If you want to try it, you can run a live alpha version from a CD/DVD or USB stick.</p>
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]