diff --git a/webroot/css/weatherscan.css b/webroot/css/weatherscan.css index 9994d27..65d1ef8 100644 --- a/webroot/css/weatherscan.css +++ b/webroot/css/weatherscan.css @@ -67,6 +67,707 @@ src: url(/fonts/newfonts/FrutigerCondensedBQ-Black.woff) format("woff"); font-style: normal; } +.info-slide .nodata { + transform: translate(0, 60px); + position: absolute; + white-space: nowrap; + font-family: Frutiger; + padding: 23%; + padding-left: 23.5%; + color: #fff; + font-size: 48px; + text-shadow: #000 2px 2px 4px; + z-index: 2000 +} +.info-slide .tempunavailable { + transform: translate(0, 60px); + position: absolute; + white-space: nowrap; + font-family: Frutiger; + padding-top: 23.5%; + padding-left: 17.5%; + color: #fff; + font-size: 48px; + text-shadow: #000 2px 2px 4px; + z-index: 2000 +} +.radar-slide .tempunavailable { + transform: translate(0, 0); +} +.info-slide .noreport { + transform: translate(0, 60px); + position: absolute; + white-space: nowrap; + font-family: Frutiger; + padding-top: 23.5%; + padding-left: 31.4%; + color: #fff; + font-size: 48px; + text-shadow: #000 2px 2px 4px; + z-index: 2000 +} +.severe-city-info .frost-pane:first-of-type { + min-width: 55%; + margin-right: .8%; + background: linear-gradient(to right, rgba(183, 183, 183, 1) 0, rgba(183, 183, 183, 0.6975) 100%); +} +.severe-city-info .frost-pane.right { + background: linear-gradient(to right, rgba(183, 183, 183, 0.6931) 0, rgba(183, 183, 183, 0.45) 100%); +} +.severe-city-info .frost-pane.left * { + position: absolute; + min-width: 55%; + padding-top: 7.5px; + line-height: 175% +} + +.severe-frost-pane .labels { + color: #d8c422; + left: 13%; + font-size: 37.5px; +} + +.severe-city-info .frost-pane .data { + right: 10%; + font-size: 37.5px; + text-align: right; +} + +.severe-city-info .frost-pane.right { + display: flex; + flex-direction: column; + align-items: center; + padding-top: 30px +} + +.severe-city-info .frost-pane .icon { + background-repeat: no-repeat; + background-size: contain; + background-position: center center; + width: 70%; + height: 47.5%; + position: absolute; + transform: translate(0, -47.5px); +} + +.severe-city-info .frost-pane .conditions { + display:flex; + align-items: center; + justify-content: center; + position: absolute; + font-size: 38.5px; + font-weight: 500; + top: 220px; + text-align: center; + text-transform: capitalize; + overflow-wrap: break-word; + width: 25%; + height: 50px +} +.severe-city-info .frost-pane .temp { + font-size: 70.5px; + font-weight: 700; + position: absolute; + top: 340px; + letter-spacing: 2.5px; +} +.severe-city-info .frost-pane.left * { + position: absolute; + min-width: 55%; + padding-top: 7.5px; + line-height: 175% +} +.severe-city-info .frost-pane .data { + right: 10%; + font-size: 37.5px; + text-align: right; +} + +.severe-city-info .frost-pane.right { + display: flex; + flex-direction: column; + align-items: center; + padding-top: 30px +} + +.severe-city-info .frost-pane .icon { + background-repeat: no-repeat; + background-size: contain; + background-position: center center; + width: 70%; + height: 47.5%; + position: absolute; + transform: translate(0, -47.5px); +} + +.severe-city-info .frost-pane .conditions { + display:flex; + align-items: center; + justify-content: center; + position: absolute; + font-size: 38.5px; + font-weight: 500; + top: 220px; + text-align: center; + text-transform: capitalize; + overflow-wrap: break-word; + width: 25%; + height: 50px +} +.severe-city-info .frost-pane .temp { + font-size: 70.5px; + font-weight: 700; + position: absolute; + top: 340px; + letter-spacing: 2.5px; +} +.info-slide-content.severe-daypart { + flex-direction: row +} +.info-slide-content.severe-daypart .frost-pane { + max-height: 411.25px; + padding-left: 62.5px; + display: flex; + flex-direction: row; + transform: translate(0px, 45px); +} +.info-slide-content.severe-daypart .hour { + width: 140px; + align-items: center; + margin-right: 58px; +} + +.info-slide-content.severe-daypart .hour.ii .thing { + background: #3e3d3e; + height: 35px; + width: 198px; + transform: translate(0px, -35px); +} +.info-slide-content.severe-daypart .hour.iii .thing { + background: #3e3d3e; + height: 35px; + width: 198px; + transform: translate(0px, -35px); +} +.info-slide-content.severe-daypart .hour.i .thing { + background: #3e3d3e; + height: 35px; + width: 240px; + padding-left: 40px; + transform: translate(-40px, -35px); +} +.info-slide-content.severe-daypart .hour.iv .thing { + background: #3e3d3e; + height: 35px; + width: 240px; + transform: translate(0px, -35px); +} +.info-slide-content.severe-daypart .hour .thing .thingtext { + color: #fff; + font-family: Frutiger; + font-size: 28px; + width: 140px; + height: 100%; + text-shadow: #000 0px 0px 0px; + transform: translate(0px, 2.5px); + display: flex; + align-items: center; + justify-content: center; +} +.info-slide-content.severe-daypart .tempbar { + position: absolute; + width: 140px; + height: 0; + background-color: #fefd5d; + background: linear-gradient(to top, #fffe21 0, #db5a14 100%); + bottom: 17.5px +} +.info-slide-content.severe-daypart .icon { + width: 140px; + height: 130px; + background-repeat: no-repeat; + background-size: contain; + background-position: center center; + position: absolute; + top: 10px +} +.info-slide-content.severe-daypart .condition { + color: #fff; + font-family: Frutiger; + font-size: 28px; + text-shadow: #000 2px 2px 2px; + height: 30px; + width: 100%; + text-align: center; + transform: translate(0px, 105px); + padding: 10px, 0px; + overflow-wrap: break-word; +} +.info-slide-content.severe-daypart .tempbar .temp { + color: #fff; + font-family: Frutiger; + font-size: 52px; + text-shadow: #000 2px 2px 2px; + height: 30px; + width: 100%; + text-align: center; + transform: translate(0px, 15px); + opacity: 0; +} +.info-slide-content.severe-daypart .tempbar .wind { + color: #24346f; + position: absolute; + font-family: Frutiger; + font-size: 28px; + text-shadow: #000 0px 0px 0px; + height: 30px; + width: 100%; + text-align: center; + bottom: 2.5px; + opacity: 0; +} +.severe-forecast .frost-pane { + padding: 1.5% 2% 1% 6.5%; + height: 446.25px; +} +.info-slide-content.severe-forecast .frost-pane { + max-height: 446.25px; +} + +.info-slide-content.severe-forecast .content { + height: 400px; + max-height: 400px; +} +.info-slide-content.severe-extended-forecast { + width: 100%; +} + +.info-slide-content.severe-extended-forecast .frost-pane { + transform: translate(0px, 45px); + max-height: 411.25px; + min-width: 165px +} +.info-slide-content.severe-extended-forecast .frost-pane.iw { + background: linear-gradient(to right, rgba(183, 183, 183, 1) 0, rgba(183, 183, 183, 0.89715) 100%); +} +.info-slide-content.severe-extended-forecast .frost-pane.iiw { + background: linear-gradient(to right, rgba(183, 183, 183, 0.8933) 0, rgba(183, 183, 183, 0.79045) 100%); +} + +.info-slide-content.severe-extended-forecast .frost-pane.iiiw { + background: linear-gradient(to right, rgba(183, 183, 183, 0.7866) 0, rgba(183, 183, 183, 0.68485) 100%); + min-width: 164px; + max-width: 164px +} +.info-slide-content.severe-extended-forecast .frost-pane.ivw { + background: linear-gradient(to right, rgba(183, 183, 183, 0.6799) 0, rgba(183, 183, 183, 0.57815) 100%); + min-width: 164px; + max-width: 164px +} +.info-slide-content.severe-extended-forecast .lfrost-pane { + transform: translate(0px, 45px); + max-height: 411.25px +} +.info-slide-content.severe-extended-forecast .frost-pane .icon { + background-repeat: no-repeat; + background-size: contain; + background-position: center center; + height: 130px; + width: 100%; + transform: translate(0px, 10px); +} +.info-slide-content.severe-extended-forecast .lfrost-pane .icon { + background-repeat: no-repeat; + background-size: contain; + background-position: center center; + height: 130px; + width: 83.55%; + transform: translate(0px, 10px); +} +.info-slide-content.severe-extended-forecast .thingg { + color: #fff; + font-family: Frutiger; + font-size: 30px; + text-shadow: #000 2px 2px 4px; + background: #3e3d3e; + height: 35px; + width: 100%; + position: absolute; + display: flex; + top: 70px; + z-index: 388688; + text-align: center; +} +.info-slide-content.severe-extended-forecast .thingg .thingday { + color: #fff; + font-family: Frutiger; + font-size: 30px; + text-shadow: #000 2px 2px 4px; + height: 35px; + min-width: 165px; + margin-left: 6.5px; + padding-top: 5px; + z-index: 388690; + text-align: center; + justify-content: center; +} +.info-slide-content.severe-extended-forecast .thingg .thingday.iw { + margin-left: 0px; +} +.info-slide-content.severe-extended-forecast .thingg .thingday.iiiw { + min-width: 164px; +}.info-slide-content.severe-extended-forecast .thingg .thingday.ivw { + min-width: 164px; + margin-left: 7.5px; +} +.info-slide-content.severe-extended-forecast .frost-pane .temphigh { + color: #fff; + font-family: Frutiger; + font-weight: 400; + font-size: 58.5px; + text-shadow: #000 2px 2px 2px; + height: 70px; + width: 100%; + background: #5a8aec; + box-shadow: 0 2px 1px 0 rgba(0, 0, 0, .35); + display: flex; + align-items: center; + justify-content: center; + transform: translate(0px, 13.5px); +} +.info-slide-content.severe-extended-forecast .frost-pane.iw .temphigh { + background: linear-gradient(to right, rgba(105, 105, 105, 1) 0, rgba(105, 105, 105, 0.89715) 100%); +} +.info-slide-content.severe-extended-forecast .frost-pane.iiw .temphigh { + background: linear-gradient(to right, rgba(105, 105, 105, 0.8933) 0, rgba(105, 105, 105, 0.79045) 100%); +} +.info-slide-content.severe-extended-forecast .frost-pane.iiiw .temphigh { + background: linear-gradient(to right, rgba(105, 105, 105, 0.8933) 0, rgba(105, 105, 105, 0.79045) 100%); +} +.info-slide-content.severe-extended-forecast .frost-pane.ivw .temphigh { + background:linear-gradient(to right, rgba(105, 105, 105, 0.6799) 0, rgba(105, 105, 105, 0.57815) 100%); +} + +.info-slide-content.severe-extended-forecast .lfrost-pane .temphigh { + height: 70px; + width: 100%; + background: linear-gradient(to right, rgba(105, 105, 105, 0.5732) 0, rgba(105, 105, 105, 0.45) 100%); + box-shadow: 0 2px 1px 0 rgba(0, 0, 0, .35); + transform: translate(0px, 13.5px); +} +.info-slide-content.severe-extended-forecast .lfrost-pane .temphigh .temphightext { + color: #fff; + font-family: Frutiger; + font-size: 58.5px; + text-shadow: #000 2px 2px 2px; + height: 100%; + width: 83.55%; + display: flex; + align-items: center; + justify-content: center; +} + +.info-slide-content.severe-extended-forecast .frost-pane .templow { + + color: #fff; + font-family: Frutiger; + font-size: 58.5px; + text-shadow: #000 2px 2px 2px; + height: 75px; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + transform: translate(0px, 23.5px); +} +.info-slide-content.severe-extended-forecast .lfrost-pane .templow { + color: #fff; + font-family: Frutiger; + font-size: 58.5px; + text-shadow: #000 2px 2px 2px; + height: 75px; + width: 83.55%; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + transform: translate(0px, 23.5px); +} +.info-slide-content.severe-extended-forecast .frost-pane .conditions { + color: #fff; + font-family: Frutiger; + font-size: 25px; + text-shadow: #000 2px 2px 2px; + height: 100px; + line-height: 125%; + width: 100%; + padding: 10px; + text-align: center; + transform: translate(0px, 12.5px); + overflow-wrap: break-word; +} +.info-slide-content.severe-extended-forecast .lfrost-pane .conditions { + color: #fff; + font-family: Frutiger; + font-size: 25px; + line-height: 125%; + text-shadow: #000 2px 2px 2px; + height: 100px; + width: 83.55%; + padding: 10px; + text-align: center; + transform: translate(0px, 12.5px); + overflow-wrap: break-word; +} +.info-slide-content.severe-extended-forecast .linebreak { + transform: translate(0px, 10px); + height: 453.75px; + width: 6.5px +} +.info-slide-content.severe-extended-forecast .linebreak.iii { + height: 453.75px; + width: 7.5px +} +.info-slide-content.severe-extended-forecast .lfrost-pane.vw { + min-height: 100%; + background: linear-gradient(to right, rgba(183, 183, 183, 0.5732) 0, rgba(183, 183, 183, 0.45) 100%); + z-index: 388686; + flex: 1.4 +} +.info-slide-content.severe-almanac { + display: flex; + flex-direction: column; +} +.info-slide-content.severe-almanac .frost-pane.half { + max-height: 237.725px; +} + +.info-slide-content.severe-almanac .frost-pane.half .averagetitle { + font-family: Frutiger; + color: #d8c422; + font-size: 37.5px; + padding-left: 52.5px; + padding-top: 25px; +} + +.info-slide-content.severe-almanac .frost-pane.half .ahigh { + position: absolute; + font-family: Frutiger; + color: #fff; + font-size: 32.5px; + left: 132.5px; + top: 122.5px; +} +.info-slide-content.severe-almanac .frost-pane.half .ahightext { + position: absolute; + font-family: Frutiger; + color: #fff; + font-size: 52px; + left: 267.5px; + top: 111px; +} + +.info-slide-content.severe-almanac .frost-pane.half .alow { + position: absolute; + font-family: Frutiger; + color: #fff; + font-size: 32.5px; + left: 132.5px; + top: 182.5px; +} + +.info-slide-content.severe-almanac .frost-pane.half .alowtext { + position: absolute; + font-family: Frutiger; + color: #fff; + font-size: 52px; + left: 267.5px; + top: 171.5px; +} + +.info-slide-content.severe-almanac .frost-pane.half .recordtitle { + font-family: Frutiger; + position: absolute; + color: #d8c422; + font-size: 37.5px; + left: 402.5px; + top: 60px; +} + +.info-slide-content.severe-almanac .frost-pane.half .rhigh { + position: absolute; + font-family: Frutiger; + color: #fff; + font-size: 32.5px; + left: 457.5px; + top: 122.5px; +} +.info-slide-content.severe-almanac .frost-pane.half .rhightext { + position: absolute; + font-family: Frutiger; + color: #fff; + font-size: 52px; + left: 572.5px; + top: 111px; +} + +.info-slide-content.severe-almanac .frost-pane.half .rhighyear { + position: absolute; + font-family: Frutiger; + color: #fff; + font-size: 37.5px; + left: 667.5px; + top: 122.5px; +} + +.info-slide-content.severe-almanac .frost-pane.half .rlow { + position: absolute; + font-family: Frutiger; + color: #fff; + font-size: 32.5px; + left: 457.5px; + top: 182.5px; +} + +.info-slide-content.severe-almanac .frost-pane.half .rlowtext { + position: absolute; + font-family: Frutiger; + color: #fff; + font-size: 52px; + left: 572.5px; + top: 171.5px; +} + +.info-slide-content.severe-almanac .frost-pane.half .rlowyear { + position: absolute; + font-family: Frutiger; + color: #fff; + font-size: 37.5px; + left: 667.5px; + top: 182.5px; +} + + +.info-slide-content.severe-almanac .frost-pane.half .thing { + color: #fff; + font-family: Frutiger; + font-size: 30px; + background: rgb(42, 58, 138); + height: 35px; + width: 100%; + padding-top: 5px; + padding-left: 60px; +} + +.info-slide-content.severe-almanac .frost-pane.purple { + max-height: 203.725px; + background-color: rgb(42, 58, 138); + background: linear-gradient(to right, rgb(42, 58, 138, 0) 0, rgb(42, 58, 138, .75) 100%) + +} + +.info-slide-content.severe-almanac .frost-pane.purple .sunrisetitle { + font-family: Frutiger; + color: #d8c422; + position: absolute; + font-size: 36px; + left: 20px; + top: 55px; +} +.info-slide-content.severe-almanac .frost-pane.purple .sunrisetext { + font-family: Frutiger; + color: #fff; + position: absolute; + font-size: 40px; + left: 160px; + top: 52.5px; +} + +.info-slide-content.severe-almanac .frost-pane.purple .sunsettitle { + font-family: Frutiger; + color: #d8c422; + position: absolute; + font-size: 36px; + left: 20px; + top: 125px; +} +.info-slide-content.severe-almanac .frost-pane.purple .sunsettext { + font-family: Frutiger; + color: #fff; + position: absolute; + font-size: 40px; + left: 160px; + top: 122.5px; +} +.info-slide-content.severe-almanac .frost-pane.purple .phase { + display: flex; + flex-direction: column; + width: 100px; + padding-right: 0px; + height: 100%; + top: 0; + position: absolute; +} +.info-slide-content.severe-almanac .frost-pane.purple .phase.iv{ + right: 37.5px; +} +.info-slide-content.severe-almanac .frost-pane.purple .phase.iii{ + right: 165px; +} +.info-slide-content.severe-almanac .frost-pane.purple .phase.ii{ + right: 292.5px; +} +.info-slide-content.severe-almanac .frost-pane.purple .phase.i{ + right: 421px; +} +.info-slide-content.severe-almanac .frost-pane.purple .phase .phasetext { + font-family: Frutiger; + color: #d8c422; + font-size: 22px; + padding-top: 20px; + align-self: center; + transform: translate(-4.5px, 0px); +} +.info-slide-content.severe-almanac .frost-pane.purple .phase .icon { + background-repeat: no-repeat; + background-size: contain; + background-position: center center; + width: 125px; + min-height: 125px; + position: absolute; + top: 31.5px; + align-self: center; + -webkit-filter: drop-shadow(0 0 8px rgba(0, 0, 0, .95)); + filter: drop-shadow(0 0 8px rgba(0, 0, 0, .95)); +} + +.info-slide-content.severe-almanac .frost-pane.purple .phase.i .icon{ +background-image: url(/images/icons/moonphases/new.png); +} +.info-slide-content.severe-almanac .frost-pane.purple .phase.ii .icon{ + background-repeat: no-repeat; + background-size: contain; + background-position: center center; + background-image: url(/images/icons/moonphases/half1.png); +} +.info-slide-content.severe-almanac .frost-pane.purple .phase.iii .icon{ + background-image: url(/images/icons/moonphases/full.png); +} +.info-slide-content.severe-almanac .frost-pane.purple .phase.iv .icon{ + background-image: url(/images/icons/moonphases/half2.png); +} + +.info-slide-content.severe-almanac .frost-pane.purple .phase .date { + font-family: Frutiger; + color: #fff; + font-size: 25px; + padding-top: 0px; + align-self: center; + position: absolute; + bottom: 15px; +} + .city-info, .info-slide-content { display: flex; @@ -87,6 +788,9 @@ z-index: 388686; flex: 1 } +.severe-city-info-slide .frost-pane { + background: linear-gradient(to right, rgba(183, 183, 183, 1) 0, rgba(183, 183, 183, .45) 100%); +} .city-info .frost-pane:first-of-type { min-width: 55%; @@ -154,11 +858,6 @@ letter-spacing: 2.5px; } -.forecast .frost-pane { - padding: 1.5% 2% 1% 6.5%; - height: 446.25px; -} - .frost-pane .title { color: #d8c422; font-size: 42px; @@ -274,21 +973,25 @@ bottom: 2.5px; opacity: 0; } +.forecast .frost-pane { + padding: 1.5% 2% 1% 6.5%; + height: 446.25px; +} .info-slide-content.forecast .frost-pane { max-height: 446.25px; } .info-slide-content.forecast .content { height: 400px; - max-height: 400px + max-height: 400px; } .info-slide-content.extended-forecast { width: 100%; } .info-slide-content.extended-forecast .frost-pane { - transform: translate(0px, 10px); - max-height: 446.25px; + transform: translate(0px, 45px); + max-height: 411.25px; min-width: 165px } .info-slide-content.extended-forecast .frost-pane.iw { @@ -300,22 +1003,19 @@ .info-slide-content.extended-forecast .frost-pane.iiiw { background: linear-gradient(to right, rgba(42, 82, 188, 0.7866) 0, rgba(42, 82, 188, 0.68485) 100%); - transform: translate(0px, 10px); - max-height: 446.25px; + transform: translate(0px, 45px); min-width: 164px; max-width: 164px } .info-slide-content.extended-forecast .frost-pane.ivw { background: linear-gradient(to right, rgba(42, 82, 188, 0.6799) 0, rgba(42, 82, 188, 0.57815) 100%); - transform: translate(0px, 10px); - max-height: 446.25px; + transform: translate(0px, 45px); min-width: 164px; max-width: 164px } .info-slide-content.extended-forecast .lfrost-pane { - - transform: translate(0px, 10px); - max-height: 446.25px + transform: translate(0px, 45px); + max-height: 411.25px } .info-slide-content.extended-forecast .frost-pane .icon { background-repeat: no-repeat; @@ -333,7 +1033,7 @@ width: 83.55%; transform: translate(0px, 10px); } -.info-slide-content.extended-forecast .frost-pane .thing { +.info-slide-content.extended-forecast .thingg { color: #fff; font-family: Frutiger; font-size: 30px; @@ -341,31 +1041,33 @@ background: #2a3a8a; height: 35px; width: 100%; - padding-top: 5px; + position: absolute; + display: flex; + top: 70px; + z-index: 388688; text-align: center; } -.info-slide-content.extended-forecast .lfrost-pane .thing { - background: #2a3a8a; - height: 35px; - width: 100%; -} -.info-slide-content.extended-forecast .lfrost-pane .thing .thingtext { +.info-slide-content.extended-forecast .thingg .thingday { color: #fff; font-family: Frutiger; font-size: 30px; text-shadow: #000 2px 2px 4px; - width: 83.55%; - padding-top: 5px; - text-align: center; -} -.info-slide-content.extended-forecast .linebreak .thing { - color: #fff; - font-family: Frutiger; - font-size: 52px; - text-shadow: #000 2px 2px 4px; - background: #2a3a8a; height: 35px; - width: 100%; + min-width: 165px; + margin-left: 6.5px; + padding-top: 5px; + z-index: 388690; + text-align: center; + justify-content: center; +} +.info-slide-content.extended-forecast .thingg .thingday.iw { + margin-left: 0px; +} +.info-slide-content.extended-forecast .thingg .thingday.iiiw { + min-width: 164px; +}.info-slide-content.extended-forecast .thingg .thingday.ivw { + min-width: 164px; + margin-left: 7.5px; } .info-slide-content.extended-forecast .frost-pane .temphigh { color: #fff; @@ -422,7 +1124,6 @@ text-shadow: #000 2px 2px 2px; height: 75px; width: 100%; - background: rgba(51, 103, 245, .1); display: flex; align-items: center; justify-content: center; @@ -436,7 +1137,6 @@ text-shadow: #000 2px 2px 2px; height: 75px; width: 83.55%; - background: rgba(51, 103, 245, .1); display: flex; align-items: center; justify-content: center; @@ -698,13 +1398,13 @@ background-image: url(/images/icons/moonphases/new.png); background-repeat: no-repeat; background-size: contain; background-position: center center; -background-image: url(/images/icons/moonphases/half1.png); + background-image: url(/images/icons/moonphases/half1.png); } .info-slide-content.almanac .frost-pane.purple .phase.iii .icon{ -background-image: url(/images/icons/moonphases/full.png); + background-image: url(/images/icons/moonphases/full.png); } .info-slide-content.almanac .frost-pane.purple .phase.iv .icon{ -background-image: url(/images/icons/moonphases/half2.png); + background-image: url(/images/icons/moonphases/half2.png); } .info-slide-content.almanac .frost-pane.purple .phase .date { @@ -1966,6 +2666,307 @@ body, html { width: 1440px; height: 1080px } +#startup { + position: relative; + top: 50%; + left: 50%; + overflow: hidden; + background-color: rgb(255, 255, 255); + transform: translate(-50%, -50%); + width: 1440px; + height: 1080px +} +.logocontainer { + position: absolute; + bottom: 10px; +} +.intellistarlogo { + object-fit: contain; + object-position: center; + width: 625px; + height: 205px; + display: block; + margin: 0px auto; + margin-top: 440px; +} +.blackbar { + height: 23.5%; + width: 100%; + position: absolute; + bottom: 0; + background-color: #161418; +} +.blackbar .introtext { + position: absolute; + width: 400px; + left: 8.05%; + top: 4.6%; + display: flex; + flex-direction: row; + flex-direction: column; +} +.blackbar .introtext .introtext { + white-space: nowrap; + position: relative; + font-family: Frutiger; + font-weight: 600; + color: #d8c422; + font-size: 31.5px; + letter-spacing: 1px; + padding-top: 6px; +} +#savebutton { + position: absolute; + top: 170px; + font-family: Frutiger; + font-weight: 600; + color: #d8c422; + font-size: 38px; + letter-spacing: 1px; + padding-top: 6px; +} + +.blackbar .twclogo { + object-fit: contain; + position: absolute; + width: 500px; + height: 175px; + right: 1.9%; + top: -9px; +} +.settingspanetitle { + position: absolute; + width: 100%; + text-align: center; + font-size: 56px; + top: 16px; +} +.settingspane{ + padding-top: 200px; +} +input{ + display: block; + position: relative; + margin: auto; + border-radius: 0px; + border-style: double; + width: 200px; + margin: 15px; + padding: 5px; +} +select{ + display: block; + position: relative; + margin: auto; + border-radius: 0px; + border-style: double; + width: 200px; + margin: 15px; + padding: 5px; +} +label{ + font-size: 20px; + width: 20px; + text-align: center; +} +#searchbar { + position: absolute; + top: 100px; + left: 50%; + transform: translate(-125%,0); + margin: auto 0px; + text-align: center; + z-index: 99; +} +#searchoption { + position: absolute; + top: 118px; + right: 50%; + transform: translate(40%,0); + margin: auto 0px; + text-align: center; +} +.autocomplete-items { + position: absolute; + border: 1px solid #d4d4d4; + border-bottom: none; + border-top: none; + z-index: 99; + /*position the autocomplete items to be the same width as the container:*/ + top: 100%; + left: 0; + right: 0; +} +.autocomplete-items div { + padding: 10px; + cursor: pointer; + background-color: #fff; + border-bottom: 1px solid #d4d4d4; +} +.autocomplete-items div:hover { + /*when hovering an item:*/ + background-color: #e9e9e9; +} +.autocomplete-active { + /*when navigating through the items using the arrow keys:*/ + background-color: DodgerBlue !important; + color: #ffffff; +} +#displayname { + position: absolute; + top: 100px; + right: 50%; + transform: translate(130%,0); + margin: auto 0px; + text-align: center; +} +#searchoption select{ + width: 100px; +} +#addlocationbuttons { + position: absolute; + top: 180px; + right: 50%; + transform: translate(50%,0); + margin: auto 0px; + text-align: center; + font-size: 18px; +} +.locationheader { + font-size: 32px; + padding-left: 50px; + padding-top: 15px; + padding-bottom: 15px; +} +.locationheader button{ + font-size: 20px; +} +#mainlocation { + position: relative; + margin-left: 50px; + border: solid; + width: 200px; + height: 150px; + font-size: 28px; + text-align: center; + font-size: 18px; +} +#extralocations { + display: flex; + position: absolute; + top: 260px; + left: 350px; +} +.extralocation { + border: solid; + height: 150px; + font-size: 28px; + text-align: center; + font-size: 18px; + margin-right: 50px; +} +#City8SlideLocations { + overflow: auto; + display: flex; + position: absolute; + width: 1400px; + top: 475px; + left: 50px; +} +.eightslideloc { + border: solid; + height: 150px; + flex-grow: 0; + flex-shrink: 0; + flex-basis: 200px; + margin-right: 50px; + font-size: 28px; + text-align: center; + font-size: 18px; +} +#cctickerheader { + position: absolute; + top: 617px; +} +#cctickerlocations { + overflow: auto; + display: flex; + position: absolute; + top: 675px; + left: 50px; + width: 1400px; +} +.cctickerloc { + border: solid; + height: 150px; + flex-grow: 0; + flex-shrink: 0; + flex-basis: 200px; + margin-right: 50px; + font-size: 28px; + text-align: center; + font-size: 18px; +} + +#pageleft { + position: absolute; + font-size: 125px; + top: 30%; + left: 10px; + margin: auto, 0px; +} +#pageright { + position: absolute; + font-size: 125px; + top: 30%; + right: 10px; + margin: auto, 0px; +} +.weathersettingspagetitle { + position: absolute; + width: 100%; + text-align: center; + font-size: 42px; + top: 84px; +} +.setlocname { + position: absolute; + right: 100px; + text-align: center; + top: 84px; + width: 227px; +} +.selectloc { + position: absolute; + left: 100px; + text-align: center; + top: 84px; + width: 227px; +} +.weathersettingspage form{ + position: relative; + display: block; + height: 400px; + width: 460px; + margin: auto auto; + display: flex; + flex-direction: row; + flex-wrap: wrap; + text-align: center; + font-size: 20px; +} +#daypartpage { + display: flex; + justify-content: center; +} +#daypartpage .hour{ + text-align: center; +} +#daypartpage .sethourtitle{ + text-align: center; + font-size: 24px +} + #main>#template { display: block; @@ -2079,6 +3080,7 @@ body, html { .info-slide { width: 100%; min-height: 99.87%; + max-height: 99.87%; overflow: hidden; display: flex; flex-flow: column @@ -2140,14 +3142,6 @@ body, html { font-stretch: semi-expanded; } -.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; @@ -2249,16 +3243,203 @@ body, html { } + .city-info-slide { position: relative; background: transparent url(/images/bluebuildings.jpg) no-repeat; background-position: 0% 100%; background-size: 103% 106%; } +.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); + -webkit-filter: drop-shadow(4px 0 4px rgba(0, 0, 0, .75)); + filter: drop-shadow(4px 0 4px rgba(0, 0, 0, .75)); +} + +.city-info-slide .yellow.left { + top: 7.5%; + left: -11.25%; + z-index: 3; + width: 21%; + height: 80%; + z-index: 5 +} + +.city-info-slide .yellow.right { + background: url(/images/bluebuildings.jpg) no-repeat; + background-size: 200% 135%; + background-position: 128% -27%; + top: -15%; + right: -18%; + width: 51%; + height: 85%; + z-index: 7; + -webkit-mask-image: url(/images/yellow-curve.svg); + -webkit-mask-position: 100% 0; + -webkit-mask-size: 200% 200%; + filter: drop-shadow(-2px 0 4px rgba(0, 0, 0, .75)); +} +.city-info-slide .yellow.right2 { + background-position: 100% 0%; + opacity: 80%; + top: -15%; + right: -18%; + width: 51%; + height: 85%; + z-index: 8; + filter: drop-shadow(-2px 0 4px rgba(0, 0, 0, .75)) brightness(1.225) saturate(1.17); +} + + +.city-info-slide .blue.left { + background-image: url(/images/blue-curve.svg); + background-size: 200% 100%; + width: 22%; + height: 150%; + top: 6%; + left: -8%; + opacity: .7; + z-index: 2; +} + + +.severe-city-info-slide .curve { + position: absolute; + background-position: 0 0; + background-repeat: no-repeat; + background-size: 200% 200%; +} +.severe-city-info-slide .yellow { + background-image: url(/images/red-curve-dark.svg); + -webkit-filter: drop-shadow(4px 0 4px rgba(0, 0, 0, .75)); + filter: drop-shadow(4px 0 4px rgba(0, 0, 0, .75)); +} +.severe-city-info-slide .yellow.left { + top: 7.5%; + left: -11.25%; + z-index: 3; + width: 21%; + height: 80%; + z-index: 5 +} +.severe-city-info-slide .yellow.right { + background: url(/images/severebuildings.png) no-repeat; + background-size: 200% 135%; + background-position: 128% -27%; + top: -15%; + right: -18%; + width: 51%; + height: 85%; + z-index: 7; + -webkit-mask-image: url(/images/red-curve-severe.svg); + -webkit-mask-position: 100% 0; + -webkit-mask-size: 200% 200%; + filter: drop-shadow(-2px 0 4px rgba(0, 0, 0, .75)); +} +.severe-city-info-slide .yellow.right2 { + background-position: 100% 0%; + opacity: 80%; + top: -15%; + right: -18%; + width: 51%; + height: 85%; + z-index: 8; + filter: drop-shadow(-2px 0 4px rgba(0, 0, 0, .75)) brightness(1.05) saturate(1.1); +} + + +.severe-city-info-slide .blue.left { + background-image: url(/images/grey-curve.svg); + background-size: 200% 100%; + width: 22%; + height: 150%; + top: 6%; + left: -8%; + opacity: .7; + z-index: 2; +} +.severe-city-info-slide .blue.bottom { + background-image: url(/images/grey-curve.svg); + background-size: 200% 100%; + width: 22%; + height: 150%; + top: -37.5%; + left: -9.25%; + opacity: .7; + z-index: 2; +} +.severe-city-info-slide .white.right { + background-image: url(/images/white-curve.svg); + background-size: 200% 100%; + background-position: 100% 0; + width: 22%; + height: 150%; + top: 7%; + right: -8.8%; + opacity: .2; + z-index: 2; +} +.severe-city-info-slide .white.bottom { + background-image: url(/images/white-curve.svg); + background-size: 200% 100%; + background-position: 100% 0; + width: 22%; + height: 150%; + top: -39.25%; + right: -9.9%; + opacity: .2; + z-index: 2; +} +.severe-city-info-slide { + position: relative; + background: transparent url(/images/severebuildings.png) no-repeat; + background-position: 0% 100%; + background-size: 103% 106%; +} + + +.city-info-slide .blue.bottom { + background-image: url(/images/blue-curve.svg); + background-size: 200% 100%; + width: 22%; + height: 150%; + top: -37.5%; + left: -9.25%; + opacity: .7; + z-index: 2; +} +.city-info-slide .white.right { + background-image: url(/images/white-curve.svg); + background-size: 200% 100%; + background-position: 100% 0; + width: 22%; + height: 150%; + top: 7%; + right: -8.8%; + opacity: .2; + z-index: 2; +} +.city-info-slide .white.bottom { + background-image: url(/images/white-curve.svg); + background-size: 200% 100%; + background-position: 100% 0; + width: 22%; + height: 150%; + top: -39.25%; + right: -9.9%; + opacity: .2; + z-index: 2; +} .city-info-slide { position: relative; background: transparent url(/images/bluebuildings.jpg) no-repeat; @@ -2357,28 +3538,6 @@ body, html { background-size: 101%; } -.info-slide .info-subheadershadowfix { - font-family: Frutiger; - color: #fff; - display: flex; - flex-flow: row nowrap; - justify-content: space-between; - background-color: #0018cc; - background: linear-gradient(to right, #2f3eb8 0, #2a39b5 100%); - font-size: 40.5px; - height: 60px; - z-index: 6; - text-shadow: 2px 2px 4px #000; - position: absolute; - min-width: 20%; -} -.info-slide .info-subheadershadowfix span { - position: absolute; - top: 50.8%; - transform: translateY(-42.5%); - left: 7px; - width: 250% -} .city-info-slide .info-subheader { @@ -2392,6 +3551,17 @@ body, html { right: 98px; font-stretch: semi-expanded; } +.severe-city-info-slide .info-subheader { + padding-right: 10% +} + + +.severe-city-info-slide #subhead-city { + font-size: 28px; + padding-top: 3px; + right: 98px; + font-stretch: semi-expanded; +} .bulletin #subhead-noaa { font-size: 21.5px; @@ -2732,7 +3902,7 @@ body, html { } .city-slide-intro { position: relative; - background: transparent url(/images/staugustinebeach.png) no-repeat bottom; + background: transparent url(/images/city1.jpg) no-repeat bottom; background-size: cover } .city-slide-intro .weatherscancopyright { @@ -2901,8 +4071,9 @@ body, html { } .airport-slide { position: relative; - background: transparent url(/images/bluebuildings.jpg) no-repeat bottom; - background-size: cover; + background-image: url(/images/airplaneslide.png); + background-position: 0% -100%; + background-size: 103% 109%; } @@ -2993,8 +4164,8 @@ body, html { .beach-slide { position: relative; - background: transparent url(/images/bluebuildings.jpg) no-repeat bottom; - background-size: cover; + background: transparent url(/images/beachbbgslide3.jpg) no-repeat bottom; + background-size: 100% 90%; } @@ -3007,7 +4178,7 @@ body, html { .beach-slide .yellow { - background-image: url(/images/airport-curve.svg); + background-image: url(/images/beach-curve.svg); -webkit-filter: drop-shadow(4px 0 4px rgba(0, 0, 0, .75)); filter: drop-shadow(4px 0 4px rgba(0, 0, 0, .75)); } @@ -3332,9 +4503,10 @@ body, html { position: absolute; top: 376px; left: 0; + height: 221px; width: 452px; text-align: left; - z-index: 11; + z-index: 4; } #conditions-icon { @@ -3369,6 +4541,37 @@ body, html { font-weight: 400; line-height: 200% } +#current-info-severe { + font-size: 27px; + position: absolute; + top: 75.8%; + left: 31%; + text-align: left; + width: 66%; + font-weight: 400; + line-height: 200% +} +#current-info-details { + position: absolute; + font-size: 27px; + top: 122.4%; + left: 31%; + text-align: left; + width: 66%; + font-weight: 400; + line-height: 200% +} +#current-noreport { + font-family: Interstate; + font-weight: 700; + font-size: 46px; + position: absolute; + top: 33%; + left: 31%; + text-align: left; + width: 66%; + line-height: 200% +} #minimap-cover { position: absolute; width: 31.35%; @@ -3415,6 +4618,7 @@ body, html { padding: 7px 15px 0 0; text-shadow: 2px 2px 4px #000; line-height: 125%; + z-index: 5; background: linear-gradient(to right, #43464d 0, #323232 100%); } @@ -3425,7 +4629,7 @@ body, html { left: 0; top: 677px; background: #333; - z-index: 1; + z-index: 5; box-shadow: 0 8px 15px 0 rgba(0, 0, 0, .35) } @@ -3487,7 +4691,22 @@ body, html { width: 100%; height: 79.6% } - +#forecast-noreport { + position: absolute; + padding: .75% .75%; + min-height: 75%; + max-height: 75%; + height: 75%; + width: 100%; + margin-top: .4%; + overflow: hidden; + z-index: 5; + font-size: 50px; + color: #fff; + font-weight: 700; + padding-top: 5.4%; + padding-left: 17.25%; +} .forecast-tile { position: relative; background: #5681be; @@ -3671,8 +4890,8 @@ body, html { display: block; position: absolute; height: 3.7%; - left: 31.35%; - top: 897px; + left: 31.3%; + top: 896px; z-index: 2 } @@ -3704,10 +4923,10 @@ body, html { left: 31.35%; top: 87.2%; width: 68.507%; - height: 5.602%; + height: 5%; font-size: 43px; font-weight: 400; - padding-top: .75%; + padding-top: .55%; font-stretch: expanded; } .marqueeheadersevere { @@ -3717,7 +4936,7 @@ body, html { font-stretch: condensed; color: #fff; left: 31.29%; - top: 896.4px; + top: 894px; width: 68.75%; height: 43px; margin-top: 2px; @@ -3806,10 +5025,17 @@ body, html { font-size: 40.5px; height: 60px; z-index: 6; + white-space:nowrap; text-shadow: 2px 2px 4px #000; position: absolute; min-width: 20%; } +.severe-city-info-slide .info-subheadershadowfix { + background: linear-gradient(to top, #868686 0, #868686 100%); +} +.severe-city-info-slide .info-subheader { + background: linear-gradient(to top, #868686 0, #868686 100%); +} .info-slide .info-subheadershadowfix span { @@ -3852,9 +5078,9 @@ body, html { font-weight: 400; position: absolute; left: 31.35%; - top: 86.99%; + top: 86.8%; width: 68.7%; - height: 5.602%; + height: 5.2%; font-size: 45px; padding-top: .2%; font-stretch: expanded; diff --git a/webroot/images/airplaneslide.png b/webroot/images/airplaneslide.png new file mode 100644 index 0000000..2cd6907 Binary files /dev/null and b/webroot/images/airplaneslide.png differ diff --git a/webroot/images/arrow.png b/webroot/images/arrow.png new file mode 100644 index 0000000..9582157 Binary files /dev/null and b/webroot/images/arrow.png differ diff --git a/webroot/images/city1.jpg b/webroot/images/city1.jpg new file mode 100644 index 0000000..bc53ac4 Binary files /dev/null and b/webroot/images/city1.jpg differ diff --git a/webroot/images/fri.png b/webroot/images/friarrow.png similarity index 100% rename from webroot/images/fri.png rename to webroot/images/friarrow.png diff --git a/webroot/images/genericbeach.png b/webroot/images/genericbeach.png new file mode 100644 index 0000000..31e6953 Binary files /dev/null and b/webroot/images/genericbeach.png differ diff --git a/webroot/images/grey-curve.svg b/webroot/images/grey-curve.svg new file mode 100644 index 0000000..6ddc24e --- /dev/null +++ b/webroot/images/grey-curve.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + diff --git a/webroot/images/intellistarlogo.png b/webroot/images/intellistarlogo.png new file mode 100644 index 0000000..26abb27 Binary files /dev/null and b/webroot/images/intellistarlogo.png differ diff --git a/webroot/images/template-4k.jpg b/webroot/images/oldtemplate-4k.jpg similarity index 100% rename from webroot/images/template-4k.jpg rename to webroot/images/oldtemplate-4k.jpg diff --git a/webroot/images/precip-legend.png b/webroot/images/precip-legend.png index 1d58f63..9f711f9 100644 Binary files a/webroot/images/precip-legend.png and b/webroot/images/precip-legend.png differ diff --git a/webroot/images/red-curve-severe.svg b/webroot/images/red-curve-severe.svg new file mode 100644 index 0000000..29717f4 --- /dev/null +++ b/webroot/images/red-curve-severe.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + diff --git a/webroot/images/severebuildings.png b/webroot/images/severebuildings.png new file mode 100644 index 0000000..aa34794 Binary files /dev/null and b/webroot/images/severebuildings.png differ diff --git a/webroot/images/template-4k.png b/webroot/images/template-4k.png new file mode 100644 index 0000000..1e7bc70 Binary files /dev/null and b/webroot/images/template-4k.png differ diff --git a/webroot/images/template-4knologo.png b/webroot/images/template-4knologo.png new file mode 100644 index 0000000..d9f691b Binary files /dev/null and b/webroot/images/template-4knologo.png differ diff --git a/webroot/images/weatherlogos.png b/webroot/images/weatherlogos.png new file mode 100644 index 0000000..aeebd5e Binary files /dev/null and b/webroot/images/weatherlogos.png differ diff --git a/webroot/index.html b/webroot/index.html index fdb8a33..43b2e7b 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -35,23 +35,460 @@ - - + - + + + +
+
+
+
headend id:
+
serial number:
+
location name:
+
affiliate name:
+
+ + +
+ + + + +
- +
-
- LOCAL RADAR -
+
@@ -79,7 +516,7 @@
-