Skip to content

Commit

Permalink
email tables example page
Browse files Browse the repository at this point in the history
  • Loading branch information
@aorcsik
aorcsik committed Nov 19, 2024
1 parent c60ee54 commit 681d9f4
Showing 1 changed file with 320 additions and 0 deletions.
320 changes: 320 additions & 0 deletions dist/email-tables.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,320 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Tables</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Figtree:[email protected]&display=swap" rel="stylesheet">

<style>
body {
font-size: 16px;
font-family: Figtree, serif;
background: #f2f2f2;
line-height: 1.5em;
padding: 0;
margin: 0;
}

.settings {
background: #fff;
padding: .5rem;
position: fixed;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
top: 0;
width: 100%;
display: flex;
align-items: center;
gap: .5rem;
}

.email {
margin: 5rem auto;
width: 700px;
max-width: 100%;
background: #fff;
border: 1px solid #dedede;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
box-sizing: border-box;
}
.email-header {
background: #F6EAFF;
padding: 2rem;
}
.email-body {
padding: 2rem;
}

/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 2rem;
height: 1rem;
}

/* Hide default HTML checkbox */
#mobile {
opacity: 0;
width: 0;
height: 0;
position: absolute;
text-indent: -9999px;
}

/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
border-radius: 1rem;
}

.slider:before {
position: absolute;
content: "";
height: .8rem;
width: .8rem;
left: .1rem;
bottom: .1rem;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}

input#mobile:checked + .settings .switch .slider {
background-color: #6A3C98;
}

input#mobile:focus + .settings .switch .slider {
box-shadow: 0 0 1px #6A3C98;
}

input#mobile:checked + .settings .switch .slider:before {
-webkit-transform: translateX(1rem);
-ms-transform: translateX(1rem);
transform: translateX(1rem);
}

input#mobile:checked + .settings ~ .email {
width: 320px;
}

</style>

</head>
<body>

<input type="checkbox" id="mobile">
<div class="settings">
<label class="switch" for="mobile">
<span class="slider"></span>
</label>
Mobile
</div>

<div class="email">
<div class="email-header">
<strong>Segment: Legacy CC plans: Developer, Org Standard, Org Elite</strong><br>
Email 1
</div>
<div class="email-body">

<p>Hi XXX,</p>
<p>Thank you for being a valued member of the Bitrise community. We’re writing to share an update regarding some upcoming pricing changes that will take effect in 2025.</p>
<p>Over the past three years, we’ve rolled out a range of new features to deliver more value for you and your team. To keep pace with inflation and rising operating costs—and to ensure we can keep innovating and improving—we’ll be adjusting our prices accordingly.</p>
<h3>New Pricing Details:</h3>
<ul>
<li><strong>Effective January 1, 2025</strong>, the price of your plan will increase by <strong>approximately 7%.</strong></li>
<li>This will take effect on your next renewal (no action from you needed).</li>
</ul>

<table style="
border: 2px solid #6A3C98;
width: 80%;
min-width: 250px;
margin: 2rem auto 0;
border-spacing: 0;
border-radius: 1rem;
overflow: hidden;
line-height: 1.5em;
font-size: .9rem;
">
<thead>
<tr style="background: #DFB5FF;">
<th style="padding: .8rem 0; border-bottom: 2px solid #6A3C98; border-right: 1px solid #6A3C98; color: #6A3C98;">
<div style="font-size: 1.2em;">Plan</div>
</th>
<th style="padding: .8rem 0; border-bottom: 2px solid #6A3C98; border-right: 1px solid #6A3C98; color: #6A3C98;">
<div style="font-size: 1.2em;">2024</div>
<!-- <div style="font-size: .8em;">price per<br>concurrency</div> -->
<div style="font-weight: normal;">monthly<br>(annual)</div>
</th>
<th style="padding: .8rem 0; border-bottom: 2px solid #6A3C98; color: #6A3C98;">
<div style="font-size: 1.2em;">2025</div>
<!-- <div style="font-size: .8em;">price per<br>concurrency</div> -->
<div style="font-weight: normal;">monthly<br>(annual)</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<th style="padding: .8rem 0; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; background: #F6EAFF; color: #6A3C98;">Developer</th>
<td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; text-align: center;">$40.00<br>($432.00)</td>
<td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98; text-align: center;">$42.80<br>($462.24)</td>
</tr>
<tr>
<th style="padding: .8rem 0; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; background: #F6EAFF; color: #6A3C98;">Standard</th>
<td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; text-align: center;">$50.00<br>($540.00)</td>
<td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98; text-align: center;">$53.50<br>($577.80)</td>
</tr>
<tr>
<th style="padding: .8rem 0; border-right: 1px solid #6A3C98; background: #F6EAFF; color: #6A3C98;">Elite</th>
<td style="padding: .8rem .2rem; border-right: 1px solid #6A3C98; text-align: center;">$100.00<br>($1,080.00)</td>
<td style="padding: .8rem .2rem; text-align: center;">$107.00<br>($1,155.60)</td>
</tr>
</tbody>
</table>
<p style="font-size: .8em; color: #6A3C98; text-align: center; margin: .5rem 0 2rem;">price per concurrency</p>

