wip mail

app/Actions/SendMail/SendNewsletter.php

@@ -3,10 +3,12 @@
 namespace App\Actions\SendMail;
 
 use App\Jobs\SendNewsletterJob;
+use App\Mail\Newsletter;
 use App\Models\MailAdressen;
 use App\Models\MailGruppen;
 use App\Models\MailVorlage;
 use Filament\Notifications\Notification;
+use Illuminate\Support\Facades\Mail;
 
 // use App\Mail\Newsletter;
 // use Illuminate\Support\Facades\Mail;
@@ -41,7 +43,7 @@ class SendNewsletter
             "absender_mail" => ""
          */
 
-        $adressen = MailAdressen::where('mail_gruppen_id', $record->mail_gruppen_id)->where('deaktiviert', 0)->get();
+        $adressen = MailAdressen::where('mail_gruppen_id', $record->mail_gruppen_id)->where('is_active', 1)->get();
 
         /***
             "mail_gruppen_id" => 1
@@ -71,17 +73,23 @@ class SendNewsletter
             $data['absender_name'] = $gruppe->absender_name;
             $data['absender_email'] = $gruppe->absender_mail;
 
-            if ($adresse->anrede == 'Höflich') {
             if ($adresse->gender) {
-                    $anrede = 'Sehr geehrte Frau '.$adresse->last_name;
+                $data['anrede'] = 'Sehr geehrte Architektin '.$adresse->last_name.', Lieber '.$adresse->first_name;
             } else {
-                    $anrede = 'Sehr geehrter Herr '.$adresse->last_name;
+                $data['anrede'] = 'Sehr geehrter Architekt '.$adresse->last_name.', Lieber '.$adresse->first_name;
-                }
-            } else {
-                $anrede = 'Hallo '.$adresse->first_name;
             }
 
-            $data['inhalt'] = str_replace('###anrede###', $anrede, $template->inhalt);
+            // if ($adresse->anrede == 'Höflich') {
+            //     if ($adresse->gender) {
+            //         $anrede = 'Sehr geehrte Architektin '.$adresse->last_name.', Lieber '.$adresse->first_name;
+            //     } else {
+            //         $anrede = 'Sehr geehrter Architekt '.$adresse->last_name.', Lieber '.$adresse->first_name;
+            //     }
+            // } else {
+            //     $anrede = 'Hallo '.$adresse->first_name;
+            // }
+
+            $data['inhalt'] = $template->inhalt;
 
             SendNewsletterJob::dispatch($data);
 

app/Filament/Resources/MailAdressens/Schemas/MailAdressenForm.php

@@ -31,7 +31,7 @@ class MailAdressenForm
                             ->required()
                             ->label('Mail Gruppe')
                             ->relationship(name: 'mail_gruppen', titleAttribute: 'name'),
-                        Toggle::make('deaktiviert'),
+                        Toggle::make('is_active'),
                     ]),
                 Section::make('Persönliche Anrede')
                     ->columns(2)

app/Filament/Resources/MailAdressens/Tables/MailAdressensTable.php

@@ -4,6 +4,7 @@ namespace App\Filament\Resources\MailAdressens\Tables;
 
 use App\Models\MailAdressen;
 use App\Models\MailGruppen;
+use Filament\Actions\Action;
 use Filament\Actions\BulkAction;
 use Filament\Actions\BulkActionGroup;
 use Filament\Actions\DeleteAction;
@@ -19,6 +20,7 @@ use Filament\Tables\Filters\Filter;
 use Filament\Tables\Table;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Support\Carbon;
 
 class MailAdressensTable
 {
@@ -27,7 +29,8 @@ class MailAdressensTable
         return $table
             ->defaultSort('vereidigung', direction: 'desc')
             ->columns([
-                ToggleColumn::make('deaktiviert')
+                ToggleColumn::make('is_active')
+                    ->label('Aktive')
                     ->alignCenter(),
                 TextColumn::make('anrede')
                     ->badge()
@@ -53,7 +56,7 @@ class MailAdressensTable
             ->filters([
                 Filter::make('mail_gruppen_id')
                     ->columnSpanFull()
-                    ->columns(4)
+                    ->columns(5)
                     ->schema([
                         Select::make('mail_gruppen_id')
                             ->hiddenLabel()
@@ -63,7 +66,17 @@ class MailAdressensTable
                             ->options(function (): array {
                                 return MailGruppen::pluck('name', 'id')->toArray();
                             }),
-                        Toggle::make('deaktiviert')->label('Deaktivierte'),
+                        Toggle::make('is_active')->label('Aktive'),
+                        Select::make('gender')
+                            ->selectablePlaceholder(false)
+                            ->hiddenLabel()
+                            ->preload()
+                            ->default(0)
+                            ->options([
+                                '0' => 'Alle',
+                                'women' => 'Frauen',
+                                'men' => 'Männer',
+                            ]),
                         DatePicker::make('vereidigung_von')->native(false)->hiddenLabel()->placeholder('Vereidigung von'),
                         DatePicker::make('vereidigung_bis')->native(false)->hiddenLabel()->placeholder('Vereidigung bis'),
                     ])
@@ -73,8 +86,18 @@ class MailAdressensTable
                                 $data['mail_gruppen_id'],
                                 fn (Builder $query, $mail_gruppen_id): Builder => $query->where('mail_gruppen_id', $mail_gruppen_id),
                             )->when(
-                                $data['deaktiviert'],
+                                $data['is_active'],
-                                fn (Builder $query, $deaktiviert): Builder => $query->where('deaktiviert', $deaktiviert),
+                                fn (Builder $query, $is_active): Builder => $query->where('is_active', $is_active),
+                            )->when(
+                                $data['gender'],
+                                function (Builder $query, $gender) {
+                                    switch ($gender) {
+                                        case 'women':
+                                            return $query->where('gender', 1);
+                                        case 'men':
+                                            return $query->where('gender', 0);
+                                    }
+                                }
                             )->when(
                                 $data['vereidigung_von'],
                                 fn (Builder $query, $date): Builder => $query->whereDate('vereidigung', '>=', $date),
@@ -94,8 +117,36 @@ class MailAdressensTable
                 DeleteAction::make()->iconButton(),
             ])
             ->toolbarActions([
+                Action::make('nach2022')
+                    ->color('gray')
+                    ->label('Nach 2022')
+                    ->tooltip('Aktiviert alle Teilnehmer NACH dem 1. Jan. 2022')
+                    ->action(function (): void {
+                        MailAdressen::where('vereidigung', '>', Carbon::create(2022, 1, 1, 0, 0, 0))
+                            ->update(
+                                ['is_active' => 1]
+                            );
+                        MailAdressen::where('vereidigung', '<', Carbon::create(2022, 1, 1, 0, 0, 0))
+                            ->update(
+                                ['is_active' => 0]
+                            );
+                    }),
+                Action::make('vor2022')
+                    ->color('gray')
+                    ->label('Vor 2022')
+                    ->tooltip('Aktiviert alle Teilnehmer VOR dem 1. Jan. 2022')
+                    ->action(function (): void {
+                        MailAdressen::where('vereidigung', '>', Carbon::create(2022, 1, 1, 0, 0, 0))
+                            ->update(
+                                ['is_active' => 0]
+                            );
+                        MailAdressen::where('vereidigung', '<', Carbon::create(2022, 1, 1, 0, 0, 0))
+                            ->update(
+                                ['is_active' => 1]
+                            );
+                    }),
                 BulkActionGroup::make([
-                    BulkAction::make('deaktiviert_off')
+                    BulkAction::make('active')
                         ->label('Auswahl Aktivieren')
                         ->tooltip('Auswahl aktivieren')
                         ->icon('heroicon-o-play')
@@ -104,11 +155,11 @@ class MailAdressensTable
                                 /** @var object $record */
                                 MailAdressen::where('id', '=', $record->id)
                                     ->update(
-                                        ['deaktiviert' => 0]
+                                        ['is_active' => 0]
                                     );
                             }
                         }),
