luesjo12
5 years ago
@ -0,0 +1,2 @@
|
||||
# Auto detect text files and perform LF normalization
|
||||
* text=auto
|
||||
@ -0,0 +1,181 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
|
||||
|
||||
<?php
|
||||
|
||||
$cache = 0;
|
||||
$cacheStr = '?baxza33';
|
||||
|
||||
if ($cache==0) $cacheStr = '?' . date('l jS \of F Y h:i:s A');
|
||||
|
||||
?>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<title>Weatherscan</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link media="screen" type="text/css" rel="stylesheet" href="//cdn.aerisjs.com/aeris-interactive/assets/css/default/style.css">
|
||||
<link media="screen" type="text/css" rel="stylesheet" href="//api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css">
|
||||
|
||||
<link rel="stylesheet" href="css/style.css<?=$cacheStr ?>" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript" src="//api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js"></script>
|
||||
<script type="text/javascript" src="//cdn.aerisjs.com/aeris-interactive/aim-leaflet.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/jplayer/jquery.jplayer.min.js"></script>
|
||||
<script src="http://cdn.date-fns.org/v2.0.0-alpha0/date_fns.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/utils.js<?=$cacheStr ?>"></script>
|
||||
<script type="text/javascript" src="js/audio.js<?=$cacheStr ?>"></script>
|
||||
<script type="text/javascript" src="js/groupull.js<?=$cacheStr ?>"></script>
|
||||
<script type="text/javascript" src="js/dataManager.js<?=$cacheStr ?>"></script>
|
||||
<script type="text/javascript" src="js/loops.js<?=$cacheStr ?>"></script>
|
||||
<script type="text/javascript" src="js/weather.js<?=$cacheStr ?>"></script>
|
||||
|
||||
|
||||
|
||||
<div id="main" class="container">
|
||||
|
||||
<img id="template" src="images/template-4k.png" />
|
||||
|
||||
|
||||
<div id="info-slides">
|
||||
<div class="info-slide radar-slide">
|
||||
<div class="info-header">
|
||||
<div>Local Doppler Radar
|
||||
<div class="radar-color-legend">Past 3 Hours<br>Light <img src="images/precip-legend.png" alt="Past 3 Hours" /> Heavy</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="radar-1" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="date-time">
|
||||
<div id="date"></div>
|
||||
<div id="time"></div>
|
||||
</div>
|
||||
|
||||
<div id="city"></div>
|
||||
|
||||
<div id="conditions-icon"></div>
|
||||
|
||||
<div id="current-conditions">
|
||||
<div id="now">now</div>
|
||||
<div id="current-temp"></div>
|
||||
<div id="current-info"></div>
|
||||
</div>
|
||||
|
||||
<div id="minimap-title">PAST 3 HOURS</div>
|
||||
<div id="minimap"></div>
|
||||
<div id="logo-area"><img src="images/midco_logo.png"/></div>
|
||||
|
||||
<div id="forecast-shadow">
|
||||
<div id="forecast-header">
|
||||
<div id="forecast-city"></div><div id="forecast-title"></div>
|
||||
</div>
|
||||
<div id="forecast-text"><div>Retrieving forecast data...</div></div>
|
||||
<div id="forecast-tiles"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="marquee1" class="marquee">
|
||||
<div id="marquee-container">
|
||||
<div id="marquee-now"><span class="track-info"></span></div>
|
||||
<!--div id="marquee-tonight"></div-->
|
||||
</div>
|
||||
</div>
|
||||
<img id="arrow-img" src="images/NOW.png<?=$cacheStr ?>"/>
|
||||
|
||||
<div id="marquee2" class="marquee"><div>
|
||||
You are watching an emulation of the Weatherscan IntelliStar system. Weatherscan is a digital cable and satellite television network that is owned by a consortium owned in turn by NBCUniversal and investment firms The Blackstone Group and Bain Capital. A spinoff of The Weather Channel, Weatherscan features uninterrupted local weather information in graphical format on a continuous loop that is generated by an IntelliStar unit installed at the cable provider's headend; unlike The Weather Channel, Weatherscan does not feature on-air talent of any kind.
|
||||
</div></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
||||
// set your mapbox access token
|
||||
L.mapbox.accessToken = 'pk.eyJ1Ijoic3dhbGRuZXIiLCJhIjoiY2o4ZGpjcnVvMHBhazMzcDVnanZmd2lobCJ9.Kr5329g4YyZIlnYfHNXRWA';
|
||||
var aerisMapBuilder = new aeris.interactive.MapAppBuilder({
|
||||
apiId: 'G99TzbQi5wXjWSLq7U0x3',
|
||||
apiSecret: 'wHjpONXg3Nlhh2u2GJuibDhRZWEcs5mMFsT6vuJd',
|
||||
el: '#radar-1',
|
||||
modules: {
|
||||
map: {
|
||||
baseLayer: new aeris.maps.layers.MapBox({
|
||||
mapBoxId: 'swaldner.306d8456' //'swaldner.4158bce2' //'swaldner.306d8456'
|
||||
})
|
||||
},
|
||||
animation: {
|
||||
speed: 100,
|
||||
futureSpeed: 200,
|
||||
from: new Date(Date.now() - 3600 * 4 * 1000),
|
||||
to: new Date(Date.now()),
|
||||
useBigTimeline: false,
|
||||
boundsMenu:{
|
||||
min: [
|
||||
{
|
||||
value: 1000 * 60 * 60,
|
||||
label: '1 hour ago'
|
||||
},
|
||||
{
|
||||
value: 1000 * 60 * 60 * 2,
|
||||
label: '2 hours ago'
|
||||
},
|
||||
{
|
||||
value: 1000 * 60 * 60 * 3,
|
||||
label: '3 hours ago'
|
||||
}
|
||||
],
|
||||
max: [
|
||||
{
|
||||
value: 1000 * 60 * 60,
|
||||
label: 'next 1 hour'
|
||||
},
|
||||
{
|
||||
value: 1000 * 60 * 60 * 2,
|
||||
label: 'next 2 hours'
|
||||
},
|
||||
{
|
||||
value: 1000 * 60 * 60 * 3,
|
||||
label: 'next 3 hours'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
//}
|
||||
});
|
||||
aerisMapBuilder
|
||||
.start()
|
||||
.done(function() {
|
||||
$('i.aeris-playIcon.aeris-icon-play').click();
|
||||
console.log('Aeris Interactive Maps is initialized.');
|
||||
})
|
||||
.fail(function(err) {
|
||||
console.error(err);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,31 @@
|
||||
/* This stylesheet generated by Transfonter (https://transfonter.org) on October 10, 2017 7:34 PM */
|
||||
|
||||
@font-face {
|
||||
font-family: 'Interstate';
|
||||
src: url('hinted-subset-Interstate-Regular.eot');
|
||||
src: url('hinted-subset-Interstate-Regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('hinted-subset-Interstate-Regular.woff') format('woff'),
|
||||
url('hinted-subset-Interstate-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Interstate Mono';
|
||||
src: url('hinted-subset-InterstateMono.eot');
|
||||
src: url('hinted-subset-InterstateMono.eot?#iefix') format('embedded-opentype'),
|
||||
url('hinted-subset-InterstateMono.woff') format('woff'),
|
||||
url('hinted-subset-InterstateMono.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Interstate';
|
||||
src: url('hinted-subset-Interstate-Bold.eot');
|
||||
src: url('hinted-subset-Interstate-Bold.eot?#iefix') format('embedded-opentype'),
|
||||
url('hinted-subset-Interstate-Bold.woff') format('woff'),
|
||||
url('hinted-subset-Interstate-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
@ -0,0 +1,82 @@
|
||||
/* Slide 1*/
|
||||
|
||||
.city-info,
|
||||
.info-slide-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
top: 10%;
|
||||
font-size: 110%;
|
||||
}
|
||||
.frost-pane {
|
||||
color: #fff;
|
||||
font-family:"Zemestro Std";
|
||||
font-size: 32px;
|
||||
text-shadow:#000 2px 2px 4px;
|
||||
min-height: 100%;
|
||||
background: rgba(18,75,238,0.7);
|
||||
z-index: 388686;
|
||||
flex:1;
|
||||
}
|
||||
.city-info .frost-pane:first-of-type {
|
||||
width: 55%;
|
||||
margin-right: 0.8%;
|
||||
}
|
||||
|
||||
.city-info .frost-pane.left * {
|
||||
position: absolute;
|
||||
padding-top: 15px;
|
||||
line-height: 220%;
|
||||
}
|
||||
|
||||
.frost-pane .labels {
|
||||
color: #d8c422;
|
||||
left: 9%;
|
||||
}
|
||||
|
||||
.city-info .frost-pane .data {
|
||||
left: 35%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.city-info .frost-pane.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.city-info .frost-pane .icon {
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center center;
|
||||
width: 70%;
|
||||
height: 40%;
|
||||
}
|
||||
.city-info .frost-pane .temp {
|
||||
font-size: 76px;
|
||||
margin-top: 20%;
|
||||
}
|
||||
|
||||
.forecast .frost-pane {
|
||||
padding-left: 9%;
|
||||
padding-top: 2%;
|
||||
padding: 2% 2% 1% 9%;
|
||||
}
|
||||
|
||||
.frost-pane .title {
|
||||
color: #d8c422;
|
||||
font-size: 40px;
|
||||
}
|
||||
.frost-pane .content {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.info-slide-content.forecast .frost-pane {
|
||||
max-height: 500px;
|
||||
}
|
||||
.info-slide-content.forecast .content {
|
||||
height: 400px;
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
@ -0,0 +1,737 @@
|
||||
@font-face {
|
||||
font-family: 'Zemestro Std';
|
||||
src: url('fonts/ZemestroStd.eot');
|
||||
src: url('fonts/ZemestroStd.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/ZemestroStd.woff') format('woff'),
|
||||
url('fonts/ZemestroStd.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Interstate';
|
||||
src: url('fonts/Interstate Regular.eot');
|
||||
src: url('fonts/Interstate Regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/Interstate Regular.woff') format('woff'),
|
||||
url('fonts/Interstate Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Interstate Mono';
|
||||
src: url('fonts/hinted-subset-InterstateMono.eot');
|
||||
src: url('fonts/hinted-subset-InterstateMono.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/hinted-subset-InterstateMono.woff') format('woff'),
|
||||
url('fonts/hinted-subset-InterstateMono.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Interstate';
|
||||
src: url('fonts/hinted-subset-Interstate-Bold.eot');
|
||||
src: url('fonts/hinted-subset-Interstate-Bold.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/hinted-subset-Interstate-Bold.woff') format('woff'),
|
||||
url('fonts/Interstate Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
h1,
|
||||
p,
|
||||
a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Zemestro Std';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
html *{
|
||||
box-sizing:border-box;
|
||||
font-size:100%
|
||||
}
|
||||
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background-color:#000;
|
||||
font-size:100%
|
||||
}
|
||||
|
||||
#main {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
overflow: hidden;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
width:1440px;
|
||||
height:1080px;
|
||||
}
|
||||
|
||||
#main > #template {
|
||||
display:block;
|
||||
max-height: 100%;
|
||||
max-width:100%;
|
||||
}
|
||||
|
||||
|
||||
.leaflet-top,
|
||||
.leaflet-bottom {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
#info-slides-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 92px;
|
||||
width: 963px;
|
||||
height: 572px;
|
||||
z-index: 1;
|
||||
padding: 6px 0 6px 6px;
|
||||
box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.35);
|
||||
background-color:#001668;
|
||||
background: -moz-linear-gradient(-45deg, rgba(0,22,104,1) 0%, rgba(0,13,40,1) 100%);
|
||||
background: -webkit-linear-gradient(-45deg, rgba(0,22,104,1) 0%,rgba(0,13,40,1) 100%);
|
||||
background: linear-gradient(135deg, rgba(0,22,104,1) 0%,rgba(0,13,40,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001668', endColorstr='#000d28',GradientType=1 );
|
||||
}
|
||||
|
||||
#info-slides-header,
|
||||
.info-slide .info-subheader {
|
||||
position: relative;
|
||||
color:white;
|
||||
width:100%;
|
||||
padding:0 7px;
|
||||
}
|
||||
|
||||
#info-slides-header {
|
||||
flex:1;
|
||||
background-color:#2267b7;
|
||||
height: 34px;
|
||||
max-height: 34px;
|
||||
font-size: 22px;
|
||||
overflow:hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#info-slides-header .hscroller {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
transform: scale(1.2,1);
|
||||
transform-origin: left center;
|
||||
top: 50%;
|
||||
-webkit-transform: scale(1.1,1) translateY(-50%);
|
||||
-ms-transform: scale(1.1,1) translateY(-50%);
|
||||
transform: scale(1.1,1) translateY(-50%);
|
||||
}
|
||||
|
||||
|
||||
#info-slides-header .divider-arrow {
|
||||
font-size: 22px;
|
||||
display: inline-block;
|
||||
transform: scale(.7,1);
|
||||
transform-origin: left center;
|
||||
font-weight: bold;
|
||||
padding: 0 7px;
|
||||
}
|
||||
|
||||
#info-slides-header span.city {
|
||||
letter-spacing: 1px;
|
||||
text-transform:uppercase;
|
||||
}
|
||||
|
||||
#info-slides-header span.city,
|
||||
#info-slides-header span.divider-arrow{
|
||||
opacity:0.5;
|
||||
}
|
||||
#info-slides-header span.city.current {
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
#info-slide-container {
|
||||
flex: 1;
|
||||
//position: relative;
|
||||
}
|
||||
|
||||
#radar-container {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.35);
|
||||
background-color:#001668;
|
||||
background: -moz-linear-gradient(-45deg, rgba(0,22,104,1) 0%, rgba(0,13,40,1) 100%);
|
||||
background: -webkit-linear-gradient(-45deg, rgba(0,22,104,1) 0%,rgba(0,13,40,1) 100%);
|
||||
background: linear-gradient(135deg, rgba(0,22,104,1) 0%,rgba(0,13,40,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001668', endColorstr='#000d28',GradientType=1 );
|
||||
}
|
||||
#radar-1{
|
||||
flex:1;
|
||||
box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.35);
|
||||
background-color:#001668;
|
||||
background: -moz-linear-gradient(-45deg, rgba(0,22,104,1) 0%, rgba(0,13,40,1) 100%);
|
||||
background: -webkit-linear-gradient(-45deg, rgba(0,22,104,1) 0%,rgba(0,13,40,1) 100%);
|
||||
background: linear-gradient(135deg, rgba(0,22,104,1) 0%,rgba(0,13,40,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001668', endColorstr='#000d28',GradientType=1 );
|
||||
}
|
||||
.info-slide {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.info-slide .info-subheader {
|
||||
display:flex;
|
||||
flex-flow:row nowrap;
|
||||
justify-content:space-between;
|
||||
background-color:#0018cc;
|
||||
font-size: 32px;
|
||||
height:55px;
|
||||
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
|
||||
z-index: 4;
|
||||
text-shadow: 2px 2px 4px #000;
|
||||
}
|
||||
|
||||
.info-slide .info-subheader span{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.info-slide-content br {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.radar-slide{
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.city-info-slide{
|
||||
position:relative;
|
||||
background: transparent url('/images/bluebuildings.jpg') no-repeat bottom;
|
||||
background-size:cover;
|
||||
}
|
||||
|
||||
.city-info-slide .info-subheader {
|
||||
padding-right: 10%;
|
||||
}
|
||||
.city-info-slide #subhead-city {
|
||||
font-size: 28px;
|
||||
padding-top: 3px;
|
||||
right: 98px;
|
||||
}
|
||||
|
||||
|
||||
.info-slide-content {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
width:100%;
|
||||
flex:1;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.city-info-slide .curve {
|
||||
position: absolute;
|
||||
background-position: 0 0;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 200% 200%;
|
||||
}
|
||||
|
||||
.city-info-slide .yellow {
|
||||
background-image: url(/images/yellow-curve.svg);
|
||||
filter: drop-shadow(4px 0px 4px rgba(0,0,0,0.75));
|
||||
}
|
||||
|
||||
.city-info-slide .yellow.left {
|
||||
top: 5%;
|
||||
left: -10.6%;
|
||||
z-index: 3;
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.city-info-slide .yellow.right {
|
||||
background-position: 100% 0;
|
||||
top: -15%;
|
||||
right: -19%;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
|
||||
.city-info-slide .blue {
|
||||
background-image: url(/images/blue-curve.svg);
|
||||
background-size: 200% 100%;
|
||||
width: 22%;
|
||||
height: 120%;
|
||||
top: 1%;
|
||||
left: -6%;
|
||||
opacity: 0.7;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.city-info-slide .white {
|
||||
background-image: url(/images/white-curve.svg);
|
||||
background-image: url(/images/white-curve.svg);
|
||||
background-size: 200% 100%;
|
||||
background-position: 100% 0;
|
||||
width: 22%;
|
||||
height: 120%;
|
||||
top: 2.3%;
|
||||
right: -6.7%;
|
||||
opacity: 0.2;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
||||
.radar-color-legend {
|
||||
font-size: 18px;
|
||||
position:absolute;
|
||||
text-align:right;
|
||||
right:5%;
|
||||
top: 1.2%;
|
||||
}
|
||||
|
||||
.radar-color-legend>img{
|
||||
width:45%;
|
||||
height: 13px;
|
||||
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
|
||||
}
|
||||
|
||||
|
||||
.leaflet-overlay-pane canvas {
|
||||
filter: drop-shadow(0px 2px 2px #000);
|
||||
}
|
||||
|
||||
|
||||
|
||||
#date-time,
|
||||
#city,
|
||||
#current-conditions *,
|
||||
#date-time * {
|
||||
font-family: 'Interstate';
|
||||
font-weight:bold;
|
||||
text-shadow: none;
|
||||
text-align:right;
|
||||
color:#1b1b1b;
|
||||
}
|
||||
|
||||
#date-time {
|
||||
position: absolute;
|
||||
top: 98px;
|
||||
width: 457px;
|
||||
}
|
||||
|
||||
#date-time * {
|
||||
font-family: 'Interstate Mono';
|
||||
font-size: 25px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
|
||||
#time {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
#city {
|
||||
font-size: 37px;
|
||||
padding-top: 26px;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
margin-left:140px;
|
||||
width: 311px;
|
||||
height: 91px;
|
||||
top: 284px;
|
||||
left: 0;
|
||||
line-height: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#current-conditions {
|
||||
font-family: 'Interstate';
|
||||
position:absolute;
|
||||
top:376px;
|
||||
left:0;
|
||||
width:452px;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
#conditions-icon {
|
||||
position: absolute;
|
||||
left: 300px;
|
||||
background-size: 100% 100%;
|
||||
width: 144px;
|
||||
height: 145px;
|
||||
background-repeat: no-repeat;
|
||||
top: 394px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
|
||||
#now {
|
||||
font-size: 49px;
|
||||
margin: 1.6% 0 0 31%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#current-temp {
|
||||
font-size: 70px;
|
||||
margin: 4.4% 0 0 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
#current-info {
|
||||
font-size: 27px;
|
||||
margin: 4.2% 0 0 31%;
|
||||
text-align: left;
|
||||
width: 66%;
|
||||
}
|
||||
|
||||
#minimap-title{
|
||||
font-family: 'Interstate';
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
width: 31.4%;
|
||||
top: 638px;
|
||||
text-align: right;
|
||||
color: #fff;
|
||||
font-size: 25px;
|
||||
padding: 7px 15px 0 0;
|
||||
text-shadow: 2px 2px 4px #000;
|
||||
}
|
||||
|
||||
#minimap {
|
||||
position: absolute;
|
||||
width: 31.35%;
|
||||
height: 20.5%;
|
||||
left: 0;
|
||||
top: 677px;
|
||||
background: #333;
|
||||
z-index: 1;
|
||||
box-shadow: 0px 8px 15px 0px rgba(0,0,0,0.35);
|
||||
}
|
||||
|
||||
#forecast-shadow {
|
||||
position: absolute;
|
||||
height: 18.85%;
|
||||
width: 66.87%;
|
||||
right: 0;
|
||||
top: 63%;
|
||||
overflow: hidden;
|
||||
background:#8cadd1;
|
||||
box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.35);
|
||||
}
|
||||
|
||||
#forecast-header {
|
||||
width: 100%;
|
||||
min-height: 20.5%;
|
||||
font-size: 28px;
|
||||
padding-left: 1%;
|
||||
background: #eed76b;
|
||||
}
|
||||
|
||||
#forecast-header *{
|
||||
font-family: 'Interstate';
|
||||
font-weight:bold;
|
||||
text-transform:uppercase;
|
||||
display:inline-block;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
#forecast-city{
|
||||
padding-right: 2%;
|
||||
}
|
||||
|
||||
#forecast-title{
|
||||
color: #001668;
|
||||
}
|
||||
|
||||
#forecast-text,
|
||||
#forecast-text * {
|
||||
font-family: 'Interstate';
|
||||
font-size: 40px;
|
||||
}
|
||||
#forecast-text{
|
||||
position: absolute;
|
||||
padding: 0.1% 1%;
|
||||
min-height: 75%;
|
||||
max-height: 75%;
|
||||
height:75%;
|
||||
width: 100%;
|
||||
margin-top: 0.4%;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
#forecast-tiles{
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 79.6%;
|
||||
}
|
||||
|
||||
.forecast-tile {
|
||||
position:relative;
|
||||
background: #5681be;
|
||||
background: -moz-linear-gradient(left, #5783cc 0%, #c4d9ff 100%);
|
||||
background: -webkit-linear-gradient(left, #5783cc 0%,#c4d9ff 100%);
|
||||
background: linear-gradient(to right, #5783cc 0%,#c4d9ff 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5783cc', endColorstr='#c4d9ff',GradientType=1 );
|
||||
}
|
||||
.forecast-tile:last-child{
|
||||
flex-grow: 100;
|
||||
border-right:none !important;
|
||||
}
|
||||
|
||||
.forecast-tile .width-sizer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.forecast-tile .header,
|
||||
.forecast-tile .footer{
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
height: 25%;
|
||||
padding: 5px 11px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.forecast-tile.daily {
|
||||
width: 18%;
|
||||
}
|
||||
|
||||
|
||||
.forecast-tile.daily .header{
|
||||
background: -moz-linear-gradient(left, #001668 0%, #4564c4 100%);
|
||||
background: -webkit-linear-gradient(left, #001668 0%,#4564c4 100%);
|
||||
background: linear-gradient(to right, #001668 0%,#4564c4 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001668', endColorstr='#4564c4',GradientType=1 );
|
||||
background-color: #001668;
|
||||
}
|
||||
/*
|
||||
.forecast-tile:last-child .header{
|
||||
padding-top: 0.8%;
|
||||
}
|
||||
*/
|
||||
.forecast-tile.daily.weekend .header{
|
||||
color:#001668;
|
||||
background: -moz-linear-gradient(left, #8caaea 0%, #c4d9ff 100%);
|
||||
background: -webkit-linear-gradient(left, #8caaea 0%,#c4d9ff 100%);
|
||||
background: linear-gradient(to right, #8caaea 0%,#c4d9ff 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8caaea', endColorstr='#c4d9ff',GradientType=1 );
|
||||
background-color:#8caaea;
|
||||
}
|
||||
.forecast-tile.daily .icon {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 65%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin-left:3%;
|
||||
}
|
||||
.forecast-tile.daily:last-child .icon {
|
||||
margin-left:1%;
|
||||
}
|
||||
.forecast-tile .high,
|
||||
.forecast-tile .low {
|
||||
font-family: 'Interstate';
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
font-weight: bold;
|
||||
top: 10%;
|
||||
}
|
||||
.forecast-tile:last-child .high,
|
||||
.forecast-tile:last-child .low{
|
||||
padding-right: 30%;
|
||||
}
|
||||
.forecast-tile .high{
|
||||
top: 30%;
|
||||
font-size: 48px;
|
||||
}
|
||||
.forecast-tile.daily .low {
|
||||
color: rgba(0,0,0,0.5);
|
||||
top:63%;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.forecast-tile.hourly{
|
||||
width:22.3%;
|
||||
border-right:solid 4px #fff;
|
||||
}
|
||||
|
||||
.forecast-tile.hourly .icon{
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 50%;
|
||||
top: 12%;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.forecast-tile.hourly .hourly-high {
|
||||
position: absolute;
|
||||
right: 5.5%;
|
||||
bottom: 0;
|
||||
width: 28%;
|
||||
height: 0;
|
||||
padding-top: 1%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.forecast-tile.hourly .high {
|
||||
top:0;
|
||||
//left: 0;
|
||||
position: relative;
|
||||
padding-bottom: 15%;
|
||||
opacity:0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.forecast-tile.hourly .temp-bar {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
bottom: 7%;
|
||||
background: -moz-linear-gradient(left, #656565 0%, #fcfcfc 50%, #656565 100%);
|
||||
background: -webkit-linear-gradient(left, #656565 0%,#fcfcfc 50%,#656565 100%);
|
||||
background: linear-gradient(to right, #656565 0%,#fcfcfc 50%,#656565 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#656565', endColorstr='#656565',GradientType=1 );
|
||||
background-color: #656565;
|
||||
}
|
||||
.forecast-tile.hourly .footer{
|
||||
font-size: 23px;
|
||||
text-transform: lowercase;
|
||||
padding-top: 1.9%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
color: white;
|
||||
background: -moz-linear-gradient(left, #4b411e 0%, #ae9b57 100%);
|
||||
background: -webkit-linear-gradient(left, #4b411e 0%,#ae9b57 100%);
|
||||
background: linear-gradient(to right, #4b411e 0%,#ae9b57 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b411e', endColorstr='#ae9b57',GradientType=1 );
|
||||
background-color: #4b411e;
|
||||
}
|
||||
.forecast-tile.hourly:last-child .footer{
|
||||
padding-top: 1%;
|
||||
}
|
||||
|
||||
.forecast-tile.hourly:last-child .width-sizer {
|
||||
width:66%
|
||||
}
|
||||
|
||||
#logo-area {
|
||||
position: absolute;
|
||||
width: 31.528%;
|
||||
height: 9.398%;
|
||||
left: 0;
|
||||
top: 83.4%;
|
||||
}
|
||||
|
||||
#logo-area img {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 65%;
|
||||
top: 19%;
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
#arrow-img {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 3.7%;
|
||||
left: 31.35%;
|
||||
top: 897px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
||||
#marquee1 {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
left: 32%;
|
||||
top: 898px;
|
||||
width: 68.507%;
|
||||
height: 43px;
|
||||
margin-top:2px;
|
||||
font-size: 30px;
|
||||
text-shadow: 2px 2px 4px #000;
|
||||
}
|
||||
#marquee>div{
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
width:auto;
|
||||
}
|
||||
#marquee1 span {
|
||||
padding-right:3vw;
|
||||
}
|
||||
|
||||
|
||||
#marquee2 {
|
||||
position:absolute;
|
||||
left:31.35%;
|
||||
top:87.2%;
|
||||
width:68.507%;
|
||||
height:5.602%;
|
||||
font-size: 43px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#marquee2 div {
|
||||
//animation-duration: 70s;
|
||||
}
|
||||
|
||||
.marquee {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.marquee,
|
||||
.marquee * {
|
||||
//box-shadow: 0 0 0 #000;
|
||||
//transform: translate3d(0,0,0);
|
||||
//white-space: nowrap;
|
||||
}
|
||||
/*
|
||||
.marquee>div {
|
||||
/* margin: 0 auto; */
|
||||
/* overflow: hidden; */
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
left: 100%;
|
||||
position: relative;
|
||||
}
|
||||
*/
|
||||
#marquee-container {
|
||||
width:980px;
|
||||
}
|
||||
.marquee:hover div {
|
||||
// animation-play-state: paused;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 261 KiB |
|
After Width: | Height: | Size: 261 KiB |
|
After Width: | Height: | Size: 242 KiB |
|
After Width: | Height: | Size: 228 KiB |
|
After Width: | Height: | Size: 236 KiB |
|
After Width: | Height: | Size: 231 KiB |
|
After Width: | Height: | Size: 231 KiB |
|
After Width: | Height: | Size: 241 KiB |
|
After Width: | Height: | Size: 236 KiB |
|
After Width: | Height: | Size: 261 KiB |
|
After Width: | Height: | Size: 244 KiB |
|
After Width: | Height: | Size: 210 KiB |
|
After Width: | Height: | Size: 261 KiB |
|
After Width: | Height: | Size: 209 KiB |
|
After Width: | Height: | Size: 202 KiB |
|
After Width: | Height: | Size: 210 KiB |
|
After Width: | Height: | Size: 194 KiB |
|
After Width: | Height: | Size: 194 KiB |
|
After Width: | Height: | Size: 194 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 212 KiB |
|
After Width: | Height: | Size: 216 KiB |
|
After Width: | Height: | Size: 210 KiB |
|
After Width: | Height: | Size: 261 KiB |
|
After Width: | Height: | Size: 217 KiB |
|
After Width: | Height: | Size: 195 KiB |
|
After Width: | Height: | Size: 203 KiB |
|
After Width: | Height: | Size: 201 KiB |
|
After Width: | Height: | Size: 216 KiB |
|
After Width: | Height: | Size: 261 KiB |
|
After Width: | Height: | Size: 203 KiB |
|
After Width: | Height: | Size: 265 KiB |
|
After Width: | Height: | Size: 265 KiB |
|
After Width: | Height: | Size: 226 KiB |
|
After Width: | Height: | Size: 261 KiB |
|
After Width: | Height: | Size: 237 KiB |
|
After Width: | Height: | Size: 237 KiB |
|
After Width: | Height: | Size: 242 KiB |
|
After Width: | Height: | Size: 233 KiB |
|
After Width: | Height: | Size: 194 KiB |
|
After Width: | Height: | Size: 222 KiB |
|
After Width: | Height: | Size: 228 KiB |
|
After Width: | Height: | Size: 261 KiB |
|
After Width: | Height: | Size: 239 KiB |
|
After Width: | Height: | Size: 247 KiB |
|
After Width: | Height: | Size: 250 KiB |
|
After Width: | Height: | Size: 235 KiB |
|
After Width: | Height: | Size: 226 KiB |
|
After Width: | Height: | Size: 536 B |
|
After Width: | Height: | Size: 422 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 14 KiB |