Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pro status visuals #2063

Merged
merged 4 commits into from
Jun 22, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions www/common.inc
Original file line number Diff line number Diff line change
Expand Up @@ -487,3 +487,5 @@ if (is_file('./settings/custom_common.inc.php')) {
include('./settings/custom_common.inc.php');
}

require_once __DIR__ . '/experiments/user_access.inc';

1 change: 0 additions & 1 deletion www/experiments.php
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
require_once __DIR__ . '/include/TestResults.php';
require_once __DIR__ . '/include/RunResultHtmlTable.php';
require_once __DIR__ . '/include/TestResultsHtmlTables.php';
require_once __DIR__ . '/experiments/user_access.inc';

// if this is an experiment itself, we don't want to offer opps on it, so we redirect to the source test's opps page.
if($experiment && isset($experimentOriginalExperimentsHref) ){
Expand Down
59 changes: 35 additions & 24 deletions www/home_header.php
Original file line number Diff line number Diff line change
@@ -1,33 +1,44 @@
<div class="home_feature">
<div class="home_feature_hed_contain">
<div class="home_feature_containslides">
<div class="home_feature_hed home_feature_hed-main">
<div class="home_feature_hed_text">
<h1 class="attention">Test. Optimize. Repeat!</h1>
<p>Instantly test your site’s speed, usability, and resilience in real <b>browsers</b>, <b>devices</b>, and <b>locations</b> around the&nbsp;world. </p>
<?php

if( $experiments_paid && $experiments_logged_in ){
?>
<div class="home_feature_hed home_feature_hed-pro home_feature_hed-pro-loggedin">
<div class="home_feature_hed_text">
<h1 class="attention"><span class="home_feature_hed_text_leadin">Welcome to </span> <img class="home_feature_hed_text_logo" width="105" height="14" src="/images/wpt-logo-pro.svg" alt="WebPageTest Pro"></h1>
<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_visual">
<img src="/images/wpt_home_featureimg.jpg" fetchpriority="high" width="1414" height="843" alt="screenshot of wpt results page">
</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="/images/wpt-logo-pro.svg" alt="WebPageTest Pro"></h1>
<p>All of the WebPageTest features you already love, <span class="home_feature_hed_text_line">plus <b>API Access</b> &amp; <b>No-Code Experiments!</b></span></p>
<a class="pill" href="/signup" style="
padding: .9em 1.5em;
">View Plans &amp; Learn More &gt;&gt;</a>

<?php } else { ?>
<div class="home_feature_hed home_feature_hed-main">
<div class="home_feature_hed_text">
<h1 class="attention">Test. Optimize. Repeat!</h1>
<p>Instantly test your site’s speed, usability, and resilience in real <b>browsers</b>, <b>devices</b>, and <b>locations</b> around the&nbsp;world. </p>

</div>
<div class="home_feature_hed_visual">
<img src="/images/wpt_home_featureimg.jpg" fetchpriority="high" width="1414" height="843" alt="screenshot of wpt results page">
</div>
</div>
<div class="home_feature_hed_visual">
<video width="1152" height="720" playsinline="" id="intro" poster="/images/pro-intro.jpg" preload="none">
<source src="/images/pro-intro-1152.mp4" media="(min-width: 800px)">
<source src="/images/pro-intro-480.mp4">
<!--<track default="" kind="captions" srclang="en" src="/images/pro-intro.vtt">-->
</video>
<button class="play" id="playbtn">Play/Pause Video</button>
<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="/images/wpt-logo-pro.svg" alt="WebPageTest Pro"></h1>
<p>All of the WebPageTest features you already love, <span class="home_feature_hed_text_line">plus <b>API Access</b> &amp; <b>No-Code Experiments!</b></span></p>
<a class="pill" href="/signup" style="padding: .9em 1.5em;">View Plans &amp; Learn More &gt;&gt;</a>
</div>
<div class="home_feature_hed_visual">
<video width="1152" height="720" playsinline="" id="intro" poster="/images/pro-intro.jpg" preload="none">
<source src="/images/pro-intro-1152.mp4" media="(min-width: 800px)">
<source src="/images/pro-intro-480.mp4">
<!--<track default="" kind="captions" srclang="en" src="/images/pro-intro.vtt">-->
</video>
<button class="play" id="playbtn">Play/Pause Video</button>
</div>
</div>
</div>
<?php } ?>
</div>


Expand All @@ -41,7 +52,7 @@

<script>
setInterval(() => {
if( !document.body.classList.contains("playing") && matchMedia("(prefers-reduced-motion: no-preference)").matches ){
if( document.body.querySelector(".home_feature_hed-main") && !document.body.classList.contains("playing") && matchMedia("(prefers-reduced-motion: no-preference)").matches ){
document.body.classList.toggle("feature-pro");
}
},8000);
Expand Down
45 changes: 39 additions & 6 deletions www/pagestyle2.css
Original file line number Diff line number Diff line change
Expand Up @@ -3101,6 +3101,14 @@ header {
border: 3px solid #fff;
}

header .pro-flag {
border-width: 2px;
align-self: center;
display: inline-block;
font-size: .8em;
padding: .4em;
}

.result .results_header_contain .pro-flag {
border-width: 2px;
margin-right: 1em;
Expand Down Expand Up @@ -3497,6 +3505,25 @@ header {
}
}

@media (min-width: 30em) {
.home_feature_hed-pro-loggedin {
padding-bottom: 3rem;
}
}

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

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

.home_feature img {
max-width: 100%;
display: block;
Expand Down Expand Up @@ -6214,7 +6241,8 @@ th.header {
float: right;
margin-bottom: 1em;
}
#runningHeader.runningHeaderBatch form[name=compare]{

#runningHeader.runningHeaderBatch form[name=compare] {
float: none;
}

Expand Down Expand Up @@ -6533,9 +6561,10 @@ th.header {
}
}

.runningHeaderBatch form[name=compare]{
.runningHeaderBatch form[name=compare] {
width: 100%;
}

.batchResults {
margin-left: auto;
margin-right: auto;
Expand Down Expand Up @@ -7338,7 +7367,8 @@ td.legend {
margin-left: auto;
margin-right: auto;
/* margin-top: 6rem; */
margin: 0 auto;}
margin: 0 auto;
}

.testimonial blockquote {
font-size: 1.375em;
Expand All @@ -7351,9 +7381,11 @@ margin: 0 auto;}
margin-bottom: 0.5rem;
font-style: italic;
}

.testimonial blockquote a {
color: inherit;
}

@media (max-width: 50em) {
.testimonial {
font-size: .8em;
Expand Down Expand Up @@ -7532,9 +7564,10 @@ margin: 0 auto;}
position: relative;
}

.simpleadvancedfields_contain:last-child {
border-bottom: 1px solid #ddd;
.simpleadvancedfields_contain:last-child {
border-bottom: 1px solid #ddd;
}

.simpleadvancedfields_contain>input+label:before {
content: "";
background: url("data:image/svg+xml,%3csvg width='16' height='10' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.7 1.7 8 8 14.3 1.7' stroke='%23fff' fill='none' stroke-width='2'/%3e%3c/svg%3e");
Expand Down Expand Up @@ -9027,4 +9060,4 @@ body.screenshot .header_screenshots img {

body.screenshot .experiment_opportunities {
display: none;
}
}
1 change: 0 additions & 1 deletion www/runtest.php
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@

require_once('./ec2/ec2.inc.php');
require_once(__DIR__ . '/include/CrUX.php');
require_once __DIR__ . '/experiments/user_access.inc';

$experimentURL = Util::getSetting('experimentURL', null);
$ui_priority = !is_null($request_context->getUser()) ? $request_context->getUser()->getUserPriority() : 0;
Expand Down
15 changes: 14 additions & 1 deletion www/templates/layouts/includes/wpt-header.php
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,16 @@ function addTab($tabName, $tabUrl, $addClass = '')
</ul>
</div>
<div class="wptheader_nav_menu_section">
<?php
if( !$experiments_paid ){
?>
<p class="wptheader_nav_cta">
<span>Ready to go <strong>Pro?</strong></span>
<a href="/signup">Compare Plans</a>
</p>
<?php
}
?>
</div>
</div>
</details>
Expand Down Expand Up @@ -129,7 +135,14 @@ function addTab($tabName, $tabUrl, $addClass = '')
$is_logged_in = isset($request_context) && !is_null($request_context->getUser()) && !is_null($request_context->getUser()->getAccessToken());
?>
<?php if ($is_logged_in) : ?>
<li><a href='/account'>My Account</a></li>

<li><a href='/account'>
<?php
if( $experiments_paid ){
echo '<em class="pro-flag">Pro</em> ';
}
?>
My Account</a></li>
<li>
<form method='POST' action='/logout' class='logout-form'>
<input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token'] ?>" />
Expand Down