Texte vergleichen

Finde den Unterschied zwischen zwei Textdateien

Live-Editor

Leerzeichen ausblenden

Gleiches ausblenden

Zeilenumbruch aus

Ansicht

Vergleichsgenauigkeit

Textstile

Syntaxhervorhebung

Diffchecker Desktop Der sicherste Weg, Diffchecker zu nutzen. Hol dir die Desktop-App: Deine Diffs verlassen nie deinen Computer!Desktop holen

Html & tables compared to MJML

Erstellt letztes JahrDiff läuft nie ab

217 Entfernungen

Zeilen
Gesamt
Entfernt

Zeichen
Gesamt
Entfernt

Um diese Funktion weiterhin zu nutzen, aktualisiere auf Diffchecker Pro Preise anzeigen

221 Zeilen

65 Hinzufügungen

Zeilen
Gesamt
Hinzugefügt

Zeichen
Gesamt
Hinzugefügt

Um diese Funktion weiterhin zu nutzen, aktualisiere auf Diffchecker Pro Preise anzeigen

103 Zeilen

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Forms.Core.Models.FormsHtmlModel>

//This is an example email template where you can use Razor Views to send HTML emails

//You can use Umbraco.TypedContent & Umbraco.TypedMedia etc to use Images & content from your site

//directly in your email templates too

//Strongly Typed

//@Model.GetValue("aliasFormField")

//@foreach (var color in Model.GetValues("checkboxField")){}

//Dynamics

//@Model.DynamicFields.aliasFormField

//@foreach(var color in Model.DynamicFields.checkboxField

//Images need to be absolute - so fetching domain to prefix with images

var siteDomain = Context.Request.Scheme + "://" + Context.Request.Host;

var assetUrl = siteDomain + "/App_plugins/UmbracoForms/Assets/Email-Example";

}

<!DOCTYPE html>

<mjml>

<html>

<mj-head>

<head>

<mj-preview>Umbraco Forms Email</mj-preview>

<mj-style inline="inline">

h1 { font-size: 32px !important; line-height: 32px !important; }

</mj-style>

</mj-head>

<mj-body background-color="#f4f4f4">

/* CLIENT-SPECIFIC STYLES */

<mj-section background-color="#413659">

body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

<mj-column>

table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }

<mj-image width="40px" src="@assetUrl/umbraco-logo.png" alt="Logo" />

img { -ms-interpolation-mode: bicubic; }

</mj-column>

</mj-section>

/* RESET STYLES */

img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }

table { border-collapse: collapse !important; }

<mj-section background-color="#ffffff">

body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }

<mj-column>

<mj-text font-size="36px" font-weight="900" color="#000000" align="center">Umbraco Forms</mj-text>

/* iOS BLUE LINKS */

</mj-column>

a[x-apple-data-detectors] {

</mj-section>

color: inherit !important;

text-decoration: none !important;

font-size: inherit !important;

<mj-section background-color="#F3F3F5">

font-family: inherit !important;

<mj-column background-color="#ffffff">

font-weight: inherit !important;

<mj-text font-size="18px" font-weight="400" color="#303033" line-height="1.6">

line-height: inherit !important;

This is an example email template from Umbraco Forms Razor based email templates. You can build forms using any HTML markup you wish.

}

</mj-text>

<mj-image width="600px" src="@assetUrl/sample-image.jpg" alt="CodeGarden16 Attendees" />

/* MOBILE STYLES */

</mj-column>

@@media screen and (max-width:600px){

</mj-section>

h1 {

font-size: 32px !important;

line-height: 32px !important;

<mj-section background-color="#ffffff">

}

<mj-column>

}

<mj-text font-size="24px" font-weight="700" color="#000000">Form Results</mj-text>

/* ANDROID CENTER FIX */

div[style*="margin: 16px 0;"] { margin: 0 !important; }

<mj-raw>

</style>

