new layout draft
This commit is contained in:
u205400
parent
e4652ff62d
commit
31e5e82dfc
383
frontend2.html
Normal file
383
frontend2.html
Normal file
|
|
@ -0,0 +1,383 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
|
||||
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
|
||||
crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
|
||||
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
|
||||
crossorigin="anonymous">
|
||||
<title>(2) asdf@asdf.com</title>
|
||||
<link rel="stylesheet" href="spinner.css">
|
||||
|
||||
<style>
|
||||
|
||||
html > body {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.my-address {
|
||||
background-color: #feffed;
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #f9f9f9;
|
||||
padding-bottom: 1rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1; /* stick footer to the bottom */
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
#language-selection {
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding-top: 3rem;
|
||||
background-color: #dee2e6;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.email-body {
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div id="new-content-avalable" class="alert alert-info alert-fixed" role="alert">
|
||||
<!--TODO: alert-fixed does not work -->
|
||||
<strong>New mails</strong> have arrived - <a href="javascript:location.reload();" class="alert-link">reload!</a>
|
||||
</div>
|
||||
|
||||
|
||||
<header>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
|
||||
|
||||
<p class="lead col">
|
||||
Your disposable mailbox
|
||||
<strong class="my-address" id="my-address"
|
||||
data-tooltip="tooltip" data-placement="top" title="Click to copy address"
|
||||
data-clipboard-target="#my-address">user@domain.com
|
||||
</strong>
|
||||
is ready.
|
||||
<button type="button" class="btn btn-outline-primary"
|
||||
data-toggle="collapse" title="choose your own address"
|
||||
data-target=".change-address-toggle"
|
||||
data-tooltip="tooltip" aria-controls="address-box-edit" aria-expanded="false">change
|
||||
address
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-dark" data-tooltip="tooltip" data-placement="top"
|
||||
title="open random mailbox"><i class="fas fa-random"></i></button>
|
||||
|
||||
</p>
|
||||
<div class="col-md-auto">
|
||||
<select id="language-selection" class="custom-select float-right " title="Language">
|
||||
<option selected>English</option>
|
||||
<option value="1">Deutsch</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="collapse change-address-toggle" id="address-box-edit">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
Choose your own address:
|
||||
<div class="form-row align-items-center">
|
||||
<div class="col-sm">
|
||||
<label class="sr-only" for="inlineFormInputName">Address</label>
|
||||
<input type="text" class="form-control" id="inlineFormInputName"
|
||||
placeholder="address"
|
||||
value="user123">
|
||||
</div>
|
||||
<div class="col-sm-4 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">
|
||||
<option selected>domain.com</option>
|
||||
<option value="3">asdf.com</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto my-1">
|
||||
<button type="submit" class="btn btn-primary">Open mailbox</button>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
Or geneate a random email address:
|
||||
<button type="button" class="btn btn-dark"><i class="fa fa-random"></i> Open random
|
||||
mailbox
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="container" id="map">
|
||||
|
||||
<div class="list-group">
|
||||
|
||||
|
||||
<a class="list-group-item list-group-item-action" data-toggle="collapse" href="#mail-box-1"
|
||||
role="button"
|
||||
aria-expanded="false" aria-controls="mail-box-1">
|
||||
|
||||
<div class="media">
|
||||
<button class="btn btn-white open-collapse-button">
|
||||
<i class="fas fa-caret-right expand-button-closed"></i>
|
||||
<i class="fas fa-caret-down expand-button-opened"></i>
|
||||
</button>
|
||||
|
||||
|
||||
<div class="media-body">
|
||||
<h6 class="list-group-item-heading">Myservice Inc, UK <span class="text-muted">newsletter@reply.asdf.com</span>
|
||||
<small class="float-right">Today</small>
|
||||
</h6>
|
||||
<p class="list-group-item-text text-truncate">
|
||||
Sagen Sie uns Ihre Meinung!
|
||||
|
||||
<span class="float-right primary">
|
||||
<button class="btn btn-outline-primary btn-sm">Download</button>
|
||||
<button class="btn btn-outline-danger btn-sm">Delete</button>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div id="mail-box-1" role="tabpanel" aria-labelledby="headingCollapse1"
|
||||
class="card-collapse collapse"
|
||||
aria-expanded="true">
|
||||
<div class="card-body">
|
||||
<div class="card-block email-body">
|
||||
<p>Hi Joe</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis arcu erat, luctus
|
||||
vitae
|
||||
consectetur imperdiet, congue sit amet purus. Vivamus vel aliquet neque. Aenean
|
||||
sed luctus
|
||||
justo, at tempus risus. Cras quis tempus nunc, vitae imperdiet neque. Ut feugiat
|
||||
risus non
|
||||
volutpat fermentum. Aliquam consectetur mauris ut leo faucibus, eu varius tortor
|
||||
posuere.
|
||||
Morbi dictum nunc quam, blandit viverra mi auctor vitae. Donec ornare venenatis
|
||||
augue vel
|
||||
vulputate. Nunc porttitor magna felis, eu suscipit orci auctor varius.
|
||||
Pellentesque posuere
|
||||
dolor ex, eu eleifend odio bibendum a. Pellentesque a placerat dolor, vel
|
||||
ultricies odio.
|
||||
Nunc feugiat nibh ac vehicula semper. Quisque sit amet aliquet nisi. Curabitur vel
|
||||
nulla
|
||||
venenatis, accumsan dolor ut, vestibulum urna. Morbi congue elit facilisis,
|
||||
vehicula felis
|
||||
in, placerat erat.
|
||||
|
||||
<p>Regards,
|
||||
<br>jim</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- next email -->
|
||||
|
||||
<a class="list-group-item list-group-item-action" data-toggle="collapse" href="#mail-box-2"
|
||||
role="button"
|
||||
aria-expanded="false" aria-controls="mail-box-1">
|
||||
|
||||
<div class="media">
|
||||
<button class="btn btn-white open-collapse-button">
|
||||
<i class="fas fa-caret-right expand-button-closed"></i>
|
||||
<i class="fas fa-caret-down expand-button-opened"></i>
|
||||
</button>
|
||||
|
||||
|
||||
<div class="media-body">
|
||||
<h6 class="list-group-item-heading">Myservice Inc, UK <span class="text-muted">newsletter@reply.asdf.com</span>
|
||||
<small class="float-right">Today</small>
|
||||
</h6>
|
||||
<p class="list-group-item-text text-truncate">
|
||||
Sagen Sie uns Ihre Meinung!
|
||||
|
||||
<span class="float-right primary">
|
||||
<button class="btn btn-outline-primary btn-sm">Download</button>
|
||||
<button class="btn btn-outline-danger btn-sm">Delete</button>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div id="mail-box-2" role="tabpanel" aria-labelledby="headingCollapse1"
|
||||
class="card-collapse collapse"
|
||||
aria-expanded="true">
|
||||
<div class="card-body">
|
||||
<div class="card-block">
|
||||
<p>Hi Joe</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis arcu erat, luctus
|
||||
vitae
|
||||
consectetur imperdiet, congue sit amet purus. Vivamus vel aliquet neque. Aenean
|
||||
sed luctus
|
||||
justo, at tempus risus. Cras quis tempus nunc, vitae imperdiet neque. Ut feugiat
|
||||
risus non
|
||||
volutpat fermentum. Aliquam consectetur mauris ut leo faucibus, eu varius tortor
|
||||
posuere.
|
||||
Morbi dictum nunc quam, blandit viverra mi auctor vitae. Donec ornare venenatis
|
||||
augue vel
|
||||
vulputate. Nunc porttitor magna felis, eu suscipit orci auctor varius.
|
||||
Pellentesque posuere
|
||||
dolor ex, eu eleifend odio bibendum a. Pellentesque a placerat dolor, vel
|
||||
ultricies odio.
|
||||
Nunc feugiat nibh ac vehicula semper. Quisque sit amet aliquet nisi. Curabitur vel
|
||||
nulla
|
||||
venenatis, accumsan dolor ut, vestibulum urna. Morbi congue elit facilisis,
|
||||
vehicula felis
|
||||
in, placerat erat.
|
||||
|
||||
<p>Regards,
|
||||
<br>jim</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<hr>
|
||||
<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>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p class="text-justify">This is a disposable mailbox service. Everybody can read all emails.
|
||||
<a class="btn btn-dark btn-sm" data-toggle="collapse" href="#about" role="button"
|
||||
aria-expanded="false"
|
||||
aria-controls="about">
|
||||
Show Details
|
||||
</a>
|
||||
</p>
|
||||
<div class="card card-body collapse" id="about" style="max-width: 40rem">
|
||||
|
||||
<p class="text-justify">This 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>
|
||||
|
||||
|
||||
<small>Powered by <a
|
||||
href="https://github.com/synox/disposable-mailbox"><strong>synox/disposable-mailbox</strong></a>
|
||||
| <a href="https://github.com/synox/disposable-mailbox">Contribute to the development on
|
||||
Github.</a></small>
|
||||
</div>
|
||||
</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('#my-address');
|
||||
$(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>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user