make nthmail a link and addr copiable

This commit is contained in:
Guilherme Rugai Freire 2024-07-21 01:07:50 -03:00
parent 20842416b8
commit e9cb98eb50
No known key found for this signature in database
GPG Key ID: AC1D9B6E48E16AC1
2 changed files with 27 additions and 5 deletions

View File

@ -2,12 +2,12 @@ package web_server
templ header(rcpt_addr string) { templ header(rcpt_addr string) {
<div class="header"> <div class="header">
<h3> <a href="/">
nthmail.xyz nthmail.xyz
</h3> </a>
<div class="header-addr"> <div class="header-addr">
<p>inbox: </p> <p>inbox: </p>
<span>{ rcpt_addr }</span> <button tooltip="Copied" id="mail-addr" onclick="navigator.clipboard.writeText(document.getElementById('mail-addr').innerText)">{ rcpt_addr }</button>
</div> </div>
</div> </div>
} }

View File

@ -106,20 +106,42 @@ templ styles() {
font-family: monospace, "sans-serif"; font-family: monospace, "sans-serif";
} }
.header h3 { .header a {
font-weight: bold; font-weight: bold;
font-size: 1.65rem;
text-decoration: none;
color: inherit;
} }
.header .header-addr { .header .header-addr {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding-bottom: 4px;
position: relative;
} }
.header .header-addr span { .header .header-addr button {
background: none;
color: inherit;
border: none;
font: inherit;
cursor: pointer;
outline: inherit;
user-select: text;
margin-left: 18px; margin-left: 18px;
font-style: italic; font-style: italic;
} }
*[tooltip]:focus:after {
content: attr(tooltip);
display:block;
position: absolute;
top: 130%;
left: 50%;
font-style: normal;
}
/* FOOTER */ /* FOOTER */
footer { footer {
background-color: green; background-color: green;