0byt3m1n1

Path: /home/mgatv524/neovia.mgaplay.com.br/web/media/widget/438/ [ Home ]
File: 438_12_1920_1080
<!doctype html>
<html lang="en">
<head>
    <title>Xibo Open Source Digital Signage</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=[[ViewPortWidth]]" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- Copyright 2006-2021 Xibo Signage Ltd. Part of the Xibo Open Source Digital Signage Solution. Released under the AGPLv3 or later. -->
    <style type="text/css">
        body {
            margin: 0;
            overflow: hidden;
            font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
        }
        h1, h2, h3, h4, p {
            margin-top: 0;
        }
        #iframe {
            border: 0;
        }
        .cycle-slide p, p.cycle-slide {
            margin-bottom:0;
        }
    </style>
    
    
            <link href="weather-icons.min.css" rel="stylesheet" media="screen">
            <link href="font-awesome.min.css" rel="stylesheet" media="screen">
            <link href="animate.css" rel="stylesheet" media="screen">
            <style type="text/css"> body { background-color: transparent }</style>
            <style type="text/css">
            body {
  width: 960px !important;
  height: 540px !important;
}

p {
  margin: 0 0 10px;
}

.h1, .h2, .h3, h1, h2, h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

.h3, h3 {
  font-size: 24px;
}

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

#content {
 color: white;
 }

.text-center {
  text-align: center;
}

h1 {
  margin: 0.67em 0;
  font-size: 2em;
}

.container:after, .container:before, .row:after, .row:before {
  display: table;
  content: " ";
}

.container:after, .row:after {
  clear: both;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

:after, :before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1;
}

.container {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 960px !important;
  height: 540px !important;
}

.main-panel {
  margin-top: 74px;
  height: 137px;
}

.big-icon {
  font-size: 120px;

  margin-right: 20px;
}

.date {

  font-size: 18px;
  font-family: "Helvetica", sans-serif;
  font-weight: light;
  padding-bottom: 1px;
}

.month {
  font-size: 15px;

  font-family: "Helvetica", sans-serif;
  font-weight: light;
}

.current-temp {
  font-family: "Helvetica", sans-serif;
  font-weight: bold;
  font-size: 100px;

}

.current-temp sup {
 font-size: 50px;
 }

.footer {
  height: 290px;

  padding: 30px 30px;
  position: relative;
  margin-bottom: 20px;
}

.main-icon {
  font-size: 70px;

}

.small-day {
  padding-top: 54px;
  font-size: 20px;
  font-style: italic;
  font-weight: lighter;
  text-transform: uppercase;
}

.small-icon {
  font-size: 30px;
  padding: 20px;
  color: #272625;
}

.small-temp {
  font-size: 16px;

}

.powered {
  font-weight: bold;
  font-size: 1.4em;
  padding-top: 5px;
}

.upcoming-days:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.6);

}

.main-detail, .upcoming-days:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.9);
}

.details-box {
  height: 290px;
  padding-left: 30px !important;

}

.upcoming-days {
  height: 195px;
  margin-top: 95px !important;
  text-align: center;
}

.selector-day {
  font-size: 15px;
  font-weight: light;
  margin-top: 25px;
}

.selector-temp {
  font-size: 25px;
  font-weight: bold;
  font-style: italic;
}

.shadowed {
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
  filter: dropshadow(color=rgba(0, 0, 0, 0.4), offx=2, offy=2);
}

.container-fluid, .container {
  margin-right: auto;
  margin-left: auto;
}

.text-right {
  text-align: right;
}

.pull-right {
  float: right !important;
}

.offset-xs-1 {
  margin-left: 8.33333333%;
}

.col-2 {
  width: 16.66666667%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.33333333%;
}

.col-5 {
  width: 41.66666667%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.33333333%;
}

.col-9 {
  width: 75%;
}

.col-12 {
  width: 100%;
}

.weather-col {
  float: left;
  position: relative;
  min-height: 1px;
}

.offset-xs-6 {
  margin-left: 50%;
}

