<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta name="description" content="Welcome to the Personalized Web Page Design Center where you can design your own Personalized Web Page!" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="NoteTab Light" />

<title><?php
if(isset($_REQUEST["userName"])) {
$userName=$_REQUEST["userName"];
$userName2=htmlspecialchars($_POST['userName']);
print <<<Here
It&#8217;s $userName2&#8217;s Personalized Web Page!
Here;
} else {
print <<<Here
It&#8217;s Your Personalized Web Page!
Here;
}
?>
</title>

<script type="text/javascript">

// <![CDATA[

function goback()
{
window.history.back()
}

// ]]>

</script>

<!-- File name: http://whowillbethenextonline.com/page5.php - linked-to from http://whowillbethenextonline.com/page5.html -->

<!--
 
Adding PHP scripting-language 'if...else statements' to determine the CSS 'body' element selector's 'color' and 'background-color' declaration 'values,' as well as to determine the '#links,' '#img1,' and '#img2' CSS #id-selector's 'border' declaration borderWidth-'values,' allowed this web page to pass the 'W3C CSS Validation' test at: [http://jigsaw.w3.org/css-validator/]. 

Additional, PHP 'if...else statements' were added to this script at all '$_REQUEST variable' code-lines to permit this web page to bypass the 'Personalized Web Page Design Center' "parent web page" (http://whowillbethenextonline.com/page5.html) and still display properly.
 
-->

<style type="text/css">

body {
<?php
if(isset($_REQUEST['color'])){
$color=$_REQUEST['color'];
} else {
$color = '#ffffff';
}
if(isset($_REQUEST['backgroundColor'])){
$backgroundColor=$_REQUEST['backgroundColor'];
} else {
$backgroundColor = '#000000';
}
print <<<Here
color: $color;
background-color: $backgroundColor;

Here;
?>
}

#overallContainer {
width: 690px;
margin-right: auto;
margin-left: auto;
position: relative;
}

h2 {
border-bottom: 1px solid navy; 
width: 690px; 
padding-bottom: 5px;
}

#credits2 {
color: #D2B48C;
background-color: inherit; 
font-size: xx-small; 
position: absolute; 
top: 500px; 
left: 23px; 
width: 240px;
}

table.clock {
position: absolute; 
top: 70px; 
left: 320px;
}

#microsoft2 {
color: #D2B48C;
background-color: inherit;
}

#pinnacle {
color: #D2B48C;
background-color: inherit;
}

#toshiba {
color: #D2B48C;
background-color: inherit;
}

#links {
<?php
if(isset($_REQUEST['borderWidth'])){
$borderWidth=$_REQUEST['borderWidth'];
} else {
$borderWidth='2';
}
if(isset($_REQUEST['borderStyle'])){
$borderStyle=$_REQUEST['borderStyle'];
} else {
$borderStyle = 'ridge';
}
if(isset($_REQUEST['borderColor'])){
$borderColor=$_REQUEST['borderColor'];
} else {
$borderColor = 'teal';
}
print <<<Here
border: $borderWidthpx $borderStyle $borderColor;
Here;
?>

width: 250px; 
padding: 5px; 
font-size: x-small;
}


#validator-links {
width: 250px; 
text-align: center;
position: absolute;
top: 145px;
left: 9px; 
}

#img1 {
<?php
if(isset($_REQUEST['borderWidth1'])){
$borderWidth1=$_REQUEST['borderWidth1'];
} else {
$borderWidth1='1';
}
if(isset($_REQUEST['borderStyle1'])){
$borderStyle1=$_REQUEST['borderStyle1'];
} else {
$borderStyle1 = 'groove';
}
if(isset($_REQUEST['borderColor1'])){
$borderColor1=$_REQUEST['borderColor1'];
} else {
$borderColor1 = 'silver';
}
print <<<Here
border: $borderWidth1px $borderStyle1 $borderColor1;
Here;
?>

width: 256px;
height: 256px; 
padding: 5px;
}

#img2 {
<?php
if(isset($_REQUEST['borderWidth2'])){
$borderWidth2=$_REQUEST['borderWidth2'];
} else {
$borderWidth2='1';
}
if(isset($_REQUEST['borderStyle2'])){
$borderStyle2=$_REQUEST['borderStyle2'];
} else {
$borderStyle2 = 'ridge';
}
if(isset($_REQUEST['borderColor2'])){
$borderColor2=$_REQUEST['borderColor2'];
} else {
$borderColor2 = 'teal';
}
print <<<Here
border: $borderWidth2px $borderStyle2 $borderColor2;
Here;
?>

width: 448px;
height: 336px; 
padding: 5px;
}

#backto {
position: absolute; 
top: 80px; 
left: 493px; 
width: 200px;
}

#backexp {
position: absolute; 
top: 135px; 
left: 495px; 
font-size: small; 
width: 220px;
font-weight: bold;
}

#img1 {
position: absolute; 
top: 210px; 
}

#img2 { 
position: absolute; 
top: 240px; 
left: 300px;
}

#a1 {
color: black;
background-color: inherit;
}

#a2 {
color: white;
background-color: inherit;
}

#browser-info {
position: absolute; 
top: 543px; 
left: -3px;
text-align: center;
font-weight: bold;
font-size: small;
font-style: italic;
}

/* Link Outline Fix: http://css-tricks.com/removing-the-dotted-outline/ -

The code below gets rid of the default, gray-dotted "outline" styling that occurs once a link becomes "active." */

