p5.js Web Editor | Check the weather ya kids

xxxxxxxxxx
<html><head>
    <title>UV Alert - SunSmart - Cancer Council Victoria</title>
    <style>
        body{
            width:100%;
            margin:0;
            padding:0;
            font-family: arial,helvetica,verdana;
            font-size:16px;
            color:#ffffff;
        }
        p{
            margin:0;
            padding:0;
            display:inline-block;
        }
        a,a:link,a:visited{
            color:#ffffff;
            text-decoration:none;
        }
            a:hover{
                text-decoration:underline;  
            }
        
        #wrapper{
            box-sizing:border-box;
            width:100%;
            margin:0;
            padding:0;
            position:relative;
            display:inline-block;
            border-radius:8px;
            /*border:1px solid #005B99;*/
            background: #3989c9; /* Old browsers */
            background: -moz-linear-gradient(top, #3989c9 0%, #005b99 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3989c9), color-stop(100%,#005b99)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #3989c9 0%,#005b99 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #3989c9 0%,#005b99 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top, #3989c9 0%,#005b99 100%); /* IE10+ */
            background: linear-gradient(to bottom, #3989c9 0%,#005b99 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3989c9', endColorstr='#005b99',GradientType=0 ); /* IE6-9 */
        }
            #widget-loading{
                width:100%;
                height:300px;
                margin:0;
                padding:0;
                top:0;
                left:0;
                position:absolute;
                background:url(/uvalert/includes/images/background-opaque.png) repeat;
                text-align:center;
                display:none;
            }
                #widget-loading img{
                    width:100px;
                    padding:80px 0 0 0;
                }
            #wrapper-inner{
                width:170px;
                height:300px;
                margin:0 auto;
                padding:0;
            }
            #logo{
                width:100%;
                height:32px;
                margin:3px 0 0 0;
                display:inline-block;
                text-align:right;
            }
                #logo a{
                    display:block;
                }
            #uvalert-wrapper,#uvalert-wrapper-inner{
                width:100%;
                margin:0;
                padding:0;
                display:inline-block;
                position:relative;
            }
                #uvalert-daily {
                    width:170px;
                    height:170px;
                    display: block;
                    -moz-border-radius: 50%; 
                    -webkit-border-radius: 50%; 
                    border-radius: 50%;
                    background: #F36D21; /* Old browsers */
                    background: -moz-linear-gradient(top, #fbad18 0%, #f37021 100%); /* FF3.6+ */
                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbad18), color-stop(100%,#f37021)); /* Chrome,Safari4+ */
                    background: -webkit-linear-gradient(top, #fbad18 0%,#f37021 100%); /* Chrome10+,Safari5.1+ */
                    background: -o-linear-gradient(top, #fbad18 0%,#f37021 100%); /* Opera 11.10+ */
                    background: -ms-linear-gradient(top, #fbad18 0%,#f37021 100%); /* IE10+ */
                    background: linear-gradient(to bottom, #fbad18 0%,#f37021 100%); /* W3C */
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbad18', endColorstr='#f37021',GradientType=0 ); /* IE6-9 */
                }
                    #uvalert-daily-inner{
                        width:140px;
                        height:135px;
                        padding:25px 15px 10px 15px;
                        margin:0;
                        display: block;
                        text-transform:uppercase;
                        text-shadow: 0px 1px 0px rgba(109, 56, 15, 0.8);
                    }
                        #uvalert-title{
                            width:100%;
                            height:30px;
                            font-size:13px;
                            text-align:center;
                        }
                        #uvalert-time-msg{
                            width:100%;
                            height:35px;
                            margin:15px 0;
                            padding:0;
                            display:inline-block;
                            position:relative;
                        }
                            #uvalert-msg{
                                width:100%;
                                height:25px;
                                margin:0;
                                padding:0;
                                display:inline-block;
                                text-align:left;
                                font-size:9px;
                                text-transform:none;
                            }
                            #uvalert-time{
                                width:100%;
                                height:25px;
                                margin:0;
                                padding:0;
                                display:inline-block;
                                text-align:center;
                            }
                                .time-index-hr,.time-index-min,#time-separator{
                                    display:inline-block;
                                }
                                .time-index-hr{
                                    margin:0 0 0 0;
                                    font-size:30px;
                                    line-height:100%;
                                }
                                .time-index-min{
                                    font-size:12px;
                                    line-height:100%;
                                }
                                #time-separator{
                                    margin:5px 0 5px 5px;
                                    font-size:9px;
                                }
                        #uvalert-max{
                            box-sizing:border-box;
                            width:100%;
                            height:40px;
                            margin:0;
                            padding:0 20px 0 0;
                            display:inline-block;
                            position:relative;
                            text-align:center;
                        }
                            #max-title{
                                font-size:13px;
                                line-height:100%;
                            }
                            #max-index{
                                font-size:27px;
                                line-height:100%;
                            }
                            
                #uvalert-live{
                    width:60px;
                    height:60px;
                    display: block;
                    position:absolute;
                    right:0;
                    bottom:0;
                    -moz-border-radius: 50%; 
                    -webkit-border-radius: 50%; 
                    border-radius: 50%;
                    border:1px solid #1C72B1;
                    background: #F36D21; /* Old browsers */
                    background: -moz-linear-gradient(top, #fbad18 0%, #f37021 100%); /* FF3.6+ */
                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbad18), color-stop(100%,#f37021)); /* Chrome,Safari4+ */
                    background: -webkit-linear-gradient(top, #fbad18 0%,#f37021 100%); /* Chrome10+,Safari5.1+ */
                    background: -o-linear-gradient(top, #fbad18 0%,#f37021 100%); /* Opera 11.10+ */
                    background: -ms-linear-gradient(top, #fbad18 0%,#f37021 100%); /* IE10+ */
                    background: linear-gradient(to bottom, #fbad18 0%,#f37021 100%); /* W3C */
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbad18', endColorstr='#f37021',GradientType=0 ); /* IE6-9 */
                }
                    #uvalert-live-inner{
                        width:40px;
                        height:40px;
                        margin:0;
                        padding:10px;
                        display:inline-block;
                        position:relative;
                        text-transform:uppercase;
                        text-shadow: 0px 1px 0px rgba(109, 56, 15, 0.8);
                        text-align:center;
                    }
                    #live-title{
                        font-size:10.5px;
                        line-height:100%;
                    }
                        .widget-info-link{
                            cursor:pointer;
                        }
                    #live-index{
                        font-size:22px;
                        line-height:100%;
                    }
                .uvModerate #uvalert-time-msg{
                    height:62px;
                    margin:3px 0 0 0;
                }
                    .uvModerate #uvalert-daily,.uvModerate #uvalert-live{
                        background: #73bd62; /* Old browsers */
                        background: -moz-linear-gradient(top, #73bd62 0%, #55a76c 100%); /* FF3.6+ */
                        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#73bd62), color-stop(100%,#55a76c)); /* Chrome,Safari4+ */
                        background: -webkit-linear-gradient(top, #73bd62 0%,#55a76c 100%); /* Chrome10+,Safari5.1+ */
                        background: -o-linear-gradient(top, #73bd62 0%,#55a76c 100%); /* Opera 11.10+ */
                        background: -ms-linear-gradient(top, #73bd62 0%,#55a76c 100%); /* IE10+ */
                        background: linear-gradient(to bottom, #73bd62 0%,#55a76c 100%); /* W3C */
                        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#73bd62', endColorstr='#55a76c',GradientType=0 ); /* IE6-9 */
                    }
                    .uvModerate #uvalert-max{
                        margin:5px 0 0 0;
                    }
                #weather-wrapper,#weather-wrapper-inner{
                    box-sizing:border-box;
                    width:100%;
                    height:40px;
                    margin:0;
                    padding:5px 5px 0 5px;
                    display:inline-block;
                    position:relative;
                    text-align:center;
                }
                    #weather-wrapper-inner{
                        height:35px;
                        padding:0;
                    }
                    #weather-icon{
                        width:35px;
                        padding:0;
                        margin:0 10px 0 0;
                        display:inline-block;
                        float:left;
                    }
                    #weather-info{
                        width:115px;
                        padding:0;
                        margin:0;
                        display:inline-block;
                        float:left;
                        text-align:left;
                    }
                        #weather-info #date{
                            font-size:10px;
                            line-height:130%;
                            text-transform:uppercase;
                        }
                        #weather-info #weather-details{
                            font-size:12px;
                            line-height:100%;
                        }
                #location-temp-wrapper,#location-temp-inner{
                    box-sizing:border-box;
                    width:100%;
                    height:35px;
                    margin:0;
                    padding:5px 5px 0 5px;
                    display:inline-block;
                    position:relative;
                }
                    #location-temp-inner{
                        height:30px;
                        padding:0;
                    }
                    #location-info,#temp-info,#temp-min,#temp-max{
                        width:50%;
                        height:30px;
                        display:inline-block;
                        float:left;
                        text-transform:uppercase;
                        text-align:center;
                    }
                        #location-info{
                            width:60%;
                        }
                        #temp-info{
                            width:40%;
                        }
                        #locationOption{
                            width:100%;
                            height:30px;
                            border:0;
                            border-collapse:collapse;
                            background:#2E90C6;
                            font-size:13px;
                            color:#ffffff;
                        }
                        .temp-no{
                            display:block;
                            line-height:98%;
                        }
                        .temp-unit{
                            display:block;
                            line-height:100%;
                        }
                        #temp-min{
                            font-size:14px;
                        }
                        #temp-max{
                            font-size:14px;
                            color:#ffcf00;
                        }
                #share-src-wrapper,#share-src-inner{
                    box-sizing:border-box;
                    width:100%;
                    height:30px;
                    margin:0;
                    padding:5px;
                    display:inline-block;
                    position:relative;
                    text-align:center;
                    background:#005B99;
                    height:20px;
                    border-radius:8px;
                }
                    #share-src-inner{
                        height:20px;
                        padding:0;
                        height:10px;
                    }
                    #share-icon{
                        font-size:9px;
                        display:inline-block;
                        line-height:100%;
                    }
                    #src-info{
                        margin:3px 0 0 0;
                        font-size:9px;
                        display:inline-block;
                        line-height:100%;
                        display:none;
                    }
                #widget-info{
                    box-sizing:border-box;
                    width:100%;
                    height:300px;
                    padding:3%;
                    position:absolute;
                    top:0;
                    left:0;
                    background:url(/uvalert/includes/images/background-opaque-darker.png) repeat;
                    border-radius:8px;
                    display:none;
                }
                    #widget-info-close{
                        margin:15px 0;
                        font-size:11px;
                        font-weight:bold;
                        text-decoration:underline;
                        text-align:center;
                        cursor:pointer;
                    }
                    #clear-sky-info p{
                        margin:5px 0;
                        font-size:11px;
                        text-align:center;
                        display:block;
                    }
                        #clear-sky-info p a{
                            text-decoration:underline;
                        }
        /*Custom*/
        
        #SnowFlakeOne,#SnowFlakeTwo{
            display:none;
        }
        
    </style>
    <script type="text/javascript" src="/AcoraCMS/Javascript/jQuery/jquery-1.7.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() { 
            $("#locationOption").change(function() {
                if($("#locationOption").val()=="0")
                {
                }
                else
                {
                    $("#widget-loading").fadeIn();
                    $("#changeLocation").submit();
                }
            });
            $("#widget-info-close").click(function() {
                $("#widget-info").fadeOut();
            });
            $(".widget-info-link").click(function() {
                $("#widget-info").fadeIn();
            });
        });
    </script>
