48hr.email/infrastructure/web/views/mail.twig
ClaraCrazy 89003f0d26
[Feat]: Add light/dark-mode toggle
INcluding localstorage token and quick-load functionality to prevent flashing on initial canvas paint.
2025-12-30 17:42:30 +01:00

64 lines
3 KiB
Twig

{% extends 'layout.twig' %}
{% block header %}
<div class="action-links">
<a href="/inbox/{{ address }}" aria-label="Return to inbox">← Return to inbox</a>
<a href="/inbox/{{ address }}/{{ uid }}/delete" aria-label="Delete this email">Delete Email</a>
<a href="/inbox/{{ address }}/{{ uid }}/raw" target="_blank" aria-label="View raw email">View Raw</a>
{% if lockEnabled and isLocked and hasAccess %}
<a href="/lock/logout" aria-label="Logout">Logout</a>
{% else %}
<a href="/logout" aria-label="Logout">Logout</a>
{% endif %}
<button class="theme-toggle" id="themeToggle" aria-label="Toggle dark/light mode">
<svg class="theme-icon theme-icon-dark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>
<svg class="theme-icon theme-icon-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>
</button>
</div>
{% endblock %}
{% block body %}
<div class="mail-container">
<div class="mail-header">
<h1 class="mail-subject">{{ mail.subject }}</h1>
<div class="mail-meta">
<div class="mail-from">From: {{ mail.from.text }}</div>
<div class="mail-date" data-date="{{ mail.date|date('c') }}"></div>
</div>
</div>
<div class="mail-content">
{% if mail.html %}
<div class="mail-html-content">
<iframe sandbox="allow-popups allow-popups-to-escape-sandbox" csp="script-src 'none'" srcdoc='{{ mail.html }}'></iframe>
</div>
{% elseif mail.textAsHtml %}
<div class="mail-text-content">
{{ mail.textAsHtml|raw }}
</div>
{% else %}
<div class="mail-empty-content">
<p>No content available</p>
</div>
{% endif %}
</div>
{% if mail.attachments %}
<div class="mail-attachments">
<h4>Attachments</h4>
<div class="attachments-list">
{% for attachment in mail.attachments %}
<a href="/inbox/{{ address }}/{{ uid }}/{{ attachment.checksum }}" class="attachment-link">
📎 {{ attachment.filename }}
</a>
{% endfor %}
</div>
</div>
{% endif %}
</div>
{% endblock %}