design improvments
redesigned compose panel added icons added read reciept functionality fixed dark mode
This commit is contained in:
1
icons/inbox.svg
Normal file
1
icons/inbox.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#ffffff" d="M121 32C91.6 32 66 52 58.9 80.5L1.9 308.4C.6 313.5 0 318.7 0 323.9L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-92.1c0-5.2-.6-10.4-1.9-15.5l-57-227.9C446 52 420.4 32 391 32L121 32zm0 64l270 0 48 192-51.2 0c-12.1 0-23.2 6.8-28.6 17.7l-14.3 28.6c-5.4 10.8-16.5 17.7-28.6 17.7l-120.4 0c-12.1 0-23.2-6.8-28.6-17.7l-14.3-28.6c-5.4-10.8-16.5-17.7-28.6-17.7L73 288 121 96z"/></svg>
|
||||
|
After Width: | Height: | Size: 622 B |
1
icons/sent.svg
Normal file
1
icons/sent.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#ffffff" d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480l0-83.6c0-4 1.5-7.8 4.2-10.8L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"/></svg>
|
||||
|
After Width: | Height: | Size: 577 B |
26
inbox.html
26
inbox.html
@@ -12,11 +12,12 @@
|
||||
<h2>bang</h2>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><button id="sidebar-inbox" class="sidebar-btn active">Inbox</button></li>
|
||||
<li><button id="sidebar-sent" class="sidebar-btn">Sent</button></li>
|
||||
<li><button id="sidebar-inbox" class="sidebar-btn active"><img src="icons/inbox.svg" alt="Inbox" class="sidebar-icon">Inbox</button></li>
|
||||
<li><button id="sidebar-sent" class="sidebar-btn"><img src="icons/sent.svg" alt="Sent" class="sidebar-icon">Sent</button></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<button class="compose-btn" id="openComposeBtn">Compose</button>
|
||||
<button class="darkmode-btn" id="toggleDarkModeBtn">Toggle Dark Mode</button>
|
||||
<button class="logout-btn" onclick="logout()">Logout</button>
|
||||
</aside>
|
||||
<main class="main-content">
|
||||
@@ -26,18 +27,15 @@
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div id="composeOverlay" class="modal-overlay" style="display:none;">
|
||||
<div class="modal-content">
|
||||
<h2>Compose Email</h2>
|
||||
<form id="composeForm">
|
||||
<input type="text" id="composeTo" placeholder="To (person!place.com)" required><br>
|
||||
<input type="text" id="composeSubject" placeholder="Subject" required><br>
|
||||
<textarea id="composeBody" placeholder="Message" required></textarea><br>
|
||||
<button type="submit">Send</button>
|
||||
<button type="button" id="closeComposeBtn">Cancel</button>
|
||||
</form>
|
||||
<p id="composeError" class="error"></p>
|
||||
</div>
|
||||
<div id="composePanel" class="compose-panel" style="display:none;">
|
||||
<button type="button" id="composeCloseXBtn" style="position:absolute;top:8px;right:12px;font-size:1.5em;background:none;border:none;color:#888;cursor:pointer;line-height:1;z-index:10;" aria-label="Close">×</button>
|
||||
<form id="composeForm">
|
||||
<input type="text" id="composeTo" placeholder="To (person!place.com)" required spellcheck="false"><br>
|
||||
<input type="text" id="composeSubject" placeholder="Subject" required><br>
|
||||
<textarea id="composeBody" placeholder="Message" required></textarea><br>
|
||||
<button type="submit">Send</button>
|
||||
</form>
|
||||
<p id="composeError" class="error"></p>
|
||||
</div>
|
||||
|
||||
<script src="main.js"></script>
|
||||
|
||||
186
main.js
186
main.js
@@ -92,27 +92,60 @@ if (document.getElementById('email-list')) {
|
||||
const fromFull = email.domain ? `${email.from}!${email.domain}` : email.from;
|
||||
return fromFull === userFull;
|
||||
});
|
||||
// Sort emails by timestamp descending (newest first)
|
||||
inboxEmails.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
|
||||
sentEmails.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
|
||||
let currentFolder = 'inbox';
|
||||
let selectedEmail = null;
|
||||
function renderList() {
|
||||
const list = currentFolder === 'inbox' ? inboxEmails : sentEmails;
|
||||
let html = `<div class="email-list-section"><div class="email-list-title">${currentFolder === 'inbox' ? 'Inbox' : 'Sent'}</div>`;
|
||||
if (list.length === 0) {
|
||||
html += '<p>No emails.</p>';
|
||||
function formatDate(iso) {
|
||||
if (!iso) return '';
|
||||
const date = new Date(iso);
|
||||
if (isNaN(date)) return '';
|
||||
const now = new Date();
|
||||
const isToday = date.toDateString() === now.toDateString();
|
||||
const diffMs = now - date;
|
||||
const diffDays = diffMs / (1000 * 60 * 60 * 24);
|
||||
if (isToday) {
|
||||
// Show time (e.g. 2:30pm or 4pm)
|
||||
let hour = date.getHours();
|
||||
let minute = date.getMinutes();
|
||||
let ampm = hour >= 12 ? 'pm' : 'am';
|
||||
hour = hour % 12;
|
||||
if (hour === 0) hour = 12;
|
||||
if (minute === 0) {
|
||||
return hour + ampm;
|
||||
} else {
|
||||
return hour + ':' + String(minute).padStart(2, '0') + ampm;
|
||||
}
|
||||
} else if (diffDays < 7) {
|
||||
// Show day of week (e.g. Mon)
|
||||
return date.toLocaleDateString(undefined, { weekday: 'short' });
|
||||
} else {
|
||||
html += list.map((email, idx) => {
|
||||
const display = currentFolder === 'inbox'
|
||||
? (email.domain ? `${email.from}!${email.domain}` : email.from)
|
||||
: (email.domain ? `${email.to}!${email.domain}` : email.to);
|
||||
const fromto = currentFolder === 'inbox' ? `From: ${display}` : `To: ${display}`;
|
||||
return `<div class="email-list-item${selectedEmail === idx ? ' selected' : ''}" data-idx="${idx}">
|
||||
<div class="subject">${email.subject}</div>
|
||||
<div class="fromto">${fromto}</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
// Show month and day (e.g. Jun 7)
|
||||
return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
|
||||
}
|
||||
html += '</div>';
|
||||
document.getElementById('email-list').innerHTML = html;
|
||||
}
|
||||
function renderList() {
|
||||
const listDiv = document.getElementById('email-list');
|
||||
if (!listDiv) return;
|
||||
let emailsToShow = currentFolder === 'inbox' ? inboxEmails : sentEmails;
|
||||
emailsToShow = filterEmails(emailsToShow);
|
||||
let html = '';
|
||||
emailsToShow.forEach((email, idx) => {
|
||||
const isSelected = selectedEmail === idx;
|
||||
const subject = email.subject || '(No Subject)';
|
||||
const fromFull = email.from && email.domain ? `${email.from}!${email.domain}` : email.from || '';
|
||||
const toFull = email.to && email.domain ? `${email.to}!${email.domain}` : email.to || '';
|
||||
const dateStr = formatDate(email.timestamp);
|
||||
html += `<div class="email-list-item${isSelected ? ' selected' : ''}" data-idx="${idx}" style="display:flex;align-items:center;justify-content:space-between;">
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div class="subject" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${subject}</div>
|
||||
<div class="fromto" style="font-size:0.95em;">${currentFolder === 'inbox' ? 'From: ' + fromFull : 'To: ' + toFull}</div>
|
||||
</div>
|
||||
<div style="margin-left:12px;white-space:nowrap;font-size:0.85em;color:#888;">${dateStr}</div>
|
||||
</div>`;
|
||||
});
|
||||
listDiv.innerHTML = html;
|
||||
// Add click listeners
|
||||
document.querySelectorAll('.email-list-item').forEach(item => {
|
||||
item.onclick = function() {
|
||||
@@ -123,25 +156,71 @@ if (document.getElementById('email-list')) {
|
||||
});
|
||||
}
|
||||
function renderDetail() {
|
||||
const list = currentFolder === 'inbox' ? inboxEmails : sentEmails;
|
||||
if (selectedEmail == null || !list[selectedEmail]) {
|
||||
document.getElementById('email-detail').innerHTML = '';
|
||||
const detailDiv = document.getElementById('email-detail');
|
||||
if (!detailDiv) return;
|
||||
let emailsToShow = currentFolder === 'inbox' ? inboxEmails : sentEmails;
|
||||
if (selectedEmail == null || !emailsToShow[selectedEmail]) {
|
||||
detailDiv.innerHTML = '<div class="email-detail-content">Select an email to view details.</div>';
|
||||
return;
|
||||
}
|
||||
const email = list[selectedEmail];
|
||||
const fromDisplay = email.domain ? `${email.from}!${email.domain}` : email.from;
|
||||
const toDisplay = email.domain ? `${email.to}!${email.domain}` : email.to;
|
||||
document.getElementById('email-detail').innerHTML = `
|
||||
<div class="email-detail-content">
|
||||
const email = emailsToShow[selectedEmail];
|
||||
const fromFull = email.from && email.domain ? `${email.from}!${email.domain}` : email.from || '';
|
||||
const toFull = email.to && email.domain ? `${email.to}!${email.domain}` : email.to || '';
|
||||
const dateStr = formatDate(email.timestamp);
|
||||
function formatFullDate(iso) {
|
||||
if (!iso) return '';
|
||||
const date = new Date(iso);
|
||||
if (isNaN(date)) return '';
|
||||
let month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
let day = String(date.getDate()).padStart(2, '0');
|
||||
let year = date.getFullYear();
|
||||
let hour = date.getHours();
|
||||
let minute = date.getMinutes();
|
||||
let ampm = hour >= 12 ? 'pm' : 'am';
|
||||
hour = hour % 12;
|
||||
if (hour === 0) hour = 12;
|
||||
let timeStr = minute === 0 ? `${hour}${ampm}` : `${hour}:${String(minute).padStart(2, '0')}${ampm}`;
|
||||
return `${month}/${day}/${year} @ ${timeStr}`;
|
||||
}
|
||||
const fullDateStr = formatFullDate(email.timestamp);
|
||||
|
||||
// Send POST to /mailbox/open to indicate message was opened
|
||||
const { username, password } = getCredentials();
|
||||
if (username && password && email.id) {
|
||||
fetch('http://localhost:8080/mailbox/open', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Basic ' + btoa(username + ':' + password)
|
||||
},
|
||||
body: JSON.stringify({ user: username, id: email.id })
|
||||
});
|
||||
}
|
||||
|
||||
// Show 'Read' if in sent folder and email.read is true
|
||||
let readHtml = '';
|
||||
if (currentFolder === 'sent' && email.read === true) {
|
||||
readHtml = '<span style="margin-right:12px;color:#2e7d32;font-weight:bold;font-size:0.95em;">Read</span>';
|
||||
}
|
||||
|
||||
detailDiv.innerHTML = `
|
||||
<div class="email-detail-content" style="position:relative;">
|
||||
<div class="email-detail-header">
|
||||
<div><strong>From:</strong> ${fromDisplay}</div>
|
||||
<div><strong>To:</strong> ${toDisplay}</div>
|
||||
<div><strong>Subject:</strong> ${email.subject}</div>
|
||||
<div style="font-size:1.5em;font-weight:bold;margin-bottom:8px;">${email.subject || '(No Subject)'}</div>
|
||||
<div><strong>From:</strong> ${fromFull}</div>
|
||||
<div><strong>To:</strong> ${toFull}</div>
|
||||
</div>
|
||||
<div class="email-detail-body">
|
||||
<div style="position:absolute;top:24px;right:32px;font-size:0.95em;color:#888;display:flex;align-items:center;gap:8px;" title="${fullDateStr}">${readHtml}${dateStr}</div>
|
||||
${email.body || ''}
|
||||
</div>
|
||||
<div class="email-detail-body">${email.body}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
// Helper to filter emails (no-op for now, can add search/filter later)
|
||||
function filterEmails(emails) {
|
||||
return emails;
|
||||
}
|
||||
// Sidebar folder switching
|
||||
document.getElementById('sidebar-inbox').onclick = function() {
|
||||
currentFolder = 'inbox';
|
||||
@@ -164,6 +243,7 @@ if (document.getElementById('email-list')) {
|
||||
})
|
||||
.catch(err => {
|
||||
document.getElementById('inboxError').innerText = 'Failed to load inbox.';
|
||||
console.error('Inbox load error:', err);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -208,21 +288,23 @@ if (document.getElementById('sendForm')) {
|
||||
};
|
||||
}
|
||||
|
||||
// Compose Overlay logic
|
||||
// Compose Panel logic (bottom right, non-blocking)
|
||||
if (document.getElementById('openComposeBtn')) {
|
||||
const overlay = document.getElementById('composeOverlay');
|
||||
const panel = document.getElementById('composePanel');
|
||||
const openBtn = document.getElementById('openComposeBtn');
|
||||
const closeBtn = document.getElementById('closeComposeBtn');
|
||||
const closeXBtn = document.getElementById('composeCloseXBtn');
|
||||
const form = document.getElementById('composeForm');
|
||||
const errorP = document.getElementById('composeError');
|
||||
openBtn.onclick = function() {
|
||||
overlay.style.display = 'flex';
|
||||
panel.style.display = 'flex';
|
||||
form.reset();
|
||||
errorP.innerText = '';
|
||||
};
|
||||
closeBtn.onclick = function() {
|
||||
overlay.style.display = 'none';
|
||||
};
|
||||
if (closeXBtn) {
|
||||
closeXBtn.onclick = function() {
|
||||
panel.style.display = 'none';
|
||||
};
|
||||
}
|
||||
form.onsubmit = async function(e) {
|
||||
e.preventDefault();
|
||||
const { username, password } = getCredentials();
|
||||
@@ -252,11 +334,41 @@ if (document.getElementById('openComposeBtn')) {
|
||||
body: JSON.stringify(email)
|
||||
});
|
||||
if (res.ok) {
|
||||
overlay.style.display = 'none';
|
||||
panel.style.display = 'none';
|
||||
location.reload();
|
||||
} else {
|
||||
const err = await res.text();
|
||||
errorP.innerText = err;
|
||||
}
|
||||
};
|
||||
// Ensure dark mode is applied on load for inbox.html
|
||||
applyDarkMode(getDarkModePref());
|
||||
}
|
||||
|
||||
// Dark mode toggle logic
|
||||
function applyDarkMode(isDark) {
|
||||
if (isDark) {
|
||||
document.body.classList.add('dark-mode');
|
||||
} else {
|
||||
document.body.classList.remove('dark-mode');
|
||||
}
|
||||
}
|
||||
function getDarkModePref() {
|
||||
return localStorage.getItem('darkMode') === 'true';
|
||||
}
|
||||
function setDarkModePref(val) {
|
||||
localStorage.setItem('darkMode', val ? 'true' : 'false');
|
||||
}
|
||||
if (document.getElementById('toggleDarkModeBtn')) {
|
||||
const btn = document.getElementById('toggleDarkModeBtn');
|
||||
btn.onclick = function() {
|
||||
const isDark = !getDarkModePref();
|
||||
setDarkModePref(isDark);
|
||||
applyDarkMode(isDark);
|
||||
};
|
||||
// Apply on load
|
||||
applyDarkMode(getDarkModePref());
|
||||
} else {
|
||||
// Apply dark mode on other pages too
|
||||
applyDarkMode(getDarkModePref());
|
||||
}
|
||||
|
||||
306
style-v1.css
Normal file
306
style-v1.css
Normal file
@@ -0,0 +1,306 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background: #f4f4f4;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body.dark-mode {
|
||||
background: #181a1b;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
.layout {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.sidebar {
|
||||
width: 240px;
|
||||
background: #e0e0e0; /* Changed from #222e3c to a light grey */
|
||||
color: #222e3c;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 32px 0 0 0;
|
||||
box-shadow: 2px 0 8px rgba(0,0,0,0.04);
|
||||
}
|
||||
body.dark-mode .sidebar {
|
||||
background: #23272e;
|
||||
color: #e0e0e0;
|
||||
box-shadow: 2px 0 8px rgba(0,0,0,0.18);
|
||||
}
|
||||
.sidebar h2 {
|
||||
color: #222e3c;
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
font-size: 1.5em;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
body.dark-mode .sidebar h2,
|
||||
body.dark-mode .sidebar-btn,
|
||||
body.dark-mode .sidebar-btn.active,
|
||||
body.dark-mode .sidebar-btn:hover {
|
||||
color: #e0e0e0;
|
||||
background: #23272e;
|
||||
}
|
||||
.sidebar nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 24px 0;
|
||||
}
|
||||
.sidebar nav li {
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
.sidebar-btn {
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #222e3c;
|
||||
padding: 14px 0;
|
||||
font-size: 1.1em;
|
||||
text-align: left;
|
||||
padding-left: 32px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
body.dark-mode .sidebar-btn.active, body.dark-mode .sidebar-btn:hover {
|
||||
background: #2d3138;
|
||||
}
|
||||
.sidebar-btn.active, .sidebar-btn:hover {
|
||||
background: #cccccc;
|
||||
}
|
||||
.compose-btn, .logout-btn {
|
||||
margin: 12px 24px 0 24px;
|
||||
padding: 12px 0;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
.compose-btn {
|
||||
background: #0077cc;
|
||||
color: #fff;
|
||||
}
|
||||
body.dark-mode .compose-btn {
|
||||
background: #005fa3;
|
||||
color: #fff;
|
||||
}
|
||||
.compose-btn:hover {
|
||||
background: #005fa3;
|
||||
}
|
||||
.logout-btn {
|
||||
background: #fff;
|
||||
color: #222e3c;
|
||||
border: 1px solid #eee;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
body.dark-mode .logout-btn {
|
||||
background: #23272e;
|
||||
color: #e0e0e0;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
.logout-btn:hover {
|
||||
background: #f4f4f4;
|
||||
}
|
||||
body.dark-mode .logout-btn:hover {
|
||||
background: #181a1b;
|
||||
}
|
||||
.main-content {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
padding: 40px 32px;
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
}
|
||||
body.dark-mode .main-content {
|
||||
background: #111317;
|
||||
}
|
||||
#email-list {
|
||||
width: 340px;
|
||||
border-right: 1px solid #eee;
|
||||
padding-right: 24px;
|
||||
overflow-y: auto;
|
||||
max-height: 70vh;
|
||||
}
|
||||
body.dark-mode #email-list {
|
||||
border-color: #333;
|
||||
}
|
||||
.email-list-section {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.email-list-title {
|
||||
font-size: 1.1em;
|
||||
color: #0077cc;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
body.dark-mode .email-list-title {
|
||||
color: #fff;
|
||||
}
|
||||
.email-list-item {
|
||||
padding: 12px 10px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 6px;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition: background 0.15s, border 0.15s;
|
||||
}
|
||||
body.dark-mode .email-list-item {
|
||||
background: #111317;
|
||||
color: #fff;
|
||||
}
|
||||
.email-list-item.selected, .email-list-item:hover {
|
||||
background: #f0f6fa;
|
||||
border: 1px solid #0077cc;
|
||||
}
|
||||
body.dark-mode .email-list-item.selected, body.dark-mode .email-list-item:hover {
|
||||
background: #2d3138;
|
||||
border-color: #0077cc;
|
||||
}
|
||||
.email-list-item .subject {
|
||||
font-weight: bold;
|
||||
color: #222e3c;
|
||||
}
|
||||
body.dark-mode .email-list-item .subject {
|
||||
color: #fff;
|
||||
}
|
||||
.email-list-item .fromto {
|
||||
font-size: 0.95em;
|
||||
color: #555;
|
||||
}
|
||||
.email-detail {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding-left: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.email-detail-content {
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||
}
|
||||
body.dark-mode .email-detail-content {
|
||||
background: #181a1b;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
.email-detail-header {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.email-detail-header strong {
|
||||
color: #0077cc;
|
||||
}
|
||||
.email-detail-body {
|
||||
margin-top: 16px;
|
||||
white-space: pre-wrap;
|
||||
color: #222e3c;
|
||||
}
|
||||
body.dark-mode .email-detail-body {
|
||||
color: #fff;
|
||||
}
|
||||
.error {
|
||||
color: #d8000c;
|
||||
text-align: center;
|
||||
}
|
||||
body.dark-mode .error {
|
||||
color: #ffb3b3;
|
||||
}
|
||||
/* Modal overlay for compose */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0,0,0,0.35);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
.modal-content {
|
||||
background: #fff;
|
||||
padding: 32px 32px 24px 32px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.18);
|
||||
min-width: 340px;
|
||||
max-width: 95vw;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
body.dark-mode .modal-content {
|
||||
background: #111317;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
#composeForm input, #composeForm textarea, #composeForm button {
|
||||
width: 100%;
|
||||
margin: 8px 0;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body.dark-mode input, body.dark-mode textarea {
|
||||
background: #181a1b;
|
||||
color: #e0e0e0;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
#composeForm button[type="submit"] {
|
||||
background: #0077cc;
|
||||
color: #fff;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#composeForm button[type="submit"]:hover {
|
||||
background: #005fa3;
|
||||
}
|
||||
#composeForm button[type="button"] {
|
||||
background: #eee;
|
||||
color: #222e3c;
|
||||
border: none;
|
||||
margin-top: 0;
|
||||
}
|
||||
#composeForm button[type="button"]:hover {
|
||||
background: #ddd;
|
||||
}
|
||||
body.dark-mode input::placeholder, body.dark-mode textarea::placeholder {
|
||||
color: #aaa;
|
||||
}
|
||||
.darkmode-btn {
|
||||
margin: 12px 24px 0 24px;
|
||||
padding: 12px 0;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background: #eee;
|
||||
color: #222e3c;
|
||||
}
|
||||
body.dark-mode .darkmode-btn {
|
||||
background: #444;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
body.dark-mode .darkmode-btn:hover {
|
||||
background: #222;
|
||||
}
|
||||
.darkmode-btn:hover {
|
||||
background: #ccc;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.main-content {
|
||||
flex-direction: column;
|
||||
padding: 24px 8px;
|
||||
}
|
||||
#email-list {
|
||||
width: 100%;
|
||||
max-height: 200px;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-right: 0;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
.email-detail {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
225
style.css
225
style.css
@@ -4,6 +4,10 @@ body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body.dark-mode {
|
||||
background: #181a1b;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
.layout {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
@@ -18,6 +22,11 @@ body {
|
||||
padding: 32px 0 0 0;
|
||||
box-shadow: 2px 0 8px rgba(0,0,0,0.04);
|
||||
}
|
||||
body.dark-mode .sidebar {
|
||||
background: #23272e;
|
||||
color: #e0e0e0;
|
||||
box-shadow: 2px 0 8px rgba(0,0,0,0.18);
|
||||
}
|
||||
.sidebar h2 {
|
||||
color: #222e3c;
|
||||
text-align: center;
|
||||
@@ -25,6 +34,13 @@ body {
|
||||
font-size: 1.5em;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
body.dark-mode .sidebar h2,
|
||||
body.dark-mode .sidebar-btn,
|
||||
body.dark-mode .sidebar-btn.active,
|
||||
body.dark-mode .sidebar-btn:hover {
|
||||
color: #e0e0e0;
|
||||
background: #23272e;
|
||||
}
|
||||
.sidebar nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
@@ -45,6 +61,9 @@ body {
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
body.dark-mode .sidebar-btn.active, body.dark-mode .sidebar-btn:hover {
|
||||
background: #2d3138;
|
||||
}
|
||||
.sidebar-btn.active, .sidebar-btn:hover {
|
||||
background: #cccccc;
|
||||
}
|
||||
@@ -61,6 +80,10 @@ body {
|
||||
background: #0077cc;
|
||||
color: #fff;
|
||||
}
|
||||
body.dark-mode .compose-btn {
|
||||
background: #005fa3;
|
||||
color: #fff;
|
||||
}
|
||||
.compose-btn:hover {
|
||||
background: #005fa3;
|
||||
}
|
||||
@@ -70,9 +93,17 @@ body {
|
||||
border: 1px solid #eee;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
body.dark-mode .logout-btn {
|
||||
background: #23272e;
|
||||
color: #e0e0e0;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
.logout-btn:hover {
|
||||
background: #f4f4f4;
|
||||
}
|
||||
body.dark-mode .logout-btn:hover {
|
||||
background: #181a1b;
|
||||
}
|
||||
.main-content {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
@@ -80,6 +111,9 @@ body {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
}
|
||||
body.dark-mode .main-content {
|
||||
background: #111317;
|
||||
}
|
||||
#email-list {
|
||||
width: 340px;
|
||||
border-right: 1px solid #eee;
|
||||
@@ -87,6 +121,9 @@ body {
|
||||
overflow-y: auto;
|
||||
max-height: 70vh;
|
||||
}
|
||||
body.dark-mode #email-list {
|
||||
border-color: #333;
|
||||
}
|
||||
.email-list-section {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
@@ -95,6 +132,9 @@ body {
|
||||
color: #0077cc;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
body.dark-mode .email-list-title {
|
||||
color: #fff;
|
||||
}
|
||||
.email-list-item {
|
||||
padding: 12px 10px;
|
||||
border-radius: 4px;
|
||||
@@ -103,14 +143,25 @@ body {
|
||||
border: 1px solid transparent;
|
||||
transition: background 0.15s, border 0.15s;
|
||||
}
|
||||
body.dark-mode .email-list-item {
|
||||
background: #111317;
|
||||
color: #fff;
|
||||
}
|
||||
.email-list-item.selected, .email-list-item:hover {
|
||||
background: #f0f6fa;
|
||||
border: 1px solid #0077cc;
|
||||
}
|
||||
body.dark-mode .email-list-item.selected, body.dark-mode .email-list-item:hover {
|
||||
background: #2d3138;
|
||||
border-color: #0077cc;
|
||||
}
|
||||
.email-list-item .subject {
|
||||
font-weight: bold;
|
||||
color: #222e3c;
|
||||
}
|
||||
body.dark-mode .email-list-item .subject {
|
||||
color: #fff;
|
||||
}
|
||||
.email-list-item .fromto {
|
||||
font-size: 0.95em;
|
||||
color: #555;
|
||||
@@ -129,6 +180,10 @@ body {
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||
}
|
||||
body.dark-mode .email-detail-content {
|
||||
background: #181a1b;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
.email-detail-header {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
@@ -140,10 +195,16 @@ body {
|
||||
white-space: pre-wrap;
|
||||
color: #222e3c;
|
||||
}
|
||||
body.dark-mode .email-detail-body {
|
||||
color: #fff;
|
||||
}
|
||||
.error {
|
||||
color: #d8000c;
|
||||
text-align: center;
|
||||
}
|
||||
body.dark-mode .error {
|
||||
color: #ffb3b3;
|
||||
}
|
||||
/* Modal overlay for compose */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
@@ -153,6 +214,7 @@ body {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
.modal-content {
|
||||
background: #fff;
|
||||
@@ -165,24 +227,138 @@ body {
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
#composeForm input, #composeForm textarea, #composeForm button {
|
||||
body.dark-mode .modal-content {
|
||||
background: #111317;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
/* Compose panel for bottom right, non-blocking */
|
||||
.compose-panel {
|
||||
position: fixed;
|
||||
right: 32px;
|
||||
bottom: 32px;
|
||||
z-index: 2000;
|
||||
min-width: 340px;
|
||||
max-width: 95vw;
|
||||
max-height: 90vh;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.18);
|
||||
padding: 32px 32px 0 32px;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
body.dark-mode .compose-panel {
|
||||
background: #111317;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
/* Remove all borders and spacing from compose fields, only a line between them */
|
||||
.compose-panel input,
|
||||
.compose-panel textarea {
|
||||
border: none;
|
||||
border-bottom: 2px solid #d0d0d0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
padding: 10px 0 6px 0;
|
||||
font-size: 1em;
|
||||
transition: border-color 0.2s;
|
||||
width: 100%;
|
||||
margin: 8px 0;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.compose-panel input:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.compose-panel input + input,
|
||||
.compose-panel input + textarea,
|
||||
.compose-panel textarea + input,
|
||||
.compose-panel textarea + textarea {
|
||||
margin-top: 0;
|
||||
}
|
||||
.compose-panel input:focus,
|
||||
.compose-panel textarea:focus {
|
||||
border-bottom: 2px solid #0077cc;
|
||||
background: transparent;
|
||||
}
|
||||
body.dark-mode .compose-panel input,
|
||||
body.dark-mode .compose-panel textarea {
|
||||
background: transparent;
|
||||
color: #e0e0e0;
|
||||
border-bottom: 2px solid #444;
|
||||
}
|
||||
body.dark-mode .compose-panel input:focus,
|
||||
body.dark-mode .compose-panel textarea:focus {
|
||||
border-bottom: 2px solid #4da3ff;
|
||||
}
|
||||
.compose-panel input::placeholder,
|
||||
.compose-panel textarea::placeholder {
|
||||
color: #888;
|
||||
opacity: 1;
|
||||
}
|
||||
body.dark-mode .compose-panel input::placeholder,
|
||||
body.dark-mode .compose-panel textarea::placeholder {
|
||||
color: #aaa;
|
||||
}
|
||||
#composeForm input, #composeForm textarea {
|
||||
border: none !important;
|
||||
border-bottom: 2px solid #d0d0d0 !important;
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
margin: 0 !important;
|
||||
padding: 10px 0 6px 0 !important;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body.dark-mode #composeForm input, body.dark-mode #composeForm textarea {
|
||||
border-bottom: 2px solid #444 !important;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
#composeForm input:focus, #composeForm textarea:focus {
|
||||
border-bottom: 2px solid #0077cc !important;
|
||||
}
|
||||
body.dark-mode #composeForm input:focus, body.dark-mode #composeForm textarea:focus {
|
||||
border-bottom: 2px solid #4da3ff !important;
|
||||
}
|
||||
#composeForm input::placeholder, #composeForm textarea::placeholder {
|
||||
color: #888;
|
||||
}
|
||||
body.dark-mode #composeForm input::placeholder, body.dark-mode #composeForm textarea::placeholder {
|
||||
color: #aaa;
|
||||
}
|
||||
#composeForm {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
position: static;
|
||||
}
|
||||
#composeForm button[type="submit"] {
|
||||
align-self: flex-end;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 0;
|
||||
margin-right: 0;
|
||||
position: static;
|
||||
min-width: 100px;
|
||||
min-height: 40px;
|
||||
background: #0077cc;
|
||||
color: #fff;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
#composeForm button[type="submit"]:hover {
|
||||
background: #005fa3;
|
||||
}
|
||||
body.dark-mode #composeForm button[type="submit"] {
|
||||
background: #005fa3;
|
||||
color: #fff;
|
||||
}
|
||||
body.dark-mode #composeForm button[type="submit"]:hover {
|
||||
background: #0077cc;
|
||||
}
|
||||
#composeForm button[type="button"] {
|
||||
background: #eee;
|
||||
color: #222e3c;
|
||||
@@ -192,6 +368,38 @@ body {
|
||||
#composeForm button[type="button"]:hover {
|
||||
background: #ddd;
|
||||
}
|
||||
body.dark-mode input::placeholder, body.dark-mode textarea::placeholder {
|
||||
color: #aaa;
|
||||
}
|
||||
.darkmode-btn {
|
||||
margin: 12px 24px 0 24px;
|
||||
padding: 12px 0;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
background: #eee;
|
||||
color: #222e3c;
|
||||
}
|
||||
body.dark-mode .darkmode-btn {
|
||||
background: #444;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
body.dark-mode .darkmode-btn:hover {
|
||||
background: #222;
|
||||
}
|
||||
.darkmode-btn:hover {
|
||||
background: #ccc;
|
||||
}
|
||||
.sidebar-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
vertical-align: middle;
|
||||
margin-right: 12px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.main-content {
|
||||
flex-direction: column;
|
||||
@@ -209,3 +417,8 @@ body {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.compose-panel textarea,
|
||||
#composeForm textarea {
|
||||
min-height: 120px !important;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user