modify
This commit is contained in:
101
009/001.html
101
009/001.html
File diff suppressed because one or more lines are too long
101
009/002.html
101
009/002.html
File diff suppressed because one or more lines are too long
101
009/003.html
101
009/003.html
File diff suppressed because one or more lines are too long
97
009/004.html
97
009/004.html
File diff suppressed because one or more lines are too long
114
009/005.html
114
009/005.html
File diff suppressed because one or more lines are too long
97
009/006.html
97
009/006.html
File diff suppressed because one or more lines are too long
152
009/all.html
152
009/all.html
@@ -261,25 +261,28 @@
|
||||
.tag-finance { background: #e8f5e9; color: #2e7d32; }
|
||||
.tag-urgent { background: #ffebee; color: #c62828; }
|
||||
|
||||
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="app-container">
|
||||
<!-- Header -->
|
||||
<header class="app-header">
|
||||
<header class="app-header" role="banner">
|
||||
<div class="logo-area">
|
||||
<span class="logo-icon">📧</span> GlobalMail (MyGlobalMail)
|
||||
<span class="logo-icon" aria-hidden="true">📧</span> GlobalMail (MyGlobalMail)
|
||||
</div>
|
||||
<div class="search-bar">
|
||||
<span>🔍</span>
|
||||
<input type="text" id="searchInput" placeholder="Search mail..." onkeyup="filterEmails()">
|
||||
<div class="search-bar" role="search">
|
||||
<span aria-hidden="true">🔍</span>
|
||||
<label for="searchInput" style="display:none;">Search mail</label>
|
||||
<input type="text" id="searchInput" placeholder="Search mail..." onkeyup="filterEmails()" aria-label="Search mail">
|
||||
</div>
|
||||
<div class="user-actions">
|
||||
<div class="theme-toggle" onclick="toggleTheme()" title="Toggle Dark/Light Mode">🌓</div>
|
||||
<div title="Notifications">🔔</div>
|
||||
<div title="Settings">⚙️</div>
|
||||
<div class="user-avatar">JD</div>
|
||||
<button class="theme-toggle" onclick="toggleTheme()" title="Toggle Dark/Light Mode" aria-label="Toggle dark/light mode">🌓</button>
|
||||
<button title="Notifications" aria-label="Notifications">🔔</button>
|
||||
<button title="Settings" aria-label="Settings">⚙️</button>
|
||||
<div class="user-avatar" aria-label="User avatar">JD</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -287,77 +290,81 @@
|
||||
<div class="main-layout">
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<aside class="sidebar" role="navigation" aria-label="Folder navigation">
|
||||
<div class="compose-btn-wrapper">
|
||||
<button class="btn-compose" onclick="openCompose()">+ New Mail</button>
|
||||
<button class="btn-compose" onclick="openCompose()" aria-label="Compose new mail">+ New Mail</button>
|
||||
</div>
|
||||
|
||||
<ul id="nav-folder-list">
|
||||
<li class="nav-item active" onclick="selectFolder('inbox')">
|
||||
<div style="display:flex; align-items:center;">
|
||||
<span class="nav-icon">📥</span> Inbox
|
||||
</div>
|
||||
<span class="unread-badge" id="badge-inbox">3</span>
|
||||
</li>
|
||||
<li class="nav-item" onclick="selectFolder('sent')">
|
||||
<div style="display:flex; align-items:center;">
|
||||
<span class="nav-icon">📤</span> Sent
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item" onclick="selectFolder('drafts')">
|
||||
<div style="display:flex; align-items:center;">
|
||||
<span class="nav-icon">📝</span> Drafts
|
||||
</div>
|
||||
<span class="unread-badge">1</span>
|
||||
</li>
|
||||
<li class="nav-item" onclick="selectFolder('junk')">
|
||||
<div style="display:flex; align-items:center;">
|
||||
<span class="nav-icon">🚫</span> Junk
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item" onclick="selectFolder('trash')">
|
||||
<div style="display:flex; align-items:center;">
|
||||
<span class="nav-icon">🗑️</span> Trash
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<nav>
|
||||
<ul id="nav-folder-list" role="list">
|
||||
<li class="nav-item active" onclick="selectFolder('inbox')" role="menuitem" aria-current="page">
|
||||
<div style="display:flex; align-items:center;">
|
||||
<span class="nav-icon" aria-hidden="true">📥</span> Inbox
|
||||
</div>
|
||||
<span class="unread-badge" id="badge-inbox" aria-label="Unread messages count">3</span>
|
||||
</li>
|
||||
<li class="nav-item" onclick="selectFolder('sent')" role="menuitem">
|
||||
<div style="display:flex; align-items:center;">
|
||||
<span class="nav-icon" aria-hidden="true">📤</span> Sent
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item" onclick="selectFolder('drafts')" role="menuitem">
|
||||
<div style="display:flex; align-items:center;">
|
||||
<span class="nav-icon" aria-hidden="true">📝</span> Drafts
|
||||
</div>
|
||||
<span class="unread-badge" aria-label="Draft messages count">1</span>
|
||||
</li>
|
||||
<li class="nav-item" onclick="selectFolder('junk')" role="menuitem">
|
||||
<div style="display:flex; align-items:center;">
|
||||
<span class="nav-icon" aria-hidden="true">🚫</span> Junk
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item" onclick="selectFolder('trash')" role="menuitem">
|
||||
<div style="display:flex; align-items:center;">
|
||||
<span class="nav-icon" aria-hidden="true">🗑️</span> Trash
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-section-title">Tags</div>
|
||||
<ul>
|
||||
<li class="nav-item">
|
||||
<span style="width:10px; height:10px; border-radius:50%; background:#1565c0; margin-right:12px;"></span> Work
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<span style="width:10px; height:10px; border-radius:50%; background:#2e7d32; margin-right:12px;"></span> Finance
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<span style="width:10px; height:10px; border-radius:50%; background:#c62828; margin-right:12px;"></span> Urgent
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<span style="width:10px; height:10px; border-radius:50%; background:#f9ab00; margin-right:12px;"></span> Travel
|
||||
</li>
|
||||
</ul>
|
||||
<nav>
|
||||
<ul role="list">
|
||||
<li class="nav-item" role="menuitem">
|
||||
<span style="width:10px; height:10px; border-radius:50%; background:#1565c0; margin-right:12px;" aria-hidden="true"></span> Work
|
||||
</li>
|
||||
<li class="nav-item" role="menuitem">
|
||||
<span style="width:10px; height:10px; border-radius:50%; background:#2e7d32; margin-right:12px;" aria-hidden="true"></span> Finance
|
||||
</li>
|
||||
<li class="nav-item" role="menuitem">
|
||||
<span style="width:10px; height:10px; border-radius:50%; background:#c62828; margin-right:12px;" aria-hidden="true"></span> Urgent
|
||||
</li>
|
||||
<li class="nav-item" role="menuitem">
|
||||
<span style="width:10px; height:10px; border-radius:50%; background:#f9ab00; margin-right:12px;" aria-hidden="true"></span> Travel
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- Mail List Column -->
|
||||
<main class="mail-list-panel">
|
||||
<div class="toolbar">
|
||||
<div class="tool-icon" title="Select All"><input type="checkbox" style="margin:0;" id="select-all-checkbox" onclick="toggleSelectAll()"></div>
|
||||
<div class="tool-icon" title="Refresh" onclick="refreshMail()">🔄</div>
|
||||
<div class="tool-icon" title="Mark as Read" onclick="markSelectedAsRead()">✉️</div>
|
||||
<div class="tool-icon" title="Delete" onclick="deleteSelected()">🗑️</div>
|
||||
<main class="mail-list-panel" role="main" aria-label="Mail list">
|
||||
<div class="toolbar" role="toolbar" aria-label="Mail actions">
|
||||
<div class="tool-icon" title="Select All" role="button" tabindex="0"><label><input type="checkbox" style="margin:0;" id="select-all-checkbox" onclick="toggleSelectAll()" aria-label="Select all emails in current folder"></label></div>
|
||||
<button class="tool-icon" title="Refresh" onclick="refreshMail()" aria-label="Refresh mail list">🔄</button>
|
||||
<button class="tool-icon" title="Mark as Read" onclick="markSelectedAsRead()" aria-label="Mark selected emails as read">✉️</button>
|
||||
<button class="tool-icon" title="Delete" onclick="deleteSelected()" aria-label="Delete selected emails">🗑️</button>
|
||||
<div style="flex:1"></div>
|
||||
<div style="font-size:12px; color:var(--text-secondary);">Sort: <b>Date</b></div>
|
||||
</div>
|
||||
<div class="mail-items-container" id="mail-list-container">
|
||||
<div class="mail-items-container" id="mail-list-container" role="region" aria-label="Email messages">
|
||||
<!-- Emails will be injected here by JS -->
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Reading Pane Column -->
|
||||
<section class="reading-pane" id="reading-pane">
|
||||
<section class="reading-pane" id="reading-pane" role="region" aria-label="Email reading pane">
|
||||
<div class="reading-empty-state">
|
||||
<div class="empty-icon">📧</div>
|
||||
<div class="empty-icon" aria-hidden="true">📧</div>
|
||||
<h3>Select an email to read</h3>
|
||||
<p>Click on an email from the list to view details.</p>
|
||||
</div>
|
||||
@@ -367,25 +374,28 @@
|
||||
</div>
|
||||
|
||||
<!-- Compose Modal -->
|
||||
<div class="modal-overlay" id="compose-modal">
|
||||
<div class="modal-header">
|
||||
<div class="modal-overlay" id="compose-modal" role="dialog" aria-modal="true" aria-labelledby="compose-title">
|
||||
<div class="modal-header" id="compose-title">
|
||||
<span>New Message</span>
|
||||
<span style="cursor:pointer;" onclick="closeCompose()">✕</span>
|
||||
<button style="cursor:pointer; background:none; border:none; font-size:1.5rem;" onclick="closeCompose()" aria-label="Close compose">✕</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="To" id="compose-to">
|
||||
<label for="compose-to" style="display:block; margin-bottom:5px; font-weight:bold;">To:</label>
|
||||
<input type="text" id="compose-to" placeholder="To" aria-label="Recipient email">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="Subject" id="compose-subject">
|
||||
<label for="compose-subject" style="display:block; margin-bottom:5px; font-weight:bold;">Subject:</label>
|
||||
<input type="text" id="compose-subject" placeholder="Subject" aria-label="Email subject">
|
||||
</div>
|
||||
<div class="input-group" style="flex:1;">
|
||||
<textarea style="height:100%;" placeholder="Type your message..." id="compose-body"></textarea>
|
||||
<label for="compose-body" style="display:block; margin-bottom:5px; font-weight:bold;">Message:</label>
|
||||
<textarea style="height:100%;" id="compose-body" placeholder="Type your message..." aria-label="Email body"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn-compose" style="width:100px;" onclick="sendEmail()">Send</button>
|
||||
<button style="color:var(--text-secondary);" onclick="closeCompose()">Discard</button>
|
||||
<button class="btn-compose" style="width:100px;" onclick="sendEmail()" aria-label="Send email">Send</button>
|
||||
<button style="color:var(--text-secondary); background:none; border:none; cursor:pointer;" onclick="closeCompose()" aria-label="Discard email">Discard</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user