app/views/user_email_mailer/response_invite.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;
text-align: center;
line-height: 0;
}
.board{
min-width:1080px;
}
.lnk-unsubscribe{
text-align: left;
}
.emotions-container {
text-align: center;
}
</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;">
<%= @view_complete_by %>
</td>
</tr>
</table>
</td>
</tr>
</table>
<![endif]-->
<!--[if !mso]><!-->
<div class="second-row">
<div class="calendar ml-55">
<div class="data"><%= @view_complete_by %></div>
</div>
</div>
<!--<![endif]-->
<div class="mx-auto my-0 invitation">Time for your latest check-in!</div>
<div class="mx-auto my-0 question">What word best describes how you feel about work?</div>
<div class="emotions-container">
<% (0..5).each do |row|%>
<div class="emotions d-flex">
<% (0..3).each do |col|%>
<% cell = @table[(row*4 + col)] %>
<div class="<%= "btn-emotion #{cell.category}" %>"
style="min-width: <%= btn_special(cell.word, :width)%>px; margin: 5px <%= btn_special(cell.word, :margin)%>px; padding: 5px 0; line-height:1;">
<% @link_for_emotion[:emotion_id] = cell.id %>
<%= link_to cell.word, @link_for_emotion , class: "#{cell.category}-a" %>
</div>
<% end %>
</div>
<% end %>
</div>
<div class="underline_list"></div>
<div class='neutral-area' style="padding: 10px 0;">
<div style="display: flex">
<div class="<%= "btn-emotion neutral" %>" style="width: 260px; margin:0 auto; padding: 5px 0; line-height:1;">
<%= link_to "Show me different words",{ controller: 'api/v1/responses',
action: 'sign_in_from_email',
user_id: @user.id }, class: "neutral-a" %>
</div>
<div class="<%= "btn-emotion neutral" %>" style="width: 260px; margin:0 auto; padding: 5px 0; line-height:1;">
<%= link_to "I'd rather not say...", @link_for_not_say , class: "neutral-a" %>
</div>
</div>
</div>
<div class="big-btn-tooltip mx-auto">Share it in your own words!</div>
<div class="big-btn mx-auto">
<div class="big-btn-text">
<%= link_to "Add your own word", @link_for_own_word, class: "link-text" %>
</div>
</div>
<div class="row-over-links">
<div class="lint-to-right">
<div class="lnk-was-not" style="width: max-content">
<%= link_to "I was not working recently", @link_for_was_not %>
</div>
</div>
</div>
<div class="lnk-unsubscribe" style="text-align: left">
<%= link_to "Unsubscribe from future check-ins", { controller: "api/v1/users",
action: "unsubscribe",
user_id: @user.id } %>
</div>
</div>
</body>
</html>