188 lines
7.0 KiB
PHP
188 lines
7.0 KiB
PHP
|
<?php
|
||
|
|
$LOGIN=false;
|
||
|
|
if($_COOKIE["LOGIN"]=="true"){
|
||
|
|
$LOGIN=true;
|
||
|
|
}
|
||
|
|
?>
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
|
|
|
||
|
|
<meta name="viewport" content="width=device-width">
|
||
|
|
<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">
|
||
|
|
<?php
|
||
|
|
if($LOGIN){
|
||
|
|
?>
|
||
|
|
<title>Hi, Akamai!</title>
|
||
|
|
<?php
|
||
|
|
}else{
|
||
|
|
?>
|
||
|
|
<title>Thirty-Three</title>
|
||
|
|
<?php
|
||
|
|
}
|
||
|
|
?>
|
||
|
|
<link rel="stylesheet" type="text/css" href="./retail_files/styles.css">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body style="background-image: url(retail_files/background/background.jpg);background-size:auto 100%;background-repeat:no-repeat;">
|
||
|
|
</div>
|
||
|
|
<div style="padding:10px;overflow:auto;">
|
||
|
|
<div id="main-logo">
|
||
|
|
<?php
|
||
|
|
if($LOGIN){
|
||
|
|
?>
|
||
|
|
<div id="TextLogo">Hi, Akamai!</div>
|
||
|
|
<?php
|
||
|
|
}else{
|
||
|
|
?>
|
||
|
|
<div id="TextLogo">Thirty-Three</div>
|
||
|
|
<?php
|
||
|
|
}
|
||
|
|
?>
|
||
|
|
</div>
|
||
|
|
<div id="MyNav">
|
||
|
|
<ul>
|
||
|
|
<li><a title="HOME" href="/">HOME</a></li>
|
||
|
|
<li><a title="MEN" href="/jacket.html">MEN</a></li>
|
||
|
|
<li><a title="WOMEN" href="/womenstops.html">WOMEN</a></li>
|
||
|
|
<li><a title="ACCESSORIES" href="/jewelry.html">ACCESSORIES</a></li>
|
||
|
|
<?php
|
||
|
|
if($LOGIN){
|
||
|
|
?>
|
||
|
|
<li><a titie="LOG-OUT" href="/logout.php">LOG-OUT</a></li>
|
||
|
|
<?php
|
||
|
|
}else{
|
||
|
|
?>
|
||
|
|
<li><a title="LOG-IN" href="/login.php">LOG-IN</a><li>
|
||
|
|
<?php
|
||
|
|
}
|
||
|
|
?>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<style>
|
||
|
|
.videoplayer { width: 100%; }
|
||
|
|
.clear { display: block; margin:5px 0px; clear: both; }
|
||
|
|
</style>
|
||
|
|
<div id="imageContainer">
|
||
|
|
<?php
|
||
|
|
$is_mobile = "false";
|
||
|
|
if(strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone')!==FALSE){
|
||
|
|
$is_mobile = "true";
|
||
|
|
}else{
|
||
|
|
$from_mobile = $_SERVER['is_mobile'];
|
||
|
|
if($from_mobile =="true"){
|
||
|
|
$is_mobile = "true";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if($is_mobile == "false"){
|
||
|
|
?>
|
||
|
|
<!--VIDEO: MENS JACKETS - leather.mp4 -->
|
||
|
|
<a href="/jacket.html" title="Compare pristine and IM optimized video">
|
||
|
|
<video id="myVideo" class="videoplayer" playsinline="" autoplay="" muted="" loop="">
|
||
|
|
<source id="myVideoSrc" src="/video/leather.mp4?imwidth=5000" type="video/mp4">
|
||
|
|
Your browser does not support the video tag.
|
||
|
|
</video>
|
||
|
|
</a>
|
||
|
|
<h3>Men's Jackets - Video</h3>
|
||
|
|
<h2><em style="color:#999">Demo Video Optimization</em></h2>
|
||
|
|
<?php
|
||
|
|
}
|
||
|
|
?>
|
||
|
|
<div class="clear"></div>
|
||
|
|
<script>
|
||
|
|
if (window.innerWidth < 850) {
|
||
|
|
var vid = document.getElementById("myVideoSrc");
|
||
|
|
vid.src = "/video/leather-mobile-cropped.mp4";
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<!-- ##### end exercise 2 task in here ##### -->
|
||
|
|
<!--IMAGE 1: MENS JACKETS - jacket.jpg -->
|
||
|
|
<div id="catContainer">
|
||
|
|
<img src="./retail_files/jacket.jpg" width="95%" title="Piez Demo: Auto policy" onload="performance.clearMarks('img1 display'); performance.mark('img1 display');"> <script>
|
||
|
|
performance.clearMarks("img1 display");
|
||
|
|
performance.mark("img1 display");
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>Men's Jackets</h3>
|
||
|
|
<h2><em style="color:#999">Auto policy</em></h2>
|
||
|
|
</div>
|
||
|
|
<!--IMAGE 2: WOMENS TOPS - sparkler.jpg -->
|
||
|
|
<div id="catContainer">
|
||
|
|
<a href="/womenstops.html" title="Demo image viewer"><img src="./retail_files/sparkler.jpg" width="95%"></a> <h3>Women's Tops</h3>
|
||
|
|
<h2><em style="color:#999">Demo Media viewer</em></h2>
|
||
|
|
</div>
|
||
|
|
<!--IMAGE 3: ACCESSORIES - accessories.jpg -->
|
||
|
|
<div id="catContainer">
|
||
|
|
<a href="/jewelry.html" title="Demo 360 viewer"><img src="./retail_files/accessories.jpg" width="95%"></a> <h3>Accessories and Jewelry</h3>
|
||
|
|
<h2><em style="color:#999">Demo 360 Media viewer</em></h2>
|
||
|
|
</div>
|
||
|
|
<!--IMAGE 4: MENS ESSENTIALS - mens_accessories.jpg -->
|
||
|
|
<div id="catContainer">
|
||
|
|
<img src="./retail_files/mens_accessories.jpg" srcset="retail_files/mens_accessories.jpg?imwidth=300 300w, retail_files/mens_accessories.jpg?imwidth=350 350w, retail_files/mens_accessories.jpg?imwidth=600 600w" sizes="(max-width: 480px) 300px, (max-width: 1024px) 350px, (min-width: 1025px) 600px" width="95%" title="Srcset demo using imwidth"> <h3>Men's Essentials</h3>
|
||
|
|
<h2><em style="color:#999">srcset with imwidth</em></h2>
|
||
|
|
</div>
|
||
|
|
<!--IMAGE 5: DENIM - mes_jeans.jpg -->
|
||
|
|
<div id="catContainer">
|
||
|
|
<img src="./retail_files/mens_jeans.jpg" srcset="retail_files/mens_jeans.jpg?imwidth=300&impolicy=rwdImages 300w,
|
||
|
|
retail_files/mens_jeans.jpg?imwidth=350&impolicy=rwdImages 350w,
|
||
|
|
retail_files/mens_jeans.jpg?imwidth=600&impolicy=rwdImages 600w" sizes="(max-width: 480px) 300px, (max-width: 1024px) 350px, (min-width: 1025px) 600px" width="95%" title="Srcset demo using imwidth and custom policy"> <h3>Denim</h3>
|
||
|
|
<h2><em style="color:#999">srcset with imwidth + policy</em></h2>
|
||
|
|
</div>
|
||
|
|
<!--IMAGE 6: LEATHER COLLECTION - leather_jacket.jpg -->
|
||
|
|
<div id="catContainer">
|
||
|
|
<a href="/retail_files/leather_jacket.jpg?impolicy=cropped&w=1200&h=800&x=0&y=0" target="_leather" title="Image cropping demo"><picture>
|
||
|
|
<source media="(max-width : 480px)" srcset="retail_files/leather_jacket.jpg?imwidth=300&impolicy=cropped 1x,
|
||
|
|
retail_files/leather_jacket.jpg?imwidth=600&impolicy=cropped 2x,
|
||
|
|
retail_files/leather_jacket.jpg?imwidth=900&impolicy=cropped 3x">
|
||
|
|
<source media="(max-width : 1024px)" srcset="retail_files/leather_jacket.jpg?imwidth=350&impolicy=cropped 1x,
|
||
|
|
retail_files/leather_jacket.jpg?imwidth=700&impolicy=cropped 2x">
|
||
|
|
<source media="(min-width : 1025px)" srcset="retail_files/leather_jacket.jpg?imwidth=600&impolicy=rwdImages 1x,
|
||
|
|
retail_files/leather_jacket.jpg?imwidth=1200&impolicy=rwdImages 2x">
|
||
|
|
|
||
|
|
<img src="./retail_files/leather_jacket.jpg" width="95%" onload="performance.clearMarks('img6 display'); performance.mark('img6 display');">
|
||
|
|
</picture></a>
|
||
|
|
<h3>Leather Collection</h3>
|
||
|
|
<h2><em style="color:#999">Art direction with dynamic policies</em></h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="vert-space"></div>
|
||
|
|
|
||
|
|
<div id="BottomList">
|
||
|
|
<div id="BottomContainer">
|
||
|
|
<div id="BottomDetail">
|
||
|
|
<b>Contact Us</b>
|
||
|
|
<ul>
|
||
|
|
<li><a title="Phone" href="/#Phone">Phone</a></li>
|
||
|
|
<li><a title="Email" href="/#Email">Email</a></li>
|
||
|
|
<li><a title="Mail" href="/#Mail">Mail</a></li>
|
||
|
|
<li><a title="Social Media" href="/#Social">Social Media</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div id="BottomDetail">
|
||
|
|
<b>Departments</b>
|
||
|
|
<ul>
|
||
|
|
<li><a title="Men's" href="/#Mens">Men's</a></li>
|
||
|
|
<li><a title="Women's" href="/#Womens">Women's</a></li>
|
||
|
|
<li><a title="Accessories" href="/#Accessories">Accessories</a></li>
|
||
|
|
<li><a title="Shoes" href="/#Shoes">Shoes</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div id="BottomDetail">
|
||
|
|
<b>About Us</b>
|
||
|
|
<ul>
|
||
|
|
<li><a title="Press" href="/#Press">Press</a></li>
|
||
|
|
<li><a title="Careers" href="/#Careers">Careers</a></li>
|
||
|
|
<li><a title="Privacy Policy" href="/#PrivacyPolicy">Privacy Policy</a></li>
|
||
|
|
<li><a title="Site Map" href="/#SiteMap">Site Map</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</body></html>
|