initial commit

This commit is contained in:
equippedcoding-master
2025-09-17 09:37:06 -05:00
parent 86108ca47e
commit e2c98790b2
55389 changed files with 6206730 additions and 0 deletions

View File

@@ -0,0 +1,358 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cradle2Career</title>
<style type="text/css">
#outlook a {
padding: 0;
}
body {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div,
.ExternalClass blockquote {
line-height: 100%;
}
.ExternalClass p,
.ExternalClass blockquote {
margin-bottom: 0;
margin: 0;
}
#backgroundTable {
margin: 0;
padding: 0;
width: 100% !important;
line-height: 100% !important;
}
img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
.image_fix {
display: block;
}
p {
margin: 1em 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: black !important;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: black;
}
h1 a:active,
h2 a:active,
h3 a:active,
h4 a:active,
h5 a:active,
h6 a:active {
color: black;
}
h1 a:visited,
h2 a:visited,
h3 a:visited,
h4 a:visited,
h5 a:visited,
h6 a:visited {
color: black;
}
table td {
border-collapse: collapse;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
a {
color: #3498db;
}
p.domain a {
color: black;
}
hr {
border: 0;
background-color: #d8d8d8;
margin: 0;
margin-bottom: 0;
height: 1px;
}
@media (max-device-width: 667px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: none;
color: blue;
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: default;
color: orange !important;
pointer-events: auto;
cursor: default;
}
h1[class="profile-name"],
h1[class="profile-name"] a {
font-size: 32px !important;
line-height: 38px !important;
margin-bottom: 14px !important;
}
span[class="issue-date"],
span[class="issue-date"] a {
font-size: 14px !important;
line-height: 22px !important;
}
td[class="description-before"] {
padding-bottom: 28px !important;
}
td[class="description"] {
padding-bottom: 14px !important;
}
td[class="description"] span,
span[class="item-text"],
span[class="item-text"] span {
font-size: 16px !important;
line-height: 24px !important;
}
span[class="item-link-title"] {
font-size: 18px !important;
line-height: 24px !important;
}
span[class="item-header"] {
font-size: 22px !important;
}
span[class="item-link-description"],
span[class="item-link-description"] span {
font-size: 14px !important;
line-height: 22px !important;
}
.link-image {
width: 84px !important;
height: 84px !important;
}
.link-image img {
max-width: 100% !important;
max-height: 100% !important;
}
}
@media (max-width: 500px) {
.column {
display: block !important;
width: 100% !important;
padding-bottom: 8px !important;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: none;
color: blue;
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: default;
color: orange !important;
pointer-events: auto;
cursor: default;
}
}
</style>
<!--[if gte mso 9]>
<style type="text/css">
#contentTable {
width: 600px;
}
</style>
<![endif]-->
</head>
<body style="width:100% !important;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">
<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable" style="margin:0; padding:0; width:100% !important; line-height: 100% !important; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;background-color: #F9FAFB;" width="100%">
<tbody>
<tr>
<td width="10" valign="top">&nbsp;</td>
<td valign="top" align="center">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="background-color: #FFF; border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
<tr>
<td>
<![endif]-->
<table cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%; max-width: 600px; background-color: #FFF; border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;" id="contentTable">
<tbody>
<tr>
<td width="600" valign="top" align="center" style="border-collapse:collapse;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="background: #F9FAFB;" width="100%">
<tbody>
<tr>
<td align="center" valign="top">
<div style="font-family: &quot;lato&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; line-height: 28px;">&nbsp;</div>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="border: 1px solid #E0E4E8;" width="100%">
<tbody>
<tr>
<td align="center" style="" valign="top">
<a style="color: #3498DB; text-decoration: none;" href="#"><!-- portal/dashboard/system/data/media/images/logos/Horizontal-Bug/Color_RGB/c2c_hrz-bg_pos_RGB.png -->
<img style="width: 30%; height: 70px; border: 0;" alt="" src="${image_logo}">
<!-- <img style="width: 30%; height: 70px; border: 0;" alt="" src="https://www.cradle2careertx.org/assets/c2c_stckd-bg_pos_RGB.png"> -->
</a>
</td>
</tr>
<tr>
<td align="left" style="padding: 0 56px 28px 56px;" valign="top">
<!-- nnnn -->
<div style="font-family: &quot;lato&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; line-height: 28px;font-size: 18px; color: #333; font-weight: bold;">
${section_title}
</div>
</td>
</tr>
<tr>
<td align="left" style="padding: 0 56px 28px 56px;" valign="top">
<!-- nnnn -->
<div style="font-family: &quot;lato&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; line-height: 28px;font-size: 18px; color: #333;">
${section_description}
</div>
</td>
</tr>
<tr>
<td align="left" style="padding: 0 56px 56px 56px;" valign="top">
<!-- <div style="font-family: &quot;lato&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; line-height: 28px;font-size: 18px; color: #333;">Oh by the way, I wouldn't mind if you gave my digest some love through <a target="_blank" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.getrevue.co%2Fprofile%2Fbrightonsmith&amp;text=Join%20me%20in%20following%20this%20newsletter%3F%20%F0%9F%91%80%20Weekly%20newsletter%20of%20CyanVariable360%20Studios&amp;original_referer=&amp;related=revue&amp;via=revue">Twitter</a> or <a target="_blank" href="https://m.facebook.com/login.php?skip_api_login=1&amp;api_key=966242223397117&amp;signed_next=1&amp;next=http%3A%2F%2Fm.facebook.com%2Fsharer%2Fsharer.php%3Fu%3Dhttps%253A%252F%252Fwww.getrevue.co%252Fprofile%252Fbrightonsmith&amp;cancel_url=http%3A%2F%2Fm.facebook.com%2Fdialog%2Fclose_window%2F%3Fapp_id%3D966242223397117%26connect%3D0%23_%3D_&amp;display=touch&amp;locale=en_US&amp;_rdr">Facebook</a> :-)</div> -->
</td>
</tr>
<tr>
<td align="center" bgcolor="#F9FAFB" style="padding: 28px 56px;" valign="top">
<div style="font-family: &quot;lato&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; line-height: 28px;font-size: 16px; color: #666666; font-weight: 900;">
</div>
<!-- nnnn -->
<div style="font-family: &quot;lato&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; line-height: 28px;font-size: 16px; color: #000;">
<!-- <a style="color: #55ACEE;" href="#">Twitter</a> -->
&nbsp;&nbsp;
<!-- <a style="color: #3B5998;" href="#">Facebook</a> -->
</div>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="background: #F9FAFB;" width="100%">
<tbody>
<tr>
<td align="center" style="padding: 28px 56px;" valign="top">
<div style="font-family: &quot;lato&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; line-height: 28px;font-size: 16px; line-height: 24px; color: #A7ADB5;">
${section_footer}
</div>
</td>
</tr>
<tr>
<td align="center" style="padding: 0 56px 28px 56px;" valign="middle">
<footer>
<p>unsubscribe</p>
</footer>
<!-- <span style="font-family: &quot;lato&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; line-height: 28px;font-size: 16px; color: #A7ADB5; vertical-align: middle;">Powered by</span> -->
&nbsp;
<!-- <a style="border: 0;" href="https://www.getrevue.co/?utm_campaign=Subscription+welcome&amp;utm_content=logo&amp;utm_medium=email&amp;utm_source=confirmation" target="_blank"><img alt="Revue" width="70" height="28" style="vertical-align: middle;" src="https://www.getrevue.co/assets/email/revue_gray-99f4cab9d76e074438c58f6055605e4d45773b72dc55dd8b8305b0634fc4f381.png"> -->
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
<td width="10" valign="top">&nbsp;</td>
</tr>
</tbody>
</table>
</body>

View File

@@ -0,0 +1,358 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cradle2Career</title>
<style type="text/css">
#outlook a {
padding: 0;
}
body {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div,
.ExternalClass blockquote {
line-height: 100%;
}
.ExternalClass p,
.ExternalClass blockquote {
margin-bottom: 0;
margin: 0;
}
#backgroundTable {
margin: 0;
padding: 0;
width: 100% !important;
line-height: 100% !important;
}
img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
.image_fix {
display: block;
}
p {
margin: 1em 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: black !important;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: black;
}
h1 a:active,
h2 a:active,
h3 a:active,
h4 a:active,
h5 a:active,
h6 a:active {
color: black;
}
h1 a:visited,
h2 a:visited,
h3 a:visited,
h4 a:visited,
h5 a:visited,
h6 a:visited {
color: black;
}
table td {
border-collapse: collapse;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
a {
color: #3498db;
}
p.domain a {
color: black;
}
hr {
border: 0;
background-color: #d8d8d8;
margin: 0;
margin-bottom: 0;
height: 1px;
}
@media (max-device-width: 667px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: none;
color: blue;
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: default;
color: orange !important;
pointer-events: auto;
cursor: default;
}
h1[class="profile-name"],
h1[class="profile-name"] a {
font-size: 32px !important;
line-height: 38px !important;
margin-bottom: 14px !important;
}
span[class="issue-date"],
span[class="issue-date"] a {
font-size: 14px !important;
line-height: 22px !important;
}
td[class="description-before"] {
padding-bottom: 28px !important;
}
td[class="description"] {
padding-bottom: 14px !important;
}
td[class="description"] span,
span[class="item-text"],
span[class="item-text"] span {
font-size: 16px !important;
line-height: 24px !important;
}
span[class="item-link-title"] {
font-size: 18px !important;
line-height: 24px !important;
}
span[class="item-header"] {
font-size: 22px !important;
}
span[class="item-link-description"],
span[class="item-link-description"] span {
font-size: 14px !important;
line-height: 22px !important;
}
.link-image {
width: 84px !important;
height: 84px !important;
}
.link-image img {
max-width: 100% !important;
max-height: 100% !important;
}
}
@media (max-width: 500px) {
.column {
display: block !important;
width: 100% !important;
padding-bottom: 8px !important;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: none;
color: blue;
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: default;
color: orange !important;
pointer-events: auto;
cursor: default;
}
}
</style>
<!--[if gte mso 9]>
<style type="text/css">
#contentTable {
width: 600px;
}
</style>
<![endif]-->
</head>
<body style="width:100% !important;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">
<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable" style="margin:0; padding:0; width:100% !important; line-height: 100% !important; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;background-color: #F9FAFB;" width="100%">
<tbody>
<tr>
<td width="10" valign="top">&nbsp;</td>
<td valign="top" align="center">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="background-color: #FFF; border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
<tr>
<td>
<![endif]-->
<table cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%; max-width: 600px; background-color: #FFF; border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;" id="contentTable">
<tbody>
<tr>
<td width="600" valign="top" align="center" style="border-collapse:collapse;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="background: #F9FAFB;" width="100%">
<tbody>
<tr>
<td align="center" valign="top">
<div style="font-family: &quot;lato&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; line-height: 28px;">&nbsp;</div>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="border: 1px solid #E0E4E8;" width="100%">
<tbody>
<tr>
<td align="center" style="" valign="top">
<a style="color: #3498DB; text-decoration: none;" href="#"><!-- portal/dashboard/system/data/media/images/logos/Horizontal-Bug/Color_RGB/c2c_hrz-bg_pos_RGB.png -->
<img style="width: 30%; height: 70px; border: 0;" alt="" src="${image_logo}">
<!-- <img style="width: 30%; height: 70px; border: 0;" alt="" src="https://www.cradle2careertx.org/assets/c2c_stckd-bg_pos_RGB.png"> -->
</a>
</td>
</tr>
<tr>
<td align="left" style="padding: 0 56px 28px 56px;" valign="top">
<!-- nnnn -->
<div style="font-family: &quot;lato&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; line-height: 28px;font-size: 18px; color: #333; font-weight: bold;">
${section_title}
</div>
</td>
</tr>
<tr>
<td align="left" style="padding: 0 56px 28px 56px;" valign="top">
<!-- nnnn -->
<div style="font-family: &quot;lato&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; line-height: 28px;font-size: 18px; color: #333;">
${section_description}
</div>
</td>
</tr>
<tr>
<td align="left" style="padding: 0 56px 56px 56px;" valign="top">
<!-- <div style="font-family: &quot;lato&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; line-height: 28px;font-size: 18px; color: #333;">Oh by the way, I wouldn't mind if you gave my digest some love through <a target="_blank" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.getrevue.co%2Fprofile%2Fbrightonsmith&amp;text=Join%20me%20in%20following%20this%20newsletter%3F%20%F0%9F%91%80%20Weekly%20newsletter%20of%20CyanVariable360%20Studios&amp;original_referer=&amp;related=revue&amp;via=revue">Twitter</a> or <a target="_blank" href="https://m.facebook.com/login.php?skip_api_login=1&amp;api_key=966242223397117&amp;signed_next=1&amp;next=http%3A%2F%2Fm.facebook.com%2Fsharer%2Fsharer.php%3Fu%3Dhttps%253A%252F%252Fwww.getrevue.co%252Fprofile%252Fbrightonsmith&amp;cancel_url=http%3A%2F%2Fm.facebook.com%2Fdialog%2Fclose_window%2F%3Fapp_id%3D966242223397117%26connect%3D0%23_%3D_&amp;display=touch&amp;locale=en_US&amp;_rdr">Facebook</a> :-)</div> -->
</td>
</tr>
<tr>
<td align="center" bgcolor="#F9FAFB" style="padding: 28px 56px;" valign="top">
<div style="font-family: &quot;lato&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; line-height: 28px;font-size: 16px; color: #666666; font-weight: 900;">
</div>
<!-- nnnn -->
<div style="font-family: &quot;lato&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; line-height: 28px;font-size: 16px; color: #000;">
<!-- <a style="color: #55ACEE;" href="#">Twitter</a> -->
&nbsp;&nbsp;
<!-- <a style="color: #3B5998;" href="#">Facebook</a> -->
</div>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="background: #F9FAFB;" width="100%">
<tbody>
<tr>
<td align="center" style="padding: 28px 56px;" valign="top">
<div style="font-family: &quot;lato&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; line-height: 28px;font-size: 16px; line-height: 24px; color: #A7ADB5;">
${section_footer}
</div>
</td>
</tr>
<tr>
<td align="center" style="padding: 0 56px 28px 56px;" valign="middle">
<footer>
<p><a href="${unsubscribe}">unsubscribe</a></p>
</footer>
<!-- <span style="font-family: &quot;lato&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; line-height: 28px;font-size: 16px; color: #A7ADB5; vertical-align: middle;">Powered by</span> -->
&nbsp;
<!-- <a style="border: 0;" href="https://www.getrevue.co/?utm_campaign=Subscription+welcome&amp;utm_content=logo&amp;utm_medium=email&amp;utm_source=confirmation" target="_blank"><img alt="Revue" width="70" height="28" style="vertical-align: middle;" src="https://www.getrevue.co/assets/email/revue_gray-99f4cab9d76e074438c58f6055605e4d45773b72dc55dd8b8305b0634fc4f381.png"> -->
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
<td width="10" valign="top">&nbsp;</td>
</tr>
</tbody>
</table>
</body>

View File

@@ -0,0 +1,499 @@
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>
Cradle2CareerTX
</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a { padding:0; }
body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
p { display:block;margin:13px 0; }
</style>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 { width:100% !important; max-width: 100%; }
.mj-column-px-400 { width:400px !important; max-width: 400px; }
}
</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
.moz-text-html .mj-column-px-400 { width:400px !important; max-width: 400px; }
</style>
<style type="text/css">
@media only screen and (max-width:480px) {
table.mj-full-width-mobile { width: 100% !important; }
td.mj-full-width-mobile { width: auto !important; }
}
</style>
<style type="text/css">
</style>
</head>
<body style="word-spacing:normal;">
<div
style=""
>
<!-- Company Header -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"
>
<tbody>
<tr>
<td style="width:100px;">
<img
height="auto" src="https://www15.cradle2careertx.org/assets/c2c_stckd-bg_pos_RGB.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="100"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<p
style="border-top:solid 4px #00B052;font-size:1px;margin:0px auto;width:100%;"
>
</p>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 4px #00B052;font-size:1px;margin:0px auto;width:550px;" role="presentation" width="550px" ><tr><td style="height:0;line-height:0;"> &nbsp;
</td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- Image Header -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><v:rect style="width:600px;" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"><v:fill origin="0, -0.5" position="0, -0.5" src="https://www15.cradle2careertx.org/assets/c2c_stckd-bg_pos_RGB.png" type="frame" size="1,1" aspect="atleast" /><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><![endif]-->
<div style="background:url('https://www15.cradle2careertx.org/assets/c2c_stckd-bg_pos_RGB.png') center top / cover no-repeat;background-position:center top;background-repeat:no-repeat;background-size:cover;margin:0px auto;max-width:600px;">
<div style="line-height:0;font-size:0;">
<table
align="center" background="https://www15.cradle2careertx.org/assets/c2c_stckd-bg_pos_RGB.png" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:url('https://www15.cradle2careertx.org/assets/c2c_stckd-bg_pos_RGB.png') center top / cover no-repeat;background-position:center top;background-repeat:no-repeat;background-size:cover;width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--[if mso | IE]></v:textbox></v:rect></td></tr></table><![endif]-->
<!-- Introduction Text -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#fafafa" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#fafafa;background-color:#fafafa;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#fafafa;background-color:#fafafa;width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:400px;" ><![endif]-->
<div
class="mj-column-px-400 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="left" style="font-size:0px;padding:0;word-break:break-word;"
>
<div
style="font-family:Helvetica Neue;font-size:20px;font-style:italic;line-height:1;text-align:left;color:#626262;"
>My Awesome Text</div>
</td>
</tr>
<tr>
<td
align="left" style="font-size:0px;padding:0;word-break:break-word;"
>
<div
style="font-family:Arial;font-size:13px;line-height:1;text-align:left;color:#525252;"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec commodo purus. Sed eget nulla elit. Nulla aliquet mollis faucibus.</div>
</td>
</tr>
<tr>
<td
align="center" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"
>
<tbody>
<tr>
<td
align="center" bgcolor="#00B052" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#00B052;" valign="middle"
>
<a
href="#" style="display:inline-block;background:#00B052;color:#ffffff;font-family:Arial;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;" target="_blank"
>
Learn more
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<div
style="height:150px;line-height:150px;"
>&#8202;</div>
<!-- Social icons -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"
>
<tbody>
<tr
>
<td style="padding:4px;vertical-align:middle;">
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#3b5998;border-radius:3px;width:30px;"
>
<tbody>
<tr>
<td style="font-size:0;height:30px;vertical-align:middle;width:30px;">
<a href="https://www.facebook.com/sharer/sharer.php?u=https://mjml.io/" target="_blank">
<img
height="30" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/facebook.png" style="border-radius:3px;display:block;" width="30"
/>
</a>
</td>
</tr>
</tbody>
</table>
</td>
<td style="vertical-align:middle;">
<a
href="https://www.facebook.com/sharer/sharer.php?u=https://mjml.io/" style="color:#333333;font-size:15px;font-family:Arial;line-height:22px;text-decoration:none;" target="_blank">
Facebook
</a>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td><td><![endif]-->
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"
>
<tbody>
<tr
>
<td style="padding:4px;vertical-align:middle;">
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#dc4e41;border-radius:3px;width:30px;"
>
<tbody>
<tr>
<td style="font-size:0;height:30px;vertical-align:middle;width:30px;">
<a href="https://plus.google.com/share?url=https://mjml.io/" target="_blank">
<img
height="30" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/google-plus.png" style="border-radius:3px;display:block;" width="30"
/>
</a>
</td>
</tr>
</tbody>
</table>
</td>
<td style="vertical-align:middle;">
<a
href="https://plus.google.com/share?url=https://mjml.io/" style="color:#333333;font-size:15px;font-family:Arial;line-height:22px;text-decoration:none;" target="_blank">
Google
</a>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td><td><![endif]-->
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"
>
<tbody>
<tr
>
<td style="padding:4px;vertical-align:middle;">
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#55acee;border-radius:3px;width:30px;"
>
<tbody>
<tr>
<td style="font-size:0;height:30px;vertical-align:middle;width:30px;">
<a href="https://twitter.com/intent/tweet?url=https://mjml.io/" target="_blank">
<img
height="30" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/twitter.png" style="border-radius:3px;display:block;" width="30"
/>
</a>
</td>
</tr>
</tbody>
</table>
</td>
<td style="vertical-align:middle;">
<a
href="https://twitter.com/intent/tweet?url=https://mjml.io/" style="color:#333333;font-size:15px;font-family:Arial;line-height:22px;text-decoration:none;" target="_blank">
Twitter
</a>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td><td><![endif]-->
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"
>
<tbody>
<tr
>
<td style="padding:4px;vertical-align:middle;">
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:3px;width:30px;"
>
<tbody>
<tr>
<td style="font-size:0;height:30px;vertical-align:middle;width:30px;">
<a href="https://mjml.io/" target="_blank">
<img
height="30" style="border-radius:3px;display:block;" width="30"
/>
</a>
</td>
</tr>
</tbody>
</table>
</td>
<td style="vertical-align:middle;">
<a
href="https://mjml.io/" style="color:#333333;font-size:15px;font-family:Arial;line-height:22px;text-decoration:none;" target="_blank">
X
</a>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
</body>
</html>

View File

@@ -0,0 +1,5 @@
.DS_Store
*.sass-cache
server
build
/.bundle

View File

@@ -0,0 +1,8 @@
Copyright (c) 2012-2013 InterNations GmbH
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@@ -0,0 +1,133 @@
# [Antwort](http://internations.github.com/antwort)
### Responsive Layouts for Email
![Responsive Layouts for Email](http://internations.github.io/antwort/images/antwort-v1-graphic.png "Responsive Layouts for Email")
Antwort offers responsive layouts for Email that both fits _and_ adapts to client widths. Don't underwhelm desktop users with single column layouts that work for mobile. Antwort offers columns on desktop that automatically become rows on mobile.
Author: Julie Ng ([@jng5](http://twitter.com/jng5))
Date: October 2014
Version: 1.0.0
## Features
* Works on mobile: Mail on iOS and Email on Android.
* Works in major clients like AOL, gmail, outlook.com and Yahoo.
* Even works in Outlook (2000+).
* Bulletproof layouts: made with dynamic content in mind.
* Minimalist in design for maximum customizability.
### NEW since v1.0
* __Source templates__
Antwort now includes the source templates (pre inlined CSS) for your reference. This lets you easily customize the template for your own use. Each template has a `build.html` with inlined CSS as well as the original source files in a `source` folder.
* __Support for Android 4.3+__
Antwort v0 relied on applying `display: block;` to `<td>` to force columns into rows. Starting with Android 4.3, that is no longer possible, i.e. columns remain columns.
Antwort v1 relies on conditional wrapper tables to support Microsoft Outlook desktop clients. The columns themselves are no longer `<td>`s but `<table>`s, whose width expand to 100% on mobile devices.
## Included Templates
Included templates as of v1.0.0 release (14 October 2014):
<table>
<tbody>
<tr>
<td align="center" valign="top">
<strong>Single Column</strong><br><br>
<a href="https://github.com/InterNations/antwort/tree/master/single-column">
<img src="http://internations.github.io/antwort/images/v1-previews/1-col.png" style="max-width: 95%;">
</a>
</td>
<td align="center" valign="top">
<strong>Two Columns (text)</strong><br><br>
<a href="https://github.com/InterNations/antwort/tree/master/two-cols-simple">
<img src="http://internations.github.io/antwort/images/v1-previews/2-cols.png" style="max-width: 95%;">
</a>
</td>
<td align="center" valign="top">
<strong>Three Columns (images)</strong><br><br>
<a href="https://github.com/InterNations/antwort/tree/master/three-cols-images">
<img src="http://internations.github.io/antwort/images/v1-previews/3-cols-images.png" style="max-width: 95%;">
</a>
</td>
</tr>
<tr>
<td align="center"><a href="https://litmus.com/pub/f6f088c" target="_blank">Litmus Previews</a></td>
<td align="center"><a href="https://litmus.com/pub/884c2a3" target="_blank">Litmus Previews</a></td>
<td align="center"><a href="https://litmus.com/pub/eae4ebf" target="_blank">Litmus Previews</a></td>
</tr>
</tbody>
</table>
NOTE: many Litmus thumbnails are broken and not showning the white background container. But if you view the large version, you will see that **the Antwort templates render perfectly as intended**.
Screenshots updated on 13 January 2016.
## How to use Antwort
Antwort is **not** a framework. Antwort is meant to teach you how to do responsive layouts for Email. That's why source pre-lined HTML is now included for you to learn from.
#### Need help?
Before [posting an issue](https://github.com/InterNations/antwort/issues), please
1. Make sure you are sending the email from an Email Service Provider (ESP), for example MailChimp **not** your Email client e.g. Outlook.
2. Double check any code changes you might have made
3. Do a test send to yourself and view the source. Did your ESP change the code?
## Changelog
### 1.0.2
8 July 2015
* New: removed `attribute=""` CSS selector syntax now that [Yahoo Mail fixed their CSS parser](https://www.emailonacid.com/blog/article/industry-news/yahoo_mail_now_supports_media_queries)
* Fixed: Three columns with images: replaced margins with padding to support Outlook.com
### 1.0.1
3 December 2014
* Added `<meta http-equiv="X-UA-Compatible" content="IE=edge">` to enable media queries on Windows 8 phones
### 1.0.0
14 October 2014
* Complete re-write of code, to reflect latest email development challenges, especially with Android 4.3+
* New: include source folders before inlining CSS.
* New: single column fluid layout
* Footer now includes example address, which has an example for removing blue iOS links.
### 0.1.2
April 2013
* Fixed issue #8 - headlines no longer centered in Outlook.com and older Outlook.
* Fixed issue #7 - moved padding overrides to parent `<td>` in mobile styles.
### 0.1.1
26 March 2013
* Fixed column margin issue after [Hotmail/Outlook dropped margin support](https://litmus.com/blog/hotmail-and-outlook-com-drop-support-for-margin).
* Issue #5 fixed - Outlook.com parses HTML tags in comments.
* Issue #3 fixed - control characters removed from template.
* Added screenshots of current version from Litmus test.
### 0.1.0
4 Jan 2013
* Hello open source world.
## License
Antwort is provided under the MIT License - see LICENSE.md for full details.

View File

@@ -0,0 +1,159 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!-- fix outlook zooming on 120 DPI windows devices -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- So that mobile will display zoomed in -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- enable media queries for windows phone 8 -->
<meta name="format-detection" content="date=no"> <!-- disable auto date linking in iOS 7-9 -->
<meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS 7-9 -->
<title>Single Column</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table {
border-spacing: 0;
}
table td {
border-collapse: collapse;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.ReadMsgBody {
width: 100%;
background-color: #ebebeb;
}
table {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
.yshortcuts a {
border-bottom: none !important;
}
@media screen and (max-width: 599px) {
.force-row,
.container {
width: 100% !important;
max-width: 100% !important;
}
}
@media screen and (max-width: 400px) {
.container-padding {
padding-left: 12px !important;
padding-right: 12px !important;
}
}
.ios-footer a {
color: #aaaaaa !important;
text-decoration: underline;
}
a[href^="x-apple-data-detectors:"],
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;
}
</style>
</head>
<body style="margin:0; padding:0;" bgcolor="#F0F0F0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- 100% background wrapper (grey background) -->
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#F0F0F0">
<tr>
<td align="center" valign="top" bgcolor="#F0F0F0" style="background-color: #F0F0F0;">
<br>
<!-- 600px container (white background) -->
<table border="0" width="600" cellpadding="0" cellspacing="0" class="container" style="width:600px;max-width:600px">
<tr>
<td class="container-padding header" align="left" style="font-family:Helvetica, Arial, sans-serif;font-size:24px;font-weight:bold;padding-bottom:12px;color:#DF4726;padding-left:24px;padding-right:24px">
Antwort v1.0
</td>
</tr>
<tr>
<td class="container-padding content" align="left" style="padding-left:24px;padding-right:24px;padding-top:12px;padding-bottom:12px;background-color:#ffffff">
<br>
<div class="title" style="font-family:Helvetica, Arial, sans-serif;font-size:18px;font-weight:600;color:#374550">Single Column Fluid Layout</div>
<br>
<div class="body-text" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;text-align:left;color:#333333">
This is an example of a single column fluid layout. There are no columns. Because the container table width is set to 100%, it automatically resizes itself to all devices. The magic of good old fashioned HTML.
<br><br>
The media query change we make is to decrease the content margin from 24px to 12px for devices up to max width of 400px.
<br><br>
</div>
</td>
</tr>
<tr>
<td class="container-padding footer-text" align="left" style="font-family:Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;color:#aaaaaa;padding-left:24px;padding-right:24px">
<br><br>
Sample Footer text: © 2015 Acme, Inc.
<br><br>
You are receiving this email because you opted in on our website. Update your <a href="#" style="color:#aaaaaa">email preferences</a> or <a href="#" style="color:#aaaaaa">unsubscribe</a>.
<br><br>
<strong>Acme, Inc.</strong><br>
<span class="ios-footer">
123 Main St.<br>
Springfield, MA 12345<br>
</span>
<a href="http://www.acme-inc.com" style="color:#aaaaaa">www.acme-inc.com</a><br>
<br><br>
</td>
</tr>
</table>
<!--/600px container -->
</td>
</tr>
</table>
<!--/100% background wrapper-->
</body>
</html>

View File

@@ -0,0 +1,63 @@
body {
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table {
border-spacing: 0;
}
table td {
border-collapse: collapse;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.ReadMsgBody {
width: 100%;
background-color: #ebebeb;
}
table {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
.yshortcuts a {
border-bottom: none !important;
}
@media screen and (max-width: 599px) {
.force-row,
.container {
width: 100% !important;
max-width: 100% !important;
}
}
@media screen and (max-width: 400px) {
.container-padding {
padding-left: 12px !important;
padding-right: 12px !important;
}
}
.ios-footer a {
color: #aaaaaa !important;
text-decoration: underline;
}

View File

@@ -0,0 +1,83 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!-- fix outlook zooming on 120 DPI windows devices -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- So that mobile will display zoomed in -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- enable media queries for windows phone 8 -->
<meta name="format-detection" content="date=no"> <!-- disable auto date linking in iOS 7-9 -->
<meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS 7-9 -->
<title>Single Column</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="responsive.css">
</head>
<body style="margin:0; padding:0;" bgcolor="#F0F0F0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- 100% background wrapper (grey background) -->
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#F0F0F0">
<tr>
<td align="center" valign="top" bgcolor="#F0F0F0" style="background-color: #F0F0F0;">
<br>
<!-- 600px container (white background) -->
<table border="0" width="600" cellpadding="0" cellspacing="0" class="container">
<tr>
<td class="container-padding header" align="left">
Antwort v1.0
</td>
</tr>
<tr>
<td class="container-padding content" align="left">
<br>
<div class="title">Single Column Fluid Layout</div>
<br>
<div class="body-text">
This is an example of a single column fluid layout. There are no columns. Because the container table width is set to 100%, it automatically resizes itself to all devices. The magic of good old fashioned HTML.
<br><br>
The media query change we make is to decrease the content margin from 24px to 12px for devices up to max width of 400px.
<br><br>
</div>
</td>
</tr>
<tr>
<td class="container-padding footer-text" align="left">
<br><br>
Sample Footer text: &copy; 2015 Acme, Inc.
<br><br>
You are receiving this email because you opted in on our website. Update your <a href="#">email preferences</a> or <a href="#">unsubscribe</a>.
<br><br>
<strong>Acme, Inc.</strong><br>
<span class="ios-footer">
123 Main St.<br>
Springfield, MA 12345<br>
</span>
<a href="http://www.acme-inc.com">www.acme-inc.com</a><br>
<br><br>
</td>
</tr>
</table><!--/600px container -->
</td>
</tr>
</table><!--/100% background wrapper-->
</body>
</html>

View File

@@ -0,0 +1,89 @@
.header,
.title,
.subtitle,
.footer-text {
font-family: Helvetica, Arial, sans-serif;
}
.header {
font-size: 24px;
font-weight: bold;
padding-bottom: 12px;
color: #DF4726;
}
.footer-text {
font-size: 12px;
line-height: 16px;
color: #aaaaaa;
}
.footer-text a {
color: #aaaaaa;
}
.container {
width: 600px;
max-width: 600px;
}
.container-padding {
padding-left: 24px;
padding-right: 24px;
}
.content {
padding-top: 12px;
padding-bottom: 12px;
background-color: #ffffff;
}
code {
background-color: #eee;
padding: 0 4px;
font-family: Menlo, Courier, monospace;
font-size: 12px;
}
hr {
border: 0;
border-bottom: 1px solid #cccccc;
}
.hr {
height: 1px;
border-bottom: 1px solid #cccccc;
}
.title {
font-size: 18px;
font-weight: 600;
color: #374550;
}
.subtitle {
font-size: 16px;
font-weight: 600;
color: #2469A0;
}
.subtitle span {
font-weight: 400;
color: #999999;
}
.body-text {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
text-align: left;
color: #333333;
}
a[href^="x-apple-data-detectors:"],
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;
}

View File

@@ -0,0 +1,268 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!-- fix outlook zooming on 120 DPI windows devices -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- So that mobile will display zoomed in -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- enable media queries for windows phone 8 -->
<meta name="format-detection" content="date=no"> <!-- disable auto date linking in iOS 7-9 -->
<meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS 7-9 -->
<title>Three columns with images</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table {
border-spacing: 0;
}
table td {
border-collapse: collapse;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.ReadMsgBody {
width: 100%;
background-color: #ebebeb;
}
table {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
.yshortcuts a {
border-bottom: none !important;
}
@media screen and (max-width: 599px) {
.force-row,
.container {
width: 100% !important;
max-width: 100% !important;
}
}
@media screen and (max-width: 400px) {
.container-padding {
padding-left: 12px !important;
padding-right: 12px !important;
}
}
.ios-footer a {
color: #aaaaaa !important;
text-decoration: underline;
}
@media screen and (max-width: 599px) {
.col {
width: 100% !important;
border-top: 1px solid #eee;
padding-bottom: 0 !important;
}
.cols-wrapper {
padding-top: 18px;
}
.img-wrapper {
float: right;
max-width: 40% !important;
height: auto !important;
margin-left: 12px;
}
.subtitle {
margin-top: 0 !important;
}
}
@media screen and (max-width: 400px) {
.cols-wrapper {
padding-left: 0 !important;
padding-right: 0 !important;
}
.content-wrapper {
padding-left: 12px !important;
padding-right: 12px !important;
}
}
a[href^="x-apple-data-detectors:"],
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;
}
</style>
</head>
<body style="margin:0; padding:0;" bgcolor="#F0F0F0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- 100% background wrapper (grey background) -->
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#F0F0F0">
<tr>
<td align="center" valign="top" bgcolor="#F0F0F0" style="background-color: #F0F0F0;">
<br>
<!-- 600px container (white background) -->
<table border="0" width="600" cellpadding="0" cellspacing="0" class="container" style="width:600px;max-width:600px">
<tr>
<td class="container-padding header" align="left" style="font-family:Helvetica, Arial, sans-serif;font-size:24px;font-weight:bold;padding-bottom:12px;color:#DF4726;padding-left:24px;padding-right:24px">
Antwort v1.0
</td>
</tr>
<tr>
<td class="content" align="left" style="padding-top:12px;padding-bottom:12px;background-color:#ffffff">
<table width="600" border="0" cellpadding="0" cellspacing="0" class="force-row" style="width: 600px;">
<tr>
<td class="content-wrapper" style="padding-left:24px;padding-right:24px">
<br>
<div class="title" style="font-family:Helvetica, Arial, sans-serif;font-size:18px;font-weight:600;color:#374550">Three Columns</div>
</td>
</tr>
<tr>
<td class="cols-wrapper" style="padding-left:12px;padding-right:12px">
<!--[if mso]>
<table border="0" width="576" cellpadding="0" cellspacing="0" style="width: 576px;">
<tr><td width="192" style="width: 192px;" valign="top"><![endif]-->
<table width="192" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row" style="width: 192px;">
<tr>
<td class="col" valign="top" style="padding-left:12px;padding-right:12px;padding-top:18px;padding-bottom:12px">
<table border="0" cellpadding="0" cellspacing="0" class="img-wrapper">
<tr>
<td style="padding-bottom:18px"><img src="https://antwort-assets.s3.amazonaws.com/three-cols-images/ph-192x125@2x.png" border="0" alt="The White Whale" width="168" height="110" hspace="0" vspace="0" style="max-width:100%; " class="image"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="subtitle" style="font-family:Helvetica, Arial, sans-serif;font-size:16px;line-height:22px;font-weight:600;color:#2469A0;padding-bottom:6px">The White Whale</td>
</tr>
</table>
<div class="col-copy" style="font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;text-align:left;color:#333333">I take the good old fashioned ground that the whale is a fish, and call upon holy Jonah to back me. This fundamental thing settled, the next point is, in what internal respect does the whale differ from other fish.</div>
<br>
</td>
</tr>
</table>
<!--[if mso]></td><td width="192" style="width: 192px;" valign="top"><![endif]-->
<table width="192" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row" style="width: 192px;">
<tr>
<td class="col" valign="top" style="padding-left:12px;padding-right:12px;padding-top:18px;padding-bottom:12px">
<table border="0" cellpadding="0" cellspacing="0" class="img-wrapper">
<tr>
<td style="padding-bottom:18px"><img src="https://antwort-assets.s3.amazonaws.com/three-cols-images/ph-192x125@2x.png" border="0" alt="I am Ishmael" width="168" height="110" hspace="0" vspace="0" style="max-width:100%; " class="image"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="subtitle" style="font-family:Helvetica, Arial, sans-serif;font-size:16px;line-height:22px;font-weight:600;color:#2469A0;padding-bottom:6px">I am Ishmael</td>
</tr>
</table>
<div class="col-copy" style="font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;text-align:left;color:#333333">Here upon the very point of starting for the voyage, Captain Peleg and Captain Bildad were going it with a high hand on the quarter-deck, just as if they were to be joint-commanders at sea, as well as to all appearances in port.</div>
<br>
</td>
</tr>
</table>
<!--[if mso]></td><td width="192" style="width: 192px;" valign="top"><![endif]-->
<table width="192" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row" style="width: 192px;">
<tr>
<td class="col" valign="top" style="padding-left:12px;padding-right:12px;padding-top:18px;padding-bottom:12px">
<table border="0" cellpadding="0" cellspacing="0" class="img-wrapper">
<tr>
<td style="padding-bottom:18px"><img src="https://antwort-assets.s3.amazonaws.com/three-cols-images/ph-192x125@2x.png" border="0" alt="The Albatross flew across the ocean" width="168" height="110" hspace="0" vspace="0" style="max-width:100%; " class="image"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="subtitle" style="font-family:Helvetica, Arial, sans-serif;font-size:16px;line-height:22px;font-weight:600;color:#2469A0;padding-bottom:6px">The Albatross flew across the ocean</td>
</tr>
</table>
<div class="col-copy" style="font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;text-align:left;color:#333333">And somehow, at the time, I felt a sympathy and a sorrow for him, but for I don't know what, unless it was the cruel loss of his leg. And yet I also felt a strange awe of him; but that sort of awe, which I cannot at all describe.</div>
<br>
</td>
</tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="container-padding footer-text" align="left" style="font-family:Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;color:#aaaaaa;padding-left:24px;padding-right:24px">
<br><br>
Sample Footer text: © 2015 Acme, Inc.
<br><br>
You are receiving this email because you opted in on our website. Update your <a href="#" style="color:#aaaaaa">email preferences</a> or <a href="#" style="color:#aaaaaa">unsubscribe</a>.
<br><br>
<strong>Acme, Inc.</strong><br>
<span class="ios-footer">
123 Main St.<br>
Springfield, MA 12345<br>
</span>
<a href="http://www.acme-inc.com" style="color:#aaaaaa">www.acme-inc.com</a><br>
<br><br>
</td>
</tr>
</table>
<!--/600px container -->
</td>
</tr>
</table>
<!--/100% background wrapper-->
</body>
</html>

View File

@@ -0,0 +1,97 @@
body {
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table {
border-spacing: 0;
}
table td {
border-collapse: collapse;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.ReadMsgBody {
width: 100%;
background-color: #ebebeb;
}
table {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
.yshortcuts a {
border-bottom: none !important;
}
@media screen and (max-width: 599px) {
.force-row,
.container {
width: 100% !important;
max-width: 100% !important;
}
}
@media screen and (max-width: 400px) {
.container-padding {
padding-left: 12px !important;
padding-right: 12px !important;
}
}
.ios-footer a {
color: #aaaaaa !important;
text-decoration: underline;
}
@media screen and (max-width: 599px) {
.col {
width: 100% !important;
border-top: 1px solid #eee;
padding-bottom: 0 !important;
}
.cols-wrapper {
padding-top: 18px;
}
.img-wrapper {
float: right;
max-width: 40% !important;
height: auto !important;
margin-left: 12px;
}
.subtitle {
margin-top: 0 !important;
}
}
@media screen and (max-width: 400px) {
.cols-wrapper {
padding-left: 0 !important;
padding-right: 0 !important;
}
.content-wrapper {
padding-left: 12px !important;
padding-right: 12px !important;
}
}

View File

@@ -0,0 +1,122 @@
.header,
.title,
.subtitle,
.footer-text {
font-family: Helvetica, Arial, sans-serif;
}
.header {
font-size: 24px;
font-weight: bold;
padding-bottom: 12px;
color: #DF4726;
}
.footer-text {
font-size: 12px;
line-height: 16px;
color: #aaaaaa;
}
.footer-text a {
color: #aaaaaa;
}
.container {
width: 600px;
max-width: 600px;
}
.container-padding {
padding-left: 24px;
padding-right: 24px;
}
.content {
padding-top: 12px;
padding-bottom: 12px;
background-color: #ffffff;
}
code {
background-color: #eee;
padding: 0 4px;
font-family: Menlo, Courier, monospace;
font-size: 12px;
}
hr {
border: 0;
border-bottom: 1px solid #cccccc;
}
.hr {
height: 1px;
border-bottom: 1px solid #cccccc;
}
.title {
font-size: 18px;
font-weight: 600;
color: #374550;
}
.subtitle {
font-size: 16px;
line-height: 22px;
font-weight: 600;
color: #2469A0;
}
.subtitle span {
font-weight: 400;
color: #999999;
}
.body-text {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
text-align: left;
color: #333333;
}
.content-wrapper {
padding-left: 24px;
padding-right: 24px;
}
.col,
.cols-wrapper {
padding-left: 12px;
padding-right: 12px;
}
.col {
padding-top: 18px;
padding-bottom: 12px;
}
.col-copy {
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 20px;
text-align: left;
color: #333333;
}
.img-wrapper td {
padding-bottom: 18px;
}
.subtitle {
padding-bottom: 6px;
}
a[href^="x-apple-data-detectors:"],
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;
}

View File

@@ -0,0 +1,160 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!-- fix outlook zooming on 120 DPI windows devices -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- So that mobile will display zoomed in -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- enable media queries for windows phone 8 -->
<meta name="format-detection" content="date=no"> <!-- disable auto date linking in iOS 7-9 -->
<meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS 7-9 -->
<title>Three columns with images</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="responsive.css">
</head>
<body style="margin:0; padding:0;" bgcolor="#F0F0F0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- 100% background wrapper (grey background) -->
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#F0F0F0">
<tr>
<td align="center" valign="top" bgcolor="#F0F0F0" style="background-color: #F0F0F0;">
<br>
<!-- 600px container (white background) -->
<table border="0" width="600" cellpadding="0" cellspacing="0" class="container">
<tr>
<td class="container-padding header" align="left">
Antwort v1.0
</td>
</tr>
<tr>
<td class="content" align="left">
<table width="600" border="0" cellpadding="0" cellspacing="0" class="force-row" style="width: 600px;">
<tr>
<td class="content-wrapper">
<br>
<div class="title">Three Columns</div>
</td>
</tr>
<tr>
<td class="cols-wrapper">
<!--[if mso]>
<table border="0" width="576" cellpadding="0" cellspacing="0" style="width: 576px;">
<tr><td width="192" style="width: 192px;" valign="top"><![endif]-->
<table width="192" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row" style="width: 192px;">
<tr>
<td class="col" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="img-wrapper">
<tr>
<td><img src="/assets/three-cols-images/ph-192x125@2x.png" border="0" alt="The White Whale" width="168" height="110" hspace="0" vspace="0" style="max-width:100%; " class="image"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="subtitle">The White Whale</td>
</tr>
</table>
<div class="col-copy">I take the good old fashioned ground that the whale is a fish, and call upon holy Jonah to back me. This fundamental thing settled, the next point is, in what internal respect does the whale differ from other fish.</div>
<br>
</td>
</tr>
</table>
<!--[if mso]></td><td width="192" style="width: 192px;" valign="top"><![endif]-->
<table width="192" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row" style="width: 192px;">
<tr>
<td class="col" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="img-wrapper">
<tr>
<td><img src="/assets/three-cols-images/ph-192x125@2x.png" border="0" alt="I am Ishmael" width="168" height="110" hspace="0" vspace="0" style="max-width:100%; " class="image"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="subtitle">I am Ishmael</td>
</tr>
</table>
<div class="col-copy">Here upon the very point of starting for the voyage, Captain Peleg and Captain Bildad were going it with a high hand on the quarter-deck, just as if they were to be joint-commanders at sea, as well as to all appearances in port.</div>
<br>
</td>
</tr>
</table>
<!--[if mso]></td><td width="192" style="width: 192px;" valign="top"><![endif]-->
<table width="192" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row" style="width: 192px;">
<tr>
<td class="col" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="img-wrapper">
<tr>
<td><img src="/assets/three-cols-images/ph-192x125@2x.png" border="0" alt="The Albatross flew across the ocean" width="168" height="110" hspace="0" vspace="0" style="max-width:100%; " class="image"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="subtitle">The Albatross flew across the ocean</td>
</tr>
</table>
<div class="col-copy">And somehow, at the time, I felt a sympathy and a sorrow for him, but for I don't know what, unless it was the cruel loss of his leg. And yet I also felt a strange awe of him; but that sort of awe, which I cannot at all describe.</div>
<br>
</td>
</tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="container-padding footer-text" align="left">
<br><br>
Sample Footer text: &copy; 2015 Acme, Inc.
<br><br>
You are receiving this email because you opted in on our website. Update your <a href="#">email preferences</a> or <a href="#">unsubscribe</a>.
<br><br>
<strong>Acme, Inc.</strong><br>
<span class="ios-footer">
123 Main St.<br>
Springfield, MA 12345<br>
</span>
<a href="http://www.acme-inc.com">www.acme-inc.com</a><br>
<br><br>
</td>
</tr>
</table><!--/600px container -->
</td>
</tr>
</table><!--/100% background wrapper-->
</body>
</html>

View File

@@ -0,0 +1,232 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!-- fix outlook zooming on 120 DPI windows devices -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- So that mobile will display zoomed in -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- enable media queries for windows phone 8 -->
<meta name="format-detection" content="date=no"> <!-- disable auto date linking in iOS 7-9 -->
<meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS 7-9 -->
<title>Two Columns to Rows (Simple)</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table {
border-spacing: 0;
}
table td {
border-collapse: collapse;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.ReadMsgBody {
width: 100%;
background-color: #ebebeb;
}
table {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
.yshortcuts a {
border-bottom: none !important;
}
@media screen and (max-width: 599px) {
.force-row,
.container {
width: 100% !important;
max-width: 100% !important;
}
}
@media screen and (max-width: 400px) {
.container-padding {
padding-left: 12px !important;
padding-right: 12px !important;
}
}
.ios-footer a {
color: #aaaaaa !important;
text-decoration: underline;
}
a[href^="x-apple-data-detectors:"],
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;
}
</style>
</head>
<body style="margin:0; padding:0;" bgcolor="#F0F0F0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- 100% background wrapper (grey background) -->
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#F0F0F0">
<tr>
<td align="center" valign="top" bgcolor="#F0F0F0" style="background-color: #F0F0F0;">
<br>
<!-- 600px container (white background) -->
<table border="0" width="600" cellpadding="0" cellspacing="0" class="container" style="width:600px;max-width:600px">
<tr>
<td class="container-padding header" align="left" style="font-family:Helvetica, Arial, sans-serif;font-size:24px;font-weight:bold;padding-bottom:12px;color:#DF4726;padding-left:24px;padding-right:24px">
Antwort v1.0
</td>
</tr>
<tr>
<td class="container-padding content" align="left" style="padding-left:24px;padding-right:24px;padding-top:12px;padding-bottom:12px;background-color:#ffffff">
<br>
<div class="title" style="font-family:Helvetica, Arial, sans-serif;font-size:18px;font-weight:600;color:#374550">Two Columns (simple)</div>
<br>
<div class="body-text" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;text-align:left;color:#333333">
This is an example of transforming two columns on desktop into rows on mobile.
<br><br>
</div>
<div class="hr" style="height:1px;border-bottom:1px solid #cccccc">&nbsp;</div>
<br>
<!-- example: two columns (simple) -->
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td width="50%" valign="top"><![endif]-->
<table width="264" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row">
<tr>
<td class="col" valign="top" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;text-align:left;color:#333333;width:100%">
<strong>Herman Melville</strong>
<br><br>
It's worse than being in the whirled woods, the last day of the year! Who'd go climbing after chestnuts now? But there they go, all cursing, and here I don't.
<br><br>
</td>
</tr>
</table>
<!--[if mso]></td><td width="50%" valign="top"><![endif]-->
<table width="264" border="0" cellpadding="0" cellspacing="0" align="right" class="force-row">
<tr>
<td class="col" valign="top" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;text-align:left;color:#333333;width:100%">
<strong>I am Ishmael</strong>
<br><br>
White squalls? white whale, shirr! shirr! Here have I heard all their chat just now, and the white whale—shirr! shirr!—but spoken of once! and…
<br><br>
</td>
</tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
<!--/ end example -->
<div class="hr" style="height:1px;border-bottom:1px solid #cccccc;clear: both;">&nbsp;</div>
<br>
<div class="subtitle" style="font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:600;color:#2469A0">
Code Walkthrough
</div>
<div class="body-text" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;text-align:left;color:#333333">
<ol>
<li>
Create a columns container <code style="background-color:#eee;padding:0 4px;font-family:Menlo, Courier, monospace;font-size:12px">&lt;table&gt;</code> just for Outlook using <code style="background-color:#eee;padding:0 4px;font-family:Menlo, Courier, monospace;font-size:12px">if mso</code> conditionals.<br>
The container's <code style="background-color:#eee;padding:0 4px;font-family:Menlo, Courier, monospace;font-size:12px">&lt;td&gt;</code>'s have a width of <code style="background-color:#eee;padding:0 4px;font-family:Menlo, Courier, monospace;font-size:12px">50%.</code>
<br><br>
</li>
<li>
Wrap our columns in a <code style="background-color:#eee;padding:0 4px;font-family:Menlo, Courier, monospace;font-size:12px">&lt;table&gt;</code> with a <strong>fixed width</strong> of <code style="background-color:#eee;padding:0 4px;font-family:Menlo, Courier, monospace;font-size:12px">264px</code>.
<ul>
<li>
264px = (600 - 24*3) / 2 - container width minus margins divided by number of columns
</li>
<li>
First table is aligned left.
</li>
<li>
Second table is aligned right.
</li>
</ul>
<br>
</li>
<li>
Apply <code style="background-color:#eee;padding:0 4px;font-family:Menlo, Courier, monospace;font-size:12px">clear: both;</code> to first element after our wrapper table.
</li>
</ol>
<br>
<em><small>Last updated: 10 October 2014</small></em>
</div>
<br>
</td>
</tr>
<tr>
<td class="container-padding footer-text" align="left" style="font-family:Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;color:#aaaaaa;padding-left:24px;padding-right:24px">
<br><br>
Sample Footer text: © 2015 Acme, Inc.
<br><br>
You are receiving this email because you opted in on our website. Update your <a href="#" style="color:#aaaaaa">email preferences</a> or <a href="#" style="color:#aaaaaa">unsubscribe</a>.
<br><br>
<strong>Acme, Inc.</strong><br>
<span class="ios-footer">
123 Main St.<br>
Springfield, MA 12345<br>
</span>
<a href="http://www.acme-inc.com" style="color:#aaaaaa">www.acme-inc.com</a><br>
<br><br>
</td>
</tr>
</table>
<!--/600px container -->
</td>
</tr>
</table>
<!--/100% background wrapper-->
</body>
</html>

View File

@@ -0,0 +1,63 @@
body {
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table {
border-spacing: 0;
}
table td {
border-collapse: collapse;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.ReadMsgBody {
width: 100%;
background-color: #ebebeb;
}
table {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
.yshortcuts a {
border-bottom: none !important;
}
@media screen and (max-width: 599px) {
.force-row,
.container {
width: 100% !important;
max-width: 100% !important;
}
}
@media screen and (max-width: 400px) {
.container-padding {
padding-left: 12px !important;
padding-right: 12px !important;
}
}
.ios-footer a {
color: #aaaaaa !important;
text-decoration: underline;
}

View File

@@ -0,0 +1,98 @@
.header,
.title,
.subtitle,
.footer-text {
font-family: Helvetica, Arial, sans-serif;
}
.header {
font-size: 24px;
font-weight: bold;
padding-bottom: 12px;
color: #DF4726;
}
.footer-text {
font-size: 12px;
line-height: 16px;
color: #aaaaaa;
}
.footer-text a {
color: #aaaaaa;
}
.container {
width: 600px;
max-width: 600px;
}
.container-padding {
padding-left: 24px;
padding-right: 24px;
}
.content {
padding-top: 12px;
padding-bottom: 12px;
background-color: #ffffff;
}
code {
background-color: #eee;
padding: 0 4px;
font-family: Menlo, Courier, monospace;
font-size: 12px;
}
hr {
border: 0;
border-bottom: 1px solid #cccccc;
}
.hr {
height: 1px;
border-bottom: 1px solid #cccccc;
}
.title {
font-size: 18px;
font-weight: 600;
color: #374550;
}
.subtitle {
font-size: 16px;
font-weight: 600;
color: #2469A0;
}
.subtitle span {
font-weight: 400;
color: #999999;
}
.body-text {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
text-align: left;
color: #333333;
}
.col {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
text-align: left;
color: #333333;
width: 100%;
}
a[href^="x-apple-data-detectors:"],
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;
}

View File

@@ -0,0 +1,156 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!-- fix outlook zooming on 120 DPI windows devices -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- So that mobile will display zoomed in -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- enable media queries for windows phone 8 -->
<meta name="format-detection" content="date=no"> <!-- disable auto date linking in iOS 7-9 -->
<meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS 7-9 -->
<title>Two Columns to Rows (Simple)</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="responsive.css">
</head>
<body style="margin:0; padding:0;" bgcolor="#F0F0F0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- 100% background wrapper (grey background) -->
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#F0F0F0">
<tr>
<td align="center" valign="top" bgcolor="#F0F0F0" style="background-color: #F0F0F0;">
<br>
<!-- 600px container (white background) -->
<table border="0" width="600" cellpadding="0" cellspacing="0" class="container">
<tr>
<td class="container-padding header" align="left">
Antwort v1.0
</td>
</tr>
<tr>
<td class="container-padding content" align="left">
<br>
<div class="title">Two Columns (simple)</div>
<br>
<div class="body-text">
This is an example of transforming two columns on desktop into rows on mobile.
<br><br>
</div>
<div class="hr">&nbsp;</div>
<br>
<!-- example: two columns (simple) -->
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td width="50%" valign="top"><![endif]-->
<table width="264" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row">
<tr>
<td class="col" valign="top">
<strong>Herman Melville</strong>
<br><br>
It's worse than being in the whirled woods, the last day of the year! Who'd go climbing after chestnuts now? But there they go, all cursing, and here I don't.
<br><br>
</td>
</tr>
</table>
<!--[if mso]></td><td width="50%" valign="top"><![endif]-->
<table width="264" border="0" cellpadding="0" cellspacing="0" align="right" class="force-row">
<tr>
<td class="col" valign="top">
<strong>I am Ishmael</strong>
<br><br>
White squalls? white whale, shirr! shirr! Here have I heard all their chat just now, and the white whale—shirr! shirr!—but spoken of once! and&hellip;
<br><br>
</td>
</tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
<!--/ end example -->
<div class="hr" style="clear: both;">&nbsp;</div>
<br>
<div class="subtitle">
Code Walkthrough
</div>
<div class="body-text">
<ol>
<li>
Create a columns container <code>&lt;table&gt;</code> just for Outlook using <code>if mso</code> conditionals.<br>
The container's <code>&lt;td&gt;</code>'s have a width of <code>50%.</code>
<br><br>
</li>
<li>
Wrap our columns in a <code>&lt;table&gt;</code> with a <strong>fixed width</strong> of <code>264px</code>.
<ul>
<li>
264px = (600 - 24*3) / 2 - container width minus margins divided by number of columns
</li>
<li>
First table is aligned left.
</li>
<li>
Second table is aligned right.
</li>
</ul>
<br>
</li>
<li>
Apply <code>clear: both;</code> to first element after our wrapper table.
</li>
</ol>
<br>
<em><small>Last updated: 10 October 2014</small></em>
</div>
<br>
</td>
</tr>
<tr>
<td class="container-padding footer-text" align="left">
<br><br>
Sample Footer text: &copy; 2015 Acme, Inc.
<br><br>
You are receiving this email because you opted in on our website. Update your <a href="#">email preferences</a> or <a href="#">unsubscribe</a>.
<br><br>
<strong>Acme, Inc.</strong><br>
<span class="ios-footer">
123 Main St.<br>
Springfield, MA 12345<br>
</span>
<a href="http://www.acme-inc.com">www.acme-inc.com</a><br>
<br><br>
</td>
</tr>
</table><!--/600px container -->
</td>
</tr>
</table><!--/100% background wrapper-->
</body>
</html>

View File

@@ -0,0 +1,21 @@
<!--
<div id="dashboard-content">
<div id="dashboard-sidenav">
<button id="email-view">Side Nav Button</button>
</div>
<div id="dashboard-content"></div>
</div>
-->
<!-- The sidebar -->
<div class="sidebar">
<a class="active" href="#">Dashboard</a>
<a href="#" class="default_view-btn-webbuilder">Web Builder</a>
<a href="#" class="default_view-btn-email">Email</a>
<a href="#" class="default_view-btn-communication">Communications</a>
<a href="#" id="logout">Logout</a>
</div>
<div class="content">
<div id="dashboard-content"></div>
</div>

View File

@@ -0,0 +1,12 @@
<!-- Page content -->
<!-- Page content -->
<div>
<h1>Welecome</h1>
<button class="default_view-btn-email main-btn">Email</button>
<button class="default_view-btn-webbuilder main-btn">Web Builder</button>
<button class="default_view-btn-communication main-btn">Communication</button>
</div>

View File

@@ -0,0 +1,181 @@
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
<title></title>
<style type="text/css">
@media only screen and (min-width: 520px) {
.u-row {
width: 500px !important;
}
.u-row .u-col {
vertical-align: top;
}
.u-row .u-col-100 {
width: 500px !important;
}
}
@media (max-width: 520px) {
.u-row-container {
max-width: 100% !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
.u-row .u-col {
min-width: 320px !important;
max-width: 100% !important;
display: block !important;
}
.u-row {
width: 100% !important;
}
.u-col {
width: 100% !important;
}
.u-col > div {
margin: 0 auto;
}
}
body {
margin: 0;
padding: 0;
}
table,
tr,
td {
vertical-align: top;
border-collapse: collapse;
}
.ie-container table,
.mso-container table {
table-layout: fixed;
}
* {
line-height: inherit;
}
a[x-apple-data-detectors='true'] {
color: inherit !important;
text-decoration: none !important;
}
table, td { color: #000000; } </style>
</head>
<body class="clean-body u_body" style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;background-color: #e7e7e7;color: #000000">
<!--[if IE]><div class="ie-container"><![endif]-->
<!--[if mso]><div class="mso-container"><![endif]-->
<table style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;min-width: 320px;Margin: 0 auto;background-color: #e7e7e7;width:100%" cellpadding="0" cellspacing="0">
<tbody>
<tr style="vertical-align: top">
<td style="word-break: break-word;border-collapse: collapse !important;vertical-align: top">
<!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center" style="background-color: #e7e7e7;"><![endif]-->
<div class="u-row-container" style="padding: 0px;background-color: transparent">
<div class="u-row" style="Margin: 0 auto;min-width: 320px;max-width: 500px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;">
<div style="border-collapse: collapse;display: table;width: 100%;height: 100%;background-color: transparent;">
<!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px;background-color: transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:500px;"><tr style="background-color: transparent;"><![endif]-->
<!--[if (mso)|(IE)]><td align="center" width="500" style="width: 500px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
<div class="u-col u-col-100" style="max-width: 320px;min-width: 500px;display: table-cell;vertical-align: top;">
<div style="height: 100%;width: 100% !important;">
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing: border-box; height: 100%; padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"><!--<![endif]-->
<table style="font-family:arial,helvetica,sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
<div>
<strong>Email Setup</strong>
</div>
</td>
</tr>
</tbody>
</table>
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td><![endif]-->
<!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
</div>
</div>
</div>
<div class="u-row-container" style="padding: 0px;background-color: transparent">
<div class="u-row" style="Margin: 0 auto;min-width: 320px;max-width: 500px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;">
<div style="border-collapse: collapse;display: table;width: 100%;height: 100%;background-color: transparent;">
<!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px;background-color: transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:500px;"><tr style="background-color: transparent;"><![endif]-->
<!--[if (mso)|(IE)]><td align="center" width="500" style="width: 500px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->
<div class="u-col u-col-100" style="max-width: 320px;min-width: 500px;display: table-cell;vertical-align: top;">
<div style="height: 100%;width: 100% !important;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;">
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing: border-box; height: 100%; padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;"><!--<![endif]-->
<table style="font-family:arial,helvetica,sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding-right: 0px;padding-left: 0px;" align="center">
<p>You have been sent an invite to create a new email account, to finish setting up your email account click on the link below.</p>
<a href="{url}">Setup email account</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td><![endif]-->
<!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
<!--[if mso]></div><![endif]-->
<!--[if IE]></div><![endif]-->
</body>
</html>

View File

@@ -0,0 +1,50 @@
<div class="bg-secondary login-template-3" style="height: 100vh;">
<section class=" gradient-custom">
<div class="container">
<div class="row d-flex justify-content-center align-items-center">
<div class="col-12 col-md-8 col-lg-6 col-xl-5">
<div class=" bg-secondary text-white" style="border-radius: 1rem;">
<div class=" p-4 text-center">
<div class="mb-md-5 mt-md-4 pb-5">
<h2 class="fw-bold mb-2 text-uppercase">Login To Administrator Dashboard</h2>
<p class="text-white-50 mb-5" id="login-status-text">Please enter your login and password!</p>
<div class="form-outline form-white mb-4">
<input type="text" id="login-username" class="form-control form-control-lg" />
<label class="form-label" for="login-username">Username</label>
</div>
<div class="form-outline form-white mb-4">
<input type="password" id="login-password" class="form-control form-control-lg" />
<label class="form-label" for="login-password">Password</label>
</div>
<!-- <p class="small mb-5 pb-lg-2"><a class="text-white-50" href="#!">Forgot password?</a></p> -->
<button class="btn btn-outline-light btn-lg px-5" id="login-submit" type="submit">Login</button>
<div class="d-flex justify-content-center text-center mt-4 pt-1">
<a href="#!" class="text-white"><i class="fab fa-facebook-f fa-lg"></i></a>
<a href="#!" class="text-white"><i class="fab fa-twitter fa-lg mx-4 px-2"></i></a>
<a href="#!" class="text-white"><i class="fab fa-google fa-lg"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>

View File

@@ -0,0 +1,70 @@
<div class="page-header">
<h1>Domain Dashboard</h1>
<small><a href="#">Home</a> / Dashboard</small>
</div>
<div class="page-content">
<div class="analytics">
<div class="card">
<div class="card-head">
<h2>Manage Website</h2>
<span class="las la-server"></span>
</div>
<div>
<p>
Manage deploy your domain website.
</p>
</div>
<div class="card-progress">
<small>
<button style="margin-top: 25px; margin-bottom: 5px;" class="button-30" role="button">Enter</button>
</small>
<div class="card-indicator">
<div class="indicator two" style="width: 100%"></div>
</div>
</div>
</div>
<div class="card">
<div class="card-head" style="min-height: 25px;">
<h2>Manage Email</h2>
<span class="las la-envelope"></span>
</div>
<div>
<p>
Manage your email.
</p>
</div>
<div class="card-progress">
<small>
<button style="margin-top: 25px; margin-bottom: 5px;" class="button-30" role="button">Enter</button>
</small>
<div class="card-indicator">
<div class="indicator two" style="width: 100%"></div>
</div>
</div>
</div>
<div class="card">
<div class="card-head" style="min-height: 25px;">
<h2>Manage Communications</h2>
<span class="las la-user-friends"></span>
</div>
<div>
<p>
Manage communications.
</p>
</div>
<div class="card-progress">
<small>
<button style="margin-top: 25px; margin-bottom: 5px;" class="button-30" role="button">Enter</button>
</small>
<div class="card-indicator">
<div class="indicator two" style="width: 100%"></div>
</div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,101 @@
<input type="checkbox" id="menu-toggle">
<div class="mysidebar">
<div class="side-header">
<h3>C<span>radle2career</span></h3>
</div>
<div class="side-content">
<!-- <div class="profile">
<div class="profile-img bg-img" style="background-image: url(img/3.jpeg)"></div>
<h4>David Green</h4>
<small>Art Director</small>
</div> -->
<div class="side-menu">
<ul>
<li>
<a href="" id="main-link-dashboard" class="active">
<span class="las la-home"></span>
<small>Dashboard</small>
</a>
</li>
<li>
<a href="" id="main-link-website">
<span class="las la-shopping-cart"></span>
<small>Website</small>
</a>
</li>
<li>
<a href="" id="main-link-email">
<span class="las la-envelope"></span>
<small>Email</small>
</a>
</li>
<li>
<a href="" id="main-link-connect">
<span class="las la-user-alt"></span>
<small>Connect</small>
</a>
</li>
<li>
<a href="" id="main-link-settings">
<span class="las la-clipboard-list"></span>
<small>Settings</small>
</a>
</li>
<!-- <li>
<a href="" id="main-link-tasks">
<span class="las la-tasks"></span>
<small>Tasks</small>
</a>
</li> -->
</ul>
</div>
</div>
</div>
<div class="main-content">
<header>
<div class="header-content">
<label for="menu-toggle">
<span class="las la-bars"></span>
</label>
<div class="header-menu">
<!-- <label for="">
<span class="las la-search"></span>
</label> -->
<a href="#" id="signout">
<div class="notify-icon">
<span class="las la-envelope"></span>
<span class="notify">4</span>
</div>
</a>
<a href="#" id="signout">
<div class="notify-icon">
<span class="las la-bell"></span>
<span class="notify">3</span>
</div>
</a>
<div class="user">
<!-- <div class="bg-img" style="background-image: url(img/1.jpeg)"></div> -->
<div class="bg-img" style=""></div>
<span class="las la-power-off"></span>
<a href="#" id="signout"><span>Logout</span></a>
</div>
</div>
</div>
</header>
<main id="dashboard-main-content-section"></main>
</div>

View File

@@ -0,0 +1,428 @@
<div id="viewport">
<!-- Sidebar -->
<div id="sidebar">
<header>
<a href="#">Dashboard</a>
</header>
<ul class="nav">
<li style="width: 100%;">
<a href="#">
<i class="zmdi zmdi-view-dashboard"></i> Email
</a>
</li>
<li style="width: 100%;">
<a href="#">
<i class="zmdi zmdi-link"></i> Webbuilder
</a>
</li>
<li style="width: 100%;">
<a href="#">
<i class="zmdi zmdi-widgets"></i> Communications
</a>
</li>
<li style="width: 100%;">
<a href="#">
<i class="zmdi zmdi-calendar"></i> Logout
</a>
</li>
</ul>
</div>
<!-- Content -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#"><i class="zmdi zmdi-notifications text-danger"></i>
</a>
</li>
<li><a href="#">Welcome</a></li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div id="dashboard-content"></div>
</div>
</div>
</div>
<!--
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:160px;">
<style>
/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent}a:active,a:hover{outline-width:0}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */
html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
.w3-serif{font-family:serif}.w3-sans-serif{font-family:sans-serif}.w3-cursive{font-family:cursive}.w3-monospace{font-family:monospace}
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
hr{border:0;border-top:1px solid #eee;margin:20px 0}
.w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}
.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc}
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center}
.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}
.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
.w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%}
.w3-ul{list-style-type:none;padding:0;margin:0}.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none}
.w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}
.w3-ripple:active{opacity:0.5}.w3-ripple{transition:opacity 0s}
.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%}
.w3-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc}
.w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
.w3-dropdown-hover:hover .w3-dropdown-content{display:block}
.w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:#ccc;color:#000}
.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000}
.w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1}
.w3-check,.w3-radio{width:24px;height:24px;position:relative;top:6px}
.w3-sidebar{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}
.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%}
.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
.w3-main,#main{transition:margin-left .4s}
.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
.w3-bar .w3-button{white-space:normal}
.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}
.w3-responsive{display:block;overflow-x:auto}
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
.w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%}
.w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%}
.w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%}
@media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}
.w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%}
.w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}}
@media (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%}
.w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8{width:66.66666%}
.w3-col.l9{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}}
.w3-rest{overflow:hidden}.w3-stretch{margin-left:-16px;margin-right:-16px}
.w3-content,.w3-auto{margin-left:auto;margin-right:auto}.w3-content{max-width:980px}.w3-auto{max-width:1140px}
.w3-cell-row{display:table;width:100%}.w3-cell{display:table-cell}
.w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}.w3-cell-bottom{vertical-align:bottom}
.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}
@media (max-width:1205px){.w3-auto{max-width:95%}}
@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}
.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}
.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}.w3-auto{max-width:100%}}
.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
.w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}
.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
.w3-display-position{position:absolute}
.w3-circle{border-radius:50%}
.w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
.w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
.w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
.w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
.w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
.w3-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}
.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
.w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75}
.w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)}
.w3-greyscale,.w3-grayscale{filter:grayscale(75%)}.w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)}
.w3-sepia{filter:sepia(75%)}.w3-sepia-max,.w3-hover-sepia:hover{filter:sepia(100%)}.w3-sepia-min{filter:sepia(50%)}
.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important}
.w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}
.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}.w3-justify{text-align:justify!important}.w3-center{text-align:center!important}
.w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important}
.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}
.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}
.w3-topbar{border-top:6px solid #ccc!important}.w3-bottombar{border-bottom:6px solid #ccc!important}
.w3-leftbar{border-left:6px solid #ccc!important}.w3-rightbar{border-right:6px solid #ccc!important}
.w3-section,.w3-code{margin-top:16px!important;margin-bottom:16px!important}
.w3-margin{margin:16px!important}.w3-margin-top{margin-top:16px!important}.w3-margin-bottom{margin-bottom:16px!important}
.w3-margin-left{margin-left:16px!important}.w3-margin-right{margin-right:16px!important}
.w3-padding-small{padding:4px 8px!important}.w3-padding{padding:8px 16px!important}.w3-padding-large{padding:12px 24px!important}
.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}.w3-padding-24{padding-top:24px!important;padding-bottom:24px!important}
.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important}.w3-padding-48{padding-top:48px!important;padding-bottom:48px!important}
.w3-padding-64{padding-top:64px!important;padding-bottom:64px!important}
.w3-padding-top-64{padding-top:64px!important}.w3-padding-top-48{padding-top:48px!important}
.w3-padding-top-32{padding-top:32px!important}.w3-padding-top-24{padding-top:24px!important}
.w3-left{float:left!important}.w3-right{float:right!important}
.w3-button:hover{color:#000!important;background-color:#ccc!important}
.w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
.w3-hover-none:hover{box-shadow:none!important}
/* Colors */
.w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
.w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
.w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
.w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
.w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important}
.w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
.w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
.w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
.w3-light-green,.w3-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
.w3-indigo,.w3-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
.w3-khaki,.w3-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
.w3-lime,.w3-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
.w3-orange,.w3-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
.w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
.w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
.w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
.w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important}
.w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
.w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important}
.w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}
.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
.w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
.w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
.w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
.w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
.w3-text-amber,.w3-hover-text-amber:hover{color:#ffc107!important}
.w3-text-aqua,.w3-hover-text-aqua:hover{color:#00ffff!important}
.w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3!important}
.w3-text-light-blue,.w3-hover-text-light-blue:hover{color:#87CEEB!important}
.w3-text-brown,.w3-hover-text-brown:hover{color:#795548!important}
.w3-text-cyan,.w3-hover-text-cyan:hover{color:#00bcd4!important}
.w3-text-blue-grey,.w3-hover-text-blue-grey:hover,.w3-text-blue-gray,.w3-hover-text-blue-gray:hover{color:#607d8b!important}
.w3-text-green,.w3-hover-text-green:hover{color:#4CAF50!important}
.w3-text-light-green,.w3-hover-text-light-green:hover{color:#8bc34a!important}
.w3-text-indigo,.w3-hover-text-indigo:hover{color:#3f51b5!important}
.w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50!important}
.w3-text-lime,.w3-hover-text-lime:hover{color:#cddc39!important}
.w3-text-orange,.w3-hover-text-orange:hover{color:#ff9800!important}
.w3-text-deep-orange,.w3-hover-text-deep-orange:hover{color:#ff5722!important}
.w3-text-pink,.w3-hover-text-pink:hover{color:#e91e63!important}
.w3-text-purple,.w3-hover-text-purple:hover{color:#9c27b0!important}
.w3-text-deep-purple,.w3-hover-text-deep-purple:hover{color:#673ab7!important}
.w3-text-red,.w3-hover-text-red:hover{color:#f44336!important}
.w3-text-sand,.w3-hover-text-sand:hover{color:#fdf5e6!important}
.w3-text-teal,.w3-hover-text-teal:hover{color:#009688!important}
.w3-text-yellow,.w3-hover-text-yellow:hover{color:#d2be0e!important}
.w3-text-white,.w3-hover-text-white:hover{color:#fff!important}
.w3-text-black,.w3-hover-text-black:hover{color:#000!important}
.w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{color:#757575!important}
.w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gray,.w3-hover-text-light-gray:hover{color:#f1f1f1!important}
.w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover{color:#3a3a3a!important}
.w3-border-amber,.w3-hover-border-amber:hover{border-color:#ffc107!important}
.w3-border-aqua,.w3-hover-border-aqua:hover{border-color:#00ffff!important}
.w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3!important}
.w3-border-light-blue,.w3-hover-border-light-blue:hover{border-color:#87CEEB!important}
.w3-border-brown,.w3-hover-border-brown:hover{border-color:#795548!important}
.w3-border-cyan,.w3-hover-border-cyan:hover{border-color:#00bcd4!important}
.w3-border-blue-grey,.w3-hover-border-blue-grey:hover,.w3-border-blue-gray,.w3-hover-border-blue-gray:hover{border-color:#607d8b!important}
.w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50!important}
.w3-border-light-green,.w3-hover-border-light-green:hover{border-color:#8bc34a!important}
.w3-border-indigo,.w3-hover-border-indigo:hover{border-color:#3f51b5!important}
.w3-border-khaki,.w3-hover-border-khaki:hover{border-color:#f0e68c!important}
.w3-border-lime,.w3-hover-border-lime:hover{border-color:#cddc39!important}
.w3-border-orange,.w3-hover-border-orange:hover{border-color:#ff9800!important}
.w3-border-deep-orange,.w3-hover-border-deep-orange:hover{border-color:#ff5722!important}
.w3-border-pink,.w3-hover-border-pink:hover{border-color:#e91e63!important}
.w3-border-purple,.w3-hover-border-purple:hover{border-color:#9c27b0!important}
.w3-border-deep-purple,.w3-hover-border-deep-purple:hover{border-color:#673ab7!important}
.w3-border-red,.w3-hover-border-red:hover{border-color:#f44336!important}
.w3-border-sand,.w3-hover-border-sand:hover{border-color:#fdf5e6!important}
.w3-border-teal,.w3-hover-border-teal:hover{border-color:#009688!important}
.w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b!important}
.w3-border-white,.w3-hover-border-white:hover{border-color:#fff!important}
.w3-border-black,.w3-hover-border-black:hover{border-color:#000!important}
.w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#9e9e9e!important}
.w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1!important}
.w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161!important}
.w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important}
.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}
</style>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<button class="w3-button w3-block w3-left-align" onclick="myAccFunc()">
Accordion <i class="fa fa-caret-down"></i>
</button>
<div id="demoAcc" class="w3-hide w3-white w3-card">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#" class="w3-bar-item w3-button">Link</a>
</div>
<div class="w3-dropdown-click">
<button class="w3-button" onclick="myDropFunc()">
Dropdown <i class="fa fa-caret-down"></i>
</button>
<div id="demoDrop" class="w3-dropdown-content w3-bar-block w3-white w3-card">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#" class="w3-bar-item w3-button">Link</a>
</div>
</div>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
<div class="w3-container" style="margin-left:160px; height: 1200px;">
<h2>Sidebar Accordion</h2>
<p>In this example, we have added an accordion and a dropdown menu inside the side navigation.</p>
<p>Click on both to understand how they differ from each other. The accordion will push down the content, while the dropdown lays over the content.</p>
</div>
<script>
function myAccFunc() {
var x = document.getElementById("demoAcc");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-green";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-green", "");
}
}
function myDropFunc() {
var x = document.getElementById("demoDrop");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-green";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-green", "");
}
}
</script> -->
<!-- <div class="layout has-sidebar">
<aside id="sidebar" class="sidebar">
Sidebar
</aside>
<div class="layout">
<header class="header">Header</header>
<main class="content">
<div>
<a href="#" class="btn" id="btn-collapse">Collapse</a>
</div>
<div class="sidebar-toggler break-point-md">
<a href="#" class="btn" id="btn-toggle">Toggle</a>
</div>
<div>
<a href="#" class="btn" id="btn-rtl">RTL</a>
</div>
</main>
<div id="overlay" class="overlay"></div>
<footer class="footer">Footer</footer>
</div>
</div> -->
<!-- <div id="layout-container" class="layout has-sidebar">
<div id="other-sidebar">
<aside id="sidebar" class="sidebar break-point-md">
Sidebar
<a class="active" href="#">Dashboard</a>
<a href="#" class="default_view-btn-webbuilder">Web Builder</a>
<a href="#" class="default_view-btn-email">Email</a>
<a href="#" class="default_view-btn-communication">Communications</a>
<a href="#" id="logout">Logout</a>
</aside>
</div>
<div id="overlay" class="overlay"></div>
<div class="layout">
<header class="header">
Header
</header>
<main class="content">
<div class="main-content">
<div style="">
<div>
<a href="#" class="btn" id="btn-collapse">Collapse</a>
</div>
<div class="sidebar-toggler break-point-md">
<a href="#" class="btn" id="btn-toggle">Toggle</a>
</div>
<div>
<a href="#" class="btn" id="btn-rtl">RTL</a>
</div>
<div class="dashboard-content"></div>
<div class="dashboard-content"></div>
<div class="dashboard-content"></div>
</div>
</div>
<footer class="footer">
Footer
</footer>
</main>
</div>
</div> -->

View File

@@ -0,0 +1,174 @@
<!-- one -->
<div class="container-fluid">
<div class="row row d-flex flex-row-reverse mb-3">
<div class="col-lg-1 col-12">
<a href="#" id="sponsorship_go_back" class="btn btn-outline-dark">Back</a>
</div>
</div>
<div class="row mb-4 p-3 bg-opacity-10 border border-info rounded-end">
<div class="col-lg-12 col-12">
<div class="mb-3">
<div id="sponsorship_settings_editor_client_holder"></div>
</div>
<button id="update_client_schema_sponsorship_json" class="btn mt-4">Submit</button>
</div>
</div>
<div class="row mt-5 p-3 bg-opacity-10 border border-info rounded-end" style="margin-top:10px;">
<div class="row">
<div class="col-lg-12 col-12">
<h3>Advanced Schema Options</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-12">
<div id="sponsorship_settings_editor_holder"></div>
<button id="update_schema_sponsorship_json" class="btn">Submit</button>
</div>
</div>
</div>
</div>
<!-- two -->
<div class="container-xl mb-5">
<div class="row g-2 align-items-center">
<div class="col">
<h2 class="page-title">
<h3>Payments Management Services</h3>
</h2>
</div>
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
<span class="d-none d-sm-inline">
<a id="back_to_init" href="#" class="btn">
Back
</a>
</span>
<a href="#" id="open_create_new_paypal_service" class="btn btn-primary d-none d-sm-inline-block" data-bs-toggle="modal" data-bs-target="#modal_new_paypal_service">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg>
Create new service
</a>
<a href="#" class="btn btn-primary d-sm-none btn-icon" data-bs-toggle="modal" data-bs-target="#modal_new_paypal_service" aria-label="Create new report">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg>
</a>
</div>
</div>
</div>
</div>
<!-- Three -->
<div class="container-fluid">
<h3>Payments</h3>
<div class="row">
<div class="col-12 col-lg-4 mb-3">
<a href="#" id="manage_money_btn" class="card card-link card-link-pop">
<div class="card-body" style="text-align: center;">Money</div>
</a>
</div>
<div class="col-12 col-lg-4 mb-3">
<a href="#" id="manage_payments_btn" class="card card-link card-link-pop">
<div class="card-body" style="text-align: center;">Payments</div>
</a>
</div>
<div class="col-12 col-lg-4 mb-3">
<a href="#" id="manage_payment_processors_btn" class="card card-link card-link-pop">
<div class="card-body" style="text-align: center;">Processors</div>
</a>
</div>
</div>
</div>
<!-- Four -->
<div class="main_container_container" style="">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Overview
</div>
<h2 class="page-title">
Dashboard
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
<span class="d-none d-sm-inline">
<a href="#" class="btn btn-outline-dark log_out_link">
Logout
</a>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl" style="height: 100vh;overflow-y: scroll;">
<div id="content_container"></div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">Domain Console</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">&copy;2024 Appfactory Studio inc.</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>

View File

@@ -0,0 +1,206 @@
<div class="container-fluid">
<a href="#" id="save_email_html_id" class="btn btn-outline-dark py-0">Save</a>
<a href="#" id="back_to_main" class="btn btn-outline-dark py-0">Back</a>
<style>
/* body,
html {
height: 100%;
margin: 0;
} */
.cke_top {
background: #444 !important;
}
.cke_chrome {
border: none !important;
}
.cke_toolgroup {
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
</style>
<div id="gjs" style="height:0px; overflow:hidden">
<mjml>
<mj-head>
<mj-title>${title}</mj-title>
<mj-font name="Roboto" href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500"></mj-font>
<mj-attributes>
<mj-all font-family="Montserrat, Helvetica, Arial, sans-serif"></mj-all>
<mj-text font-weight="400" font-size="16px" color="#000000" line-height="24px"></mj-text>
<mj-section padding="0px"></mj-section>
</mj-attributes>
</mj-head>
<mj-body background-color="#F2F2F2">
<!-- top_header -->
<mj-section padding="10px 0 20px 0">
<mj-column>
<mj-text align="center" color="#9B9B9B" font-size="11px">${top_header}</mj-text>
</mj-column>
</mj-section>
<!-- header -->
<mj-section padding="20px 20px 0 20px" background-color="#FFFFFF">
<mj-column>
<mj-text align="center" font-weight="300" padding="30px 40px 10px 40px" font-size="32px" line-height="40x" color="#5FA91D">${header}</mj-text>
</mj-column>
</mj-section>
<!-- divider -->
<mj-section padding="10px 20px" background-color="#FFFFFF">
<mj-column>
<mj-divider width="30px" border-width="3px" border-color="#9B9B9B"></mj-divider>
</mj-column>
</mj-section>
<mj-section padding="0 20px 20px 20px" background-color="#FFFFFF">
<mj-column width="80%">
<mj-text align="center" padding-top="10px" font-weight="500" padding="0px">${content}</mj-text>
</mj-column>
</mj-section>
<!-- background image -->
<mj-section background-url="${link_background_image}" vertical-align="middle" background-size="cover" background-repeat="no-repeat">
<mj-column width="100%">
<mj-image src="http://nimus.de/share/tpl-card/lineshadow.png" alt="" align="center" border="none" padding="0px"></mj-image>
<mj-text align="center" padding="50px 40px 0 40px" font-weight="300"></mj-text>
<mj-button align="center"
background-color="#5FA91D" color="#FFFFFF" border-radius="2px" href="#" inner-padding="15px 30px" padding-bottom="100px" padding-top="20">${button_link}</mj-button>
</mj-column>
</mj-section>
<!-- spacer image -->
<mj-section padding="50px 0 0 0" background-color="#FFFFFF">
<mj-column>
<mj-image src="http://nimus.de/share/tpl-card/bottom.png" alt="bottom border" align="center" border="none" padding="0px"></mj-image>
</mj-column>
</mj-section>
<!-- footer -->
<mj-section padding="10px 0 20px 0">
<mj-column>
<mj-text align="center" color="#9B9B9B" font-size="11px"><a href="${unsubscribe_link}" style="color: #9B9B9B;">Unsubscribe</a> <br>${footer_second_line}<br> <a href="#" style="color: #9B9B9B; text-decoration:none;">${footer_third_line}</a></mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
<!-- <mjml>
<mj-head>
<mj-font name="Barlow" href="https://fonts.googleapis.com/css?family=Barlow"></mj-font>
<mj-style>
.slogan {
background: #000;
}
</mj-style>
</mj-head>
<mj-body>
<mj-section background-color="#f0f0f0">
<mj-column border="10px solid #F45E43">
<mj-text font-family="Barlow">A first line of text</mj-text>
<mj-spacer height="50px" />
</mj-column>
</mj-section>
<mj-section background-url="http://1.bp.blogspot.com/-TPrfhxbYpDY/Uh3Refzk02I/AAAAAAAALw8/5sUJ0UUGYuw/s1600/New+York+in+The+1960's+-+70's+(2).jpg"
background-size="cover" background-repeat="no-repeat">
<mj-column>
<mj-text css-class="slogan" align="center" color="#fff" font-size="40px" font-family="Helvetica Neue">Slogan here</mj-text>
<mj-button background-color="#F63A4D" href="#">
Promotion
</mj-button>
</mj-column>
</mj-section>
<mj-wrapper background-color="#ffe9f7" padding="10px">
<mj-section background-color="#eaeffa">
<mj-group background-color="#fffadd">
<mj-column>
<mj-text font-style="italic" font-size="20px" font-family="Helvetica Neue" color="#626262">My Awesome Text</mj-text>
<mj-text color="#525252">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper.
Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec
commodo purus. Sed eget nulla elit. Nulla aliquet mollis faucibus.
</mj-text>
<mj-button background-color="#F45E43" href="#">Learn more</mj-button>
</mj-column>
</mj-group>
</mj-section>
</mj-wrapper>
<mj-section background-color="white">
<mj-column>
<mj-image width="200px" src="https://designspell.files.wordpress.com/2012/01/sciolino-paris-bw.jpg" />
</mj-column>
<mj-column>
<mj-text font-style="italic" font-size="20px" font-family="Helvetica Neue" color="#626262">
Find amazing places ...
</mj-text>
<mj-text color="#525252">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper.
Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus.</mj-text>
</mj-column>
</mj-section>
<mj-section>
<mj-column>
<mj-text font-style="italic" font-size="20px" font-family="Helvetica Neue" color="#626262" align="center">
... with real-life images
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#fbfbfb">
<mj-column>
<mj-image width="100px" src="http://191n.mj.am/img/191n/3s/x0l.png" />
</mj-column>
<mj-column>
<mj-image width="100px" src="http://191n.mj.am/img/191n/3s/x01.png" />
</mj-column>
<mj-column>
<mj-image width="100px" src="http://191n.mj.am/img/191n/3s/x0s.png" />
</mj-column>
</mj-section>
<mj-section background-color="#e7e7e7">
<mj-column>
<mj-button href="#">Hello There!</mj-button>
<mj-social font-size="15px" icon-size="30px" mode="horizontal">
<mj-social-element name="facebook" href="https://mjml.io/">
Facebook
</mj-social-element>
<mj-social-element name="google" href="https://mjml.io/">
Google
</mj-social-element>
<mj-social-element name="twitter" href="https://mjml.io/">
Twitter
</mj-social-element>
</mj-social>
</mj-column>
</mj-section>
</mj-body>
</mjml> -->
</div>
</div>

View File

@@ -0,0 +1,163 @@
<div class="container-fluid mt-3">
<div class="row d-flex justify-content-center">
<div class="col-12 col-md-9">
<div class="mb-2 row">
<label class="col-2 col-form-label">From Email</label>
<div class="col">
<select class="form-select" id="delivery_from_email_select" aria-label="Floating label select example"></select>
</div>
</div>
</div>
<div class="col-12 col-md-9">
<div class="mb-2 row">
<label class="col-2 col-form-label">Email Subject</label>
<div class="col">
<input type="text" class="form-control" id="email_subject" placeholder="">
</div>
</div>
</div>
<div class="col-12 col-md-9 mb-4">
<div class="mb-2 row">
<label class="col-2 col-form-label">Template</label>
<div class="col">
<input type="text" value="Default-Template" class="form-control" id="template_input_id" placeholder="" disabled>
</div>
</div>
</div>
</div>
<div class="row d-flex justify-content-center mb-3">
<div class="col-12 col-md-9">
<div class="row">
<div class="col-12 col-md-2 mb-3">
<button id="exit_to_main_container" class="btn btn-outline-dark w-100">Exit</button>
</div>
<div class="col-12 col-md-2 mb-3">
<button id="save_email_content_id" class="btn btn-outline-dark w-100 position-relative">
Save
<span style="display: none;" id="save_badge_indicator_id" class="badge bg-blue text-blue-fg badge-notification badge-pill">1</span>
</button>
</div>
<div class="col-12 col-md-2 mb-3">
<button id="select_email_template_id" class="btn btn-outline-dark w-100">Template</button>
</div>
<div class="col-12 col-md-2 mb-3">
<button id="custom_builder_btn_id" class="btn btn-outline-dark w-100">Builder</button>
</div>
<div class="col-12 col-md-2 mb-3">
<button id="variables_btn_id" class="btn btn-outline-dark w-100">Variables</button>
</div>
<div class="col-12 col-md-2 mb-3">
<button id="test_send_email_id" class="btn btn-outline-dark w-100">Test</button>
</div>
</div>
</div>
</div>
<div class="row d-flex justify-content-center mb-3">
<div class="col-9">
<div class="input-group">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Variables
</button>
<div id="variable_dropdown_list_id" class="dropdown-menu" style="">
<!-- <a id="variable_content_id" class="dropdown-item" href="#">
content
</a> -->
</div>
<input type="text" id="variable_input_id" value="" class="form-control disabled" aria-label="Text input with dropdown button" disabled>
</div>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-9">
<div class="mb-3">
<div class="form-label">Output Format</div>
<div>
<label class="form-check form-check-inline">
<input value="html" id="radios_output_html_id" class="form-check-input" type="radio" name="radios_output_type">
<span class="form-check-label">HTML</span>
</label>
<label class="form-check form-check-inline">
<input value="plain" id="radios_output_plaintext_id" class="form-check-input" type="radio" name="radios_output_type">
<span class="form-check-label">Plain Text</span>
</label>
</div>
</div>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-12 col-md-9 mb-5">
<div id="html_container" style="display: block;">
<div id="mycontainer1"></div>
</div>
<!-- <div id="plaintext_container" style="display: none;">
<input id="plain_text_variable_input_id" type="text" style="width: 100%;">
</div> -->
</div>
<div class="mb-5"></div>
</div>
<!-- modal create form -->
<div class="modal modal-blur fade" id="modal_create_variable" tabindex="-1" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Email Variables</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col">
<label class="form-label">Variable Name</label>
<input id="new_variable_name_input" type="text" class="form-control">
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header m-0 p-2">
<h3 class="card-title">Set Variables</h3>
</div>
<div id="modal_variable_list_id" class="list-group list-group-flush overflow-auto" style="max-height: 15rem"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Cancel</button>
<button type="button" id="modal_create_new_variable_btn" class="btn btn-primary">Create</button>
</div>
</div>
</div>
</div>
<!-- modal test send email -->
<div class="modal modal-blur fade" id="modal_test_send_email" tabindex="-1" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Test Send Email</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col">
<label class="form-label">Receiving Email</label>
<input id="modal_email_to_address_name_input" type="text" class="form-control">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Cancel</button>
<button type="button" id="modal_send_test_email_btn_id" class="btn btn-primary">Send</button>
</div>
</div>
</div>
</div>
</div><!-- container-fluid -->

View File

@@ -0,0 +1,9 @@
<div class="container-fluid">
<a href="#" id="back_to_main" class="btn btn-outline-dark w-100">Back</a>
<div class="row">
<div class="col-12">
<div id="email_templates"></div>
</div>
</div>
</div>

View File

@@ -0,0 +1,135 @@
<div class="container-fluid">
<a href="#" id="save_email_html_id" class="btn btn-outline-dark py-0">Save</a>
<a href="#" id="reset_template" class="btn btn-outline-dark py-0">Reset</a>
<a href="#" id="back_to_main" class="btn btn-outline-dark py-0">Back</a>
<style>
/* body,
html {
height: 100%;
margin: 0;
} */
.cke_top {
background: #444 !important;
}
.cke_chrome {
border: none !important;
}
.cke_toolgroup {
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
</style>
<div id="gjs" style="height:0px; overflow:hidden">
<mjml>
<mj-body background-color="#E1E8ED">
<mj-raw>
<!-- Header -->
</mj-raw>
<mj-section padding-bottom="0px" background-color="white">
<mj-column width="100%">
<mj-image src="https://avatars0.githubusercontent.com/u/16115896?v=3&s=200" width="50px"></mj-image>
<mj-divider horizontal-spacing="0" vertical-spacing="0" padding-top="20" padding-bottom="0px" padding-left="0px" padding-right="0px" border-width="1px" border-color="#f8f8f8"></mj-divider>
</mj-column>
</mj-section>
<mj-section padding-bottom="0px" background-color="#fcfcfc">
<mj-column width="100%">
<mj-text align="center" font-size="20px" color="grey" font-family="Helvetica Neue" font-weight="200">Here is what you've missed</mj-text>
<mj-divider horizontal-spacing="0" vertical-spacing="0" padding-top="20" padding-bottom="0px" padding-left="0px" padding-right="0px" border-width="1px" border-color="#f8f8f8"></mj-divider>
</mj-column>
</mj-section>
<mj-raw>
<!-- Article -->
</mj-raw>
<mj-section background-color="white">
<mj-column width="130px">
<mj-image src="https://mjml.io/assets/img/responsive.png" width="100px"></mj-image>
</mj-column>
<mj-column width="350px">
<mj-text align="left" font-size="20px" color="grey">Sed ut perspiciatis</mj-text>
<mj-text align="left" color="grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</mj-text>
</mj-column>
</mj-section>
<mj-raw>
<!-- Editor -->
</mj-raw>
<mj-section padding-bottom="0px" background-color="#f3f3f3">
<mj-column>
<mj-text align="center" font-size="20px" color="rgb(165, 176, 184)">Explore our new features</mj-text>
</mj-column>
</mj-section>
<mj-section padding-top="0" background-color="#f3f3f3">
<mj-column width="100%">
<mj-image src="https://cloud.githubusercontent.com/assets/6558790/12450760/ee034178-bf85-11e5-9dda-98d0c8f9f8d6.png"></mj-image>
</mj-column>
</mj-section>
<mj-section background-color="#fcfcfc" padding-top="20px">
<mj-column width="130px">
<mj-image src="https://mjml.io/assets/img/easy-and-quick.png" width="100px"></mj-image>
</mj-column>
<mj-column width="350px">
<mj-text align="left" font-size="20px" color="grey">Right on time!</mj-text>
<mj-text align="left" color="grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#f3f3f3">
<mj-column>
<mj-text align="center">Stay in touch!</mj-text>
<mj-social mode="horizontal">
<mj-social-element name="twitter"></mj-social-element>
<mj-social-element name="facebook"></mj-social-element>
</mj-social>
</mj-column>
</mj-section>
</mj-body>
</mjml>
</div>
<div class="modal modal-blur fade" id="modal_reset_editor" tabindex="-1" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-status bg-danger"></div>
<div class="modal-body text-center py-4">
<!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mb-2 text-danger icon-lg"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 9v4"></path><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"></path><path d="M12 16h.01"></path></svg>
<h3>Reset Editor</h3>
<div class="text-secondary">Are you sure you want to reset the editor. This will set it to its initial state. You may want to clear the editor instead, this can not be undone!</div>
</div>
<div class="modal-footer">
<div class="w-100">
<div class="row">
<div class="col">
<a href="#" class="btn w-100" data-bs-dismiss="modal">
Cancel
</a>
</div>
<div class="col">
<a id="modal_reset_editor_btn_id" href="#" class="btn btn-danger w-100">
Reset
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,55 @@
<div class="container-fluid p-1 p-md-5">
<div class="row mb-2 mt-3">
<div class="col">
<h3>Email Groups</h3>
</div>
</div>
<div class="row mb-5">
<div class="col-12 col-md-6 mb-3">
<button id="emailbuilder_cat_exit_btn_id" class="btn btn-outline-dark w-100">Exit</button>
</div>
<div class="col-12 col-md-6">
<button id="emailbuilder_cat_create_btn_id" class="btn btn-outline-dark w-100">Create</button>
</div>
</div>
<div class="row">
<div class="col">
<div id="emailbuilder_cat_list_container"></div>
</div>
</div>
<!-- modal create -->
<div class="modal modal-blur fade" id="modal_cat_create_email_template" tabindex="-1" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Create Email Group</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col">
<label class="form-label">Group ID</label>
<input id="new_cat_template_name_input" type="text" class="form-control">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Cancel</button>
<button type="button" id="modal_cat_create_email_template_btn" class="btn btn-primary">Create</button>
</div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,221 @@
<div class="container-fluid mt-3">
<div class="row d-flex justify-content-center">
<div class="col-12 col-md-9">
<div class="mb-3">
<label class="form-check form-switch">
<input id="emailbuilder_active_checkbox_id" class="form-check-input" type="checkbox">
<span class="form-check-label">Active</span>
</label>
</div>
</div>
<div class="col-12 col-md-9">
<div class="mb-2 row">
<label class="col-2 col-form-label">Name</label>
<div class="col">
<input type="text" class="form-control" id="emailbuilder_name_input_id" placeholder="">
</div>
</div>
<div class="mb-2 row">
<label class="col-2 col-form-label">From Email</label>
<div class="col">
<select class="form-select" id="delivery_from_email_select" aria-label="Floating label select example"></select>
</div>
</div>
</div>
<div class="col-12 col-md-9">
<div class="mb-2 row">
<label class="col-2 col-form-label">Email Subject</label>
<div class="col">
<input type="text" class="form-control" id="email_subject" placeholder="">
</div>
</div>
</div>
<div class="col-12 col-md-9">
<div class="mb-3">
<!-- <div class="form-label">Alert</div> -->
<label class="form-check form-switch">
<input id="alert_email_checkbox_id" class="form-check-input" type="checkbox">
<span class="form-check-label">This email will ONLY be sent to the given addresses. (multiple addresses seperated by comma)</span>
</label>
<div class="col">
<input id="alert_email_input_id" type="text" class="form-control" id="email_alert_address">
</div>
</div>
</div>
<!-- <div class="col-12 col-md-9 mb-4">
<div class="mb-2 row">
<label class="col-2 col-form-label">Template</label>
<div class="col">
<input type="text" value="Default-Template" class="form-control" id="template_input_id" placeholder="" disabled>
</div>
</div>
</div> -->
</div>
<div class="row d-flex justify-content-center mb-3">
<div class="col-12 col-md-9">
<div class="row">
<div class="col-12 col-md-2 mb-3">
<button id="exit_to_main_container" class="btn btn-outline-dark w-100">Exit</button>
</div>
<div class="col-12 col-md-2 mb-3">
<button id="save_email_content_id" class="btn btn-outline-dark w-100 position-relative">
Save
<span style="display: none;" id="save_badge_indicator_id" class="badge bg-blue text-blue-fg badge-notification badge-pill">1</span>
</button>
</div>
<div class="col-12 col-md-2 mb-3">
<button id="select_email_template_id" class="btn btn-outline-dark w-100">Template</button>
</div>
<div class="col-12 col-md-2 mb-3">
<button id="custom_builder_btn_id" class="btn btn-outline-dark w-100">Builder</button>
</div>
<div class="col-12 col-md-2 mb-3">
<button id="variables_btn_id" class="btn btn-outline-dark w-100">Variables</button>
</div>
<div class="col-12 col-md-2 mb-3">
<button id="test_send_email_id" class="btn btn-outline-dark w-100">Test</button>
</div>
<div class="col-12 col-md-2 mb-3">
<button id="options_delete_emailbuilder_id" class="btn btn-outline-dark w-100">Delete</button>
</div>
</div>
</div>
</div>
<div class="row d-flex justify-content-center mb-3">
<div class="col-9">
<div class="input-group">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Variables
</button>
<div id="variable_dropdown_list_id" class="dropdown-menu" style="">
<!-- <a id="variable_content_id" class="dropdown-item" href="#">
content
</a> -->
</div>
<input type="text" id="variable_input_id" value="" class="form-control disabled" aria-label="Text input with dropdown button" disabled>
</div>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-9">
<div class="mb-3">
<div class="form-label">Output Format</div>
<div>
<label class="form-check form-check-inline">
<input value="html" id="radios_output_html_id" class="form-check-input" type="radio" name="radios_output_type">
<span class="form-check-label">HTML</span>
</label>
<label class="form-check form-check-inline">
<input value="plain" id="radios_output_plaintext_id" class="form-check-input" type="radio" name="radios_output_type">
<span class="form-check-label">Plain Text</span>
</label>
</div>
</div>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-12 col-md-9 mb-5">
<div id="html_container" style="display: block;">
<div id="mycontainer1"></div>
</div>
<!-- <div id="plaintext_container" style="display: none;">
<input id="plain_text_variable_input_id" type="text" style="width: 100%;">
</div> -->
</div>
<div class="mb-5"></div>
</div>
<!-- modal create form -->
<div class="modal modal-blur fade" id="modal_create_variable" tabindex="-1" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Email Variables</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col">
<label class="form-label">Variable Name</label>
<input id="new_variable_name_input" type="text" class="form-control">
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header m-0 p-2">
<h3 class="card-title">Set Variables</h3>
</div>
<div id="modal_variable_list_id" class="list-group list-group-flush overflow-auto" style="max-height: 15rem"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Cancel</button>
<button type="button" id="modal_create_new_variable_btn" class="btn btn-primary">Create</button>
</div>
</div>
</div>
</div>
<!-- modal test send email -->
<div class="modal modal-blur fade" id="modal_test_send_email" tabindex="-1" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Test Send Email</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col">
<label class="form-label">Receiving Email</label>
<input id="modal_email_to_address_name_input" type="text" class="form-control">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Cancel</button>
<button type="button" id="modal_send_test_email_btn_id" class="btn btn-primary">Send</button>
</div>
</div>
</div>
</div>
<!-- modal conirm delete -->
<div class="modal modal-blur fade" id="modal_delete_emailbuilder" tabindex="-1" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-status bg-danger"></div>
<div class="modal-body text-center py-4">
<!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mb-2 text-danger icon-lg"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 9v4"></path><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"></path><path d="M12 16h.01"></path></svg>
<h3>Are you sure?</h3>
<div class="text-secondary">Do you really want to delete? Cannot be undone.</div>
</div>
<div class="modal-footer">
<div class="w-100">
<div class="row">
<div class="col"><a href="#" class="btn w-100" data-bs-dismiss="modal">
Cancel
</a></div>
<div class="col"><a id="modal_confirm_delete_emailbuilder_id" href="#" class="btn btn-danger w-100">
Delete
</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- container-fluid -->

View File

@@ -0,0 +1,67 @@
<mjml>
<mj-body background-color="#E1E8ED">
<mj-raw>
<!-- Header -->
</mj-raw>
<mj-section padding-bottom="0px" background-color="white">
<mj-column width="100%">
<mj-image src="https://avatars0.githubusercontent.com/u/16115896?v=3&s=200" width="50px"></mj-image>
<mj-divider horizontal-spacing="0" vertical-spacing="0" padding-top="20" padding-bottom="0px" padding-left="0px" padding-right="0px" border-width="1px" border-color="#f8f8f8"></mj-divider>
</mj-column>
</mj-section>
<mj-section padding-bottom="0px" background-color="#fcfcfc">
<mj-column width="100%">
<mj-text align="center" font-size="20px" color="grey" font-family="Helvetica Neue" font-weight="200">Here is what you've missed</mj-text>
<mj-divider horizontal-spacing="0" vertical-spacing="0" padding-top="20" padding-bottom="0px" padding-left="0px" padding-right="0px" border-width="1px" border-color="#f8f8f8"></mj-divider>
</mj-column>
</mj-section>
<mj-raw>
<!-- Article -->
</mj-raw>
<mj-section background-color="white">
<mj-column width="130px">
<mj-image src="https://mjml.io/assets/img/responsive.png" width="100px"></mj-image>
</mj-column>
<mj-column width="350px">
<mj-text align="left" font-size="20px" color="grey">Sed ut perspiciatis</mj-text>
<mj-text align="left" color="grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</mj-text>
</mj-column>
</mj-section>
<mj-raw>
<!-- Editor -->
</mj-raw>
<mj-section padding-bottom="0px" background-color="#f3f3f3">
<mj-column>
<mj-text align="center" font-size="20px" color="rgb(165, 176, 184)">Explore our new features</mj-text>
</mj-column>
</mj-section>
<mj-section padding-top="0" background-color="#f3f3f3">
<mj-column width="100%">
<mj-image src="https://cloud.githubusercontent.com/assets/6558790/12450760/ee034178-bf85-11e5-9dda-98d0c8f9f8d6.png"></mj-image>
</mj-column>
</mj-section>
<mj-section background-color="#fcfcfc" padding-top="20px">
<mj-column width="130px">
<mj-image src="https://mjml.io/assets/img/easy-and-quick.png" width="100px"></mj-image>
</mj-column>
<mj-column width="350px">
<mj-text align="left" font-size="20px" color="grey">Right on time!</mj-text>
<mj-text align="left" color="grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#f3f3f3">
<mj-column>
<mj-text align="center">Stay in touch!</mj-text>
<mj-social mode="horizontal">
<mj-social-element name="twitter"></mj-social-element>
<mj-social-element name="facebook"></mj-social-element>
</mj-social>
</mj-column>
</mj-section>
</mj-body>
</mjml>

View File

@@ -0,0 +1,77 @@
<div class="container-fluid p-1 p-md-5">
<div class="row mt-3">
<div class="col">
<h3>Email Group</h3>
</div>
</div>
<div class="row mb-3">
<div class="col-12 col-md-3">
<p id="category_name_header_id" class="text-body-secondary"></p>
</div>
<div class="col-12 col-md-9">
<p id="category_reference_num_header_id" class="text-body-secondary"></p>
</div>
</div>
<div class="row mb-1">
<div class="col-12 col-md-6 mb-3">
<button id="emailbuilder_exit_btn_id" class="btn btn-outline-dark w-100">Back</button>
</div>
<div class="col-12 col-md-6">
<button id="emailbuilder_create_btn_id" class="btn btn-outline-dark w-100">Create</button>
</div>
</div>
<div class="row mb-4">
<div class="col-12 col-md-4">
<label class="form-label">Rename Group ID</label>
<div class="row g-2">
<div class="col">
<input id="rename_category_name_input_id" type="text" class="form-control" placeholder="">
</div>
<div class="col-auto">
<a id="rename_category_name_btn_id" href="#" class="btn btn-outline-dark" aria-label="Button">Rename</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div id="emailbuilder_list_container"></div>
</div>
</div>
<!-- modal create -->
<div class="modal modal-blur fade" id="modal_create_email_template" tabindex="-1" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Email Template</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col">
<label class="form-label">Email ID</label>
<input id="new_template_name_input" type="text" class="form-control">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Cancel</button>
<button type="button" id="modal_create_email_template_btn" class="btn btn-primary">Create</button>
</div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,40 @@
<div class="container-fluid">
<a href="#" id="back_to_main" class="btn btn-outline-dark w-25 my-5">Back</a>
<div class="row align-items-start">
<!-- <div class="col-12"> -->
<div id="email_templates"></div>
<!-- </div> -->
</div>
<!-- modal test send email -->
<div class="modal modal-blur fade" id="modal_select_template" tabindex="-1" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Template Select</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col">
<p>Are you sure you want to select this template? This will overwrite existing template and can not be undone.</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Cancel</button>
<button type="button" id="modal_select_template_btn_id" class="btn btn-primary">Select</button>
</div>
</div>
</div>
</div>
</div>

View File

View File

@@ -0,0 +1,148 @@
<div class="main_container_container" style="">
<!-- Page header -->
<div class="page-header">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Module
</div>
<h2 class="page-title">
Email - Appfactory Studio
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto">
<div class="btn-list">
<span class="d-none d-sm-inline">
<a href="#" id="back_to_init" class="btn btn-outline-dark">
Back
</a>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl" style="height: 100vh;overflow-y: scroll;">
<div id="content_container">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="card">
<div class="card-body">
<div class="mb-3">
<label class="form-label required">Email Domain</label>
<input id="email_domain_name_input_id" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label required">Server</label>
<input id="email_server_name_input_id" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label required">Secret</label>
<input id="email_secret_name_input_id" type="text" class="form-control">
</div>
</div>
<!-- Card footer -->
<div class="card-footer text-end">
<div class="d-flex">
<!-- <a href="#" class="btn btn-link">Cancel</a> -->
<button id="save_email_form_id" class="btn btn-primary ms-auto">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">Domain Console</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">&copy;2024 Appfactory Studio inc.</a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- modal -->
<div class="modal modal-blur fade" id="modal_email_update_account" tabindex="-1" role="dialog" aria-modal="true" style="display: none; padding-left: 0px;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal_email_update_account_title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col">
<div class="mb-3">
<div class="form-label">Type</div>
<div>
<label class="form-check form-check-inline">
<input value="1" id="email_type_public_radio_btn" class="form-check-input" type="radio" name="typestatusradio" checked="">
<span class="form-check-label">Public</span>
</label>
<label class="form-check form-check-inline">
<input value="0" id="email_type_private_radio_btn" class="form-check-input" type="radio" name="typestatusradio">
<span class="form-check-label">Private</span>
</label>
</div>
</div>
<div class="my-4">
<div class="row">
<div class="col-12 col-md-3">
<button id="delete_email_account" class="btn btn-danger w-100">Delete</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" id="update_email_account_from_modal" class="btn btn-primary">Update</button>
</div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,151 @@
<div class="main_container_container" style="">
<!-- Page header -->
<div class="page-header">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Module
</div>
<h2 class="page-title">
Email - Integration
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto">
<div class="btn-list">
<span class="">
<!-- <a href="#" class="btn btn-outline-dark log_out_link">
Logout
</a> -->
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl" style="height: 100vh;overflow-y: scroll;">
<div id="content_container">
<div class="border p-3">
<div class="row">
<div class="mb-3">
<div class="form-label">Active Integration</div>
<div id="radios_active_integration_container"></div>
</div>
<div class="mb-3">
<button id="save_email_config_btn_id" class="btn btn-outline-dark w-100">Save</button>
</div>
</div>
</div>
<div class="border p-5">
<div class="row mb-3">
<!-- <div class="col-12 col-md-3">
<button id="afs_btn" class="btn btn-outline-dark w-100">Appfactory Studio</button>
</div> -->
<div class="col-12 col-md-3">
<button id="sendgrid_btn_id" class="btn btn-outline-dark w-100">Configure SendGrid</button>
</div>
<!-- <div class="col-12 col-md-3">
<button id="amazon_btn" class="btn btn-outline-dark w-100">Amazon SES (coming soon)</button>
</div> -->
</div>
<div class="row">
<!-- <div class="col-12 col-md-3">
<button id="mailgun_btn" class="btn btn-outline-dark w-100">Mailgun (coming soon)</button>
</div>
<div class="col-12 col-md-3">
<button id="mailchimp_btn" class="btn btn-outline-dark w-100">Mailchimp (coming soon)</button>
</div> -->
</div>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">Domain Console</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">&copy;2025 Appfactory Studio inc.</a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- modal -->
<div class="modal modal-blur fade" id="modal_email_update_account" tabindex="-1" role="dialog" aria-modal="true" style="display: none; padding-left: 0px;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal_email_update_account_title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col">
<div class="mb-3">
<div class="form-label">Type</div>
<div>
<label class="form-check form-check-inline">
<input value="1" id="email_type_public_radio_btn" class="form-check-input" type="radio" name="typestatusradio" checked="">
<span class="form-check-label">Public</span>
</label>
<label class="form-check form-check-inline">
<input value="0" id="email_type_private_radio_btn" class="form-check-input" type="radio" name="typestatusradio">
<span class="form-check-label">Private</span>
</label>
</div>
</div>
<div class="my-4">
<div class="row">
<div class="col-12 col-md-3">
<button id="delete_email_account" class="btn btn-danger w-100">Delete</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" id="update_email_account_from_modal" class="btn btn-primary">Update</button>
</div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,148 @@
<div class="main_container_container" style="">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Module
</div>
<h2 class="page-title">
Email - SendGrid
</h2>
</div>
<!-- Page title actions -->
<div class="">
<div class="btn-list">
<span class="d-none d-sm-inline">
<a href="#" id="back_to_init" class="btn btn-outline-dark">
Back
</a>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl" style="height: 100vh;overflow-y: scroll;">
<div id="content_container">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="card">
<div class="card-body">
<div class="mb-3">
<label class="form-label required">Email Domain</label>
<input id="email_domain_name_input_id" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label required">Server</label>
<input id="email_server_name_input_id" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label required">Secret</label>
<input id="email_secret_name_input_id" type="text" class="form-control">
</div>
</div>
<!-- Card footer -->
<div class="card-footer text-end">
<div class="d-flex">
<!-- <a href="#" class="btn btn-link">Cancel</a> -->
<button id="save_email_form_id" class="btn btn-primary ms-auto">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">Domain Console</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">&copy;2024 Appfactory Studio inc.</a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- modal -->
<div class="modal modal-blur fade" id="modal_email_update_account" tabindex="-1" role="dialog" aria-modal="true" style="display: none; padding-left: 0px;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal_email_update_account_title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col">
<div class="mb-3">
<div class="form-label">Type</div>
<div>
<label class="form-check form-check-inline">
<input value="1" id="email_type_public_radio_btn" class="form-check-input" type="radio" name="typestatusradio" checked="">
<span class="form-check-label">Public</span>
</label>
<label class="form-check form-check-inline">
<input value="0" id="email_type_private_radio_btn" class="form-check-input" type="radio" name="typestatusradio">
<span class="form-check-label">Private</span>
</label>
</div>
</div>
<div class="my-4">
<div class="row">
<div class="col-12 col-md-3">
<button id="delete_email_account" class="btn btn-danger w-100">Delete</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" id="update_email_account_from_modal" class="btn btn-primary">Update</button>
</div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,385 @@
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>
${title}
</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a { padding:0; }
body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
p { display:block;margin:13px 0; }
</style>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 { width:100% !important; max-width: 100%; }
.mj-column-px-400 { width:400px !important; max-width: 400px; }
}
</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
.moz-text-html .mj-column-px-400 { width:400px !important; max-width: 400px; }
</style>
<style type="text/css">
@media only screen and (max-width:480px) {
table.mj-full-width-mobile { width: 100% !important; }
td.mj-full-width-mobile { width: auto !important; }
}
</style>
<style type="text/css">
</style>
</head>
<body style="word-spacing:normal;">
<div
style=""
>
<!-- Company Header -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"
>
<tbody>
<tr>
<td style="width:100px;">
<img
height="auto" src="https://www15.cradle2careertx.org/assets/c2c_stckd-bg_pos_RGB.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="100"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<p
style="border-top:solid 4px #00B052;font-size:1px;margin:0px auto;width:100%;"
>
</p>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 4px #00B052;font-size:1px;margin:0px auto;width:550px;" role="presentation" width="550px" ><tr><td style="height:0;line-height:0;"> &nbsp;
</td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- Image Header -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><v:rect style="width:600px;" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"><v:fill origin="0, -0.5" position="0, -0.5" src="https://www15.cradle2careertx.org/assets/c2c_stckd-bg_pos_RGB.png" type="frame" size="1,1" aspect="atleast" /><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><![endif]-->
<div style="background:url('https://www15.cradle2careertx.org/assets/c2c_stckd-bg_pos_RGB.png') center top / cover no-repeat;background-position:center top;background-repeat:no-repeat;background-size:cover;margin:0px auto;max-width:600px;">
<div style="line-height:0;font-size:0;">
<table
align="center" background="https://www15.cradle2careertx.org/assets/c2c_stckd-bg_pos_RGB.png" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:url('https://www15.cradle2careertx.org/assets/c2c_stckd-bg_pos_RGB.png') center top / cover no-repeat;background-position:center top;background-repeat:no-repeat;background-size:cover;width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--[if mso | IE]></v:textbox></v:rect></td></tr></table><![endif]-->
<!-- Introduction Text -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#fafafa" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#fafafa;background-color:#fafafa;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#fafafa;background-color:#fafafa;width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:400px;" ><![endif]-->
<div
class="mj-column-px-400 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="left" style="font-size:0px;padding:0;word-break:break-word;"
>
<div
style="font-family:Helvetica Neue;font-size:20px;font-style:italic;line-height:1;text-align:left;color:#626262;"
>Sponsorship</div>
</td>
</tr>
<tr>
<td
align="left" style="font-size:0px;padding:0;word-break:break-word;"
>
<div
style="font-family:Arial;font-size:13px;line-height:1;text-align:left;color:#525252;"
>${contents}</div>
</td>
</tr>
<tr>
<td
align="center" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"
>
<tbody>
<tr>
<td
align="center" bgcolor="#00B052" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#00B052;" valign="middle"
>
<a
href="#" style="display:inline-block;background:#00B052;color:#ffffff;font-family:Arial;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;" target="_blank"
>
Subscribe
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<div
style="height:150px;line-height:150px;"
>&#8202;</div>
<!-- Social icons -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"
>
<tbody>
<tr
>
<td style="padding:4px;vertical-align:middle;">
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#3b5998;border-radius:3px;width:30px;"
>
<tbody>
<tr>
<td style="font-size:0;height:30px;vertical-align:middle;width:30px;">
<a href="https://www.facebook.com/sharer/sharer.php?u=${social_link_facebook}" target="_blank">
<img
height="30" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/facebook.png" style="border-radius:3px;display:block;" width="30"
/>
</a>
</td>
</tr>
</tbody>
</table>
</td>
<td style="vertical-align:middle;">
<a
href="https://www.facebook.com/sharer/sharer.php?u=${social_link_facebook}" style="color:#333333;font-size:15px;font-family:Arial;line-height:22px;text-decoration:none;" target="_blank">
Facebook
</a>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
</body>
</html>

View File

@@ -0,0 +1,361 @@
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>
${title}
</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a { padding:0; }
body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
p { display:block;margin:13px 0; }
</style>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 { width:100% !important; max-width: 100%; }
.mj-column-per-20 { width:20% !important; max-width: 20%; }
.mj-column-px-400 { width:400px !important; max-width: 400px; }
}
</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
.moz-text-html .mj-column-per-20 { width:20% !important; max-width: 20%; }
.moz-text-html .mj-column-px-400 { width:400px !important; max-width: 400px; }
</style>
<style type="text/css">
@media only screen and (max-width:480px) {
table.mj-full-width-mobile { width: 100% !important; }
td.mj-full-width-mobile { width: auto !important; }
}
</style>
<style type="text/css">
</style>
</head>
<body style="word-spacing:normal;">
<div
style=""
>
<!-- Company Header -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"
>
<tbody>
<tr>
<td style="width:100px;">
<img
height="auto" src="${header_image_url}" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="100"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<p
style="border-top:solid 4px #00B052;font-size:1px;margin:0px auto;width:100%;"
>
</p>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 4px #00B052;font-size:1px;margin:0px auto;width:550px;" role="presentation" width="550px" ><tr><td style="height:0;line-height:0;"> &nbsp;
</td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- Image Header -->
<div
class="mj-column-per-20 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
</tbody>
</table>
</div>
<!-- Introduction Text -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#fafafa" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#fafafa;background-color:#fafafa;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#fafafa;background-color:#fafafa;width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:400px;" ><![endif]-->
<div
class="mj-column-px-400 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="left" style="font-size:0px;padding:0;word-break:break-word;"
>
<div
style="font-family:Helvetica Neue;font-size:20px;font-style:italic;line-height:1;text-align:left;color:#626262;"
>Sponsorship</div>
</td>
</tr>
<tr>
<td
align="left" style="font-size:0px;padding:0;word-break:break-word;"
>
<div
style="font-family:Arial;font-size:13px;line-height:1;text-align:left;color:#525252;"
>${contents}</div>
</td>
</tr>
<tr>
<td
align="center" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"
>
<tbody>
<tr>
<td
align="center" bgcolor="#00B052" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#00B052;" valign="middle"
>
<a
href="#" style="display:inline-block;background:#00B052;color:#ffffff;font-family:Arial;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;" target="_blank"
>
Subscribe
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<div
style="height:150px;line-height:150px;"
>&#8202;</div>
<!-- Social icons -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"
>
<tbody>
<tr
>
<td style="padding:4px;vertical-align:middle;">
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#3b5998;border-radius:3px;width:30px;"
>
<tbody>
<tr>
<td style="font-size:0;height:30px;vertical-align:middle;width:30px;">
<a href="https://www.facebook.com/sharer/sharer.php?u=${social_link_facebook}" target="_blank">
<img
height="30" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/facebook.png" style="border-radius:3px;display:block;" width="30"
/>
</a>
</td>
</tr>
</tbody>
</table>
</td>
<td style="vertical-align:middle;">
<a
href="https://www.facebook.com/sharer/sharer.php?u=${social_link_facebook}" style="color:#333333;font-size:15px;font-family:Arial;line-height:22px;text-decoration:none;" target="_blank">
Facebook
</a>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
</body>
</html>

View File

@@ -0,0 +1,349 @@
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>
${title}
</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a { padding:0; }
body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
p { display:block;margin:13px 0; }
</style>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 { width:100% !important; max-width: 100%; }
.mj-column-per-20 { width:20% !important; max-width: 20%; }
.mj-column-px-400 { width:400px !important; max-width: 400px; }
}
</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
.moz-text-html .mj-column-per-20 { width:20% !important; max-width: 20%; }
.moz-text-html .mj-column-px-400 { width:400px !important; max-width: 400px; }
</style>
<style type="text/css">
@media only screen and (max-width:480px) {
table.mj-full-width-mobile { width: 100% !important; }
td.mj-full-width-mobile { width: auto !important; }
}
</style>
<style type="text/css">
</style>
</head>
<body style="word-spacing:normal;">
<div
style=""
>
<!-- Company Header -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"
>
<tbody>
<tr>
<td style="width:100px;">
<img
height="auto" src="${header_image_url}" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="50" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<p
style="border-top:solid 4px #00B052;font-size:1px;margin:0px auto;width:100%;"
>
</p>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 4px #00B052;font-size:1px;margin:0px auto;width:550px;" role="presentation" width="550px" ><tr><td style="height:0;line-height:0;"> &nbsp;
</td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- Image Header -->
<div
class="mj-column-per-20 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
</tbody>
</table>
</div>
<!-- Introduction Text -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#fafafa" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#fafafa;background-color:#fafafa;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#fafafa;background-color:#fafafa;width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:400px;" ><![endif]-->
<div
class="mj-column-px-400 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="left" style="font-size:0px;padding:0;word-break:break-word;"
>
<div
style="font-family:Helvetica Neue;font-size:20px;font-style:italic;line-height:1;text-align:left;color:#626262;"
>Sponsorship</div>
</td>
</tr>
<tr>
<td
align="left" style="font-size:0px;padding:0;word-break:break-word;"
>
<div
style="font-family:Arial;font-size:13px;line-height:1;text-align:left;color:#525252;"
>${contents}</div>
</td>
</tr>
<tr>
<td
align="center" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"
>
<tbody>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<div
style="height:150px;line-height:150px;"
>&#8202;</div>
<!-- Social icons -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"
>
<tbody>
<tr
>
<td style="padding:4px;vertical-align:middle;">
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#3b5998;border-radius:3px;width:30px;"
>
<tbody>
<tr>
<td style="font-size:0;height:30px;vertical-align:middle;width:30px;">
<a href="https://www.facebook.com/sharer/sharer.php?u=${social_link_facebook}" target="_blank">
<img
height="30" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/facebook.png" style="border-radius:3px;display:block;" width="30"
/>
</a>
</td>
</tr>
</tbody>
</table>
</td>
<td style="vertical-align:middle;">
<a
href="https://www.facebook.com/sharer/sharer.php?u=${social_link_facebook}" style="color:#333333;font-size:15px;font-family:Arial;line-height:22px;text-decoration:none;" target="_blank">
Facebook
</a>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
</body>
</html>

View File

@@ -0,0 +1,250 @@
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>
${title}
</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a { padding:0; }
body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
p { display:block;margin:13px 0; }
</style>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-80 { width:80% !important; max-width: 80%; }
.mj-column-per-100 { width:100% !important; max-width: 100%; }
}
</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-80 { width:80% !important; max-width: 80%; }
.moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
</style>
<style type="text/css">
@media only screen and (max-width:480px) {
table.mj-full-width-mobile { width: 100% !important; }
td.mj-full-width-mobile { width: auto !important; }
}
</style>
<style type="text/css">
</style>
</head>
<body style="word-spacing:normal;background-color:#F2F2F2;">
<div
style="background-color:#F2F2F2;"
>
<!-- contents -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:0 20px 20px 20px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:448px;" ><![endif]-->
<div
class="mj-column-per-80 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:0px;padding-top:10px;word-break:break-word;"
>
<div
style="font-family:Montserrat, Helvetica, Arial, sans-serif;font-size:16px;font-weight:500;line-height:24px;text-align:center;color:#000000;"
>${contents}</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- background image --><!-- spacer image -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:50px 0 0 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:0px;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"
>
<tbody>
<tr>
<td style="width:600px;">
<img
alt="bottom border" height="auto" src="http://nimus.de/share/tpl-card/bottom.png" style="border:none;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="600"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- footer -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:10px 0 20px 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<div
style="font-family:Montserrat, Helvetica, Arial, sans-serif;font-size:11px;font-weight:400;line-height:24px;text-align:center;color:#9B9B9B;"
><a href="${unsubscribe_link}" style="color: #9B9B9B;">Unsubscribe</a> <br>${footer_second_line}<br> <a href="#" style="color: #9B9B9B; text-decoration:none;">${footer_third_line}</a></div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
</body>
</html>

View File

@@ -0,0 +1,14 @@
<div class="list-group-item">
<div class="row align-items-center">
<div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
<div class="col text-truncate">
<a href="#" id="${title_link_id}" class="text-body d-block">${link_title}</a>
<div class="d-block text-secondary text-truncate mt-n1">
${description}
</div>
</div>
<div id="${fav_icon_id}" class="fav_notify_icon_container col-auto">
${star_icon}
</div>
</div>
</div>

170
admin/core/html/frame1.html Normal file
View File

@@ -0,0 +1,170 @@
<style>
.navbar-brand-image {
height: 4rem;
}
</style>
<!-- Navbar -->
<header class="navbar navbar-expand-md d-print-none">
<div class="container-xl">
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href=".">
<img src="../../../assets/c2c_stckd_pos_PMS.svg" width="110" height="32" alt="Cradle2Career" class="navbar-brand-image">
</a>
</h1>
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="#" class="btn log_out_link" target="_blank" rel="noreferrer">
Log out
</a>
</div>
</div>
<!-- <div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block ps-2">
<div></div>
<div class="mt-1 small text-secondary">Sponsorship</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
<a href="#" class="dropdown-item">Status</a>
<a href="./profile.html" class="dropdown-item">Profile</a>
<a href="#" class="dropdown-item">Feedback</a>
<div class="dropdown-divider"></div>
<a href="./settings.html" class="dropdown-item">Settings</a>
<a href="#" class="dropdown-item log_out_link">Logout</a>
</div>
</div> -->
</div>
</div>
</header>
<header class="navbar-expand-md">
<div class="navbar-collapse collapse" id="navbar-menu" style="">
<div class="navbar">
<div class="container-xl">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="./">
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 12l-2 0l9 -9l9 9l-2 0"></path><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path></svg>
</span>
<span class="nav-link-title">
Home
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./emails.html">
<!-- <span class="nav-link-icon d-md-none d-lg-inline-block">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 9l9 6l9 -6l-9 -6l-9 6"></path><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10"></path><path d="M3 19l6 -6"></path><path d="M15 13l6 6"></path></svg>
</span> -->
<span class="nav-link-title log_out_link">
Logout
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</header>
<div class="page-wrapper">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Overview
</div>
<h2 class="page-title">
Dashboard
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
<!-- <span class="d-none d-sm-inline">
<a href="#" class="btn">
New view
</a>
</span>
<a href="#" class="btn btn-primary d-none d-sm-inline-block" data-bs-toggle="modal" data-bs-target="#modal-report">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg>
Create new report
</a>
<a href="#" class="btn btn-primary d-sm-none btn-icon" data-bs-toggle="modal" data-bs-target="#modal-report" aria-label="Create new report">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg>
</a> -->
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl">
<div id="content_container"></div>
</div>
<div class="spacer"></div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<!-- <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
<li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
-->
<!-- <li class="list-inline-item">
<a href="https://github.com/sponsors/codecalm" target="_blankCradle2Career" class="link-secondary" rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path></svg>
Sponsor
</a>
</li> -->
</ul>
</div>
<!-- <div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item">
Copyright © 2023
<a href="." class="link-secondary">Cradle2Career</a>.
All rights reserved.
</li>
</ul> -->
<p style="text-align: center;">Copyright &copy; Cradle2Career is a 501(c)(3) non-profit organization. Our Federal Tax ID number is 83-3875479</p>
</div>
</div>
</div>
</footer>
</div>
<!-- <h1>Cradle2Career Sponsor Console</h1>
<h3>Home Console</h3>
<p><a href="logout.php">Log out</a></p> -->

2010
admin/core/html/frame2.html Normal file

File diff suppressed because one or more lines are too long

956
admin/core/html/frame3.html Normal file
View File

@@ -0,0 +1,956 @@
<div class="page">
<div id="events-listener-element"></div>
<aside class="navbar navbar-vertical navbar-expand-lg" data-bs-theme="dark">
<div class="container-fluid">
<button id="mobile_toggler" class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar-menu" aria-controls="sidebar-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="navbar-brand navbar-brand-autodark">
<div id="console_custome_log"></div>
</h1>
<div class="navbar-nav flex-row d-lg-none">
<div class="navbar-nav">
<div class="">
<div class="d-md-flex">
<!-- <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" data-bs-toggle="tooltip" data-bs-placement="bottom" aria-label="Enable dark mode" data-bs-original-title="Enable dark mode">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" data-bs-toggle="tooltip" data-bs-placement="bottom" aria-label="Enable light mode" data-bs-original-title="Enable light mode">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path></svg>
</a> -->
<div class="nav-item dropdown d-md-flex me-2 mt-1">
<a href="#" id="main_show_notifications" class="nav-link px-0 main_show_notifications" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"></path><path d="M9 17v1a3 3 0 0 0 6 0v-1"></path></svg>
<span id="notifications_badge" class="badge notifications_badge"></span>
</a>
<div class="mynotifycard dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
<div class="card">
<div class="card-header">
<div class="row" style="width: 100%;">
<div class="col-6 d-flex align-items-center">
<h3 class="card-title"><a style="text-decoration: none;" id="frame_notification_link" class="frame_notification_link" href="#">Notifications</a></h3>
</div>
<div class="col-6 d-flex align-items-center justify-content-end">
<a id="main_clear_notifications_link" href="#" class="main_clear_notifications_link">Clear</a>
</div>
</div>
</div>
<div id="main_notification_list_group" style="" class="main_notification_list_group list-group list-group-flush list-group-hoverable">
<div class="list-group-item main_notify_no_notifications_list_item" id="main_notify_no_notifications_list_item">
<div class="row align-items-center">
<div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
<div class="col text-truncate">
<a href="#" style="text-decoration: none;" class="text-body d-block">No Notifications</a>
<div class="d-block text-secondary text-truncate mt-n1"></div>
</div>
<div class="col-auto"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="nav-item dropdown me-2 mt-1" style="display: block;">
<a id="frame_brand_link_id1" href="#" class="frame_brand_link_id nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(/assets/c2c_bug_pos_PMS.svg)"></span>
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
<a href="#" class="dropdown_nav_profile dropdown-item">Profile</a>
<a href="#" class="dropdown_nav_notifications dropdown-item">Notifications</a>
<a href="#" class="dropdown-item dropdown_nav_feedback">Feedback</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown_nav_settings dropdown-item">Settings</a>
<a href="#" class="log_out_link dropdown-item">Logout</a>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="sidebar-menu">
<ul class="navbar-nav pt-lg-3">
<li class="nav-item">
<a id="navlink_home" class="nav-link" href="#" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
</span>
<span class="nav-link-title">
Home
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="false" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
</span>
<span class="nav-link-title">
Domain
</span>
</a>
<div class="dropdown-menu">
<div class="dropdown-menu-columns">
<div class="dropdown-menu-column">
<a id="navlink_builder" class="sidebar_mobile_btn_press dropdown-item" href="#">
Builder
</a>
<!-- <a id="navlink_edit" class="sidebar_mobile_btn_press dropdown-item" href="#">
Editor
</a> -->
<a id="navlink_email" class="sidebar_mobile_btn_press dropdown-item" href="#">
Email
</a>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="false" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
<!-- <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg> -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-table-options" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 21h-7a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7"></path>
<path d="M3 10h18"></path>
<path d="M10 3v18"></path>
<path d="M19.001 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
<path d="M19.001 15.5v1.5"></path>
<path d="M19.001 21v1.5"></path>
<path d="M22.032 17.25l-1.299 .75"></path>
<path d="M17.27 20l-1.3 .75"></path>
<path d="M15.97 17.25l1.3 .75"></path>
<path d="M20.733 20l1.3 .75"></path>
</svg>
</span>
<span class="nav-link-title">
Modules
</span>
</a>
<div class="dropdown-menu">
<div class="dropdown-menu-columns">
<div class="dropdown-menu-column" id="main_nav_links_container">
<!-- <a id="navlink_testingdocuments" class="sidebar_mobile_btn_press dropdown-item" href="#">
Testing Documents
</a> -->
<a id="navlink_documents" class="sidebar_mobile_btn_press dropdown-item" href="#">
Documents
</a>
<a id="navlink_payments" class="sidebar_mobile_btn_press dropdown-item" href="#">
Payment Processors
</a>
<a id="navlink_direct_payments" class="sidebar_mobile_btn_press dropdown-item" href="#">
Direct Payments
</a>
<a id="navlink_email_module" class="sidebar_mobile_btn_press dropdown-item" href="#">
Email
</a>
<a id="navlink_subscriber" class="sidebar_mobile_btn_press dropdown-item" href="#">
Subscribers
</a>
<a id="navlink_forms" class="sidebar_mobile_btn_press dropdown-item" href="#">
Forms
</a>
<!-- <a id="navlink_sponsorships" class="sidebar_mobile_btn_press dropdown-item" href="#">
Sponsorships
</a> -->
<!-- <a id="navlink_events" class="sidebar_mobile_btn_press dropdown-item" href="#">
Events
</a> -->
<a id="navlink_contactus" class="sidebar_mobile_btn_press dropdown-item" href="#">
Contact
</a>
<!-- <a id="navlink_access" class="sidebar_mobile_btn_press dropdown-item" href="#">
Access
</a> -->
<!-- <a id="navlink_listings" class="sidebar_mobile_btn_press dropdown-item" href="#">
Listings
</a> -->
</div>
</div>
</div>
</li>
<li class="nav-item">
<a id="navlink_analytics" class="nav-link" href="#" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chart-bar" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M9 8m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M15 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M4 20l14 0" /></svg>
</span>
<span class="nav-link-title">
Analytics
</span>
</a>
</li>
<li class="nav-item">
<a id="navlink_setings" class="nav-link" href="#" >
<span class="nav-link-icon d-md-none d-lg-inline-block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-settings"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /></svg></span>
<span class="nav-link-title">
Settings
</span>
</a>
</li>
<li class="nav-item">
<a class="log_out_link nav-link" href="#">
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
</span>
<span class="nav-link-title">
Logout
</span>
</a>
</li>
</ul>
</div>
</div>
</aside>
<header id="main_top_nav" class="navbar navbar-expand-md d-print-none d-none d-md-block" data-bs-theme="dark">
<div class="container-xl">
<!-- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button> -->
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a style="text-decoration: none;" href="#"></a>
</h1>
<div class="navbar-nav row align-items-start order-md-last d-none d-sm-flex">
<!-- <div class="navbar-nav d-flex flex-row order-md-last d-none d-sm-block"> -->
<div class="col">
<div class="d-md-flex">
<!-- <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" data-bs-toggle="tooltip" data-bs-placement="bottom" aria-label="Enable dark mode" data-bs-original-title="Enable dark mode">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" data-bs-toggle="tooltip" data-bs-placement="bottom" aria-label="Enable light mode" data-bs-original-title="Enable light mode">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path></svg>
</a> -->
<div class="nav-item dropdown d-md-flex me-3">
<a href="#" id="main_show_notifications" class="main_show_notifications nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"></path><path d="M9 17v1a3 3 0 0 0 6 0v-1"></path></svg>
<span id="notifications_badge" class="badge notifications_badge"></span>
</a>
<div class="mynotifycard dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
<div class="card">
<div class="card-header">
<div class="row" style="width: 100%;">
<div class="col-6 d-flex align-items-center">
<h3 class="card-title"><a style="text-decoration: none;" id="frame_notification_link" href="#" class="frame_notification_link">Notifications</a></h3>
</div>
<div class="col-6 d-flex align-items-center justify-content-end">
<a id="main_clear_notifications_link" href="#" class="main_clear_notifications_link">Clear</a>
</div>
</div>
</div>
<div id="main_notification_list_group" style="" class="main_notification_list_group list-group list-group-flush list-group-hoverable">
<div class="list-group-item main_notify_no_notifications_list_item" id="main_notify_no_notifications_list_item">
<div class="row align-items-center">
<div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
<div class="col text-truncate">
<a href="#" style="text-decoration: none;" class="text-body d-block">No Notifications</a>
<div class="d-block text-secondary text-truncate mt-n1"></div>
</div>
<div class="col-auto"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="nav-item dropdown">
<a id="frame_brand_link_id2" href="#" class="frame_brand_link_id nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(/assets/c2c_bug_pos_PMS.svg)"></span>
<!-- <div class="d-none d-xl-block ps-2">
<div>name</div>
<div class="mt-1 small text-secondary">UI Designer</div>
</div> -->
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow" data-bs-theme="light">
<a href="#" class="dropdown_nav_profile dropdown-item">Profile</a>
<a href="#" class="dropdown_nav_notifications dropdown-item">Notifications</a>
<a href="#" class="dropdown-item dropdown_nav_feedback">Feedback</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown_nav_settings dropdown-item">Settings</a>
<a href="#" class="log_out_link dropdown-item">Logout</a>
</div>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-menu">
<div class="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
<ul class="navbar-nav">
<!--
<li class="nav-item active">
<a class="nav-link" href="./#">
<span class="nav-link-title">
First
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./#">
<span class="nav-link-title">
Second
</span>
<span class="badge badge-sm bg-red">2</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-third" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false">
<span class="nav-link-title">
Third
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="./#">
First
</a>
<a class="dropdown-item" href="./#">
Second
</a>
<a class="dropdown-item" href="./#">
Third
</a>
</div>
</li>
-->
</ul>
</div>
</div>
</div>
</header>
<div class="page-wrapper" id="page-wrapper"></div>
</div>
<!-- Libs JS -->
<script src="./dist/libs/apexcharts/dist/apexcharts.min.js?1692870487" defer></script>
<script src="./dist/libs/jsvectormap/dist/js/jsvectormap.min.js?1692870487" defer></script>
<script src="./dist/libs/jsvectormap/dist/maps/world.js?1692870487" defer></script>
<script src="./dist/libs/jsvectormap/dist/maps/world-merc.js?1692870487" defer></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js?1692870487" defer></script>
<script src="./dist/js/demo.min.js?1692870487" defer></script>
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
window.ApexCharts && (new ApexCharts(document.getElementById('chart-revenue-bg'), {
chart: {
type: "area",
fontFamily: 'inherit',
height: 40.0,
sparkline: {
enabled: true
},
animations: {
enabled: false
},
},
dataLabels: {
enabled: false,
},
fill: {
opacity: .16,
type: 'solid'
},
stroke: {
width: 2,
lineCap: "round",
curve: "smooth",
},
series: [{
name: "Profits",
data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
}],
tooltip: {
theme: 'dark'
},
grid: {
strokeDashArray: 4,
},
xaxis: {
labels: {
padding: 0,
},
tooltip: {
enabled: false
},
axisBorder: {
show: false,
},
type: 'datetime',
},
yaxis: {
labels: {
padding: 4
},
},
labels: [
'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19'
],
colors: [tabler.getColor("primary")],
legend: {
show: false,
},
})).render();
});
// @formatter:on
</script>
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
window.ApexCharts && (new ApexCharts(document.getElementById('chart-new-clients'), {
chart: {
type: "line",
fontFamily: 'inherit',
height: 40.0,
sparkline: {
enabled: true
},
animations: {
enabled: false
},
},
fill: {
opacity: 1,
},
stroke: {
width: [2, 1],
dashArray: [0, 3],
lineCap: "round",
curve: "smooth",
},
series: [{
name: "May",
data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 4, 46, 39, 62, 51, 35, 41, 67]
},{
name: "April",
data: [93, 54, 51, 24, 35, 35, 31, 67, 19, 43, 28, 36, 62, 61, 27, 39, 35, 41, 27, 35, 51, 46, 62, 37, 44, 53, 41, 65, 39, 37]
}],
tooltip: {
theme: 'dark'
},
grid: {
strokeDashArray: 4,
},
xaxis: {
labels: {
padding: 0,
},
tooltip: {
enabled: false
},
type: 'datetime',
},
yaxis: {
labels: {
padding: 4
},
},
labels: [
'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19'
],
colors: [tabler.getColor("primary"), tabler.getColor("gray-600")],
legend: {
show: false,
},
})).render();
});
// @formatter:on
</script>
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
window.ApexCharts && (new ApexCharts(document.getElementById('chart-active-users'), {
chart: {
type: "bar",
fontFamily: 'inherit',
height: 40.0,
sparkline: {
enabled: true
},
animations: {
enabled: false
},
},
plotOptions: {
bar: {
columnWidth: '50%',
}
},
dataLabels: {
enabled: false,
},
fill: {
opacity: 1,
},
series: [{
name: "Profits",
data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
}],
tooltip: {
theme: 'dark'
},
grid: {
strokeDashArray: 4,
},
xaxis: {
labels: {
padding: 0,
},
tooltip: {
enabled: false
},
axisBorder: {
show: false,
},
type: 'datetime',
},
yaxis: {
labels: {
padding: 4
},
},
labels: [
'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19'
],
colors: [tabler.getColor("primary")],
legend: {
show: false,
},
})).render();
});
// @formatter:on
</script>
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
window.ApexCharts && (new ApexCharts(document.getElementById('chart-mentions'), {
chart: {
type: "bar",
fontFamily: 'inherit',
height: 240,
parentHeightOffset: 0,
toolbar: {
show: false,
},
animations: {
enabled: false
},
stacked: true,
},
plotOptions: {
bar: {
columnWidth: '50%',
}
},
dataLabels: {
enabled: false,
},
fill: {
opacity: 1,
},
series: [{
name: "Web",
data: [1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 2, 12, 5, 8, 22, 6, 8, 6, 4, 1, 8, 24, 29, 51, 40, 47, 23, 26, 50, 26, 41, 22, 46, 47, 81, 46, 6]
},{
name: "Social",
data: [2, 5, 4, 3, 3, 1, 4, 7, 5, 1, 2, 5, 3, 2, 6, 7, 7, 1, 5, 5, 2, 12, 4, 6, 18, 3, 5, 2, 13, 15, 20, 47, 18, 15, 11, 10, 0]
},{
name: "Other",
data: [2, 9, 1, 7, 8, 3, 6, 5, 5, 4, 6, 4, 1, 9, 3, 6, 7, 5, 2, 8, 4, 9, 1, 2, 6, 7, 5, 1, 8, 3, 2, 3, 4, 9, 7, 1, 6]
}],
tooltip: {
theme: 'dark'
},
grid: {
padding: {
top: -20,
right: 0,
left: -4,
bottom: -4
},
strokeDashArray: 4,
xaxis: {
lines: {
show: true
}
},
},
xaxis: {
labels: {
padding: 0,
},
tooltip: {
enabled: false
},
axisBorder: {
show: false,
},
type: 'datetime',
},
yaxis: {
labels: {
padding: 4
},
},
labels: [
'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19', '2020-07-20', '2020-07-21', '2020-07-22', '2020-07-23', '2020-07-24', '2020-07-25', '2020-07-26'
],
colors: [tabler.getColor("primary"), tabler.getColor("primary", 0.8), tabler.getColor("green", 0.8)],
legend: {
show: false,
},
})).render();
});
// @formatter:on
</script>
<script>
// @formatter:on
document.addEventListener("DOMContentLoaded", function() {
const map = new jsVectorMap({
selector: '#map-world',
map: 'world',
backgroundColor: 'transparent',
regionStyle: {
initial: {
fill: tabler.getColor('body-bg'),
stroke: tabler.getColor('border-color'),
strokeWidth: 2,
}
},
zoomOnScroll: false,
zoomButtons: false,
// -------- Series --------
visualizeData: {
scale: [tabler.getColor('bg-surface'), tabler.getColor('primary')],
values: { "AF": 16, "AL": 11, "DZ": 158, "AO": 85, "AG": 1, "AR": 351, "AM": 8, "AU": 1219, "AT": 366, "AZ": 52, "BS": 7, "BH": 21, "BD": 105, "BB": 3, "BY": 52, "BE": 461, "BZ": 1, "BJ": 6, "BT": 1, "BO": 19, "BA": 16, "BW": 12, "BR": 2023, "BN": 11, "BG": 44, "BF": 8, "BI": 1, "KH": 11, "CM": 21, "CA": 1563, "CV": 1, "CF": 2, "TD": 7, "CL": 199, "CN": 5745, "CO": 283, "KM": 0, "CD": 12, "CG": 11, "CR": 35, "CI": 22, "HR": 59, "CY": 22, "CZ": 195, "DK": 304, "DJ": 1, "DM": 0, "DO": 50, "EC": 61, "EG": 216, "SV": 21, "GQ": 14, "ER": 2, "EE": 19, "ET": 30, "FJ": 3, "FI": 231, "FR": 2555, "GA": 12, "GM": 1, "GE": 11, "DE": 3305, "GH": 18, "GR": 305, "GD": 0, "GT": 40, "GN": 4, "GW": 0, "GY": 2, "HT": 6, "HN": 15, "HK": 226, "HU": 132, "IS": 12, "IN": 1430, "ID": 695, "IR": 337, "IQ": 84, "IE": 204, "IL": 201, "IT": 2036, "JM": 13, "JP": 5390, "JO": 27, "KZ": 129, "KE": 32, "KI": 0, "KR": 986, "KW": 117, "KG": 4, "LA": 6, "LV": 23, "LB": 39, "LS": 1, "LR": 0, "LY": 77, "LT": 35, "LU": 52, "MK": 9, "MG": 8, "MW": 5, "MY": 218, "MV": 1, "ML": 9, "MT": 7, "MR": 3, "MU": 9, "MX": 1004, "MD": 5, "MN": 5, "ME": 3, "MA": 91, "MZ": 10, "MM": 35, "NA": 11, "NP": 15, "NL": 770, "NZ": 138, "NI": 6, "NE": 5, "NG": 206, "NO": 413, "OM": 53, "PK": 174, "PA": 27, "PG": 8, "PY": 17, "PE": 153, "PH": 189, "PL": 438, "PT": 223, "QA": 126, "RO": 158, "RU": 1476, "RW": 5, "WS": 0, "ST": 0, "SA": 434, "SN": 12, "RS": 38, "SC": 0, "SL": 1, "SG": 217, "SK": 86, "SI": 46, "SB": 0, "ZA": 354, "ES": 1374, "LK": 48, "KN": 0, "LC": 1, "VC": 0, "SD": 65, "SR": 3, "SZ": 3, "SE": 444, "CH": 522, "SY": 59, "TW": 426, "TJ": 5, "TZ": 22, "TH": 312, "TL": 0, "TG": 3, "TO": 0, "TT": 21, "TN": 43, "TR": 729, "TM": 0, "UG": 17, "UA": 136, "AE": 239, "GB": 2258, "US": 4624, "UY": 40, "UZ": 37, "VU": 0, "VE": 285, "VN": 101, "YE": 30, "ZM": 15, "ZW": 5 },
},
});
window.addEventListener("resize", () => {
map.updateSize();
});
});
// @formatter:off
</script>
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-activity'), {
chart: {
type: "radialBar",
fontFamily: 'inherit',
height: 40,
width: 40,
animations: {
enabled: false
},
sparkline: {
enabled: true
},
},
tooltip: {
enabled: false,
},
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: '75%'
},
track: {
margin: 0
},
dataLabels: {
show: false
}
}
},
colors: [tabler.getColor("blue")],
series: [35],
})).render();
});
// @formatter:on
</script>
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
window.ApexCharts && (new ApexCharts(document.getElementById('chart-development-activity'), {
chart: {
type: "area",
fontFamily: 'inherit',
height: 192,
sparkline: {
enabled: true
},
animations: {
enabled: false
},
},
dataLabels: {
enabled: false,
},
fill: {
opacity: .16,
type: 'solid'
},
stroke: {
width: 2,
lineCap: "round",
curve: "smooth",
},
series: [{
name: "Purchases",
data: [3, 5, 4, 6, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 8, 4, 14, 30, 17, 19, 15, 14, 25, 32, 40, 55, 60, 48, 52, 70]
}],
tooltip: {
theme: 'dark'
},
grid: {
strokeDashArray: 4,
},
xaxis: {
labels: {
padding: 0,
},
tooltip: {
enabled: false
},
axisBorder: {
show: false,
},
type: 'datetime',
},
yaxis: {
labels: {
padding: 4
},
},
labels: [
'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19'
],
colors: [tabler.getColor("primary")],
legend: {
show: false,
},
point: {
show: false
},
})).render();
});
// @formatter:on
</script>
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-1'), {
chart: {
type: "line",
fontFamily: 'inherit',
height: 24,
animations: {
enabled: false
},
sparkline: {
enabled: true
},
},
tooltip: {
enabled: false,
},
stroke: {
width: 2,
lineCap: "round",
},
series: [{
color: tabler.getColor("primary"),
data: [17, 24, 20, 10, 5, 1, 4, 18, 13]
}],
})).render();
});
// @formatter:on
</script>
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-2'), {
chart: {
type: "line",
fontFamily: 'inherit',
height: 24,
animations: {
enabled: false
},
sparkline: {
enabled: true
},
},
tooltip: {
enabled: false,
},
stroke: {
width: 2,
lineCap: "round",
},
series: [{
color: tabler.getColor("primary"),
data: [13, 11, 19, 22, 12, 7, 14, 3, 21]
}],
})).render();
});
// @formatter:on
</script>
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-3'), {
chart: {
type: "line",
fontFamily: 'inherit',
height: 24,
animations: {
enabled: false
},
sparkline: {
enabled: true
},
},
tooltip: {
enabled: false,
},
stroke: {
width: 2,
lineCap: "round",
},
series: [{
color: tabler.getColor("primary"),
data: [10, 13, 10, 4, 17, 3, 23, 22, 19]
}],
})).render();
});
// @formatter:on
</script>
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-4'), {
chart: {
type: "line",
fontFamily: 'inherit',
height: 24,
animations: {
enabled: false
},
sparkline: {
enabled: true
},
},
tooltip: {
enabled: false,
},
stroke: {
width: 2,
lineCap: "round",
},
series: [{
color: tabler.getColor("primary"),
data: [6, 15, 13, 13, 5, 7, 17, 20, 19]
}],
})).render();
});
// @formatter:on
</script>
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-5'), {
chart: {
type: "line",
fontFamily: 'inherit',
height: 24,
animations: {
enabled: false
},
sparkline: {
enabled: true
},
},
tooltip: {
enabled: false,
},
stroke: {
width: 2,
lineCap: "round",
},
series: [{
color: tabler.getColor("primary"),
data: [2, 11, 15, 14, 21, 20, 8, 23, 18, 14]
}],
})).render();
});
// @formatter:on
</script>
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-6'), {
chart: {
type: "line",
fontFamily: 'inherit',
height: 24,
animations: {
enabled: false
},
sparkline: {
enabled: true
},
},
tooltip: {
enabled: false,
},
stroke: {
width: 2,
lineCap: "round",
},
series: [{
color: tabler.getColor("primary"),
data: [22, 12, 7, 14, 3, 21, 8, 23, 18, 14]
}],
})).render();
});
// @formatter:on
</script>