-                    BulkAction::make('deaktiviert_on')
+                    BulkAction::make('deaktive')
                         ->color('primary')
                         ->label('Auswahl Deaktivieren')
                         ->tooltip('Auswahl deaktivieren')
@@ -118,7 +169,7 @@ class MailAdressensTable
                                 /** @var object $record */
                                 MailAdressen::where('id', '=', $record->id)
                                     ->update(
-                                        ['deaktiviert' => 1]
+                                        ['is_active' => 1]
                                     );
                             }
                         }),

app/Models/MailAdressen.php

@@ -18,7 +18,7 @@ class MailAdressen extends Model
         'zip',
         'city',
         'vereidigung',
-        'deaktiviert',
+        'is_active',
     ];
 
     public function mail_gruppen()

database/migrations/2026_05_04_070425_create_mail_adressens_table.php

@@ -24,7 +24,7 @@ return new class extends Migration
             $table->string('zip')->nullable();
             $table->string('city')->nullable();
             $table->timestamp('vereidigung')->nullable();
-            $table->boolean('deaktiviert')->default(false);
+            $table->boolean('is_active')->default(false);
             $table->timestamps();
         });
     }

public/test.html

@@ -0,0 +1,385 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Simple Transactional Email</title>
+    <style media="all" type="text/css">
+        /* -------------------------------------
+    GLOBAL RESETS
+------------------------------------- */
+
+        body {
+            font-family: Helvetica, sans-serif;
+            -webkit-font-smoothing: antialiased;
+            font-size: 16px;
+            line-height: 1.3;
+            -ms-text-size-adjust: 100%;
+            -webkit-text-size-adjust: 100%;
+        }
+
+        table {
+            border-collapse: separate;
+            mso-table-lspace: 0pt;
+            mso-table-rspace: 0pt;
+            width: 100%;
+        }
+
+        table td {
+            font-family: Helvetica, sans-serif;
+            font-size: 16px;
+            vertical-align: top;
+        }
+
+        /* -------------------------------------
+    BODY & CONTAINER
+------------------------------------- */
+
+        body {
+            background-color: #f4f5f6;
+            margin: 0;
+            padding: 0;
+        }
+
+        .body {
+            background-color: #f4f5f6;
+            width: 100%;
+        }
+
+        .container {
+            margin: 0 auto !important;
+            max-width: 600px;
+            padding: 0;
+            padding-top: 24px;
+            width: 600px;
+        }
+
+        .content {
+            box-sizing: border-box;
+            display: block;
+            margin: 0 auto;
+            max-width: 600px;
+            padding: 0;
+        }
+
+        /* -------------------------------------
+    HEADER, FOOTER, MAIN
+------------------------------------- */
+
+        .main {
+            background: #ffffff;
+            border: 1px solid #eaebed;
+            border-radius: 16px;
+            width: 100%;
+        }
+
+        .wrapper {
+            box-sizing: border-box;
+            padding: 24px;
+        }
+
+        .footer {
+            clear: both;
+            padding-top: 24px;
+            text-align: center;
+            width: 100%;
+        }
+
+        .footer td,
+        .footer p,
+        .footer span,
+        .footer a {
+            color: #9a9ea6;
+            font-size: 16px;
+            text-align: center;
+        }
+
+        /* -------------------------------------
+    TYPOGRAPHY
+------------------------------------- */
+
+        p {
+            font-family: Helvetica, sans-serif;
+            font-size: 16px;
+            font-weight: normal;
+            margin: 0;
+            margin-bottom: 16px;
+        }
+
+        a {
+            color: #0867ec;
+            text-decoration: underline;
+        }
+
+        /* -------------------------------------
+    BUTTONS
+------------------------------------- */
+
+        .btn {
+            box-sizing: border-box;
+            min-width: 100% !important;
+            width: 100%;
+        }
+
+        .btn>tbody>tr>td {
+            padding-bottom: 16px;
+        }
+
+        .btn table {
+            width: auto;
+        }
+
+        .btn table td {
+            background-color: #ffffff;
+            border-radius: 4px;
+            text-align: center;
+        }
+
+        .btn a {
+            background-color: #ffffff;
+            border: solid 2px #0867ec;
+            border-radius: 4px;
+            box-sizing: border-box;
+            color: #0867ec;
+            cursor: pointer;
+            display: inline-block;
+            font-size: 16px;
+            font-weight: bold;
+            margin: 0;
+            padding: 12px 24px;
+            text-decoration: none;
+            text-transform: capitalize;
+        }
+
+        .btn-primary table td {
+            background-color: #0867ec;
+        }
+
+        .btn-primary a {
+            background-color: #0867ec;
+            border-color: #0867ec;
+            color: #ffffff;
+        }
+
+        @media all {
+            .btn-primary table td:hover {
+                background-color: #ec0867 !important;
+            }
+
+            .btn-primary a:hover {
+                background-color: #ec0867 !important;
+                border-color: #ec0867 !important;
+            }
+        }
+
+        /* -------------------------------------
+    OTHER STYLES THAT MIGHT BE USEFUL
+------------------------------------- */
+
+        .last {
+            margin-bottom: 0;
+        }
+
+        .first {
+            margin-top: 0;
+        }
+
+        .align-center {
+            text-align: center;
+        }
+
+        .align-right {
+            text-align: right;
+        }
+
+        .align-left {
+            text-align: left;
+        }
+
+        .text-link {
+            color: #0867ec !important;
+            text-decoration: underline !important;
+        }
+
+        .clear {
+            clear: both;
+        }
+
+        .mt0 {
+            margin-top: 0;
+        }
+
+        .mb0 {
+            margin-bottom: 0;
+        }
+
+        .preheader {
+            color: transparent;
+            display: none;
+            height: 0;
+            max-height: 0;
+            max-width: 0;
+            opacity: 0;
+            overflow: hidden;
+            mso-hide: all;
+            visibility: hidden;
+            width: 0;
+        }
+
+        .powered-by a {
+            text-decoration: none;
+        }
+
+        /* -------------------------------------
+    RESPONSIVE AND MOBILE FRIENDLY STYLES
+------------------------------------- */
+
+        @media only screen and (max-width: 640px) {
+
+            .main p,
+            .main td,
+            .main span {
+                font-size: 16px !important;
+            }
+
+            .wrapper {
+                padding: 8px !important;
+            }
+
+            .content {
+                padding: 0 !important;
+            }
+
+            .container {
+                padding: 0 !important;
+                padding-top: 8px !important;
+                width: 100% !important;
+            }
+
+            .main {
+                border-left-width: 0 !important;
+                border-radius: 0 !important;
+                border-right-width: 0 !important;
+            }
+
+            .btn table {
+                max-width: 100% !important;
+                width: 100% !important;
+            }
+
+            .btn a {
+                font-size: 16px !important;
+                max-width: 100% !important;
+                width: 100% !important;
+            }
+        }
+
+        /* -------------------------------------
+    PRESERVE THESE STYLES IN THE HEAD
+------------------------------------- */
+
+        @media all {
+            .ExternalClass {
+                width: 100%;
+            }
+
+            .ExternalClass,
+            .ExternalClass p,
+            .ExternalClass span,
+            .ExternalClass font,
+            .ExternalClass td,
+            .ExternalClass div {
+                line-height: 100%;
+            }
+
+            .apple-link a {
+                color: inherit !important;
+                font-family: inherit !important;
+                font-size: inherit !important;
+                font-weight: inherit !important;
+                line-height: inherit !important;
+                text-decoration: none !important;
+            }
+
+            #MessageViewBody a {
+                color: inherit;
+                text-decoration: none;
+                font-size: inherit;
+                font-family: inherit;
+                font-weight: inherit;
+                line-height: inherit;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
+        <tr>
+            <td>&nbsp;</td>
+            <td class="container">
+                <div class="content">
+
+                    <!-- START CENTERED WHITE CONTAINER -->
+                    <span class="preheader">This is preheader text. Some clients will show this text as a
+                        preview.</span>
+                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="main">
+
+                        <!-- START MAIN CONTENT AREA -->
+                        <tr>
+                            <td class="wrapper">
+                                <strong>Sehr geehrter Herr Donald Duck</strong>
+                                <br>
+                                <img src="images/newsletter/hanno.jpg"
+                                    style="max-width: 18%; padding-top:50px; padding: 20px; float:right;"><br>
+                                <p>
+                                    Minutengeschichten sind kurze Storys für eilige Leser und Eltern mit wenig Zeit. Die
+                                    Texte sind
+                                    innerhalb
+                                    einer Minute gelesen. So viel Zeit hat man auf jeden Fall, bevor es dann ins Bett
+                                    geht.
+                                    Hier findest du hunderte Gute Nacht Geschichten, die ich für dich zum Vorlesen oder
+                                    selber schmökern
+                                    geschrieben habe. Egal, ob du etwas mit Prinzessinnen, Kindern, Tieren, Cowboys,
+                                    Weltraumabenteuern oder
+                                    anderen spannenden Geschichten sucht, hier wirst du bestimmt etwas Passendes finden.
+                                </p>
+                                <img src="images/newsletter/Zeichnung.png" style="max-width: 50%;padding-top: 20px;">
+                                <br><br>
+                                Mit freundlichen Grüßen<br>
+                                Hanno Vogl Fernheim<br>
+                                <img src="images/newsletter/ztlogo-schrift.png"
+                                    style="width: 240px; padding: 10px 0;"><br>
+                            </td>
+                        </tr>
+
+                        <!-- END MAIN CONTENT AREA -->
+                    </table>
+
+                    <!-- START FOOTER -->
+                    <div class="footer">
+                        <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+                            <tr>
+                                <td class="content-block" style="font-size: small;">
+                                    <strong>Architekt DI Hanno Vogl-Fernheim</strong>
+                                    <br>architekt vogl-fernheim ZT-GmbH
+                                    <br>Richardsweg 1, 6020 Innsbruck
+                                    <br><a style="font-size: small;"
+                                        href="https://www.bird-farhome.com">www.bird-farhome.com</a>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+
+                    <!-- END FOOTER -->
+
+                    <!-- END CENTERED WHITE CONTAINER -->
+                </div>
+            </td>
+            <td>&nbsp;</td>
+        </tr>
+    </table>
+</body>
+
+</html>

public/test2.html

@@ -0,0 +1,390 @@
+<!DOCTYPE html
+    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+
+<head>
+    <meta charset="UTF-8" />
+    <title>ZT Kammerwahl 2026</title>
+    <style>
+        /* -------------------------------------
+                GLOBAL RESETS
+            ------------------------------------- */
+
+        body {
+            font-family: "Lucida Grande", Helvetica, sans-serif;
+            -webkit-font-smoothing: antialiased;
+            font-size: 16px;
+            line-height: 1.3;
+            -ms-text-size-adjust: 100%;
+            -webkit-text-size-adjust: 100%;
+        }
+
+        table {
+            border-collapse: separate;
+            mso-table-lspace: 0pt;
+            mso-table-rspace: 0pt;
+            width: 100%;
+        }
+
+        table td {
+            font-family: Helvetica, sans-serif;
+            font-size: 16px;
+            vertical-align: top;
+        }
+
+        /* -------------------------------------
+    BODY & CONTAINER
+------------------------------------- */
+
+        body {
+            background-color: #f4f5f6;
+            margin: 0;
+            padding: 0;
+        }
+
+        .body {
+            background-color: #f4f5f6;
+            width: 100%;
+        }
+
+        .container {
+            margin: 0 auto !important;
+            max-width: 600px;
+            padding: 0;
+            padding-top: 24px;
+            width: 600px;
+            border: 1px solid red;
+        }
+
+        .content {
+            box-sizing: border-box;
+            display: block;
+            margin: 0 auto;
+            max-width: 600px;
+            padding: 0;
+        }
+
+        /* -------------------------------------
+    HEADER, FOOTER, MAIN
+------------------------------------- */
+
+        .main {
+            background: #ffffff;
+            border: 1px solid #eaebed;
+            border-radius: 16px;
+            width: 100%;
+        }
+
+        .wrapper {
+            box-sizing: border-box;
+            padding: 24px;
+        }
+
+        .footer {
+            clear: both;
+            padding-top: 24px;
+            text-align: center;
+            width: 100%;
+        }
+
+        .footer td,
+        .footer p,
+        .footer span,
+        .footer a {
+            color: #9a9ea6;
+            font-size: 16px;
+            text-align: center;
+        }
+
+        /* -------------------------------------
+    TYPOGRAPHY
+------------------------------------- */
+
+        p {
+            font-family: Helvetica, sans-serif;
+            font-size: 16px;
+            font-weight: normal;
+            margin: 0;
+            margin-bottom: 16px;
+        }
+
+        a {
+            color: #0867ec;
+            text-decoration: underline;
+        }
+
+        /* -------------------------------------
+    BUTTONS
+------------------------------------- */
+
+        .btn {
+            box-sizing: border-box;
+            min-width: 100% !important;
+            width: 100%;
+        }
+
+        .btn>tbody>tr>td {
+            padding-bottom: 16px;
+        }
+
+        .btn table {
+            width: auto;
+        }
+
+        .btn table td {
+            background-color: #ffffff;
+            border-radius: 4px;
+            text-align: center;
+        }
+
+        .btn a {
+            background-color: #ffffff;
+            border: solid 2px #0867ec;
+            border-radius: 4px;
+            box-sizing: border-box;
+            color: #0867ec;
+            cursor: pointer;
+            display: inline-block;
+            font-size: 16px;
+            font-weight: bold;
+            margin: 0;
+            padding: 12px 24px;
+            text-decoration: none;
+            text-transform: capitalize;
+        }
+
+        .btn-primary table td {
+            background-color: #0867ec;
+        }
+
+        .btn-primary a {
+            background-color: #0867ec;
+            border-color: #0867ec;
+            color: #ffffff;
+        }
+
+        @media all {
+            .btn-primary table td:hover {
+                background-color: #ec0867 !important;
+            }
+
+            .btn-primary a:hover {
+                background-color: #ec0867 !important;
+                border-color: #ec0867 !important;
+            }
+        }
+
+        /* -------------------------------------
+    OTHER STYLES THAT MIGHT BE USEFUL
+------------------------------------- */
+
+        .last {
+            margin-bottom: 0;
+        }
+
+        .first {
+            margin-top: 0;
+        }
+
+        .align-center {
+            text-align: center;
+        }
+
+        .align-right {
+            text-align: right;
+        }
+
+        .align-left {
+            text-align: left;
+        }
+
+        .text-link {
+            color: #0867ec !important;
+            text-decoration: underline !important;
+        }
+
+        .clear {
+            clear: both;
+        }
+
+        .mt0 {
+            margin-top: 0;
+        }
+
+        .mb0 {
+            margin-bottom: 0;
+        }
+
+        .preheader {
+            color: transparent;
+            display: none;
+            height: 0;
+            max-height: 0;
+            max-width: 0;
+            opacity: 0;
+            overflow: hidden;
+            mso-hide: all;
+            visibility: hidden;
+            width: 0;
+        }
+
+        .powered-by a {
+            text-decoration: none;
+        }
+
+        /* -------------------------------------
+    RESPONSIVE AND MOBILE FRIENDLY STYLES
+------------------------------------- */
+
+        @media only screen and (max-width: 640px) {
+
+            .main p,
+            .main td,
+            .main span {
+                font-size: 16px !important;
+            }
+
+            .wrapper {
+                padding: 8px !important;
+            }
+
+            .content {
+                padding: 0 !important;
+            }
+
+            .container {
+                padding: 0 !important;
+                padding-top: 8px !important;
+                width: 100% !important;
+            }
+
+            .main {
+                border-left-width: 0 !important;
+                border-radius: 0 !important;
+                border-right-width: 0 !important;
+            }
+
+            .btn table {
+                max-width: 100% !important;
+                width: 100% !important;
+            }
+
+            .btn a {
+                font-size: 16px !important;
+                max-width: 100% !important;
+                width: 100% !important;
+            }
+        }
+
+        /* -------------------------------------
+    PRESERVE THESE STYLES IN THE HEAD
+------------------------------------- */
+
+        @media all {
+            .ExternalClass {
+                width: 100%;
+            }
+
+            .ExternalClass,
+            .ExternalClass p,
+            .ExternalClass span,
+            .ExternalClass font,
+            .ExternalClass td,
+            .ExternalClass div {
+                line-height: 100%;
+            }
+
+            .apple-link a {
+                color: inherit !important;
+                font-family: inherit !important;
+                font-size: inherit !important;
+                font-weight: inherit !important;
+                line-height: inherit !important;
+                text-decoration: none !important;
+            }
+
+            #MessageViewBody a {
+                color: inherit;
+                text-decoration: none;
+                font-size: inherit;
+                font-family: inherit;
+                font-weight: inherit;
+                line-height: inherit;
+            }
+        }
+    </style>
+</head>
+
+<body style="margin:0; padding:0; background:#f5f5f5;">
+    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
+        <tr>
+            <td>&nbsp;</td>
+            <td class="container">
+                <div class="content">
+
+                    <!-- START CENTERED WHITE CONTAINER -->
+                    <span class="preheader">This is preheader text. Some clients will show this text as a
+                        preview.</span>
+                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="main">
+
+                        <!-- START MAIN CONTENT AREA -->
+                        <tr>
+                            <td class="wrapper">
+                                <strong>Sehr geehrter Herr Duck</strong>
+                                <br>
+                                <img src="images/newsletter/hanno.jpg"
+                                    style="max-width: 18%; padding-top:50px; padding: 20px; float:right;"><br>
+                                <p>
+                                    Minutengeschichten sind kurze Storys für eilige Leser und Eltern mit wenig Zeit. Die
+                                    Texte sind
+                                    innerhalb
+                                    einer Minute gelesen. So viel Zeit hat man auf jeden Fall, bevor es dann ins Bett
+                                    geht.
+                                    Hier findest du hunderte Gute Nacht Geschichten, die ich für dich zum Vorlesen oder
+                                    selber schmökern
+                                    geschrieben habe. Egal, ob du etwas mit Prinzessinnen, Kindern, Tieren, Cowboys,
+                                    Weltraumabenteuern oder
+                                    anderen spannenden Geschichten sucht, hier wirst du bestimmt etwas Passendes finden.
+                                </p>
+                                <img src="images/newsletter/Zeichnung.png" style="max-width: 50%;padding-top: 20px;">
+                                <br><br>
+                                Mit besten Grüßen<br>
+                                Hanno Vogl Fernheim
+                            </td>
+                        </tr>
+                        <tr>
+                            <td style=" padding: 20px;">
+                                <img src="images/newsletter/ztlogo-schrift.png"
+                                    style="width: 240px; padding: 10px 0;"><br>
+                                <strong>Architekt DI Hanno Vogl-Fernheim</strong>
+                                <br>architekt vogl-fernheim ZT-GmbH
+                                <br>Richardsweg 1
+                                <br>6020 Innsbruck
+                                <br><a href="https://www.bird-farhome.com">www.bird-farhome.com</a>
+                            </td>
+                        </tr>
+
+                        <!-- END MAIN CONTENT AREA -->
+                    </table>
+
+                    <!-- START FOOTER -->
+                    <div class="footer">
+                        <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+                            <tr>
+                                <td class="content-block">
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+
+                    <!-- END FOOTER -->
+
+                    <!-- END CENTERED WHITE CONTAINER -->
+                </div>
+            </td>
+            <td>&nbsp;</td>
+        </tr>
+    </table>
+</body>
+
+</html>

resources/views/mail/newsletter.blade.php

@@ -1,53 +1,381 @@
-<!DOCTYPE html>
+<?php
+$hanno = config('app.url') . '/images/newsletter/hanno.jpg';
+$message->embedData(file_get_contents($hanno), 'Architekt DI Hanno Vogl-Fernheim', 'image/png');
+?>
+<!doctype html>
 <html>
 
 <head>
-    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ $data['subjekt'] }}</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <style>
+    <title>Simple Transactional Email</title>
-        html {
+    <style media="all" type="text/css">
-            -webkit-font-smoothing: antialiased;
+        /* -------------------------------------
-        }
+    GLOBAL RESETS
+------------------------------------- */
 
         body {
-            margin: 0px;
+            font-family: Helvetica, sans-serif;
-            margin-top: 20px;
+            -webkit-font-smoothing: antialiased;
-            padding: 0px;
+            font-size: 16px;
-            background: #fff;
+            line-height: 1.3;
-            font-size: 18px;
+            -ms-text-size-adjust: 100%;
-            line-height: 24px;
+            -webkit-text-size-adjust: 100%;
-            font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvcetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+        }
-            color: #333333;
+
+        table {
+            border-collapse: separate;
+            mso-table-lspace: 0pt;
+            mso-table-rspace: 0pt;
+            width: 100%;
+        }
+
+        table td {
+            font-family: Helvetica, sans-serif;
+            font-size: 16px;
+            vertical-align: top;
+        }
+
+        /* -------------------------------------
+    BODY & CONTAINER
+------------------------------------- */
+
+        body {
+            background-color: #f4f5f6;
+            margin: 0;
+            padding: 0;
+        }
+
+        .body {
+            background-color: #f4f5f6;
+            width: 100%;
         }
 
         .container {
+            margin: 0 auto !important;
             max-width: 600px;
-            margin: 20px auto;
+            padding: 0;
-            padding: 25px;
+            padding-top: 24px;
-            background-color: #f1f1f1;
+            width: 600px;
-            border: 2px solid #dbeafe;
-            border-radius: 10px;
         }
 
-        .message {
+        .content {
-            padding: 25px;
+            box-sizing: border-box;
-            border-radius: 5px;
+            display: block;
-            border: 1px solid #fef9c2;
+            margin: 0 auto;
+            max-width: 600px;
+            padding: 0;
+        }
+
+        /* -------------------------------------
+    HEADER, FOOTER, MAIN
+------------------------------------- */
+
+        .main {
+            background: #ffffff;
+            border: 1px solid #eaebed;
+            border-radius: 16px;
+            width: 100%;
+        }
+
+        .wrapper {
+            box-sizing: border-box;
+            padding: 24px;
+        }
+
+        .footer {
+            clear: both;
+            padding-top: 24px;
+            text-align: center;
+            width: 100%;
+        }
+
+        .footer td,
+        .footer p,
+        .footer span,
+        .footer a {
+            color: #9a9ea6;
+            font-size: 16px;
+            text-align: center;
+        }
+
+        /* -------------------------------------
+    TYPOGRAPHY
+------------------------------------- */
+
+        p {
+            font-family: Helvetica, sans-serif;
+            font-size: 16px;
+            font-weight: normal;
+            margin: 0;
+            margin-bottom: 16px;
+        }
+
+        a {
+            color: #0867ec;
+            text-decoration: underline;
+        }
+
+        /* -------------------------------------
+    BUTTONS
+------------------------------------- */
+
+        .btn {
+            box-sizing: border-box;
+            min-width: 100% !important;
+            width: 100%;
+        }
+
+        .btn>tbody>tr>td {
+            padding-bottom: 16px;
+        }
+
+        .btn table {
+            width: auto;
+        }
+
+        .btn table td {
             background-color: #ffffff;
+            border-radius: 4px;
+            text-align: center;
         }
 
-        .message p {
+        .btn a {
-            margin-bottom: 10px;
+            background-color: #ffffff;
+            border: solid 2px #0867ec;
+            border-radius: 4px;
+            box-sizing: border-box;
+            color: #0867ec;
+            cursor: pointer;
+            display: inline-block;
+            font-size: 16px;
+            font-weight: bold;
+            margin: 0;
+            padding: 12px 24px;
+            text-decoration: none;
+            text-transform: capitalize;
+        }
+
+        .btn-primary table td {
+            background-color: #0867ec;
+        }
+
+        .btn-primary a {
+            background-color: #0867ec;
+            border-color: #0867ec;
+            color: #ffffff;
+        }
+
+        @media all {
+            .btn-primary table td:hover {
+                background-color: #ec0867 !important;
+            }
+
+            .btn-primary a:hover {
+                background-color: #ec0867 !important;
+                border-color: #ec0867 !important;
+            }
+        }
+
+        /* -------------------------------------
+    OTHER STYLES THAT MIGHT BE USEFUL
+------------------------------------- */
+
+        .last {
+            margin-bottom: 0;
+        }
+
+        .first {
+            margin-top: 0;
+        }
+
+        .align-center {
+            text-align: center;
+        }
+
+        .align-right {
+            text-align: right;
+        }
+
+        .align-left {
+            text-align: left;
+        }
+
+        .text-link {
+            color: #0867ec !important;
+            text-decoration: underline !important;
+        }
+
+        .clear {
+            clear: both;
+        }
+
+        .mt0 {
+            margin-top: 0;
+        }
+
+        .mb0 {
+            margin-bottom: 0;
+        }
+
+        .preheader {
+            color: transparent;
+            display: none;
+            height: 0;
+            max-height: 0;
+            max-width: 0;
+            opacity: 0;
+            overflow: hidden;
+            mso-hide: all;
+            visibility: hidden;
+            width: 0;
+        }
+
+        .powered-by a {
+            text-decoration: none;
+        }
+
+        /* -------------------------------------
+    RESPONSIVE AND MOBILE FRIENDLY STYLES
+------------------------------------- */
+
+        @media only screen and (max-width: 640px) {
+
+            .main p,
+            .main td,
+            .main span {
+                font-size: 16px !important;
+            }
+
+            .wrapper {
+                padding: 8px !important;
+            }
+
+            .content {
+                padding: 0 !important;
+            }
+
+            .container {
+                padding: 0 !important;
+                padding-top: 8px !important;
+                width: 100% !important;
+            }
+
+            .main {
+                border-left-width: 0 !important;
+                border-radius: 0 !important;
+                border-right-width: 0 !important;
+            }
+
+            .btn table {
+                max-width: 100% !important;
+                width: 100% !important;
+            }
+
+            .btn a {
+                font-size: 16px !important;
+                max-width: 100% !important;
+                width: 100% !important;
+            }
+        }
+
+        /* -------------------------------------
+    PRESERVE THESE STYLES IN THE HEAD
+------------------------------------- */
+
+        @media all {
+            .ExternalClass {
+                width: 100%;
+            }
+
+            .ExternalClass,
+            .ExternalClass p,
+            .ExternalClass span,
+            .ExternalClass font,
+            .ExternalClass td,
+            .ExternalClass div {
+                line-height: 100%;
+            }
+
+            .apple-link a {
+                color: inherit !important;
+                font-family: inherit !important;
+                font-size: inherit !important;
+                font-weight: inherit !important;
+                line-height: inherit !important;
+                text-decoration: none !important;
+            }
+
+            #MessageViewBody a {
+                color: inherit;
+                text-decoration: none;
+                font-size: inherit;
+                font-family: inherit;
+                font-weight: inherit;
+                line-height: inherit;
+            }
         }
     </style>
 </head>
 
 <body>
-    <div class="container">
+    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
-        <div class="message">
+        <tr>
+            <td>&nbsp;</td>
+            <td class="container">
+                <div class="content">
+
+                    <!-- START CENTERED WHITE CONTAINER -->
+                    <span class="preheader">This is preheader text. Some clients will show this text as a
+                        preview.</span>
+                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="main">
+
+                        <!-- START MAIN CONTENT AREA -->
+                        <tr>
+                            <td class="wrapper">
+                                <strong>{!! $data['anrede'] !!}</strong>
+                                <br>
+                                <img src="{{ $message->embedData(file_get_contents($hanno), 'Architekt DI Hanno Vogl-Fernheim', 'image/png') }}"
+                                    alt="Architekt DI Hanno Vogl-Fernheim"
+                                    style="max-width: 18%; padding-top:50px; padding: 20px; float:right;">
+                                <p>
                                     {!! $data['inhalt'] !!}
+                                </p>
+                                <img src="images/newsletter/Zeichnung.png" style="max-width: 50%;padding-top: 20px;">
+                                <br><br>
+                                Mit freundlichen Grüßen<br>
+                                Hanno Vogl Fernheim<br>
+                                <img src="images/newsletter/ztlogo-schrift.png"
+                                    style="width: 240px; padding: 10px 0;"><br>
+                            </td>
+                        </tr>
+
+                        <!-- END MAIN CONTENT AREA -->
+                    </table>
+
+                    <!-- START FOOTER -->
+                    <div class="footer">
+                        <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+                            <tr>
+                                <td class="content-block" style="font-size: small;">
+                                    <strong>Architekt DI Hanno Vogl-Fernheim</strong>
+                                    <br>architekt vogl-fernheim ZT-GmbH
+                                    <br>Richardsweg 1, 6020 Innsbruck
+                                    <br><a style="font-size: small;"
+                                        href="https://www.bird-farhome.com">www.bird-farhome.com</a>
+                                </td>
+                            </tr>
+                        </table>
                     </div>
+
+                    <!-- END FOOTER -->
+
+                    <!-- END CENTERED WHITE CONTAINER -->
                 </div>
+            </td>
+            <td>&nbsp;</td>
+        </tr>
+    </table>
 </body>
 
 </html>

resources/views/mail/test.html

@@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="UTF-8">
-    <title>{{ $data['subjekt'] }}</title>
-    <style>
-        html {
-            -webkit-font-smoothing: antialiased;
-        }
-
-        body {
-            margin: 0px;
-            margin-top: 20px;
-            padding: 0px;
-            background: #fff;
-            font-size: 18px;
-            line-height: 24px;
-            font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvcetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-            color: #333333;
-        }
-
-        .container {
-            max-width: 600px;
-            margin: 20px auto;
-            padding: 25px;
-            background-color: #f1f1f1;
-            border: 2px solid #dbeafe;
-            border-radius: 10px;
-        }
-
-        .message {
-            padding: 25px;
-            border-radius: 5px;
-            border: 1px solid #fef9c2;
-            background-color: #ffffff;
-        }
-
-        .message p {
-            margin-bottom: 10px;
-        }
-    </style>
-</head>
-
-<body>
-    <div class="container">
-        <div class="message">
-            <strong>Sehr geehrter Herr Duck</strong>
-            <p>
-                Minutengeschichten sind kurze Storys für eilige Leser und Eltern mit wenig Zeit. Die Texte sind
-                innerhalb
-                einer Minute gelesen. So viel Zeit hat man auf jeden Fall, bevor es dann ins Bett geht.
-                Hier findest du hunderte Gute Nacht Geschichten, die ich für dich zum Vorlesen oder selber schmökern
-                geschrieben habe. Egal, ob du etwas mit Prinzessinnen, Kindern, Tieren, Cowboys, Weltraumabenteuern oder
-                anderen spannenden Geschichten sucht, hier wirst du bestimmt etwas Passendes finden.
-            </p>
-
-            Mit besten Grüßen<br>
-            Hanno Vogl Fernheim
-        </div>
-    </div>
-</body>
-
-</html>