.bg-footer{
   color: #272625;
}
                .bg-cloudy {
                    background-image: url("wi-cloudy.jpg");
                }

                .bg-partly-cloudy-day {
                    background-image: url("wi-day-cloudy.jpg");
                }

                .bg-clear-day {
                    background-image: url("wi-day-sunny.jpg");
                }

                .bg-fog {
                    background-image: url("wi-fog.jpg");
                }

                .bg-sleet {
                    background-image: url("wi-hail.jpg");
                }

                .bg-clear-night {
                    background-image: url("wi-night-clear.jpg");
                }

                .bg-partly-cloudy-night {
                    background-image: url("wi-night-partly-cloudy.jpg");
                }

                .bg-rain {
                    background-image: url("wi-rain.jpg");
                }

                .bg-snow {
                    background-image: url("wi-snow.jpg");
                }

                .bg-wind {
                    background-image: url("wi-windy.jpg");
                }

                .bg-cloudy, .bg-partly-cloudy-day, .bg-clear-day, .bg-fog, .bg-sleet, .bg-clear-night, .bg-partly-cloudy-night, .bg-rain, .bg-snow, .bg-wind {
                    background-position: center;
                    background-size: cover;
                    background-repeat: no-repeat;
                    width: 100%;
                    height: 100%;
                    position: absolute;
                }
            
            </style>
        <link href="fonts.css" rel="stylesheet" media="screen"><style type="text/css"></style>
</head>
<!--[if lt IE 7 ]><body class="ie6"><![endif]-->
<!--[if IE 7 ]><body class="ie7"><![endif]-->
<!--[if IE 8 ]><body class="ie8"><![endif]-->
<!--[if IE 9 ]><body class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><body><!--<![endif]-->
<div id="content"><div class="bg-partly-cloudy-day"></div><div class="container">
    <div class="row  main-panel">
        <div class="weather-col col-2 offset-xs-6 big-icon">
            <i class="wi wi-day-cloudy shadowed"></i>
        </div>
        <div class="weather-col col-3 text-right">
            <div class="current-temp shadowed">68<sup>&deg;F</sup></div>

            <div class="month shadowed">quarta-feira 21 junho, 2023</div>
            <div class="month shadowed powered">Powered by OpenWeather</div>
        </div>
    </div>
    <div class="row bg-footer footer">
        <div class="weather-col col-4 main-detail details-box">
            <h3><strong>HOJE</strong></h3>
            <p class="selector-day">Max</p>
            <p class="selector-temp">69 &deg; F</p>
            <p class="selector-day">Min</p>
            <p class="selector-temp">55 &deg; F</p>
            <p class="selector-day">Média</p>
            <p class="selector-temp">62 &deg; F</p>
        </div>
        <div class="upcoming">
            <div class="weather-col col-2 upcoming-days">
    <div class="small-day">qui</div>
    <div class="small-icon"><i class="wi wi-rain"></i></div>
    <div class="small-temp">71 &deg; F</div>
</div><div class="weather-col col-2 upcoming-days">
    <div class="small-day">sex</div>
    <div class="small-icon"><i class="wi wi-rain"></i></div>
    <div class="small-temp">68 &deg; F</div>
</div><div class="weather-col col-2 upcoming-days">
    <div class="small-day">sáb</div>
    <div class="small-icon"><i class="wi wi-day-sunny"></i></div>
    <div class="small-temp">80 &deg; F</div>
</div><div class="weather-col col-2 upcoming-days">
    <div class="small-day">dom</div>
    <div class="small-icon"><i class="wi wi-day-sunny"></i></div>
    <div class="small-temp">81 &deg; F</div>
</div>
        </div>
    </div>
</div></div>
</body>
<script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="xibo-layout-scaler.js"></script><script type="text/javascript" src="xibo-image-render.js"></script><script type="text/javascript">var xiboICTargetId = 438;</script><script type="text/javascript" src="xibo-interactive-control.min.js"></script><script type="text/javascript">xiboIC.lockAllInteractions();</script><script>

            var options = {"originalWidth":1920,"originalHeight":1080,"widgetDesignWidth":960,"widgetDesignHeight":540,"alignmentH":"center","alignmentV":"middle"}

            $(document).ready(function() {
                $(".container").xiboLayoutScaler(options);
                $("#content").find("img").xiboImageRender(options);
            });
        </script>
</html>