work in progress
This commit is contained in:
u205400
parent
dd8bff9e5d
commit
ac67bf1659
|
|
@ -20,52 +20,34 @@ $mailIds = array_map(function ($mail) {
|
||||||
}, $emails);
|
}, $emails);
|
||||||
$mailIdsJoinedString = filter_var(join('|', $mailIds), FILTER_SANITIZE_SPECIAL_CHARS);
|
$mailIdsJoinedString = filter_var(join('|', $mailIds), FILTER_SANITIZE_SPECIAL_CHARS);
|
||||||
|
|
||||||
|
function niceDate($date){
|
||||||
|
return $date;
|
||||||
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title><?php
|
|
||||||
echo $emails ? "(" . count($emails) . ") " : "";
|
|
||||||
echo $user->address ?></title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
<link rel="icon" type="image/x-icon" href="favicon.gif">
|
|
||||||
<meta name="mobile-web-app-capable" content="yes">
|
<!-- Bootstrap CSS -->
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
|
||||||
<meta charset="utf-8">
|
crossorigin="anonymous">
|
||||||
<link rel="stylesheet" href="bootstrap.min.css">
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
|
||||||
<link rel="stylesheet" href="style.css">
|
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
|
||||||
|
crossorigin="anonymous">
|
||||||
|
<title><?php
|
||||||
|
echo $emails ? "(" . count($emails) . ") " : "";
|
||||||
|
echo $user->address ?></title>
|
||||||
<link rel="stylesheet" href="spinner.css">
|
<link rel="stylesheet" href="spinner.css">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
var mailCount = <?php echo count($emails)?>;
|
var mailCount = <?php echo count($emails)?>;
|
||||||
|
|
||||||
function copyToClipboard(text) {
|
|
||||||
var inp = document.createElement('input');
|
|
||||||
document.body.appendChild(inp);
|
|
||||||
inp.value = text;
|
|
||||||
inp.select();
|
|
||||||
document.execCommand('copy', false);
|
|
||||||
inp.remove();
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggle_email_visibility(email_id) {
|
|
||||||
var mailPreviewHeader = document.getElementById("email-preview-header-" + email_id);
|
|
||||||
var mailFullHeader = document.getElementById("email-fullheader-" + email_id);
|
|
||||||
var mailBody = document.getElementById("email-content-" + email_id);
|
|
||||||
|
|
||||||
if (mailPreviewHeader.style.display !== 'none') {
|
|
||||||
mailPreviewHeader.style.display = 'none';
|
|
||||||
mailFullHeader.style.display = 'block';
|
|
||||||
mailBody.style.display = 'block';
|
|
||||||
} else {
|
|
||||||
mailPreviewHeader.style.display = 'block';
|
|
||||||
mailFullHeader.style.display = 'none';
|
|
||||||
mailBody.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setInterval(function () {
|
setInterval(function () {
|
||||||
var r = new XMLHttpRequest();
|
var r = new XMLHttpRequest();
|
||||||
r.open("GET", "./json-api.php?action=has_new_messages&address=$<?php echo $user->address?>&email_ids=<?php echo $mailIdsJoinedString?>", true);
|
r.open("GET", "./json-api.php?action=has_new_messages&address=$<?php echo $user->address?>&email_ids=<?php echo $mailIdsJoinedString?>", true);
|
||||||
|
|
@ -86,229 +68,284 @@ $mailIdsJoinedString = filter_var(join('|', $mailIds), FILTER_SANITIZE_SPECIAL_C
|
||||||
}, 15000);
|
}, 15000);
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="new-content-avalable" class="alert alert-info alert-fixed" role="alert">
|
|
||||||
<strong>New mails</strong> have arrived - <a href="javascript:location.reload();" class="alert-link">reload!</a>
|
|
||||||
|
<div id="new-content-avalable">
|
||||||
|
<div class="alert alert-info alert-fixed" role="alert">
|
||||||
|
<strong>New emails</strong> have arrived.
|
||||||
|
|
||||||
|
<button type="button" class="btn btn-outline-secondary" onclick="location.reload()">
|
||||||
|
<i class="fas fa-sync"></i>
|
||||||
|
Reload!</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- move the rest of the page a bit down to show all content -->
|
||||||
|
<div style="height: 3rem"> </div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<small class="form-text text-muted">
|
<p class="lead ">
|
||||||
You have <span class="badge badge-pill badge-info"><?php echo count($emails); ?> </span> messages in your
|
Your disposable mailbox is ready.
|
||||||
mailbox:
|
</p>
|
||||||
</small>
|
<div class="row" id="address-box-normal">
|
||||||
|
|
||||||
<form id="header-form" action="?action=redirect" method="post">
|
<div class="col my-address-block">
|
||||||
<div class="form-group row">
|
<span id="my-address">
|
||||||
|
<?php echo $user->address ?>
|
||||||
|
</span> <button class="copy-button" data-clipboard-target="#my-address">
|
||||||
|
Copy
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="col get-new-address-col">
|
||||||
|
<button type="button" class="btn btn-outline-dark"
|
||||||
|
data-toggle="collapse" title="choose your own address"
|
||||||
|
data-target=".change-address-toggle"
|
||||||
|
aria-controls="address-box-normal address-box-edit" aria-expanded="false">
|
||||||
|
<i class="fas fa-magic"></i> Change address
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<form class="collapse change-address-toggle" id="address-box-edit" action="?action=redirect" method="post">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<p>
|
||||||
|
<a href="?action=random" role="button" class="btn btn-dark">
|
||||||
|
<i class="fa fa-random"></i>
|
||||||
|
Open random mailbox
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
or create your own address:
|
||||||
|
<div class="form-row align-items-center">
|
||||||
|
<div class="col-sm">
|
||||||
|
<label class="sr-only" for="inlineFormInputName">username</label>
|
||||||
|
<input name="username" type="text" class="form-control" id="inlineFormInputName"
|
||||||
|
placeholder="username"
|
||||||
|
value="<?php echo $user->username ?>">
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-auto my-1">
|
||||||
|
<label class="sr-only" for="inlineFormInputGroupUsername">Domain</label>
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-prepend">
|
||||||
|
<div class="input-group-text">@</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<select class="custom-select" id="inlineFormInputGroupUsername" name="domain">
|
||||||
|
<?php
|
||||||
|
foreach ($config['domains'] as $aDomain) {
|
||||||
|
$selected = $aDomain === $user->domain ? ' selected ' : '';
|
||||||
|
print "<option value='$aDomain' $selected>@$aDomain</option>";
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto my-1">
|
||||||
|
<button type="submit" class="btn btn-primary">Open mailbox</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="col-lg-5 col-md-4 col-sm-6 col-xs-12">
|
|
||||||
<input id="username" class="form-control form-control-lg" name="username" title="username"
|
|
||||||
value="<?php echo $user->username ?>">
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
|
|
||||||
<?php
|
|
||||||
if (count($config['domains']) == 1) {
|
|
||||||
$domain = $config['domains'][0];
|
|
||||||
print "<h3>@$domain</h3>";
|
|
||||||
print "<input type='hidden' name='domain' value='$domain'/>";
|
|
||||||
} else {
|
|
||||||
?>
|
|
||||||
<select id="domain" class="form-control form-control-lg" name="domain" title="domain"
|
|
||||||
onchange="this.form.submit()">
|
|
||||||
<?php
|
|
||||||
foreach ($config['domains'] as $aDomain) {
|
|
||||||
$selected = $aDomain === $user->domain ? ' selected ' : '';
|
|
||||||
print "<option value='$aDomain' $selected>@$aDomain</option>";
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
</select>
|
|
||||||
<?php
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-3 col-md-4 col-sm-12 col-xs-12 random-column">
|
|
||||||
<a role="button" href="?action=random"
|
|
||||||
class="btn btn-outline-primary col-sm-12 col-xs-12 random-button">Generate
|
|
||||||
Random</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<div class="container min-height">
|
<div class="container">
|
||||||
|
|
||||||
<?php
|
<div id="email-list" class="list-group">
|
||||||
if (empty($emails)) {
|
|
||||||
|
<?php foreach ($emails as $email) {
|
||||||
|
$safe_email_id = filter_var($email->id, FILTER_VALIDATE_INT);
|
||||||
?>
|
?>
|
||||||
<div>
|
<a class="list-group-item list-group-item-action email-list-item" data-toggle="collapse"
|
||||||
<div class="card waiting-screen">
|
href="#mail-box-<?php echo $email->id?>"
|
||||||
<div class="card-block">
|
role="button"
|
||||||
<p class="lead">Your mailbox <strong
|
aria-expanded="false" aria-controls="mail-box-<?php echo $email->id?>">
|
||||||
><?php echo $user->address ?></strong> is ready. </p>
|
|
||||||
<p>
|
<div class="media">
|
||||||
<button class="btn btn-outline-primary"
|
<button class="btn btn-white open-collapse-button">
|
||||||
onClick="copyToClipboard('<?php echo $user->address ?>');">
|
<i class="fas fa-caret-right expand-button-closed"></i>
|
||||||
Copy email address
|
<i class="fas fa-caret-down expand-button-opened"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="media-body">
|
||||||
|
<h6 class="list-group-item-heading"><?php echo filter_var($email->fromName, FILTER_SANITIZE_SPECIAL_CHARS)?><span class="text-muted"><?php echo filter_var($email->fromAddress, FILTER_SANITIZE_SPECIAL_CHARS)?></span>
|
||||||
|
<small class="float-right"><?php echo niceDate($email->date)?></small>
|
||||||
|
</h6>
|
||||||
|
<p class="list-group-item-text text-truncate">
|
||||||
|
<?php echo filter_var($email->subject, FILTER_SANITIZE_SPECIAL_CHARS); ?>
|
||||||
|
|
||||||
|
<span class="float-right primary">
|
||||||
|
<a class="btn btn-outline-primary btn-sm " download="true"
|
||||||
|
role="button"
|
||||||
|
href="?action=download_email&download_email_id=<?php echo $safe_email_id; ?>&address=<?php echo $user->address ?>">Download
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="btn btn-outline-danger btn-sm"
|
||||||
|
role="button"
|
||||||
|
href="?action=delete_email&email_id=<?php echo $safe_email_id; ?>&address=<?php echo $user->address ?>">Delete
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<div id="mail-box-<?php echo $email->id?>" role="tabpanel" aria-labelledby="headingCollapse1"
|
||||||
|
class="card-collapse collapse"
|
||||||
|
aria-expanded="true">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="card-block email-body">
|
||||||
|
<?php
|
||||||
|
$safeHtml = $purifier->purify($email->textHtml);
|
||||||
|
|
||||||
|
$safeText = htmlspecialchars($email->textPlain);
|
||||||
|
$safeText = nl2br($safeText);
|
||||||
|
$safeText = \AutoLinkExtension::auto_link_text($safeText);
|
||||||
|
|
||||||
|
$hasHtml = strlen(trim($safeHtml)) > 0;
|
||||||
|
$hasText = strlen(trim($safeText)) > 0;
|
||||||
|
|
||||||
|
if ($config['prefer_plaintext']) {
|
||||||
|
if ($hasText) {
|
||||||
|
echo $safeText;
|
||||||
|
} else {
|
||||||
|
echo $safeHtml;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if ($hasHtml) {
|
||||||
|
echo $safeHtml;
|
||||||
|
} else {
|
||||||
|
echo $safeText;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
||||||
<p>Emails will appear here automatically. They will be deleted after 30 days.</p>
|
|
||||||
<div class="spinner">
|
|
||||||
<div class="rect1"></div>
|
|
||||||
<div class="rect2"></div>
|
|
||||||
<div class="rect3"></div>
|
|
||||||
<div class="rect4"></div>
|
|
||||||
<div class="rect5"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<?php
|
<?php } ?>
|
||||||
} else {
|
</div>
|
||||||
|
|
||||||
foreach ($emails as $email) {
|
<?php
|
||||||
$safe_email_id = filter_var($email->id, FILTER_VALIDATE_INT);
|
if (empty($emails)) { ?>
|
||||||
?>
|
<div id="empty-mailbox">
|
||||||
|
<hr>
|
||||||
<div class="email-table">
|
<p>Emails will appear here automatically. </p>
|
||||||
|
<div class="spinner">
|
||||||
<div class="card email">
|
<div class="rect1"></div>
|
||||||
|
<div class="rect2"></div>
|
||||||
<!-- preview header -->
|
<div class="rect3"></div>
|
||||||
<div class="card-block header-shadow email-preview-header"
|
<div class="rect4"></div>
|
||||||
id="email-preview-header-<?php echo filter_var($email->id, FILTER_SANITIZE_SPECIAL_CHARS); ?>"
|
<div class="rect5"></div>
|
||||||
onclick="toggle_email_visibility('<?php echo filter_var($email->id, FILTER_SANITIZE_SPECIAL_CHARS); ?>')">
|
</div>
|
||||||
<div class="row">
|
</div>
|
||||||
<div class="col-sm-12">
|
<?php } ?>
|
||||||
<b class="card-title">
|
|
||||||
<?php echo filter_var($email->subject, FILTER_SANITIZE_SPECIAL_CHARS); ?>
|
|
||||||
</b>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-8">
|
|
||||||
<h6 class="card-subtitle mt-1 text-muted">
|
|
||||||
<?php
|
|
||||||
echo filter_var($email->fromName, FILTER_SANITIZE_SPECIAL_CHARS);
|
|
||||||
echo ' <';
|
|
||||||
echo filter_var($email->fromAddress, FILTER_SANITIZE_SPECIAL_CHARS);
|
|
||||||
echo '>';
|
|
||||||
?>
|
|
||||||
</h6>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-4">
|
|
||||||
<h6 class="card-subtitle mt-1 text-muted"
|
|
||||||
style="text-align: right">
|
|
||||||
<?php echo filter_var($email->date, FILTER_SANITIZE_SPECIAL_CHARS); ?>
|
|
||||||
</h6>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- full header -->
|
|
||||||
<div class="card-block header-shadow email-fullheader"
|
|
||||||
id="email-fullheader-<?php echo filter_var($email->id, FILTER_SANITIZE_SPECIAL_CHARS); ?>"
|
|
||||||
onclick="toggle_email_visibility('<?php echo filter_var($email->id, FILTER_SANITIZE_SPECIAL_CHARS); ?>')">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-8">
|
|
||||||
<h3 class="card-title">
|
|
||||||
<?php echo filter_var($email->subject, FILTER_SANITIZE_SPECIAL_CHARS); ?>
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-4 text-right">
|
|
||||||
<a class="btn btn-sm btn-outline-primary " download="true"
|
|
||||||
role="button"
|
|
||||||
href="?action=download_email&download_email_id=<?php echo $safe_email_id; ?>&address=<?php echo $user->address ?>">Download
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a class="btn btn-sm btn-outline-danger"
|
|
||||||
role="button"
|
|
||||||
href="?action=delete_email&email_id=<?php echo $safe_email_id; ?>&address=<?php echo $user->address ?>">Delete
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-8">
|
|
||||||
<h6 class="card-subtitle mt-1 text-muted">
|
|
||||||
<?php
|
|
||||||
echo filter_var($email->fromName, FILTER_SANITIZE_SPECIAL_CHARS);
|
|
||||||
echo ' <';
|
|
||||||
echo filter_var($email->fromAddress, FILTER_SANITIZE_SPECIAL_CHARS);
|
|
||||||
echo '>';
|
|
||||||
?>
|
|
||||||
</h6>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-4">
|
|
||||||
<h6 class="card-subtitle mt-1 text-muted"
|
|
||||||
style="text-align: right">
|
|
||||||
<?php echo filter_var($email->date, FILTER_SANITIZE_SPECIAL_CHARS); ?>
|
|
||||||
</h6>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- email content -->
|
|
||||||
<div class="card-block email-content"
|
|
||||||
id="email-content-<?php echo filter_var($email->id, FILTER_SANITIZE_SPECIAL_CHARS); ?>">
|
|
||||||
<h6 class="card-subtitle text-muted">
|
|
||||||
To: <?php echo filter_var($email->toString, FILTER_SANITIZE_SPECIAL_CHARS); ?></h6>
|
|
||||||
|
|
||||||
<?php
|
|
||||||
foreach ($email->cc as $cc) {
|
|
||||||
print "<h6 class='card-subtitle text-muted'>CC: " . filter_var($cc, FILTER_SANITIZE_SPECIAL_CHARS) . "</h6>";
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
|
|
||||||
<div class="mt-2 card-text">
|
|
||||||
<?php
|
|
||||||
$safeHtml = $purifier->purify($email->textHtml);
|
|
||||||
|
|
||||||
$safeText = htmlspecialchars($email->textPlain);
|
|
||||||
$safeText = nl2br($safeText);
|
|
||||||
$safeText = \AutoLinkExtension::auto_link_text($safeText);
|
|
||||||
|
|
||||||
$hasHtml = strlen(trim($safeHtml)) > 0;
|
|
||||||
$hasText = strlen(trim($safeText)) > 0;
|
|
||||||
|
|
||||||
if ($config['prefer_plaintext']) {
|
|
||||||
if ($hasText) {
|
|
||||||
echo $safeText;
|
|
||||||
} else {
|
|
||||||
echo $safeHtml;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if ($hasHtml) {
|
|
||||||
echo $safeHtml;
|
|
||||||
} else {
|
|
||||||
echo $safeText;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<?php
|
|
||||||
} // end foreach $email
|
|
||||||
} // end: has emails
|
|
||||||
?>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<p>Powered by <a href="https://github.com/synox/disposable-mailbox"><strong>synox/disposable-mailbox</strong></a>
|
<div class="container">
|
||||||
| <a href="https://github.com/synox/disposable-mailbox">Contribute to the development on Github.</a></p>
|
|
||||||
|
|
||||||
|
<select id="language-selection" class="custom-select" title="Language">
|
||||||
|
<option selected>English</option>
|
||||||
|
<option value="1">Deutsch</option>
|
||||||
|
<option value="2">Two</option>
|
||||||
|
<option value="3">Three</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<small class="text-justify quick-summary">
|
||||||
|
This is a disposable mailbox service. Whoever knows your username, can read your emails.
|
||||||
|
Emails will be deleted after 30 days.
|
||||||
|
<a data-toggle="collapse" href="#about"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-controls="about">
|
||||||
|
Show Details
|
||||||
|
</a>
|
||||||
|
</small>
|
||||||
|
<div class="card card-body collapse" id="about" style="max-width: 40rem">
|
||||||
|
|
||||||
|
<p class="text-justify">This disposable mailbox keeps your main mailbox clean from spam.</p>
|
||||||
|
|
||||||
|
<p class="text-justify">Just choose an address and use it on websites you don't trust and
|
||||||
|
don't
|
||||||
|
want to use
|
||||||
|
your
|
||||||
|
main email address.
|
||||||
|
Once you are done, you can just forget about the mailbox. All the spam stays here and does
|
||||||
|
not
|
||||||
|
fill up
|
||||||
|
your
|
||||||
|
main mailbox.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="text-justify">
|
||||||
|
You select the address you want to use and received emails will be displayed
|
||||||
|
automatically.
|
||||||
|
There is not registration and no passwords. If you know the address, you can read the
|
||||||
|
emails.
|
||||||
|
<strong>Basically, all emails are public. So don't use it for sensitive data.</strong>
|
||||||
|
|
||||||
|
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<small>Powered by
|
||||||
|
<a
|
||||||
|
href="https://github.com/synox/disposable-mailbox"><strong>synox/disposable-mailbox</strong></a>
|
||||||
|
</small>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||||||
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
|
||||||
|
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
|
||||||
|
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
|
||||||
|
integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
clipboard = new ClipboardJS('[data-clipboard-target]');
|
||||||
|
$(function () {
|
||||||
|
$('[data-tooltip="tooltip"]').tooltip()
|
||||||
|
});
|
||||||
|
|
||||||
|
/** from https://github.com/twbs/bootstrap/blob/c11132351e3e434f6d4ed72e5a418eb692c6a319/assets/js/src/application.js */
|
||||||
|
clipboard.on('success', function (e) {
|
||||||
|
$(e.trigger)
|
||||||
|
.attr('title', 'Copied!')
|
||||||
|
.tooltip('_fixTitle')
|
||||||
|
.tooltip('show')
|
||||||
|
.attr('title', 'Copy to clipboard')
|
||||||
|
.tooltip('_fixTitle');
|
||||||
|
e.clearSelection();
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
148
src/style.css
148
src/style.css
|
|
@ -1,33 +1,102 @@
|
||||||
html > body {
|
|
||||||
/* override bootstrap background */
|
|
||||||
background: #f9f9f9;
|
|
||||||
|
|
||||||
|
html > body {
|
||||||
display: flex;
|
display: flex;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#my-address {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
margin-left: 1rem;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-address-block {
|
||||||
|
background-color: #F8F9FA;
|
||||||
|
padding: 0.5rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding-left: 0;
|
||||||
|
margin-left: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.get-new-address-col {
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-list-item {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-button {
|
||||||
|
font-size: 75%;
|
||||||
|
color: #808080;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-button:hover {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #007BFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
/*background-color: #f9f9f9;*/
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
flex: 1;
|
flex: 1; /* stick footer to the bottom */
|
||||||
padding-bottom: 30px;
|
padding-top: 2rem;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#language-selection {
|
||||||
|
width: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
font-size: 12px;
|
padding-top: 1rem;
|
||||||
|
background-color: #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.open-collapse-button {
|
||||||
|
background-color: transparent;
|
||||||
|
width: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.open-collapse-button > i {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-expanded="false"] .expand-button-closed {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-expanded="false"] .expand-button-opened {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-expanded="true"] .expand-button-closed {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-expanded="true"] .expand-button-opened {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#new-content-avalable {
|
||||||
|
/*display: none;*/
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-top: 1em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-block {
|
.email-body {
|
||||||
padding: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.email-table {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.min-height {
|
|
||||||
min-height: 400px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-fixed {
|
.alert-fixed {
|
||||||
|
|
@ -40,47 +109,6 @@ div.min-height {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.email-fullheader {
|
#address-box-edit {
|
||||||
display: none;
|
margin: 1rem;
|
||||||
}
|
|
||||||
|
|
||||||
.email-preview-header {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.email-content {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#new-content-avalable {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
header {
|
|
||||||
background-color: #D9E2E9;
|
|
||||||
padding-top: 5px;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.email-table > .email {
|
|
||||||
border-top: 5px solid #7C96AB;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-shadow {
|
|
||||||
box-shadow: 0 2px 2px rgba(182, 182, 182, 0.75);
|
|
||||||
}
|
|
||||||
|
|
||||||
.waiting-screen {
|
|
||||||
padding: 40px 15px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.random-column {
|
|
||||||
border-left: 1px dashed #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.random-button {
|
|
||||||
height: 48px;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user