<p>This will ensure we can continue to invest in delivering new functionality and improved performance to help you build and release mobile apps as efficiently as possible.</p>
<p>If you have any questions, feel free to contact our support team at <a href="mailto:[email protected]">[email protected]</a>.</p>
<p>Thank you,</p>
<p>The Bitrise team</p>

</div>
</div>


<div class="email">
<div class="email-header">
<strong>Segment: Teams V2 (Tier 1-6)- Current pricing</strong><br>
Email 1
</div>
<div class="email-body">

<p>Hi XXX, </p>
<p>Thank you for being a valued member of the Bitrise community. We’re writing to share an update regarding some upcoming pricing changes that will take effect in 2025.</p>
<p>Over the past three years, we’ve rolled out a range of new features to deliver the best possible platform for you and your team. To keep pace with inflation and rising operating costs—and to ensure we can keep innovating and improving—there will be a <strong>small price increase on our legacy plans in 2025.</strong></p>
<h3>New Pricing Details:</h3>
<ul>
<li>Your plan will <strong>increase by approximately 5% starting January 1, 2025.</strong></li>
<li>The new list price increase will take effect at your next renewal—<strong>no action is required from you.</strong></li>
</ul>

<table style="
border: 2px solid #6A3C98;
width: 80%;
min-width: 250px;
margin: 2rem auto;
border-spacing: 0;
border-radius: 1rem;
overflow: hidden;
line-height: 1.5em;
font-size: .9rem;
">
<thead>
<tr style="background: #DFB5FF;">
<th style="padding: .8rem 0; border-bottom: 2px solid #6A3C98; border-right: 1px solid #6A3C98; color: #6A3C98;">
<div style="font-size: 1.2em;">Teams plan<br>tiers</div>
</th>
<th style="padding: .8rem 0; border-bottom: 2px solid #6A3C98; border-right: 1px solid #6A3C98; color: #6A3C98;">
<div style="font-size: 1.2em;">2024</div>
<div style="font-weight: normal;">monthly<br>(annual)</div>
</th>
<th style="padding: .8rem 0; border-bottom: 2px solid #6A3C98; color: #6A3C98;">
<div style="font-size: 1.2em;">2025</div>
<div style="font-weight: normal;">monthly<br>(annual)</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<th style="padding: .8rem 0; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; background: #F6EAFF; color: #6A3C98;">
5769 credits
</th>
<td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; text-align: center;">
$225.00<br>($2,430.00)
</td>
<td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98; text-align: center;">
$236.00<br>($2,549.00)
</td>
</tr>
<tr>
<th style="padding: .8rem 0; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; background: #F6EAFF; color: #6A3C98;">
7051 credits
</th>
<td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; text-align: center;">
$275.00<br>($2,970.00)
</td>
<td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98; text-align: center;">
$289.00<br>($3,121.00)
</td>
</tr>
<tr>
<th style="padding: .8rem 0; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; background: #F6EAFF; color: #6A3C98;">
10,256 credits
</th>
<td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; text-align: center;">
$400.00<br>($4,320.00)
</td>
<td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98; text-align: center;">
$420.00<br>($4,536.00)
</td>
</tr>
<tr>
<th style="padding: .8rem 0; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; background: #F6EAFF; color: #6A3C98;">
12,821 credits
</th>
<td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; text-align: center;">
$500.00<br>($5,400.00)
</td>
<td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98; text-align: center;">
$525.00<br>($5,670.00)
</td>
</tr>
<tr>
<th style="padding: .8rem 0; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; background: #F6EAFF; color: #6A3C98;">
18,590 credits
</th>
<td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98; border-right: 1px solid #6A3C98; text-align: center;">
$725.00<br>($7,830.00)
</td>
<td style="padding: .8rem .2rem; border-bottom: 1px solid #6A3C98; text-align: center;">
$761.00<br>($8,219.00)
</td>
</tr>
<tr>
<th style="padding: .8rem 0; border-right: 1px solid #6A3C98; background: #F6EAFF; color: #6A3C98;">
23,718 credits
</th>
<td style="padding: .8rem .2rem; border-right: 1px solid #6A3C98; text-align: center;">
$925.00<br>($9,990.00)
</td>
<td style="padding: .8rem .2rem; text-align: center;">
$971.00<br>($10,487.00)
</td>
</tr>
</tbody>
</table>

<p>As a result of this change, we will continue to deliver innovative new features and the reliability you deserve to build and release mobile apps as efficiently as possible.</p>
<p>If you have any questions, please reach out to our support team at <a href="mailto:[email protected]">[email protected]</a>.</p>
<p>Thank you,</p>
<p>The Bitrise team</p>

</div>
</div>

</body>
</html>

0 comments on commit 681d9f4

Please sign in to comment.