@foreach (var field in Model.Fields) {

</head>

<h4 style="font-weight: 700; margin: 0; color: #000000;">@field.Name</h4>

switch (field.FieldType) {

case "FieldType.FileUpload.cshtml":

<p style="margin-top: 0;"><a href="@siteDomain/@field.GetValue()" target="_blank" style="color: #00AEA2;">@field.GetValue()</a></p>

<tr>

break;

case "FieldType.DatePicker.cshtml":

<!--[if (gte mso 9)|(IE)]>

DateTime dt;

var fieldValue = field.GetValue();

<tr>

var dateValid = DateTime.TryParse(fieldValue != null ? fieldValue.ToString() : string.Empty, out dt);

var dateStr = dateValid ? dt.ToString("f") : "";

<![endif]-->

<p style="margin-top: 0;">@dateStr</p>

break;

<tr>

case "FieldType.CheckBoxList.cshtml":

@foreach (var color in field.GetValues()) {

@color<br/>

</a>

}

</td>

</p>

</tr>

break;

</table>

default:

<!--[if (gte mso 9)|(IE)]>

<p style="margin-top: 0;">@field.GetValue()</p>

</td>

break;

</tr>

}

</table>

}

<![endif]-->

</mj-raw>

</td>

</mj-column>

</tr>

</mj-section>

<tr>

<mj-section background-color="#03BFB3">

<mj-column>

<!--[if (gte mso 9)|(IE)]>

<mj-text font-size="20px" font-weight="700" color="#ffffff">Need more help?</mj-text>

<mj-text font-size="18px" font-weight="400" color="#ffffff">

<tr>

<a href="https://our.umbraco.org/Documentation/Add-ons/UmbracoForms/" style="color: #ffffff;">Find our documentation here</a>

</mj-text>

<![endif]-->

</mj-column>

</mj-section>

<tr>

</mj-body>

<h1 style="font-size: 36px; font-weight: 900; margin: 0;">Umbraco Forms</h1>

</mjml>

</td>

</tr>

</table>

<!--[if (gte mso 9)|(IE)]>

</td>

</tr>

</table>

<![endif]-->

</td>

</tr>

<tr>

<!--[if (gte mso 9)|(IE)]>

<tr>

<![endif]-->

<tr>

This is an example email template from Umbraco Forms Razor based email templates. You can build forms using any HTML markup you wish.

</td>

</tr>

<tr>

</a>

</td>

</tr>

<tr>

<h2 style="font-size: 24px; font-weight: 700; margin: 0;">Form Results</h2>

</td>

</tr>

<tr>

@foreach (var field in Model.Fields)

{

<h4 style="font-weight: 700; margin: 0; color: #000000;">@field.Name</h4>

switch (field.FieldType)

{

case "FieldType.FileUpload.cshtml":

<p style="margin-top: 0;"><a href="@siteDomain/@field.GetValue()" target="_blank" style="color: #00AEA2;">@field.GetValue()</a></p>

break;

case "FieldType.DatePicker.cshtml":

DateTime dt;

var fieldValue = field.GetValue();

var dateValid = DateTime.TryParse(fieldValue != null ? fieldValue.ToString() : string.Empty, out dt);

var dateStr = dateValid ? dt.ToString("f") : "";

<p style="margin-top: 0;">@dateStr</p>

break;

case "FieldType.CheckBoxList.cshtml":

@foreach (var color in field.GetValues())

{

@color<br/>

}

</p>

break;

default:

<p style="margin-top: 0;">@field.GetValue()</p>

break;

}

</td>

</tr>

</table>

<!--[if (gte mso 9)|(IE)]>

</td>

</tr>

</table>

<![endif]-->

</td>

</tr>

<tr>

<!--[if (gte mso 9)|(IE)]>

<tr>

<![endif]-->

<tr>

<p style="margin: 0;"><a href="https://our.umbraco.org/Documentation/Add-ons/UmbracoForms/" target="_blank" style="color: #ffffff;">Find our documentation here</a></p>

</td>

</tr>

</table>

<!--[if (gte mso 9)|(IE)]>

</td>

</tr>

</table>

<![endif]-->

</td>

</tr>

</table>

</body>

</html>

Gespeicherte Diffs

Originaltext

Datei öffnen

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Forms.Core.Models.FormsHtmlModel>

@{
    //This is an example email template where you can use Razor Views to send HTML emails

//You can use Umbraco.TypedContent & Umbraco.TypedMedia etc to use Images & content from your site
    //directly in your email templates too

//Strongly Typed
    //@Model.GetValue("aliasFormField")
    //@foreach (var color in Model.GetValues("checkboxField")){}

//Dynamics
    //@Model.DynamicFields.aliasFormField
    //@foreach(var color in Model.DynamicFields.checkboxField

//Images need to be absolute - so fetching domain to prefix with images
    var siteDomain = Context.Request.Scheme + "://" + Context.Request.Host;
    var assetUrl = siteDomain + "/App_plugins/UmbracoForms/Assets/Email-Example";

}
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">
    <style type="text/css">

/* CLIENT-SPECIFIC STYLES */
    body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
    img { -ms-interpolation-mode: bicubic; }

/* RESET STYLES */
    img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
    table { border-collapse: collapse !important; }
    body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }

