38 lines
1.5 KiB
Plaintext
38 lines
1.5 KiB
Plaintext
|
<!DOCTYPE html>
|
||
|
|
<html lang/en>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Weekly listening report <%= Date.today.to_s %></title>
|
||
|
|
<style>
|
||
|
|
body { font-family: Arial, sans-serif; line-height: 1.5; margin: 0; padding: 0; }
|
||
|
|
.container { max-width: 600px; margin: auto; }
|
||
|
|
.header { background-color: #1DB954; color: #fff; padding: 20px; text-align: center; font-size: 24px; }
|
||
|
|
.content { padding: 20px; }
|
||
|
|
h1 { font-size: 32px; margin-top: 0; }
|
||
|
|
p { margin-bottom: 15px; }
|
||
|
|
.cta { background-color: #1DB954; border: none; border-radius: 5px; color: #fff; cursor: pointer; display: inline-block; font-size: 16px; padding: 10px 20px; text-decoration: none; }
|
||
|
|
.cta:hover { background-color: #1ED760; }
|
||
|
|
.footer { background-color: #f5f5f5; padding: 20px; text-align: center; font-size: 12px; color: #777; }
|
||
|
|
.footer a { color: #1DB954; text-decoration: none; }
|
||
|
|
.footer a:hover { text-decoration: underline; }
|
||
|
|
@media only screen and (max-width: 600px) {
|
||
|
|
.container { width: 100%; }
|
||
|
|
.header,.footer { text-align: left; }
|
||
|
|
h1 { font-size: 28px; }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<div class="header">Your listening report for <%= Date.today.to_s %></div>
|
||
|
|
<div class="content">
|
||
|
|
<h1>Heyo!</h1>
|
||
|
|
<p>Total plays <%= total_plays %></p>
|
||
|
|
<p><%= body %></p>
|
||
|
|
<a href="#" class="cta">Listen Now</a>
|
||
|
|
</div>
|
||
|
|
<div class="footer"><a href="#">Unsubscribe</a> | <a href="#">Privacy Policy</a></div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|