<?php include('livedata.php');
error_reporting(0); ?>


<style>


@font-face {
    font-family: verb;
    src        : url(fonts/verbatim-bold.woff2) format("woff2"),
        url(fonts/verbatim-bold.woff) format("woff");
    font-display: swap;
}

  body {
    background: rgba(30, 31, 35, 1.000);
  }

  .webcamlarge {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    max-width: 167vh;
    height: 80vh;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: solid rgba(84, 85, 86, 0.2) 5px;
    width: 167vh;
    height: 93vh;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .videoWeatherCamLarge {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    border: solid rgba(76, 123, 160, 0.5) 5px;
    width: 167vh;
    height: 80vh;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  a {
    color: #aaa;
    text-decoration: none
  }

  .weather34darkbrowser {
    position: relative;
    background: 0;
    width: 96%;
    height: 30px;
    margin: auto;
    margin-top: -5px;
    margin-left: 0px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding-top: 10px;
  }

  .weather34darkbrowser[url]:after {
    content: attr(url);
    color: #aaa;
    font-size: 12px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding: 4px 15px;
    margin: 11px 10px 0 auto;
    border-radius: 3px;
    background: rgba(97, 106, 114, 0.3);
    height: 20px;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif
  }

  .weather34-webcam-iframe {
    position: absolute;
    top: 5px;
    left: 10px;
    bottom: 0;
    right: 0;
    width: 170vh;
    height: 80vh;
    overflow: hidden;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
    border-radius: 5px;
  }

  .weather34-webcam-iframe::-webkit-scrollbar {
    display: none;
  }

  ::-webkit-scrollbar {
    display: none
  }

  ::-webkit-scrollbar-track {
    background: var(--border-dark)
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--blue)
  }

  .camvalue{
position: absolute;
font-size:12px;
font-family:verb;
background:<?php if ($displaytempwind=="yes") echo "rgba(97, 106, 114, 1)"?>;
width:max-content;
margin-left:40%;
border-radius: 5px;
margin-bottom:1%;
display: inline;
padding:3px;
color:silver;
z-index:10;
line-height:.5;
padding-top:2px;


}
.camvalue span{
font-size:7px;
vertical-align: super;




}

</style>
</head>

<body>
  <!-- HOMEWEATHER STATION TEMPLATE SIMPLE WEBCAM -add your url as shown below do NOT delete the class='webcam large' !!! -->


 <!-- November 2025 option added yes or no for temp/wind display -->

  <div class="camvalue">
<?php if ($displaytempwind=='yes')

{
 echo "Temp: ".$weather["temp"], "<span>&deg</span>";
 echo " Wind: ";
if($weather["wind_direction"]<=11.25){echo "North";}
else if($weather["wind_direction"]<=33.75){echo "NNE";}
else if($weather["wind_direction"]<=56.25){echo "NE";}
else if($weather["wind_direction"]<=78.75){echo "ENE";}
else if($weather["wind_direction"]<=101.25){echo "E";}
else if($weather["wind_direction"]<=123.75){echo "ESE";}
else if($weather["wind_direction"]<=146.25){echo "SE";}
else if($weather["wind_direction"]<=168.75){echo "SSE";}
else if($weather["wind_direction"]<=191.25){echo "South";}
else if($weather["wind_direction"]<=213.75){echo "SSW";}
else if($weather["wind_direction"]<=236.25){echo "SW";}
else if($weather["wind_direction"]<=258.75){echo "WSW";}
else if($weather["wind_direction"]<=281.25){echo "West";}
else if($weather["wind_direction"]<=303.75){echo "WNW";}
else if($weather["wind_direction"]<=326.25){echo "NW";}
else if($weather["wind_direction"]<=348.75){echo "NNW";}
else{echo "North";}



if ($weather['wind_units']=='kts'){echo "".number_format($weather["wind_gust_speed"],0), "<span> ".$weather['wind_units']."</span>";}

    else if ($weather["wind_gust_speed"]>=10){echo "".number_format($weather["wind_gust_speed"],0), "<span>  ".$weather['wind_units']."</span>";}

else echo number_format($weather["wind_gust_speed"],1), "<span> ".$weather['wind_units']."</span>";

}



//rain rate if greater than zero
if ($weather["rain_rate"]>0){
echo $umbrella2024small1;}
 ?>

</div>



  <?php if (!empty($videoWeatherCamURL) && $videoWeatherCamURL != ' ' && $videoWeatherCamURL != 'Null' && $videoWeatherCamURL != 'null') { ?>
    <iframe class="videoWeatherCamLarge" allowfullscreen webkitallowfullscreen mozallowfullscreen src="<?php echo $videoWeatherCamURL; ?>" frameborder="0"></iframe>
  <?php } else { ?>
<style> img {max-width: 100%; height: auto; } </style>
<img src="<?php
  if (str_contains ($webcamdevice, "cam plus"))
    echo "camplus.jpg";
  else
    if (str_contains ($webcamdevice, "cam"))
      echo "cam.jpg";
    else
      echo $webcamurl; ?>?v=<?php echo date('YmdGis');?>" alt="weathercam" class="weather34-webcam">
  <?php } ?>
  </span>
