Skip to content

Commit e51fea3

Browse files
author
Mike Kozicki
authored
Merge pull request #3101 from catchpoint/update_home
Update home
2 parents e5d0109 + 96396de commit e51fea3

5 files changed

Lines changed: 106 additions & 33 deletions

File tree

‎www/assets/css/pagestyle2.css‎

Lines changed: 51 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2898,7 +2898,7 @@ body.result #main {
28982898

28992899
@media (min-width: 70em) {
29002900
.home_feature_hed_contain {
2901-
background-position: bottom -32px left 50%, bottom -50px left 50%;
2901+
background-position: bottom -32px left 50%, bottom -15px left 50%;
29022902
}
29032903
}
29042904

@@ -2952,13 +2952,15 @@ body.result #main {
29522952
@media (prefers-reduced-motion: no-preference) {
29532953
.home_feature_hed,
29542954
.home_feature_hed-pro,
2955-
.home_feature_hed-cc {
2955+
.home_feature_hed-cc,
2956+
.home_feature_hed-sonar {
29562957
transition: opacity 1.5s ease-out, transform 1.5s ease-out;
29572958
}
29582959
}
29592960

29602961
.home_feature_hed-main,
29612962
.home_feature_hed-lfwp,
2963+
.home_feature_hed-sonar,
29622964
.home_feature_hed-cc {
29632965
position: absolute;
29642966
top: 0;
@@ -3002,8 +3004,10 @@ body.result #main {
30023004
}
30033005

30043006
.home:not(.feature-pro) .home_feature_hed-pro,
3007+
.home:not(.feature-sonar) .home_feature_hed-sonar,
30053008
.home:not(.feature-cc) .home_feature_hed-cc,
30063009
.home:not(.feature-lfwp) .home_feature_hed-lfwp,
3010+
.home.feature-sonar .home_feature_hed-main,
30073011
.home.feature-lfwp .home_feature_hed-main,
30083012
.home.feature-pro .home_feature_hed-main,
30093013
.home.feature-cc .home_feature_hed-main {
@@ -3016,6 +3020,7 @@ body.result #main {
30163020
overflow: hidden;
30173021
}
30183022

3023+
30193024
.home.feature-lfwp .home_feature_hed_contain {
30203025
background-color: #352a20;
30213026
background-image: url(/assets/images/wpt_home_swoop.svg),
@@ -3125,6 +3130,7 @@ header .pro-flag {
31253130
.home_feature_hed,
31263131
.home_feature_hed-pro,
31273132
.home_feature_hed-cc,
3133+
.home_feature_hed-sonar,
31283134
.home_feature_main {
31293135
display: flex;
31303136
margin: 0 auto;
@@ -3134,12 +3140,22 @@ header .pro-flag {
31343140
align-items: flex-start;
31353141
}
31363142

3143+
@media (max-width: 60em) {
3144+
.home_feature_hed,
3145+
.home_feature_hed-pro,
3146+
.home_feature_hed-cc,
3147+
.home_feature_hed-sonar,
3148+
.home_feature_main {
3149+
padding-bottom: 11rem;
3150+
}
3151+
}
31373152
@media (min-width: 60em) {
31383153
.home_feature_hed,
31393154
.home_feature_hed-pro,
31403155
.home_feature_hed-cc,
3156+
.home_feature_hed-sonar,
31413157
.home_feature_main {
3142-
padding-bottom: 3rem;
3158+
padding-bottom: 11rem;
31433159
}
31443160
}
31453161

@@ -3364,6 +3380,12 @@ header .pro-flag {
33643380
object-fit: contain;
33653381
height: auto;
33663382
}
3383+
3384+
.home_feature_hed-sonar .home_feature_hed_visual {
3385+
border: 0px;
3386+
background: #000;
3387+
}
3388+
33673389
.home_feature_hed-cc .home_feature_hed_visual {
33683390
box-shadow: 0px 0px 5px 3px #d3dfef;
33693391
}
@@ -3426,7 +3448,7 @@ header .pro-flag {
34263448

34273449
.home_feature_hed {
34283450
display: block;
3429-
padding: 2rem 0;
3451+
padding: 2rem 0 5rem;
34303452
}
34313453

34323454
.home_feature .home_feature_hed .attention {
@@ -3483,14 +3505,19 @@ header .pro-flag {
34833505

34843506
@media (min-width: 40em) {
34853507
.home_feature_hed-pro-loggedin {
3486-
padding-bottom: 5rem;
3487-
}
3508+
padding-bottom: 8rem;
3509+
}
34883510
}
34893511

34903512
@media (min-width: 60em) {
34913513
.home_feature_hed-pro-loggedin {
3492-
padding-bottom: 9rem;
3493-
padding-top: 2rem;
3514+
padding-bottom: 13rem;
3515+
}
3516+
}
3517+
3518+
@media (max-width: 70em) {
3519+
.home_feature_hed-pro-loggedin .home_feature_hed_visual {
3520+
display: none;
34943521
}
34953522
}
34963523

@@ -6500,6 +6527,11 @@ th.header {
65006527
margin-top: -1em;
65016528
}
65026529

6530+
.alert-banner-promo img {
6531+
margin: unset;
6532+
top: 0.5em;
6533+
}
6534+
65036535
.alert-banner a,
65046536
.alert-banner-twitch a {
65056537
display: block;
@@ -6509,6 +6541,17 @@ th.header {
65096541
color: #fff;
65106542
}
65116543

6544+
.alert-banner-promo {
6545+
font-size: 1.0em;
6546+
padding: 1em;
6547+
color: #154281;
6548+
background: #79cdfb;
6549+
}
6550+
6551+
.alert-banner-promo a {
6552+
color: #154281;
6553+
}
6554+
65126555
@media screen and (min-width: 35em) {
65136556
.alert-banner {
65146557
grid-column: 1 / 13;

‎www/assets/images/wpt_home_featureimg-sonar.webp‎

59 KB
Loading

‎www/home_header.php‎

Lines changed: 45 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,21 @@
1111
<p><b>You're ready to go!</b> Enjoy premium locations, bulk runs, test priority, our API, & No-Code Experiments!</p>
1212
</div>
1313
</div>
14-
14+
<div class="home_feature_hed home_feature_hed-sonar home_feature_hed-pro-loggedin">
15+
<div class="home_feature_hed_text">
16+
<h1 class="attention"><span class="home_feature_hed_text_leadin">Live Internet Outages Map (NEW)</h1>
17+
<p>Gain visibility into internet outages and pinpoint the root cause of poor web performance.</p>
18+
<a class="pill" href="https://www.catchpoint.com/outages?utm_source=WPT&utm_medium=carousel&utm_content=sonar-map" style="padding: .9em 1.5em;">Try Internet Sonar for Free &gt;&gt;</a>
19+
</div>
20+
<div class="home_feature_hed_visual">
21+
<img src="/assets/images/wpt_home_featureimg-sonar.webp" width="1101" height="807" alt="Gain visibility into internet outages and pinpoint the root cause of poor web performance.">
22+
</div>
23+
</div>
1524
<?php } else { ?>
1625
<div class="home_feature_hed home_feature_hed-main">
1726
<div class="home_feature_hed_text">
1827
<h1 class="attention">Test. Experiment. Improve!</h1>
1928
<p><strong>WebPageTest.</strong> <span class="home_feature_hed_highlighter">The gold standard in web performance testing. </span></p>
20-
2129
</div>
2230
<div class="home_feature_hed_visual">
2331
<img src="/assets/images/wpt_home_featureimg.jpg" width="1414" height="843" alt="screenshot of wpt results page">
@@ -32,18 +40,26 @@
3240
<div class="home_feature_hed_visual">
3341
<img src="/assets/images/wpt_home_lfwp_featureimg.jpg" width="1414" height="843" alt="screenshot of wpt results page">
3442
</div>
35-
3643
</div>
3744
<div class="home_feature_hed home_feature_hed-cc">
3845
<div class="home_feature_hed_text">
3946
<h1 class="attention"><span class="home_feature_hed_text_leadin">Introducing <b>Carbon Control <span class="flag">Experimental</span></b></span> </h1>
4047
<p><b>New in WebPageTest!</b> Measure your site's carbon footprint and run No-Code Experiments to find ways to improve. </p>
41-
4248
</div>
4349
<div class="home_feature_hed_visual">
4450
<img src="/assets/images/wpt_home_featureimg-cc.jpg" width="1414" height="843" alt="screenshot of wpt results page">
4551
</div>
4652
</div>
53+
<div class="home_feature_hed home_feature_hed-sonar">
54+
<div class="home_feature_hed_text">
55+
<h1 class="attention"><span class="home_feature_hed_text_leadin">Live Internet Outages Map (NEW)</h1>
56+
<p>Gain visibility into internet outages and pinpoint the root cause of poor web performance.</p>
57+
<a class="pill" href="https://www.catchpoint.com/outages?utm_source=WPT&utm_medium=carousel&utm_content=sonar-map" style="padding: .9em 1.5em;">Try Internet Sonar for Free &gt;&gt;</a>
58+
</div>
59+
<div class="home_feature_hed_visual">
60+
<img src="/assets/images/wpt_home_featureimg-sonar.webp" width="1101" height="807" alt="Gain visibility into internet outages and pinpoint the root cause of poor web performance.">
61+
</div>
62+
</div>
4763
<div class="home_feature_hed home_feature_hed-pro">
4864
<div class="home_feature_hed_text">
4965
<h1 class="attention"><span class="home_feature_hed_text_leadin">Say hello to </span> <img class="home_feature_hed_text_logo" width="105" height="14" src="/assets/images/wpt-logo-pro.svg" alt="WebPageTest Pro"></h1>
@@ -59,40 +75,49 @@
5975
<button class="play" id="playbtn">Play/Pause Video</button>
6076
</div>
6177
</div>
62-
6378
<?php } ?>
6479
</div>
65-
66-
67-
68-
69-
7080
</div>
7181
</div>
7282

7383
<script>
7484
let featureSlides = setInterval(() => {
75-
if( document.body.querySelector(".home_feature_hed-main") && !document.body.classList.contains("playing") && ( !document.activeElement || document.activeElement.tagName !== 'IFRAME' ) && matchMedia("(prefers-reduced-motion: no-preference)").matches ){
76-
if( document.body.classList.contains("feature-pro") ){
77-
document.body.classList.remove("feature-pro");
78-
document.body.classList.add("feature-lfwp");
79-
} else if( document.body.classList.contains("feature-lfwp") ){
85+
if (!matchMedia("(prefers-reduced-motion: no-preference)").matches) {
86+
return;
87+
}
88+
89+
if (document.body.classList.contains("playing") || (document.activeElement && document.activeElement.tagName === 'IFRAME')) {
90+
return;
91+
}
92+
93+
if (document.body.querySelector(".home_feature_hed-main")) {
94+
if (document.body.classList.contains("feature-lfwp")) {
8095
document.body.classList.remove("feature-lfwp");
8196
document.body.classList.add("feature-cc");
82-
} else if( document.body.classList.contains("feature-cc") ){
97+
} else if (document.body.classList.contains("feature-cc")) {
8398
document.body.classList.remove("feature-cc");
99+
document.body.classList.add("feature-sonar");
100+
} else if (document.body.classList.contains("feature-sonar")) {
101+
document.body.classList.remove("feature-sonar");
102+
document.body.classList.add("feature-lfwp");
84103
} else {
104+
document.body.classList.add("feature-lfwp");
105+
}
106+
} else {
107+
if (document.body.classList.contains("feature-pro")) {
108+
document.body.classList.remove("feature-pro");
109+
document.body.classList.add("feature-sonar");
110+
} else {
111+
document.body.classList.remove("feature-sonar");
85112
document.body.classList.add("feature-pro");
86113
}
87-
88114
}
89-
},8000);
115+
}, 8000);
90116

91117
<?php if (isset($req_cc)) {?>
92118
clearTimeout(featureSlides);
93119
<?php } ?>
94120

95-
96121
(function(){
97122
var intro = document.querySelector("video");
98123
var playbtn = document.querySelector(".play");
@@ -132,22 +157,18 @@ function deactivate(){
132157
}
133158
});
134159

135-
136-
137160
document.body.addEventListener("mousedown",function( e ){
138161
if( this.classList.contains("playing") && e.target !== intro && e.target !== playbtn ){
139162
e.preventDefault();
140163
deactivate();
141164
}
142165
});
166+
143167
document.body.addEventListener("keydown",function( e ){
144168
if( this.classList.contains("playing") && e.keyCode === 27 ){
145169
e.preventDefault();
146170
deactivate();
147171
}
148172
});
149173
}());
150-
151174
</script>
152-
153-

‎www/include/home-subsections.inc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
$quotes = array(
44
array(
55
'quote' => 'The best professional web performance investigators I know use WPT as a critical part of their workflows, and it\'s the center or mine.',
6-
'author' => 'Alex Russel <span>Program Manager, Microsoft Edge</span>'
6+
'author' => 'Alex Russell <span>Program Manager, Microsoft Edge</span>'
77
),
88
/* array('quote' => '<a href="https://product.webpagetest.org/experiments">Experiments</a> are a game changer for quantifying the speed impact of performance optimizations. What took days of technical work is now just a few clicks. Not only will this save tons of time, it will let us test and iterate ideas to find the right mix of recommendations efficiently.<br><b>I’m blown away this exists, it feels like magic.</b>',
99
'author' => 'Todd Parker <span>Partner, Filament Group</span>'),

‎www/templates/layouts/includes/wpt-header.php‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,15 @@ function addTab($tabName, $tabUrl, $addClass = '')
9292
<li class="wptheader_nav_menu_link"><a target="_blank" href="https://www.webpagetest.org/carbon-control/">Carbon Control (NEW)</a></li>
9393
</ul>
9494
</div>
95+
<div class="wptheader_nav_menu_section wptheader_nav_cta">
96+
<img src="/assets/images/header-menu-arrow.svg" width="20" height="20">
97+
<p class="wptheader_nav_title">Live Internet Outages Map (NEW)</p>
98+
</div>
99+
<div class="wptheader_nav_menu_section nested">
100+
<ul>
101+
<li class="wptheader_nav_menu_link"><a target="_blank" href="https://www.catchpoint.com/outages?utm_source=WPT&utm_medium=NavBar&utm_content=sonar-map ">See Outages Affecting Your Sites</a></li>
102+
</ul>
103+
</div>
95104
<div class="wptheader_nav_menu_section wptheader_nav_cta" style="padding: 1.5rem 0;">
96105
<img src="/assets/images/header-menu-arrow.svg" width="20" height="20">
97106
<p class="wptheader_nav_title">For Enterprise:<br>Internet Performance Monitoring</p>

0 commit comments

Comments
 (0)