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.

Sign up for GitHub

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

Jump to bottom

fix(signup): markup for signup flow #1840

Merged
merged 1 commit into from
May 13, 2022
Merged

fix(signup): markup for signup flow #1840

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
34 changes: 33 additions & 1 deletion www/css/account.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,12 +321,44 @@ body.theme-b {
}

/**
* begin signup steps
* begin signup step 1
*/

.signup-flow-step-1-layout main {
grid-column: gutter-start / gutter-end;
grid-template-columns: 1vw repeat(10, 1fr) 1vw;
margin-top: 0;
}

.signup-step-1-content * {
box-sizing: border-box;
}

.signup-feature {
background: #fff;
color: #fff;
}

.signup-hed-contain {
padding: 0 3rem;
background-color: #6b25cf;
background-image: url(/images/signup-bg.png);
background-size: cover;
}

.signup-hed {
font-size: 1.75rem;
padding: 0 5rem;
}

.ico-yellowcursor {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='59' height='59' viewBox='0 0 59 59' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M39.5229 18.7224C40.0744 19.2876 40.4553 20.1964 40.1815 21.1661L40.0148 21.7564C37.4717 30.7624 34.1034 39.3992 29.9498 47.5614C29.4012 48.6394 28.2748 48.8933 27.4103 48.6681C26.5645 48.4478 25.7894 47.7565 25.5679 46.7365L23.5167 37.2938C23.29 36.2501 22.429 35.3871 21.4584 35.1679L12.2722 33.0934C11.2368 32.8596 10.578 32.0457 10.3712 31.2186C10.1635 30.3878 10.3715 29.2526 11.4336 28.6753C19.3552 24.3692 27.7422 20.869 36.4922 18.2168L37.0653 18.0431C38.057 17.7425 38.9729 18.1587 39.5229 18.7224ZM37.675 20.5529L37.2403 20.6847C28.8487 23.2283 20.8013 26.5655 13.1904 30.6571L22.0264 32.6525C24.0073 33.0998 25.6043 34.756 26.0367 36.7463L27.9875 45.7269C31.9092 37.914 35.1036 29.6589 37.5331 21.0556L37.675 20.5529Z' fill='%23FFC830'/%3E%3C/svg%3E");
}

/**
* End signup step 1
*/

.card-container {
display: flex;
flex-direction: row;
Expand Down
3 changes: 3 additions & 0 deletions www/images/ico-yellowcursor.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added www/images/signup-bg.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 34 additions & 0 deletions www/js/account.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -477,6 +477,9 @@ window.SortableTable = SortableTable;
for (var i = 0; i < hiddenContentCells.length; i++) {
new HiddenContent(hiddenContentCells[i]);
}

attachListenerToBillingFrequencySelector();
handleRunUpdate();
});
} else {
document.querySelectorAll('.edit-button button').forEach(el => {
Expand Down Expand Up @@ -506,5 +509,36 @@ window.SortableTable = SortableTable;
for (var i = 0; i < hiddenContentCells.length; i++) {
new HiddenContent(hiddenContentCells[i]);
}
attachListenerToBillingFrequencySelector();
handleRunUpdate();
}

function attachListenerToBillingFrequencySelector () {
var selectors = document.querySelectorAll('#paid-plan-selector input[type=radio]');
selectors.forEach(s => {
s.addEventListener('change', e => {
var monthlyCard = document.querySelector('.card .monthly');
var annualCard = document.querySelector('.card .annual');
if (e.target.value == 'monthly') {
monthlyCard.classList.add('selected');
annualCard.classList.remove('selected');
} else {
monthlyCard.classList.remove('selected');
annualCard.classList.add('selected');
}
})
})
}

function handleRunUpdate () {
var selects = document.querySelectorAll('select[name=plan]');
selects.forEach(s => {
var priceDisplay = s.closest('form').querySelector('.price span');
s.addEventListener('change', e => {
var selected = e.target.options[e.target.selectedIndex];
var price = selected.dataset['price'];
priceDisplay.innerText = price;
})
});
}
})();
49 changes: 0 additions & 49 deletions www/js/site.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

