Commit 6b77ce81 authored by Ivan Tyagov's avatar Ivan Tyagov

Make sure that through Hijax we can make an AJAX site being indexed well in search engines.

parent 74e7b97c
<!doctype html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<!-- the "no-js" class is for Modernizr. -->
<head id="www-sitename-com" data-template-set="html5-reset">
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="title" content="">
<meta name="description" content="">
<!-- Google will often use this as its description of your page/site. Make it good. -->
<meta name="google-site-verification" content="">
<!-- Speaking of Google, don't forget to set your site up: http://google.com/webmasters -->
<meta name="author" content="Your Name Here">
<meta name="Copyright" content="Copyright Your Name Here 2011. All Rights Reserved.">
<!-- Dublin Core Metadata : http://dublincore.org/ -->
<meta name="DC.title" content="Project Name">
<meta name="DC.subject" content="What you're about.">
<meta name="DC.creator" content="Who made this site.">
<!-- Mobile Viewport Fix
j.mp/mobileviewport & davidbcalhoun.com/2010/viewport-metatag
device-width : Occupy full width of the screen in its current orientation
initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width
-->
<!-- Uncomment to use use thoughtfully!
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
-->
<link rel="shortcut icon" href="_/img/favicon.ico">
<!-- This is the traditional favicon.
- size: 16x16 or 32x32
- transparency is OK
- see wikipedia for info on browser support: http://mky.be/favicon/ -->
<link rel="apple-touch-icon" href="_/img/apple-touch-icon.png">
<!-- The is the icon for iOS's Web Clip.
- size: 57x57 for older iPhones, 72x72 for iPads, 114x114 for iPhone4's retina display (IMHO, just go ahead and use the biggest one)
- To prevent iOS from applying its styles to the icon name it thusly: apple-touch-icon-precomposed.png
- Transparency is not recommended (iOS will put a black BG behind the icon) -->
<!-- CSS: screen, mobile & print are all in the same file -->
<link rel="stylesheet" href="_/css/core.css">
<!-- all our JS is at the bottom of the page, except for Modernizr. -->
<script src="_/js/modernizr-1.7.min.js"></script>
<!--[if IE]><link rel="stylesheet" href="_/css/_patches/win-ie-all.css" media="all" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="_/css/_patches/win-ie7.css" media="all" /><![endif]-->
<!--[if lte IE 6]><script src="_/js/ieupgrade/warning.js"></script><script>window.onload=function(){e("_/js/ieupgrade/")}</script><![endif]-->
</head>
<body>
<div id="meta">
<div class="inner">
<ol id="languageselector">
<li>language:</li>
<li><a href="#">english</a>&nbsp;|&nbsp;</li>
<li><a href="#">francais</a>&nbsp;|&nbsp;</li>
<li><a href="#">nederland</a></li>
</ol>
<ol id="cart">
<li class="meta-1"><a href="#">my account</a></li>
<li class="meta-2"><a href="#"><img src="img/icon-cart.gif" alt="icon-cart" width="17" height="14" /> 22</a></li>
<li class="meta-3"><a href="#">view cart &raquo;</a></li>
</ol>
</div>
</div>
<div class="wrapper">
<header>
<h1><a href="/"><img src="img/logo.gif" alt="Default Online Shop"></a></h1>
<nav>
<ol>
<li><a href="">Brands</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Customer Service</a></li>
<li><a href="">User Page 1</a></li>
</ol>
</nav>
</header>
<div id="content">
<div class="sidebar">
<ol>
<li><h3>Filter by type</h3>
<ol>
<li class="selected">
<a href="laptop-productdetail.html#!"
onclick="updateProduct('ecommerce/pc/laptop/thinkpadT400/index.json'); return false">Laptop Thinkpad T400</a></li>
<li><a href="android-productdetail.html#!"
onclick="updateProduct('ecommerce/phone/android/nexus/index.json'); return false">Phone Andoid Nexus</a></li>
<li><a href="iphone4s-productdetail.html#!"
onclick="updateProduct('ecommerce/phone/ios/iphone4s/index.json'); return false">IPhone4s</a></li>
</ol>
</li>
<li><h3>Filter by Brand</h3>
<ol>
<li class="selected"><a href="#">Acuvue (12)</a></li>
<li><a href="#">Air Optix (1)</a></li>
<li><a href="#">Biofinity (34)</a></li>
<li><a href="#">Biomedics (2)</a></li>
<li><a href="#">Focus (3)</a></li>
<li><a href="#">Frequency (5)</a></li>
<li><a href="#">FreshLook (4)</a></li>
<li><a href="#">Proclear (5)</a></li>
<li><a href="#">PureVision (3)</a></li>
<li><a href="#">SofLens (3)</a></li>
</ol>
</li>
<li><h3>Filter by Color</h3>
<ol>
<li><a href="#">Red (1)</a></li>
<li><a href="#">Pink (12)</a></li>
<li><a href="#">Blue (21)</a></li>
<li><a href="#">Black (3)</a></li>
<li><a href="#">Grey (3)</a></li>
<li><a href="#">Ebony (5)</a></li>
<li><a href="#">White (1)</a></li>
<li><a href="#">Silver (5)</a></li>
<li><a href="#">Transparent (1)</a></li>
<li><a href="#">Invisible (0)</a></li>
</ol>
</li>
<li><h3>Filter by Manufacturer</h3>
<ol>
<li><a href="#">Siemens (23)</a></li>
<li><a href="#">Bosch (34)</a></li>
<li><a href="#">Unilever (2)</a></li>
<li><a href="#">Philips (2)</a></li>
<li><a href="#">Sony (0)</a></li>
<li><a href="#">Nintendo (2)</a></li>
<li><a href="#">Apple (4)</a></li>
<li><a href="#">Honda (1)</a></li>
</ol>
</li>
<li class="tags"><h3>Tags</h3>
<ol>
<li>
<a href="#" class="tc-1">Full</a>
<a href="#" class="tc-2">Product List</a>
<a href="#" class="tc-3">Weekly</a>
<a href="#" class="tc-4">Disposables</a>
<a href="#" class="tc-5">Tables</a>
<a href="#" class="tc-6">Toric</a>
<a href="#" class="tc-7">Lenses</a>
<a href="#" class="tc-8">Store</a>
<a href="#" class="tc-9">Brands</a>
<a href="#" class="tc-10">Accessories</a></li>
</ol>
</li>
</ol>
</div>
<div class="feed">
<ul class="breadcrumb">
<li><a href="#">home</a></li>
<li><a href="#">path</a></li>
<li><a href="#">to</a></li>
<li>page</li>
</ul>
<br>
<article class="productdetail">
<h3>Nexus phone (spider mode)</h3>
<div class="product-gallery tabber">
<ul>
<li><a href="#pic-1"><img src="img/product-dummy-small-1.jpg"></a></li>
<li><a href="#pic-2"><img src="img/product-dummy-small-2.jpg"></a></li>
</ul>
<div id="pic-1">
<a href="#">
<img src="img/product-dummy-large.jpg">
<strong>Zoom</strong>
</a>
</div>
<div id="pic-2">
<a href="#">
<img src="img/product-dummy-large.jpg">
<strong>Zoom</strong>
</a>
</div>
</div>
<div class="product-action">
<form action="#" method="post">
<ol>
<li>Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. </li>
<li><a href="#" class="more">more details &raquo;</a></li>
<li class="swatches">
select a color:
<ul>
<li><a href="#"><img src="img/swatch-1.jpg"></a></li>
<li><a href="#"><img src="img/swatch-2.jpg"></a></li>
<li><a href="#"><img src="img/swatch-3.jpg"></a></li>
</ul>
</li>
<li>
<strong class="price">299,99 &euro;</strong>
<span class="old">499,99 &euro;</span>
</li>
<li>
<label for="select-option-1">Option1:</label>
<select name="option-1" id="select-option-1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</li>
<li>
<label for="select-option-2">Option2:</label>
<select name="option-2" id="select-option-2">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</li>
<li>
<label for="input-amount">Amount:</label>
<input type="text" name="amount" id="input-amount" value="1">
</li>
<li class="availability">
<label>Availability:</label>
<strong class="ok">In Stock</strong>
<!--<strong class="no">Out of Stock</strong>//-->
</li>
<li>
<button type="submit">Add to Cart</button>
</li>
</ol>
</form>
</div>
<ul class="tools">
<li><a href="#">zoom </a></li>
<li class="last"><a href="#">print this page</a></li>
</ul>
</article>
<article class="product-description">
<div class="tabber">
<ul>
<li><a href="#desc-1">Description</a></li>
<li class="current"><a href="#desc-2">Technical Details</a></li>
</ul>
<div id="desc-1">
<p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas elementum augue nec nisl. Proin auctor lorem at nibh. Curabitur nulla purus, feugiat id, elementum in, lobortis quis, pede. Vivamus sodales adipiscing sapien. Vestibulum posuere nulla eget wisi. Integer volutpat ligula eget enim. Suspendisse vitae arcu. Quisque pellentesque. Nullam consequat, sem vitae rhoncus tristique, mauris nulla fermentum est, bibendum ullamcorper sapien magna et quam. Sed dapibus vehicula odio. Proin bibendum gravida nisl. Fusce lorem. Phasellus sagittis, nulla in hendrerit laoreet, libero lacus feugiat urna, eget hendrerit pede magna vitae lorem. Praesent mauris.</p>
</div>
<div id="desc-2">
<p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas elementum augue nec nisl. Proin auctor lorem at nibh. Curabitur nulla purus, feugiat id, elementum in, lobortis quis, pede. Vivamus sodales adipiscing sapien. Vestibulum posuere nulla eget wisi. Integer volutpat ligula eget enim. Suspendisse vitae arcu. Quisque pellentesque. Nullam consequat, sem vitae rhoncus tristique, mauris nulla fermentum est, bibendum ullamcorper sapien magna et quam. Sed dapibus vehicula odio. Proin bibendum gravida nisl. Fusce lorem. Phasellus sagittis, nulla in hendrerit laoreet, libero lacus feugiat urna, eget hendrerit pede magna vitae lorem. Praesent mauris.</p>
</div>
</div>
</article>
</div>
<div class="secondary">
<ol>
<li>
<form action="#" method="get">
<fieldset id="fieldset-quicksearch">
<ol>
<li>
<input type="text" name="q" id="input-quicksearch" value="Search Product">
<button type="submit">Go</button>
</li>
</ol>
</fieldset>
</form>
</li>
<li>
<a href="#"><img src="img/teaser-contact.jpg" alt="teaser-contact" width="170" height="82" /></a>
</li>
<li class="info">
<h4>Further Information</h4>
<ol>
<li><a href="#">Terms and Conditions</a></li>
<li><a href="#">Shipping</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Payment Options</a></li>
</ol>
</li>
<li>
<a href="#"><img src="img/teaser-small-dummy.jpg"></a>
</li>
</ol>
</div>
</div>
<footer>
<p><small>Copyright &copy; 2011</p>
<ul>
<li><a href="#">YourCompany.com</a>&nbsp;|&nbsp;</li>
<li><a href="#">About Us</a>&nbsp;|&nbsp;</li>
<li><a href="#">Shipping</a>&nbsp;|&nbsp;</li>
<li><a href="#">Terms and Conditions</a>&nbsp;|&nbsp;</li>
<li><a href="#">Contact Us</a></li>
</ul>
</footer>
</div>
<!-- here comes the javascript -->
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write("<script src='_/js/jquery-1.5.1.min.js'>\x3C/script>")</script>
<script src="_/js/jquery-ui/js/jquery-ui-1.8.13.custom.min.js"></script>
<!-- this is where we put our custom functions -->
<script src="_/js/functions.js"></script>
<!-- Asynchronous google analytics; this is the official snippet.
Replace UA-XXXXXX-XX with your site's ID and uncomment to enable.
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXX-XX']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
-->
</body>
</html>
\ No newline at end of file
<!doctype html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<!-- the "no-js" class is for Modernizr. -->
<head id="www-sitename-com" data-template-set="html5-reset">
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="title" content="">
<meta name="description" content="">
<!-- Google will often use this as its description of your page/site. Make it good. -->
<meta name="google-site-verification" content="">
<!-- Speaking of Google, don't forget to set your site up: http://google.com/webmasters -->
<meta name="author" content="Your Name Here">
<meta name="Copyright" content="Copyright Your Name Here 2011. All Rights Reserved.">
<!-- Dublin Core Metadata : http://dublincore.org/ -->
<meta name="DC.title" content="Project Name">
<meta name="DC.subject" content="What you're about.">
<meta name="DC.creator" content="Who made this site.">
<!-- Mobile Viewport Fix
j.mp/mobileviewport & davidbcalhoun.com/2010/viewport-metatag
device-width : Occupy full width of the screen in its current orientation
initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width
-->
<!-- Uncomment to use use thoughtfully!
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
-->
<link rel="shortcut icon" href="_/img/favicon.ico">
<!-- This is the traditional favicon.
- size: 16x16 or 32x32
- transparency is OK
- see wikipedia for info on browser support: http://mky.be/favicon/ -->
<link rel="apple-touch-icon" href="_/img/apple-touch-icon.png">
<!-- The is the icon for iOS's Web Clip.
- size: 57x57 for older iPhones, 72x72 for iPads, 114x114 for iPhone4's retina display (IMHO, just go ahead and use the biggest one)
- To prevent iOS from applying its styles to the icon name it thusly: apple-touch-icon-precomposed.png
- Transparency is not recommended (iOS will put a black BG behind the icon) -->
<!-- CSS: screen, mobile & print are all in the same file -->
<link rel="stylesheet" href="_/css/core.css">
<!-- all our JS is at the bottom of the page, except for Modernizr. -->
<script src="_/js/modernizr-1.7.min.js"></script>
<!--[if IE]><link rel="stylesheet" href="_/css/_patches/win-ie-all.css" media="all" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="_/css/_patches/win-ie7.css" media="all" /><![endif]-->
<!--[if lte IE 6]><script src="_/js/ieupgrade/warning.js"></script><script>window.onload=function(){e("_/js/ieupgrade/")}</script><![endif]-->
</head>
<body>
<div id="meta">
<div class="inner">
<ol id="languageselector">
<li>language:</li>
<li><a href="#">english</a>&nbsp;|&nbsp;</li>
<li><a href="#">francais</a>&nbsp;|&nbsp;</li>
<li><a href="#">nederland</a></li>
</ol>
<ol id="cart">
<li class="meta-1"><a href="#">my account</a></li>
<li class="meta-2"><a href="#"><img src="img/icon-cart.gif" alt="icon-cart" width="17" height="14" /> 22</a></li>
<li class="meta-3"><a href="#">view cart &raquo;</a></li>
</ol>
</div>
</div>
<div class="wrapper">
<header>
<h1><a href="/"><img src="img/logo.gif" alt="Default Online Shop"></a></h1>
<nav>
<ol>
<li><a href="">Brands</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Customer Service</a></li>
<li><a href="">User Page 1</a></li>
</ol>
</nav>
</header>
<div id="content">
<div class="sidebar">
<ol>
<li><h3>Filter by type</h3>
<ol>
<li class="selected">
<a href="laptop-productdetail.html#!"
onclick="updateProduct('ecommerce/pc/laptop/thinkpadT400/index.json'); return false">Laptop Thinkpad T400</a></li>
<li><a href="android-productdetail.html#!"
onclick="updateProduct('ecommerce/phone/android/nexus/index.json'); return false">Phone Andoid Nexus</a></li>
<li><a href="iphone4s-productdetail.html#!"
onclick="updateProduct('ecommerce/phone/ios/iphone4s/index.json'); return false">IPhone4s</a></li>
</ol>
</li>
<li><h3>Filter by Brand</h3>
<ol>
<li class="selected"><a href="#">Acuvue (12)</a></li>
<li><a href="#">Air Optix (1)</a></li>
<li><a href="#">Biofinity (34)</a></li>
<li><a href="#">Biomedics (2)</a></li>
<li><a href="#">Focus (3)</a></li>
<li><a href="#">Frequency (5)</a></li>
<li><a href="#">FreshLook (4)</a></li>
<li><a href="#">Proclear (5)</a></li>
<li><a href="#">PureVision (3)</a></li>
<li><a href="#">SofLens (3)</a></li>
</ol>
</li>
<li><h3>Filter by Color</h3>
<ol>
<li><a href="#">Red (1)</a></li>
<li><a href="#">Pink (12)</a></li>
<li><a href="#">Blue (21)</a></li>
<li><a href="#">Black (3)</a></li>
<li><a href="#">Grey (3)</a></li>
<li><a href="#">Ebony (5)</a></li>
<li><a href="#">White (1)</a></li>
<li><a href="#">Silver (5)</a></li>
<li><a href="#">Transparent (1)</a></li>
<li><a href="#">Invisible (0)</a></li>
</ol>
</li>
<li><h3>Filter by Manufacturer</h3>
<ol>
<li><a href="#">Siemens (23)</a></li>
<li><a href="#">Bosch (34)</a></li>
<li><a href="#">Unilever (2)</a></li>
<li><a href="#">Philips (2)</a></li>
<li><a href="#">Sony (0)</a></li>
<li><a href="#">Nintendo (2)</a></li>
<li><a href="#">Apple (4)</a></li>
<li><a href="#">Honda (1)</a></li>
</ol>
</li>
<li class="tags"><h3>Tags</h3>
<ol>
<li>
<a href="#" class="tc-1">Full</a>
<a href="#" class="tc-2">Product List</a>
<a href="#" class="tc-3">Weekly</a>
<a href="#" class="tc-4">Disposables</a>
<a href="#" class="tc-5">Tables</a>
<a href="#" class="tc-6">Toric</a>
<a href="#" class="tc-7">Lenses</a>
<a href="#" class="tc-8">Store</a>
<a href="#" class="tc-9">Brands</a>
<a href="#" class="tc-10">Accessories</a></li>
</ol>
</li>
</ol>
</div>
<div class="feed">
<ul class="breadcrumb">
<li><a href="#">home</a></li>
<li><a href="#">path</a></li>
<li><a href="#">to</a></li>
<li>page</li>
</ul>
<br>
<article class="productdetail">
<h3>Iphone4s (spider mode)</h3>
<div class="product-gallery tabber">
<ul>
<li><a href="#pic-1"><img src="img/product-dummy-small-1.jpg"></a></li>
<li><a href="#pic-2"><img src="img/product-dummy-small-2.jpg"></a></li>
</ul>
<div id="pic-1">
<a href="#">
<img src="img/product-dummy-large.jpg">
<strong>Zoom</strong>
</a>
</div>
<div id="pic-2">
<a href="#">
<img src="img/product-dummy-large.jpg">
<strong>Zoom</strong>
</a>
</div>
</div>
<div class="product-action">
<form action="#" method="post">
<ol>
<li>Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. </li>
<li><a href="#" class="more">more details &raquo;</a></li>
<li class="swatches">
select a color:
<ul>
<li><a href="#"><img src="img/swatch-1.jpg"></a></li>
<li><a href="#"><img src="img/swatch-2.jpg"></a></li>
<li><a href="#"><img src="img/swatch-3.jpg"></a></li>
</ul>
</li>
<li>
<strong class="price">299,99 &euro;</strong>
<span class="old">499,99 &euro;</span>
</li>
<li>
<label for="select-option-1">Option1:</label>
<select name="option-1" id="select-option-1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</li>
<li>
<label for="select-option-2">Option2:</label>
<select name="option-2" id="select-option-2">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</li>
<li>
<label for="input-amount">Amount:</label>
<input type="text" name="amount" id="input-amount" value="1">
</li>
<li class="availability">
<label>Availability:</label>
<strong class="ok">In Stock</strong>
<!--<strong class="no">Out of Stock</strong>//-->
</li>
<li>
<button type="submit">Add to Cart</button>
</li>
</ol>
</form>
</div>
<ul class="tools">
<li><a href="#">zoom </a></li>
<li class="last"><a href="#">print this page</a></li>
</ul>
</article>
<article class="product-description">
<div class="tabber">
<ul>
<li><a href="#desc-1">Description</a></li>
<li class="current"><a href="#desc-2">Technical Details</a></li>
</ul>
<div id="desc-1">
<p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas elementum augue nec nisl. Proin auctor lorem at nibh. Curabitur nulla purus, feugiat id, elementum in, lobortis quis, pede. Vivamus sodales adipiscing sapien. Vestibulum posuere nulla eget wisi. Integer volutpat ligula eget enim. Suspendisse vitae arcu. Quisque pellentesque. Nullam consequat, sem vitae rhoncus tristique, mauris nulla fermentum est, bibendum ullamcorper sapien magna et quam. Sed dapibus vehicula odio. Proin bibendum gravida nisl. Fusce lorem. Phasellus sagittis, nulla in hendrerit laoreet, libero lacus feugiat urna, eget hendrerit pede magna vitae lorem. Praesent mauris.</p>
</div>
<div id="desc-2">
<p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas elementum augue nec nisl. Proin auctor lorem at nibh. Curabitur nulla purus, feugiat id, elementum in, lobortis quis, pede. Vivamus sodales adipiscing sapien. Vestibulum posuere nulla eget wisi. Integer volutpat ligula eget enim. Suspendisse vitae arcu. Quisque pellentesque. Nullam consequat, sem vitae rhoncus tristique, mauris nulla fermentum est, bibendum ullamcorper sapien magna et quam. Sed dapibus vehicula odio. Proin bibendum gravida nisl. Fusce lorem. Phasellus sagittis, nulla in hendrerit laoreet, libero lacus feugiat urna, eget hendrerit pede magna vitae lorem. Praesent mauris.</p>
</div>
</div>
</article>
</div>
<div class="secondary">
<ol>
<li>
<form action="#" method="get">
<fieldset id="fieldset-quicksearch">
<ol>
<li>
<input type="text" name="q" id="input-quicksearch" value="Search Product">
<button type="submit">Go</button>
</li>
</ol>
</fieldset>
</form>
</li>
<li>
<a href="#"><img src="img/teaser-contact.jpg" alt="teaser-contact" width="170" height="82" /></a>
</li>
<li class="info">
<h4>Further Information</h4>
<ol>
<li><a href="#">Terms and Conditions</a></li>
<li><a href="#">Shipping</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Payment Options</a></li>
</ol>
</li>
<li>
<a href="#"><img src="img/teaser-small-dummy.jpg"></a>
</li>
</ol>
</div>
</div>
<footer>
<p><small>Copyright &copy; 2011</p>
<ul>
<li><a href="#">YourCompany.com</a>&nbsp;|&nbsp;</li>
<li><a href="#">About Us</a>&nbsp;|&nbsp;</li>
<li><a href="#">Shipping</a>&nbsp;|&nbsp;</li>
<li><a href="#">Terms and Conditions</a>&nbsp;|&nbsp;</li>
<li><a href="#">Contact Us</a></li>
</ul>
</footer>
</div>
<!-- here comes the javascript -->
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write("<script src='_/js/jquery-1.5.1.min.js'>\x3C/script>")</script>
<script src="_/js/jquery-ui/js/jquery-ui-1.8.13.custom.min.js"></script>
<!-- this is where we put our custom functions -->
<script src="_/js/functions.js"></script>
<!-- Asynchronous google analytics; this is the official snippet.
Replace UA-XXXXXX-XX with your site's ID and uncomment to enable.
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXX-XX']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
-->
</body>
</html>
\ No newline at end of file
<!doctype html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<!-- the "no-js" class is for Modernizr. -->
<head id="www-sitename-com" data-template-set="html5-reset">
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="title" content="">
<meta name="description" content="">
<!-- Google will often use this as its description of your page/site. Make it good. -->
<meta name="google-site-verification" content="">
<!-- Speaking of Google, don't forget to set your site up: http://google.com/webmasters -->
<meta name="author" content="Your Name Here">
<meta name="Copyright" content="Copyright Your Name Here 2011. All Rights Reserved.">
<!-- Dublin Core Metadata : http://dublincore.org/ -->
<meta name="DC.title" content="Project Name">
<meta name="DC.subject" content="What you're about.">
<meta name="DC.creator" content="Who made this site.">
<!-- Mobile Viewport Fix
j.mp/mobileviewport & davidbcalhoun.com/2010/viewport-metatag
device-width : Occupy full width of the screen in its current orientation
initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width
-->
<!-- Uncomment to use use thoughtfully!
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
-->
<link rel="shortcut icon" href="_/img/favicon.ico">
<!-- This is the traditional favicon.
- size: 16x16 or 32x32
- transparency is OK
- see wikipedia for info on browser support: http://mky.be/favicon/ -->
<link rel="apple-touch-icon" href="_/img/apple-touch-icon.png">
<!-- The is the icon for iOS's Web Clip.
- size: 57x57 for older iPhones, 72x72 for iPads, 114x114 for iPhone4's retina display (IMHO, just go ahead and use the biggest one)
- To prevent iOS from applying its styles to the icon name it thusly: apple-touch-icon-precomposed.png
- Transparency is not recommended (iOS will put a black BG behind the icon) -->
<!-- CSS: screen, mobile & print are all in the same file -->
<link rel="stylesheet" href="_/css/core.css">
<!-- all our JS is at the bottom of the page, except for Modernizr. -->
<script src="_/js/modernizr-1.7.min.js"></script>
<!--[if IE]><link rel="stylesheet" href="_/css/_patches/win-ie-all.css" media="all" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="_/css/_patches/win-ie7.css" media="all" /><![endif]-->
<!--[if lte IE 6]><script src="_/js/ieupgrade/warning.js"></script><script>window.onload=function(){e("_/js/ieupgrade/")}</script><![endif]-->
</head>
<body>
<div id="meta">
<div class="inner">
<ol id="languageselector">
<li>language:</li>
<li><a href="#">english</a>&nbsp;|&nbsp;</li>
<li><a href="#">francais</a>&nbsp;|&nbsp;</li>
<li><a href="#">nederland</a></li>
</ol>
<ol id="cart">
<li class="meta-1"><a href="#">my account</a></li>
<li class="meta-2"><a href="#"><img src="img/icon-cart.gif" alt="icon-cart" width="17" height="14" /> 22</a></li>
<li class="meta-3"><a href="#">view cart &raquo;</a></li>
</ol>
</div>
</div>
<div class="wrapper">
<header>
<h1><a href="/"><img src="img/logo.gif" alt="Default Online Shop"></a></h1>
<nav>
<ol>
<li><a href="">Brands</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Customer Service</a></li>
<li><a href="">User Page 1</a></li>
</ol>
</nav>
</header>
<div id="content">
<div class="sidebar">
<ol>
<li><h3>Filter by type</h3>
<ol>
<li class="selected">
<a href="laptop-productdetail.html#!"
onclick="updateProduct('ecommerce/pc/laptop/thinkpadT400/index.json'); return false">Laptop Thinkpad T400</a></li>
<li><a href="android-productdetail.html#!"
onclick="updateProduct('ecommerce/phone/android/nexus/index.json'); return false">Phone Andoid Nexus</a></li>
<li><a href="iphone4s-productdetail.html#!"
onclick="updateProduct('ecommerce/phone/ios/iphone4s/index.json'); return false">IPhone4s</a></li>
</ol>
</li>
<li><h3>Filter by Brand</h3>
<ol>
<li class="selected"><a href="#">Acuvue (12)</a></li>
<li><a href="#">Air Optix (1)</a></li>
<li><a href="#">Biofinity (34)</a></li>
<li><a href="#">Biomedics (2)</a></li>
<li><a href="#">Focus (3)</a></li>
<li><a href="#">Frequency (5)</a></li>
<li><a href="#">FreshLook (4)</a></li>
<li><a href="#">Proclear (5)</a></li>
<li><a href="#">PureVision (3)</a></li>
<li><a href="#">SofLens (3)</a></li>
</ol>
</li>
<li><h3>Filter by Color</h3>
<ol>
<li><a href="#">Red (1)</a></li>
<li><a href="#">Pink (12)</a></li>
<li><a href="#">Blue (21)</a></li>
<li><a href="#">Black (3)</a></li>
<li><a href="#">Grey (3)</a></li>
<li><a href="#">Ebony (5)</a></li>
<li><a href="#">White (1)</a></li>
<li><a href="#">Silver (5)</a></li>
<li><a href="#">Transparent (1)</a></li>
<li><a href="#">Invisible (0)</a></li>
</ol>
</li>
<li><h3>Filter by Manufacturer</h3>
<ol>
<li><a href="#">Siemens (23)</a></li>
<li><a href="#">Bosch (34)</a></li>
<li><a href="#">Unilever (2)</a></li>
<li><a href="#">Philips (2)</a></li>
<li><a href="#">Sony (0)</a></li>
<li><a href="#">Nintendo (2)</a></li>
<li><a href="#">Apple (4)</a></li>
<li><a href="#">Honda (1)</a></li>
</ol>
</li>
<li class="tags"><h3>Tags</h3>
<ol>
<li>
<a href="#" class="tc-1">Full</a>
<a href="#" class="tc-2">Product List</a>
<a href="#" class="tc-3">Weekly</a>
<a href="#" class="tc-4">Disposables</a>
<a href="#" class="tc-5">Tables</a>
<a href="#" class="tc-6">Toric</a>
<a href="#" class="tc-7">Lenses</a>
<a href="#" class="tc-8">Store</a>
<a href="#" class="tc-9">Brands</a>
<a href="#" class="tc-10">Accessories</a></li>
</ol>
</li>
</ol>
</div>
<div class="feed">
<ul class="breadcrumb">
<li><a href="#">home</a></li>
<li><a href="#">path</a></li>
<li><a href="#">to</a></li>
<li>page</li>
</ul>
<br>
<article class="productdetail">
<h3>Laptop (spider mode)</h3>
<div class="product-gallery tabber">
<ul>
<li><a href="#pic-1"><img src="img/product-dummy-small-1.jpg"></a></li>
<li><a href="#pic-2"><img src="img/product-dummy-small-2.jpg"></a></li>
</ul>
<div id="pic-1">
<a href="#">
<img src="img/product-dummy-large.jpg">
<strong>Zoom</strong>
</a>
</div>
<div id="pic-2">
<a href="#">
<img src="img/product-dummy-large.jpg">
<strong>Zoom</strong>
</a>
</div>
</div>
<div class="product-action">
<form action="#" method="post">
<ol>
<li>Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. </li>
<li><a href="#" class="more">more details &raquo;</a></li>
<li class="swatches">
select a color:
<ul>
<li><a href="#"><img src="img/swatch-1.jpg"></a></li>
<li><a href="#"><img src="img/swatch-2.jpg"></a></li>
<li><a href="#"><img src="img/swatch-3.jpg"></a></li>
</ul>
</li>
<li>
<strong class="price">299,99 &euro;</strong>
<span class="old">499,99 &euro;</span>
</li>
<li>
<label for="select-option-1">Option1:</label>
<select name="option-1" id="select-option-1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</li>
<li>
<label for="select-option-2">Option2:</label>
<select name="option-2" id="select-option-2">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</li>
<li>
<label for="input-amount">Amount:</label>
<input type="text" name="amount" id="input-amount" value="1">
</li>
<li class="availability">
<label>Availability:</label>
<strong class="ok">In Stock</strong>
<!--<strong class="no">Out of Stock</strong>//-->
</li>
<li>
<button type="submit">Add to Cart</button>
</li>
</ol>
</form>
</div>
<ul class="tools">
<li><a href="#">zoom </a></li>
<li class="last"><a href="#">print this page</a></li>
</ul>
</article>
<article class="product-description">
<div class="tabber">
<ul>
<li><a href="#desc-1">Description</a></li>
<li class="current"><a href="#desc-2">Technical Details</a></li>
</ul>
<div id="desc-1">
<p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas elementum augue nec nisl. Proin auctor lorem at nibh. Curabitur nulla purus, feugiat id, elementum in, lobortis quis, pede. Vivamus sodales adipiscing sapien. Vestibulum posuere nulla eget wisi. Integer volutpat ligula eget enim. Suspendisse vitae arcu. Quisque pellentesque. Nullam consequat, sem vitae rhoncus tristique, mauris nulla fermentum est, bibendum ullamcorper sapien magna et quam. Sed dapibus vehicula odio. Proin bibendum gravida nisl. Fusce lorem. Phasellus sagittis, nulla in hendrerit laoreet, libero lacus feugiat urna, eget hendrerit pede magna vitae lorem. Praesent mauris.</p>
</div>
<div id="desc-2">
<p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas elementum augue nec nisl. Proin auctor lorem at nibh. Curabitur nulla purus, feugiat id, elementum in, lobortis quis, pede. Vivamus sodales adipiscing sapien. Vestibulum posuere nulla eget wisi. Integer volutpat ligula eget enim. Suspendisse vitae arcu. Quisque pellentesque. Nullam consequat, sem vitae rhoncus tristique, mauris nulla fermentum est, bibendum ullamcorper sapien magna et quam. Sed dapibus vehicula odio. Proin bibendum gravida nisl. Fusce lorem. Phasellus sagittis, nulla in hendrerit laoreet, libero lacus feugiat urna, eget hendrerit pede magna vitae lorem. Praesent mauris.</p>
</div>
</div>
</article>
</div>
<div class="secondary">
<ol>
<li>
<form action="#" method="get">
<fieldset id="fieldset-quicksearch">
<ol>
<li>
<input type="text" name="q" id="input-quicksearch" value="Search Product">
<button type="submit">Go</button>
</li>
</ol>
</fieldset>
</form>
</li>
<li>
<a href="#"><img src="img/teaser-contact.jpg" alt="teaser-contact" width="170" height="82" /></a>
</li>
<li class="info">
<h4>Further Information</h4>
<ol>
<li><a href="#">Terms and Conditions</a></li>
<li><a href="#">Shipping</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Payment Options</a></li>
</ol>
</li>
<li>
<a href="#"><img src="img/teaser-small-dummy.jpg"></a>
</li>
</ol>
</div>
</div>
<footer>
<p><small>Copyright &copy; 2011</p>
<ul>
<li><a href="#">YourCompany.com</a>&nbsp;|&nbsp;</li>
<li><a href="#">About Us</a>&nbsp;|&nbsp;</li>
<li><a href="#">Shipping</a>&nbsp;|&nbsp;</li>
<li><a href="#">Terms and Conditions</a>&nbsp;|&nbsp;</li>
<li><a href="#">Contact Us</a></li>
</ul>
</footer>
</div>
<!-- here comes the javascript -->
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write("<script src='_/js/jquery-1.5.1.min.js'>\x3C/script>")</script>
<script src="_/js/jquery-ui/js/jquery-ui-1.8.13.custom.min.js"></script>
<!-- this is where we put our custom functions -->
<script src="_/js/functions.js"></script>
<!-- Asynchronous google analytics; this is the official snippet.
Replace UA-XXXXXX-XX with your site's ID and uncomment to enable.
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXX-XX']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
-->
</body>
</html>
\ No newline at end of file
......@@ -3,12 +3,13 @@
<ol>
<li><h3>Filter by type</h3>
<ol>
<li class="selected"><a href="#"
onclick="updateProduct('ecommerce/pc/laptop/thinkpadT400/index.json')">Laptop Thinkpad T400</a></li>
<li><a href="#"
onclick="updateProduct('ecommerce/phone/android/nexus/index.json')">Phone Andoid Nexus</a></li>
<li><a href="#"
onclick="updateProduct('ecommerce/phone/ios/iphone4s/index.json')">IPhone4s</a></li>
<li class="selected">
<a href="laptop-productdetail.html#!"
onclick="updateProduct('ecommerce/pc/laptop/thinkpadT400/index.json'); return false">Laptop Thinkpad T400</a></li>
<li><a href="android-productdetail.html#!"
onclick="updateProduct('ecommerce/phone/android/nexus/index.json'); return false">Phone Andoid Nexus</a></li>
<li><a href="iphone4s-productdetail.html#!"
onclick="updateProduct('ecommerce/phone/ios/iphone4s/index.json'); return false">IPhone4s</a></li>
</ol>
</li>
......
......@@ -103,7 +103,6 @@
<li><a href="">About Us</a></li>
<li><a href="">Customer Service</a></li>
<li><a href="">User Page 1</a></li>
<li><a href="">User Page 2</a></li>
</ol>
......@@ -116,6 +115,18 @@
<div class="sidebar">
<ol>
<li><h3>Filter by type</h3>
<ol>
<li class="selected">
<a href="laptop-productdetail.html#!"
onclick="updateProduct('ecommerce/pc/laptop/thinkpadT400/index.json'); return false">Laptop Thinkpad T400</a></li>
<li><a href="android-productdetail.html#!"
onclick="updateProduct('ecommerce/phone/android/nexus/index.json'); return false">Phone Andoid Nexus</a></li>
<li><a href="iphone4s-productdetail.html#!"
onclick="updateProduct('ecommerce/phone/ios/iphone4s/index.json'); return false">IPhone4s</a></li>
</ol>
</li>
<li><h3>Filter by Brand</h3>
<ol>
<li class="selected"><a href="#">Acuvue (12)</a></li>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment