build-email
Version:
Framework & CLI Build Email - thiết kế HTML Email Template với Tailwind CSS, kế thừa Maizzle.
173 lines (148 loc) • 4.76 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maizzle | Templates</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet" media="screen">
<style>
body {
padding: 7rem 6.25rem;
}
@media (max-width: 425px) {
body {
padding: 3rem 1.5rem;
}
}
/* General styling */
ul {
margin: 0;
padding: 0;
list-style-type: none;
font-family: Inter, Arial, Helvetica, sans-serif;
}
/* Folder styling */
li > strong {
font-size: 1.875rem;
line-height: 2.25rem;
color: #0F172A;
}
li.folder.root {
padding-bottom: 1.5rem;
padding-top: 3rem;
}
li.folder.root:first-child {
padding-top: 0 ;
}
li.folder.nested {
padding-top: 1.5rem;
}
li.folder.nested > strong {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 600;
}
li > strong > span {
color: #94A3B8;
}
/* File styling */
li > a {
color: #4f46e5;
text-decoration: none;
font-size: 1.25rem;
line-height: 1.75rem;
}
li > a:hover {
text-decoration: underline;
}
/* Indentation based on depth */
li {
padding-left: 1.5rem;
}
li.folder.nested {
padding-top: 2.25rem;
padding-bottom: 0.625rem;
border-left: 1px solid #64748B;
}
li.folder.nested > strong {
cursor: pointer;
display: block;
}
li.folder.root {
padding-top: 3rem;
border: none;
}
li.file {
border-left: 1px solid #64748B;
}
li.file.nested {
line-height: 2.25rem;
}
li.file.nested.collapsed {
display: none;
}
li.file.nested.collapsed + .folder.nested {
padding-top: 0;
}
li.file.nested a {
padding-bottom: 0.75rem;
margin-left: -1.5rem;
padding-left: 1.5rem;
border-left: 1px solid #cbd5e1;
}
li.file.nested:last-child a {
padding-bottom: 0;
}
.insignia {
width: 64rem;
position: fixed;
z-index: -1;
right: -3rem;
bottom: 0;
}
@media (max-width: 425px) {
.insignia {
width: 100%;
}
}
</style>
</head>
<body>
<ul>
<each loop="item in paths">
<if condition="item.type === 'folder'">
<li
style="padding-left: calc(1.5rem * {{ item.depth }});"
class="folder {{ item.depth > 0 ? 'nested' : 'root' }}"
>
<strong>{{{ item.name }}}</strong>
</li>
</if>
<if condition="item.type === 'file'">
<li
style="padding-left: calc(1.5rem * {{ item.depth }});"
class="file {{ item.depth > 1 ? 'nested' : '' }}"
>
<a href="{{ item.href }}">
{{ item.name }}
</a>
</li>
</if>
</each>
</ul>
<svg fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 993 483" class="insignia"><mask id="a" style="mask-type:alpha;" maskUnits="userSpaceOnUse" x="0" y="0" width="993" height="483"><path fill="#D9D9D9" d="M0 0h993v483H0z"></path></mask><g mask="url(#a)" stroke="#e2e8f0" stroke-miterlimit="10"><path d="M954.124 81.816c0-45.163-39.678-81.774-88.624-81.774-48.945 0-88.624 36.611-88.624 81.774v436.13c0 45.163 39.679 81.775 88.624 81.775 48.946 0 88.624-36.612 88.624-81.775V81.816ZM583.379 81.816c0-45.163-39.678-81.774-88.624-81.774-48.945 0-88.624 36.611-88.624 81.774v436.13c0 45.163 39.679 81.775 88.624 81.775 48.946 0 88.624-36.612 88.624-81.775V81.816Z"></path><path d="M935.39 132.185c30.161-35.57 23.362-86.965-15.187-114.795S825.954-4.165 795.794 31.404L425.713 467.848c-30.161 35.57-23.361 86.965 15.187 114.795 38.549 27.829 94.249 21.555 124.41-14.014l370.08-436.444ZM564.288 132.196c30.161-35.569 23.362-86.964-15.187-114.794S454.852-4.154 424.692 31.416L54.611 467.86c-30.16 35.569-23.361 86.965 15.187 114.794 38.549 27.83 94.249 21.556 124.41-14.013l370.08-436.445Z"></path></g></svg>
<script>
document.querySelectorAll('.folder.nested').forEach(folder => {
folder.addEventListener('click', function() {
let nextElement = this.nextElementSibling;
while (nextElement && nextElement.classList.contains('file') && nextElement.classList.contains('nested')) {
nextElement.classList.toggle('collapsed');
nextElement = nextElement.nextElementSibling;
}
});
});
</script>
</body>
</html>