/* iOS BLUE LINKS */
    a[x-apple-data-detectors] {
        color: inherit !important;
        text-decoration: none !important;
        font-size: inherit !important;
        font-family: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }

/* MOBILE STYLES */
 @@media screen and (max-width:600px){
  h1 {
   font-size: 32px !important;
   line-height: 32px !important;
  }
 }

/* ANDROID CENTER FIX */
    div[style*="margin: 16px 0;"] { margin: 0 !important; }
    </style>
</head>
<body style="background-color: #f4f4f4; margin: 0 !important; padding: 0 !important;">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom: 40px;">
        
        <tr>
            <td bgcolor="#413659" align="center">
                
                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
                    <tr>
                        <td align="center" valign="top" style="padding: 40px 10px 40px 10px;">
                            <a href="http://umbraco.com" target="_blank">
                                <img alt="Logo" src="@assetUrl/umbraco-logo.png" width="40" height="40" style="display: block; width: 40px; max-width: 40px; min-width: 40px; font-family: 'Lato', Helvetica, Arial, sans-serif; color: #ffffff; font-size: 18px;" border="0">
                            </a>
                        </td>
                    </tr>
                </table>
                
            </td>
        </tr>

<tr>
            <td bgcolor="#413659" align="center" style="padding: 0px 10px 0px 10px;">
                
                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
                    <tr>
                        <td bgcolor="#ffffff" align="center" valign="top" style="padding: 40px 20px 20px 20px; color: #000000; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 36px; font-weight: 900; line-height: 48px;">
                            <h1 style="font-size: 36px; font-weight: 900; margin: 0;">Umbraco Forms</h1>
                        </td>
                    </tr>
                </table>
                
            </td>
        </tr>

<tr>
            <td bgcolor="#F3F3F5" align="center" style="padding: 0px 10px 0px 10px;">
                
                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">

<tr>
                        <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #303033; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 1.6em;">
                            This is an example email template from Umbraco Forms Razor based email templates. You can build forms using any HTML markup you wish.
                        </td>
                    </tr>

<tr>
                        <td bgcolor="#ffffff" align="left" style="padding: 0;">
                            <a href="http://umbraco.com" target="_blank">
                                <img alt="CodeGarden16 Attendees" src="@assetUrl/sample-image.jpg" width="600" style="display: block; width: 100%; max-width: 100%; min-width: 100px;" border="0" />
                            </a>
                        </td>
                    </tr>

<tr>
                        <td bgcolor="#ffffff" align="left" style="padding: 40px 30px 0px 30px; color: #000000; font-family: 'Lato', Helvetica, Arial, sans-serif; line-height: 25px;">
                            <h2 style="font-size: 24px; font-weight: 700; margin: 0;">Form Results</h2>
                        </td>
                    </tr>

@foreach (var field in Model.Fields)
                            {
                                <h4 style="font-weight: 700; margin: 0; color: #000000;">@field.Name</h4>

switch (field.FieldType)
                                {
                                    case "FieldType.FileUpload.cshtml":
                                        <p style="margin-top: 0;"><a href="@siteDomain/@field.GetValue()" target="_blank" style="color: #00AEA2;">@field.GetValue()</a></p>
                                        break;

case "FieldType.DatePicker.cshtml":
                                        DateTime dt;
                                        var fieldValue = field.GetValue();
                                        var dateValid = DateTime.TryParse(fieldValue != null ? fieldValue.ToString() : string.Empty, out dt);
                                        var dateStr = dateValid ? dt.ToString("f") : "";
                                        <p style="margin-top: 0;">@dateStr</p>
                                        break;

case "FieldType.CheckBoxList.cshtml":
                                        <p style="margin-top: 0;">
                                            @foreach (var color in field.GetValues())
                                            {
                                                @color<br/>
                                            }
                                        </p>
                                        break;
                                    default:
                                        <p style="margin-top: 0;">@field.GetValue()</p>
                                        break;
                                }
                            }