</head>
<body>
​
    <div id="wrapper">
        <div id="wrapper-inner">
            <div id="logo"><a href="https://www.sunsmart.com.au/" title="SunSmart - Cancer Council Victoria" target="_blank"><img src="/uvalert/includes/images/sunsmart-logo.png" alt="SunSmart"></a></div>
            <div id="uvalert-wrapper">
                <div id="uvalert-wrapper-inner">
                    <div id="uvalert-daily"><div id="uvalert-daily-inner">
                    
                        <div id="uvalert-title">Sun Protection Required</div>
                        <div id="uvalert-time-msg">
                            
                            <div id="uvalert-time">
                                <div class="time-index-hr">9</div>
                                <div class="time-index-min"><div class="time-index-minno">00</div><div class="time-index-minno">AM</div></div>
                                <div id="time-separator">to</div>
                                <div class="time-index-hr">5</div>
                                <div class="time-index-min"><div class="time-index-minno">20</div><div class="time-index-minno">PM</div></div>
                            </div>
                            
                        </div>
                        <div id="uvalert-max">
                            <div id="max-title">Max UV</div>
                            <div id="max-index">11</div>
                        </div>
                    
                    </div></div>
                    
                    <div id="uvalert-live"><div id="uvalert-live-inner">
                        <div id="live-title">UV is now</div>
                        <div id="live-index">5</div>
                    </div></div>
                    
                </div>
            </div>
            <div id="weather-wrapper">
                <div id="weather-wrapper-inner">
                    <div id="weather-icon"><p><img src="/uvalert/includes/images/weather-icon-sun_cloud.png" alt="sun_cloud"></p></div>
                    <div id="weather-info">
                        <p>
                            <span id="date">6 December</span><br><span id="weather-details">Partly cloudy.</span>
                        </p>
                    </div>
                </div>
            </div>
            <div id="location-temp-wrapper">
                <div id="location-temp-inner">
                    
                    <div id="location-info">
                        <form id="changeLocation" method="post" action="https://www.sunsmart.com.au/uvalert/default.asp">
                            <select id="locationOption" name="locationOption">
                                <option value="0">Select Location</option><option value="636">Aireys Inlet</option><option value="637">Ararat</option><option value="638">Avalon</option><option value="149">Bairnsdale</option><option value="150">Ballarat</option><option value="639">Beechworth</option><option value="640">Benalla</option><option value="151">Bendigo</option><option value="680">Birchip</option><option value="641">Cape Otway</option><option value="642">Casterton</option><option value="643">Castlemaine</option><option value="644">Cerberus</option><option value="684">Cobram</option><option value="152">Colac</option><option value="645">Corryong</option><option value="646">Cranbourne</option><option value="685">Dandenong</option><option value="686">Drouin</option><option value="153">Echuca</option><option value="670">Edenhope</option><option value="154">Falls Creek</option><option value="155">Frankston</option><option value="156">Geelong</option><option value="673">Gisborne</option><option value="157">Hamilton</option><option value="647">Heywood</option><option value="158">Horsham</option><option value="648">Kerang</option><option value="649">Kyabram</option><option value="674">Kyneton</option><option value="650">Lake Eildon</option><option value="682">Lake Mountain</option><option value="651">Lakes Entrance</option><option value="159">LaTrobe Valley</option><option value="160">Laverton</option><option value="675">Leongatha</option><option value="652">Mallacoota</option><option value="683">Mansfield</option><option value="161" selected="selected">Melbourne</option><option value="676">Melton</option><option value="162">Mildura</option><option value="681">Moe</option><option value="653">Moorabbin</option><option value="163">Mornington</option><option value="654">Mortlake</option><option value="671">Mount Baw Baw</option><option value="164">Mount Buller</option><option value="165">Mount Dandenong</option><option value="166">Mount Hotham</option><option value="167">Mt Baw Baw</option><option value="655">Nhill</option><option value="656">Omeo</option><option value="168">Orbost</option><option value="657">Ouyen</option><option value="677">Pakenham</option><option value="658">Phillip Island</option><option value="659">Port Fairy</option><option value="660">Portland</option><option value="661">Redesdale</option><option value="662">Rhyll</option><option value="663">Rutherglen</option><option value="169">Sale</option><option value="170">Scoresby</option><option value="171">Seymour</option><option value="172">Shepparton</option><option value="664">Stawell</option><option value="678">Sunbury</option><option value="173">Swan Hill</option><option value="665">Tatura</option><option value="672">Torquay</option><option value="687">Traralgon</option><option value="174">Tullamarine</option><option value="175">Wangaratta</option><option value="666">Warracknabeal</option><option value="679">Warragul</option><option value="176">Warrnambool</option><option value="177">Watsonia</option><option value="667">Weeaproinah</option><option value="668">Wilsons Promontory</option><option value="178">Wonthaggi</option><option value="179">Yarra Glen</option><option value="669">Yarrawonga</option>
                            </select>
                        </form>
                    </div>
                    
                    <div id="temp-info">
                        <div id="temp-min"><span class="temp-no">10<sup>°</sup></span><span class="temp-unit">Min</span></div><div id="temp-max"><span class="temp-no">21<sup>°</sup></span><span class="temp-unit">Max</span></div>
                    </div>
                </div>
            </div>
            <div id="share-src-wrapper">
                <div id="share-src-inner">
                    <div id="share-icon"><p><a href="http://www.sunsmart.com.au/resources/uv-widget" target="_blank">ADD THIS TO YOUR WEBSITE</a></p></div>
                    <div id="src-info"><p>Source: <a href="http://www.arpansa.gov.au/uvindex/realtime/" target="_blank"><u>ARPANSA</u></a> and <a href="http://www.bom.gov.au/" target="_blank"><u>BOM</u></a></p></div>
                </div>
            </div>
            <div id="SnowFlakeOne">
                <img src="/uvalert/includes/images/SnowFlake.png">
            </div>
            <div id="SnowFlakeTwo">
                <img src="/uvalert/includes/images/SnowFlake.png">
            </div>
        </div>
        <div id="widget-loading"><img src="/uvalert/includes/images/loading.gif" alt="loading"></div>
        <div id="widget-info">
            <div id="clear-sky-info">
                <p><strong>What does Clear Sky UV mean?</strong></p>
                <p>If your location shows a Clear Sky UV reading, it means the UV level is being forecast from the <a href="http://www.bom.gov.au/uv/" target="_blank">Bureau of Meteorology</a>, based on cloud-free skies.</p>
                <p>If your location shows UV is Now, it is a real-time UV level reading from one of the 11 UV detectors provided by the <a href="http://www.arpansa.gov.au/uvindex/realtime/" target="_blank">Australian Radiation Protection and Nuclear Safety Agency (ARPANSA)</a>.</p>
                <p>For more information about sun protection times and UV levels please visit <a href="http://www.sunsmart.com.au/uv-sun-protection/uv" target="_blank">sunsmart.com.au</a></p>
            </div>
            <div id="widget-info-close">X Close</div>
        </div>
    </div>
​
<!--Google Analytics-->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script src="https://ssl.google-analytics.com/ga.js" type="text/javascript"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-4291937-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
<!--End of Google Analytics-->
​
​
</body></html>
Cookies

Sketch Files

Console

Preview
