Spaces:
Running
Running
visualizacao das mensagens com header simples e opção de header completo
Browse files- index.html +286 -66
index.html
CHANGED
|
@@ -137,40 +137,53 @@
|
|
| 137 |
<div class="p-6">
|
| 138 |
<div class="flex items-center justify-between mb-6">
|
| 139 |
<h2 class="text-xl font-bold text-white">Inbox</h2>
|
| 140 |
-
|
| 141 |
-
|
| 142 |
-
|
| 143 |
-
|
| 144 |
-
|
| 145 |
-
|
| 146 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 147 |
</div>
|
| 148 |
</div>
|
| 149 |
-
|
| 150 |
<!-- Email Items -->
|
| 151 |
-
<div class="space-y-3">
|
| 152 |
-
<!-- Email 1 -->
|
| 153 |
-
<div class="email-card bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-4 cursor-pointer transition-all duration-300">
|
| 154 |
-
<div class="
|
| 155 |
-
<div class="flex
|
| 156 |
-
<div class="
|
| 157 |
-
<
|
|
|
|
|
|
|
| 158 |
</div>
|
| 159 |
-
|
| 160 |
-
|
| 161 |
-
|
| 162 |
-
<h3 class="text-white font-medium truncate">John Doe</h3>
|
| 163 |
<div class="flex items-center space-x-3">
|
| 164 |
<span class="text-white text-opacity-70 text-sm">10:30 AM</span>
|
| 165 |
<button class="text-white text-opacity-70 hover:text-opacity-100">
|
| 166 |
-
|
| 167 |
-
|
| 168 |
-
</div>
|
| 169 |
</div>
|
| 170 |
-
<p class="text-white text-opacity-90 font-medium truncate mt-1">Project Update - Q3 Results</p>
|
| 171 |
-
<p class="text-white text-opacity-70 truncate mt-1">Hi there, I wanted to share the latest updates on our project progress and the Q3 results...</p>
|
| 172 |
</div>
|
| 173 |
-
<
|
|
|
|
|
|
|
|
|
|
| 174 |
<button class="text-white text-opacity-70 hover:text-opacity-100">
|
| 175 |
<i data-feather="paperclip" class="w-4 h-4"></i>
|
| 176 |
</button>
|
|
@@ -179,30 +192,70 @@
|
|
| 179 |
</button>
|
| 180 |
</div>
|
| 181 |
</div>
|
| 182 |
-
|
| 183 |
-
|
| 184 |
-
|
| 185 |
-
|
| 186 |
-
|
| 187 |
-
|
| 188 |
-
|
| 189 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 190 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 191 |
</div>
|
| 192 |
-
|
| 193 |
-
|
| 194 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 195 |
<div class="flex items-center space-x-3">
|
| 196 |
<span class="text-white text-opacity-70 text-sm">Yesterday</span>
|
| 197 |
<button class="text-white text-opacity-70 hover:text-opacity-100">
|
| 198 |
-
|
| 199 |
-
|
| 200 |
-
</div>
|
| 201 |
</div>
|
| 202 |
-
<p class="text-white text-opacity-90 font-medium truncate mt-1">Your Order #12345 Has Shipped</p>
|
| 203 |
-
<p class="text-white text-opacity-70 truncate mt-1">Great news! Your order has been shipped and is on its way to you...</p>
|
| 204 |
</div>
|
| 205 |
-
<
|
|
|
|
|
|
|
|
|
|
| 206 |
<button class="text-white text-opacity-70 hover:text-opacity-100">
|
| 207 |
<i data-feather="paperclip" class="w-4 h-4"></i>
|
| 208 |
</button>
|
|
@@ -211,19 +264,59 @@
|
|
| 211 |
</button>
|
| 212 |
</div>
|
| 213 |
</div>
|
| 214 |
-
|
| 215 |
-
|
| 216 |
-
|
| 217 |
-
|
| 218 |
-
|
| 219 |
-
|
| 220 |
-
|
| 221 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 222 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 223 |
</div>
|
| 224 |
-
|
| 225 |
-
|
| 226 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 227 |
<div class="flex items-center space-x-3">
|
| 228 |
<span class="text-white text-opacity-70 text-sm">Oct 12</span>
|
| 229 |
<button class="text-yellow-300">
|
|
@@ -243,19 +336,59 @@
|
|
| 243 |
</button>
|
| 244 |
</div>
|
| 245 |
</div>
|
| 246 |
-
|
| 247 |
-
|
| 248 |
-
|
| 249 |
-
|
| 250 |
-
|
| 251 |
-
|
| 252 |
-
|
| 253 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 254 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 255 |
</div>
|
| 256 |
-
|
| 257 |
-
|
| 258 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 259 |
<div class="flex items-center space-x-3">
|
| 260 |
<span class="text-white text-opacity-70 text-sm">Oct 11</span>
|
| 261 |
<button class="text-white text-opacity-70 hover:text-opacity-100">
|
|
@@ -275,9 +408,49 @@
|
|
| 275 |
</button>
|
| 276 |
</div>
|
| 277 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 278 |
</div>
|
| 279 |
</div>
|
| 280 |
-
|
| 281 |
</main>
|
| 282 |
</div>
|
| 283 |
</div>
|
|
@@ -301,6 +474,53 @@
|
|
| 301 |
backgroundColor: 0x0,
|
| 302 |
size: 1.00
|
| 303 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 304 |
|
| 305 |
// Add hover effects to email cards
|
| 306 |
document.querySelectorAll('.email-card').forEach(card => {
|
|
@@ -312,6 +532,6 @@
|
|
| 312 |
card.style.transform = 'translateY(0)';
|
| 313 |
});
|
| 314 |
});
|
| 315 |
-
|
| 316 |
</body>
|
| 317 |
</html>
|
|
|
|
| 137 |
<div class="p-6">
|
| 138 |
<div class="flex items-center justify-between mb-6">
|
| 139 |
<h2 class="text-xl font-bold text-white">Inbox</h2>
|
| 140 |
+
<div class="flex space-x-2">
|
| 141 |
+
<button class="p-2 rounded-lg bg-white bg-opacity-20 hover:bg-opacity-30 transition">
|
| 142 |
+
<i data-feather="refresh-cw" class="text-white"></i>
|
| 143 |
+
</button>
|
| 144 |
+
<div class="relative">
|
| 145 |
+
<button id="view-toggle" class="p-2 rounded-lg bg-white bg-opacity-20 hover:bg-opacity-30 transition">
|
| 146 |
+
<i data-feather="eye" class="text-white"></i>
|
| 147 |
+
</button>
|
| 148 |
+
<div id="view-options" class="absolute right-0 mt-2 w-48 bg-white bg-opacity-20 backdrop-blur-lg rounded-lg shadow-lg border border-white border-opacity-20 hidden z-10">
|
| 149 |
+
<div class="py-1">
|
| 150 |
+
<button type="button" class="view-option w-full text-left px-4 py-2 text-sm text-white hover:bg-white hover:bg-opacity-10 transition" data-view="simple">
|
| 151 |
+
<i data-feather="eye" class="w-4 h-4 mr-2 inline"></i>
|
| 152 |
+
Header Simples
|
| 153 |
+
</button>
|
| 154 |
+
<button type="button" class="view-option w-full text-left px-4 py-2 text-sm text-white hover:bg-white hover:bg-opacity-10 transition" data-view="full">
|
| 155 |
+
<i data-feather="eye-off" class="w-4 h-4 mr-2 inline"></i>
|
| 156 |
+
Header Completo
|
| 157 |
+
</button>
|
| 158 |
+
</div>
|
| 159 |
</div>
|
| 160 |
</div>
|
| 161 |
+
</div>
|
| 162 |
<!-- Email Items -->
|
| 163 |
+
<div class="space-y-3" id="email-list">
|
| 164 |
+
<!-- Email 1 - Simple View -->
|
| 165 |
+
<div class="email-card bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-4 cursor-pointer transition-all duration-300" data-email-id="1">
|
| 166 |
+
<div class="simple-view">
|
| 167 |
+
<div class="flex items-start">
|
| 168 |
+
<div class="flex-shrink-0 mr-4">
|
| 169 |
+
<div class="avatar-placeholder w-10 h-10 rounded-full flex items-center justify-center">
|
| 170 |
+
<span class="text-white font-medium">JD</span>
|
| 171 |
+
</div>
|
| 172 |
</div>
|
| 173 |
+
<div class="flex-1 min-w-0">
|
| 174 |
+
<div class="flex items-center justify-between">
|
| 175 |
+
<h3 class="text-white font-medium truncate">John Doe</h3>
|
|
|
|
| 176 |
<div class="flex items-center space-x-3">
|
| 177 |
<span class="text-white text-opacity-70 text-sm">10:30 AM</span>
|
| 178 |
<button class="text-white text-opacity-70 hover:text-opacity-100">
|
| 179 |
+
<i data-feather="star" class="w-4 h-4"></i>
|
| 180 |
+
</button>
|
|
|
|
| 181 |
</div>
|
|
|
|
|
|
|
| 182 |
</div>
|
| 183 |
+
<p class="text-white text-opacity-90 font-medium truncate mt-1">Project Update - Q3 Results</p>
|
| 184 |
+
<p class="text-white text-opacity-70 truncate mt-1">Hi there, I wanted to share the latest updates on our project progress and the Q3 results...</p>
|
| 185 |
+
</div>
|
| 186 |
+
<div class="flex-shrink-0 ml-4 flex space-x-2">
|
| 187 |
<button class="text-white text-opacity-70 hover:text-opacity-100">
|
| 188 |
<i data-feather="paperclip" class="w-4 h-4"></i>
|
| 189 |
</button>
|
|
|
|
| 192 |
</button>
|
| 193 |
</div>
|
| 194 |
</div>
|
| 195 |
+
<div class="full-view hidden">
|
| 196 |
+
<div class="border-b border-white border-opacity-20 pb-3 mb-3">
|
| 197 |
+
<div class="flex items-center justify-between">
|
| 198 |
+
<div class="flex items-center space-x-3">
|
| 199 |
+
<div class="flex items-center">
|
| 200 |
+
<div class="avatar-placeholder w-8 h-8 rounded-full flex items-center justify-center mr-2">
|
| 201 |
+
<span class="text-white font-medium text-sm">JD</span>
|
| 202 |
+
</div>
|
| 203 |
+
<h3 class="text-white font-medium">John Doe</h3>
|
| 204 |
+
</div>
|
| 205 |
+
<span class="text-white text-opacity-70 text-sm">10:30 AM</span>
|
| 206 |
+
</div>
|
| 207 |
+
<p class="text-white text-opacity-90 font-medium mt-2">Project Update - Q3 Results</p>
|
| 208 |
</div>
|
| 209 |
+
<div class="space-y-2 text-sm">
|
| 210 |
+
<div class="flex">
|
| 211 |
+
<span class="text-white text-opacity-70 w-20">From:</span>
|
| 212 |
+
<span class="text-white">John Doe <john.doe@company.com></span>
|
| 213 |
+
</div>
|
| 214 |
+
<div class="flex">
|
| 215 |
+
<span class="text-white text-opacity-70 w-20">To:</span>
|
| 216 |
+
<span class="text-white">me@example.com</span>
|
| 217 |
+
</div>
|
| 218 |
+
<div class="flex">
|
| 219 |
+
<span class="text-white text-opacity-70 w-20">Date:</span>
|
| 220 |
+
<span class="text-white">Today, 10:30 AM</span>
|
| 221 |
+
</div>
|
| 222 |
+
<div class="flex">
|
| 223 |
+
<span class="text-white text-opacity-70 w-20">Subject:</span>
|
| 224 |
+
<span class="text-white">Project Update - Q3 Results</span>
|
| 225 |
+
</div>
|
| 226 |
+
</div>
|
| 227 |
+
<p class="text-white text-opacity-70 mt-4">Hi there, I wanted to share the latest updates on our project progress and the Q3 results. We've achieved significant milestones this quarter...</p>
|
| 228 |
+
<div class="flex items-center space-x-4 mt-4 pt-3 border-t border-white border-opacity-20">
|
| 229 |
+
<button class="text-white text-opacity-70 hover:text-opacity-100">
|
| 230 |
+
<i data-feather="paperclip" class="w-4 h-4 mr-1"></i>
|
| 231 |
+
<span class="text-sm">attachments.zip (2.4 MB)</span>
|
| 232 |
+
</button>
|
| 233 |
</div>
|
| 234 |
+
</div>
|
| 235 |
+
</div>
|
| 236 |
+
<!-- Email 2 - Simple View -->
|
| 237 |
+
<div class="email-card bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-4 cursor-pointer transition-all duration-300" data-email-id="2">
|
| 238 |
+
<div class="simple-view">
|
| 239 |
+
<div class="flex items-start">
|
| 240 |
+
<div class="flex-shrink-0 mr-4">
|
| 241 |
+
<div class="avatar-placeholder w-10 h-10 rounded-full flex items-center justify-center">
|
| 242 |
+
<span class="text-white font-medium">AC</span>
|
| 243 |
+
</div>
|
| 244 |
+
</div>
|
| 245 |
+
<div class="flex-1 min-w-0">
|
| 246 |
+
<div class="flex items-center justify-between">
|
| 247 |
+
<h3 class="text-white font-medium truncate">Amazon Customer</h3>
|
| 248 |
<div class="flex items-center space-x-3">
|
| 249 |
<span class="text-white text-opacity-70 text-sm">Yesterday</span>
|
| 250 |
<button class="text-white text-opacity-70 hover:text-opacity-100">
|
| 251 |
+
<i data-feather="star" class="w-4 h-4"></i>
|
| 252 |
+
</button>
|
|
|
|
| 253 |
</div>
|
|
|
|
|
|
|
| 254 |
</div>
|
| 255 |
+
<p class="text-white text-opacity-90 font-medium truncate mt-1">Your Order #12345 Has Shipped</p>
|
| 256 |
+
<p class="text-white text-opacity-70 truncate mt-1">Great news! Your order has been shipped and is on its way to you...</p>
|
| 257 |
+
</div>
|
| 258 |
+
<div class="flex-shrink-0 ml-4 flex space-x-2">
|
| 259 |
<button class="text-white text-opacity-70 hover:text-opacity-100">
|
| 260 |
<i data-feather="paperclip" class="w-4 h-4"></i>
|
| 261 |
</button>
|
|
|
|
| 264 |
</button>
|
| 265 |
</div>
|
| 266 |
</div>
|
| 267 |
+
<div class="full-view hidden">
|
| 268 |
+
<div class="border-b border-white border-opacity-20 pb-3 mb-3">
|
| 269 |
+
<div class="flex items-center justify-between">
|
| 270 |
+
<div class="flex items-center space-x-3">
|
| 271 |
+
<div class="flex items-center">
|
| 272 |
+
<div class="avatar-placeholder w-8 h-8 rounded-full flex items-center justify-center mr-2">
|
| 273 |
+
<span class="text-white font-medium text-sm">AC</span>
|
| 274 |
+
</div>
|
| 275 |
+
<h3 class="text-white font-medium">Amazon Customer</h3>
|
| 276 |
+
</div>
|
| 277 |
+
<span class="text-white text-opacity-70 text-sm">Yesterday</span>
|
| 278 |
+
</div>
|
| 279 |
+
<p class="text-white text-opacity-90 font-medium mt-2">Your Order #12345 Has Shipped</p>
|
| 280 |
</div>
|
| 281 |
+
<div class="space-y-2 text-sm">
|
| 282 |
+
<div class="flex">
|
| 283 |
+
<span class="text-white text-opacity-70 w-20">From:</span>
|
| 284 |
+
<span class="text-white">orders@amazon.com</span>
|
| 285 |
+
</div>
|
| 286 |
+
<div class="flex">
|
| 287 |
+
<span class="text-white text-opacity-70 w-20">To:</span>
|
| 288 |
+
<span class="text-white">me@example.com</span>
|
| 289 |
+
</div>
|
| 290 |
+
<div class="flex">
|
| 291 |
+
<span class="text-white text-opacity-70 w-20">Date:</span>
|
| 292 |
+
<span class="text-white">Yesterday, 3:45 PM</span>
|
| 293 |
+
</div>
|
| 294 |
+
<div class="flex">
|
| 295 |
+
<span class="text-white text-opacity-70 w-20">Subject:</span>
|
| 296 |
+
<span class="text-white">Your Order #12345 Has Shipped</span>
|
| 297 |
+
</div>
|
| 298 |
+
</div>
|
| 299 |
+
<p class="text-white text-opacity-70 mt-4">Great news! Your order has been shipped and is on its way to you. You can track your package using the following link...</p>
|
| 300 |
+
<div class="flex items-center space-x-4 mt-4 pt-3 border-t border-white border-opacity-20">
|
| 301 |
+
<button class="text-white text-opacity-70 hover:text-opacity-100">
|
| 302 |
+
<i data-feather="paperclip" class="w-4 h-4 mr-1"></i>
|
| 303 |
+
<span class="text-sm">tracking_info.pdf (156 KB)</span>
|
| 304 |
+
</button>
|
| 305 |
</div>
|
| 306 |
+
</div>
|
| 307 |
+
</div>
|
| 308 |
+
<!-- Email 3 - Simple View -->
|
| 309 |
+
<div class="email-card bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-4 cursor-pointer transition-all duration-300" data-email-id="3">
|
| 310 |
+
<div class="simple-view">
|
| 311 |
+
<div class="flex items-start">
|
| 312 |
+
<div class="flex-shrink-0 mr-4">
|
| 313 |
+
<div class="avatar-placeholder w-10 h-10 rounded-full flex items-center justify-center">
|
| 314 |
+
<span class="text-white font-medium">TW</span>
|
| 315 |
+
</div>
|
| 316 |
+
</div>
|
| 317 |
+
<div class="flex-1 min-w-0">
|
| 318 |
+
<div class="flex items-center justify-between">
|
| 319 |
+
<h3 class="text-white font-medium truncate">Team Workshop</h3>
|
| 320 |
<div class="flex items-center space-x-3">
|
| 321 |
<span class="text-white text-opacity-70 text-sm">Oct 12</span>
|
| 322 |
<button class="text-yellow-300">
|
|
|
|
| 336 |
</button>
|
| 337 |
</div>
|
| 338 |
</div>
|
| 339 |
+
<div class="full-view hidden">
|
| 340 |
+
<div class="border-b border-white border-opacity-20 pb-3 mb-3">
|
| 341 |
+
<div class="flex items-center justify-between">
|
| 342 |
+
<div class="flex items-center space-x-3">
|
| 343 |
+
<div class="flex items-center">
|
| 344 |
+
<div class="avatar-placeholder w-8 h-8 rounded-full flex items-center justify-center mr-2">
|
| 345 |
+
<span class="text-white font-medium text-sm">TW</span>
|
| 346 |
+
</div>
|
| 347 |
+
<h3 class="text-white font-medium">Team Workshop</h3>
|
| 348 |
+
</div>
|
| 349 |
+
<span class="text-white text-opacity-70 text-sm">Oct 12</span>
|
| 350 |
+
</div>
|
| 351 |
+
<p class="text-white text-opacity-90 font-medium mt-2">Reminder: Design Workshop Tomorrow</p>
|
| 352 |
+
</div>
|
| 353 |
+
<div class="space-y-2 text-sm">
|
| 354 |
+
<div class="flex">
|
| 355 |
+
<span class="text-white text-opacity-70 w-20">From:</span>
|
| 356 |
+
<span class="text-white">workshop@company.com</span>
|
| 357 |
+
</div>
|
| 358 |
+
<div class="flex">
|
| 359 |
+
<span class="text-white text-opacity-70 w-20">To:</span>
|
| 360 |
+
<span class="text-white">All Employees <employees@company.com></span>
|
| 361 |
+
</div>
|
| 362 |
+
<div class="flex">
|
| 363 |
+
<span class="text-white text-opacity-70 w-20">Date:</span>
|
| 364 |
+
<span class="text-white">October 12, 2024</span>
|
| 365 |
+
</div>
|
| 366 |
+
<div class="flex">
|
| 367 |
+
<span class="text-white text-opacity-70 w-20">Subject:</span>
|
| 368 |
+
<span class="text-white">Reminder: Design Workshop Tomorrow</span>
|
| 369 |
+
</div>
|
| 370 |
</div>
|
| 371 |
+
<p class="text-white text-opacity-70 mt-4">This is a reminder that our quarterly design workshop will be held tomorrow at 2 PM in the main conference room. Please bring your laptops and any relevant materials...</p>
|
| 372 |
+
<div class="flex items-center space-x-4 mt-4 pt-3 border-t border-white border-opacity-20">
|
| 373 |
+
<button class="text-white text-opacity-70 hover:text-opacity-100">
|
| 374 |
+
<i data-feather="paperclip" class="w-4 h-4 mr-1"></i>
|
| 375 |
+
<span class="text-sm">agenda.pdf (89 KB)</span>
|
| 376 |
+
</button>
|
| 377 |
</div>
|
| 378 |
+
</div>
|
| 379 |
+
</div>
|
| 380 |
+
<!-- Email 4 - Simple View -->
|
| 381 |
+
<div class="email-card bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-4 cursor-pointer transition-all duration-300" data-email-id="4">
|
| 382 |
+
<div class="simple-view">
|
| 383 |
+
<div class="flex items-start">
|
| 384 |
+
<div class="flex-shrink-0 mr-4">
|
| 385 |
+
<div class="avatar-placeholder w-10 h-10 rounded-full flex items-center justify-center">
|
| 386 |
+
<span class="text-white font-medium">SP</span>
|
| 387 |
+
</div>
|
| 388 |
+
</div>
|
| 389 |
+
<div class="flex-1 min-w-0">
|
| 390 |
+
<div class="flex items-center justify-between">
|
| 391 |
+
<h3 class="text-white font-medium truncate">Sarah Parker</h3>
|
| 392 |
<div class="flex items-center space-x-3">
|
| 393 |
<span class="text-white text-opacity-70 text-sm">Oct 11</span>
|
| 394 |
<button class="text-white text-opacity-70 hover:text-opacity-100">
|
|
|
|
| 408 |
</button>
|
| 409 |
</div>
|
| 410 |
</div>
|
| 411 |
+
<div class="full-view hidden">
|
| 412 |
+
<div class="border-b border-white border-opacity-20 pb-3 mb-3">
|
| 413 |
+
<div class="flex items-center justify-between">
|
| 414 |
+
<div class="flex items-center space-x-3">
|
| 415 |
+
<div class="flex items-center">
|
| 416 |
+
<div class="avatar-placeholder w-8 h-8 rounded-full flex items-center justify-center mr-2">
|
| 417 |
+
<span class="text-white font-medium text-sm">SP</span>
|
| 418 |
+
</div>
|
| 419 |
+
<h3 class="text-white font-medium">Sarah Parker</h3>
|
| 420 |
+
</div>
|
| 421 |
+
<span class="text-white text-opacity-70 text-sm">Oct 11</span>
|
| 422 |
+
</div>
|
| 423 |
+
<p class="text-white text-opacity-90 font-medium mt-2">Meeting Notes - Product Launch</p>
|
| 424 |
+
</div>
|
| 425 |
+
<div class="space-y-2 text-sm">
|
| 426 |
+
<div class="flex">
|
| 427 |
+
<span class="text-white text-opacity-70 w-20">From:</span>
|
| 428 |
+
<span class="text-white">sarah.parker@company.com</span>
|
| 429 |
+
</div>
|
| 430 |
+
<div class="flex">
|
| 431 |
+
<span class="text-white text-opacity-70 w-20">To:</span>
|
| 432 |
+
<span class="text-white">Product Team <product@company.com></span>
|
| 433 |
+
</div>
|
| 434 |
+
<div class="flex">
|
| 435 |
+
<span class="text-white text-opacity-70 w-20">Date:</span>
|
| 436 |
+
<span class="text-white">October 11, 2024</span>
|
| 437 |
+
</div>
|
| 438 |
+
<div class="flex">
|
| 439 |
+
<span class="text-white text-opacity-70 w-20">Subject:</span>
|
| 440 |
+
<span class="text-white">Meeting Notes - Product Launch</span>
|
| 441 |
+
</div>
|
| 442 |
+
</div>
|
| 443 |
+
<p class="text-white text-opacity-70 mt-4">Here are the notes from yesterday's meeting regarding the upcoming product launch. Key decisions were made regarding the timeline and feature prioritization...</p>
|
| 444 |
+
<div class="flex items-center space-x-4 mt-4 pt-3 border-t border-white border-opacity-20">
|
| 445 |
+
<button class="text-white text-opacity-70 hover:text-opacity-100">
|
| 446 |
+
<i data-feather="paperclip" class="w-4 h-4 mr-1"></i>
|
| 447 |
+
<span class="text-sm">meeting_notes.pdf (234 KB)</span>
|
| 448 |
+
</button>
|
| 449 |
+
</div>
|
| 450 |
+
</div>
|
| 451 |
</div>
|
| 452 |
</div>
|
| 453 |
+
</div>
|
| 454 |
</main>
|
| 455 |
</div>
|
| 456 |
</div>
|
|
|
|
| 474 |
backgroundColor: 0x0,
|
| 475 |
size: 1.00
|
| 476 |
});
|
| 477 |
+
// View toggle functionality
|
| 478 |
+
const viewToggle = document.getElementById('view-toggle');
|
| 479 |
+
const viewOptions = document.getElementById('view-options');
|
| 480 |
+
const emailCards = document.querySelectorAll('.email-card');
|
| 481 |
+
|
| 482 |
+
viewToggle.addEventListener('click', () => {
|
| 483 |
+
viewOptions.classList.toggle('hidden');
|
| 484 |
+
});
|
| 485 |
+
|
| 486 |
+
// Close view options when clicking outside
|
| 487 |
+
document.addEventListener('click', (e) => {
|
| 488 |
+
if (!viewToggle.contains(e.target) && !viewOptions.contains(e.target)) {
|
| 489 |
+
viewOptions.classList.add('hidden');
|
| 490 |
+
}
|
| 491 |
+
});
|
| 492 |
+
|
| 493 |
+
// View option selection
|
| 494 |
+
document.querySelectorAll('.view-option').forEach(option => {
|
| 495 |
+
option.addEventListener('click', () => {
|
| 496 |
+
const viewType = option.getAttribute('data-view');
|
| 497 |
+
|
| 498 |
+
// Update all email cards to show selected view
|
| 499 |
+
emailCards.forEach(card => {
|
| 500 |
+
const simpleView = card.querySelector('.simple-view');
|
| 501 |
+
const fullView = card.querySelector('.full-view');
|
| 502 |
+
|
| 503 |
+
if (viewType === 'simple') {
|
| 504 |
+
simpleView.classList.remove('hidden');
|
| 505 |
+
fullView.classList.add('hidden');
|
| 506 |
+
} else {
|
| 507 |
+
simpleView.classList.add('hidden');
|
| 508 |
+
fullView.classList.remove('hidden');
|
| 509 |
+
}
|
| 510 |
+
|
| 511 |
+
// Update button icon based on selected view
|
| 512 |
+
const icon = viewToggle.querySelector('i');
|
| 513 |
+
if (viewType === 'simple') {
|
| 514 |
+
icon.setAttribute('data-feather', 'eye');
|
| 515 |
+
} else {
|
| 516 |
+
icon.setAttribute('data-feather', 'eye-off');
|
| 517 |
+
}
|
| 518 |
+
feather.replace();
|
| 519 |
+
|
| 520 |
+
// Close the options menu
|
| 521 |
+
viewOptions.classList.add('hidden');
|
| 522 |
+
});
|
| 523 |
+
});
|
| 524 |
|
| 525 |
// Add hover effects to email cards
|
| 526 |
document.querySelectorAll('.email-card').forEach(card => {
|
|
|
|
| 532 |
card.style.transform = 'translateY(0)';
|
| 533 |
});
|
| 534 |
});
|
| 535 |
+
</script>
|
| 536 |
</body>
|
| 537 |
</html>
|