File: /home/mmickelson/view-once.com/handlers/home.php
<?php
require_once __DIR__ . '/../src/config.php';
require_once __DIR__ . '/../src/helpers.php';
$csrf = get_csrf();
$err = $_GET['e'] ?? '';
?>
<!doctype html><meta charset="utf-8">
<title>One-Time Note</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?php echo h(base_url()) ?>/assets/style.css">
<link rel="icon" href="<?php echo h(base_url()) ?>/assets/favicon.svg" type="image/svg+xml">
<script src="<?php echo h(base_url()) ?>/assets/app.js" defer></script>
<h1>One-Time Note</h1>
<p class="muted">Paste text below to get a link that can be opened once. After it’s viewed, it is deleted.</p>
<?php if ($err === 'empty'): ?>
<div class="err">Please enter some text or upload a file to create a note.</div>
<?php elseif ($err === 'large'): ?>
<div class="err">Your note is too large. Please keep it under 100KB.</div>
<?php elseif ($err === 'file_large'): ?>
<div class="err">File is too large. Maximum size is <?php echo format_file_size(MAX_FILE_SIZE) ?>.</div>
<?php elseif ($err === 'file_type'): ?>
<div class="err">File type not allowed. Please upload text, images, PDFs, or common document formats.</div>
<?php endif; ?>
<form method="post" action="create" enctype="multipart/form-data">
<input type="hidden" name="_csrf" value="<?php echo h($csrf) ?>">
<div class="tabs">
<button type="button" class="tab active" onclick="switchTab('text')">Text Note</button>
<button type="button" class="tab" onclick="switchTab('file')">File Upload</button>
</div>
<div id="text-tab" class="tab-content active">
<div class="card">
<textarea name="body" placeholder="Paste your secret text here..."></textarea>
</div>
</div>
<div id="file-tab" class="tab-content">
<div class="card">
<input type="file" name="file" accept=".txt,.pdf,.jpg,.jpeg,.png,.gif,.webp,.zip,.doc,.docx,.csv,.json,.xml,.md">
<div class="file-info">
Max size: <?php echo format_file_size(MAX_FILE_SIZE) ?> •
Allowed: Text, Images, PDFs, Documents, Archives
</div>
</div>
</div>
<div class="form-row">
<label for="expire">⏱️ Auto-delete after:</label>
<select name="expire" id="expire">
<?php foreach (EXPIRE_OPTIONS as $key => $seconds): ?>
<option value="<?php echo h($key) ?>" <?php echo $key === DEFAULT_EXPIRE ? 'selected' : '' ?>>
<?php echo h(get_expire_label($key)) ?>
</option>
<?php endforeach; ?>
</select>
</div>
<p><button type="submit">Create secure link</button></p>
</form>
<p class="muted">Tip: Don’t use this for long-term storage. It’s for quick, private hand-offs.</p>
<details class="muted">
<summary><strong>How does it work?</strong></summary>
<div class="mt-05">
<p>This app generates a one-time link to your note or file. When the link is opened:</p>
<ul>
<li>The content is retrieved and immediately deleted from the database (and disk if it is a file) within the same request.</li>
<li>The link cannot be used again.</li>
<li>Notes also auto-expire after the selected time, even if never opened.</li>
</ul>
<p>Use this for quick, private hand-offs. Do not use it for long-term storage.</p>
</div>
</details>
<script>
function switchTab(tab) {
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
event.target.classList.add('active');
document.getElementById(tab + '-tab').classList.add('active');
const textarea = document.querySelector('textarea[name="body"]');
const fileInput = document.querySelector('input[name="file"]');
if (tab === 'text') { textarea.required = true; fileInput.required = false; }
else { textarea.required = false; fileInput.required = true; }
}
document.querySelector('input[type="file"]').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file && file.size > <?php echo MAX_FILE_SIZE ?>) {
alert('File is too large. Maximum size is <?php echo format_file_size(MAX_FILE_SIZE) ?>.');
e.target.value = '';
}
});
</script>