170 changes: 86 additions & 84 deletions www/templates/account/signup/step-1.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,102 +1,104 @@
<div>
<div class="signup-hed">
<h1>Ready to go Pro?</h1>
<div>All the WebPageTest features you already love</div>
<div><strong>plus API Access &amp; unlimited 1-click experiments!</strong></div>
<div>Plans start at just <span class="signup-hed-price">$5/mo</span></div>
</div> <!-- ./signup-hed -->
<div class="signup-feature">
<div class="signup-hed-contain">
<div class="signup-hed">
<h1>Ready to go Sign Up?</h1>
<div>All the WebPageTest features you already love</div>
<div><strong>plus API Access!</strong></div>
<div>Plans start at just <span class="signup-hed-price">$5/mo</span></div>
</div><!-- ./signup-hed -->
</div><!-- ./signup-hed-contain -->
</div><!-- ./signup-feature -->

<div class="signup-step-1-content">
<div class="billing-frequency-selector">
<h3>Save 25% by paying annually!</h3>
<div class="radiobutton-group" id="pro-plan-selector">
<input type="radio" id="annual-plans" name="plans" value="annual" checked />
<label for="annual-plans">Annual</label>
<input type="radio" id="monthly-plans" name="plans" value="monthly" />
<label for="monthly-plans">Monthly</label>
<div class="signup-step-1-content">
<div class="billing-frequency-selector">
<h3>Save 25% by paying annually!</h3>
<div class="radiobutton-group" id="paid-plan-selector">
<input type="radio" id="annual-plans" name="plans" value="annual" checked />
<label for="annual-plans">Annual</label>
<input type="radio" id="monthly-plans" name="plans" value="monthly" />
<label for="monthly-plans">Monthly</label>
</div>
</div>
<div class="card-container">
<div class="card">
<form method="POST" action="/signup">
<fieldset>
<legend>Starter</legend>
<h3><strong>50 Runs</strong>/mo</h3>
<div class="price">Free</div>
<input type="hidden" name="plan" value="free" />
<input type="hidden" name="step" value="1" />
<input type="hidden" name="csrf_token" value="<?= $csrf_token ?>" />
<input type="hidden" name="auth_token" value="<?= $auth_token ?>" />
<button type="submit">Select Plan</button>
</fieldset>
</form>
<div class="benefits-list">
<ul>
<li>300 Free Manual Tests</li>
<li>All Browsers</li>
<li>All Connection Speeds</li>
<li>30 Locations</li>
<li>Real Mobile Devices</li>
<li>Custom Scripts</li>
</ul>
</div>
</div>
<div class="card-container">
<div class="card">

<div class="card">
<div class="annual selected">
<form method="POST" action="/signup">
<fieldset>
<legend>Starter</legend>
<h3><strong>50 Runs</strong>/mo</h3>
<div class="price">Free</div>
<input type="hidden" name="plan" value="free" />
<input type="hidden" name="step" value="1" />
<legend>Paid</legend>
<select name="plan">
<?php foreach($annual_plans as $plan): ?>
<option value="<?= $plan->getId() ?>" data-price="<?= $plan->getMonthlyPrice() ?>"><?= $plan->getRuns() ?>/mo</option>
<?php endforeach; ?>
</select>
<div class="price">$<span><?= $annual_plans[0]->getMonthlyPrice() ?></span>/mo</div>
<input type="hidden" name="csrf_token" value="<?= $csrf_token ?>" />
<input type="hidden" name="auth_token" value="<?= $auth_token ?>" />
<input type="hidden" name="step" value="1" />
<button type="submit">Select Plan</button>
</fieldset>
</form>
<div class="benefits-list">
<h5>Everything in Starter plus:</h5>
<ul>
<li>300 Free Manual Tests</li>
<li>All Browsers</li>
<li>All Connection Speeds</li>
<li>30 Locations</li>
<li>Real Mobile Devices</li>
<li>Custom Scripts</li>
<li>More Manual Tests</li>
<li>Premium Test Locations</li>
<li>WebPageTest API</li>
<li>Faster Test Results</li>
</ul>
</div>
</div>

