76 lines
4 KiB
Text
76 lines
4 KiB
Text
|
<mjml>
|
||
|
|
<mj-head>
|
||
|
|
<mj-title>New Activity</mj-title>
|
||
|
|
<mj-style inline="inline">
|
||
|
|
.header { font-size: 24px; font-weight: bold; }
|
||
|
|
.subheader { font-size: 16px; color: #555; }
|
||
|
|
.event-item { margin-bottom: 20px; border-left: 3px solid #F45E43; padding-left: 10px; }
|
||
|
|
.event-meta { margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
|
||
|
|
.event-meta-left { display: flex; align-items: center; }
|
||
|
|
.event-author { font-weight: bold; margin-right: 4px; }
|
||
|
|
.event-content { white-space: pre-wrap; }
|
||
|
|
.event-timestamp { color: #777; font-size: 12px; }
|
||
|
|
.event-link { font-size: 12px; }
|
||
|
|
.section-header { font-size: 18px; font-weight: bold; margin-top: 15px; }
|
||
|
|
.profile-image { width: 20px; height: 20px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }
|
||
|
|
.event-stats { margin-top: 8px; color: #666; font-size: 14px; }
|
||
|
|
.stat-item { display: inline-flex; align-items: center; margin-right: 12px; }
|
||
|
|
.stat-icon { width: 16px; height: 16px; margin-right: 4px; vertical-align: middle; }
|
||
|
|
a { text-decoration: none; }
|
||
|
|
</mj-style>
|
||
|
|
</mj-head>
|
||
|
|
<mj-body>
|
||
|
|
<mj-section background-color="#f0f0f0" padding="20px">
|
||
|
|
<mj-column>
|
||
|
|
<mj-text css-class="header">Hello {{name}},</mj-text>
|
||
|
|
<mj-text css-class="subheader">
|
||
|
|
Below is a summary of activity over the last {{Duration}}.
|
||
|
|
We found {{Total}} new posts from {{TopProfiles}}.
|
||
|
|
</mj-text>
|
||
|
|
<mj-divider border-color="#cccccc" />
|
||
|
|
|
||
|
|
{{#HasPopular}}
|
||
|
|
<mj-text css-class="section-header">Most Popular</mj-text>
|
||
|
|
{{#Popular}}
|
||
|
|
<mj-text>
|
||
|
|
<div class="event-item">
|
||
|
|
<div class="event-meta">
|
||
|
|
<div class="event-meta-left">
|
||
|
|
{{#Icon}}<img src="{{Icon}}" class="profile-image" />{{/Icon}}
|
||
|
|
<span class="event-author">{{Name}}</span>
|
||
|
|
<span class="event-timestamp">at {{Timestamp}}</span>
|
||
|
|
</div>
|
||
|
|
<div class="event-link">
|
||
|
|
<a href="{{Link}}">View post</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="event-content">{{{Content}}}</div>
|
||
|
|
<div class="event-stats">
|
||
|
|
<span class="stat-item">
|
||
|
|
<img class="stat-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAASFBMVEUAAAAiIkQdJ04bJkwbKU0dJkscKEwbJ00cKEsdJkwcJ0wbKEscJkwcJ0scJ00bJ00dJk0bJ0wcJkwcKE0cJ0wcJ0wcJ0z///8ZxKH0AAAAF3RSTlMADxovOD1AQlJXW19ld4iWoKizwenq9eQPMKMAAAABYktHRBcL1piPAAAAOElEQVQY02NgoBZg40fls4qw4+WziAnxggA3I1xAmA8EBEU5YEaKsoFpZlEmNBEBHjRruTip4wsADUgCEGuuAxQAAAAASUVORK5CYII=" />
|
||
|
|
{{Replies}}
|
||
|
|
</span>
|
||
|
|
<span class="stat-item">
|
||
|
|
<img class="stat-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAn1BMVEUAAAAAAIAAAFUzMzMrK1UkJEkVK1UkJEkiIkQgIFAeLUscK0cbKFEbJEkaI08aK00ZKUocJUobKU0bKEwaKEsaJ04bJ0sbJ0sdJ0wcJ00cJk0cJkwcJk0bKEwbKEscKEwcJ00cJ0wcJ0wcJ0sbJk0bJ0wcJ0wcJ0sbJ0wdJ0wcJ00cKE0cJ0wbJ0wbJ0scJ0wcJ0wcJ0wcJ0wcJ0z///++FK4PAAAANHRSTlMAAgMFBgcMDg8QERITHB0eHzc4OTo7QVVhY2RleHl6h4iJiouMnq+wsbK+wcLD3+Dh4vHyB17REwAAAAFiS0dENKmx6f0AAACTSURBVBgZBcEJQoJAAADAIUhQkjxKJZdKyzPLXfj/35oBPDZNAYCXy5BSf14CHr7um5KyjfsMfP9MgPq2h9f7BKBOC1w2ALydKIaSLtAFqj43+0MIhID4bBYBIDWKoQJg3OecW9aH1eqwZnvEMtZG79drN1KnOexuNfD0+wGyXWwrxtv0mQEWpz6l/jgHQD6d5sA/VqYMPJkJl3UAAAAASUVORK5CYII=" />
|
||
|
|
{{Reactions}}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</mj-text>
|
||
|
|
{{/Popular}}
|
||
|
|
<mj-divider border-color="#cccccc" />
|
||
|
|
{{/HasPopular}}
|
||
|
|
|
||
|
|
<mj-text>
|
||
|
|
You're receiving this email because you subscribed to notifications.
|
||
|
|
We'll continue to send you updates based on your subscription preferences.
|
||
|
|
</mj-text>
|
||
|
|
|
||
|
|
<mj-button background-color="#F45E43" color="#ffffff" href="{{unsubscribeUrl}}">
|
||
|
|
Unsubscribe
|
||
|
|
</mj-button>
|
||
|
|
</mj-column>
|
||
|
|
</mj-section>
|
||
|
|
</mj-body>
|
||
|
|
</mjml>
|