</td>
                    </tr>
                </table>
                
            </td>
        </tr>

<tr>
            <td bgcolor="#F3F3F5" align="center" style="padding: 30px 10px 0px 10px;">
                
                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
                    
                    <tr>
                        <td bgcolor="#03BFB3" align="center" style="padding: 30px 30px 30px 30px; color: #ffffff; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
                            <h2 style="font-size: 20px; font-weight: 700; color: #ffffff; margin: 0; margin-bottom: 5px;">Need more help?</h2>
                            <p style="margin: 0;"><a href="https://our.umbraco.org/Documentation/Add-ons/UmbracoForms/" target="_blank" style="color: #ffffff;">Find our documentation here</a></p>
                        </td>
                    </tr>
                </table>
                
            </td>
        </tr>

</table>
</body>
</html>

Bearbeitung

Datei öffnen

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Forms.Core.Models.FormsHtmlModel>

@{
    //This is an example email template where you can use Razor Views to send HTML emails

//You can use Umbraco.TypedContent & Umbraco.TypedMedia etc to use Images & content from your site
    //directly in your email templates too

//Strongly Typed
    //@Model.GetValue("aliasFormField")
    //@foreach (var color in Model.GetValues("checkboxField")){}

//Dynamics
    //@Model.DynamicFields.aliasFormField
    //@foreach(var color in Model.DynamicFields.checkboxField

}
<mjml>
  <mj-head>
    <mj-preview>Umbraco Forms Email</mj-preview>
    <mj-style inline="inline">
      h1 { font-size: 32px !important; line-height: 32px !important; }
    </mj-style>
  </mj-head>
  <mj-body background-color="#f4f4f4">
    
    
    <mj-section background-color="#413659">
      <mj-column>
        <mj-image width="40px" src="@assetUrl/umbraco-logo.png" alt="Logo" />
      </mj-column>
    </mj-section>
    
    
    <mj-section background-color="#ffffff">
      <mj-column>
        <mj-text font-size="36px" font-weight="900" color="#000000" align="center">Umbraco Forms</mj-text>
      </mj-column>
    </mj-section>
    
    
    <mj-section background-color="#F3F3F5">
      <mj-column background-color="#ffffff">
        <mj-text font-size="18px" font-weight="400" color="#303033" line-height="1.6">
          This is an example email template from Umbraco Forms Razor based email templates. You can build forms using any HTML markup you wish.
        </mj-text>
        <mj-image width="600px" src="@assetUrl/sample-image.jpg" alt="CodeGarden16 Attendees" />
      </mj-column>
    </mj-section>
    
    
    <mj-section background-color="#ffffff">
      <mj-column>
        <mj-text font-size="24px" font-weight="700" color="#000000">Form Results</mj-text>
        
        
        <mj-raw>
          @foreach (var field in Model.Fields) {
            <h4 style="font-weight: 700; margin: 0; color: #000000;">@field.Name</h4>
            switch (field.FieldType) {
              case "FieldType.FileUpload.cshtml":
                <p style="margin-top: 0;"><a href="@siteDomain/@field.GetValue()" target="_blank" style="color: #00AEA2;">@field.GetValue()</a></p>
                break;
              case "FieldType.DatePicker.cshtml":
                DateTime dt;
                var fieldValue = field.GetValue();
                var dateValid = DateTime.TryParse(fieldValue != null ? fieldValue.ToString() : string.Empty, out dt);
                var dateStr = dateValid ? dt.ToString("f") : "";
                <p style="margin-top: 0;">@dateStr</p>
                break;
              case "FieldType.CheckBoxList.cshtml":
                <p style="margin-top: 0;">
                  @foreach (var color in field.GetValues()) {
                    @color<br/>
                  }
                </p>
                break;
              default:
                <p style="margin-top: 0;">@field.GetValue()</p>
                break;
            }
          }
        </mj-raw>
      </mj-column>
    </mj-section>
    
    
    <mj-section background-color="#03BFB3">
      <mj-column>
        <mj-text font-size="20px" font-weight="700" color="#ffffff">Need more help?</mj-text>
        <mj-text font-size="18px" font-weight="400" color="#ffffff">
          <a href="https://our.umbraco.org/Documentation/Add-ons/UmbracoForms/" style="color: #ffffff;">Find our documentation here</a>
        </mj-text>
      </mj-column>
    </mj-section>
    
  </mj-body>
</mjml>