#validator-links a {
outline: none;
}

</style>

</head>

<body>

<div id="overallContainer"><!-- start of 'id="overallContainer"' div -->

<?php
if(isset($_REQUEST['userName'])){
$userName=$_REQUEST['userName'];
$userName2=htmlspecialchars($_POST['userName']);
print <<<Here
<h2>Welcome to $userName2&#8217;s Personalized Web Page!</h2>
Here;
} else {
print <<<Here
<h2>Welcome to Your Personalized Web Page!</h2>
Here;
}
?>

<div id="links">
 
<a id="a1" href="index.php" title="Return to whowillbethenextonline.com&#8217;s Home Page.">Return to whowillbethenextonline.com&#8217;s Home Page</a>

<p><a id="a2" href="index.php" title="Return to whowillbethenextonline.com&#8217;s Home Page.">Return to whowillbethenextonline.com&#8217;s Home Page</a></p>

</div>

<div id="validator-links"><!-- start of 'id="validator-links"' div -->

<span style="float: left; padding-left: 10px;">
<a style="border: 0px;" href="http://validator.w3.org/check?uri=referer">
<img style="border: 0px; width: 88px; height: 31px;" title="Validate XHTML" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" /></a>
</span>

<span style="float: right; padding-right: 10px;">
<a style="border: 0px;" href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border: 0px; width: 88px; height: 31px;" title="Validate CSS" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS" /></a>
</span>

</div><!-- end of 'id="validator-links"' div -->

<div><!-- start of 'Back/Proceed to Design Page' div -->

<?php
if(isset($_REQUEST['color'])){
print <<<Here
<input id="backto" type="button" value="Back to Design Page" onclick="goback();" title="Click to go back to the Design Page." />
Here;
} else {
print <<<Here
<input id="backto" type="button" value="Proceed to Design Page" onclick="location.href='page5.html'" title="Proceed to Design Page." />
Here;
}
?>

<!-- For 'onclick,' then go to new web page, see: http://www.justskins.com/forums/onclick-link-to-next-30604.html -->

</div><!-- end of 'Back/Proceed to Design Page' div -->

<div id="backexp">

<p>By using the &ldquo;Back&rdquo; button above to return to the Design Page, instead of using a normal link, you will preserve your settings.</p>

</div>

<div id="img1"><!-- start of 'id="img1"' div -->

<?php
if(isset($_REQUEST["photos"])) {
$photos=$_REQUEST["photos"];
$photos_a='images/page5/' . $photos;
$photos_b=substr_replace($photos,"",-4);
} else {
$photos_a='images/page5/eye.png';
$photos_b='eye';
}

print <<<Here
<img src="$photos_a" alt="$photos_b" title="$photos_b" />
Here;
?>

</div><!-- end of 'id="img1"' div -->

<div id="img2"><!-- start of 'id="img2"' div -->

<?php
if(isset($_REQUEST["photos2"])) {
$photos2=$_REQUEST["photos2"];
$photos2_a='images/page5/' . $photos2;
$photos2_b=substr_replace($photos2,"",-4);
} else {
$photos2_a='images/page5/Sun.jpg';
$photos2_b='Sun';
}

print <<<Here
<img src="$photos2_a" alt="$photos2_b" title="$photos2_b" />
Here;
?>

</div><!-- end of 'id="img2"' div -->

<p id="credits2">[All photos from <a id="microsoft2" title="Click here to find out about Digital Image&#8217;s current status." href="http://www.microsoft.com/products/imaging/default.mspx">Microsoft Digital Image Suite</a> / <a id="pinnacle" title="Some images from Pinnacle Studio Plus" href="#">Pinnacle Studio Plus</a> and <a id="toshiba" title="Some images from Toshiba Games." href="#">Toshiba Games</a>.]</p>

<p id="browser-info">This page displays properly in Firefox 29.0.1,<br />Google Chrome, and Internet Explorer-9 browsers.</p>

<div>

<table class="clock" border="0" cellspacing="0" cellpadding="0" width="140">

<tr>

<td align="center">

<script type="text/javascript" src="http://www.worldtimeserver.com/clocks/embed.js"></script>

<script type="text/javascript">

// <![CDATA[

objUSOR=new Object;
objUSOR.wtsclock="wtsclock001.swf";
objUSOR.color="<?php
if(isset($_REQUEST['clockColor'])){
$clockColor=$_REQUEST['clockColor'];
$clockColor2=htmlspecialchars($_POST['clockColor']);
print <<<Here
$clockColor2
Here;
} else {
print <<<Here
808080
Here;
}
?>";
objUSOR.wtsid="UTC";
objUSOR.width=100;
objUSOR.height=100;
objUSOR.wmode="transparent";
showClock(objUSOR);

// ]]>

</script>

</td>

</tr>

<tr>

<td style="text-align: center;">

<h5 style="margin-top: 5px;">
<?php
if(isset($_REQUEST["userName"])) {
$userName=$_REQUEST["userName"];
$userName2=htmlspecialchars($_POST['userName']);
print <<<Here
It&#8217;s $userName2&#8217;s Greenwich Mean Time!
Here;
} else {
print <<<Here
It&#8217;s Your Greenwich Mean Time!
Here;
}
?>

</h5>

</td>

</tr>

</table>

</div><!-- end of 'clock' div -->

</div><!-- end of 'id="overallContainer"' div -->

</body>

</html>