mirror of
https://github.com/Poniverse/Pony.fm.git
synced 2024-11-25 06:27:59 +01:00
#25: Upgraded email templates to use Foundation for Emails.
They're now 200% prettier. <3
This commit is contained in:
parent
f50be9de6f
commit
2dedaf6638
46 changed files with 331 additions and 891 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -8,4 +8,4 @@ Homestead.yaml
|
|||
.vagrant
|
||||
_ide_helper.php
|
||||
.idea
|
||||
resources/views/emails/build
|
||||
resources/views/emails/html
|
||||
|
|
23
README.md
23
README.md
|
@ -70,18 +70,29 @@ Finally, to compile and serve the assets in real time, run the following (and le
|
|||
gulp watch
|
||||
|
||||
|
||||
### Email templates
|
||||
### Developing email templates
|
||||
|
||||
Pony.fm's email templates are based on the Sass version of
|
||||
[ZURB's Foundation for Emails](http://foundation.zurb.com/emails/docs/index.html).
|
||||
framework. This framework takes most of the pain out of HTML email markup - see
|
||||
their site for the full documentation.
|
||||
[ZURB's Foundation for Emails](http://foundation.zurb.com/emails/docs/index.html)
|
||||
framework, including their "Inky" markup language. This tooling takes the pain
|
||||
out of HTML email markup - see their site for the full documentation.
|
||||
|
||||
Email templates live in [the `resources/emails/src` directory](resources/emails/src).
|
||||
Note that they are Handlebars templates which compile into Blade templates -
|
||||
Email templates live in two directories:
|
||||
|
||||
- [`resources/emails/src`](resources/emails/src), for HTML emails
|
||||
- [`resources/views/emails/plaintext`](resources/views/emails/plaintext), for plaintext emails
|
||||
|
||||
**Be aware that plaintext emails are vanilla Blade templates!** Foundation is only used for HTML emails.
|
||||
|
||||
HTML emails are marked up as Handlebars templates which compile into Blade templates -
|
||||
Pony.fm's asset pipeline automatically does this for you. Variables meant for
|
||||
Blade need to be escaped with a backslash in the `.hbs` files (like so: `\{{ $myVariableName }}`).
|
||||
|
||||
During development, email templates will also be written to `public/build/emails`
|
||||
to save you from resending emails to see how they look. For example, if you're
|
||||
working on the "new track notification" template, you'll be able to view it in your browser at
|
||||
[http://ponyfm-dev.poni/build/emails/notifications/new-track.blade.php.html](http://ponyfm-dev.poni/build/emails/notifications/new-track.blade.php.html).
|
||||
|
||||
|
||||
Configuring the servers
|
||||
-----------------------
|
||||
|
|
|
@ -195,7 +195,6 @@ class EditTrackCommand extends CommandBase
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
return CommandResponse::succeed(['real_cover_url' => $track->getCoverUrl(Image::NORMAL)]);
|
||||
}
|
||||
|
||||
|
|
|
@ -76,6 +76,11 @@ class PonyfmDriver extends AbstractDriver
|
|||
*/
|
||||
public function publishedNewTrack(Track $track)
|
||||
{
|
||||
// Grabbing a fresh copy of the track here ensures that, if cover art
|
||||
// was changed from the default, that the updated cover art is used
|
||||
// in notification emails.
|
||||
$track = $track->fresh();
|
||||
|
||||
$activity = Activity::create([
|
||||
'created_at' => Carbon::now(),
|
||||
'user_id' => $track->user_id,
|
||||
|
|
|
@ -123,11 +123,12 @@ abstract class BaseNotification extends Mailable {
|
|||
protected function renderEmail(string $templateName, string $subject, array $extraVariables) {
|
||||
return $this
|
||||
->subject($subject)
|
||||
->view("emails.notifications.{$templateName}")
|
||||
->text("emails.notifications.{$templateName}_plaintext")
|
||||
->view("emails.html.notifications.{$templateName}")
|
||||
->text("emails.plaintext.notifications.{$templateName}")
|
||||
->with(array_merge($extraVariables, [
|
||||
'notificationUrl' => $this->generateNotificationUrl(),
|
||||
'unsubscribeUrl' => $this->generateUnsubscribeUrl()
|
||||
'unsubscribeUrl' => $this->generateUnsubscribeUrl(),
|
||||
'thumbnailUrl' => $this->activityRecord->thumbnail_url
|
||||
]));
|
||||
}
|
||||
}
|
||||
|
|
|
@ -33,6 +33,8 @@ class ContentFavourited extends BaseNotification
|
|||
'content-favourited',
|
||||
$this->activityRecord->text, [
|
||||
'creatorName' => $creatorName,
|
||||
'creatorBio' => $this->initiatingUser->bio,
|
||||
'creatorUrl' => $this->initiatingUser->url,
|
||||
'resourceType' => $this->activityRecord->getResourceTypeString(),
|
||||
'resourceTitle' => $this->activityRecord->resource->title,
|
||||
]);
|
||||
|
|
|
@ -37,6 +37,7 @@ class NewComment extends BaseNotification
|
|||
'new-comment-profile',
|
||||
$this->activityRecord->text, [
|
||||
'creatorName' => $creatorName,
|
||||
'comment' => $this->activityRecord->resource->content,
|
||||
]);
|
||||
} else {
|
||||
return $this->renderEmail(
|
||||
|
@ -45,6 +46,7 @@ class NewComment extends BaseNotification
|
|||
'creatorName' => $creatorName,
|
||||
'resourceType' => $this->activityRecord->getResourceTypeString(),
|
||||
'resourceTitle' => $this->activityRecord->resource->resource->title,
|
||||
'comment' => $this->activityRecord->resource->content,
|
||||
]);
|
||||
}
|
||||
|
||||
|
|
|
@ -34,6 +34,7 @@ class NewFollower extends BaseNotification
|
|||
"{$creatorName} is now following you on Pony.fm!",
|
||||
[
|
||||
'creatorName' => $creatorName,
|
||||
'creatorBio' => $this->initiatingUser->bio,
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -36,6 +36,7 @@ class NewTrack extends BaseNotification
|
|||
[
|
||||
'creatorName' => $creatorName,
|
||||
'trackTitle' => $trackTitle,
|
||||
'genreTitle' => $this->activityRecord->resource->genre->name
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -173,22 +173,26 @@ class Activity extends Model
|
|||
|
||||
public function getThumbnailUrlAttribute()
|
||||
{
|
||||
if (static::TYPE_CONTENT_FAVOURITED === $this->activity_type) {
|
||||
return $this->initiatingUser->getAvatarUrl(Image::SMALL);
|
||||
} else {
|
||||
switch ($this->resource_type) {
|
||||
case User::class:
|
||||
return $this->resource->getAvatarUrl(Image::THUMBNAIL);
|
||||
return $this->resource->getAvatarUrl(Image::SMALL);
|
||||
|
||||
case Track::class:
|
||||
case Album::class:
|
||||
case Playlist::class:
|
||||
return $this->resource->getCoverUrl(Image::THUMBNAIL);
|
||||
return $this->resource->getCoverUrl(Image::SMALL);
|
||||
|
||||
case Comment::class:
|
||||
return $this->resource->user->getAvatarUrl(Image::THUMBNAIL);
|
||||
return $this->resource->user->getAvatarUrl(Image::SMALL);
|
||||
|
||||
default:
|
||||
throw new \Exception('This activity\'s resource is of an unknown type!');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public function getTitleFromActivityType()
|
||||
{
|
||||
|
|
88
gulpfile.js
88
gulpfile.js
|
@ -28,13 +28,13 @@ var gulp = require("gulp"),
|
|||
webpackStream = require('webpack-stream'),
|
||||
_ = require("underscore"),
|
||||
runSequence = require("run-sequence"),
|
||||
rimraf = require("rimraf"),
|
||||
panini = require("panini"),
|
||||
inky = require("inky"),
|
||||
fs = require("fs"),
|
||||
siphon = require('siphon-media-query'),
|
||||
lazypipe = require('lazypipe'),
|
||||
ext_replace = require('gulp-ext-replace');
|
||||
ext_replace = require('gulp-ext-replace'),
|
||||
del = require('del');
|
||||
|
||||
var plumberOptions = {
|
||||
errorHandler: plug.notify.onError("Error: <%= error.message %>")
|
||||
|
@ -185,10 +185,13 @@ gulp.task('copy:templates', function () {
|
|||
// They have been modified for ES5, Gulp 3 compatibility, and namespaced with "email-"
|
||||
// to avoid collisions with Pony.fm's other Gulp tasks.
|
||||
|
||||
// Delete the "resources/views/emails/build" folder
|
||||
// Delete the "resources/views/emails/html" folder
|
||||
// This happens every time a build starts
|
||||
gulp.task("email-clean", function emailClean(done) {
|
||||
rimraf('resources/views/emails/build', done);
|
||||
gulp.task("email-clean", function emailClean() {
|
||||
return del([
|
||||
'resources/views/emails/html',
|
||||
'public/build/emails'
|
||||
]);
|
||||
});
|
||||
|
||||
// Compile layouts, pages, and partials into flat HTML files
|
||||
|
@ -203,7 +206,11 @@ gulp.task("email-pages", function emailPages() {
|
|||
}))
|
||||
.pipe(inky())
|
||||
.pipe(ext_replace('.blade.php', '.blade.php.hbs'))
|
||||
.pipe(gulp.dest('resources/views/emails/build'));
|
||||
.pipe(gulp.dest('resources/views/emails/html'))
|
||||
// If this is the dev environment, write the templates to the "public"
|
||||
// directory as well.
|
||||
.pipe(plug.if(!PRODUCTION, ext_replace('.blade.php.html', '.blade.php')))
|
||||
.pipe(plug.if(!PRODUCTION, gulp.dest('public/build/emails')));
|
||||
});
|
||||
|
||||
// Reset Panini's cache of layouts and partials
|
||||
|
@ -220,46 +227,19 @@ gulp.task("email-sass", function emailSass() {
|
|||
includePaths: ['node_modules/foundation-emails/scss']
|
||||
}).on('error', plug.sass.logError))
|
||||
.pipe(plug.if(PRODUCTION, plug.uncss(
|
||||
{
|
||||
html: ['resources/views/emails/build/**/*.blade.php']
|
||||
})))
|
||||
{html: ['resources/views/emails/html/**/*.blade.php']})))
|
||||
.pipe(plug.if(!PRODUCTION, plug.sourcemaps.write()))
|
||||
.pipe(gulp.dest('resources/views/emails/build/css'));
|
||||
// If this is the dev environment, write the CSS to the "public"
|
||||
// directory as well.
|
||||
.pipe(gulp.dest('resources/views/emails/html/css'))
|
||||
.pipe(plug.if(!PRODUCTION, gulp.dest('public/build/emails/css')));
|
||||
});
|
||||
|
||||
// Copy and compress images
|
||||
gulp.task("email-images", function emailImages() {
|
||||
return gulp.src('resources/emails/src/assets/img/**/*')
|
||||
.pipe(plug.imagemin())
|
||||
.pipe(gulp.dest('./resources/views/emails/build/assets/img'));
|
||||
});
|
||||
|
||||
// Inline CSS and minify HTML
|
||||
gulp.task("email-inline", function emailInline() {
|
||||
return gulp.src('resources/views/emails/build/**/*.blade.php')
|
||||
.pipe(plug.if(PRODUCTION, emailInliner('resources/views/emails/build/css/app.css')))
|
||||
.pipe(gulp.dest('resources/views/emails/build'));
|
||||
});
|
||||
|
||||
|
||||
// Helper tasks for email watchers
|
||||
gulp.task("email-rebuild-handlebars", function(callback){
|
||||
runSequence("email-pages", "email-inline", callback);
|
||||
});
|
||||
gulp.task("email-rebuild-layouts", function(callback){
|
||||
runSequence("email-reset-pages", "email-pages", "email-inline", callback);
|
||||
});
|
||||
gulp.task("email-rebuild-sass", function(callback){
|
||||
runSequence("email-reset-pages", "email-sass", "email-pages", "email-inline", callback)
|
||||
});
|
||||
|
||||
// Watch for file changes
|
||||
gulp.task("email-watch", function (callback) {
|
||||
gulp.watch('resources/emails/src/pages/**/*.blade.php.hbs', ["email-rebuild-handlebars"]);
|
||||
gulp.watch(['resources/emails/src/layouts/**/*', 'resources/emails/src/partials/**/*'], ["email-rebuild-layouts"]);
|
||||
gulp.watch(['resources/emails/src/assets/scss/**/*.scss'], ["email-rebuild-sass"]);
|
||||
gulp.watch('resources/emails/src/assets/img/**/*', ["email-images"]);
|
||||
callback();
|
||||
.pipe(gulp.dest('./resources/views/emails/html/assets/img'));
|
||||
});
|
||||
|
||||
|
||||
|
@ -283,7 +263,35 @@ function emailInliner(css) {
|
|||
});
|
||||
}
|
||||
|
||||
// Build the "resources/views/emails/build" folder by running all of the above tasks
|
||||
// Inline CSS and minify HTML
|
||||
gulp.task("email-inline", function emailInline() {
|
||||
return gulp.src('resources/views/emails/html/**/*.blade.php')
|
||||
.pipe(emailInliner('resources/views/emails/html/css/app.css')())
|
||||
.pipe(gulp.dest('resources/views/emails/html'));
|
||||
});
|
||||
|
||||
|
||||
// Helper tasks for email watchers
|
||||
gulp.task("email-rebuild-handlebars", function(callback){
|
||||
runSequence("email-pages", "email-inline", callback);
|
||||
});
|
||||
gulp.task("email-rebuild-layouts", function(callback){
|
||||
runSequence("email-reset-pages", "email-pages", "email-inline", callback);
|
||||
});
|
||||
gulp.task("email-rebuild-sass", function(callback){
|
||||
runSequence("email-reset-pages", "email-sass", "email-pages", "email-inline", callback)
|
||||
});
|
||||
|
||||
// Watch for file changes
|
||||
gulp.task("email-watch", function (callback) {
|
||||
gulp.watch('resources/emails/src/pages/**/*.blade.php.hbs', ["email-rebuild-handlebars"]);
|
||||
gulp.watch(['resources/emails/src/layouts/**/*', 'resources/emails/src/partials/**/*'], ["email-rebuild-layouts"]);
|
||||
gulp.watch(['resources/emails/src/assets/scss/**/*.scss'], ["email-rebuild-sass"]);
|
||||
gulp.watch('resources/emails/src/assets/img/**/*', ["email-images"]);
|
||||
callback();
|
||||
});
|
||||
|
||||
// Build the "resources/views/emails/html" folder by running all of the above tasks
|
||||
gulp.task('email-build', function(callback){
|
||||
runSequence("email-clean", "email-pages", "email-sass", "email-images", "email-inline", callback);
|
||||
});
|
||||
|
|
|
@ -16,9 +16,10 @@
|
|||
"chart.js": "2.1.0",
|
||||
"coffee-loader": "0.7.2",
|
||||
"coffee-script": "1.10.0",
|
||||
"del": "^2.2.2",
|
||||
"foundation-emails": "^2.2.1",
|
||||
"fs": "0.0.1-security",
|
||||
"gulp": "3.9.1",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-angular-templatecache": "1.8.0",
|
||||
"gulp-autoprefixer": "3.1.0",
|
||||
"gulp-cached": "1.1.0",
|
||||
|
@ -45,7 +46,6 @@
|
|||
"jquery": "2.2.4",
|
||||
"lazypipe": "^1.0.1",
|
||||
"panini": "^1.3.1",
|
||||
"rimraf": "^2.5.4",
|
||||
"run-sequence": "^1.2.2",
|
||||
"script-loader": "0.7.0",
|
||||
"siphon-media-query": "^1.0.0",
|
||||
|
|
|
@ -1,30 +0,0 @@
|
|||
{{!-- This is the base layout for your project, and will be used on every page. --}}
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="{{root}}css/app.css">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>{{subject}}</title>
|
||||
<!-- <style> -->
|
||||
</head>
|
||||
<body>
|
||||
<span class="preheader">{{description}}</span>
|
||||
<table class="body">
|
||||
<tr>
|
||||
<td class="center" align="center" valign="top">
|
||||
<center>
|
||||
|
||||
{{> body}}
|
||||
|
||||
</center>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- prevent Gmail on iOS font size manipulation -->
|
||||
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
51
resources/emails/src/layouts/notification.hbs
Normal file
51
resources/emails/src/layouts/notification.hbs
Normal file
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="{{root}}css/app.css">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>{{subject}}</title>
|
||||
<!-- <style> -->
|
||||
</head>
|
||||
<body>
|
||||
<span class="preheader">{{description}}</span>
|
||||
<table class="body">
|
||||
<tr>
|
||||
<td class="center" align="center" valign="top">
|
||||
<center>
|
||||
<container>
|
||||
<row>
|
||||
<columns>
|
||||
<h1>Pony.fm</h1>
|
||||
</columns>
|
||||
</row>
|
||||
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened emails are created. --}}
|
||||
{{> body}}
|
||||
<row>
|
||||
<columns large="6">
|
||||
<h6>What's this?</h6>
|
||||
<p><small>Pony.fm can now send you notifications via email! You can control what you get email notifications for in your <a href="#">account settings</a>.</small></p>
|
||||
<p><small><a href="\{{ $unsubscribeUrl }}" target="_blank">Unsubscribe from this kind of email</a></small></p>
|
||||
</columns>
|
||||
<columns large="6">
|
||||
<br>
|
||||
<p><small>
|
||||
Sent with ♥<br>
|
||||
<br>
|
||||
Poniverse<br>
|
||||
248-1641 Lonsdale Avenue<br>
|
||||
North Vancouver<br>
|
||||
BC V7M 2J5<br>
|
||||
Canada
|
||||
</small></p>
|
||||
</columns>
|
||||
</row>
|
||||
</container>
|
||||
</center>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- prevent Gmail on iOS font size manipulation -->
|
||||
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> </div>
|
||||
</body>
|
||||
</html>
|
|
@ -1,51 +0,0 @@
|
|||
---
|
||||
subject: My Basic Email Template Subject
|
||||
---
|
||||
|
||||
<wrapper class="header">
|
||||
<container>
|
||||
<row class="collapse">
|
||||
<columns small="6">
|
||||
<img src="http://placehold.it/200x50/663399">
|
||||
</columns>
|
||||
<columns small="6">
|
||||
<p class="text-right">BASIC</p>
|
||||
</columns>
|
||||
</row>
|
||||
</container>
|
||||
</wrapper>
|
||||
|
||||
<container>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<row>
|
||||
<columns small="12">
|
||||
|
||||
<h1>Hi, Susan Calvin</h1>
|
||||
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, iste, amet consequatur a veniam.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio nulla et, fugiat. Maiores accusantium nostrum asperiores provident, quam modi ex inventore dolores id aspernatur architecto odio minima perferendis, explicabo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quos quasi itaque beatae natus fugit provident delectus, magnam laudantium odio corrupti sit quam. Optio aut ut repudiandae velit distinctio asperiores?</p>
|
||||
<callout class="primary">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellendus natus, sint ea optio dignissimos asperiores inventore a molestiae dolorum placeat repellat excepturi mollitia ducimus unde doloremque ad, alias eos!</p>
|
||||
</callout>
|
||||
</columns>
|
||||
</row>
|
||||
<wrapper class="secondary">
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<row>
|
||||
<columns large="6">
|
||||
<h5>Connect With Us:</h5>
|
||||
<button class="facebook expand" href="http://zurb.com">Facebook</button>
|
||||
<button class="twitter expand" href="http://zurb.com">Twitter</button>
|
||||
<button class="google expand" href="http://zurb.com">Google+</button>
|
||||
</columns>
|
||||
<columns large="6">
|
||||
<h5>Contact Info:</h5>
|
||||
<p>Phone: 408-341-0600</p>
|
||||
<p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
|
||||
</columns>
|
||||
</row>
|
||||
</wrapper>
|
||||
</container>
|
|
@ -1,60 +0,0 @@
|
|||
---
|
||||
subject: My Drip Email Template Subject
|
||||
---
|
||||
|
||||
<container class="header">
|
||||
<row class="collapse">
|
||||
<columns>
|
||||
<img src="http://placehold.it/150x30/663399" alt="">
|
||||
</columns>
|
||||
</row>
|
||||
</container>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<container class="body-drip">
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<center>
|
||||
<img src="http://placehold.it/120/663399" alt="">
|
||||
</center>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<row>
|
||||
<columns>
|
||||
<h4 class="text-center">Responsive Emails</h4>
|
||||
<p class="text-center">15 sections | 567 Min</p>
|
||||
</columns>
|
||||
</row>
|
||||
|
||||
<hr/>
|
||||
|
||||
<row>
|
||||
<columns>
|
||||
<p class="text-center">Hey you! It's you! Just a heads up, we just added this hot new class that will teach you how to NOT be a lame as a duck. Not the metaphorical lame duck, either, but a real duck that was actually lame, maybe from stepping on a land mine or something. Anyways, Foundation for Emails makes coding HTML emails like calling the Navy SEALS to invade a Pre-school, with pre-schoolers, armed with Crayolas.</p>
|
||||
<center>
|
||||
<button href="#" class="success">Get smarter now ↣</button>
|
||||
</center>
|
||||
</columns>
|
||||
</row>
|
||||
|
||||
<row class="collapsed footer">
|
||||
<columns>
|
||||
<spacer size="16"></spacer>
|
||||
<p class="text-center">@copywrite nobody<br/>
|
||||
<a href="#">hello@nocopywrite.com</a> | <a href="#">Manage Email Notifications</a> | <a href="#">Unsubscribe</a></p>
|
||||
<center>
|
||||
<menu>
|
||||
<item><img src="http://placehold.it/25/663399" alt=""></item>
|
||||
<item><img src="http://placehold.it/25/663399" alt=""></item>
|
||||
<item><img src="http://placehold.it/25/663399" alt=""></item>
|
||||
<item><img src="http://placehold.it/25/663399" alt=""></item>
|
||||
<item><img src="http://placehold.it/25/663399" alt=""></item>
|
||||
</menu>
|
||||
</center>
|
||||
</columns>
|
||||
</row>
|
||||
|
||||
</container>
|
|
@ -1,65 +0,0 @@
|
|||
---
|
||||
subject: My Hero Email Template Subject
|
||||
---
|
||||
|
||||
<wrapper class="header">
|
||||
<container>
|
||||
<row class="collapse">
|
||||
<columns small="6">
|
||||
<img src="http://placehold.it/200x50/663399">
|
||||
</columns>
|
||||
<columns small="6">
|
||||
<p class="text-right">HERO</p>
|
||||
</columns>
|
||||
</row>
|
||||
</container>
|
||||
</wrapper>
|
||||
|
||||
<container>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<row>
|
||||
<columns small="12">
|
||||
<h1>Hi, Elijah Baily</h1>
|
||||
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi impedit sapiente delectus molestias quia.</p>
|
||||
<img src="http://placehold.it/580x300" alt="">
|
||||
<callout class="primary">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda, praesentium qui vitae voluptate dolores. <a href="#">Click it!</a></p>
|
||||
</callout>
|
||||
<h2>Title Ipsum <small>This is a note.</small></h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi repellat, harum. Quas nobis id aut, aspernatur, sequi tempora laborum corporis cum debitis, ullam, dolorem dolore quisquam aperiam! Accusantium, ullam, nesciunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus consequuntur commodi, aut sed, quas quam optio accusantium recusandae nesciunt, architecto veritatis. Voluptatibus sunt esse dolor ipsum voluptates, assumenda quisquam.</p>
|
||||
|
||||
<button class="large secondary" href="#">Click Me!</button>
|
||||
|
||||
</columns>
|
||||
</row>
|
||||
|
||||
<wrapper class="secondary">
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<row>
|
||||
<columns large="6">
|
||||
<h5>Connect With Us:</h5>
|
||||
<button class="facebook expand" href="#">Facebook</button>
|
||||
<button class="twitter expand" href="#">Twitter</button>
|
||||
<button class="google expand" href="#">Google+</button>
|
||||
</columns>
|
||||
<columns large="6">
|
||||
<h5>Contact Info:</h5>
|
||||
<p>Phone: 408-341-0600</p>
|
||||
<p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
|
||||
</columns>
|
||||
</row>
|
||||
</wrapper>
|
||||
|
||||
<center>
|
||||
<menu>
|
||||
<item href="#">Terms</item>
|
||||
<item href="#">Privacy</item>
|
||||
<item href="#">Unsubscribe</item>
|
||||
</menu>
|
||||
</center>
|
||||
|
||||
</container>
|
|
@ -1,55 +0,0 @@
|
|||
---
|
||||
layout: index-layout
|
||||
subject: My Email Templates
|
||||
---
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<container>
|
||||
|
||||
<spacer size="24"></spacer>
|
||||
|
||||
<row>
|
||||
<columns small="12">
|
||||
|
||||
<p class="lead">Hi there!</p>
|
||||
<p style="color: #484848; line-height: 1.5;">Thanks for downloading <a href="http://foundation.zurb.com/emails/docs/">Foundation for Emails!</a> Your days of coding up painful HTML emails are officially over. You’ll soon be cranking out some slick, responsive emails in no time! To help get you up and running, we've put together 11 templates for the most common email use cases including newsletters, transactional emails, and marketing blasts. Feel free to customize them to your hearts content.</p>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<center>
|
||||
<menu class="vertical">
|
||||
<item href="{{root}}basic.html" target="_blank">Basic Template</item>
|
||||
<item href="{{root}}drip.html" target="_blank">Drip Template</item>
|
||||
<item href="{{root}}hero.html" target="_blank">Hero Template</item>
|
||||
<item href="{{root}}marketing.html" target="_blank">Marketing Template</item>
|
||||
<item href="{{root}}newsletter.html" target="_blank">Newsletter Template</item>
|
||||
<item href="{{root}}newsletter-2.html" target="_blank">Newsletter 2 Template</item>
|
||||
<item href="{{root}}order.html" target="_blank">Order Template</item>
|
||||
<item href="{{root}}password.html" target="_blank">Password Template</item>
|
||||
<item href="{{root}}sidebar.html" target="_blank">Sidebar Template</item>
|
||||
<item href="{{root}}sidebar-hero.html" target="_blank">Sidebar Hero Template</item>
|
||||
<item href="{{root}}welcome.html" target="_blank">Welcome Template</item>
|
||||
</menu>
|
||||
</center>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<p>Happy Coding,</p>
|
||||
<p>The Foundation Team</p>
|
||||
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
</columns>
|
||||
</row>
|
||||
</container>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<center>
|
||||
<small>Keep on keepin' on. <3 <a style="color: #cacaca; text-decoration: underline;" href="http://zurb.com/">ZURB</a> </small>
|
||||
</center>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
---
|
||||
subject: My Marketing Email Template Subject
|
||||
---
|
||||
|
||||
<container>
|
||||
<row>
|
||||
<columns large="4">
|
||||
<center>
|
||||
<img src="http://placehold.it/125x200">
|
||||
</center>
|
||||
</columns>
|
||||
<columns large="8">
|
||||
<h1>Do Something Radical With This App.</h1>
|
||||
<button class="large" href="#">Sign Up</button>
|
||||
</columns>
|
||||
</row>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<row>
|
||||
<columns>
|
||||
<h3 class="text-center">It's Never Been Easier to Do Things.</h3>
|
||||
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur pariatur unde magni repudiandae totam, accusamus facere eligendi. Ad nobis eius porro saepe et ab, aliquid, sed mollitia cumque suscipit aperiam.</p>
|
||||
</columns>
|
||||
</row>
|
||||
<row>
|
||||
<columns large="4">
|
||||
<center>
|
||||
<img src="http://placehold.it/50x50">
|
||||
</center>
|
||||
<h5 class="text-center">Feature One</h5>
|
||||
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.</p>
|
||||
</columns>
|
||||
<columns large="4">
|
||||
<center>
|
||||
<img src="http://placehold.it/50x50">
|
||||
</center>
|
||||
<h5 class="text-center">Feature Two</h5>
|
||||
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.</p>
|
||||
</columns>
|
||||
<columns large="4">
|
||||
<center>
|
||||
<img src="http://placehold.it/50x50">
|
||||
</center>
|
||||
<h5 class="text-center">Feature Three</h5>
|
||||
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.</p>
|
||||
</columns>
|
||||
</row>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<row>
|
||||
<columns>
|
||||
<h3 class="text-center">What Are You Waiting For? Get Started Today.</h3>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<button class="large expand" href="#">Sign Up</button>
|
||||
</columns>
|
||||
</row>
|
||||
|
||||
<row class="collapsed footer">
|
||||
<columns>
|
||||
<spacer size="16"></spacer>
|
||||
<p class="text-center">@copywrite nobody<br/>
|
||||
<a href="#">hello@nocopywrite.com</a> | <a href="#">Manage Email Notifications</a> | <a href="#">Unsubscribe</a></p>
|
||||
<center>
|
||||
<menu>
|
||||
<item><img src="http://placehold.it/25" alt=""></item>
|
||||
<item><img src="http://placehold.it/25" alt=""></item>
|
||||
<item><img src="http://placehold.it/25" alt=""></item>
|
||||
<item><img src="http://placehold.it/25" alt=""></item>
|
||||
<item><img src="http://placehold.it/25" alt=""></item>
|
||||
</menu>
|
||||
</center>
|
||||
</columns>
|
||||
</row>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
</container>
|
|
@ -1,43 +0,0 @@
|
|||
---
|
||||
subject: My Other Newsletter Email Template Subject
|
||||
---
|
||||
|
||||
<container>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<row>
|
||||
<columns>
|
||||
<center>
|
||||
<img src="http://placehold.it/548x200">
|
||||
</center>
|
||||
</columns>
|
||||
</row>
|
||||
<row>
|
||||
<columns large="8">
|
||||
<h2>This is a title</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.</p>
|
||||
<p><a href="#">Learn more</a></p>
|
||||
</columns>
|
||||
<columns large="4">
|
||||
<img class="small-float-center" src="http://placehold.it/170x129" alt="">
|
||||
</columns>
|
||||
</row>
|
||||
<row>
|
||||
<columns large="6">
|
||||
<h4>Sub Section Title</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.</p>
|
||||
</columns>
|
||||
<columns large="6">
|
||||
<h4>Sub Section Title</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.</p>
|
||||
</columns>
|
||||
</row>
|
||||
<row>
|
||||
<columns>
|
||||
<p>You received this email because you're signed up to receive updates from us. <a href="#">Click here to unsubscribe.</a></p>
|
||||
</columns>
|
||||
</row>
|
||||
</container>
|
|
@ -1,44 +0,0 @@
|
|||
---
|
||||
subject: My Newsletter Email Template Subject
|
||||
---
|
||||
|
||||
<container>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<row>
|
||||
<columns>
|
||||
<h1 class="text-center">The Insider</h1>
|
||||
<center>
|
||||
<img src="http://placehold.it/500x200">
|
||||
</center>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa itaque illo doloribus soluta expedita dolores commodi fuga odit.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto reiciendis eos magni deleniti accusamus tempore, consectetur! Maxime amet, exercitationem nihil fugit eius esse voluptatum ab incidunt minima, saepe reiciendis ipsum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto reiciendis eos magni deleniti accusamus tempore, consectetur! Maxime amet, exercitationem nihil fugit eius esse voluptatum ab incidunt minima, saepe reiciendis ipsum.</p>
|
||||
|
||||
<row>
|
||||
<columns large="6">
|
||||
<h4>More Reading:</h4>
|
||||
<ul>
|
||||
<li><a href="#">Lorem Ipsum Dolor Sit Amet</a></li>
|
||||
<li><a href="#">Lorem Ipsum Dolor Sit Amet</a></li>
|
||||
<li><a href="#">Lorem Ipsum Dolor Sit Amet</a></li>
|
||||
</ul>
|
||||
</columns>
|
||||
<columns>
|
||||
<h4>Get Involved:</h4>
|
||||
<ul>
|
||||
<li><a href="#">Facebook</a></li>
|
||||
<li><a href="#">Twitter</a></li>
|
||||
<li><a href="#">Instagram</a></li>
|
||||
</ul>
|
||||
</columns>
|
||||
</row>
|
||||
|
||||
<p><small>You received this email because you're signed up to get updates from us. <a href="#">Click here to unsubscribe.</a></small></p>
|
||||
</columns>
|
||||
</row>
|
||||
</container>
|
|
@ -0,0 +1,32 @@
|
|||
---
|
||||
layout: notification
|
||||
---
|
||||
|
||||
<container>
|
||||
<row>
|
||||
<columns>
|
||||
<p>\{{ $creatorName }} favourited your \{{ $resourceType }},
|
||||
<a href="\{{ $notificationUrl }}" target="_blank"><em>\{{ $resourceTitle }}</em></a>!
|
||||
Yay!</p>
|
||||
</columns>
|
||||
</row>
|
||||
|
||||
<a href="\{{ $creatorUrl }}" target="_blank">
|
||||
<row>
|
||||
<columns small="4" large="2" class="large-offset-1">
|
||||
<img src="\{{ $message->embed($thumbnailUrl) }}" />
|
||||
</columns>
|
||||
<columns small="8">
|
||||
<p>\{{ $creatorName }}</p>
|
||||
<p><small>\{{ $creatorBio }}</small></p>
|
||||
</columns>
|
||||
</row>
|
||||
<row>
|
||||
<columns>
|
||||
<center>
|
||||
<button href="\{{ $creatorUrl }}" target="_blank" class="small-expanded">Visit \{{ $creatorName }}'s profile</button>
|
||||
</center>
|
||||
</columns>
|
||||
</row>
|
||||
</a>
|
||||
</container>
|
|
@ -0,0 +1,31 @@
|
|||
---
|
||||
layout: notification
|
||||
---
|
||||
|
||||
<container>
|
||||
<row>
|
||||
<columns>
|
||||
<p>\{{ $creatorName }} left a comment on your \{{ $resourceType }},
|
||||
<a href="\{{ $notificationUrl }}" target="_blank"><em>\{{ $resourceTitle }}</em></a>!</p>
|
||||
</columns>
|
||||
</row>
|
||||
|
||||
<a href="\{{ $notificationUrl }}" target="_blank">
|
||||
<row>
|
||||
<columns small="4" large="2" class="large-offset-2">
|
||||
<img src="\{{ $message->embed($thumbnailUrl) }}" />
|
||||
</columns>
|
||||
<columns small="8">
|
||||
<p><small>\{{ $creatorName }} wrote,</small></p>
|
||||
<p>\{{ $comment }}</p>
|
||||
</columns>
|
||||
</row>
|
||||
<row>
|
||||
<columns>
|
||||
<center>
|
||||
<button href="\{{ $notificationUrl }}" class="small-expanded">Reply to \{{ $creatorName }}!</button>
|
||||
</center>
|
||||
</columns>
|
||||
</row>
|
||||
</a>
|
||||
</container>
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
layout: notification
|
||||
---
|
||||
|
||||
<container>
|
||||
<row>
|
||||
<columns>
|
||||
<p>\{{ $creatorName }} left a comment on your Pony.fm profile!</p>
|
||||
</columns>
|
||||
</row>
|
||||
|
||||
<a href="\{{ $notificationUrl }}" target="_blank">
|
||||
<row>
|
||||
<columns small="4" large="2" class="large-offset-2">
|
||||
<img src="\{{ $message->embed($thumbnailUrl) }}" />
|
||||
</columns>
|
||||
<columns small="8">
|
||||
<p><small>\{{ $creatorName }} wrote,</small></p>
|
||||
<p>\{{ $comment }}</p>
|
||||
</columns>
|
||||
</row>
|
||||
<row>
|
||||
<columns>
|
||||
<center>
|
||||
<button href="\{{ $notificationUrl }}" class="small-expanded">Reply to \{{ $creatorName }}!</button>
|
||||
</center>
|
||||
</columns>
|
||||
</row>
|
||||
</a>
|
||||
</container>
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
layout: notification
|
||||
---
|
||||
|
||||
<container>
|
||||
<row>
|
||||
<columns>
|
||||
<p>Congrats! \{{ $creatorName }} is now following you on Pony.fm!</p>
|
||||
</columns>
|
||||
</row>
|
||||
|
||||
<a href="\{{ $notificationUrl }}" target="_blank">
|
||||
<row>
|
||||
<columns small="4" large="2" class="large-offset-2">
|
||||
<img src="\{{ $message->embed($thumbnailUrl) }}" />
|
||||
</columns>
|
||||
<columns small="8">
|
||||
<p>\{{ $creatorName }}</p>
|
||||
<p><small>\{{ $creatorBio }}</small></p>
|
||||
</columns>
|
||||
</row>
|
||||
</a>
|
||||
</container>
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
layout: notification
|
||||
---
|
||||
|
||||
<container>
|
||||
<row>
|
||||
<columns>
|
||||
<p>\{{ $creatorName }} created a new playlist on Pony.fm!</p>
|
||||
</columns>
|
||||
</row>
|
||||
|
||||
<a href="\{{ $notificationUrl }}" target="_blank">
|
||||
<row>
|
||||
<columns small="4" large="2" class="large-offset-2">
|
||||
<img src="\{{ $message->embed($thumbnailUrl) }}" />
|
||||
</columns>
|
||||
<columns small="8">
|
||||
<p>\{{ $playlistTitle }}</p>
|
||||
<p><small>by: \{{ $creatorName }}</small></p>
|
||||
</columns>
|
||||
</row>
|
||||
<row>
|
||||
<columns>
|
||||
<center>
|
||||
<button href="\{{ $notificationUrl }}" class="small-expanded">Check it out</button>
|
||||
</center>
|
||||
</columns>
|
||||
</row>
|
||||
</a>
|
||||
</container>
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
layout: notification
|
||||
---
|
||||
|
||||
<container>
|
||||
<row>
|
||||
<columns>
|
||||
<p>\{{ $creatorName }} published a new track on Pony.fm!</p>
|
||||
</columns>
|
||||
</row>
|
||||
|
||||
<a href="\{{ $notificationUrl }}" target="_blank">
|
||||
<row>
|
||||
<columns small="4" large="2" class="large-offset-2">
|
||||
<img src="\{{ $message->embed($thumbnailUrl) }}" />
|
||||
</columns>
|
||||
<columns small="8">
|
||||
<p>\{{ $trackTitle }}</p>
|
||||
<p><small>by: \{{ $creatorName }} / \{{ $genreTitle }}</small></p>
|
||||
</columns>
|
||||
</row>
|
||||
<row>
|
||||
<columns>
|
||||
<center>
|
||||
<button href="\{{ $notificationUrl }}" class="small-expanded">Listen to it now</button>
|
||||
</center>
|
||||
</columns>
|
||||
</row>
|
||||
</a>
|
||||
</container>
|
|
@ -1,86 +0,0 @@
|
|||
<style type="text/css">
|
||||
body,
|
||||
html,
|
||||
.body {
|
||||
background: #f3f3f3 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<container>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<row>
|
||||
<columns>
|
||||
<h1>Thanks for your order.</h1>
|
||||
<p>Thanks for shopping with us! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad earum ducimus, non, eveniet neque dolores voluptas architecto sed, voluptatibus aut dolorem odio. Cupiditate a recusandae, illum cum voluptatum modi nostrum.</p>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<callout class="secondary">
|
||||
<row>
|
||||
<columns large="6">
|
||||
<p>
|
||||
<strong>Payment Method</strong><br/>
|
||||
Dubloons
|
||||
</p>
|
||||
<p>
|
||||
<strong>Email Address</strong><br/>
|
||||
thecapn@pirates.org
|
||||
</p>
|
||||
<p>
|
||||
<strong>Order ID</strong><br/>
|
||||
239235983749636
|
||||
</p>
|
||||
</columns>
|
||||
<columns large="6">
|
||||
<p>
|
||||
<strong>Shipping Method</strong><br/>
|
||||
Boat (1–2 weeks)<br/>
|
||||
<strong>Shipping Address</strong><br/>
|
||||
Captain Price<br/>
|
||||
123 Maple Rd<br/>
|
||||
Campbell, CA 95112
|
||||
</p>
|
||||
</columns>
|
||||
</row>
|
||||
</callout>
|
||||
|
||||
<h4>Order Details</h4>
|
||||
|
||||
<table>
|
||||
<tr><th>Item</th><th>#</th><th>Price</th></tr>
|
||||
<tr><td>Ship's Cannon</td><td>2</td><td>$100</td></tr>
|
||||
<tr><td>Ship's Cannon</td><td>2</td><td>$100</td></tr>
|
||||
<tr><td>Ship's Cannon</td><td>2</td><td>$100</td></tr>
|
||||
<tr>
|
||||
<td colspan="2"><b>Subtotal:</b></td>
|
||||
<td>$600</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<hr/>
|
||||
|
||||
<h4>What's Next?</h4>
|
||||
|
||||
<p>Our carrier raven will prepare your order for delivery. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi necessitatibus itaque debitis laudantium doloribus quasi nostrum distinctio suscipit, magni soluta eius animi voluptatem qui velit eligendi quam praesentium provident culpa?</p>
|
||||
</columns>
|
||||
</row>
|
||||
<row class="footer text-center">
|
||||
<columns large="3">
|
||||
<img src="http://placehold.it/170x30" alt="">
|
||||
</columns>
|
||||
<columns large="3">
|
||||
<p>
|
||||
Call us at 800.555.1923<br/>
|
||||
Email us at support@discount.boat
|
||||
</p>
|
||||
</columns>
|
||||
<columns large="3">
|
||||
<p>
|
||||
123 Maple Rd<br/>
|
||||
Campbell, CA 95112
|
||||
</p>
|
||||
</columns>
|
||||
</row>
|
||||
</container>
|
|
@ -1,40 +0,0 @@
|
|||
---
|
||||
subject: My Password Email Template Subject
|
||||
---
|
||||
|
||||
<container>
|
||||
|
||||
<row class="header">
|
||||
<columns>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<h4 class="text-center">Pirate Retirement Services</h4>
|
||||
</columns>
|
||||
</row>
|
||||
<row>
|
||||
<columns>
|
||||
|
||||
<spacer size="32"></spacer>
|
||||
|
||||
<center>
|
||||
<img src="http://placehold.it/250x250">
|
||||
</center>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<h1 class="text-center">Forgot Your Password?</h1>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<p class="text-center">It happens. Click the link below to reset your password.</p>
|
||||
<button class="large expand" href="#">Reset Password</button>
|
||||
|
||||
<hr/>
|
||||
|
||||
<p><small>You're getting this email because you've signed up for email updates. If you want to opt-out of future emails, <a href="#">unsubscribe here</a>.</small></p>
|
||||
</columns>
|
||||
</row>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
</container>
|
|
@ -1,80 +0,0 @@
|
|||
---
|
||||
subject: My Sidebar Hero Email Template Subject
|
||||
---
|
||||
|
||||
<wrapper class="header">
|
||||
<container>
|
||||
<row class="collapse">
|
||||
<columns small="6">
|
||||
<img src="http://placehold.it/200x50/663399">
|
||||
</columns>
|
||||
<columns small="6">
|
||||
<p class="text-right">SIDEBAR HERO</p>
|
||||
</columns>
|
||||
</row>
|
||||
</container>
|
||||
</wrapper>
|
||||
|
||||
<container>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<row>
|
||||
<columns>
|
||||
<h1>Hi, Elijah Baily</h1>
|
||||
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi impedit sapiente delectus molestias quia.</p>
|
||||
<center>
|
||||
<img src="http://placehold.it/570x300" alt="">
|
||||
</center>
|
||||
<callout class="primary">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda, praesentium qui vitae voluptate dolores. <a href="#">Click it!</a></p>
|
||||
</callout>
|
||||
</columns>
|
||||
</row>
|
||||
<row>
|
||||
<columns large="7">
|
||||
<h3>Hello, Han Fastolfe</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nobis velit, aliquid pariatur at fugit. Omnis at quae, libero iusto quisquam animi blanditiis neque, alias minima corporis, ab in explicabo?</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime dignissimos voluptas minus, cupiditate voluptatem, voluptatum iste molestiae consectetur temporibus quae dolore nam possimus reprehenderit blanditiis laborum iusto sit. Perspiciatis, dolor.</p>
|
||||
<callout class="secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quas optio totam quidem, placeat sunt, sit iusto fugit. Harum omnis deleniti enim nihil iure, quis laudantium veniam velit animi debitis. <a href="#">Click It!</a>
|
||||
</callout>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores minus eius amet alias odit accusantium, fugit perspiciatis nulla suscipit nisi. Laborum aliquid, voluptatum consectetur fugiat maxime architecto enim molestias aperiam!</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eveniet veritatis, magnam ipsam et vero necessitatibus. Deserunt facilis impedit, adipisci illo laboriosam assumenda fugiat dolorum nam odio aliquid, sit est.</p>
|
||||
<button class="expand" href="#">Click Me!</button>
|
||||
</columns>
|
||||
<columns large="5" class="sidebar">
|
||||
<callout class="secondary">
|
||||
<h5>Header</h5>
|
||||
<p class="lead">Sub-header</p>
|
||||
<menu class="vertical">
|
||||
<item href="#">Just a Plain Link »</item>
|
||||
<item href="#">Just a Plain Link »</item>
|
||||
<item href="#">Just a Plain Link »</item>
|
||||
<item href="#">Just a Plain Link »</item>
|
||||
<item href="#">Just a Plain Link »</item>
|
||||
<item href="#">Just a Plain Link »</item>
|
||||
<item href="#">Just a Plain Link »</item>
|
||||
</menu>
|
||||
</callout>
|
||||
<callout class="secondary">
|
||||
<h6>CONNECT WITH US:</h6>
|
||||
<button class="facebook expand" href="#">Facebook</button>
|
||||
<button class="twitter expand" href="#">Twitter</button>
|
||||
<button class="google expand" href="#">Google+</button>
|
||||
<p>CONTACT INFO:</p>
|
||||
<p>Phone: 408-341-0600</p>
|
||||
<p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
|
||||
</callout>
|
||||
</columns>
|
||||
</row>
|
||||
|
||||
<center>
|
||||
<menu>
|
||||
<item href="#">Terms</item>
|
||||
<item href="#">Privacy</item>
|
||||
<item href="#">Unsubscribe</item>
|
||||
</menu>
|
||||
</center>
|
||||
|
||||
</container>
|
|
@ -1,70 +0,0 @@
|
|||
---
|
||||
subject: My Hero Sidebar Template Subject
|
||||
---
|
||||
|
||||
<wrapper class="header">
|
||||
<container>
|
||||
<row class="collapse">
|
||||
<columns small="6">
|
||||
<img src="http://placehold.it/200x50/663399">
|
||||
</columns>
|
||||
<columns small="6">
|
||||
<p class="text-right">SIDEBAR</p>
|
||||
</columns>
|
||||
</row>
|
||||
</container>
|
||||
</wrapper>
|
||||
|
||||
<container>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<row>
|
||||
<columns large="7">
|
||||
<h2>Hello, Han Fastolfe</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nobis velit, aliquid pariatur at fugit. Omnis at quae, libero iusto quisquam animi blanditiis neque, alias minima corporis, ab in explicabo?</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime dignissimos voluptas minus, cupiditate voluptatem, voluptatum iste molestiae consectetur temporibus quae dolore nam possimus reprehenderit blanditiis laborum iusto sit. Perspiciatis, dolor.</p>
|
||||
<callout class="secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quas optio totam quidem, placeat sunt, sit iusto fugit. Harum omnis deleniti enim nihil iure, quis laudantium veniam velit animi debitis. <a href="#">Click It!</a>
|
||||
</callout>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores minus eius amet alias odit accusantium, fugit perspiciatis nulla suscipit nisi. Laborum aliquid, voluptatum consectetur fugiat maxime architecto enim molestias aperiam!</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eveniet veritatis, magnam ipsam et vero necessitatibus. Deserunt facilis impedit, adipisci illo laboriosam assumenda fugiat dolorum nam odio aliquid, sit est.</p>
|
||||
<button class="expand" href="#">Click Me!</button>
|
||||
</columns>
|
||||
<columns large="5" class="sidebar">
|
||||
<callout class="secondary">
|
||||
<h5>Header</h5>
|
||||
<p class="lead">Sub-header</p>
|
||||
<menu class="vertical">
|
||||
<item href="#">Just a Plain Link »</item>
|
||||
<item href="#">Just a Plain Link »</item>
|
||||
<item href="#">Just a Plain Link »</item>
|
||||
<item href="#">Just a Plain Link »</item>
|
||||
<item href="#">Just a Plain Link »</item>
|
||||
<item href="#">Just a Plain Link »</item>
|
||||
<item href="#">Just a Plain Link »</item>
|
||||
</menu>
|
||||
</callout>
|
||||
<callout class="secondary">
|
||||
<h6>CONNECT WITH US:</h6>
|
||||
<button class="facebook expand" href="#">Facebook</button>
|
||||
<button class="twitter expand" href="#">Twitter</button>
|
||||
<button class="google expand" href="#">Google+</button>
|
||||
<p>CONTACT INFO:</p>
|
||||
<p>Phone: 408-341-0600</p>
|
||||
<p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
|
||||
</callout>
|
||||
</columns>
|
||||
</row>
|
||||
<row>
|
||||
<columns>
|
||||
<center>
|
||||
<menu>
|
||||
<item href="#">Terms</item>
|
||||
<item href="#">Privacy</item>
|
||||
<item href="#">Unsubscribe</item>
|
||||
</menu>
|
||||
</center>
|
||||
</columns>
|
||||
</row>
|
||||
</container>
|
|
@ -1,51 +0,0 @@
|
|||
---
|
||||
subject: My Welcome Email Template Subject
|
||||
---
|
||||
|
||||
<container class="header">
|
||||
<row>
|
||||
<columns>
|
||||
<h1 class="text-center">Welcome to Kraken Academy</h1>
|
||||
|
||||
<center>
|
||||
<menu class="text-center">
|
||||
<item href="#">About</item>
|
||||
<item href="#">Course List</item>
|
||||
<item href="#">Campus Map</item>
|
||||
<item href="#">Contact</item>
|
||||
</menu>
|
||||
</center>
|
||||
|
||||
</columns>
|
||||
</row>
|
||||
</container>
|
||||
|
||||
<container class="body-border">
|
||||
<row>
|
||||
<columns>
|
||||
|
||||
<spacer size="32"></spacer>
|
||||
|
||||
<center>
|
||||
<img src="http://placehold.it/200x200">
|
||||
</center>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
|
||||
<h4>An exciting future of terrorizing sailors awaits you at Kraken Academy.</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque culpa vel architecto, perspiciatis eius cum autem quidem, sunt consequuntur, impedit dolor vitae illum nobis sint nihil aliquid? Assumenda, amet, officia.</p>
|
||||
|
||||
<center>
|
||||
<menu>
|
||||
<item href="#">krakenacademy.com</item>
|
||||
<item href="#">Facebook</item>
|
||||
<item href="#">Twitter</item>
|
||||
<item href="#">(408)-555-0123</item>
|
||||
</menu>
|
||||
</center>
|
||||
|
||||
</columns>
|
||||
</row>
|
||||
|
||||
<spacer size="16"></spacer>
|
||||
</container>
|
|
@ -1,13 +0,0 @@
|
|||
@yield('content')
|
||||
|
||||
<hr>
|
||||
|
||||
<p><a href="{{ $unsubscribeUrl }}" target="_blank">Unsubscribe from this kind of email</a></p>
|
||||
|
||||
<address style="font-size:85%;">
|
||||
Poniverse<br>
|
||||
248-1641 Lonsdale Avenue<br>
|
||||
North Vancouver<br>
|
||||
BC V7M 2J5<br>
|
||||
Canada
|
||||
</address>
|
|
@ -1,9 +0,0 @@
|
|||
@extends('emails.notifications._layout')
|
||||
|
||||
@section('content')
|
||||
<p>
|
||||
{{ $creatorName }} favourited your {{ $resourceType }},
|
||||
<em><a href="{{ $notificationUrl }}" target="_blank">{{ $resourceTitle }}</a></em>.
|
||||
Yay!
|
||||
</p>
|
||||
@endsection
|
|
@ -1,9 +0,0 @@
|
|||
@extends('emails.notifications._layout')
|
||||
|
||||
@section('content')
|
||||
<p>
|
||||
{{ $creatorName }} left a comment on your {{ $resourceType }},
|
||||
<a href="{{ $notificationUrl }}" target="_blank"><em>{{ $resourceTitle }}</em></a>!
|
||||
<a href="{{ $notificationUrl }}" target="_blank">Visit it</a> to read the comment and reply.
|
||||
</p>
|
||||
@endsection
|
|
@ -1,9 +0,0 @@
|
|||
@extends('emails.notifications._layout')
|
||||
|
||||
@section('content')
|
||||
<p>
|
||||
{{ $creatorName }} left a comment on your Pony.fm profile!
|
||||
<a href="{{ $notificationUrl }}" target="_blank">Visit your profile</a> to
|
||||
read it and reply.
|
||||
</p>
|
||||
@endsection
|
|
@ -1,9 +0,0 @@
|
|||
@extends('emails.notifications._layout')
|
||||
|
||||
@section('content')
|
||||
<p>
|
||||
Congrats!
|
||||
<a href="{{ $notificationUrl }}" target="_blank">{{ $creatorName }}</a>
|
||||
is now following you on Pony.fm!
|
||||
</p>
|
||||
@endsection
|
|
@ -1,8 +0,0 @@
|
|||
@extends('emails.notifications._layout')
|
||||
|
||||
@section('content')
|
||||
<p>{{ $creatorName }} created a new playlist on Pony.fm! Check it out:</p>
|
||||
|
||||
<p><a href="{{ $notificationUrl }}" target="_blank">{{ $playlistTitle }}</a></p>
|
||||
|
||||
@endsection
|
|
@ -1,8 +0,0 @@
|
|||
@extends('emails.notifications._layout')
|
||||
|
||||
@section('content')
|
||||
<p>{{ $creatorName }} published a new track on Pony.fm! Listen to it now:</p>
|
||||
|
||||
<p><a href="{{ $notificationUrl }}" target="_blank">{{ $trackTitle }}</a></p>
|
||||
|
||||
@endsection
|
|
@ -1,4 +1,4 @@
|
|||
@extends('emails.notifications._layout_plaintext')
|
||||
@extends('emails.plaintext.notifications._layout')
|
||||
|
||||
@section('content')
|
||||
{{ $creatorName }} favourited your {{ $resourceType }}, "{{ $resourceTitle }}". Yay!
|
|
@ -1,4 +1,4 @@
|
|||
@extends('emails.notifications._layout_plaintext')
|
||||
@extends('emails.plaintext.notifications._layout')
|
||||
|
||||
@section('content')
|
||||
{{ $creatorName }} left a comment on your {{ $resourceType }}, "{{ $resourceTitle }}"!
|
|
@ -1,4 +1,4 @@
|
|||
@extends('emails.notifications._layout_plaintext')
|
||||
@extends('emails.plaintext.notifications._layout')
|
||||
|
||||
@section('content')
|
||||
{{ $creatorName }} left a comment on your Pony.fm profile!
|
|
@ -1,4 +1,4 @@
|
|||
@extends('emails.notifications._layout_plaintext')
|
||||
@extends('emails.plaintext.notifications._layout')
|
||||
|
||||
@section('content')
|
||||
Congrats! {{ $creatorName }} is now following you on Pony.fm!
|
|
@ -1,4 +1,4 @@
|
|||
@extends('emails.notifications._layout_plaintext')
|
||||
@extends('emails.plaintext.notifications._layout')
|
||||
|
||||
@section('content')
|
||||
{{ $creatorName }} created a new playlist on Pony.fm!
|
|
@ -1,4 +1,4 @@
|
|||
@extends('emails.notifications._layout_plaintext')
|
||||
@extends('emails.plaintext.notifications._layout')
|
||||
|
||||
@section('content')
|
||||
{{ $creatorName }} published a new track on Pony.fm!
|
Loading…
Reference in a new issue