app/views/user_email_mailer/auto_remind_checkin.html.erb
<!DOCTYPE html>
<html lang="en">
<head>
<title>Email letter</title>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Josefin Sans', 'Arial', 'Ubuntu', sans-serif;
font-style: normal;
font-weight:700;
}
.board {
min-width:1080px;
}
.center {
text-align: center;
}
ul {
margin-bottom: 10px;
margin-top: 10px;
list-style-type: disc;
padding-left: 20px;
padding-right: 20px;
font-size: 24px;
line-height: 24px;
}
li {
font-size: 24px;
text-align: left;
margin-bottom: 10px;
margin-left: 20px;
color: rgba(0, 0, 0, 0.7);
}
</style>
<%= stylesheet_link_tag 'email_page' , media: 'all' %>
</head>
<body>
<div class="board mx-auto">
<div class="first-row">
<div class="mx-auto my-0">
<%= render 'layouts/logo', height: 61 %>
</div>
</div>
<!--[if mso]>
<table role="presentation" width="100%">
<tr>
<td class="second-row" style="height: 50px; text-align: left;">
<table class="calendar" role="presentation" cellspacing="0" cellpadding="0" border="0" style="width: 102px; height: 115px; background-image: url('complete-by.png'); background-repeat: no-repeat; background-size: contain;">
<tr>
<td class="data" style="padding-top: 55px; width: 102px; height: 14px; font-size: 16px; line-height: 17px; color: rgba(0, 0, 0, 0.7); white-space: nowrap; text-transform: capitalize;">
TODAY
</td>
</tr>
</table>
</td>
</tr>
</table>
<![endif]-->
<!--[if !mso]><!-->
<div class="second-row">
<div class="calendar ml-55">
<div class="data">TODAY</div>
</div>
</div>
<!--<![endif]-->
<div class="mx-auto my-0 title"><%= "Dear #{@user.first_name}," %></div>
<div class="mx-auto my-0 text-check"><%= "#{@who_is_waiting}" %></div>
<div class="fourth-row-magic">
<div class="mt-37 btn-remind center">
<div class="btn-text-remind">
<%= link_to "Check in now", { controller: 'api/v1/responses',
action: 'sign_in_from_email',
id: @time_period.id,
user_id: @user.id }%>
</div>
</div>
</div>
<% if @shout_outs.any? %>
<div class="ml-200">
<div class="text-shoutout mt-37">Also, did you know that you received some shoutouts?</div>
<ul>
<% @shout_outs.sample(3).each do |shout_out| %>
<li><%= shout_out.rich_text.html_safe %></li>
<% end %>
</ul>
</div>
<div class="text-check center"><%= "After you check in you'll be able to see who posted these." %></div>
<% end %>
<div class="text-shoutout mt-37 ml-200 italic"><%= "\"#{@fun_question.question_body}\"" %></div>
<% if @fun_question_responses.any? %>
<div class="ml-200">
<div class="text-shoutout">Your team members responded:</div>
<% @fun_question_responses.sample(3).each do |response| %>
<ul>
<li><%= response.answer_body %></li>
</ul>
<% end %>
</div>
<div class="text-check center my-0"><%= "After you check in you'll be able to see who posted these." %></div>
<% end %>
</div>
</body>
</html>