File: C:/xampp/htdocs/cieclock/phpclockRound.php
<?php
$csec=date('s');
//$csec=3;
//echo "csec:".$csec;
date_default_timezone_set('Asia/Taipei');
$chour=date('h');
//$csec=3;
//echo "csec:".$csec;
$chouri=360-(($chour-3)*30);
if ($chouri>360){
$chouri=$chouri-360;
}
$cseci=360-(($csec-15)*6);
if ($cseci>360){
$cseci=$cseci-360;
}
$cmin=date('i');
//$csec=3;
//echo "csec:".$csec;
$cmini=360-(($cmin-15)*6);
if ($cmini>360){
$cmini=$cmini-360;
}
//echo "cseci:".$cseci;
include 'de00.php';
include 'lab2xyz.php';
function RGBToHex($r, $g, $b) {
//String padding bug found and the solution put forth by Pete Williams (http://snipplr.com/users/PeteW)
$hex = "#";
$hex.= str_pad(dechex($r), 2, "0", STR_PAD_LEFT);
$hex.= str_pad(dechex($g), 2, "0", STR_PAD_LEFT);
$hex.= str_pad(dechex($b), 2, "0", STR_PAD_LEFT);
return $hex;
}
function cieXYZtoSRGB($X, $Y, $Z) {
// Normalize XYZ values
$X /= 1.0;
$Y /= 1.0;
$Z /= 1.0;
// Linear transformation from XYZ to RGB
$R = $X * 3.2406 + $Y * -1.5372 + $Z * -0.4986;
$G = $X * -0.9689 + $Y * 1.8758 + $Z * 0.0415;
$B = $X * 0.0557 + $Y * -0.2040 + $Z * 1.0570;
// Compensate for out-of-range RGB values
$R = ($R > 0.0031308) ? (1.055 * pow($R, (1 / 2.4)) - 0.055) : (12.92 * $R);
$G = ($G > 0.0031308) ? (1.055 * pow($G, (1 / 2.4)) - 0.055) : (12.92 * $G);
$B = ($B > 0.0031308) ? (1.055 * pow($B, (1 / 2.4)) - 0.055) : (12.92 * $B);
// Clamp RGB values to [0, 1] range
$R = max(0, min(1, $R));
$G = max(0, min(1, $G));
$B = max(0, min(1, $B));
// Scale to 8-bit sRGB values
$R = round($R * 255);
$G = round($G * 255);
$B = round($B * 255);
// Return sRGB color array
return [$R, $G, $B];
}
/////sec section////////
$chrome=100;
$L=55;
if ($cseci>47){
$L=55;
}
if ($cseci>53){
$L=60;
}
if ($cseci>59){
$L=65;
}
if ($cseci>65){
$L=70;
}
if ($cseci>71){
$L=75;
}
if ($cseci>77){
$L=80;
}
if ($cseci>83){
$L=85;
//$chrome=87;
}
if ($cseci>89){
$L=93;
//$chrome=90;
}
if ($cseci>95){
$L=93;
//$chrome=87;
}
if ($cseci>101){
$L=92;
}
if ($cseci>107){
$L=90;
}
if ($cseci>113){
$L=88;
}
if ($cseci>119){
$L=85;
}
if ($cseci>125){
$L=83;
}
if ($cseci>131){
$L=80;
}
if ($cseci>137){
$L=78;
}
if ($cseci>143){
$L=75;
}
if ($cseci>149){
$L=70;
//$chrome=80;
}
if ($cseci>155){
$L=68;
//$chrome=80;
}
if ($cseci>161){
$L=65;
//$chrome=80;
}
if ($cseci>167){
$L=63;
//$chrome=80;
}
if ($cseci>173){
$L=60;
//$chrome=80;
}
if ($cseci>179){
$L=58;
//$chrome=80;
}
if ($cseci>185){
$L=55;
//$chrome=80;
}
$degree=deg2rad($cseci);
$a=cos($degree)*$chrome;
$b=sin($degree)*$chrome;
//echo "de00:".$de00;
$SXm=lab2xyz("x",$L,$a,$b);
$SYm=lab2xyz("y",$L,$a,$b);
$SZm=lab2xyz("z",$L,$a,$b);
//58.763535563754_74.164133933331_12.406893998571_
// Example usage
$cieXYZ = [$SXm/100, $SYm/100, $SZm/100]; // Example CIE XYZ values
$sRGB = cieXYZtoSRGB($cieXYZ[0], $cieXYZ[1], $cieXYZ[2]);
$sR = $sRGB[0];
$sG = $sRGB[1];
$sB = $sRGB[2];
$secHEX=RGBToHex($sR,$sG,$sB);
////////////////min section
/////sec section////////
$chrome=100;
$L=55;
if ($cmini>47){
$L=55;
}
if ($cmini>53){
$L=60;
}
if ($cmini>59){
$L=65;
}
if ($cmini>65){
$L=70;
}
if ($cmini>71){
$L=75;
}
if ($cmini>77){
$L=80;
}
if ($cmini>83){
$L=85;
//$chrome=87;
}
if ($cmini>89){
$L=93;
//$chrome=90;
}
if ($cmini>95){
$L=93;
//$chrome=87;
}
if ($cmini>101){
$L=92;
}
if ($cmini>107){
$L=90;
}
if ($cmini>113){
$L=88;
}
if ($cmini>119){
$L=85;
}
if ($cmini>125){
$L=83;
}
if ($cmini>131){
$L=80;
}
if ($cmini>137){
$L=78;
}
if ($cmini>143){
$L=75;
}
if ($cmini>149){
$L=70;
//$chrome=80;
}
if ($cmini>155){
$L=68;
//$chrome=80;
}
if ($cmini>161){
$L=65;
//$chrome=80;
}
if ($cmini>167){
$L=63;
//$chrome=80;
}
if ($cmini>173){
$L=60;
//$chrome=80;
}
if ($cmini>179){
$L=58;
//$chrome=80;
}
if ($cmini>185){
$L=55;
//$chrome=80;
}
$degree=deg2rad($cmini);
$a=cos($degree)*$chrome;
$b=sin($degree)*$chrome;
//echo "de00:".$de00;
$SXm=lab2xyz("x",$L,$a,$b);
$SYm=lab2xyz("y",$L,$a,$b);
$SZm=lab2xyz("z",$L,$a,$b);
//58.763535563754_74.164133933331_12.406893998571_
// Example usage
$cieXYZ = [$SXm/100, $SYm/100, $SZm/100]; // Example CIE XYZ values
$sRGB = cieXYZtoSRGB($cieXYZ[0], $cieXYZ[1], $cieXYZ[2]);
$mR = $sRGB[0];
$mG = $sRGB[1];
$mB = $sRGB[2];
$minHEX=RGBToHex($sR,$sG,$sB);
///////////////////////////////
////////////////hour section
////////////////min section
/////sec section////////
$chrome=100;
$L=55;
if ($chouri>47){
$L=55;
}
if ($chouri>53){
$L=60;
}
if ($chouri>59){
$L=65;
}
if ($chouri>65){
$L=70;
}
if ($chouri>71){
$L=75;
}
if ($chouri>77){
$L=80;
}
if ($chouri>83){
$L=85;
//$chrome=87;
}
if ($chouri>89){
$L=93;
//$chrome=90;
}
if ($chouri>95){
$L=93;
//$chrome=87;
}
if ($chouri>101){
$L=92;
}
if ($chouri>107){
$L=90;
}
if ($chouri>113){
$L=88;
}
if ($chouri>119){
$L=85;
}
if ($chouri>125){
$L=83;
}
if ($chouri>131){
$L=80;
}
if ($chouri>137){
$L=78;
}
if ($chouri>143){
$L=75;
}
if ($chouri>149){
$L=70;
//$chrome=80;
}
if ($chouri>155){
$L=68;
//$chrome=80;
}
if ($chouri>161){
$L=65;
//$chrome=80;
}
if ($chouri>167){
$L=63;
//$chrome=80;
}
if ($chouri>173){
$L=60;
//$chrome=80;
}
if ($chouri>179){
$L=58;
//$chrome=80;
}
if ($chouri>185){
$L=55;
//$chrome=80;
}
$degree=deg2rad($chouri);
$a=cos($degree)*$chrome;
$b=sin($degree)*$chrome;
//echo "de00:".$de00;
$SXm=lab2xyz("x",$L,$a,$b);
$SYm=lab2xyz("y",$L,$a,$b);
$SZm=lab2xyz("z",$L,$a,$b);
//58.763535563754_74.164133933331_12.406893998571_
// Example usage
$cieXYZ = [$SXm/100, $SYm/100, $SZm/100]; // Example CIE XYZ values
$sRGB = cieXYZtoSRGB($cieXYZ[0], $cieXYZ[1], $cieXYZ[2]);
$hR = $sRGB[0];
$hG = $sRGB[1];
$hB = $sRGB[2];
$hourHEX=RGBToHex($sR,$sG,$sB);
// Generate random RGB color values for the circular rings of the first clock
$inner_ring_color_1 = sprintf('#%02x%02x%02x', $sR,$sG,$sB);
$middle_ring_color_1 = sprintf('#%02x%02x%02x',$mR,$mG,$mB);
$outer_ring_color_1 = sprintf('#%02x%02x%02x', $hR,$hG,$hB);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Analog Clocks with Circular Rings and Moving Hands</title>
<script>
// Function to reload the page every one second
function autoRefresh() {
setTimeout(function() {
location.reload();
}, 1000); // 1000 milliseconds = 1 second
}
// Call the autoRefresh function when the page loads
window.onload = autoRefresh;
</script>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
}
.clock-container {
display: flex;
justify-content: space-around;
align-items: center;
width: 400px;
}
.clock {
position: relative;
width: 200px;
height: 200px;
border: 2px solid #000;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.circle {
position: absolute;
width: 80px; /* Adjust the size of each ring */
height: 80px; /* Adjust the size of each ring */
border-radius: 50%;
}
/* Clock 1 rings */
.inner-ring-1 {
background-color: <?php echo $inner_ring_color_1; ?>;
width: 80px;
height: 80px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.middle-ring-1 {
background-color: <?php echo $middle_ring_color_1; ?>;
width: 145px;
height: 145px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.outer-ring-1 {
background-color: <?php echo $outer_ring_color_1; ?>;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<div class="clock-container">
<table>
<tr>
<td>
<div class="clock">
<div class="circle outer-ring-1"></div>
<div class="circle middle-ring-1"></div>
<div class="circle inner-ring-1"></div>
<div class="hand hour-hand"></div>
<div class="hand minute-hand"></div>
<div class="hand second-hand"></div>
</div>
</td>
</tr>
</table>
</div>
</div>
<script>
function moveClockHands() {
// Get the current time
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
// Calculate the rotation angles for the clock hands
const hourAngle = (hours % 12) * 30 + minutes * 0.5;
const minuteAngle = minutes * 6;
const secondAngle = seconds * 6;
// Apply the rotation angles to the clock hands
const hourHands = document.querySelectorAll('.hour-hand');
hourHands.forEach(hand => hand.style.transform = `translate(-50%, -100%) rotate(${hourAngle}deg)`);
const minuteHands = document.querySelectorAll('.minute-hand');
minuteHands.forEach(hand => hand.style.transform = `translate(-50%, -100%) rotate(${minuteAngle}deg)`);
const secondHands = document.querySelectorAll('.second-hand');
secondHands.forEach(hand => hand.style.transform = `translate(-50%, -100%) rotate(${secondAngle}deg)`);
}
// Update clock hands every second
setInterval(moveClockHands, 1000);
</script>
</body>
</html>