725
admin/core/html/frame4.html Normal file
View File

@@ -0,0 +1,725 @@
<div class="page">
<!-- Sidebar -->
<aside class="navbar navbar-vertical navbar-expand-lg" data-bs-theme="dark">
<div class="container-fluid">
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar-menu" aria-controls="sidebar-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-brand navbar-brand-autodark">
<a href=".">
<svg xmlns="http://www.w3.org/2000/svg" width="110" height="32" viewBox="0 0 232 68" class="navbar-brand-image">
<path d="M64.6 16.2C63 9.9 58.1 5 51.8 3.4 40 1.5 28 1.5 16.2 3.4 9.9 5 5 9.9 3.4 16.2 1.5 28 1.5 40 3.4 51.8 5 58.1 9.9 63 16.2 64.6c11.8 1.9 23.8 1.9 35.6 0C58.1 63 63 58.1 64.6 51.8c1.9-11.8 1.9-23.8 0-35.6zM33.3 36.3c-2.8 4.4-6.6 8.2-11.1 11-1.5.9-3.3.9-4.8.1s-2.4-2.3-2.5-4c0-1.7.9-3.3 2.4-4.1 2.3-1.4 4.4-3.2 6.1-5.3-1.8-2.1-3.8-3.8-6.1-5.3-2.3-1.3-3-4.2-1.7-6.4s4.3-2.9 6.5-1.6c4.5 2.8 8.2 6.5 11.1 10.9 1 1.4 1 3.3.1 4.7zM49.2 46H37.8c-2.1 0-3.8-1-3.8-3s1.7-3 3.8-3h11.4c2.1 0 3.8 1 3.8 3s-1.7 3-3.8 3z" fill="#066fd1" style="fill: var(--tblr-primary, #066fd1)"></path>
<path d="M105.8 46.1c.4 0 .9.2 1.2.6s.6 1 .6 1.7c0 .9-.5 1.6-1.4 2.2s-2 .9-3.2.9c-2 0-3.7-.4-5-1.3s-2-2.6-2-5.4V31.6h-2.2c-.8 0-1.4-.3-1.9-.8s-.9-1.1-.9-1.9c0-.7.3-1.4.8-1.8s1.2-.7 1.9-.7h2.2v-3.1c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v3.1h3.4c.8 0 1.4.3 1.9.8s.8 1.2.8 1.9-.3 1.4-.8 1.8-1.2.7-1.9.7h-3.4v13c0 .7.2 1.2.5 1.5s.8.5 1.4.5c.3 0 .6-.1 1.1-.2.5-.2.8-.3 1.2-.3zm28-20.7c.8 0 1.5.3 2.1.8.5.5.8 1.2.8 2.1v20.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2-.8-.8-1.2-.8-2.1c-.8.9-1.9 1.7-3.2 2.4-1.3.7-2.8 1-4.3 1-2.2 0-4.2-.6-6-1.7-1.8-1.1-3.2-2.7-4.2-4.7s-1.6-4.3-1.6-6.9c0-2.6.5-4.9 1.5-6.9s2.4-3.6 4.2-4.8c1.8-1.1 3.7-1.7 5.9-1.7 1.5 0 3 .3 4.3.8 1.3.6 2.5 1.3 3.4 2.1 0-.8.3-1.5.8-2.1.5-.5 1.2-.7 2-.7zm-9.7 21.3c2.1 0 3.8-.8 5.1-2.3s2-3.4 2-5.7-.7-4.2-2-5.8c-1.3-1.5-3-2.3-5.1-2.3-2 0-3.7.8-5 2.3-1.3 1.5-2 3.5-2 5.8s.6 4.2 1.9 5.7 3 2.3 5.1 2.3zm32.1-21.3c2.2 0 4.2.6 6 1.7 1.8 1.1 3.2 2.7 4.2 4.7s1.6 4.3 1.6 6.9-.5 4.9-1.5 6.9-2.4 3.6-4.2 4.8c-1.8 1.1-3.7 1.7-5.9 1.7-1.5 0-3-.3-4.3-.9s-2.5-1.4-3.4-2.3v.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.5-.8-1.2-.8-2.1V18.9c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v10c.8-1 1.8-1.8 3.2-2.5 1.3-.7 2.8-1 4.3-1zm-.7 21.3c2 0 3.7-.8 5-2.3s2-3.5 2-5.8-.6-4.2-1.9-5.7-3-2.3-5.1-2.3-3.8.8-5.1 2.3-2 3.4-2 5.7.7 4.2 2 5.8c1.3 1.6 3 2.3 5.1 2.3zm23.6 1.9c0 .8-.3 1.5-.8 2.1s-1.3.8-2.1.8-1.5-.3-2-.8-.8-1.3-.8-2.1V18.9c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v29.7zm29.3-10.5c0 .8-.3 1.4-.9 1.9-.6.5-1.2.7-2 .7h-15.8c.4 1.9 1.3 3.4 2.6 4.4 1.4 1.1 2.9 1.6 4.7 1.6 1.3 0 2.3-.1 3.1-.4.7-.2 1.3-.5 1.8-.8.4-.3.7-.5.9-.6.6-.3 1.1-.4 1.6-.4.7 0 1.2.2 1.7.7s.7 1 .7 1.7c0 .9-.4 1.6-1.3 2.4-.9.7-2.1 1.4-3.6 1.9s-3 .8-4.6.8c-2.7 0-5-.6-7-1.7s-3.5-2.7-4.6-4.6-1.6-4.2-1.6-6.6c0-2.8.6-5.2 1.7-7.2s2.7-3.7 4.6-4.8 3.9-1.7 6-1.7 4.1.6 6 1.7 3.4 2.7 4.5 4.7c.9 1.9 1.5 4.1 1.5 6.3zm-12.2-7.5c-3.7 0-5.9 1.7-6.6 5.2h12.6v-.3c-.1-1.3-.8-2.5-2-3.5s-2.5-1.4-4-1.4zm30.3-5.2c1 0 1.8.3 2.4.8.7.5 1 1.2 1 1.9 0 1-.3 1.7-.8 2.2-.5.5-1.1.8-1.8.7-.5 0-1-.1-1.6-.3-.2-.1-.4-.1-.6-.2-.4-.1-.7-.1-1.1-.1-.8 0-1.6.3-2.4.8s-1.4 1.3-1.9 2.3-.7 2.3-.7 3.7v11.4c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.6-.8-1.3-.8-2.1V28.8c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v.6c.7-1.3 1.8-2.3 3.2-3 1.3-.7 2.8-1 4.3-1z" fill-rule="evenodd" clip-rule="evenodd" fill="#4a4a4a"></path>
</svg>
</a>
</div>
<div class="navbar-nav flex-row d-lg-none">
<div class="nav-item d-none d-lg-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"></path></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-pink"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path></svg>
Sponsor
</a>
</div>
</div>
<div class="d-none d-lg-flex">
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" data-bs-toggle="tooltip" data-bs-placement="bottom" aria-label="Enable dark mode" data-bs-original-title="Enable dark mode">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" data-bs-toggle="tooltip" data-bs-placement="bottom" aria-label="Enable light mode" data-bs-original-title="Enable light mode">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"></path><path d="M9 17v1a3 3 0 0 0 6 0v-1"></path></svg>
<span class="badge bg-red"></span>
</a>
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
<div class="card">
<div class="card-header">
<h3 class="card-title">Last updates</h3>
</div>
<div class="list-group list-group-flush list-group-hoverable">
<div class="list-group-item">
<div class="row align-items-center">
<div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
<div class="col text-truncate">
<a href="#" class="text-body d-block">Example 1</a>
<div class="d-block text-secondary text-truncate mt-n1">
Change deprecated html tags to text decoration classes (#29604)
</div>
</div>
<div class="col-auto">
<a href="#" class="list-group-item-actions">
<!-- Download SVG icon from http://tabler-icons.io/i/star -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-muted"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path></svg>
</a>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row align-items-center">
<div class="col-auto"><span class="status-dot d-block"></span></div>
<div class="col text-truncate">
<a href="#" class="text-body d-block">Example 2</a>
<div class="d-block text-secondary text-truncate mt-n1">
justify-content:between ⇒ justify-content:space-between (#29734)
</div>
</div>
<div class="col-auto">
<a href="#" class="list-group-item-actions show">
<!-- Download SVG icon from http://tabler-icons.io/i/star -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-yellow"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path></svg>
</a>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row align-items-center">
<div class="col-auto"><span class="status-dot d-block"></span></div>
<div class="col text-truncate">
<a href="#" class="text-body d-block">Example 3</a>
<div class="d-block text-secondary text-truncate mt-n1">
Update change-version.js (#29736)
</div>
</div>
<div class="col-auto">
<a href="#" class="list-group-item-actions">
<!-- Download SVG icon from http://tabler-icons.io/i/star -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-muted"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path></svg>
</a>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row align-items-center">
<div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
<div class="col text-truncate">
<a href="#" class="text-body d-block">Example 4</a>
<div class="d-block text-secondary text-truncate mt-n1">
Regenerate package-lock.json (#29730)
</div>
</div>
<div class="col-auto">
<a href="#" class="list-group-item-actions">
<!-- Download SVG icon from http://tabler-icons.io/i/star -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-muted"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path></svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu" aria-expanded="false">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block ps-2">
<div>Paweł Kuna</div>
<div class="mt-1 small text-secondary">UI Designer</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
<a href="#" class="dropdown-item">Status</a>
<a href="./profile.html" class="dropdown-item">Profile</a>
<a href="#" class="dropdown-item">Feedback</a>
<div class="dropdown-divider"></div>
<a href="./settings.html" class="dropdown-item">Settings</a>
<a href="./sign-in.html" class="dropdown-item">Logout</a>
</div>
</div>
</div>
<div class="navbar-collapse collapse" id="sidebar-menu" style="">
<ul class="navbar-nav pt-lg-3">
<li class="nav-item">
<a class="nav-link" href="./">
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 12l-2 0l9 -9l9 9l-2 0"></path><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path></svg>
</span>
<span class="nav-link-title">
Home
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="false" role="button" aria-expanded="false">
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path><path d="M12 12l8 -4.5"></path><path d="M12 12l0 9"></path><path d="M12 12l-8 -4.5"></path><path d="M16 5.25l-8 4.5"></path></svg>
</span>
<span class="nav-link-title">
Interface
</span>
</a>
<div class="dropdown-menu">
<div class="dropdown-menu-columns">
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./alerts.html">
Alerts
</a>
<a class="dropdown-item" href="./accordion.html">
Accordion
</a>
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="false" role="button" aria-expanded="false">
Authentication
</a>
<div class="dropdown-menu">
<a href="./sign-in.html" class="dropdown-item">
Sign in
</a>
<a href="./sign-in-link.html" class="dropdown-item">
Sign in link
</a>
<a href="./sign-in-illustration.html" class="dropdown-item">
Sign in with illustration
</a>
<a href="./sign-in-cover.html" class="dropdown-item">
Sign in with cover
</a>
<a href="./sign-up.html" class="dropdown-item">
Sign up
</a>
<a href="./forgot-password.html" class="dropdown-item">
Forgot password
</a>
<a href="./terms-of-service.html" class="dropdown-item">
Terms of service
</a>
<a href="./auth-lock.html" class="dropdown-item">
Lock screen
</a>
<a href="./2-step-verification.html" class="dropdown-item">
2 step verification
</a>
<a href="./2-step-verification-code.html" class="dropdown-item">
2 step verification code
</a>
</div>
</div>
<a class="dropdown-item" href="./blank.html">
Blank page
</a>
<a class="dropdown-item" href="./badges.html">
Badges
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
<a class="dropdown-item" href="./buttons.html">
Buttons
</a>
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="false" role="button" aria-expanded="false">
Cards
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
<div class="dropdown-menu">
<a href="./cards.html" class="dropdown-item">
Sample cards
</a>
<a href="./card-actions.html" class="dropdown-item">
Card actions
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
<a href="./cards-masonry.html" class="dropdown-item">
Cards Masonry
</a>
</div>
</div>
<a class="dropdown-item" href="./carousel.html">
Carousel
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
<a class="dropdown-item" href="./charts.html">
Charts
</a>
<a class="dropdown-item" href="./colors.html">
Colors
</a>
<a class="dropdown-item" href="./colorpicker.html">
Color picker
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
<a class="dropdown-item" href="./datagrid.html">
Data grid
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
<a class="dropdown-item" href="./datatables.html">
Datatables
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
<a class="dropdown-item" href="./dropdowns.html">
Dropdowns
</a>
<a class="dropdown-item" href="./dropzone.html">
Dropzone
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="false" role="button" aria-expanded="false">
Error pages
</a>
<div class="dropdown-menu">
<a href="./error-404.html" class="dropdown-item">
404 page
</a>
<a href="./error-500.html" class="dropdown-item">
500 page
</a>
<a href="./error-maintenance.html" class="dropdown-item">
Maintenance page
</a>
</div>
</div>
<a class="dropdown-item" href="./flags.html">
Flags
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
<a class="dropdown-item" href="./inline-player.html">
Inline player
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
<a class="dropdown-item" href="./lightbox.html">
Lightbox
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./lists.html">
Lists
</a>
<a class="dropdown-item" href="./modals.html">
Modal
</a>
<a class="dropdown-item" href="./maps.html">
Map
</a>
<a class="dropdown-item" href="./map-fullsize.html">
Map fullsize
</a>
<a class="dropdown-item" href="./maps-vector.html">
Map vector
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
<a class="dropdown-item" href="./markdown.html">
Markdown
</a>
<a class="dropdown-item" href="./navigation.html">
Navigation
</a>
<a class="dropdown-item" href="./offcanvas.html">
Offcanvas
</a>
<a class="dropdown-item" href="./pagination.html">
<!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
Pagination
</a>
<a class="dropdown-item" href="./placeholder.html">
Placeholder
</a>
<a class="dropdown-item" href="./steps.html">
Steps
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
<a class="dropdown-item" href="./stars-rating.html">
Stars rating
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
<a class="dropdown-item" href="./tabs.html">
Tabs
</a>
<a class="dropdown-item" href="./tags.html">
Tags
</a>
<a class="dropdown-item" href="./tables.html">
Tables
</a>
<a class="dropdown-item" href="./toasts.html">
Toasts
</a>
<a class="dropdown-item" href="./typography.html">
Typography
</a>
<a class="dropdown-item" href="./tinymce.html">
TinyMCE
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="./form-elements.html">
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 11l3 3l8 -8"></path><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9"></path></svg>
</span>
<span class="nav-link-title">
Forms
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="false" role="button" aria-expanded="false">
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path></svg>
</span>
<span class="nav-link-title">
Extra
</span>
</a>
<div class="dropdown-menu">
<div class="dropdown-menu-columns">
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./empty.html">
Empty page
</a>
<a class="dropdown-item" href="./cookie-banner.html">
Cookie banner
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
<a class="dropdown-item" href="./chat.html">
Chat
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
<a class="dropdown-item" href="./activity.html">
Activity
</a>
<a class="dropdown-item" href="./gallery.html">
Gallery
</a>
<a class="dropdown-item" href="./invoice.html">
Invoice
</a>
<a class="dropdown-item" href="./search-results.html">
Search results
</a>
<a class="dropdown-item" href="./pricing.html">
Pricing cards
</a>
<a class="dropdown-item" href="./pricing-table.html">
Pricing table
</a>
<a class="dropdown-item" href="./faq.html">
FAQ
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
<a class="dropdown-item" href="./users.html">
Users
</a>
<a class="dropdown-item" href="./license.html">
License
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./logs.html">
Logs
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
<a class="dropdown-item" href="./music.html">
Music
</a>
<a class="dropdown-item" href="./photogrid.html">
Photogrid
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
<a class="dropdown-item" href="./tasks.html">
Tasks
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
<a class="dropdown-item" href="./uptime.html">
Uptime monitor
</a>
<a class="dropdown-item" href="./widgets.html">
Widgets
</a>
<a class="dropdown-item" href="./wizard.html">
Wizard
</a>
<a class="dropdown-item" href="./settings.html">
Settings
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
<a class="dropdown-item" href="./trial-ended.html">
Trial ended
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
<a class="dropdown-item" href="./job-listing.html">
Job listing
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
<a class="dropdown-item" href="./page-loader.html">
Page loader
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="false" role="button" aria-expanded="true">
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path></svg>
</span>
<span class="nav-link-title">
Layout
</span>
</a>
<div class="dropdown-menu show">
<div class="dropdown-menu-columns">
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./layout-horizontal.html">
Horizontal
</a>
<a class="dropdown-item" href="./layout-boxed.html">
Boxed
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
<a class="dropdown-item" href="./layout-vertical.html">
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html">
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html">
Right vertical
</a>
<a class="dropdown-item" href="./layout-condensed.html">
Condensed
</a>
<a class="dropdown-item active" href="./layout-combo.html">
Combined
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./layout-navbar-dark.html">
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html">
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html">
Navbar overlap
</a>
<a class="dropdown-item" href="./layout-rtl.html">
RTL mode
</a>
<a class="dropdown-item" href="./layout-fluid.html">
Fluid
</a>
<a class="dropdown-item" href="./layout-fluid-vertical.html">
Fluid vertical
</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="./icons.html">
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7"></path><path d="M10 10l.01 0"></path><path d="M14 10l.01 0"></path><path d="M10 14a3.5 3.5 0 0 0 4 0"></path></svg>
</span>
<span class="nav-link-title">
5628 icons
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./emails.html">
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/mail-opened -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 9l9 6l9 -6l-9 -6l-9 6"></path><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10"></path><path d="M3 19l6 -6"></path><path d="M15 13l6 6"></path></svg>
</span>
<span class="nav-link-title">
Emails
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./illustrations.html">
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/brand-figma -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M15 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path><path d="M6 3m0 3a3 3 0 0 1 3 -3h6a3 3 0 0 1 3 3v0a3 3 0 0 1 -3 3h-6a3 3 0 0 1 -3 -3z"></path><path d="M9 9a3 3 0 0 0 0 6h3m-3 0a3 3 0 1 0 3 3v-15"></path></svg>
</span>
<span class="nav-link-title">
Illustrations
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="false" role="button" aria-expanded="false">
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M15 15l3.35 3.35"></path><path d="M9 15l-3.35 3.35"></path><path d="M5.65 5.65l3.35 3.35"></path><path d="M18.35 5.65l-3.35 3.35"></path></svg>
</span>
<span class="nav-link-title">
Help
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
Documentation
</a>
<a class="dropdown-item" href="./changelog.html">
Changelog
</a>
<a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
Source code
</a>
<a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-inline me-1"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path></svg>
Sponsor project!
</a>
</div>
</li>
</ul>
</div>
</div>
</aside>
<!-- Navbar -->
<header class="navbar navbar-expand-md d-none d-lg-flex d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-nav flex-row order-md-last">
<div class="d-none d-md-flex">
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" data-bs-toggle="tooltip" data-bs-placement="bottom" aria-label="Enable dark mode" data-bs-original-title="Enable dark mode">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" data-bs-toggle="tooltip" data-bs-placement="bottom" aria-label="Enable light mode" data-bs-original-title="Enable light mode">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"></path><path d="M9 17v1a3 3 0 0 0 6 0v-1"></path></svg>
<span class="badge bg-red"></span>
</a>
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
<div class="card">
<div class="card-header">
<h3 class="card-title">Last updates</h3>
</div>
<div class="list-group list-group-flush list-group-hoverable">
<div class="list-group-item">
<div class="row align-items-center">
<div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
<div class="col text-truncate">
<a href="#" class="text-body d-block">Example 1</a>
<div class="d-block text-secondary text-truncate mt-n1">
Change deprecated html tags to text decoration classes (#29604)
</div>
</div>
<div class="col-auto">
<a href="#" class="list-group-item-actions">
<!-- Download SVG icon from http://tabler-icons.io/i/star -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-muted"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path></svg>
</a>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row align-items-center">
<div class="col-auto"><span class="status-dot d-block"></span></div>
<div class="col text-truncate">
<a href="#" class="text-body d-block">Example 2</a>
<div class="d-block text-secondary text-truncate mt-n1">
justify-content:between ⇒ justify-content:space-between (#29734)
</div>
</div>
<div class="col-auto">
<a href="#" class="list-group-item-actions show">
<!-- Download SVG icon from http://tabler-icons.io/i/star -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-yellow"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path></svg>
</a>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row align-items-center">
<div class="col-auto"><span class="status-dot d-block"></span></div>
<div class="col text-truncate">
<a href="#" class="text-body d-block">Example 3</a>
<div class="d-block text-secondary text-truncate mt-n1">
Update change-version.js (#29736)
</div>
</div>
<div class="col-auto">
<a href="#" class="list-group-item-actions">
<!-- Download SVG icon from http://tabler-icons.io/i/star -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-muted"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path></svg>
</a>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row align-items-center">
<div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
<div class="col text-truncate">
<a href="#" class="text-body d-block">Example 4</a>
<div class="d-block text-secondary text-truncate mt-n1">
Regenerate package-lock.json (#29730)
</div>
</div>
<div class="col-auto">
<a href="#" class="list-group-item-actions">
<!-- Download SVG icon from http://tabler-icons.io/i/star -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-muted"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path></svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block ps-2">
<div>Paweł Kuna</div>
<div class="mt-1 small text-secondary">UI Designer</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
<a href="#" class="dropdown-item">Status</a>
<a href="./profile.html" class="dropdown-item">Profile</a>
<a href="#" class="dropdown-item">Feedback</a>
<div class="dropdown-divider"></div>
<a href="./settings.html" class="dropdown-item">Settings</a>
<a href="./sign-in.html" class="dropdown-item">Logout</a>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-menu">
<div>
<form action="./" method="get" autocomplete="off" novalidate="">
<div class="input-icon">
<span class="input-icon-addon">
<!-- Download SVG icon from http://tabler-icons.io/i/search -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg>
</span>
<input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
</div>
</div>
</header>
<div class="page-wrapper">
</div>
</div>

View File

@@ -0,0 +1,16 @@
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">Domain Console</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">&copy;2024 Appfactory Studio inc.</a></li>
</ul>
</div>
</div>
</div>
</footer>

View File

@@ -0,0 +1,54 @@
<div class="main_container_container">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Overview
</div>
<h2 class="page-title">
Dashboard
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
<span class="d-none d-sm-inline">
<a href="#" class="btn btn-outline-dark log_out_link">
Logout
</a>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl">
<div id="content_container"></div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">Domain Console</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">&copy;2024 Appfactory Studio inc.</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>

View File

@@ -0,0 +1,6 @@
<h3>Account</h3>

View File

@@ -0,0 +1,58 @@
<div class="main_container_container" style="">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Overview
</div>
<h2 class="page-title">
Analytics
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
<span class="d-none d-sm-inline">
<!-- <a href="#" class="btn btn-outline-dark log_out_link">
Logout
</a> -->
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl" style="height: 100vh;overflow-y: scroll;">
<div id="content_container"></div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">Domain Console</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">&copy;2024 Appfactory Studio inc.</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>

View File

@@ -0,0 +1,7 @@
<h3>Contact Us</h3>

View File

@@ -0,0 +1,10 @@
<h3>Home</h3>

View File

@@ -0,0 +1,148 @@
<div class="sidebar">
<div class="logo-details">
<i class='bx bxl-c-plus-plus seethrough'></i>
<span class="logo_name">Cradle2Career</span>
</div>
<ul class="nav-links">
<li>
<a href="#">
<i class='bx bx-grid-alt' ></i>
<span class="link_name">Dashboard</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Category</a></li>
</ul>
</li>
<li>
<div class="iocn-link">
<a href="#">
<i class='bx bx-collection' ></i>
<span class="link_name">Domains</span>
</a>
<i class='bx bxs-chevron-down arrow' ></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Domains</a></li>
<li><a href="#">Website</a></li>
<li><a href="#">Email</a></li>
</ul>
</li>
<li>
<a href="#">
<i class='bx bx-pie-chart-alt-2' ></i>
<span class="link_name">Conference</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Conference</a></li>
</ul>
</li>
<!-- <li>
<div class="iocn-link">
<a href="#">
<i class='bx bx-book-alt' ></i>
<span class="link_name">Posts</span>
</a>
<i class='bx bxs-chevron-down arrow' ></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Posts</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Login Form</a></li>
<li><a href="#">Card Design</a></li>
</ul>
</li> -->
<li>
<a href="#">
<i class='bx bx-pie-chart-alt-2' ></i>
<span class="link_name">Analytics</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Analytics</a></li>
</ul>
</li>
<!-- <li>
<a href="#">
<i class='bx bx-line-chart' ></i>
<span class="link_name">Chart</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Chart</a></li>
</ul>
</li> -->
<li>
<div class="iocn-link">
<a href="#">
<i class='bx bx-plug' ></i>
<span class="link_name">Extensions</span>
</a>
<i class='bx bxs-chevron-down arrow' ></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Extensions</a></li>
<li><a href="#">Cards</a></li>
<li><a href="#">Forms</a></li>
<li><a href="#">Listings</a></li>
<li><a href="#">Transactions</a></li>
</ul>
</li>
<!-- <li>
<a href="#">
<i class='bx bx-compass' ></i>
<span class="link_name">Explore</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Explore</a></li>
</ul>
</li> -->
<li>
<a href="#">
<i class='bx bx-cog' ></i>
<span class="link_name">Setting</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Setting</a></li>
</ul>
</li>
<li>
<div class="profile-details">
<div class="profile-content">
<img src="image/profile.jpg" class="seethrough" alt="profileImg">
</div>
<div class="name-job">
<div class="profile_name"></div>
<div class="job">Web Console</div>
</div>
<i class='bx bx-log-out' ></i>
</div>
</li>
</ul>
</div>
<section class="home-section">
<div class="home-content">
<i class='bx bx-menu' ></i>
<span class="text">Welcome</span>
</div>
</section>
<script>
let arrow = document.querySelectorAll(".arrow");
for (var i = 0; i < arrow.length; i++) {
arrow[i].addEventListener("click", (e)=>{
let arrowParent = e.target.parentElement.parentElement;//selecting main parent of arrow
arrowParent.classList.toggle("showMenu");
});
}
let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".bx-menu");
console.log(sidebarBtn);
sidebarBtn.addEventListener("click", ()=>{
sidebar.classList.toggle("close");
});
</script>

View File

@@ -0,0 +1,37 @@
<div class="modal modal-blur fade" id="modal_donation_dialog_success" tabindex="-1" role="dialog" aria-modal="true" style="display: none; padding-left: 0px;">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header " style="background-color:white;">
<img style="width:85px" src="../../assets/c2c_stckd-bg_pos_RGB.svg">
<button type="button" class="btn-close " style="background-color: white;" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div id="dialog_container_success"></div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,52 @@
<div class="modal modal-blur fade" id="modal_donation_dialog" tabindex="-1" role="dialog" aria-modal="true" style="display: none; padding-left: 0px;">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header " style="background-color:white;">
<img style="width:85px" src="../../assets/c2c_stckd-bg_pos_RGB.svg">
<button type="button" class="btn-close " style="background-color: white;" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<h4>Donation: $<span id="donation-amount"></span></h4>
<form>
<div class="input-group">
<span class="input-group-text">$</span>
<input type="text" size=16 maxlength=16 id="dollar-amount" class="form-control m-0" aria-label="Amount (to the nearest dollar)">
</div>
</form>
<label>Full Name</label>
<input type="text" class="form-control" id="card-name" placeholder="Jane Doe">
<label>Email</label>
<input type="text" class="form-control" id="card-email" placeholder="janedoe@example.com">
<div id="paypal-main-payment-container"></div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,51 @@
<div class="main_container_container">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Overview
</div>
<h2 class="page-title">
Website Edites
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
<span class="d-none d-sm-inline">
<!-- <a href="#" class="btn btn-outline-dark log_out_link">
Logout
</a> -->
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl">
<div id="content_container"></div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">Domain Console</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">&copy;2024 Appfactory Studio inc.</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>

View File

@@ -0,0 +1,575 @@
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>
${title}
</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a { padding:0; }
body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
p { display:block;margin:13px 0; }
</style>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 { width:100% !important; max-width: 100%; }
.mj-column-per-35 { width:35% !important; max-width: 35%; }
.mj-column-per-65 { width:65% !important; max-width: 65%; }
.mj-column-per-80 { width:80% !important; max-width: 80%; }
}
</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
.moz-text-html .mj-column-per-35 { width:35% !important; max-width: 35%; }
.moz-text-html .mj-column-per-65 { width:65% !important; max-width: 65%; }
.moz-text-html .mj-column-per-80 { width:80% !important; max-width: 80%; }
</style>
<style type="text/css">
@media only screen and (max-width:480px) {
table.mj-full-width-mobile { width: 100% !important; }
td.mj-full-width-mobile { width: auto !important; }
}
</style>
<style type="text/css">
</style>
</head>
<body style="word-spacing:normal;background-color:#F2F2F2;">
<div
style="background-color:#F2F2F2;"
>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:10px 0 20px 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<div
style="font-family:Montserrat, Helvetica, Arial, sans-serif;font-size:11px;font-weight:400;line-height:24px;text-align:center;color:#9B9B9B;"
>Writing A Good Headline For Your Advertisement</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 20px 0 20px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:196px;" ><![endif]-->
<div
class="mj-column-per-35 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<div
style="font-family:Montserrat, Helvetica, Arial, sans-serif;font-size:20px;font-weight:500;line-height:24px;text-align:left;color:#000000;"
>// BR&amp;AND</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:364px;" ><![endif]-->
<div
class="mj-column-per-65 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="right" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<div
style="font-family:Montserrat, Helvetica, Arial, sans-serif;font-size:11px;font-weight:400;line-height:24px;text-align:right;color:#000000;"
><a href="#" style="color: #000000; text-decoration: none;">HOME</a>&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;<a href="#" style="color: #000000; text-decoration: none;">SERVICE</a>&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;<a href="#" style="color: #000000; text-decoration: none;">THIRD</a></div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 20px 0 20px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:560px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:30px 40px 10px 40px;word-break:break-word;"
>
<div
style="font-family:Montserrat, Helvetica, Arial, sans-serif;font-size:32px;font-weight:300;line-height:40x;text-align:center;color:#5FA91D;"
>Free Advertising For Your Online Business.</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:10px 20px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:560px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<p
style="border-top:solid 3px #9B9B9B;font-size:1px;margin:0px auto;width:30px;"
>
</p>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 3px #9B9B9B;font-size:1px;margin:0px auto;width:30px;" role="presentation" width="30px" ><tr><td style="height:0;line-height:0;"> &nbsp;
</td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:0 20px 20px 20px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:448px;" ><![endif]-->
<div
class="mj-column-per-80 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:0px;padding-top:10px;word-break:break-word;"
>
<div
style="font-family:Montserrat, Helvetica, Arial, sans-serif;font-size:16px;font-weight:500;line-height:24px;text-align:center;color:#000000;"
>A Right Media Mix Can Make The Difference.</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><v:rect style="width:600px;" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"><v:fill origin="0, -0.5" position="0, -0.5" src="http://nimus.de/share/tpl-card/bg.jpg" type="frame" size="1,1" aspect="atleast" /><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><![endif]-->
<div style="background:url('http://nimus.de/share/tpl-card/bg.jpg') center top / cover no-repeat;background-position:center top;background-repeat:no-repeat;background-size:cover;margin:0px auto;max-width:600px;">
<div style="line-height:0;font-size:0;">
<table
align="center" background="http://nimus.de/share/tpl-card/bg.jpg" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:url('http://nimus.de/share/tpl-card/bg.jpg') center top / cover no-repeat;background-position:center top;background-repeat:no-repeat;background-size:cover;width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:0px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:0px;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"
>
<tbody>
<tr>
<td style="width:600px;">
<img
alt="" height="auto" src="http://nimus.de/share/tpl-card/lineshadow.png" style="border:none;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="600"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
align="center" style="font-size:0px;padding:50px 40px 0 40px;word-break:break-word;"
>
<div
style="font-family:Montserrat, Helvetica, Arial, sans-serif;font-size:16px;font-weight:300;line-height:24px;text-align:center;color:#000000;"
>Marketers/advertisers usually focus their efforts on the people responsible for making the purchase. In many cases, this is an effective approach but in other cases it can make for a totally useless marketing campaign.</div>
</td>
</tr>
<tr>
<td
align="center" vertical-align="middle" style="font-size:0px;padding:10px 25px;padding-top:20;padding-bottom:100px;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"
>
<tbody>
<tr>
<td
align="center" bgcolor="#5FA91D" role="presentation" style="border:none;border-radius:2px;cursor:auto;mso-padding-alt:15px 30px;background:#5FA91D;" valign="middle"
>
<a
href="#" style="display:inline-block;background:#5FA91D;color:#FFFFFF;font-family:Montserrat, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:15px 30px;mso-padding-alt:0px;border-radius:2px;" target="_blank"
>
CALL TO ACTION
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--[if mso | IE]></v:textbox></v:rect></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:50px 0 0 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:0px;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"
>
<tbody>
<tr>
<td style="width:600px;">
<img
alt="bottom border" height="auto" src="http://nimus.de/share/tpl-card/bottom.png" style="border:none;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="600"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:10px 0 20px 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<div
style="font-family:Montserrat, Helvetica, Arial, sans-serif;font-size:11px;font-weight:400;line-height:24px;text-align:center;color:#9B9B9B;"
><a href="#" style="color: #9B9B9B;">Unsubscribe</a> from this newsletter<br>52 Edison Court Suite 259 / East Aidabury / Cambodi<br> <a href="#" style="color: #9B9B9B; text-decoration:none;">Made by svenhaustein.de</a></div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
</body>
</html>

View File

@@ -0,0 +1,250 @@
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>
${title}
</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a { padding:0; }
body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
p { display:block;margin:13px 0; }
</style>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-80 { width:80% !important; max-width: 80%; }
.mj-column-per-100 { width:100% !important; max-width: 100%; }
}
</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-80 { width:80% !important; max-width: 80%; }
.moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
</style>
<style type="text/css">
@media only screen and (max-width:480px) {
table.mj-full-width-mobile { width: 100% !important; }
td.mj-full-width-mobile { width: auto !important; }
}
</style>
<style type="text/css">
</style>
</head>
<body style="word-spacing:normal;background-color:#F2F2F2;">
<div
style="background-color:#F2F2F2;"
>
<!-- contents -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:0 20px 20px 20px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:448px;" ><![endif]-->
<div
class="mj-column-per-80 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:0px;padding-top:10px;word-break:break-word;"
>
<div
style="font-family:Montserrat, Helvetica, Arial, sans-serif;font-size:16px;font-weight:500;line-height:24px;text-align:center;color:#000000;"
>${contents}</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- background image --><!-- spacer image -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:50px 0 0 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:0px;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"
>
<tbody>
<tr>
<td style="width:600px;">
<img
alt="bottom border" height="auto" src="http://nimus.de/share/tpl-card/bottom.png" style="border:none;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="600"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- footer -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:10px 0 20px 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<div
style="font-family:Montserrat, Helvetica, Arial, sans-serif;font-size:11px;font-weight:400;line-height:24px;text-align:center;color:#9B9B9B;"
><a href="${unsubscribe_link}" style="color: #9B9B9B;">Unsubscribe</a> <br>${footer_second_line}<br> <a href="#" style="color: #9B9B9B; text-decoration:none;">${footer_third_line}</a></div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
</body>
</html>

View File

@@ -0,0 +1,513 @@
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>
${section_title}
</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a { padding:0; }
body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
p { display:block;margin:13px 0; }
</style>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 { width:100% !important; max-width: 100%; }
.mj-column-per-80 { width:80% !important; max-width: 80%; }
}
</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
.moz-text-html .mj-column-per-80 { width:80% !important; max-width: 80%; }
</style>
<style type="text/css">
@media only screen and (max-width:480px) {
table.mj-full-width-mobile { width: 100% !important; }
td.mj-full-width-mobile { width: auto !important; }
}
</style>
<style type="text/css">
</style>
</head>
<body style="word-spacing:normal;background-color:#F2F2F2;">
<div
style="background-color:#F2F2F2;"
>
<!-- top_header -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:10px 0 20px 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<div
style="font-family:Montserrat, Helvetica, Arial, sans-serif;font-size:11px;font-weight:400;line-height:24px;text-align:center;color:#9B9B9B;"
>${top_header}</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- header -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 20px 0 20px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:560px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:30px 40px 10px 40px;word-break:break-word;"
>
<div
style="font-family:Montserrat, Helvetica, Arial, sans-serif;font-size:32px;font-weight:300;line-height:40x;text-align:center;color:#5FA91D;"
>${header}</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- divider -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:10px 20px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:560px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<p
style="border-top:solid 3px #9B9B9B;font-size:1px;margin:0px auto;width:30px;"
>
</p>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 3px #9B9B9B;font-size:1px;margin:0px auto;width:30px;" role="presentation" width="30px" ><tr><td style="height:0;line-height:0;"> &nbsp;
</td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:0 20px 20px 20px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:448px;" ><![endif]-->
<div
class="mj-column-per-80 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:0px;padding-top:10px;word-break:break-word;"
>
<div
style="font-family:Montserrat, Helvetica, Arial, sans-serif;font-size:16px;font-weight:500;line-height:24px;text-align:center;color:#000000;"
>${contents}</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- background image -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><v:rect style="width:600px;" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"><v:fill origin="0, -0.5" position="0, -0.5" src="${link_background_image}" type="frame" size="1,1" aspect="atleast" /><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><![endif]-->
<div style="background:url('${link_background_image}') center top / cover no-repeat;background-position:center top;background-repeat:no-repeat;background-size:cover;margin:0px auto;max-width:600px;">
<div style="line-height:0;font-size:0;">
<table
align="center" background="${link_background_image}" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:url('${link_background_image}') center top / cover no-repeat;background-position:center top;background-repeat:no-repeat;background-size:cover;width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:0px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:0px;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"
>
<tbody>
<tr>
<td style="width:600px;">
<img
alt="" height="auto" src="http://nimus.de/share/tpl-card/lineshadow.png" style="border:none;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="600"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
align="center" style="font-size:0px;padding:50px 40px 0 40px;word-break:break-word;"
>
<div
style="font-family:Montserrat, Helvetica, Arial, sans-serif;font-size:16px;font-weight:300;line-height:24px;text-align:center;color:#000000;"
></div>
</td>
</tr>
<tr>
<td
align="center" vertical-align="middle" style="font-size:0px;padding:10px 25px;padding-top:20;padding-bottom:100px;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"
>
<tbody>
<tr>
<td
align="center" bgcolor="#5FA91D" role="presentation" style="border:none;border-radius:2px;cursor:auto;mso-padding-alt:15px 30px;background:#5FA91D;" valign="middle"
>
<a
href="${button_link}" style="display:inline-block;background:#5FA91D;color:#FFFFFF;font-family:Montserrat, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:15px 30px;mso-padding-alt:0px;border-radius:2px;" target="_blank"
>
${button_link_title}
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--[if mso | IE]></v:textbox></v:rect></td></tr></table><![endif]-->
<!-- spacer image -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:50px 0 0 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:0px;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"
>
<tbody>
<tr>
<td style="width:600px;">
<img
alt="bottom border" height="auto" src="http://nimus.de/share/tpl-card/bottom.png" style="border:none;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="600"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- footer -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:10px 0 20px 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<div
style="font-family:Montserrat, Helvetica, Arial, sans-serif;font-size:11px;font-weight:400;line-height:24px;text-align:center;color:#9B9B9B;"
><a href="${unsubscribe_link}" style="color: #9B9B9B;">Unsubscribe</a> <br>${footer_second_line}<br> <a href="#" style="color: #9B9B9B; text-decoration:none;">${footer_third_line}</a></div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
</body>
</html>

View File

@@ -0,0 +1,170 @@
<div class="mb-3">
<label class="form-label">${label}</label>
<div class="row g-2">
<div class="col-5">
<select name="user[month]" id="${month_selection_id}" class="form-select">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option selected="selected" value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div class="col-3">
<select name="user[day]" id="${day_selection_id}" class="form-select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20" selected="">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="col-4">
<select name="user[year]" id="${year_selection_id}" class="form-select">
<option value="2014">2040</option>
<option value="2014">2039</option>
<option value="2014">2038</option>
<option value="2014">2037</option>
<option value="2014">2036</option>
<option value="2014">2035</option>
<option value="2014">2034</option>
<option value="2014">2033</option>
<option value="2014">2032</option>
<option value="2014">2031</option>
<option value="2014">2030</option>
<option value="2014">2029</option>
<option value="2014">2028</option>
<option value="2014">2027</option>
<option value="2014">2026</option>
<option value="2014">2025</option>
<option value="2014">2024</option>
<option value="2014">2023</option>
<option value="2014">2022</option>
<option value="2014">2021</option>
<option value="2014">2019</option>
<option value="2014">2018</option>
<option value="2014">2017</option>
<option value="2014">2016</option>
<option value="2014">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989" selected="">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
</select>
</div>
</div>
</div>

View File

@@ -0,0 +1,411 @@
<div class="main_container_container" style="">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Overview
</div>
<h2 class="page-title">
Dashboard
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
<span class="d-none d-sm-inline">
<a href="#" class="btn btn-outline-dark log_out_link">
Logout
</a>
</span>
<!--
<a href="#" class="btn btn-primary d-none d-sm-inline-block" data-bs-toggle="modal" data-bs-target="#modal-report">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
Create new report
</a>
<a href="#" class="btn btn-primary d-sm-none btn-icon" data-bs-toggle="modal" data-bs-target="#modal-report" aria-label="Create new report">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
</a> -->
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl">
<div class="container-fluid">
<div class="row border-bottom border-primary">
<h1 class=" d-flex justify-content-center" >Welcome</h1>
</div>
<div class="row mt-4 mb-4">
<!-- builder -->
<div class="col-12 col-lg-3 mb-3">
<div class="card card-link card-link-pop">
<div class="card-header">
<div class="">Website Builder</div>
<div class="card-actions">
<div class="dropdown">
<a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a id="home_enter_builder" class="dropdown-item" href="#">Enter</a>
<!-- <a class="dropdown-item" href="#">Change permissions</a>
<a class="dropdown-item text-danger" href="#">Delete user</a> -->
</div>
</div>
</div>
</div>
<div class="card-body">
</div>
</div>
</div>
<!-- editor -->
<div class="col-12 col-lg-3 mb-3">
<div class="card card-link card-link-pop">
<div class="card-header">
<div class="">Editor</div>
<div class="card-actions">
<div class="dropdown">
<a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a id="home_enter_editor" class="dropdown-item" href="#">Enter</a>
<!-- <a class="dropdown-item" href="#">Change permissions</a>
<a class="dropdown-item text-danger" href="#">Delete user</a> -->
</div>
</div>
</div>
</div>
<div class="card-body">
</div>
</div>
</div>
<!-- email -->
<div class="col-12 col-lg-3 mb-3">
<div class="card card-link card-link-pop">
<div class="card-header">
<div class="">Email</div>
<div class="card-actions">
<div class="dropdown">
<a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a id="home_enter_email" class="dropdown-item" href="#">Enter</a>
<!-- <a class="dropdown-item" href="#">Change permissions</a>
<a class="dropdown-item text-danger" href="#">Delete user</a> -->
</div>
</div>
</div>
</div>
<div class="card-body">
</div>
</div>
</div>
<!-- analytics-->
<div class="col-12 col-lg-3 mb-3">
<div class="card card-link card-link-pop">
<div class="card-header">
<div class="">Analytics</div>
<div class="card-actions">
<div class="dropdown">
<a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a id="home_enter_analytics" class="dropdown-item" href="#">Enter</a>
<!-- <a class="dropdown-item" href="#">Change permissions</a>
<a class="dropdown-item text-danger" href="#">Delete user</a> -->
</div>
</div>
</div>
</div>
<div class="card-body">
</div>
</div>
</div>
</div>
<div class="row"><h3 class=" d-flex justify-content-left" >Modules</h3></div>
<div class="row mt-3">
<!-- paypment processing -->
<div class="col-12 col-lg-3 mb-3">
<div class="card card-link card-link-pop">
<div class="card-header">
<div class="">Payments</div>
<div class="card-actions">
<div class="dropdown">
<a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a id="home_enter_paypmanet_processing" class="dropdown-item" href="#">Enter</a>
<!-- <a class="dropdown-item" href="#">Change permissions</a>
<a class="dropdown-item text-danger" href="#">Delete user</a> -->
</div>
</div>
</div>
</div>
<div class="card-body">
</div>
</div>
</div>
<!-- forms -->
<div class="col-12 col-lg-3 mb-3">
<div class="card card-link card-link-pop">
<div class="card-header">
<div class="">Forms</div>
<div class="card-actions">
<div class="dropdown">
<a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a id="home_enter_forms" class="dropdown-item" href="#">Enter</a>
<!-- <a class="dropdown-item" href="#">Change permissions</a>
<a class="dropdown-item text-danger" href="#">Delete user</a> -->
</div>
</div>
</div>
</div>
<div class="card-body">
</div>
</div>
</div>
<!-- sponsorship-->
<div class="col-12 col-lg-3 mb-3">
<div class="card card-link card-link-pop">
<div class="card-header">
<div class="">Sponsorships</div>
<div class="card-actions">
<div class="dropdown">
<a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a id="home_enter_sponsorship" class="dropdown-item" href="#">Enter</a>
<!-- <a class="dropdown-item" href="#">Change permissions</a>
<a class="dropdown-item text-danger" href="#">Delete user</a> -->
</div>
</div>
</div>
</div>
<div class="card-body">
</div>
</div>
</div>
<!-- donations -->
<div class="col-12 col-lg-3 mb-3">
<div class="card card-link card-link-pop">
<div class="card-header">
<div class="">Donations</div>
<div class="card-actions">
<div class="dropdown">
<a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a id="home_enter_donations" class="dropdown-item" href="#">Enter</a>
<!-- <a class="dropdown-item" href="#">Change permissions</a>
<a class="dropdown-item text-danger" href="#">Delete user</a> -->
</div>
</div>
</div>
</div>
<div class="card-body">
</div>
</div>
</div>
<!-- events -->
<div class="col-12 col-lg-3 mb-3">
<div class="card card-link card-link-pop">
<div class="card-header">
<div class="">Events</div>
<div class="card-actions">
<div class="dropdown">
<a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a id="home_enter_events" class="dropdown-item" href="#">Enter</a>
<!-- <a class="dropdown-item" href="#">Change permissions</a>
<a class="dropdown-item text-danger" href="#">Delete user</a> -->
</div>
</div>
</div>
</div>
<div class="card-body">
</div>
</div>
</div>
<!-- contactus -->
<div class="col-12 col-lg-3 mb-3">
<div class="card card-link card-link-pop">
<div class="card-header">
<div class="">Contact Us</div>
<div class="card-actions">
<div class="dropdown">
<a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a id="home_enter_contactus" class="dropdown-item" href="#">Enter</a>
<!-- <a class="dropdown-item" href="#">Change permissions</a>
<a class="dropdown-item text-danger" href="#">Delete user</a> -->
</div>
</div>
</div>
</div>
<div class="card-body">
</div>
</div>
</div>
<!-- subscribers -->
<div class="col-12 col-lg-3 mb-3">
<div class="card card-link card-link-pop">
<div class="card-header">
<div class="">Subscribers</div>
<div class="card-actions">
<div class="dropdown">
<a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a id="home_enter_subscribers" class="dropdown-item" href="#">Enter</a>
<!-- <a class="dropdown-item" href="#">Change permissions</a>
<a class="dropdown-item text-danger" href="#">Delete user</a> -->
</div>
</div>
</div>
</div>
<div class="card-body">
</div>
</div>
</div>
<!-- gallery -->
<div class="col-12 col-lg-3 mb-3">
<div class="card card-link card-link-pop">
<div class="card-header">
<div class="">Gallery</div>
<div class="card-actions">
<div class="dropdown">
<a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a id="home_enter_gallery" class="dropdown-item" href="#">Enter</a>
<!-- <a class="dropdown-item" href="#">Change permissions</a>
<a class="dropdown-item text-danger" href="#">Delete user</a> -->
</div>
</div>
</div>
</div>
<div class="card-body">
</div>
</div>
</div>
<!-- resource listings -->
<div class="col-12 col-lg-3 mb-3">
<div class="card card-link card-link-pop">
<div class="card-header">
<div class="">Resource Listings</div>
<div class="card-actions">
<div class="dropdown">
<a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a id="home_enter_resource_listing" class="dropdown-item" href="#">Enter</a>
<!-- <a class="dropdown-item" href="#">Change permissions</a>
<a class="dropdown-item text-danger" href="#">Delete user</a> -->
</div>
</div>
</div>
</div>
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">Domain Console</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">&copy;2024 Appfactory Studio inc.</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>

View File

@@ -0,0 +1,4 @@
<h3>Admin</h3>

View File

@@ -0,0 +1,147 @@
<div class="main_container_container" style="">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Overview
</div>
<h2 class="page-title">
Settings Options
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
<span class="d-none d-sm-inline">
<!-- <a href="#" class="btn btn-outline-dark log_out_link">
Logout
</a> -->
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl" style="height: 100vh;overflow-y: scroll;">
<div id="content_container">
<div class="container-fluid">
<div class="row">
<h3>Options</h3>
</div>
<div class="row">
<div class="col-lg-6 border p-3">
<div class="mb-3">
<label class="form-label">Dashboard Display</label>
<input id="dashboard_display" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Company Name</label>
<input id="options_company_name" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Company Address</label>
<input id="options_company_address" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Company Phone</label>
<input id="options_company_phone" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Copyright Short</label>
<input id="options_copyright_short" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Copyright Long</label>
<input id="options_copyright_long" type="text" class="form-control">
</div>
<button id="submit_update_settings" class="btn">Update</button>
</div>
</div>
<div class="row">
<div class="col-lg-6 border p-3 mt-3">
<h4 class="form-label">Social Media Links</h4>
<div class="mb-3">
<label class="form-label">Facebook</label>
<input id="social_media_facebook_input" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">X (Twitter)</label>
<input id="social_media_twitter_input" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Instagram</label>
<input id="social_media_instagram_input" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Youtube</label>
<input id="social_media_youtube_input" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">LinkedIn</label>
<input id="social_media_linkedin_input" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">TikTok</label>
<input id="social_media_tiktok_input" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Discord</label>
<input id="social_media_discord_input" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Twitch</label>
<input id="social_media_twitch_input" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Pinterest</label>
<input id="social_media_pinterest_input" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Threads</label>
<input id="social_media_threads_input" type="text" class="form-control">
</div>
<button id="submit_update_social_medial_links" class="btn">Update</button>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">Domain Console</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">&copy;2024 Appfactory Studio inc.</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>

View File

@@ -0,0 +1,6 @@
<h3>Resource List Management</h3>

View File

@@ -0,0 +1,53 @@
<div class="main_container_container" style="">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Overview
</div>
<h2 class="page-title">
Settings Schema
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
<span class="d-none d-sm-inline">
<!-- <a href="#" class="btn btn-outline-dark log_out_link">
Logout
</a> -->
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl" style="height: 100vh;overflow-y: scroll;">
<div id="content_container"></div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">Domain Console</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">&copy;2024 Appfactory Studio inc.</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>

View File

@@ -0,0 +1,89 @@
<div class="">
<div class="card-body" style="display: none;">
<h2 class="mb-4">My Account</h2>
<h3 class="card-title">Profile Details</h3>
<div id="insidecontainer" style="display: none;">
</div>
<div class="row align-items-center">
<div class="col-auto"><span class="avatar avatar-xl" style="background-image: url(/assets/logo.png)"></span>
</div>
<div class="col-auto"><a href="#" class="btn">
Change avatar
</a></div>
<div class="col-auto"><a href="#" class="btn btn-ghost-danger">
Delete avatar
</a></div>
</div>
<h3 class="card-title mt-4">Business Profile</h3>
<div class="row g-3">
<div class="col-md">
<div class="form-label">Business Name</div>
<input type="text" class="form-control" value="">
</div>
<div class="col-md">
<div class="form-label">Business ID</div>
<input type="text" class="form-control" value="">
</div>
<div class="col-md">
<div class="form-label">Location</div>
<input type="text" class="form-control" value="">
</div>
</div>
<h3 class="card-title mt-4">Email</h3>
<p class="card-subtitle">This contact will be shown to others publicly, so choose it carefully.</p>
<div>
<div class="row g-2">
<div class="col-auto">
<input type="text" class="form-control w-auto" value="">
</div>
<div class="col-auto"><a href="#" class="btn">
Change
</a></div>
</div>
</div>
<h3 class="card-title mt-4">Password</h3>
<p class="card-subtitle">You can set a permanent password if you don't want to use temporary login codes.</p>
<div>
<a href="#" class="btn">
Set new password
</a>
</div>
<h3 class="card-title mt-4">Public profile</h3>
<p class="card-subtitle">Making your profile public means that anyone on the Dashkit network will be able to find
you.</p>
<div>
<label class="form-check form-switch form-switch-lg">
<input class="form-check-input" type="checkbox">
<span class="form-check-label form-check-label-on">You're currently visible</span>
<span class="form-check-label form-check-label-off">You're
currently invisible</span>
</label>
</div>
</div>
<div class="card-footer bg-transparent mt-auto" style="display: none;">
<div class="btn-list justify-content-end">
<a href="#" class="btn">
Cancel
</a>
<a href="#" class="btn btn-primary">
Submit
</a>
</div>
</div>
<div class="card-body" style="min-height: 550px;">
<h2 class="mb-4">My Account</h2>
<h3 class="card-title">Profile Details</h3>
</div>
</div>

View File

@@ -0,0 +1,38 @@
<div class="">
<div class="">
<div class="card">
<div class="row g-0">
<div class="col-12 col-md-3 border-end">
<div class="card-body">
<h4 class="subheader">Domain settings</h4>
<div class="list-group list-group-transparent">
<a id="settings_nav_account_btn" href="#" class="mysettings_nav_link list-group-item list-group-item-action d-flex align-items-center active">
Account
</a>
<!-- <a id="settings_nav_notifications_btn" href="#" class="mysettings_nav_link list-group-item list-group-item-action d-flex align-items-center">Notifications</a> -->
<a id="settings_nav_options_btn" href="#" class="mysettings_nav_link list-group-item list-group-item-action d-flex align-items-center">
Options
</a>
<!--
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">Connected Apps</a>
<a href="./settings-plan.html" class="list-group-item list-group-item-action d-flex align-items-center">Plans</a>
-->
</div>
<!-- <h4 class="subheader mt-4">Experience</h4>
<div class="list-group list-group-transparent">
<a id="settings_nav_feedback_btn" href="#" class="mysettings_nav_link list-group-item list-group-item-action">Give Feedback</a>
</div> -->
</div>
</div>
<div class="col-12 col-md-9 d-flex flex-column">
<div id="settings_container" style="min-height: 550;"></div>
</div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,8 @@
<div class="col-12 col-md-9 d-flex flex-column">
<div class="card-body">
<h2 class="mb-4">Feedback</h2>
<h3 class="card-title">Setting Options</h3>
</div>
</div>

View File

@@ -0,0 +1,35 @@
<div class="col-12 col-md-9 d-flex flex-column">
<div class="card-body">
<h2 class="mb-4">Notifications</h2>
<div class="container-fluid">
<div id="content_container"></div>
</div>
</div>
</div>

View File

@@ -0,0 +1,239 @@
<div class="col-12 col-md-9 d-flex flex-column">
<div class="card-body">
<h2 class="mb-4">Options</h2>
<h3 class="card-title">Setting Options</h3>
<div id="content_container2">
<div class="accordion" id="accordion-example">
<!-- Dashboard -->
<div class="auth0 auth0_s_dashboard accordion-item">
<h2 class="accordion-header" id="heading-1">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="false">
Dashboard
</button>
</h2>
<div id="collapse-1" class="accordion-collapse collapse" data-bs-parent="#accordion-example" style="">
<div class="accordion-body pt-0">
<div class="col-lg-12 p-3 mb-5">
<div class="mb-3">
<label class="form-label">Dashboard Display</label>
<input id="dashboard_display" type="text" class="auth0 auth0_s_dashboard_label_input form-control">
</div>
<div class="mb-3">
<div class="form-label">Icon</div>
<select id="options_select_dashboard_icon_id" class="form-select"></select>
</div>
<button id="submit_update_settings_dashboard" class="auth0 auth0_s_dashboard_label_btn btn btn-outline-dark">Update</button>
</div>
</div>
</div>
</div>
<!-- company -->
<div class="auth0 auth0_s_company accordion-item">
<h2 class="accordion-header" id="heading-1">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-12" aria-expanded="false">
Company
</button>
</h2>
<div id="collapse-12" class="accordion-collapse collapse" data-bs-parent="#accordion-example" style="">
<div class="accordion-body pt-0">
<div class="col-lg-12 p-3 mb-5">
<div class="mb-3">
<label class="form-label">Company Name</label>
<input id="options_company_name" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Company Address</label>
<input id="options_company_address" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Company Phone</label>
<input id="options_company_phone" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Copyright Short</label>
<input id="options_copyright_short" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Copyright Long</label>
<input id="options_copyright_long" type="text" class="form-control">
</div>
<button id="submit_update_settings" class="btn btn-outline-dark">Update</button>
</div>
</div>
</div>
</div>
<!-- Social Media Links -->
<div class="auth0 auth0_s_sml accordion-item">
<h2 class="accordion-header" id="heading-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false">
Social Media Links
</button>
</h2>
<div id="collapse-2" class="accordion-collapse collapse" data-bs-parent="#accordion-example">
<div class="accordion-body pt-0">
<div class="col-12 p-3 mb-5">
<div class="mb-3">
<label class="form-label">Facebook</label>
<input id="social_media_facebook_input" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">X (Twitter)</label>
<input id="social_media_twitter_input" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Instagram</label>
<input id="social_media_instagram_input" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Youtube</label>
<input id="social_media_youtube_input" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">LinkedIn</label>
<input id="social_media_linkedin_input" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">TikTok</label>
<input id="social_media_tiktok_input" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Discord</label>
<input id="social_media_discord_input" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Twitch</label>
<input id="social_media_twitch_input" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Pinterest</label>
<input id="social_media_pinterest_input" type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Threads</label>
<input id="social_media_threads_input" type="text" class="form-control">
</div>
<button id="submit_update_social_medial_links" class="btn btn-outline-dark">Update</button>
</div>
</div>
</div>
</div>
<!-- Brand -->
<div class="auth0 auth0_s_brand accordion-item">
<h2 class="accordion-header" id="heading-3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="false">
Brand
</button>
</h2>
<div id="collapse-3" class="accordion-collapse collapse" data-bs-parent="#accordion-example">
<div class="accordion-body pt-0">
<div class="col-12 p-3 mb-5">
<div class="mb-3">
<label class="form-label">Primary Color 1</label>
<input id="brand_primary_color_1_id" type="text" class="form-control">
<input type="color" id="brand_primary_color_1_picker" class="form-control form-control-color" value="#ffffff" title="Choose your color">
</div>
<div class="mb-3">
<label class="form-label">Primary Color 2</label>
<input id="brand_primary_color_2_id" type="text" class="form-control">
<input type="color" id="brand_primary_color_2_picker" class="form-control form-control-color" value="#ffffff" title="Choose your color">
</div>
<div class="mb-3">
<label class="form-label">Primary Color 3</label>
<input id="brand_primary_color_3_id" type="text" class="form-control">
<input type="color" id="brand_primary_color_3_picker" class="form-control form-control-color" value="#ffffff" title="Choose your color">
</div>
<div class="mb-3">
<label class="form-label">Logo 1</label>
<!-- <input id="brand_primary_logo_1" type="text" class="form-control"> -->
<select class="form-control" name="brand_primary_logo_1" id="brand_primary_logo_1"></select>
</div>
<div class="mb-3">
<label class="form-label">Logo 2</label>
<!-- <input id="brand_primary_logo_2" type="text" class="form-control"> -->
<select class="form-control" name="brand_primary_logo_2" id="brand_primary_logo_2"></select>
</div>
<div class="mb-3">
<label class="form-label">Logo 3</label>
<!-- <input id="brand_primary_logo_3" type="text" class="form-control"> -->
<select class="form-control" name="brand_primary_logo_3" id="brand_primary_logo_3"></select>
</div>
<div class="mb-3">
<label class="form-label">Favicon</label>
<input id="brand_primary_favicon_1" type="text" class="form-control">
</div>
<button id="submit_update_brand" class="btn btn-outline-dark">Update</button>
</div>
</div>
</div>
</div>
<!-- company -->
<div class="auth0 auth0_s_company accordion-item">
<h2 class="accordion-header" id="heading-1">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-website" aria-expanded="false">
Website
</button>
</h2>
<div id="collapse-website" class="accordion-collapse collapse" data-bs-parent="#accordion-example" style="">
<div class="accordion-body pt-0">
<div class="col-lg-12 p-3 mb-5">
<div class="mb-3">
<div class="form-label">Website Custom Deployment</div>
<div>
<label class="form-check form-check-inline">
<input class="form-check-input" value="on" id="website_deployment_on" type="radio" name="website_deployment_type">
<span class="form-check-label">On</span>
</label>
<label class="form-check form-check-inline">
<input class="form-check-input" value="off" id="website_deployment_off" type="radio" name="website_deployment_type">
<span class="form-check-label">Off</span>
</label>
</div>
</div>
<button id="submit_update_settings_website" class="btn btn-outline-dark">Update</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,8 @@
<div class="col-12 col-md-9 d-flex flex-column">
<div class="card-body">
<h2 class="mb-4">Schema</h2>
<h3 class="card-title">Setting Options</h3>
</div>
</div>

View File

@@ -0,0 +1,242 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<style>
.login-container{
margin-top: 5%;
margin-bottom: 5%;
}
.login-form-1{
padding: 5%;
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
}
.login-form-1 h3{
text-align: center;
color: #333;
}
.login-form-2{
padding: 5%;
background: #0062cc;
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
}
.login-form-2 h3{
text-align: center;
color: #fff;
}
.login-container form{
padding: 10%;
}
.btnSubmit
{
width: 100%;
border-radius: 1rem;
padding: 1.5%;
border: none;
cursor: pointer;
}
.login-form-1 .btnSubmit{
font-weight: 600;
color: #fff;
background-color: #4681f4;
}
.login-form-2 .btnSubmit{
font-weight: 600;
color: #4681f4;
background-color: #fff;
}
.login-form-2 .ForgetPwd{
color: #fff;
font-weight: 600;
text-decoration: none;
}
.login-form-1 .ForgetPwd{
color: grey;
font-weight: 600;
text-decoration: none;
}
@media only screen and (max-width: 920px) {
.login-container{
margin-top: 25%;
}
}
@media screen and (min-width: 921px) {
}
@media screen and (min-width: 1800px) {
}
@media screen and (min-width: 1264px) {
}
.display_none {
display: none;
}
</style>
<div class="container login-container">
<div class="row justify-content-center">
<div id="login-form" class="col-10 col-lg-6 login-form-1 justify-content-center">
<div class="col-12 col-lg-12 justify-content-center">
<div class="row justify-content-center">
<div class="col-12 col-lg-12 justify-content-center">
<h3 style="text-align: center;"><strong>Cradle2Career</strong></h3>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-12">
<p style="text-align: center;">Web Console Login</p>
</div>
</div>
</div>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Email " value="" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password " value="" />
</div>
<div class="form-group">
<input type="submit" id="login-input-btn" class="btnSubmit" value="Login" />
</div>
<div class="form-group">
<a href="#" id="forget-password-btn" class="ForgetPwd">Forget Password?</a>
</div>
</form>
</div>
<div id="register-form" class="col-10 col-lg-6 login-form-1 justify-content-center display_none">
<div class="col-12 col-lg-12 justify-content-center">
<h5><strong>Cradle2Career</strong> <br>Web Console Login</h5>
</div>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Email " value="" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password " value="" />
</div>
<div class="form-group">
<input type="submit" id="register-input-btn" class="btnSubmit" value="Register" />
</div>
<div class="form-group">
<input type="submit" id="page-login-btn" class="btnSubmit" value="Login" />
</div>
</form>
</div>
</div>
</div>
<script>
$('#login-input-btn').on('click',function(e){
e.preventDefault();
});
$('#register-input-btn').on('click',function(e){
e.preventDefault();
});
$('#page-register-btn').on('click',function(e){
e.preventDefault();
});
$('#page-login-btn').on('click',function(e){
e.preventDefault();
});
$('#forget-password-btn').on('click',function(e){
e.preventDefault();
});
</script>
</body>
</html>

View File

@@ -0,0 +1,20 @@
<div class="table-responsive">
<table class="table card-table table-vcenter text-nowrap datatable">
<thead>
<tr>
<th class="w-1"></th>
<th>Day</th>
<th>Start Time</th>
<th>End Time</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
<td><span class="text-secondary">02/20/2024</span></td>
<td><span class="text-secondary">3:33 am</span></td>
<td><span class="text-secondary">3:33 am</span></td>
</tr>
</tbody>
</table>
</div>

View File

@@ -0,0 +1,21 @@
<div class="p-2 g-col-12 g-col-lg-3 form_card_btn">
<div class="card card-link card-link-pop" style="height: 100%;">
<div class="card-header" style="border-bottom: none;height: 100%;">
<div class="">${form_name}</div>
<div class="card-actions">
<div class="dropdown">
<a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a id="${edite_id}" class="dropdown-item" href="#">Enter</a>
<!-- <a id="${submissions_id}" class="dropdown-item" href="#">Submissions</a> -->
<!-- <a id="${delete_id}" class="dropdown-item" href="#">Delete</a> -->
</div>
</div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,25 @@
<tr>
<td><input id="${selection_check_id}" class="form-check-input m-0 align-middle" type="checkbox" aria-label=""></td>
<td><span class="text-secondary">${username_label}</span></td>
<td><span class="text-secondary">${email_label}</span></td>
<td><span class="text-secondary">${displayname_label}</span></td>
<td><span class="text-secondary">${membership_label}</span></td>
<td><span class="text-secondary">${date_label}</span></td>
<td class="">
<span class="dropdown">
<button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">Actions</button>
<div class="dropdown-menu dropdown-menu-end">
<a id="${action_open_id}" class="dropdown-item" href="#">
Open
</a>
<!-- <a id="${action_2}" class="dropdown-item" href="#">
Another action
</a> -->
</div>
</span>
</td>
</tr>

View File

@@ -0,0 +1,124 @@
<div class="main_container_container" style="">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Module
</div>
<h2 class="page-title">
Access
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
<a id="form_settings_btn" href="#" class="btn btn-outline-dark">Settings</a>
<span class="d-none d-sm-inline">
<a id="back_to_brain" href="#" class="btn btn-outline-dark">
Back
</a>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl" style="height: 100vh;overflow-y: scroll;">
<div id="content_container">
<style>
@media only screen and (min-width: 768px) {
.form_card_btn{ height: 175px;}
.form_card_btn:hover {cursor: pointer; }
}
</style>
<div class="grid gap-3" id="access_buttons_list_container"></div>
<div class="row"></div>
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">Domain Console</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">&copy;2024 Appfactory Studio inc.</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
<!-- Create new form -->
<div class="modal modal-blur fade" id="modal-report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Create new form</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal">
Cancel
</a>
<a href="#" class="btn btn-primary ms-auto" data-bs-dismiss="modal">
<!-- Download SVG icon from http://tabler-icons.io/i/plus -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
Create
</a>
</div>
</div>
</div>
</div>
<!-- create form -->
<div class="modal modal-blur fade" id="modal_create_access" tabindex="-1" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Create Access</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<!-- <div class="col-auto">
<a href="#" class="avatar avatar-upload rounded">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg>
<span class="avatar-upload-text">Add</span>
</a>
</div> -->
<div class="col">
<label class="form-label">Access Name</label>
<input id="new_access_name_input" type="text" class="form-control">
</div>
<div class="col">
<label class="form-label">Display Name</label>
<input id="new_access_displayname_input" type="text" class="form-control">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Cancel</button>
<button type="button" id="modal_create_new_access_btn" class="btn btn-primary">Create</button>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,6 @@
<div id="email_manager_contaner"></div>

View File

@@ -0,0 +1,120 @@
<div class="main_container_container" style="">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Access Module
</div>
<h2 class="page-title">
Settings
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
<a id="access_settings_btn" href="#" class="btn btn-outline-dark">Back</a>
<span class="d-none d-sm-inline">
<a href="#" class="btn btn-outline-dark log_out_link">
Logout
</a>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl" style="height: 100vh;overflow-y: scroll;">
<div id="content_container">
<style>
@media only screen and (min-width: 768px) {
.form_card_btn{ height: 175px;}
.form_card_btn:hover {cursor: pointer; }
}
</style>
<div class="grid gap-3" id="access_buttons_list_container"></div>
<div class="row"></div>
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">Domain Console</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">&copy;2024 Appfactory Studio inc.</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
<!-- Create new form -->
<div class="modal modal-blur fade" id="modal-report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Create new form</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal">
Cancel
</a>
<a href="#" class="btn btn-primary ms-auto" data-bs-dismiss="modal">
<!-- Download SVG icon from http://tabler-icons.io/i/plus -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
Create
</a>
</div>
</div>
</div>
</div>
<!-- create form -->
<div class="modal modal-blur fade" id="modal_create_form" tabindex="-1" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Create A Form</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<!-- <div class="col-auto">
<a href="#" class="avatar avatar-upload rounded">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg>
<span class="avatar-upload-text">Add</span>
</a>
</div> -->
<div class="col">
<label class="form-label">Form Name</label>
<input id="new_form_name_input" type="text" class="form-control">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Cancel</button>
<button type="button" id="modal_create_new_form_btn" class="btn btn-primary">Create</button>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,151 @@
<div class="main_container_container" style="">
<!-- Page header -->
<div class="page-header">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Overview
</div>
<h2 class="page-title">
Brain
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
<span class="d-none d-sm-inline">
<!-- <a href="#" class="btn btn-outline-dark log_out_link">
Logout
</a> -->
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl" style="height: 100vh;overflow-y: scroll;">
<div id="content_container">
<div class="row">
<div class="col-12 col-md-6">
<button id="brain_controller_btn" class="btn btn-outline-dark w-100 mb-3">Controller</button>
</div>
<div class="col-12 col-md-6">
<button id="brain_dns_btn" class="btn btn-outline-dark w-100 mb-3">DNS Servers</button>
</div>
<div class="col-12 col-md-6">
<button id="brain_httpd_btn" class="btn btn-outline-dark w-100 mb-3">HTTP Servers</button>
</div>
<div class="col-12 col-md-6">
<button id="brain_membership_btn" class="btn btn-outline-dark w-100 mb-3">Memberships</button>
</div>
<div class="col-12 col-md-6">
<button id="brain_logs_btn" class="btn btn-outline-dark w-100 mb-3">Logs</button>
</div>
</div>
<!-- <div class="row my-5">
<div class="col-12 border p-4">
<div id="brain_editor_id"></div>
</div>
<button id="save_brain_config_btn_id" class="btn btn-outline-dark w-100">Save</button>
</div> -->
<!-- <div class="row mt-5">
<div class="col-12 border p-4">
<div id="http_servers_editor"></div>
</div>
<button id="save_brain_http_config_btn_id" class="btn btn-outline-dark w-100">Save</button>
</div> -->
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">Domain Console</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">&copy;2024 Appfactory Studio inc.</a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- modal -->
<div class="modal modal-blur fade" id="modal_email_update_account" tabindex="-1" role="dialog" aria-modal="true" style="display: none; padding-left: 0px;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal_email_update_account_title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col">
<div class="mb-3">
<div class="form-label">Type</div>
<div>
<label class="form-check form-check-inline">
<input value="1" id="email_type_public_radio_btn" class="form-check-input" type="radio" name="typestatusradio" checked="">
<span class="form-check-label">Public</span>
</label>
<label class="form-check form-check-inline">
<input value="0" id="email_type_private_radio_btn" class="form-check-input" type="radio" name="typestatusradio">
<span class="form-check-label">Private</span>
</label>
</div>
</div>
<div class="my-4">
<div class="row">
<div class="col-12 col-md-3">
<button id="delete_email_account" class="btn btn-danger w-100">Delete</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" id="update_email_account_from_modal" class="btn btn-primary">Update</button>
</div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,192 @@
<div class="main_container_container" style="">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Overview
</div>
<h2 class="page-title">
Brain Controller
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
<a href="#" id="back_to_init" class="btn btn-outline-dark">Back</a>
<!-- <span class="d-none d-sm-inline">
<a href="#" class="btn btn-outline-dark log_out_link">
Logout
</a>
</span> -->
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl" style="height: 100vh;overflow-y: scroll;">
<div id="content_container">
<div class="container-flu">
<div class="row">
<div class="col-9">
<div id="schema_container_controller"></div>
</div>
</div>
<div class="row">
<div class="col-9">
<button id="save_brain_controller_btn_id" class="btn btn-outline-dark w-100">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">Domain Console</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">&copy;2024 Appfactory Studio inc.</a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- modal server -->
<div class="modal modal-blur fade" id="modal_create_server" tabindex="-1" role="dialog" aria-modal="true" style="display: none; padding-left: 0px;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal_create_cluster_title">Create Server</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col">
<div class="mb-3">
<div>
<div class="mb-3">
<label class="form-label">IPv4</label>
<input id="server_ipv4_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" id="create_server_btn_modal" class="btn btn-primary">Create</button>
</div>
</div>
</div>
</div>
<!-- modal cluster -->
<div class="modal modal-blur fade" id="modal_create_cluster" tabindex="-1" role="dialog" aria-modal="true" style="display: none; padding-left: 0px;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal_create_cluster_title">Create Cluster</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col">
<div class="mb-3">
<div>
<div class="mb-3">
<label class="form-label">Head</label>
<input id="cluster_head_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
<div class="mb-3">
<label class="form-label">Proxy</label>
<input id="cluster_proxy_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" id="create_cluster_btn_modal" class="btn btn-primary">Create</button>
</div>
</div>
</div>
</div>
<!-- modal delete server -->
<div class="modal modal-blur fade" id="modal_danger_delete_server" tabindex="-1" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-status bg-danger"></div>
<div class="modal-body text-center py-4">
<!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-danger icon-lg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 9v4"></path><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"></path><path d="M12 16h.01"></path></svg>
<h3>Are you sure?</h3>
<div class="text-secondary">Do you really want to remove delete the server. Cannot be undone</div>
</div>
<div class="modal-footer">
<div class="w-100">
<div class="row">
<div class="col"><a href="#" class="btn w-100" data-bs-dismiss="modal">
Cancel
</a></div>
<div class="col"><a href="#" id="modal_btn_delete_server" class="btn btn-danger w-100" data-bs-dismiss="modal">
</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,490 @@
<div class="main_container_container" style="">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Overview
</div>
<h2 class="page-title">
HTTP Servers
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
<a href="#" id="back_to_init" class="btn btn-outline-dark">Back</a>
<span class="d-none d-sm-inline">
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<!-- <div class="container-xl" style="height: 100vh;overflow-y: scroll;"> -->
<div class="container-xl">
<div id="content_container">
<div class="col-12">
<div class="card" style="min-height: 400px;">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs nav-fill" data-bs-toggle="tabs" role="tablist">
<li class="nav-item" role="presentation">
<a href="#tabs-home-5" class="nav-link active" data-bs-toggle="tab" aria-selected="true" role="tab">Servers</a>
</li>
<li class="nav-item" role="presentation">
<a href="#tabs-tenants-5" class="nav-link" data-bs-toggle="tab" aria-selected="false" role="tab">Tenants</a>
</li>
<li class="nav-item" role="presentation">
<a href="#tabs-profile-5" class="nav-link" data-bs-toggle="tab" aria-selected="false" tabindex="-1" role="tab">Clusters</a>
</li>
<li class="nav-item" role="presentation">
<a href="#tabs-regions-5" class="nav-link" data-bs-toggle="tab" aria-selected="false" tabindex="-1" role="tab">Regions</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active show" id="tabs-home-5" role="tabpanel">
<div class="row">
<button id="add_server_btn_id" class="btn btn-outline-success w-100 mb-3">Add Server</button>
<button id="create_update_config_btn_id" class="btn btn-outline-success w-100 mb-4">Create Portal Config</button>
<div class="row">
<div class="col-12">
<div class="mb-3">
<div class="form-label">Sort</div>
<div>
<label class="form-check form-check-inline">
<input id="sort_servers_radio_all_id" value="All" class="form-check-input" type="radio" name="sort_servers_radios" checked="">
<span class="form-check-label">All</span>
</label>
<label class="form-check form-check-inline">
<input id="sort_servers_radio_enterprise_id" value="Enterprise" class="form-check-input" type="radio" name="sort_servers_radios">
<span class="form-check-label">Enterprise</span>
</label>
<label class="form-check form-check-inline">
<input id="sort_servers_radio_head_id" value="Head" class="form-check-input" type="radio" name="sort_servers_radios">
<span class="form-check-label">Head</span>
</label>
<label class="form-check form-check-inline">
<input id="sort_servers_radio_standby_id" value="Standby" class="form-check-input" type="radio" name="sort_servers_radios">
<span class="form-check-label">Standby</span>
</label>
<label class="form-check form-check-inline">
<input id="sort_servers_radio_proxy_id" value="Proxy" class="form-check-input" type="radio" name="sort_servers_radios">
<span class="form-check-label">Proxy</span>
</label>
<label class="form-check form-check-inline">
<input id="sort_servers_radio_clone_id" value="Clone" class="form-check-input" type="radio" name="sort_servers_radios">
<span class="form-check-label">Clone</span>
</label>
<label class="form-check form-check-inline">
<input id="sort_servers_radio_backup_id" value="Backup" class="form-check-input" type="radio" name="sort_servers_radios">
<span class="form-check-label">Backup</span>
</label>
</div>
</div>
</div>
</div>
<div id="http_servers_editor"></div>
</div>
</div>
<div class="tab-pane" id="tabs-tenants-5" role="tabpanel">
<h4>Tenants</h4>
<div id="tenants_container_id" class="my-5"></div>
</div>
<div class="tab-pane" id="tabs-profile-5" role="tabpanel">
<h4>Clusters</h4>
<button id="add_clusters_btn_id" class="btn btn-outline-success w-100 mb-4">Add Cluster</button>
<div id="clusters_container_id" class="my-5"></div>
</div>
<div class="tab-pane" id="tabs-regions-5" role="tabpanel">
<h4>Regions</h4>
<button id="add_region_btn_id" class="btn btn-outline-success w-100 mb-4">Add Region</button>
<div id="" class="my-5"></div>
<div class="col-12">
<div class="card">
<div class="table-responsive">
<table class="table table-vcenter card-table">
<thead>
<tr>
<th>Name</th>
<th>Location</th>
<th class="w-1"></th>
</tr>
</thead>
<tbody id="region_container_id">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">Domain Console</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">&copy;2024 Appfactory Studio inc.</a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- modal server -->
<div class="modal modal-blur fade" id="modal_create_server" tabindex="-1" role="dialog" aria-modal="true" style="display: none; padding-left: 0px;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal_create_cluster_title">Create Server</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col">
<div class="mb-3">
<div>
<div class="mb-3">
<label class="form-label">IPv4</label>
<input id="server_ipv4_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" id="create_server_btn_modal" class="btn btn-primary">Create</button>
</div>
</div>
</div>
</div>
<!-- modal cluster -->
<div class="modal modal-blur fade" id="modal_create_cluster" tabindex="-1" role="dialog" aria-modal="true" style="display: none; padding-left: 0px;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal_create_cluster_title">Create Cluster</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col">
<div class="mb-3">
<div>
<div class="mb-3">
<label class="form-label">Head</label>
<input id="cluster_head_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
<div class="mb-3">
<label class="form-label">Proxy</label>
<input id="cluster_proxy_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" id="create_cluster_btn_modal" class="btn btn-primary">Create</button>
</div>
</div>
</div>
</div>
<!-- modal delete server -->
<div class="modal modal-blur fade" id="modal_danger_delete_server" tabindex="-1" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-status bg-danger"></div>
<div class="modal-body text-center py-4">
<!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-danger icon-lg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 9v4"></path><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"></path><path d="M12 16h.01"></path></svg>
<h3>Are you sure?</h3>
<div class="text-secondary">Do you really want to remove delete the server. Cannot be undone</div>
</div>
<div class="modal-footer">
<div class="w-100">
<div class="row">
<div class="col"><a href="#" class="btn w-100" data-bs-dismiss="modal">
Cancel
</a></div>
<div class="col"><a href="#" id="modal_btn_delete_server" class="btn btn-danger w-100" data-bs-dismiss="modal">
</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- modal create tenant -->
<div class="modal modal-blur fade" id="modal_create_tenant" tabindex="-1" role="dialog" aria-modal="true" style="display: none; padding-left: 0px;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal_create_cluster_title">Create Tenant</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col">
<div class="mb-3">
<div>
<div class="mb-3">
<div class="form-label">Select Server</div>
<select id="tenant_servers_select_id" class="form-select"></select>
</div>
<div class="mb-3">
<label class="form-label">SystemUser</label>
<input id="tenant_systemuser_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
<div class="mb-3">
<label class="form-label">Subdomain</label>
<input id="tenant_subdomain_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
<div class="mb-3">
<label class="form-label">Username</label>
<input id="tenant_username_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
<div class="mb-3">
<label class="form-label">DB Name</label>
<input id="tenant_db_name_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
<div class="mb-3">
<label class="form-label">DB Password</label>
<input id="tenant_db_password_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
<div class="mb-3">
<label class="form-label">DB Host</label>
<input id="tenant_db_host_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
<div class="mb-3">
<label class="form-label">DB Username</label>
<input id="tenant_db_username_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
<div class="mb-3">
<label class="form-label">Member Reference Number</label>
<input id="tenant_member_ref_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
<div class="mb-3">
<label class="form-label">Address</label>
<input id="tenant_address_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
<div class="mb-3">
<label class="form-label">CertPrivateKeyLocation</label>
<input id="tenant_certprivate_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
<div class="mb-3">
<label class="form-label">CertPublicKeyLocation</label>
<input id="tenant_certpublic_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
<div class="mb-3">
<label class="form-label">CertPrivateKeyLocation2</label>
<input id="tenant_certprivate2_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
<div class="mb-3">
<label class="form-label">CertPublicKeyLocation2</label>
<input id="tenant_certpublic2_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
<div class="mb-3">
<label class="form-label">Domain</label>
<input id="tenant_domain_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
<div class="mb-3">
<label class="form-label">Domain2</label>
<input id="tenant_domain2_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" id="create_tenant_btn_modal" class="btn btn-primary">Create</button>
</div>
</div>
</div>
</div>
<!-- modal create region -->
<div class="modal modal-blur fade" id="modal_create_region" tabindex="-1" role="dialog" aria-modal="true" style="display: none; padding-left: 0px;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal_create_cluster_title">Create Region</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col">
<div class="mb-3">
<div>
<div class="mb-3">
<label class="form-label">Name</label>
<input id="region_head_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
<div class="mb-3">
<label class="form-label">Location</label>
<input id="location_head_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" id="create_region_btn_modal" class="btn btn-primary">Create</button>
</div>
</div>
</div>
</div>
<!-- modal update region -->
<div class="modal modal-blur fade" id="modal_update_region" tabindex="-1" role="dialog" aria-modal="true" style="display: none; padding-left: 0px;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal_update_cluster_title">Update Region</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col">
<div class="mb-3">
<div>
<div class="mb-3">
<label class="form-label">Name</label>
<input id="region_update_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
<div class="mb-3">
<label class="form-label">Location</label>
<input id="location_update_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" id="update_region_btn_modal" class="btn btn-primary">Update</button>
</div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,282 @@
<div class="main_container_container" style="">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Overview
</div>
<h2 class="page-title">
HTTP Servers - Manage Cluster
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
<a href="#" id="back_to_init" class="btn btn-outline-dark">Back</a>
<span class="d-none d-sm-inline">
<a href="#" class="btn btn-outline-dark log_out_link">
Logout
</a>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl" style="height: 100vh;overflow-y: scroll;">
<div id="content_container">
<div class="row my-5">
<div class="col-12">
<div id="clusters_container_id"></div>
<button id="save_cluster_btn_id" class="btn btn-outline-dark w-100">Save</button>
</div>
</div>
<div class="mb-3 p-3 border" style="height: 300px;overflow-y: scroll;">
<h3 class="">Available Clones</h3>
<div id="available_clones_container_id"></div>
</div>
<!-- tenants table -->
<div class="row my-3 p-3 border">
<div class="row my-3">
<div class="col-2">
<button id="save_cluster_btn_id" class="btn btn-outline-dark w-100">Transfer Tenants</button>
</div>
<div class="col-2">
<button id="save_cluster_btn_id" class="btn btn-outline-dark w-100">Delete Tenants</button>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Tenants</h3>
</div>
<div class="card-body border-bottom py-3">
<div class="d-flex">
<div class="text-secondary">
Show
<div class="mx-2 d-inline-block">
<input type="text" class="form-control form-control-sm" value="8" size="3" aria-label="Invoices count">
</div>
entries
</div>
<div class="ms-auto text-secondary">
Search:
<div class="ms-2 d-inline-block">
<input type="text" class="form-control form-control-sm" aria-label="Search invoice">
</div>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table card-table table-vcenter text-nowrap datatable">
<thead>
<tr>
<th class="w-1"><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select all invoices"></th>
<th>Member ID</th>
<th>Username</th>
<th>Domain</th>
<th></th>
</tr>
</thead>
<tbody id="tenants_table_body_id">
<!-- <tr>
<td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
<td>$887</td>
<td class="text-end">
<span class="dropdown">
<button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">Actions</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Action
</a>
<a class="dropdown-item" href="#">
Another action
</a>
</div>
</span>
</td>
</tr> -->
</tbody>
</table>
</div>
<div class="card-footer d-flex align-items-center">
<p class="m-0 text-secondary">Showing <span>1</span> to <span>8</span> of <span>16</span> entries</p>
<ul class="pagination m-0 ms-auto">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">
<!-- Download SVG icon from http://tabler-icons.io/i/chevron-left -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M15 6l-6 6l6 6"></path></svg>
prev
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#">
next <!-- Download SVG icon from http://tabler-icons.io/i/chevron-right -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 6l6 6l-6 6"></path></svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div><!-- END tenants table -->
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">Domain Console</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">&copy;2024 Appfactory Studio inc.</a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- modal server -->
<div class="modal modal-blur fade" id="modal_create_server" tabindex="-1" role="dialog" aria-modal="true" style="display: none; padding-left: 0px;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal_create_cluster_title">Create Server</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col">
<div class="mb-3">
<div>
<div class="mb-3">
<label class="form-label">IPv4</label>
<input id="server_ipv4_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" id="create_server_btn_modal" class="btn btn-primary">Create</button>
</div>
</div>
</div>
</div>
<!-- modal cluster -->
<div class="modal modal-blur fade" id="modal_create_cluster" tabindex="-1" role="dialog" aria-modal="true" style="display: none; padding-left: 0px;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal_create_cluster_title">Create Cluster</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col">
<div class="mb-3">
<div>
<div class="mb-3">
<label class="form-label">Head</label>
<input id="cluster_head_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
<div class="mb-3">
<label class="form-label">Proxy</label>
<input id="cluster_proxy_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" id="create_cluster_btn_modal" class="btn btn-primary">Create</button>
</div>
</div>
</div>
</div>
<!-- modal delete server -->
<div class="modal modal-blur fade" id="modal_danger_delete_server" tabindex="-1" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-status bg-danger"></div>
<div class="modal-body text-center py-4">
<!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-danger icon-lg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 9v4"></path><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"></path><path d="M12 16h.01"></path></svg>
<h3>Are you sure?</h3>
<div class="text-secondary">Do you really want to remove delete the server. Cannot be undone</div>
</div>
<div class="modal-footer">
<div class="w-100">
<div class="row">
<div class="col"><a href="#" class="btn w-100" data-bs-dismiss="modal">
Cancel
</a></div>
<div class="col"><a href="#" id="modal_btn_delete_server" class="btn btn-danger w-100" data-bs-dismiss="modal">
</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,8 @@
<tr>
<td>Paweł Kuna</td>
<td class="text-secondary">User</td>
<td><a href="#">Edit</a></td>
</tr>

View File

@@ -0,0 +1,9 @@

View File

@@ -0,0 +1,23 @@
<div class="container-xl">
<div class="row">
<div class="col-12">
<button id="back_tenant_btn_id" class="btn btn-outline-success mb-4">Back</button>
</div>
</div>
<div class="row mb-5">
<div class="col-12">
<div id="http_tenant_container_editor"></div>
</div>
</div>
<div class="row">
<div class="col-12">
<button id="save_http_tenant" class="btn btn-outline-dark w-100">Save</button>
</div>
</div>
</div>

View File

@@ -0,0 +1,165 @@
<div class="container-fluid">
<div class="row">
<button id="add_tenant_btn_id" class="btn btn-outline-success w-100 mb-4">Add Tenant</button>
<div class="col-4">
<div class="mb-3">
<label class="form-label">Search Tenants</label>
<div class="row g-2">
<div class="col">
<input id="http_tenant_search_input_field" type="text" class="form-control" placeholder="Search…">
</div>
<div class="col-auto">
<a id="http_tenant_search_input_field_id" href="#" class="btn btn-icon" aria-label="Button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg>
</a>
<button id="move_selected_tenants_id" class="btn btn-outline-warning">Move</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="table-responsive">
<table class="table table-vcenter card-table">
<thead>
<tr>
<th class="w-1"><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select all invoices"></th>
<th>Name</th>
<th>Dmain Name</th>
<th class="w-1"></th>
</tr>
</thead>
<tbody id="http_tenant_table_rows_id"></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal modal-blur fade" id="modal_move_tenants_to_servers" tabindex="-1" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-1 modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add a new team</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col-auto">
<a href="#" class="avatar avatar-upload rounded">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-1"><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg>
<span class="avatar-upload-text">Add</span>
</a>
</div>
<div class="col">
<label class="form-label">Name</label>
<input type="text" class="form-control">
</div>
<div class="mb-3">
<div class="form-label">Select Server</div>
<select id="tenant_servers_select_id2" class="form-select"></select>
</div>
</div>
<div class="mb-3">
<label class="form-label">Pick your team color</label>
<div class="row g-2">
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="dark" class="form-colorinput-input">
<span class="form-colorinput-color bg-dark"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput form-colorinput-light">
<input name="color" type="radio" value="white" class="form-colorinput-input" checked="">
<span class="form-colorinput-color bg-white"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="blue" class="form-colorinput-input">
<span class="form-colorinput-color bg-blue"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="azure" class="form-colorinput-input">
<span class="form-colorinput-color bg-azure"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="indigo" class="form-colorinput-input">
<span class="form-colorinput-color bg-indigo"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="purple" class="form-colorinput-input">
<span class="form-colorinput-color bg-purple"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="pink" class="form-colorinput-input">
<span class="form-colorinput-color bg-pink"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="red" class="form-colorinput-input">
<span class="form-colorinput-color bg-red"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="orange" class="form-colorinput-input">
<span class="form-colorinput-color bg-orange"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="yellow" class="form-colorinput-input">
<span class="form-colorinput-color bg-yellow"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="lime" class="form-colorinput-input">
<span class="form-colorinput-color bg-lime"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="green" class="form-colorinput-input">
<span class="form-colorinput-color bg-green"></span>
</label>
</div>
</div>
</div>
<div>
<label class="form-label">Additional info</label>
<textarea class="form-control"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button id="modal_move_tenants_id" class="btn btn-primary">Move Tenants</button>
</div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,233 @@
<div class="main_container_container" style="">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Overview
</div>
<h2 class="page-title">
Brain Controller
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
<a href="#" id="back_to_init" class="btn btn-outline-dark">Back</a>
<!-- <span class="d-none d-sm-inline">
<a href="#" class="btn btn-outline-dark log_out_link">
Logout
</a>
</span> -->
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl" style="">
<div id="content_container">
<div class="col-12">
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs nav-fill" data-bs-toggle="tabs" role="tablist">
<li class="nav-item" role="presentation">
<a href="#tabs-home-5" class="nav-link active" data-bs-toggle="tab" aria-selected="true" role="tab">Home</a>
</li>
<li class="nav-item" role="presentation">
<a href="#tabs-profile-5" class="nav-link" data-bs-toggle="tab" aria-selected="false" tabindex="-1" role="tab">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a href="#tabs-activity-5" class="nav-link" data-bs-toggle="tab" aria-selected="false" tabindex="-1" role="tab">Activity</a>
</li>
</ul>
</div>
<div class="card-body">
<style>
#card-editor {
height: 750px;
}
#ace_editor_container {
position: absolute;
width: 95%;
height: 700px;
}
</style>
<div class="tab-content">
<div class="tab-pane active show" id="tabs-home-5" role="tabpanel">
<h4>Home tab</h4>
<button id="brain_show_log_one" class="btn btn-outline-dark mb-5">Load Logs</button>
<div id="ace_editor_container"></div>
</div>
<div class="tab-pane" id="tabs-profile-5" role="tabpanel">
<h4>Profile tab</h4>
</div>
<div class="tab-pane" id="tabs-activity-5" role="tabpanel">
<h4>Activity tab</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">Domain Console</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">&copy;2024 Appfactory Studio inc.</a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- modal server -->
<div class="modal modal-blur fade" id="modal_create_server" tabindex="-1" role="dialog" aria-modal="true" style="display: none; padding-left: 0px;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal_create_cluster_title">Create Server</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col">
<div class="mb-3">
<div>
<div class="mb-3">
<label class="form-label">IPv4</label>
<input id="server_ipv4_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" id="create_server_btn_modal" class="btn btn-primary">Create</button>
</div>
</div>
</div>
</div>
<!-- modal cluster -->
<div class="modal modal-blur fade" id="modal_create_cluster" tabindex="-1" role="dialog" aria-modal="true" style="display: none; padding-left: 0px;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal_create_cluster_title">Create Cluster</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col">
<div class="mb-3">
<div>
<div class="mb-3">
<label class="form-label">Head</label>
<input id="cluster_head_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
<div class="mb-3">
<label class="form-label">Proxy</label>
<input id="cluster_proxy_input_id" class="form-input" type="text">
<span class="form-check-label"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" id="create_cluster_btn_modal" class="btn btn-primary">Create</button>
</div>
</div>
</div>
</div>
<!-- modal delete server -->
<div class="modal modal-blur fade" id="modal_danger_delete_server" tabindex="-1" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-status bg-danger"></div>
<div class="modal-body text-center py-4">
<!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-danger icon-lg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 9v4"></path><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"></path><path d="M12 16h.01"></path></svg>
<h3>Are you sure?</h3>
<div class="text-secondary">Do you really want to remove delete the server. Cannot be undone</div>
</div>
<div class="modal-footer">
<div class="w-100">
<div class="row">
<div class="col"><a href="#" class="btn w-100" data-bs-dismiss="modal">
Cancel
</a></div>
<div class="col"><a href="#" id="modal_btn_delete_server" class="btn btn-danger w-100" data-bs-dismiss="modal">
</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,87 @@
<div class="main_container_container" style="">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Overview
</div>
<h2 class="page-title">
Website Builder
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
<span class="d-none d-sm-inline">
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl" style="height: 100vh;overflow-y: scroll;">
<div id="content_container">
<div class="container-fluid mt-5">
<div class="row mt-5">
<div class="row mb-5">
<div class="col-4">
<button id="enter_builder_btn_id" class="btn btn-outline-dark w-100">Enter Builder</button>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card">
<div class="card-body">
<p class="text-secondary">Website Builder is Disabled</p>
</div>
<!-- Card footer -->
<div class="card-footer">
<div class="row align-items-center">
<div class="col-auto">
<label>Enable</label>
</div>
<div class="col-auto ms-auto">
<label class="form-check form-switch m-0">
<input class="form-check-input position-static" disabled type="checkbox">
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">Domain Console</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">&copy;2024 Appfactory Studio inc.</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>

View File

@@ -0,0 +1,177 @@
<div class="page">
<!-- Sidebar -->
<aside class="navbar navbar-vertical navbar-expand-lg navbar-transparent">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar-menu" aria-controls="sidebar-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-brand navbar-brand-autodark">
<a href=".">
<svg xmlns="http://www.w3.org/2000/svg" width="110" height="32" viewBox="0 0 232 68" class="navbar-brand-image">
<path d="M64.6 16.2C63 9.9 58.1 5 51.8 3.4 40 1.5 28 1.5 16.2 3.4 9.9 5 5 9.9 3.4 16.2 1.5 28 1.5 40 3.4 51.8 5 58.1 9.9 63 16.2 64.6c11.8 1.9 23.8 1.9 35.6 0C58.1 63 63 58.1 64.6 51.8c1.9-11.8 1.9-23.8 0-35.6zM33.3 36.3c-2.8 4.4-6.6 8.2-11.1 11-1.5.9-3.3.9-4.8.1s-2.4-2.3-2.5-4c0-1.7.9-3.3 2.4-4.1 2.3-1.4 4.4-3.2 6.1-5.3-1.8-2.1-3.8-3.8-6.1-5.3-2.3-1.3-3-4.2-1.7-6.4s4.3-2.9 6.5-1.6c4.5 2.8 8.2 6.5 11.1 10.9 1 1.4 1 3.3.1 4.7zM49.2 46H37.8c-2.1 0-3.8-1-3.8-3s1.7-3 3.8-3h11.4c2.1 0 3.8 1 3.8 3s-1.7 3-3.8 3z" fill="#066fd1" style="fill: var(--tblr-primary, #066fd1)"></path>
<path d="M105.8 46.1c.4 0 .9.2 1.2.6s.6 1 .6 1.7c0 .9-.5 1.6-1.4 2.2s-2 .9-3.2.9c-2 0-3.7-.4-5-1.3s-2-2.6-2-5.4V31.6h-2.2c-.8 0-1.4-.3-1.9-.8s-.9-1.1-.9-1.9c0-.7.3-1.4.8-1.8s1.2-.7 1.9-.7h2.2v-3.1c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v3.1h3.4c.8 0 1.4.3 1.9.8s.8 1.2.8 1.9-.3 1.4-.8 1.8-1.2.7-1.9.7h-3.4v13c0 .7.2 1.2.5 1.5s.8.5 1.4.5c.3 0 .6-.1 1.1-.2.5-.2.8-.3 1.2-.3zm28-20.7c.8 0 1.5.3 2.1.8.5.5.8 1.2.8 2.1v20.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2-.8-.8-1.2-.8-2.1c-.8.9-1.9 1.7-3.2 2.4-1.3.7-2.8 1-4.3 1-2.2 0-4.2-.6-6-1.7-1.8-1.1-3.2-2.7-4.2-4.7s-1.6-4.3-1.6-6.9c0-2.6.5-4.9 1.5-6.9s2.4-3.6 4.2-4.8c1.8-1.1 3.7-1.7 5.9-1.7 1.5 0 3 .3 4.3.8 1.3.6 2.5 1.3 3.4 2.1 0-.8.3-1.5.8-2.1.5-.5 1.2-.7 2-.7zm-9.7 21.3c2.1 0 3.8-.8 5.1-2.3s2-3.4 2-5.7-.7-4.2-2-5.8c-1.3-1.5-3-2.3-5.1-2.3-2 0-3.7.8-5 2.3-1.3 1.5-2 3.5-2 5.8s.6 4.2 1.9 5.7 3 2.3 5.1 2.3zm32.1-21.3c2.2 0 4.2.6 6 1.7 1.8 1.1 3.2 2.7 4.2 4.7s1.6 4.3 1.6 6.9-.5 4.9-1.5 6.9-2.4 3.6-4.2 4.8c-1.8 1.1-3.7 1.7-5.9 1.7-1.5 0-3-.3-4.3-.9s-2.5-1.4-3.4-2.3v.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.5-.8-1.2-.8-2.1V18.9c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v10c.8-1 1.8-1.8 3.2-2.5 1.3-.7 2.8-1 4.3-1zm-.7 21.3c2 0 3.7-.8 5-2.3s2-3.5 2-5.8-.6-4.2-1.9-5.7-3-2.3-5.1-2.3-3.8.8-5.1 2.3-2 3.4-2 5.7.7 4.2 2 5.8c1.3 1.6 3 2.3 5.1 2.3zm23.6 1.9c0 .8-.3 1.5-.8 2.1s-1.3.8-2.1.8-1.5-.3-2-.8-.8-1.3-.8-2.1V18.9c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v29.7zm29.3-10.5c0 .8-.3 1.4-.9 1.9-.6.5-1.2.7-2 .7h-15.8c.4 1.9 1.3 3.4 2.6 4.4 1.4 1.1 2.9 1.6 4.7 1.6 1.3 0 2.3-.1 3.1-.4.7-.2 1.3-.5 1.8-.8.4-.3.7-.5.9-.6.6-.3 1.1-.4 1.6-.4.7 0 1.2.2 1.7.7s.7 1 .7 1.7c0 .9-.4 1.6-1.3 2.4-.9.7-2.1 1.4-3.6 1.9s-3 .8-4.6.8c-2.7 0-5-.6-7-1.7s-3.5-2.7-4.6-4.6-1.6-4.2-1.6-6.6c0-2.8.6-5.2 1.7-7.2s2.7-3.7 4.6-4.8 3.9-1.7 6-1.7 4.1.6 6 1.7 3.4 2.7 4.5 4.7c.9 1.9 1.5 4.1 1.5 6.3zm-12.2-7.5c-3.7 0-5.9 1.7-6.6 5.2h12.6v-.3c-.1-1.3-.8-2.5-2-3.5s-2.5-1.4-4-1.4zm30.3-5.2c1 0 1.8.3 2.4.8.7.5 1 1.2 1 1.9 0 1-.3 1.7-.8 2.2-.5.5-1.1.8-1.8.7-.5 0-1-.1-1.6-.3-.2-.1-.4-.1-.6-.2-.4-.1-.7-.1-1.1-.1-.8 0-1.6.3-2.4.8s-1.4 1.3-1.9 2.3-.7 2.3-.7 3.7v11.4c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.6-.8-1.3-.8-2.1V28.8c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v.6c.7-1.3 1.8-2.3 3.2-3 1.3-.7 2.8-1 4.3-1z" fill-rule="evenodd" clip-rule="evenodd" fill="#4a4a4a"></path>
</svg>
</a>
</div>
<div class="navbar-nav flex-row d-lg-none">
</div>
<div class="collapse navbar-collapse" id="sidebar-menu">
<ul class="navbar-nav pt-lg-3">
<li class="nav-item">
<a class="nav-link" href="./">
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 12l-2 0l9 -9l9 9l-2 0"></path><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path></svg>
</span>
<span class="nav-link-title">
Home
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./form-elements.html">
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 11l3 3l8 -8"></path><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9"></path></svg>
</span>
<span class="nav-link-title">
Forms
</span>
</a>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="false" role="button" aria-expanded="true">
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path></svg>
</span>
<span class="nav-link-title">
Layout
</span>
</a>
<div class="dropdown-menu show">
<div class="dropdown-menu-columns">
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./layout-horizontal.html">
Horizontal
</a>
<a class="dropdown-item" href="./layout-boxed.html">
Boxed
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
</a>
<a class="dropdown-item" href="./layout-vertical.html">
Vertical
</a>
<a class="dropdown-item active" href="./layout-vertical-transparent.html">
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html">
Right vertical
</a>
<a class="dropdown-item" href="./layout-condensed.html">
Condensed
</a>
<a class="dropdown-item" href="./layout-combo.html">
Combined
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./layout-navbar-dark.html">
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html">
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html">
Navbar overlap
</a>
<a class="dropdown-item" href="./layout-rtl.html">
RTL mode
</a>
<a class="dropdown-item" href="./layout-fluid.html">
Fluid
</a>
<a class="dropdown-item" href="./layout-fluid-vertical.html">
Fluid vertical
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</aside>
<div class="page-wrapper">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Overview
</div>
<h2 class="page-title">
Website Builder
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
<span class="d-none d-sm-inline">
<a href="#" class="btn">
New view
</a>
</span>
<a href="#" class="btn btn-primary d-none d-sm-inline-block" data-bs-toggle="modal" data-bs-target="#modal-report">
<!-- Download SVG icon from http://tabler-icons.io/i/plus -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg>
Create new project
</a>
<a href="#" class="btn btn-primary d-sm-none btn-icon" data-bs-toggle="modal" data-bs-target="#modal-report" aria-label="Create new report">
<!-- Download SVG icon from http://tabler-icons.io/i/plus -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl">
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
</div>
</footer>
</div>
</div>

View File

@@ -0,0 +1,156 @@
<div class="page-wrapper">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<h2 id="page_title_id" class="page-title">
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto ">
<button id="exit_publish_website" type="button" class="btn btn-primary">
Exit
</button>
<button id="publish_website" type="button" class="btn btn-primary">
<!-- Download SVG icon from http://tabler-icons.io/i/printer -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M17 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2"></path><path d="M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4"></path><path d="M7 13m0 2a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2z"></path></svg>
Publish
</button>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl">
<div class="card card-lg">
<div class="card-body">
<div class="row">
<div class="col-6">
<p class="h3">Company</p>
<address>
Street Address<br>
State, City<br>
Region, Postal Code<br>
ltd@example.com
</address>
</div>
<div class="col-6 text-end">
<p class="h3">Client</p>
<address>
Street Address<br>
State, City<br>
Region, Postal Code<br>
ctr@example.com
</address>
</div>
<div class="col-12 my-5">
<h1>Invoice INV/001/15</h1>
</div>
</div>
<table class="table table-transparent table-responsive">
<thead>
<tr>
<th class="text-center" style="width: 1%"></th>
<th>Product</th>
<th class="text-center" style="width: 1%">Qnt</th>
<th class="text-end" style="width: 1%">Unit</th>
<th class="text-end" style="width: 1%">Amount</th>
</tr>
</thead>
<tbody><tr>
<td class="text-center">1</td>
<td>
<p class="strong mb-1">Logo Creation</p>
<div class="text-secondary">Logo and business cards design</div>
</td>
<td class="text-center">
1
</td>
<td class="text-end">$1.800,00</td>
<td class="text-end">$1.800,00</td>
</tr>
<tr>
<td class="text-center">2</td>
<td>
<p class="strong mb-1">Online Store Design &amp; Development</p>
<div class="text-secondary">Design/Development for all popular modern browsers</div>
</td>
<td class="text-center">
1
</td>
<td class="text-end">$20.000,00</td>
<td class="text-end">$20.000,00</td>
</tr>
<tr>
<td class="text-center">3</td>
<td>
<p class="strong mb-1">App Design</p>
<div class="text-secondary">Promotional mobile application</div>
</td>
<td class="text-center">
1
</td>
<td class="text-end">$3.200,00</td>
<td class="text-end">$3.200,00</td>
</tr>
<tr>
<td colspan="4" class="strong text-end">Subtotal</td>
<td class="text-end">$25.000,00</td>
</tr>
<tr>
<td colspan="4" class="strong text-end">Vat Rate</td>
<td class="text-end">20%</td>
</tr>
<tr>
<td colspan="4" class="strong text-end">Vat Due</td>
<td class="text-end">$5.000,00</td>
</tr>
<tr>
<td colspan="4" class="font-weight-bold text-uppercase text-end">Total Due</td>
<td class="font-weight-bold text-end">$30.000,00</td>
</tr>
</tbody></table>
<p class="text-secondary text-center mt-5">Thank you very much for doing business with us. We look forward to working with
you again!</p>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
<li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
<li class="list-inline-item">
<a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-pink icon-filled icon-inline"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path></svg>
Sponsor
</a>
</li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item">
Copyright © 2024
<a href="." class="link-secondary">Tabler</a>.
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta20
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>

View File

@@ -0,0 +1,7 @@
<div>
<button id="communication-back">Back</button>
<h1>Cummunication</h1>
</div>

View File

@@ -0,0 +1,62 @@
<div class="main_container_container" style="">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Overview
</div>
<h2 class="page-title">
Communications
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl" style="height: 100vh;overflow-y: scroll;">
<div id="content_container">
<div class="row">
<div class="col-2">
<button id="voip_btn" class="btn btn-outline-dark w-100">Voip</button>
</div>
<!-- <div class="col-2">
<button id="response_email_btn" class="btn btn-outline-dark w-100">Response Email</button>
</div>
<div class="col-2">
<button id="alert_email_btn" class="btn btn-outline-dark w-100">Alert Email</button>
</div> -->
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">Domain Console</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">&copy;2024 Appfactory Studio inc.</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>

View File

@@ -0,0 +1,71 @@
<div class="main_container_container" style="">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Overview
</div>
<h2 class="page-title">
Communications
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
<a id="back_to_init" href="#" class="btn">Back</a>
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl" style="height: 100vh;overflow-y: scroll;">
<div id="content_container">
<div class="row">
<div class="col-12 col-md-4">
<div class="mb-3">
<label class="form-label">Phone Number</label>
<input type="text" id="phone_number_id" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Message <span class="form-label-description">56/100</span></label>
<textarea id="text_message_id" class="form-control" rows="6"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-4">
<button id="send_text_message_btn" class="btn btn-outline-dark">Send</button>
</div>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">Domain Console</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">&copy;2024 Appfactory Studio inc.</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>

View File

@@ -0,0 +1,62 @@
<div class="main_container_container" style="">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Overview
</div>
<h2 class="page-title">
Contact
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl" style="height: 100vh;overflow-y: scroll;">
<div id="content_container">
<div class="row">
<div class="col-2">
<button id="contacts_list_btn" class="btn btn-outline-dark w-100">Contacts</button>
</div>
<div class="col-2">
<button id="response_email_btn" class="btn btn-outline-dark w-100">Response Email</button>
</div>
<div class="col-2">
<button id="alert_email_btn" class="btn btn-outline-dark w-100">Alert Email</button>
</div>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">Domain Console</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">&copy;2024 Appfactory Studio inc.</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>

View File

@@ -0,0 +1,6 @@
<div id="email_container"></div>

View File

@@ -0,0 +1,66 @@
<div class="main_container_container" style="">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<!-- Page pre-title -->
<div class="page-pretitle">
Overview
</div>
<h2 class="page-title">
Contact
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ms-auto d-print-none">
<div class="btn-list">
<a id="back_to_init" href="#" class="btn">Back</a>
</div>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl" style="height: 100vh;overflow-y: scroll;">
<div id="content_container">
<table class="table table-vcenter card-table">
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Email</th>
<th>Topic</th>
<th class="w-1"></th>
</tr>
</thead>
<tbody id="contact_table_body">
</tbody>
</table>
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">Domain Console</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="#" class="link-secondary" rel="noopener">&copy;2024 Appfactory Studio inc.</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>

Some files were not shown because too many files have changed in this diff Show More