new email template chages

this email template is used for the emails with the new design
which is used in the beta site.
This commit is contained in:
Nuwan 2024-11-01 20:18:05 +05:30
parent d4b412e223
commit 996fbe51d0
10 changed files with 220 additions and 140 deletions

View File

@ -1,24 +1,75 @@
<style>
.container{
width: 65%;
margin: 0 auto;
padding: 2em;
background-color: #fff;
font-size: 1.2rem;
}
.logo{
display: flex;
justify-content: center;
margin-bottom: 1em;
}
.search-btn{
display: flex;
justify-content: center;
}
.search-btn a{
<p>Hi <%= @user.first_name -%>,</p>
<p>
The following musicians have joined JamKazam within the last week and
have low internet latency to you that will support enjoyable sessions.
If you'd like to make more musical connections, we encourage you to use
the links below to send these new users a welcome message and perhaps
arrange a session to play together.
</p>
<table width="100%">
<tbody>
<%
@musicians_data.each do | data | -%>
<%
musicians = data[:musicians]
latencies = data[:latencies]
musicians.each do |musician|
latency = latencies.find{|l| l[:user_id] == musician.id }
-%>
<tr>
<td>
<%= image_tag musician.photo_url.blank?? "avatar.png" : musician.photo_url, height: '32', width: '32', host: APP_CONFIG.action_mailer.assets_host, alt="Photo" -%>
</td>
<td>
<p>
<strong><%= musician.first_name %> <%= musician.last_name %></strong>
<br />
<span>Latency To You: <%= latency_info(latency) %></span>
<% if musician.last_active_timestamp -%>
<br />
<span>Last Active: <%= time_ago_in_words(Time.at(musician.last_active_timestamp)) %> ago</span>
<% end %>
</p>
</td>
<td>
<table>
<% musician.musician_instruments.each do |mi| -%>
<tr>
<td><%= mi.description %>:&nbsp;<%= @instrument_proficiencies[mi.proficiency_level.to_s.to_sym] %></td>
</tr>
<% end -%>
</table>
</td>
<td>
<table>
<tr>
<td><a href="<%= APP_CONFIG.spa_origin -%>/friends?id=<%= musician.id %>&open=details" style="color: #407dde;">View Profile</a></td>
</tr>
<tr>
<td><a href="<%= APP_CONFIG.spa_origin -%>/friends?id=<%= musician.id %>&open=message" style="color: #407dde;">Send Message</a></td>
</tr>
<tr>
<td><a href="<%= APP_CONFIG.spa_origin -%>/friends?id=<%= musician.id %>&open=connect" style="color: #407dde;">Send Friend Request</a></td>
</tr>
</table>
</td>
</tr>
<% end -%>
<% end -%>
</tbody>
</table>
<p>
To find great musical matches across the entire JamKazam commiunity and
make new connections, use the button below to access our musician search
feature. This let you filter JamKazammers by latency, instruments, skill
level, genre interests, last active day and more.
</p>
<div style="text-align: center">
<a
href="<%= APP_CONFIG.spa_origin -%>/friends"
style="
color: #fff;
text-decoration: none;
background-color: #2c7be5;
border-color: #2c7be5;
border: 1px solid transparent;
@ -26,88 +77,10 @@
line-height: 2.5;
font-size: 1em;
border-radius: 0.25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.row {
display: flex;
align-items: stretch;
justify-content: flex-start;
row-gap: 1em;
column-gap: 1em;
margin-top: 2em;
}
.row > div{
flex-grow: 1;
}
.row .photo{
flex-grow: 1;
}
.row .details{
flex-grow: 2;
}
.row .instruments{
flex-grow: 2;
}
.row .links{
flex-grow: 1;
}
</style>
<section class="container">
<div class="logo">
<img src="<%= image_url("JK_Logo_blue-2021.png", host: APP_CONFIG.action_mailer.assets_host ) -%>" alt="JamKazam Logo" />
</div>
<p>
Hi <%= @user.first_name -%>,
</p>
<p>
The following musicians have joined JamKazam within the last week and have low internet
latency to you that will support enjoyable sessions. If you'd like to make more musical connections,
we encourage you to use the links below to send these new users a welcome message and
perhaps arrange a session to play together.
</p>
<%
@musicians_data.each do | data | -%>
<%
musicians = data[:musicians]
latencies = data[:latencies]
musicians.each do |musician|
latency = latencies.find{|l| l[:user_id] == musician.id }
-%>
<div class="row">
<div class="photo">
<%= image_tag musician.photo_url.blank?? "avatar.png" : musician.photo_url, height: '32', width: '32', host: APP_CONFIG.action_mailer.assets_host -%>
</div>
<div class="details">
<div><strong><%= musician.first_name %> <%= musician.last_name %></strong></div>
<div>Latency To You: <%= latency_info(latency) %></div>
<% if musician.last_active_timestamp -%>
<div>Last Active On: <%= time_ago_in_words(Time.at(musician.last_active_timestamp)) %> ago</div>
<% end -%>
</div>
<div class="instruments">
<% musician.musician_instruments.each do |mi| -%>
<div>
<%= mi.description %>:&nbsp;<%= @instrument_proficiencies[mi.proficiency_level.to_s.to_sym] %>
</div>
<% end -%>
</div>
<div class="links">
<div><a href="<%= APP_CONFIG.spa_origin -%>/friends?id=<%= musician.id %>&open=details" target="_blank">View Profile</a></div>
<div><a href="<%= APP_CONFIG.spa_origin -%>/friends?id=<%= musician.id %>&open=message" target="_blank">Send Message</a></div>
<div><a href="<%= APP_CONFIG.spa_origin -%>/friends?id=<%= musician.id %>&open=connect" target="_blank">Send Friend Request</a></div>
</div>
</div>
<% end -%>
<% end -%>
<br />
<p>
To find great musical matches across the entire JamKazam commiunity and make new connections, use the button below to access our musician search feature.
This let you filter JamKazammers by latency, instruments, skill level, genre interests, last active day and more.
</p>
<br />
<div class="search-btn">
<a class="button" href="<%= APP_CONFIG.spa_origin -%>/friends" target="_blank">Search JamKazam Musicians</a>
</div>
</section>
transition: color 0.15s ease-in-out,
background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
"
>Search JamKazam Musicians</a
>
</div>

View File

@ -1,38 +1,64 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JamKazam</title>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JamKazam</title>
</head>
<body
style="font-family: Arial, Helvetica, sans-serif; background-color: #f0f0f0"
>
<div style="padding: 2em; margin-top: 2em; background-color: #f0f0f0;">
<div
style="
margin: 3em auto 3em auto;
padding: 2em;
background-color: #ffffff;
max-width: 700px;
"
>
<div style="text-align: center">
<img src="<%= image_url("JK_Logo_blue-2021.png", host: APP_CONFIG.action_mailer.assets_host ) -%>" alt="JamKazam" />
</div>
<style>
body{
margin-top:10px;
font-family:Arial, Helvetica, sans-serif;
}
p {
margin-bottom:0px;
line-height:140%;
}
<%= yield %>
footer{
text-align: center;
padding-top: 1em;
color: #5e6e82;
}
</style>
</head>
<body bgcolor="#eee" >
<%= yield -%>
<body>
<footer>
<p>
Copyright &copy; <%= Time.now.year %> JamKazam, Inc. All rights reserved.
</p>
<p style="text-decoration:none;">
You are receiving this email because you created a JamKazam account with the email address <%= @user.email -%>
</p>
<p><a href="<%= APP_CONFIG.spa_origin -%>/unsubscribe?tok=<%= @user.unsubscribe_token %>">Unsubscribe from this weekly new musician notification</a></p>
</footer>
</div>
<footer style="text-align: center; margin: 0px auto; padding: 0px auto;">
<p>
This email was sent to you because you have an account at JamKazam. <a
href=""
style="
color: #2c7be5;
text-decoration: none;
border-bottom: 1px solid #2c7be5;
"
>Unsubscribe</a>
</p>
<div style="text-align: center; margin: 1em 0;">
<a href="https://www.facebook.com" target="_blank">
<img src="<%= image_url("/email/fb-icon.svg", host: APP_CONFIG.action_mailer.assets_host ) -%>" alt="Facebook" style="width: 24px; height: 24px; margin: 0 5px;">
</a>
<a href="https://www.instagram.com" target="_blank">
<img src="<%= image_url("/email/instagram-icon.svg", host: APP_CONFIG.action_mailer.assets_host ) -%>" alt="Instagram" style="width: 24px; height: 24px; margin: 0 5px;">
</a>
<a href="https://www.tiktok.com" target="_blank">
<img src="<%= image_url("/email/tiktok-icon.svg", host: APP_CONFIG.action_mailer.assets_host ) -%>" alt="TikTok" style="width: 24px; height: 24px; margin: 0 5px;">
</a>
<a href="https://www.youtube.com" target="_blank">
<img src="<%= image_url("/email/youtube-icon.svg", host: APP_CONFIG.action_mailer.assets_host ) -%>" alt="YouTube" style="width: 24px; height: 24px; margin: 0 5px;">
</a>
<a href="https://www.x.com" target="_blank">
<img src=<%= image_url("/email/twitter-x-icon.svg", host: APP_CONFIG.action_mailer.assets_host ) -%>" alt="X.com" style="width: 24px; height: 24px; margin: 0 5px;">
</a>
</div>
<p>
Copyright © 2024 JamKazam, Inc. All rights reserved.
</p>
</footer>
</div>
</body>
</html>

View File

@ -159,6 +159,8 @@ gem 'logging', '1.7.2'
gem 'rack-cors', '~> 1.0', '>= 1.0.6'
gem 'mailcatcher'
if ENV['FASTER_PATH'] == '1'
# https://github.com/danielpclark/faster_path

View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<circle cx="15" cy="15" r="15"/>
<path id="f" fill="#FFFFFF" d="M16.4,23.9v-8.1h2.7l0.4-3.2h-3.1v-2c0-0.9,0.3-1.5,1.6-1.5l1.7,0V6.2c-0.3,0-1.3-0.1-2.4-0.1
c-2.4,0-4.1,1.5-4.1,4.2v2.3h-2.7v3.2h2.7v8.1H16.4z"/>
</svg>

After

Width:  |  Height:  |  Size: 663 B

View File

@ -0,0 +1,28 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 600 600" style="enable-background:new 0 0 600 600;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g>
<circle cx="300" cy="300" r="297.5"/>
<path class="st0" d="M300,123.5c-47.9,0-54,0.2-72.8,1.1c-18.8,0.9-31.6,3.8-42.8,8.2c-11.6,4.5-21.5,10.5-31.3,20.4
c-9.8,9.8-15.8,19.7-20.4,31.3c-4.4,11.2-7.4,24.1-8.2,42.8c-0.8,18.8-1.1,24.8-1.1,72.8c0,47.9,0.2,53.9,1.1,72.8
c0.9,18.8,3.8,31.6,8.2,42.8c4.5,11.6,10.5,21.5,20.4,31.3c9.8,9.8,19.7,15.9,31.3,20.4c11.2,4.4,24.1,7.3,42.8,8.2
c18.8,0.9,24.8,1.1,72.8,1.1c47.9,0,53.9-0.2,72.8-1.1c18.8-0.9,31.6-3.8,42.9-8.2c11.6-4.5,21.4-10.6,31.2-20.4
c9.8-9.8,15.8-19.7,20.4-31.3c4.3-11.2,7.3-24,8.2-42.8c0.8-18.8,1.1-24.8,1.1-72.8c0-47.9-0.2-53.9-1.1-72.8
c-0.9-18.8-3.9-31.6-8.2-42.8c-4.5-11.6-10.6-21.5-20.4-31.3c-9.8-9.8-19.6-15.8-31.3-20.4c-11.3-4.4-24.1-7.3-42.9-8.2
C353.9,123.7,347.9,123.5,300,123.5L300,123.5z M284.2,155.3c4.7,0,9.9,0,15.8,0c47.1,0,52.7,0.2,71.3,1
c17.2,0.8,26.5,3.7,32.8,6.1c8.2,3.2,14.1,7,20.3,13.2c6.2,6.2,10,12.1,13.2,20.3c2.4,6.2,5.3,15.6,6.1,32.8
c0.8,18.6,1,24.2,1,71.3c0,47.1-0.2,52.7-1,71.3c-0.8,17.2-3.7,26.5-6.1,32.8c-3.2,8.2-7,14.1-13.2,20.3c-6.2,6.2-12,10-20.3,13.2
c-6.2,2.4-15.6,5.3-32.8,6.1c-18.6,0.8-24.2,1-71.3,1c-47.1,0-52.7-0.2-71.3-1c-17.2-0.8-26.5-3.7-32.8-6.1
c-8.2-3.2-14.1-7-20.3-13.2c-6.2-6.2-10-12.1-13.2-20.3c-2.4-6.2-5.3-15.6-6.1-32.8c-0.8-18.6-1-24.2-1-71.3
c0-47.1,0.2-52.7,1-71.3c0.8-17.2,3.7-26.5,6.1-32.8c3.2-8.2,7-14.1,13.2-20.3c6.2-6.2,12.1-10,20.3-13.2
c6.2-2.4,15.6-5.3,32.8-6.1C245,155.5,251.3,155.3,284.2,155.3L284.2,155.3z M394.2,184.6c-11.7,0-21.2,9.5-21.2,21.2
c0,11.7,9.5,21.2,21.2,21.2c11.7,0,21.2-9.5,21.2-21.2C415.4,194.1,405.9,184.6,394.2,184.6L394.2,184.6z M300,209.4
c-50.1,0-90.6,40.6-90.6,90.6c0,50.1,40.6,90.6,90.6,90.6c50.1,0,90.6-40.6,90.6-90.6C390.6,249.9,350.1,209.4,300,209.4L300,209.4
z M300,241.2c32.5,0,58.8,26.3,58.8,58.8c0,32.5-26.3,58.8-58.8,58.8c-32.5,0-58.8-26.3-58.8-58.8
C241.2,267.5,267.5,241.2,300,241.2z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g>
<g transform="matrix(1,0,0,1,-5.85432,-3.72109)">
<circle cx="29.794" cy="28.046" r="21.005" style="fill:rgb(235,235,235);"/>
</g>
<path d="M0,24C0,10.745 10.745,0 24,0C37.255,0 48,10.745 48,24C48,37.255 37.255,48 24,48C10.745,48 0,37.255 0,24ZM16.961,19.878L11.522,19.878L11.522,36.22L16.961,36.22L16.961,19.878ZM17.319,14.823C17.284,13.22 16.138,12 14.277,12C12.416,12 11.2,13.22 11.2,14.823C11.2,16.392 12.381,17.647 14.206,17.647L14.241,17.647C16.138,17.647 17.319,16.392 17.319,14.823ZM36.575,26.85C36.575,21.83 33.892,19.494 30.313,19.494C27.425,19.494 26.133,21.08 25.411,22.193L25.411,19.878L19.971,19.878C20.043,21.412 19.971,36.22 19.971,36.22L25.411,36.22L25.411,27.093C25.411,26.605 25.446,26.118 25.59,25.768C25.983,24.792 26.878,23.782 28.381,23.782C30.349,23.782 31.137,25.281 31.137,27.477L31.137,36.22L36.575,36.22L36.575,26.85Z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-78.8794,-45.5651)">
<ellipse cx="578.704" cy="546.404" rx="355.972" ry="355.378" style="fill:rgb(235,235,235);"/>
</g>
<g>
<path d="M500,70C262.5,70 70,262.5 70,500C70,737.5 262.5,930 500,930C737.5,930 930,737.5 930,500C930,262.5 737.5,70 500,70ZM726.7,441C682.5,443 643.4,428.4 605.1,403.9C604.5,410 603.8,414.5 603.8,419C603.7,473.5 604,527.9 603.7,582.4C603.2,674.3 537.4,741.4 442,747.6C365.7,752.6 289.3,686.2 277.3,604.5C263,506.9 345.4,415.7 443.8,420.5C449.1,420.8 454.4,421.8 460.6,422.6L460.6,509.4C455.9,509.4 451.3,509.6 446.7,509.4C402.2,507 366.7,537.8 365.1,580.3C363.6,620.8 395.4,655.8 435.1,657.3C480,659 514.6,627.5 514.8,582.7C515.4,473.8 515,364.9 515,255.9L515,231.5L602.2,231.5C610.7,306 653.7,345.3 726.5,355.5C726.7,383.6 726.7,411.3 726.7,441Z" style="fill-rule:nonzero;"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(2.81,0,0,2.81,1.40659,1.40659)">
<g>
<path d="M24.89,23.01L57.79,66.99L65.24,66.99L32.34,23.01L24.89,23.01Z" style="fill-rule:nonzero;"/>
<g transform="matrix(0.355872,0,0,0.355872,-8.85184,-6.66653)">
<circle cx="150.201" cy="144.87" r="111.636" style="fill:rgb(235,235,235);"/>
</g>
<path d="M45,0C20.147,0 0,20.147 0,45C0,69.853 20.147,90 45,90C69.853,90 90,69.853 90,45C90,20.147 69.853,0 45,0ZM56.032,70.504L41.054,50.477L22.516,70.504L17.751,70.504L38.925,47.63L17.884,19.496L34.101,19.496L47.895,37.94L64.967,19.496L69.732,19.496L50.024,40.788L72.249,70.504L56.032,70.504Z" style="fill-rule:nonzero;"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="300" height="300">
<g transform="scale(.75)">
<rect width="400" height="400" fill="#282828" ry="200"/>
<path fill="#fff" d="M199.91667116 105.6302382s-84.29180001.00007866-105.44791902 5.49739608c-11.32771618 3.16506938-20.655211 12.49266687-23.82031238 23.98698305-5.49727075 21.15613367-5.49739608 64.9687477-5.49739608 64.9687477s.00012533 43.97893404 5.49739608 64.80208104c3.16510139 11.49416018 12.3260082 20.65517366 23.82031238 23.82032038 21.32270701 5.6638401 105.44791902 5.66405342 105.44791902 5.66405342s84.45890802-.00006666 105.61458836-5.49738675c11.49438685-3.16508005 20.655107-12.15954686 23.65364037-23.82032038 5.66390676-20.98976034 5.66406676-64.80208104 5.66406676-64.80208104s.16645334-43.9792807-5.66406676-65.13541437c-2.99853338-11.49431618-12.15925352-20.65511233-23.65364037-23.65364971-21.15568034-5.83046276-105.61458836-5.83072943-105.61458836-5.83072943zm-26.8203071 53.97395285 70.13281446 40.47917398-70.13281445 40.31250732v-80.7916813z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -26,6 +26,8 @@ SampleApp::Application.configure do
# Don't care if the mailer can't send
config.action_mailer.raise_delivery_errors = false
config.action_mailer.delivery_method = :smtp
config.action_mailer.smtp_settings = { address: '127.0.0.1', port: 1025, domain: '127.0.0.1' }
# Print deprecation notices to the Rails logger
config.active_support.deprecation = :log