File size: 5,662 Bytes
90c6b42 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gmail - Inbox</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<style>
body { font-family: 'Roboto', sans-serif; margin: 0; background: #f6f8fc; color: #202124; }
.header { height: 60px; background: #fff; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid #e0e0e0; position: sticky; top: 0; }
.logo { color: #ea4335; font-size: 22px; font-weight: 500; display: flex; align-items: center; }
.logo-img { width: 30px; margin-right: 8px; }
.sidebar { width: 240px; float: left; padding: 16px 8px; background: #f6f8fc; height: calc(100vh - 60px); }
.compose { background: #c2e7ff; color: #001d35; padding: 18px 24px; border-radius: 16px; font-weight: 500; display: inline-flex; align-items: center; margin-bottom: 16px; cursor: pointer; }
.nav-item { padding: 4px 12px; margin: 4px 0; border-radius: 0 16px 16px 0; display: flex; justify-content: space-between; cursor: pointer; }
.nav-item.active { background: #d3e3fd; font-weight: 500; }
.main { margin-left: 240px; background: #fff; margin-top: 8px; border-radius: 16px 0 0 0; min-height: calc(100vh - 68px); box-shadow: 0 1px 2px 0 rgba(60,64,67,0.30), 0 1px 3px 1px rgba(60,64,67,0.15); }
.toolbar { height: 48px; border-bottom: 1px solid #f1f3f4; display: flex; align-items: center; padding: 0 16px; }
.email-list { list-style: none; padding: 0; margin: 0; }
.email-row { border-bottom: 1px solid #f1f3f4; padding: 0 16px; height: 40px; display: flex; align-items: center; cursor: pointer; transition: box-shadow 0.1s; }
.email-row:hover { box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); z-index: 1; }
.email-row.unread { background: #fff; font-weight: 700; }
.sender { width: 200px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subject { flex: 1; font-size: 14px; color: #5f6368; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subject span { color: #202124; font-weight: 400; }
.unread .subject span { font-weight: 700; }
.date { width: 80px; text-align: right; font-size: 12px; color: #5f6368; }
/* Modal for viewing email */
#emailView { display: none; padding: 24px; }
.email-header { margin-bottom: 16px; border-bottom: 1px solid #eee; padding-bottom: 16px; }
.email-title { font-size: 22px; margin-bottom: 8px; }
.email-body { line-height: 1.6; color: #333; }
</style>
</head>
<body>
<div class="header">
<div class="logo"><img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Gmail_icon_%282020%29.svg" class="logo-img"> Gmail</div>
</div>
<div class="sidebar">
<div class="compose">Compose</div>
<div class="nav-item active"><span>Inbox</span><span>1</span></div>
<div class="nav-item">Starred</div>
<div class="nav-item">Snoozed</div>
<div class="nav-item">Sent</div>
<div class="nav-item">Drafts</div>
</div>
<div class="main">
<div class="toolbar">
<input type="checkbox"> ▾ [Refresh] [More]
</div>
<div id="emailList">
<ul class="email-list">
<li class="email-row unread" id="leadEmailRow" onclick="showEmail()">
<div class="sender">Sarah Jenkins</div>
<div class="subject"><span>New Lead Inquiry: Project X - Budget $50,000</span> - Hi Team, I'm interested in your services...</div>
<div class="date">2:14 PM</div>
</li>
<li class="email-row">
<div class="sender">Google Workspace</div>
<div class="subject"><span>Your weekly summary</span> - Here is what happened in your workspace...</div>
<div class="date">Mar 7</div>
</li>
</ul>
</div>
<div id="emailView">
<div class="email-header">
<button onclick="showList()">← Back</button>
<h1 class="email-title">New Lead Inquiry: Project X - Budget $50,000</h1>
<div style="font-size: 14px;"><strong>Sarah Jenkins</strong> <sarah.j@projectx.com></div>
</div>
<div class="email-body">
Hi ATOM Team,<br><br>
I am the founder of <strong>Project X</strong>. We are looking for an
AI-powered solution to triage our B2B leads. <br><br>
Our budget is around <strong>$50,000</strong> for the initial setup. <br>
This is quite <strong>urgent</strong> for us. <br><br>
Looking forward to hearing from you.<br><br>
Best,<br>
Sarah Jenkins
</div>
</div>
</div>
<script>
function showEmail() {
document.getElementById('emailList').style.display = 'none';
document.getElementById('emailView').style.display = 'block';
}
function showList() {
document.getElementById('emailList').style.display = 'block';
document.getElementById('emailView').style.display = 'none';
}
</script>
</body>
</html>
|