48hr.email/infrastructure/web/views/login.twig
2026-01-06 14:52:06 +01:00

142 lines
8 KiB
Twig

{% extends 'layout.twig' %}
{% block header %}
<div class="action-links">
{% if currentUser %}
<!-- Account Dropdown (logged in) -->
{% if authEnabled %}
<div class="action-dropdown">
<button class="dropdown-toggle" aria-label="Account menu">Account ▾</button>
<div class="dropdown-menu" data-section-title="Account">
<a href="/account" aria-label="Account settings">Settings</a>
<a href="/logout?redirect=/" aria-label="Logout">Logout</a>
</div>
</div>
{% endif %}
{% else %}
{% if authEnabled %}
<a href="/auth" aria-label="Login or Register">Account</a>
{% endif %}
{% endif %}
<a href="/inbox/{{ example }}" aria-label="View example inbox">Example Inbox</a>
<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="homepage-container">
<div class="hero-section">
<h1 class="page-title hero-title">Your Temporary Inbox</h1>
<p class="hero-subtitle">Create instant disposable email addresses. No registration required. Emails auto-delete after {{ purgeTimeRaw|readablePurgeTime }}.</p>
</div>
<div class="inbox-creator frosted-glass">
<h2 class="creator-title">Get Started</h2>
{% if userInputError %}
<div class="alert alert-warning">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline;vertical-align:middle;margin-right:0.5rem">
<path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"></path>
<line x1="12" y1="9" x2="12" y2="13"></line>
<line x1="12" y1="17" x2="12.01" y2="17"></line>
</svg>
Your input was invalid. Please try other values.
</div>
{% endif %}
<form method="POST" action="/" class="inbox-form">
<div class="form-group">
<label for="nameField">Choose Your Name</label>
<input type="text" id="nameField" name="username" value="{{ username|sanitizeHtml }}" placeholder="e.g., john.doe" required>
</div>
<div class="form-group">
<label for="commentField">Select Domain</label>
<div class="select-wrapper">
<select id="commentField" name="domain">
{% for domain in domains %}
<option value="{{ domain|sanitizeHtml }}">@{{ domain|sanitizeHtml }}</option>
{% endfor %}
</select>
</div>
<span class="domain-count">{{ domains|length }} domains available</span>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">
<span>Access Inbox</span>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</button>
<a href="/inbox/random" class="btn btn-secondary">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
<line x1="12" y1="22.08" x2="12" y2="12"/>
</svg>
<span>Random Inbox</span>
</a>
</div>
</form>
</div>
{% if showInfoSection %}
<div class="info-section">
<div class="features-grid">
<div class="feature-card frosted-glass">
<h3>Privacy First</h3>
{% if statisticsEnabled %}
<p>No tracking, no personal data collection. We only store email metadata for system analytics.</p>
{% else %}
<p>No tracking, no data collection. Your temporary email is completely anonymous.</p>
{% endif %}
</div>
<div class="feature-card frosted-glass">
<h3>Instant Access</h3>
<p>Create unlimited temporary email addresses in seconds. No waiting, no verification.</p>
</div>
<div class="feature-card frosted-glass">
<h3>Auto-Delete</h3>
<p>All emails automatically purge after {{ purgeTimeRaw|readablePurgeTime }}. Clean and secure by default.</p>
</div>
</div>
<div class="info-content frosted-glass">
<h2>What is a Temporary Email?</h2>
<p>A temporary email (also known as disposable email or throwaway email) is a service that allows you to receive emails at a temporary address that self-destructs after a certain time. It's perfect for signing up to websites, testing services, or protecting your real inbox from spam.</p>
<h3>Common Use Cases</h3>
<ul class="use-cases-list">
<li><strong>Avoid Spam:</strong> Sign up for services without cluttering your primary inbox</li>
<li><strong>Test Services:</strong> Try new apps and websites without commitment</li>
<li><strong>Online Privacy:</strong> Keep your real email address private from third parties</li>
<li><strong>One-Time Verification:</strong> Receive verification codes without long-term exposure</li>
<li><strong>Download Content:</strong> Access gated content that requires email confirmation</li>
<li><strong>Form Testing:</strong> Test email workflows during development</li>
</ul>
<h3>Why Choose {{ branding[0] }}?</h3>
<ul class="benefits-list">
<li><strong>No Sign-Up Required:</strong> Start using immediately without creating an account</li>
<li><strong>Multiple Domains:</strong> Choose from several domain options for flexibility</li>
<li><strong>Clean Interface:</strong> Simple, modern design focused on usability</li>
<li><strong>Real-Time Updates:</strong> See new emails arrive instantly without refreshing</li>
<li><strong>Open Source:</strong> Transparent codebase you can review and trust</li>
<li><strong>{{ purgeTimeRaw|readablePurgeTime|title }} Retention:</strong> Emails stay accessible for the full duration before auto-deletion</li>
</ul>
<p class="note">{% if smtpEnabled or authEnabled %}For extended features like{% if smtpEnabled %} email forwarding{% endif %}{% if smtpEnabled and authEnabled %} and{% endif %}{% if authEnabled %} inbox locking{% endif %}, you can optionally create a free account. {% endif %}For basic temporary email needs, no registration is ever required.</p>
</div>
</div>
{% endif %}
</div>
{% endblock %}