<div class="card">
<div class="annual selected">
<form method="POST" action="/signup">
<fieldset>
<legend>Pro</legend>
<select name="plan">
<?php foreach($annual_plans as $plan): ?>
<option value="<?= $plan->getId() ?>" data-price="<?= $plan->getMonthlyPrice() ?>"><?= $plan->getRuns() ?>/mo</option>
<?php endforeach; ?>
</select>
<div class="price">$<span><?= $annual_plans[0]->getMonthlyPrice() ?></span>/mo</div>
<input type="hidden" name="csrf_token" value="<?= $csrf_token ?>" />
<input type="hidden" name="auth_token" value="<?= $auth_token ?>" />
<input type="hidden" name="step" value="1" />
<button type="submit">Select Plan</button>
</fieldset>
</form>
<div class="benefits-list">
<h5>Everything in Starter plus:</h5>
<ul>
<li>More Manual Tests</li>
<li>Premium Test Locations</li>
<li>WebPageTest API</li>
<li>Faster Test Results</li>
</ul>
</div>
</div>

<div class="monthly">
<form method="POST" action="/signup">
<fieldset>
<legend>Pro</legend>
<select name="plan">
<?php foreach($monthly_plans as $plan): ?>
<option value="<?= $plan->getId() ?>" data-price="<?= $plan->getMonthlyPrice() ?>"><?= $plan->getRuns() ?>/mo</option>
<?php endforeach; ?>
</select>
<div class="price">$<span><?= $monthly_plans[0]->getMonthlyPrice() ?></span>/mo</div>
<input type="hidden" name="csrf_token" value="<?= $csrf_token ?>" />
<input type="hidden" name="auth_token" value="<?= $auth_token ?>" />
<input type="hidden" name="step" value="1" />
<button type="submit">Select Plan</button>
</fieldset>
</form>
<div class="benefits-list">
<h5>Everything in Starter plus:</h5>
<ul>
<li>More Manual Tests</li>
<li>Premium Test Locations</li>
<li>WebPageTest API</li>
<li>Faster Test Results</li>
</ul>
</div>
<div class="monthly">
<form method="POST" action="/signup">
<fieldset>
<legend>Paid</legend>
<select name="plan">
<?php foreach($monthly_plans as $plan): ?>
<option value="<?= $plan->getId() ?>" data-price="<?= $plan->getMonthlyPrice() ?>"><?= $plan->getRuns() ?>/mo</option>
<?php endforeach; ?>
</select>
<div class="price">$<span><?= $monthly_plans[0]->getMonthlyPrice() ?></span>/mo</div>
<input type="hidden" name="csrf_token" value="<?= $csrf_token ?>" />
<input type="hidden" name="auth_token" value="<?= $auth_token ?>" />
<input type="hidden" name="step" value="1" />
<button type="submit">Select Plan</button>
</fieldset>
</form>
<div class="benefits-list">
<h5>Everything in Starter plus:</h5>
<ul>
<li>More Manual Tests</li>
<li>Premium Test Locations</li>
<li>WebPageTest API</li>
<li>Faster Test Results</li>
</ul>
</div>
</div>
</div><!-- /.card-container -->
</div><!-- /.signup-step-1-content -->
</div>
</div>
</div><!-- /.card-container -->
</div><!-- /.signup-step-1-content -->
6 changes: 3 additions & 3 deletions www/templates/layouts/signup-flow-step-1.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="signup-flow-step-1-layout">
<head>
<?php
require_once __DIR__ . '/../../common.inc';
Expand All @@ -20,9 +20,9 @@
</head>
<body>
<?php require_once __DIR__ . '/header.inc'; ?>
<div id="main">
<?php require_once __DIR__ . '/main_hed.inc'; ?>
<main>
<?php echo $template_output; ?>
</main>
<?php require_once __DIR__ . '/footer.inc'; ?>
</body>
</html>