Skip to content

Commit

Permalink
Update landing page and menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@lbartoli79
lbartoli79 committed Aug 23, 2024
1 parent 51f47e3 commit e6778bc
Show file tree
Hide file tree
Showing 4 changed files with 110 additions and 33 deletions.
59 changes: 51 additions & 8 deletions www/assets/css/pagestyle2.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2898,7 +2898,7 @@ body.result #main {

@media (min-width: 70em) {
.home_feature_hed_contain {
background-position: bottom -32px left 50%, bottom -50px left 50%;
background-position: bottom -32px left 50%, bottom -15px left 50%;
}
}

Expand Down Expand Up @@ -2952,13 +2952,15 @@ body.result #main {
@media (prefers-reduced-motion: no-preference) {
.home_feature_hed,
.home_feature_hed-pro,
.home_feature_hed-cc {
.home_feature_hed-cc,
.home_feature_hed-sonar {
transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}
}

.home_feature_hed-main,
.home_feature_hed-lfwp,
.home_feature_hed-sonar,
.home_feature_hed-cc {
position: absolute;
top: 0;
Expand Down Expand Up @@ -3002,8 +3004,10 @@ body.result #main {
}

.home:not(.feature-pro) .home_feature_hed-pro,
.home:not(.feature-sonar) .home_feature_hed-sonar,
.home:not(.feature-cc) .home_feature_hed-cc,
.home:not(.feature-lfwp) .home_feature_hed-lfwp,
.home.feature-sonar .home_feature_hed-main,
.home.feature-lfwp .home_feature_hed-main,
.home.feature-pro .home_feature_hed-main,
.home.feature-cc .home_feature_hed-main {
Expand All @@ -3016,6 +3020,7 @@ body.result #main {
overflow: hidden;
}


.home.feature-lfwp .home_feature_hed_contain {
background-color: #352a20;
background-image: url(/assets/images/wpt_home_swoop.svg),
Expand Down Expand Up @@ -3125,6 +3130,7 @@ header .pro-flag {
.home_feature_hed,
.home_feature_hed-pro,
.home_feature_hed-cc,
.home_feature_hed-sonar,
.home_feature_main {
display: flex;
margin: 0 auto;
Expand All @@ -3134,12 +3140,22 @@ header .pro-flag {
align-items: flex-start;
}

@media (max-width: 60em) {
.home_feature_hed,
.home_feature_hed-pro,
.home_feature_hed-cc,
.home_feature_hed-sonar,
.home_feature_main {
padding-bottom: 11rem;
}
}
@media (min-width: 60em) {
.home_feature_hed,
.home_feature_hed-pro,
.home_feature_hed-cc,
.home_feature_hed-sonar,
.home_feature_main {
padding-bottom: 3rem;
padding-bottom: 11rem;
}
}

Expand Down Expand Up @@ -3364,6 +3380,12 @@ header .pro-flag {
object-fit: contain;
height: auto;
}

.home_feature_hed-sonar .home_feature_hed_visual {
border: 0px;
background: #000;
}

.home_feature_hed-cc .home_feature_hed_visual {
box-shadow: 0px 0px 5px 3px #d3dfef;
}
Expand Down Expand Up @@ -3426,7 +3448,7 @@ header .pro-flag {

.home_feature_hed {
display: block;
padding: 2rem 0;
padding: 2rem 0 5rem;
}

.home_feature .home_feature_hed .attention {
Expand Down Expand Up @@ -3483,14 +3505,19 @@ header .pro-flag {

@media (min-width: 40em) {
.home_feature_hed-pro-loggedin {
padding-bottom: 5rem;
}
padding-bottom: 8rem;
}
}

@media (min-width: 60em) {
.home_feature_hed-pro-loggedin {
padding-bottom: 9rem;
padding-top: 2rem;
padding-bottom: 13rem;
}
}

@media (max-width: 70em) {
.home_feature_hed-pro-loggedin .home_feature_hed_visual {
display: none;
}
}

Expand Down Expand Up @@ -6500,6 +6527,11 @@ th.header {
margin-top: -1em;
}

.alert-banner-promo img {
margin: unset;
top: 0.5em;
}

.alert-banner a,
.alert-banner-twitch a {
display: block;
Expand All @@ -6509,6 +6541,17 @@ th.header {
color: #fff;
}

.alert-banner-promo {
font-size: 1.0em;
padding: 1em;
color: #154281;
background: #79cdfb;
}

.alert-banner-promo a {
color: #154281;
}

@media screen and (min-width: 35em) {
.alert-banner {
grid-column: 1 / 13;
Expand Down
73 changes: 49 additions & 24 deletions www/home_header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,21 @@
<p><b>You're ready to go!</b> Enjoy premium locations, bulk runs, test priority, our API, & No-Code Experiments!</p>
</div>
</div>

<div class="home_feature_hed home_feature_hed-sonar home_feature_hed-pro-loggedin">
<div class="home_feature_hed_text">
<h1 class="attention"><span class="home_feature_hed_text_leadin">Live Internet Outages Map (NEW)</h1>
<p>Gain visibility into internet outages and pinpoint the root cause of poor web performance.</p>
<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>
</div>
<div class="home_feature_hed_visual">
<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.">
</div>
</div>
<?php } else { ?>
<div class="home_feature_hed home_feature_hed-main">
<div class="home_feature_hed_text">
<h1 class="attention">Test. Experiment. Improve!</h1>
<p><strong>WebPageTest.</strong> <span class="home_feature_hed_highlighter">The gold standard in web performance testing. </span></p>

</div>
<div class="home_feature_hed_visual">
<img src="/assets/images/wpt_home_featureimg.jpg" width="1414" height="843" alt="screenshot of wpt results page">
Expand All @@ -32,18 +40,26 @@
<div class="home_feature_hed_visual">
<img src="/assets/images/wpt_home_lfwp_featureimg.jpg" width="1414" height="843" alt="screenshot of wpt results page">
</div>

</div>
<div class="home_feature_hed home_feature_hed-cc">
<div class="home_feature_hed_text">
<h1 class="attention"><span class="home_feature_hed_text_leadin">Introducing <b>Carbon Control <span class="flag">Experimental</span></b></span> </h1>
<p><b>New in WebPageTest!</b> Measure your site's carbon footprint and run No-Code Experiments to find ways to improve. </p>

</div>
<div class="home_feature_hed_visual">
<img src="/assets/images/wpt_home_featureimg-cc.jpg" width="1414" height="843" alt="screenshot of wpt results page">
</div>
</div>
<div class="home_feature_hed home_feature_hed-sonar">
<div class="home_feature_hed_text">
<h1 class="attention"><span class="home_feature_hed_text_leadin">Live Internet Outages Map (NEW)</h1>
<p>Gain visibility into internet outages and pinpoint the root cause of poor web performance.</p>
<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>
</div>
<div class="home_feature_hed_visual">
<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.">
</div>
</div>
<div class="home_feature_hed home_feature_hed-pro">
<div class="home_feature_hed_text">
<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>
Expand All @@ -59,40 +75,53 @@
<button class="play" id="playbtn">Play/Pause Video</button>
</div>
</div>

<?php } ?>
</div>





</div>
</div>

<script>
let featureSlides = setInterval(() => {
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 ){
if( document.body.classList.contains("feature-pro") ){
document.body.classList.remove("feature-pro");
document.body.classList.add("feature-lfwp");
} else if( document.body.classList.contains("feature-lfwp") ){
if (!matchMedia("(prefers-reduced-motion: no-preference)").matches) {
return;
}

if (document.body.classList.contains("playing") || (document.activeElement && document.activeElement.tagName === 'IFRAME')) {
return;
}

if (document.body.querySelector(".home_feature_hed-main")) {
// if (document.body.classList.contains("feature-pro")) {
// document.body.classList.remove("feature-pro");
// document.body.classList.add("feature-lfwp");
// } else
if (document.body.classList.contains("feature-lfwp")) {
document.body.classList.remove("feature-lfwp");
document.body.classList.add("feature-cc");
} else if( document.body.classList.contains("feature-cc") ){
} else if (document.body.classList.contains("feature-cc")) {
document.body.classList.remove("feature-cc");
document.body.classList.add("feature-sonar");
} else if (document.body.classList.contains("feature-sonar")) {
document.body.classList.remove("feature-sonar");
document.body.classList.add("feature-lfwp");
} else {
document.body.classList.add("feature-lfwp");
}
} else {
if (document.body.classList.contains("feature-pro")) {
document.body.classList.remove("feature-pro");
document.body.classList.add("feature-sonar");
} else {
document.body.classList.remove("feature-sonar");
document.body.classList.add("feature-pro");
}

}
},8000);
}, 8000);

<?php if (isset($req_cc)) {?>
clearTimeout(featureSlides);
<?php } ?>


(function(){
var intro = document.querySelector("video");
var playbtn = document.querySelector(".play");
Expand Down Expand Up @@ -132,22 +161,18 @@ function deactivate(){
}
});



document.body.addEventListener("mousedown",function( e ){
if( this.classList.contains("playing") && e.target !== intro && e.target !== playbtn ){
e.preventDefault();
deactivate();
}
});

document.body.addEventListener("keydown",function( e ){
if( this.classList.contains("playing") && e.keyCode === 27 ){
e.preventDefault();
deactivate();
}
});
}());

</script>


2 changes: 1 addition & 1 deletion www/include/home-subsections.inc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
$quotes = array(
array(
'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.',
'author' => 'Alex Russel <span>Program Manager, Microsoft Edge</span>'
'author' => 'Alex Russell <span>Program Manager, Microsoft Edge</span>'
),
/* 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>',
'author' => 'Todd Parker <span>Partner, Filament Group</span>'),
Expand Down
9 changes: 9 additions & 0 deletions www/templates/layouts/includes/wpt-header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,15 @@ function addTab($tabName, $tabUrl, $addClass = '')
<li class="wptheader_nav_menu_link"><a target="_blank" href="https://www.webpagetest.org/carbon-control/">Carbon Control (NEW)</a></li>
</ul>
</div>
<div class="wptheader_nav_menu_section wptheader_nav_cta">
<img src="/assets/images/header-menu-arrow.svg" width="20" height="20">
<p class="wptheader_nav_title">Live Internet Outages Map (NEW)</p>
</div>
<div class="wptheader_nav_menu_section nested">
<ul>
<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>
</ul>
</div>
<div class="wptheader_nav_menu_section wptheader_nav_cta" style="padding: 1.5rem 0;">
<img src="/assets/images/header-menu-arrow.svg" width="20" height="20">
<p class="wptheader_nav_title">For Enterprise:<br>Internet Performance Monitoring</p>
Expand Down

0 comments on commit e6778bc

Please sign in to comment.