website rev 711
new main page with slideshow, latest Tweet and new layout!
| author | Christophe Lincoln <pankso@slitaz.org> |
|---|---|
| date | Thu Jan 06 16:17:33 2011 +0100 (2011-01-06) |
| parents | a480107a2d4a |
| children | 47644e80b0ae |
| files | index.php pics/slideshow/1.png pics/slideshow/2.png pics/slideshow/3.png pics/slideshow/4.png pics/slideshow/5.png scripts/slideshow.js |
line diff
1.1 --- a/index.php Thu Jan 06 15:49:44 2011 +0100 1.2 +++ b/index.php Thu Jan 06 16:17:33 2011 +0100 1.3 @@ -16,13 +16,15 @@ 1.4 <link rel="shortcut icon" href="favicon.ico" /> 1.5 <link rel="stylesheet" type="text/css" href="slitaz.css" /> 1.6 <link rel="alternate" type="application/rss+xml" title="SliTaz Website feed" href="en/rss.xml" /> 1.7 + <link rel="alternate" type="application/atom+xml" title="SliTaz Labs feed" href="http://labs.slitaz.org/news?format=atom" /> 1.8 + <link rel="alternate" type="application/rss+xml" title="SliTaz SCN feed" href="http://scn.slitaz.org/rss.xml" /> 1.9 + <script type="text/javascript" src="scripts/slideshow.js"></script> 1.10 <link rel="Content" href="#content" /> 1.11 </head> 1.12 -<body bgcolor="#ffffff"> 1.13 +<body> 1.14 1.15 <!-- Header --> 1.16 <div id="header"> 1.17 - <a name="top"></a> 1.18 <!-- Logo --> 1.19 <a href="http://www.slitaz.org/"><img id="logo" 1.20 src="pics/website/logo.png" 1.21 @@ -30,79 +32,63 @@ 1.22 <p id="titre">#!/GNU/Linux</p> 1.23 </div> 1.24 1.25 -<!-- Navigation menu --> 1.26 -<div id="nav"> 1.27 +<!-- Content --> 1.28 +<div id="content-full"> 1.29 1.30 -<div class="nav_box"> 1.31 -<h4><img 1.32 - src="pics/website/locale.png" 1.33 - style="vertical-align: middle; width: 20px; height: 20px; padding: 0px 2px 0px 2px;" 1.34 - alt="language" />Language</h4> 1.35 -<div style="width: 50%; position: absolute; right: 0px;"> 1.36 -<ul> 1.37 - <li><a href="id/index.html">Indonesian</a></li> 1.38 - <li><a href="pt/index.html">Português</a></li> 1.39 - <li><a href="cn/index.html" title="Chinese"> 1.40 - <img 1.41 - src="pics/website/cn.png" 1.42 - style="vertical-align: middle;" 1.43 - title="Chinese" alt="cn" /></a></li> 1.44 -</ul> 1.45 -</div> 1.46 -<ul> 1.47 - <li><a href="de/index.html">Deutsch</a></li> 1.48 - <li><a href="en/index.html">English</a></li> 1.49 - <li><a href="es/index.html">Español</a></li> 1.50 - <li><a href="fr/index.html">Français</a></li> 1.51 -</ul> 1.52 +<!-- For the main index with slideshow we keep block_nav and block_top 1.53 + at min-height: 220px; --> 1.54 + 1.55 +<!-- Block begin --> 1.56 +<div class="block"> 1.57 + <!-- Nav block begin --> 1.58 + <div id="block_nav" style="min-height: 220px;"> 1.59 + <h3><img src="pics/website/locale.png" alt="png" />Language</h3> 1.60 + <div class="right_box"> 1.61 + <ul> 1.62 + <li><a href="id/">Indonesian</a></li> 1.63 + <li><a href="pt/">Português</a></li> 1.64 + <li><a href="cn/" title="Chinese"> 1.65 + <img 1.66 + src="pics/website/cn.png" 1.67 + style="vertical-align: middle;" 1.68 + title="Chinese" alt="cn" /></a></li> 1.69 + </ul> 1.70 + </div> 1.71 + <ul> 1.72 + <li><a href="de/">Deutsch</a></li> 1.73 + <li><a href="en/">English</a></li> 1.74 + <li><a href="es/">Español</a></li> 1.75 + <li><a href="fr/">Français</a></li> 1.76 + </ul> 1.77 + <h3>Quick Download</h3> 1.78 + <div class="button"> 1.79 + <a href="http://mirror.slitaz.org/iso/3.0/slitaz-3.0.iso">SliTaz 3.0</a> 1.80 + <a href="http://mirror.slitaz.org/iso/cooking/slitaz-cooking.iso">SliTaz Cooking</a> 1.81 + </div> 1.82 + <!-- Nav block end --> 1.83 + </div> 1.84 + <!-- Top block begin --> 1.85 + <div id="block_top" style="min-height: 220px;"> 1.86 + <h1>Boot baby... boot!</h1> 1.87 + <div id="slideshow"> 1.88 + <img src="pics/slideshow/1.png" alt="Desktop 1.png" /> 1.89 + <img src="pics/slideshow/2.png" alt="Desktop 2.png" /> 1.90 + <img src="pics/slideshow/3.png" alt="Desktop 3.png" /> 1.91 + <img src="pics/slideshow/4.png" alt="Desktop 4.png" /> 1.92 + <img src="pics/slideshow/5.png" alt="Desktop 5.png" /> 1.93 + </div> 1.94 + <!-- Top block end --> 1.95 + </div> 1.96 +<!-- Block end --> 1.97 </div> 1.98 1.99 -<div class="nav_box"> 1.100 -<h4>About SliTaz</h4> 1.101 +<h2>About SliTaz</h2> 1.102 <p> 1.103 SliTaz is an open source and free operating system providing a fully featured 1.104 desktop or server in less than 30 Mb. SliTaz is simple to use, fast and stable. 1.105 We have an active community and <a href="netmap.php">network</a> to provide 1.106 help and get involved. 1.107 </p> 1.108 -</div> 1.109 - 1.110 -<div class="nav_box"> 1.111 -<h4>Quick Download</h4> 1.112 -<ul> 1.113 - <li>Stable Core LiveCD: 1.114 - <a href="http://mirror.slitaz.org/iso/3.0/slitaz-3.0.iso">SliTaz 3.0</a></li> 1.115 - <li>Cooking Core LiveCD: 1.116 - <a href="http://mirror.slitaz.org/iso/cooking/slitaz-cooking.iso">SliTaz 20101104</a></li> 1.117 -</ul> 1.118 -</div> 1.119 - 1.120 -<div class="nav_box"> 1.121 -<h4>SliTaz Network</h4> 1.122 -<ul> 1.123 - <li><a href="netmap.php" title="SliTaz Network Map">Network Map</a></li> 1.124 - <li><a href="http://doc.slitaz.org/">Documentation</a></li> 1.125 - <li><a href="http://forum.slitaz.org/">Support Forum</a></li> 1.126 - <li><a href="http://scn.slitaz.org/">Community Network</a></li> 1.127 - <li><a href="http://labs.slitaz.org/">SliTaz Labs</a></li> 1.128 - <li><a href="http://pkgs.slitaz.org/">Packages</a></li> 1.129 - <li><a href="http://twitter.com/slitaz">SliTaz on Twitter</a></li> 1.130 - <li><a href="http://distrowatch.com/slitaz">SliTaz on DistroWatch</a></li> 1.131 -</ul> 1.132 -</div> 1.133 - 1.134 -</div> 1.135 - 1.136 -<!-- Content --> 1.137 -<div id="content"> 1.138 - 1.139 -<h1>Boot baby... boot!</h1> 1.140 -<div class="imagebox"> 1.141 -<img 1.142 - src="pics/website/desktop.png" 1.143 - title="Desktop" alt="desktop" 1.144 - style="width: 288px; height: 180px;" /> 1.145 -</div> 1.146 1.147 <!-- We just keep the last 4 web site news --> 1.148 <div id="news"> 1.149 @@ -131,6 +117,41 @@ 1.150 title="Chinese" alt="cn" /></a> 1.151 </div> 1.152 1.153 +<h2>Latest Tweet</h2> 1.154 +<div id="twitter"> 1.155 + <script src="http://widgets.twimg.com/j/2/widget.js"></script> 1.156 + <script> 1.157 + new TWTR.Widget({ 1.158 + version: 2, 1.159 + type: 'profile', 1.160 + rpp: 4, 1.161 + interval: 6000, 1.162 + width: '100%', 1.163 + height: 200, 1.164 + theme: { 1.165 + shell: { 1.166 + background: '#eaeaea', 1.167 + color: '#000000' 1.168 + }, 1.169 + tweets: { 1.170 + background: '#ffffff', 1.171 + color: '#000000', 1.172 + links: '#3a4885' 1.173 + } 1.174 + }, 1.175 + features: { 1.176 + scrollbar: false, 1.177 + loop: false, 1.178 + live: false, 1.179 + hashtags: true, 1.180 + timestamp: true, 1.181 + avatars: false, 1.182 + behavior: 'all' 1.183 + } 1.184 + }).render().setUser('slitaz').start(); 1.185 + </script> 1.186 +</div> 1.187 + 1.188 <!-- We display the 5 last commit and build for cooking --> 1.189 1.190 <?php 1.191 @@ -152,27 +173,32 @@ 1.192 <!-- End of content --> 1.193 </div> 1.194 1.195 -<!-- Start of footer and copy notice --> 1.196 -<div id="copy"> 1.197 -<p> 1.198 -Last modification: <?php echo (date( "Y-m-d H:i:s", getlastmod())); ?> - 1.199 -<a href="#top">Top of the page</a> 1.200 -</p> 1.201 -<p> 1.202 -Copyright © <?php echo date('Y'); ?> <a href="http://www.slitaz.org/">SliTaz</a> - 1.203 -<a href="http://www.gnu.org/licenses/gpl.html">GNU General Public License</a> 1.204 -</p> 1.205 -<!-- End of copy --> 1.206 -</div> 1.207 - 1.208 -<!-- Bottom and logo's --> 1.209 -<div id="bottom"> 1.210 -<p> 1.211 -<a href="http://validator.w3.org/check?uri=referer"><img 1.212 - src="pics/website/xhtml10.png" alt="Valid XHTML 1.0" 1.213 - title="Code validé XHTML 1.0" 1.214 - style="width: 80px; height: 15px;" /></a> 1.215 -</p> 1.216 +<!-- Footer --> 1.217 +<div id="footer"> 1.218 + <div class="right_box"> 1.219 + <h4>SliTaz Network</h4> 1.220 + <ul> 1.221 + <li><a href="http://doc.slitaz.org/">Documentation</a></li> 1.222 + <li><a href="http://forum.slitaz.org/">Support Forum</a></li> 1.223 + <li><a href="http://scn.slitaz.org/">Community Network</a></li> 1.224 + <li><a href="http://labs.slitaz.org/">Laboratories</a></li> 1.225 + <li><a href="http://twitter.com/slitaz">SliTaz on Twitter</a></li> 1.226 + <li><a href="http://distrowatch.com/slitaz">SliTaz on DistroWatch</a></li> 1.227 + </ul> 1.228 + </div> 1.229 + <h4>SliTaz Website</h4> 1.230 + <ul> 1.231 + <li><a href="#header">Top of the page</a></li> 1.232 + <li>Copyright © <span class="year"></span> 1.233 + <a href="http://www.slitaz.org/">SliTaz</a></li> 1.234 + <li><a href="about/">About the project</a></li> 1.235 + <li><a href="netmap.php">Network Map</a></li> 1.236 + <li>Page modified the <?php echo (date( "d M Y", getlastmod())); ?></li> 1.237 + <li><a href="http://validator.w3.org/check?uri=referer"><img 1.238 + src="pics/website/xhtml10.png" alt="Valid XHTML 1.0" 1.239 + title="Code validé XHTML 1.0" 1.240 + style="width: 80px; height: 15px; vertical-align: middle;" /></a></li> 1.241 + </ul> 1.242 </div> 1.243 1.244 </body>
2.1 Binary file pics/slideshow/1.png has changed
3.1 Binary file pics/slideshow/2.png has changed
4.1 Binary file pics/slideshow/3.png has changed
5.1 Binary file pics/slideshow/4.png has changed
6.1 Binary file pics/slideshow/5.png has changed
7.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 7.2 +++ b/scripts/slideshow.js Thu Jan 06 16:17:33 2011 +0100 7.3 @@ -0,0 +1,63 @@ 7.4 + 7.5 +window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init); 7.6 + 7.7 +var d=document, imgs = new Array(), zInterval = null, current=0, pause=false; 7.8 + 7.9 +function so_init() 7.10 +{ 7.11 + if(!d.getElementById || !d.createElement)return; 7.12 + 7.13 + css = d.createElement('link'); 7.14 + css.setAttribute('href','slideshow.css'); 7.15 + css.setAttribute('rel','stylesheet'); 7.16 + css.setAttribute('type','text/css'); 7.17 + d.getElementsByTagName('head')[0].appendChild(css); 7.18 + 7.19 + imgs = d.getElementById('slideshow').getElementsByTagName('img'); 7.20 + for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0; 7.21 + imgs[0].style.display = 'block'; 7.22 + imgs[0].xOpacity = .99; 7.23 + 7.24 + setTimeout(so_xfade,4000); 7.25 +} 7.26 + 7.27 +function so_xfade() 7.28 +{ 7.29 + cOpacity = imgs[current].xOpacity; 7.30 + nIndex = imgs[current+1]?current+1:0; 7.31 + nOpacity = imgs[nIndex].xOpacity; 7.32 + 7.33 + cOpacity-=.05; 7.34 + nOpacity+=.05; 7.35 + 7.36 + imgs[nIndex].style.display = 'block'; 7.37 + imgs[current].xOpacity = cOpacity; 7.38 + imgs[nIndex].xOpacity = nOpacity; 7.39 + 7.40 + setOpacity(imgs[current]); 7.41 + setOpacity(imgs[nIndex]); 7.42 + 7.43 + if(cOpacity<=0) 7.44 + { 7.45 + imgs[current].style.display = 'none'; 7.46 + current = nIndex; 7.47 + setTimeout(so_xfade,4000); 7.48 + } 7.49 + else 7.50 + { 7.51 + setTimeout(so_xfade,60); 7.52 + } 7.53 + 7.54 + function setOpacity(obj) 7.55 + { 7.56 + if(obj.xOpacity>.99) 7.57 + { 7.58 + obj.xOpacity = .99; 7.59 + return; 7.60 + } 7.61 + 7.62 + obj.style.opacity = obj.xOpacity; 7.63 + obj.style.MozOpacity = obj.xOpacity; 7.64 + obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')'; 7.65 + } 7.66 +}