diff --git a/www/assets/css/account.css b/www/assets/css/account.css index 434dd3c3bc..dd78db3c0f 100644 --- a/www/assets/css/account.css +++ b/www/assets/css/account.css @@ -929,9 +929,13 @@ a.button { /* * End signup step 2 */ -.signup-flow-layout wpt-header, -.signup-flow-layout header { + .signup-flow-layout wpt-header, + .signup-flow-layout header { background: #141e33; + } +.signup-flow-layout header { + padding-left: 0; + margin-bottom: 0; } .signup-flow-layout header { padding-left: 0; diff --git a/www/assets/css/pagestyle2.css b/www/assets/css/pagestyle2.css index 3ca1e07db1..d1ade6d381 100644 --- a/www/assets/css/pagestyle2.css +++ b/www/assets/css/pagestyle2.css @@ -96,6 +96,11 @@ h3.hed_sub { z-index: 10; position: relative; } +.result-impact .hed_sub em { + background: none; + padding: 0; + margin: 0 +} .hed_sub em details { display: inline-block; @@ -309,9 +314,7 @@ h6 { line-height: 1; } -.test_results-content h2 em.flag, -.summary_opps em.flag, -span.lh-flag { +.test_results-content h2 em.flag, .summary_opps em.flag, span.lh-flag, .metric_descs em.flag { font-size: 0.3em; font-weight: 500; text-transform: uppercase; @@ -324,6 +327,13 @@ span.lh-flag { font-style: normal; margin: 0 1em; } +.metric_descs em.flag { + font-size: 0.7em; + display: inline-block; + position: relative; + margin: 0; + vertical-align: middle; +} .summary_opps em.flag { font-size: 0.4em; @@ -1565,6 +1575,20 @@ input[type="checkbox"] { padding: 0.3em; } +input#inc-cc-simple { + appearance: none; + background: url(/assets/images/src/icon_grading_check.svg) left 50% no-repeat; + background-size: 1rem 1rem; + width: 1rem; + height: 1rem; + display: inline-block; + border-radius: 100%; + background-color: #fff; + position: relative; + top: 0.1em; + left: 0.1em; +} + h2 .small { font-weight: normal; font-size: 12px; @@ -2110,9 +2134,8 @@ footer ul { } .opportunities_summary_exps { - background: url(/assets/images/src/icon_science_bubbling.svg) left 0 bottom 0 - no-repeat; - background-size: auto 2rem; + background: url(/assets/images/src/icon_science_bubbling.svg) left -.4em bottom .2em no-repeat; + background-size: auto 1.8rem; padding-left: 2.2em; height: 1em; } @@ -2492,11 +2515,11 @@ details.details_custommetrics summary { } .compare-experiment.compare-loading .results_header { - padding: 6rem 0 0; - background: url(/assets/images/src/icon_science_bubbling.svg) left top + padding: 2rem 0 0 6rem; + background: url(/assets/images/src/icon_science_bubbling.svg) left center no-repeat; background-size: 6rem auto; - margin: 3rem 0 0; + margin: 6rem 0 0 0; } .compare-experiment.compare-loading .results_header h1 { @@ -2510,7 +2533,8 @@ details.details_custommetrics summary { font-weight: 300; } -.summary_opps > p { +.summary_opps > p, +.result-impact p.try-exps { line-height: 1.5; font-weight: 500; margin: 0; @@ -2521,8 +2545,17 @@ details.details_custommetrics summary { justify-content: flex-end; font-size: 1em; position: relative; + align-items: center; + /* padding: .2em 0; */ +} +.result-impact p.try-exps { + margin: 0 0 1em 0; + width: 100%; + justify-content: center; + font-size: 1.1em; } -.summary_opps > p span { +.summary_opps > p span, +.result-impact p.try-exps span { position: relative; background-color: #fff; padding: 0.5em 0.4em 0.5em 2.8em; @@ -2532,7 +2565,13 @@ details.details_custommetrics summary { border-radius: 2rem; background-position: left 0.4em top 0.1em; } -.summary_opps > p:before { +.result-impact p.try-exps span { + align-items: center; + display: flex; + background-position: left 0.4em top 0.4em; +} +.summary_opps > p:before, +.result-impact p.try-exps:before { content: ""; border-top: 1px solid #ddd; position: absolute; @@ -2540,7 +2579,8 @@ details.details_custommetrics summary { top: 50%; } -.summary_opps > p a { +.summary_opps > p a, +.result-impact p.try-exps a { font-weight: 700; font-size: 0.9em; padding: 0.5em 1.3em; @@ -2555,7 +2595,9 @@ details.details_custommetrics summary { } .summary_opps > p a:hover, -.summary_opps > p a:focus { +.summary_opps > p a:focus, +.result-impact p.try-exps a:hover, +.result-impact p.try-exps a:focus { background-color: #fff; border-color: #448204; color: #5c9811; @@ -2563,7 +2605,9 @@ details.details_custommetrics summary { @media (max-width: 60em) { .summary_opps > p, - .summary_opps > p span { + .summary_opps > p span, + .result-impact p.try-exps, + .result-impact p.try-exps span { flex-flow: row wrap; height: auto; border: 0; @@ -2571,15 +2615,22 @@ details.details_custommetrics summary { gap: 2em; width: 100%; } - .summary_opps > p span { + .result-impact p.try-exps { + margin: 2em 0 0; + max-width: 25em; + } + .summary_opps > p span, + .result-impact p.try-exps span { display: block; padding-bottom: 0.5em; background-position: 0.3em 0.3em; } - .summary_opps > p:before { + .summary_opps > p:before, + .result-impact p.try-exps:before { display: none; } - .summary_opps > p a { + .summary_opps > p a, + .result-impact p.try-exps a{ display: inline-block; margin: 0 0.5em; flex: 0 0 8em; @@ -2908,14 +2959,44 @@ body.result #main { @media (prefers-reduced-motion: no-preference) { .home_feature_hed, - .home_feature_hed-pro { + .home_feature_hed-pro, + .home_feature_hed-cc { transition: opacity 1.5s ease-out, transform 1.5s ease-out; } } .home_feature_hed-main, -.home_feature_hed-lfwp { +.home_feature_hed-lfwp, +.home_feature_hed-cc { position: absolute; + top: 0; +} + +.home_feature_hed-cc span.flag { + background: #66a865; + color: #fff; + font-size: .9rem; + vertical-align: top; + margin-left: 0; + text-transform: uppercase; + font-weight: 300; + padding: .2em .4em; + display: inline-block; + border-radius: 0.4em; +} + +.home.feature-cc .home_test_select { + color: #39702c; + border-color: #39702c; +} +.home.feature-cc .simpleadvancedfields_contain > input + label:before { + background-color: #255d24; +} +.home.feature-cc .test_preset_profile span.test_presets_tag { + background: #255d24; +} +.home.feature-cc #advanced_settings-container { + background: rgba(0,0,0,.3); } .home_feature_hed-pro { @@ -2929,9 +3010,11 @@ body.result #main { } .home:not(.feature-pro) .home_feature_hed-pro, +.home:not(.feature-cc) .home_feature_hed-cc, .home:not(.feature-lfwp) .home_feature_hed-lfwp, .home.feature-lfwp .home_feature_hed-main, -.home.feature-pro .home_feature_hed-main { +.home.feature-pro .home_feature_hed-main, +.home.feature-cc .home_feature_hed-main { transform: scale(0.8); opacity: 0; pointer-events: none; @@ -2953,6 +3036,23 @@ body.result #main { url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23123D80'/%3E%3Cstop offset='1' stop-color='%23050D26'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%23307CD1' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23307CD1' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.4'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E"); } + + +.home.feature-cc .home_feature_hed_contain { + background: url(/assets/images/src/energyimpact-clouds.svg),url(/assets/images/wpt_home_swoop-cc.svg); + background-repeat: no-repeat,no-repeat, no-repeat,no-repeat; + background-size: auto auto,104% auto; + background-position: right 0rem top 9rem, bottom -11px left 50%; + background-color: #e0f3ff; +} + +.home.feature-cc { + background-color: #559154; +} +.home.feature-cc .home_feature_hed-cc { + color: #154281; +} + .home_feature_hed_visual { box-shadow: 0px 0px 5px 3px #85e0ff45; } @@ -3033,6 +3133,7 @@ header .pro-flag { .home_feature_hed, .home_feature_hed-pro, +.home_feature_hed-cc, .home_feature_main { display: flex; margin: 0 auto; @@ -3045,6 +3146,7 @@ header .pro-flag { @media (min-width: 60em) { .home_feature_hed, .home_feature_hed-pro, + .home_feature_hed-cc, .home_feature_main { padding-bottom: 3rem; } @@ -3243,7 +3345,7 @@ header .pro-flag { max-width: 31em; } .home_feature_hed p .home_feature_hed_highlighter { - color: #ffc763; + color: #FFC763; } .home_feature_hed a { @@ -3267,6 +3369,9 @@ header .pro-flag { object-fit: contain; height: auto; } +.home_feature_hed-cc .home_feature_hed_visual { + box-shadow: 0px 0px 5px 3px #d3dfef; +} .home_feature_hed_visual img, .home_feature_hed_visual video, @@ -3417,6 +3522,9 @@ header .pro-flag { .home_feature_main { display: block; } + .home_feature_hed p { + margin-bottom: 1rem; + } } @media (max-width: 50em) { @@ -6634,6 +6742,7 @@ table.pretty .metric_groups th { white-space: nowrap; color: #2a3b64; overflow: visible; + width: 20%; } .results-filmstrip-container h4 { @@ -8433,12 +8542,20 @@ body.screenshot a { text-decoration: none !important; } -body.screenshot .results_header h2 { - opacity: 0; - margin: 0; - padding: 0; +body.screenshot:not(.result-impact) .results_header h2 { + opacity: 0; + margin: 0; + padding: 0; height: 1rem; } +body.screenshot.result-impact .results_header h2 { + margin: 1rem 0 0; +} +body.screenshot.result-impact .results_header h2 + p { + display: none; +} + + body.screenshot wpt-header, body.screenshot .alert-banner, body.screenshot .cta-banner, @@ -8448,11 +8565,11 @@ body.screenshot .test_presets_more, body.screenshot .experiment_meta_urls, body.screenshot header ul, body.screenshot .experiment_opportunities + .hed_sub, -body.screenshot.result:not(.compare-experiment) .results_header, +body.screenshot.result:not(.compare-experiment):not(.result-impact) .results_header, body.screenshot .metrics_shown, body.screenshot.result-summary .cruxembed, body.screenshot.result-summary #tables, -body.screenshot.compare-experiment .results_body, +body.screenshot.compare-experiment:not(.result-impact) .results_body, body.screenshot.result-summary .results_body .hed_sub, body.screenshot .results-filmstrip-container span, body.screenshot .compare_contain_wrap, @@ -9479,3 +9596,556 @@ p.lh-filteraudits { margin: 0.5em 0; } } + + + + +/* env impact */ +.ei_sky { + display: none; +} +.result-impact .results_header p a { + font-weight: 500; + text-decoration: none +} + +.result-impact .results_header p a:hover, +.result-impact .results_header p a:focus { + text-decoration: underline; +} +.results_header .ei_summary h3.hed_sub { + border-bottom: 1px solid #CBCBCB; + padding-bottom: .3em; + color: #2A3C64; + margin: 0; +} +.ei_summary_hosting li { + display: flex; + align-items: flex-start; + gap: 1em; + padding-top: 1.6em; +} +.ei_summary_hosting li img { + border: 3px solid #dedede; + background: #eee; + border-radius: 100%; + padding: 0; + max-width: 2rem; +} +.ei_summary_hosting li img[src*=alert]{ + background: #d16122; +} +.ei_summary_hosting_info { + order: 2; + flex: 1 1 100%; +} +.ei_summary_hosting_info h4 { + margin: 0; + padding: 0; + font-size: 1.1em; + font-weight: 700; +} +.ei_summary_hosting_info p, +.ei_summary_hosting_info summary { + font-size: 1em; + margin: 0; + color: #686868; +} + +.ei_summary_hosting_info summary::marker, +.ei_summary_hosting_info summary::-webkit-details-marker { + display: none; + content: ""; +} +.ei_summary_hosting_info summary { + list-style: none; + padding: .2em 1.2em .2em 1.7em; + cursor: pointer; + background: url(/assets/images/src/icon_info_circle.svg), url("/assets/images/src/icon_triangledown.svg"); + background-size: 1.2em auto, .6em auto; + border: 1px solid #eee; + background-repeat: no-repeat; + background-position: left .3em center, right .3em center; + white-space: nowrap; + border-radius: 3em; + display: inline-block; +} +.ei_summary_hosting_info summary:hover, +.ei_summary_hosting_info summary:focus, +.ei_summary_hosting_info summary:active { + background-color: #fff; + outline: none; + box-shadow: 0 0 8px #ddd; + border-color: #ccc; +} +.ei_summary_hosting_info summary + div { + position: absolute; + width: 35em; + max-width: 50vw; + background: #fff; + border-radius: .3em; + border: 1px solid #ddd; + padding: 1em 0; + z-index: 100; + overflow: auto; + margin: .5em 0 0; + max-height: 60vh; + box-shadow: 0 0 5px #aaa; +} +.ei_summary_hosting_info summary + div table { + font-size: .8rem; + border-collapse: collapse; + width: 100%; + } +.ei_summary_hosting_info summary + div table tr:nth-child(even) th, +.ei_summary_hosting_info summary + div table tr:nth-child(even) td{ + background: #f6f6f6; +} +.ei_summary_hosting_info summary + div table th, +.ei_summary_hosting_info summary + div table td { + padding: .3em 1em; + text-align: left; +} +.ei_summary_hosting_info summary + div table th { + margin: 0; + border: 0; +} +.ei_summary_hosting_info summary + div table th:first-child { + width: 80%; + overflow: auto; +} +.ei_summary_hosting_info summary + div tr:nth-child(n+2) th { +font-weight: 500; +} +.ei_summary_hosting_info summary + div img { + width: 20px; + border-width: 1px; +} +.ei_summary_metrics { + margin-top: 2em; +} +.ei_summary_metrics td span.flag { + text-align: left; + font-size: .7rem; + color: #222; + text-decoration: none; + font-weight: 500; + text-transform: uppercase; + -webkit-text-stroke: 0; + display: block; + margin: .3em 0 0; +} +.result-impact .ei_summary_metrics th { + white-space: nowrap; +} +.ei_summary_metrics .scrollableTable { + margin: 0; + padding: 0; + overflow: auto; + width: 100%; +} + +.ei_diagnostics ul { + display:flex; + flex-flow: row wrap; + gap: 2rem; + margin: 1rem 0 2rem; + border-bottom: 1px solid #ddd; + padding-bottom: 2rem; +} +.ei_diagnostics-context ul { + /* border: 0; + padding-bottom: 0; */ + margin-top: 0; +} +.ei_diagnostics li { + flex: 1 0 18em; + padding: 0 0 0 4rem; + position: relative; + margin: 0; +} + +.ei_diagnostics li h5 { + margin: 0 0 .1em; + padding: 0; + font-size: 1.1em; +} +.ei_diagnostics li p { + margin: 0; + font-size: .9em; + padding: 0; + line-height: 1.3 +} +.ei_diagnostics small { + display: block; + text-transform: uppercase; + font-size: .7em; + font-weight: 500; + color: #0f71ba; + margin-top: .6em; +} +.ei_diagnostics li:before { + content: ""; + width: 3rem; + height: 3rem; + position: absolute; + background: #dddddd; + background-size: 50% auto; + background-position: center center; + background-repeat: no-repeat; + left: 0; + top: 0em; + border-radius: 100%; +} + +.ei_diagnostics-context li { + font-size: 1.1em; + color: #63522b; + line-height: 1.4; + justify-content: space-between; + padding-top: 1em; + padding-left: 1em; + max-width: 30em; +} +.ei_diagnostics-context li:before { + display: none; +} +.ei_diagnostics-context li img { + height: 65px; + margin: .5em auto 0; + display: block; + float: right; +} + .ei_diagnostics-context li:first-child { + background: url(/assets/images/src/bg_envblobby2.svg) center top no-repeat; + background-size: contain; +} +.ei_diagnostics-context li:nth-child(1) + li { + background: url(/assets/images/src/bg_envblobby3.svg) center top no-repeat; + background-size: contain; +} +.ei_diagnostics-context li:last-child { + background: url(/assets/images/src/bg_envblobby4.svg) center top no-repeat; + background-size: contain; +} + +.ei_diagnostics li.ei_diagnostics_item-good:before { + background-color: #7abc47; +} +.ei_diagnostics li.ei_diagnostics_item-avg:before { + background-color: #f1af47; +} +.ei_diagnostics li.ei_diagnostics_item-bad:before { + background-color: #d06023; +} + +.ei_diagnostics li.ei_diagnostics_item-textcompression:before { + background-image: url(/assets/images/src/icon-file-zipper.svg); +} +.ei_diagnostics li.ei_diagnostics_item-unusedpreloads:before { + background-image: url(/assets/images/src/icon-file-wired.svg); +} +.ei_diagnostics li.ei_diagnostics_item-lazyloading:before { + background-image: url(/assets/images/src/icon-file-bookmark-alt-1.svg); +} +.ei_diagnostics li.ei_diagnostics_item-memoryusage:before { + background-image: url(/assets/images/src/icon-battery-bolt.svg); +} +.ei_diagnostics li.ei_diagnostics_item-imagecompression:before { + background-image: url(/assets/images/src/icon-image-compression.svg); +} +.ei_diagnostics li.ei_diagnostics_item-caching:before { + background-image: url(/assets/images/src/icon-caching.svg); +} +.ei_diagnostics li.ei_diagnostics_item-cdnusage:before { + background-image: url(/assets/images/src/icon-globe-alt.svg); +} +.ei_diagnostics li.ei_diagnostics_item-cputime:before { + background-image: url(/assets/images/src/icon-microchip.svg); +} +.ei_reduce { + margin: 0; +} +.ei_reduce p, +.ei_reduce li, +.ei_reduce h4 { + font-size: 1.1em; + line-height: 1.5; + max-width: 38em +} +.ei_reduce h4 { + font-weight: 700; + font-size: 1.2em +} +.ei_reduce li { + list-style: disc; + margin-left: 1em; +} +.ei_reduce ul { + margin: 1em 0 2em 2em; +} +.ei_reduce img { + vertical-align: middle; + width: 8em; + object-fit: contain; + height: 1.8em; +} + +.ei_diagnostics_item-experiments { + display: inline-block; + color: #4e8f37; + padding-left: 1.6em; + position: relative; + } + .result-impact .ei_diagnostics_item-experiments .experiment_summary_count { + position: static; + background: #fff; + margin: 0; + } + .result-impact .opportunities_summary_exps { + display:inline-block; + margin: 0; + padding: 0 0 0 1.8em; + position: absolute; + left: 0; + } + +.pie { + width: 100%; + display: flex; + margin: 1rem 0 3rem; + justify-content: flex-start; + gap: 3rem; +} +.pie_key { + flex: 0 1 auto; + display: block; + order: 2; +} +.pie_key li { + list-style: none; + padding: .3em .8em; + border-radius: 2em; + margin: 0 0 .4em; + font-size: .9em; + font-weight: 700; + color: #fff; +} +.pie svg { + flex: 0 1 60%; + border-radius: 50%; + transform: rotate(-90deg); + order: 1; + width: 100%; + height: 100%; +} +@media (max-width: 40em) { + .pie svg { + flex: 0 1 50%; + } +} +@media (max-width: 60em) { + .ei_diagnostics-context li { + padding-left: 0; + background-position: bottom right !important; + margin: 0; + } + .ei_diagnostics-context li img { + height: 45px; + } +} +.pie circle { + fill: transparent; +} + +.ei_nodata { + margin: 3rem 0; + display: block; + padding-bottom: 3rem; +} +.treecreds { + text-align: right; + padding-bottom: 2rem; +} + + + +@media (min-width: 50em) { + .result-impact .results_header p { + max-width: 28em; + } +} + + +@media (min-width: 70em) { + .result-impact #test_results-container { + position: relative; + overflow: hidden; + } + + .result-impact .results_main_contain { + /* position: relative; */ + z-index: 1; + } + .result-impact .ei_sky { + display:block; + left: 0; + width: 100%; + top: -2.5rem; + height: 16em; + position: absolute; + z-index: -1; + } + .result-impact .results_main { + background: url(/assets/images/src/energyimpact-clouds.svg); + background-repeat: no-repeat; + background-size: auto auto; + background-position: right 1rem top 2rem; + } + .result-impact .results_main { + background: url(/assets/images/src/energyimpact-trees.svg), url(/assets/images/src/energyimpact-clouds.svg); + background-repeat: no-repeat, no-repeat; + background-size: auto auto, auto auto; + background-position: right 13rem top 3rem, right 1rem top 2rem; + } + + .ei_diagnostics ul { + border-bottom: none; + } + + + .result-impact .results_header { + padding: 0; + margin: 0; + } + .ei_summary, + .ei_summary_hosting ul { + display: flex; + justify-content: space-between; + justify-content: flex-start + } + .ei_summary_hosting ul { + gap: 1rem; + } + .ei_summary { + margin: 6em 0 1rem; + gap: 3rem; + } + .ei_summary_hosting li { + flex: 1 1 50%; + } + .ei_summary_hosting li img { + max-width: 3rem; + } + + .ei_summary_hosting, + .ei_summary_metrics { + margin-top: 0; + flex: 1 1 50%; + } + + + + .ei_supporting { + display: flex; + gap: 3rem; + } + .ei_supporting > div { + flex: 1 1 50%; + } +} + +.result-impact .ei_sky { + height: 25em; +} + +@media (min-width: 90em) { + .result-impact .results_header p { + max-width: 38em; + } + .ei_diagnostics-context ul { + gap: 8em; + + } +} + +.ei_spread { + border-top: 1px solid #eee; + + margin-bottom: 1em; +} +.ei_spread h3.hed_sub { + margin-top: .5em; +} + +.badge-info { + display: flex; + gap: 2rem; + flex-flow: row wrap; + justify-items: flex-start; + padding-bottom: 2rem; +} +.badge-preview { + flex: 0 1 15em; + width: 15em; +} +.badge-preview img { + display: block; + width: 15em; + height: auto; + max-width: none; + object-fit: unset; +} +.badge-snip { + background: #1578c2; + padding: 1em; + flex: 1 1 50%; + border-radius: 1em; + align-self: center; + +} +.badge-snip p, +.badge-snip p a { + font-size: .8em; + color: #fff; +} +.badge-snip p a { + font-size: 1em; +} +.badge-snip pre { + background: #fff; + padding: .5em; + overflow: auto; + display: block; + white-space: break-spaces; + line-height: 1.2; +} + +body.screenshot .ei_sky { + top: -3em; +} +body.screenshot .ei_summary { +margin: 3.5rem 0 0; +} + +body.screenshot.result-impact .ei_sky { + display:block; + left: 0; + width: 100%; + top: -2.5rem; + height: 16em; + position: absolute; + z-index: -1; +} +body.screenshot.result-impact .results_main { + background: url(/assets/images/src/energyimpact-clouds.svg); + background-repeat: no-repeat; + background-size: auto auto; + background-position: right 1rem top 2rem; +} +body.screenshot.result-impact .results_main { + background: url(/assets/images/src/energyimpact-trees.svg), url(/assets/images/src/energyimpact-clouds.svg); + background-repeat: no-repeat, no-repeat; + background-size: 11em auto, auto auto; + background-position: right 13rem top 0, right 1rem top -2rem; +} \ No newline at end of file diff --git a/www/assets/css/wpt-header.css b/www/assets/css/wpt-header.css index 3c9533da8c..dcf0b6c973 100644 --- a/www/assets/css/wpt-header.css +++ b/www/assets/css/wpt-header.css @@ -14,16 +14,16 @@ wpt-header { --wpt-user-icon: url(/assets/images/icon-user.svg) left 50% no-repeat; } wpt-header * { - transition: color 0.2s linear; + transition: color .4s linear, background-color .4s linear; } -.account-layout wpt-header, body.history wpt-header, body.about wpt-header, body.four-oh-four wpt-header, body.common wpt-header, body.video wpt-header, body.compare:not(.compare-experiment) wpt-header, -body.compare-loading wpt-header { +body.compare-loading wpt-header, +body.feature-cc wpt-header { --wpt-header-text: #1e4078; --wpt-header-activeborder: #091a3f33; --wpt-header-border: #fff; @@ -80,6 +80,8 @@ wpt-header header { margin-bottom: -6rem; } + + wpt-header a { color: #fff; text-decoration: none; @@ -415,7 +417,6 @@ wpt-header .wptheader_nav_menu details[open] summary span:after { wpt-header .wptheader_nav_menu details[open] summary span:after { border-top: 5px solid var(--wpt-header-background); } - wpt-header .wptheader_menu[open] .wptheader_menubtn { display: none !important; } @@ -541,7 +542,8 @@ wpt-header .wptheader_nav_menu details[open] summary span:after { body.common wpt-header, body.video wpt-header, body.compare:not(.compare-experiment) wpt-header, - body.compare-loading wpt-header { + body.compare-loading wpt-header, + body.feature-cc wpt-header { --wpt-user-icon: url(/assets/images/icon-user-dark.svg) left 50% no-repeat; } } diff --git a/www/assets/images/src/bg_envblobby1.svg b/www/assets/images/src/bg_envblobby1.svg new file mode 100644 index 0000000000..d7f7f982bb --- /dev/null +++ b/www/assets/images/src/bg_envblobby1.svg @@ -0,0 +1,3 @@ + + + diff --git a/www/assets/images/src/bg_envblobby2.svg b/www/assets/images/src/bg_envblobby2.svg new file mode 100644 index 0000000000..9ec2ae603c --- /dev/null +++ b/www/assets/images/src/bg_envblobby2.svg @@ -0,0 +1,3 @@ + + + diff --git a/www/assets/images/src/bg_envblobby3.svg b/www/assets/images/src/bg_envblobby3.svg new file mode 100644 index 0000000000..c706c5eb07 --- /dev/null +++ b/www/assets/images/src/bg_envblobby3.svg @@ -0,0 +1,3 @@ + + + diff --git a/www/assets/images/src/bg_envblobby4.svg b/www/assets/images/src/bg_envblobby4.svg new file mode 100644 index 0000000000..eed39f8c6f --- /dev/null +++ b/www/assets/images/src/bg_envblobby4.svg @@ -0,0 +1,3 @@ + + + diff --git a/www/assets/images/src/energyimpact-clouds.svg b/www/assets/images/src/energyimpact-clouds.svg new file mode 100644 index 0000000000..a549851b23 --- /dev/null +++ b/www/assets/images/src/energyimpact-clouds.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/www/assets/images/src/energyimpact-sky.svg b/www/assets/images/src/energyimpact-sky.svg new file mode 100644 index 0000000000..4e7f230287 --- /dev/null +++ b/www/assets/images/src/energyimpact-sky.svg @@ -0,0 +1,4 @@ + + + + diff --git a/www/assets/images/src/energyimpact-trees.svg b/www/assets/images/src/energyimpact-trees.svg new file mode 100644 index 0000000000..c5b850b364 --- /dev/null +++ b/www/assets/images/src/energyimpact-trees.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/www/assets/images/src/env-car.svg b/www/assets/images/src/env-car.svg new file mode 100644 index 0000000000..7519f80715 --- /dev/null +++ b/www/assets/images/src/env-car.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/www/assets/images/src/env-scale.svg b/www/assets/images/src/env-scale.svg new file mode 100644 index 0000000000..98f79e323f --- /dev/null +++ b/www/assets/images/src/env-scale.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/www/assets/images/src/icon-battery-bolt.svg b/www/assets/images/src/icon-battery-bolt.svg new file mode 100644 index 0000000000..f3f13d9527 --- /dev/null +++ b/www/assets/images/src/icon-battery-bolt.svg @@ -0,0 +1,3 @@ + + + diff --git a/www/assets/images/src/icon-caching.svg b/www/assets/images/src/icon-caching.svg new file mode 100644 index 0000000000..37b27d9a4a --- /dev/null +++ b/www/assets/images/src/icon-caching.svg @@ -0,0 +1,3 @@ + + + diff --git a/www/assets/images/src/icon-file-bookmark-alt-1.svg b/www/assets/images/src/icon-file-bookmark-alt-1.svg new file mode 100644 index 0000000000..5542d3fe52 --- /dev/null +++ b/www/assets/images/src/icon-file-bookmark-alt-1.svg @@ -0,0 +1,4 @@ + + + + diff --git a/www/assets/images/src/icon-file-wired.svg b/www/assets/images/src/icon-file-wired.svg new file mode 100644 index 0000000000..05f2b6dce8 --- /dev/null +++ b/www/assets/images/src/icon-file-wired.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/www/assets/images/src/icon-file-zipper.svg b/www/assets/images/src/icon-file-zipper.svg new file mode 100644 index 0000000000..2d7817f98a --- /dev/null +++ b/www/assets/images/src/icon-file-zipper.svg @@ -0,0 +1,3 @@ + + + diff --git a/www/assets/images/src/icon-globe-alt.svg b/www/assets/images/src/icon-globe-alt.svg new file mode 100644 index 0000000000..4d8c2b1e36 --- /dev/null +++ b/www/assets/images/src/icon-globe-alt.svg @@ -0,0 +1,3 @@ + + + diff --git a/www/assets/images/src/icon-image-compression.svg b/www/assets/images/src/icon-image-compression.svg new file mode 100644 index 0000000000..5d17d2ccf1 --- /dev/null +++ b/www/assets/images/src/icon-image-compression.svg @@ -0,0 +1,3 @@ + + + diff --git a/www/assets/images/src/icon-microchip.svg b/www/assets/images/src/icon-microchip.svg new file mode 100644 index 0000000000..56ad98f25e --- /dev/null +++ b/www/assets/images/src/icon-microchip.svg @@ -0,0 +1,3 @@ + + + diff --git a/www/assets/images/src/icon_routes.svg b/www/assets/images/src/icon_routes.svg new file mode 100644 index 0000000000..774a26753d --- /dev/null +++ b/www/assets/images/src/icon_routes.svg @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/www/assets/images/src/icon_tree.svg b/www/assets/images/src/icon_tree.svg new file mode 100644 index 0000000000..109c278fdb --- /dev/null +++ b/www/assets/images/src/icon_tree.svg @@ -0,0 +1,4 @@ + + + + diff --git a/www/assets/images/webpagetest-carbon-control-badge-monitored.png b/www/assets/images/webpagetest-carbon-control-badge-monitored.png new file mode 100644 index 0000000000..8becc4e900 Binary files /dev/null and b/www/assets/images/webpagetest-carbon-control-badge-monitored.png differ diff --git a/www/assets/images/wpt-logo-dark.svg b/www/assets/images/wpt-logo-dark.svg index a5901f2e88..4b831bfba7 100644 --- a/www/assets/images/wpt-logo-dark.svg +++ b/www/assets/images/wpt-logo-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/www/assets/images/wpt-logo.svg b/www/assets/images/wpt-logo.svg index 2fd5744210..3a4ba30c34 100644 --- a/www/assets/images/wpt-logo.svg +++ b/www/assets/images/wpt-logo.svg @@ -1 +1,16 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + diff --git a/www/assets/images/wpt_home_featureimg-cc.jpg b/www/assets/images/wpt_home_featureimg-cc.jpg new file mode 100644 index 0000000000..b247a85c26 Binary files /dev/null and b/www/assets/images/wpt_home_featureimg-cc.jpg differ diff --git a/www/assets/images/wpt_home_swoop-cc.svg b/www/assets/images/wpt_home_swoop-cc.svg new file mode 100644 index 0000000000..f20b62b3e9 --- /dev/null +++ b/www/assets/images/wpt_home_swoop-cc.svg @@ -0,0 +1,3 @@ + + + diff --git a/www/carboncontrol.php b/www/carboncontrol.php new file mode 100644 index 0000000000..2dbf263c76 --- /dev/null +++ b/www/carboncontrol.php @@ -0,0 +1,195 @@ +getStepResult(1)->getRawResults(); +$testStepResult = TestStepResult::fromFiles($testInfo, 1, 0, 1); +$requests = $testStepResult->getRequests(); + + + +// bytes metric +$pageweight_total = $testStepResult->getMetric('bytesIn'); +$pageweight_total_bytes = $pageweight_total; +$pageweight_units = "B"; +if ($pageweight_total > 1000) { + $pageweight_total = round($pageweight_total / 1024, 1); + $pageweight_units = "KB"; +} +if ($pageweight_total > 1000) { + $pageweight_total = round($pageweight_total / 1000, 2); + $pageweight_units = "MB"; +} +$resource_impact = []; +$resource_config = []; +$resource_config['js'] = ['JavaScript', "#E7AD45"]; +$resource_config['video'] = ['Video', "#CD6363"]; +$resource_config['image'] = ['Images', "#63ADCD"]; +$resource_config['font'] = ['Fonts', "#9263CD"]; +$resource_config['css'] = ['CSS', "#63CD9A"]; +$resource_config['html'] = ['HTML', "#A6934F"]; +$resource_config['other'] = ['Other', "#959595"]; +$resource_config['flash'] = ['Flash', "#222"]; + +$mime_breakdown = $testStepResult->getMimeTypeBreakdown(); + +foreach ($mime_breakdown as $type => $values) { + $val = $values["bytes"] / $pageweight_total_bytes * 100; + $resource_impact[] = [$resource_config[$type][0], $val, $resource_config[$type][1], round($val)]; +} + + +// green hosting info metric +$carbon_footprint = $testStepResult->getMetric('carbon-footprint'); + + + +$green_hosting = $carbon_footprint['green-hosting']; + +if (isset($green_hosting) && !isset($green_hosting[0]['hosted_by'])) { + $green_hosting[0]['hosted_by'] = 'Unknown'; +} + +// for the quick check impact audits +$practices = []; + +// good avg bad +function convertToTextScore($score) +{ + if ($score > 90) { + $score = "good"; + } elseif ($score > 50) { + $score = "avg"; + } else { + $score = "bad"; + } + return $score; +} + +// text compression +if (isset($pageData['score_gzip'])) { + $practices['gzip_score_num'] = $pageData['score_gzip']; + $practices['gzip_score'] = convertToTextScore($pageData['score_gzip']); + $practices['gzip_total'] = round($pageData['gzip_total'] / 1024.0, 1); + $scorepercent = $pageData['score_gzip'] / 100; + $practices['gzip_savings'] = round($pageData['gzip_total'] * $scorepercent / 1024.0, 1); + $practices['gzip_target'] = round(($practices['gzip_total'] - $practices['gzip_savings']), 1); +} + +// text minify +//print_r($pageData); + +if (isset($pageData['score_minify'])) { + $practices['minify_score_num'] = $pageData['score_minify']; + $practices['minify_score'] = convertToTextScore($pageData['score_minify']); + $practices['minify_total'] = round($pageData['minify_total'] / 1024.0, 1); + $practices['minify_savings'] = round($pageData['minify_savings'] / 1024.0, 1); + $practices['minify_target'] = round(($pageData['minify_total'] - $pageData['minify_savings']) / 1024.0, 1); +} + +// cdn score +if (isset($pageData['score_cdn'])) { + $practices['cdn_score_num'] = $pageData['score_cdn']; + $practices['cdn_score'] = convertToTextScore($pageData['score_cdn']); +} + +// lazy loadable images +$imgsOutsideViewport = $testStepResult->getMetric('imgs-out-viewport'); +$imgsInsideViewport = $testStepResult->getMetric('imgs-in-viewport'); +$imgsInsideViewportSrcs = []; +foreach ($imgsInsideViewport as $img) { + array_push($imgsInsideViewportSrcs, $img['src']); +} +$practices['images_need_lazy_total'] = 0; +if (isset($imgsOutsideViewport)) { + foreach ($imgsOutsideViewport as $img) { + if ($img["loading"] !== "lazy" && !in_array($img["src"], $imgsInsideViewportSrcs) && strpos($img["src"], 'data:') !== 0) { + $practices['images_need_lazy_total'] += 1; + } + } +} + +$practices['images_need_lazy_score'] = "good"; +if ($practices['images_need_lazy_total'] > 2) { + $practices['images_need_lazy_score'] = "avg"; +} +if ($practices['images_need_lazy_total'] > 5) { + $practices['images_need_lazy_score'] = "bad"; +} + + + +// image compresson +if (isset($pageData['score_compress'])) { + $practices['images_score_num'] = $pageData['score_compress']; + $practices['images_score'] = convertToTextScore($pageData['score_compress']); + $practices['images_total'] = round($pageData['image_total'] / 1024.0, 1); + $practices['images_savings'] = round($pageData['image_savings'] / 1024.0, 1); + $practices['images_target'] = round(($pageData['image_total'] - $pageData['image_savings']) / 1024.0, 1); +} + +// cache +if (isset($pageData['score_cache']) && $pageData['score_cache'] >= 0) { + $practices['cache_score'] = convertToTextScore($pageData['score_cache']); + $practices['cache_score_num'] = $pageData['score_cache']; +} + +// preloads +$practices['unused_preloads_total'] = 0; + +foreach ($requests as $request) { + if (isset($request['preloadUnused']) && $request['preloadUnused'] == "true") { + $practices['unused_preloads_total'] += 1; + } +} +$practices['unused_preloads_score'] = "good"; +if ($practices['unused_preloads_total'] > 2) { + $practices['unused_preloads_score'] = "avg"; +} +if ($practices['unused_preloads_total'] > 5) { + $practices['unused_preloads_score'] = "bad"; +} + +$experimentOptsUrlGenerator = UrlGenerator::create(FRIENDLY_URLS, "", $id, 0, 0); +$experimentOptsHref = $experimentOptsUrlGenerator->resultPage("experiments"); + + + +// template +echo view('pages.carboncontrol', [ + 'test_results_view' => true, + 'page_title' => $page_title, + 'test_url' => $url, + 'resource_impact' => $resource_impact, + 'has_ei_results' => isset($carbon_footprint) && $carbon_footprint !== [], + 'green_hosting' => $green_hosting, + 'carbon_footprint' => $carbon_footprint, + 'pageweight_total' => $pageweight_total, + 'pageweight_units' => $pageweight_units, + 'opps_url' => $experimentOptsHref, + 'practices' => $practices, + 'body_class' => 'result result-impact', + 'results_header' => $results_header +]); diff --git a/www/construction.php b/www/construction.php index ee7fc941f2..c74e1f9c05 100644 --- a/www/construction.php +++ b/www/construction.php @@ -10,4 +10,3 @@ 'page_title' => 'WebPageTest - Under Construction', 'body_class' => 'four-oh-four', ]); - diff --git a/www/experiments/carbon.inc b/www/experiments/carbon.inc new file mode 100644 index 0000000000..8e7abad3af --- /dev/null +++ b/www/experiments/carbon.inc @@ -0,0 +1,127 @@ +getMetric('carbon-footprint'); + + $green_hosting = $carbonFootprint['green-hosting']; + + + + //TODO this is from gen content + $genContentSize = $testStepResult->getMetric('generated-content-size'); + $genContentPercent = $testStepResult->getMetric('generated-content-percent'); + + + + //end todo + + + if (isset($carbonFootprint) && $carbonFootprint !== [] ) { + $errDesc = "Factors such as heavier page weight and hosts that do not use green energy both increase a site's carbon footprint."; + + + $carbonFootprint = $carbonFootprint['sustainable-web-design']; + + $carbonCompareAmt = round(( abs($avgSiteCarbon - $carbonFootprint) / $avgSiteCarbon ) * 100); + if ($carbonCompareAmt === 0) { + $carbonCompare = "Carbon footprint was average."; + } elseif ($carbonFootprint > $avgSiteCarbon) { + $carbonCompare = "Carbon footprint was $carbonCompareAmt% higher than average."; + } else { + $carbonCompare = "Carbon footprint was $carbonCompareAmt% better than average."; + } + $opp = null; + + if ($carbonFootprint > $avgSiteCarbon) { + $errTitle = "This site's carbon footprint was higher than average"; + + if (isset($genContentSize) && isset($genContentPercent)) { + $genContentSize = floatval($genContentSize); + $genContentPercent = floatval($genContentPercent); + $expsToAdd = array(); + + + + if ($genContentSize > .5 || $genContentPercent > 1) { + $amtNote = "(" . $genContentSize . "kb larger, or " . $genContentPercent . "% of total HTML)"; + + array_push($expsToAdd, (object) [ + "id" => '098', + 'title' => 'Mimic Pre-rendered HTML', + "desc" => '

Server rendering can reduce the need to load JavaScript after delivery, lessening impact. This experiment mimics server-generated HTML by swapping the initial HTML with the fully rendered HTML from this test run. Note: this will very likely break site behavior, but is potentially useful for comparing early metrics and assessing whether moving logic to the server is worth the effort.

', + "expvar" => 'prerender', + "expval" => array($id), + "hideassets" => true + ]); + + array_push($expsToAdd, (object) [ + "id" => '099', + 'title' => 'Disable Scripts', + "desc" => '

Pairs well with prior experiment! When content is delivered up-front in HTML, client-side scripting can be reduced, lessening impact. This experiment makes all scripts (inline and external) unrecognizable as javascript by the browser in order to demonstrate whether the site will still be usable if JavaScript fails to properly run.

', + "expvar" => 'disablescripts', + "expval" => array(''), + "hideassets" => true + ]); + } + + + if (isset($green_hosting)) { + $nongreenhosts = []; + foreach ($green_hosting as $host) { + if (isset($host['green']) && $host['green'] === false) { + array_push($nongreenhosts, $host['url']); + } + } + + if (count($nongreenhosts) > 0) { + array_push($expsToAdd, (object) [ + "id" => '100', + 'title' => 'Move Files to Green Hosts', + "desc" => '

This experiment will test for changes in carbon footprint from moving files to green hosting. Note: the overrides happen at the host level, so any requests from that host will now be self-hosted.

', + "expvar" => 'experiment-overrideHost', + "expval" => array_unique($nongreenhosts) + ]); + } + } + } + if (count($expsToAdd) > 0) { + $opp = [ + "title" => $errTitle, + "desc" => $errDesc, + "examples" => array(), + "experiments" => $expsToAdd, + "good" => false + ]; + } else { + $opp = [ + "title" => $errTitle, + "desc" => $errDesc, + "examples" => array(), + "good" => false + ]; + } + } else { + $opp = [ + "title" => 'Carbon Footprint was average or better', + "desc" => $errDesc, + "examples" => array(), + "experiments" => array(), + "good" => true + ]; + } + + + AssessmentRegistry::getInstance()->register(AssessmentRegistry::Resilient, $opp); + } +})(); diff --git a/www/experiments/common.inc b/www/experiments/common.inc index 7898493ef0..1849fb0eea 100644 --- a/www/experiments/common.inc +++ b/www/experiments/common.inc @@ -46,6 +46,12 @@ $num_critical = null; $num_moderate = null; $num_minor = null; $cls = null; +//carbon +$carbonFootprint = null; +$avgSiteCarbon = 0.6; +$hostsGreen = null; +$carbonCompare = null; + if ($metaInfo) { $assessmentData = $metaInfo['experiment']['assessment']; @@ -117,6 +123,7 @@ require_once OE_PATH . '/meta-viewport.inc'; require_once OE_PATH . '/axe-warnings.inc'; // resilient +require_once OE_PATH . '/carbon.inc'; require_once OE_PATH . '/render-blocking-3rd-party.inc'; require_once OE_PATH . '/security-jslibs.inc'; require_once OE_PATH . '/insecure-requests.inc'; @@ -279,6 +286,9 @@ foreach ($assessment as $key => $cat) { $summary .= " HTML content was mostly generated server-side."; } } + if ($carbonFootprint !== null && $carbonCompare !== null) { + $summary .= " " . $carbonCompare; + } } else { $summary = "Use this section to create custom experiments to add to your test."; } diff --git a/www/experiments/findings.inc b/www/experiments/findings.inc index 5f15ab749a..4476a91b33 100644 --- a/www/experiments/findings.inc +++ b/www/experiments/findings.inc @@ -29,8 +29,8 @@ if ($experiment) { array("chromeUserTiming.LargestContentfulPaint", "Largest Contentful Paint", "s", null, true), array("chromeUserTiming.CumulativeLayoutShift", "Cumulative Layout Shift", "", array("Better", "Worse"), false), array("TotalBlockingTime", "Total Blocking Time", "s", null, false), - array("visualComplete", "Visual Complete", "s", null, true), - array("fullyLoaded", "Fully Loaded", "s", null, true), + //array("visualComplete", "Visual Complete", "s", null, true), + array("carbon-footprint", "Carbon Footprint", "g", array("Lighter", "Heavier"), false), array("bytesIn", "Page Weight", "KB", array("Lighter", "Heavier"), false) ); @@ -54,6 +54,12 @@ if ($experiment) { foreach ($diffMetrics as $metric) { $experimentMetric = $tests[0]['stepResult']->getMetric($metric[0]); $controlMetric = $tests[1]['stepResult']->getMetric($metric[0]); + + if ($metric[0] === "carbon-footprint") { + $experimentMetric = $experimentMetric['sustainable-web-design']; + $controlMetric = $controlMetric['sustainable-web-design']; + } + if ($ttfbDiffNotable && $removeTTFBfromDiffs && $metric[4]) { $experimentMetric = $experimentMetric - $experimentTTFB; $controlMetric = $controlMetric - $controlTTFB; @@ -71,7 +77,7 @@ if ($experiment) { // additional non-metric comparisons if ($blockingReqsDiff !== 0) { - echo 'Render-Blocking Requests'; + echo 'Blocking Requests'; } ?> @@ -81,6 +87,10 @@ if ($experiment) { foreach ($diffMetrics as $metric) { $experimentMetric = $tests[0]['stepResult']->getMetric($metric[0]); $controlMetric = $tests[1]['stepResult']->getMetric($metric[0]); + if ($metric[0] === "carbon-footprint") { + $experimentMetric = $experimentMetric['sustainable-web-design']; + $controlMetric = $controlMetric['sustainable-web-design']; + } if ($ttfbDiffNotable && $removeTTFBfromDiffs && $metric[4]) { $experimentMetric = $experimentMetric - $experimentTTFB; $controlMetric = $controlMetric - $controlTTFB; diff --git a/www/experiments/list_applied.inc b/www/experiments/list_applied.inc index 5c99f630e7..902fa56f6e 100644 --- a/www/experiments/list_applied.inc +++ b/www/experiments/list_applied.inc @@ -7,10 +7,11 @@ if ($experiment) { foreach ($recips as $recipe) { $recipeID = key($recipe); + foreach ($appliedAssessment as $cat) { foreach ($cat["opportunities"] as $opp) { foreach ($opp["experiments"] as $exp) { - if ($exp["id"] === $recipeID) { + if ($exp["id"] == $recipeID) { $experimentInfo = $exp; } } diff --git a/www/header.inc b/www/header.inc index 3a53fe36c9..0c05aa14ab 100644 --- a/www/header.inc +++ b/www/header.inc @@ -405,6 +405,7 @@ if (!strcasecmp('Test Result', $tab) && (!isset($nosubheader) || !@$nosubheader) $tabs['HTML Diff'] = $menuUrlGenerator->resultPage("htmldiff", $endParams); } $tabs['Detected Technologies'] = $menuUrlGenerator->resultPage("technologies", $endParams); + $tabs['Carbon Control'] = $menuUrlGenerator->resultPage("carboncontrol", $endParams); if ($gradedRunResults->hasBreakdownTimeline()) { // currently only supported by standard urls diff --git a/www/home.php b/www/home.php index 14907ade18..9d086410b0 100644 --- a/www/home.php +++ b/www/home.php @@ -89,7 +89,7 @@ ?> - + )"> + + + + + \n"; if (strlen($secret)) { @@ -251,15 +256,19 @@
+
+ +