crp1087-2

In this example below you will see how to do a crp1087-2 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by irodger, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright irodger ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>crp1087-2</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="row">
  <textarea id="tmpl-area" class="tmpl-input"></textarea><br>
  <button onclick="getTemplate()">Go!</button>
</div>
<div class="btns row"></div>
<div class="result"></div>
<hr>

<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="x-apple-disable-message-reformatting">
    <meta meta="meta" name="format-detection" content="telephone=no">
    <style>
      #outlook a {padding:0;}
      a[x-apple-data-detectors=true] {
        color: inherit !important;
        text-decoration: inherit !important;
      }
      *[x-apple-data-detectors=true] {
        color: inherit !important;
        text-decoration: inherit !important;
      }
      img {margin: 0; border: 0; padding: 0; display: block;outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
      table {border-spacing: 0;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;}
      table td {border-collapse: collapse;}
      span[class=preheader] { display: none !important; visibility:hidden; mso-hide:all; font-size:1px; color:#000000; line-height:1px; max-height:0px; max-width:0px; opacity:0; overflow:hidden;}
      table[class=bodyContent] {font-size:14px;color: #414141;}
      @media (max-width:600px) {
        table[class=bodyContent] {font-size:20px!important;}
      }
    </style><!--[if (gte mso 9)|(IE)]> <style type="text/css"> table {border-collapse: collapse;} </style> <![endif]-->
  </head>
  <body bgcolor="f2f2f2" style="background-color: #17283c; margin: 0;min-width:100%;">
    <span class="preheader" style="display:none!important;visibility:hidden;mso-hide:all;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;"><%=subheader%></span>
    <div style="background-color:#17283c;">
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="http://irodger.ru/mail-img/fbs/im891/_pattern.jpg" color="#17283c"/>
  </v:background>
  <![endif]-->
  <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #f2f2f2; table-layout: fixed; width: 100%;font-family: Arial, Helvetica, sans-serif;">
    <tr>
      <td valign="top" align="center" background="http://irodger.ru/mail-img/fbs/im891/_pattern.jpg">
      <div style="margin: 0 auto; width: 600px;"><!--[if (gte mso 9)|(IE)]> <table cellspacing="0" align="center" cellpadding="0" border="0" width="600" align="center"><tr><td> <![endif]-->
        <table cellspacing="0" cellpadding="0" border="0" align="center" style="width: 600px; border: none; border-collapse:collapse; border-spacing: 0;background-color:#150724;">
          <tr>
            <td>
              <a href="<%=url%><%=page%>?utm_source=fbs-eMS&utm_medium=email&utm_content=<%=utm%>&utm_campaign=<%=lang%>_rtrg" style="text-decoration: none;display:block;" target="_blank"><img src="http://irodger.ru/mail-img/fbs/im891/header_01.jpg" vspace="0" hspace="0" border="0" style="width: 100%;border: 0;display:block;" alt="" /></a>
            </td>
          </tr>
        </table>
        <table cellspacing="0" cellpadding="0" border="0" align="center" style="background-color:#ffffff; width: 600px; border: none; border-collapse:collapse; border-spacing: 0; color:#150724;">
          <tr>
            <td colspan="3" height="20" style="line-height:0;"></td>
          </tr>
          <tr>
            <td width="30"></td>
            <td width="540" align="left" style="font-weight:bold;font-size:24px;font-family: Arial, Helvetica, sans-serif;"><%=hello%></td>
            <td width="30"></td>
          </tr>
          <tr>
            <td colspan="3" height="10" style="line-height:0;"></td>
          </tr>
          <tr>
            <td width="30"></td>
            <td align="left" style="font-size:16px; line-height:24px;font-family: Arial, Helvetica, sans-serif;"><%=txt1%></td>
            <td width="30"></td>
          </tr>
        </table>
        <table width="600" cellspacing="0" cellpadding="0" border="0" style="background-color: #ffffff; color:#150724;font-size:16px;font-family: Arial, Helvetica, sans-serif;border-spacing: 0;">
          <tr>
            <td colspan="3" height="10" style="line-height:0;"></td>
          </tr>
          <tr>
            <td width="30"></td>
            <td align="left" style="font-size:16px; line-height:20px;font-family: Arial, Helvetica, sans-serif;">• <%=txt2%></td>
            <td width="30"></td>
          </tr>
          <tr>
            <td width="30"></td>
            <td align="left" style="font-size:16px; line-height:20px;font-family: Arial, Helvetica, sans-serif;">• <%=txt3%></td>
            <td width="30"></td>
          </tr>
          <tr>
            <td width="30"></td>
            <td align="left" style="font-size:16px; line-height:20px;font-family: Arial, Helvetica, sans-serif;">• <%=txt4%></td>
            <td width="30"></td>
          </tr>
          <tr>
            <td colspan="3" height="10" style="line-height:0;"></td>
          </tr>
          <tr>
            <td width="30"></td>
            <td align="left" style="font-size:16px; line-height:20px;font-family: Arial, Helvetica, sans-serif;"><%=txt5%></td>
            <td width="30"></td>
          </tr>
          <tr>
            <td colspan="3" height="10" style="line-height:0;"></td>
          </tr>
          <tr>
            <td width="30"></td>
            <td align="left" style="font-size:16px; line-height:20px;font-family: Arial, Helvetica, sans-serif;"><%=txt6%></td>
            <td width="30"></td>
          </tr>
          <tr>
            <td colspan="3" height="40" style="line-height:0;"></td>
          </tr>
          <tr>
            <td width="30"></td>
            <td align="left" style="color:#8c94a5;font-size:14px;"><i><%=txt7%></i></td>
            <td width="30"></td>
          </tr>
          <tr>
            <td colspan="3" height="50" style="line-height:0;"></td>
          </tr>
        </table>
        <table width="600" align="left" style="font-size: 11px;color: #ffffff;font-family: Arial, Helvetica, sans-serif;border-spacing: 0;" cellspacing="0" cellpadding="0" border="0">
          <tr>
            <td height="30" style="line-height:0;"></td>
          </tr>
          <tr>
            <td align="left" style="font-size: 11px;color: #9f9f9f;"><%=footer%></td>
          </tr> 
          <tr>
            <td height="50" style="line-height:0;"></td>
          </tr>
        </table>
      <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
      </div> 
    </td>
    </tr>
  </table>
</div>
  </body>
</html>
  <script src='https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/irodger/crp1087-2-prrbMy */
.row {
  margin: 30px auto;
  text-align: center;
}
.row button {
  text-align: center;
  margin: 5px;
}
.result {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
td {
  outline: 1px solid #f00;
}


/*Downloaded from https://www.codeseek.co/irodger/crp1087-2-prrbMy */
//<%=url%><%=page%>?utm_source=fbs-eMS&utm_medium=email&utm_content=<%=utm%>&utm_campaign=<%=lang%>_rtrg

var _utm = 'Spt_activites';
var _page = 'about/contacts';

var langs = [
  // {
  //   lang: 'tmpl',
  //   url: 'https://fbs.ae/',
  //   page: _page,
  //   utm: '',
  //   lk: 'https://my.fbs.ae/login',
  //   hello: 'Hello $Full Name$!',
  //   subheader: '',
  //   txt1: '',
  //   txt2: '',
  //   txt3: '',
  //   txt4: '',
  //   cta: '',
  //   footer: ''
  // },
  {
    lang: 'en',
    url: 'https://fbs.com/',
    page: _page,
    lk: 'https://my.fbs.com/login',
    hello: 'Hello, $Full Name$!',
    utm: _utm,
    subheader: 'Come and learn trading with us!',
    txt1: 'We are happy to introduce our educational activities for September 2017 in Korea. Come and learn from our professional experts how to become a Forex shark!',
    txt2: 'Date: Every Saturday and Sunday',
    txt3: 'Time: 14:00',
    txt4: 'Type: raining courses',
    txt5: 'Contact phone numbers 09795566595, 09765651135',
    txt6: 'If any questions arise, please contact our 24/7 Support Team!',
    txt7: 'We wish you success, FBS',
    cta: '',
    footer: 'Risk warning: Before you start trading, you should completely understand the risks involved with the currency market and trading on margin, and you should be aware of your level of experience.<br><br>You received this e-mail because you registered at <a href="https://fbs.com/?utm_source=fbs-eMS&utm_medium=email&utm_content=' + _utm + '&utm_campaign=en_rtrg" style="text-decoration: underline; color:#5bc3ff;" target="_blank">fbs.com</a> (<a href="https://my.fbs.com/login?utm_source=fbs-eMS&utm_medium=email&utm_content=' + _utm + '&utm_campaign=en_rtrg" style="text-decoration: underline; color:#5bc3ff;" target="_blank">log into the Personal area</a>). Don’t miss a single important message – add our e-mails <a href="mailto:support@fbs.com" style="text-decoration: underline; color:#5bc3ff;">support@fbs.com</a> and <a href="mailto:info@email.fbs.com" style="text-decoration: underline; color:#5bc3ff;">info@email.fbs.com</a> to your address book and you will always receive the latest letters and find them in your Inbox. You may also <a href="https://suite11.emarsys.net/u/un.php?par=$uid$_$cid$_$llid$_$sid$" style="text-decoration: underline; color:#5bc3ff;" target="_blank">unsubscribe</a> from the newsletter. Got questions? FBS Customer Support is ready to help! Contact us directly from <a href="mailto:support@fbs.com" style="text-decoration: underline; color:#5bc3ff;">within the letter</a> or forward an e-mail to <a href="mailto:support@fbs.com" style="text-decoration: underline; color:#5bc3ff;">support@fbs.com</a>.'
  },
  {
    lang: 'ko',
    url: 'https://kofbs.com/',
    page: _page,
    lk: 'https://my.kofbs.com/login',
    hello: '안녕하세요, $Full Name$님!',
    utm: _utm,
    subheader: '와서 우리와 함께 투자하는 것을 배우세요!',
    txt1: '우리는 2017년 9 월 한국에서의 세미나 일정을 알리게 되어 행복합니다. 와서 우리의 전문적인 조언가들에게서 외환 명수가 되는 방법에 대해 배우세요!',
    txt2: '날짜: 매주 토요일 그리고 일요일',
    txt3: '시간: 14:00',
    txt4: '유형: 외환 투자의 기초',
    txt5: '연락 전화 번호 09795566595, 09765651135',
    txt6: '만약 질문사항이 생기는 경우 우리의 24/7 지원팀으로 문의하시기 바랍니다!',
    txt7: '우리는 당신의 성공을 기원합니다, FBS',
    cta: '',
    footer: '리스크 경고: 당신이 투자를 시작하기 전에 당신은 반드시 통화 시장과 마진 투자를 포함한 리스크에 대해 이해해야 한다, 그리고 당신은 당신의 경험 수준을 인지해야 한다.<br><br>당신은 <a href="https://kofbs.com/?utm_source=fbs-eMS&utm_medium=email&utm_content=seminars&utm_campaign=ko_rtrg" target="_blank" style="text-decoration: underline; color:#5bc3ff;">kofbs.com</a>에서 등록하였기 때문에 이 이메일을 받았습니다.(<a href="https://my.kofbs.com/login?utm_source=fbs-eMS&utm_medium=email&utm_content=seminars&utm_campaign=ko_rtrg" target="_blank" style="text-decoration: underline; color:#5bc3ff;">개인 게정으로 로그인</a>). 중요한 메세지를 단 하나도 놓치지 마세요 - 우리의 이메일 <a href="mailto:support@fbs.com" style="text-decoration: underline; color:#5bc3ff;">support@fbs.com</a> 그리고 <a href="mailto:info@email.fbs.com" style="text-decoration: underline; color:#5bc3ff;">info@email.fbs.com</a>을 당신의 주소록에 추가하면 당신은 항상 최신 소식지를 받고 당신의 받은 편지함에서 그들을 찾아볼 수 있을 것입니다. 당신은 또한 <a href="https://suite11.emarsys.net/u/un.php?par=$uid$_$cid$_$llid$_$sid$" target="_blank" style="text-decoration: underline; color:#5bc3ff;">소식지 구독을 취소</a> 할 수 있습니다. 질문사항이 있나요? FBS 고객 지원팀은 도울 준비가 되어 있습니다! <a href="mailto:support@fbs.com" style="text-decoration: underline; color:#5bc3ff;">이 소식지에서</a> 직접 연락하거나 이메일을 <a href="mailto:support@fbs.com" style="text-decoration: underline; color:#5bc3ff;">support@fbs.com</a>에 답변하세요.'
  },
];

(function() {
  for(var q = 0; q < langs.length; q++) {
    document.querySelector('.btns').innerHTML += '<button onclick=getTemplate("' + langs[q].lang + '")>' + langs[q].lang + '</button>'
  }
})();


var tmpl_field = document.getElementById('tmpl-area');
var result = document.querySelector('.result');
  
function getTemplate (lang) {
  if (!tmpl_field.value) { return false; }
  var lang = lang ? lang : false;
  result.innerHTML = '';

  var items = document.getElementById('tmpl-area').value;
  var tmpl = _.template(items);

  for(var f = 0; f < langs.length; f++) {
    if (lang && langs[f].lang === lang) {
      result.innerHTML = "<div style='display:inline-block; margin: 10px;'>" + langs[f].lang + '<br>' + "<textarea>" + tmpl(langs[f]) + "</textarea>" + "</div>";
      break;
    } else {
      result.innerHTML += "<div style='display:inline-block; margin: 10px;'>" + langs[f].lang + '<br>' + "<textarea>" + tmpl(langs[f]) + "</textarea>" + "</div>";
    }
  }
};

var textareas = document.querySelectorAll('textarea');

for(var i = 0; i < textareas.length; i++) {
  textareas[i].addEventListener("click", selectThis, true);
  
  function selectThis () {
    this.select();
  }
}

Comments