Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Your Inbox | WhisperLink</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| </head> | |
| <body class="bg-gradient-to-br from-indigo-900 to-purple-800 min-h-screen"> | |
| <custom-navbar></custom-navbar> | |
| <main class="py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-4xl mx-auto bg-white/10 backdrop-blur-md rounded-xl shadow-2xl overflow-hidden fade-in"> | |
| <div class="p-6 border-b border-white/10"> | |
| <h2 class="text-2xl font-bold text-white flex items-center gap-2"> | |
| <i data-feather="inbox"></i> | |
| Your Messages | |
| </h2> | |
| </div> | |
| <div class="divide-y divide-white/10"> | |
| <!-- Sample message item --> | |
| <div class="p-6 hover:bg-white/5 transition-colors duration-200"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h3 class="font-medium text-white">From: Anonymous</h3> | |
| <p class="text-indigo-100 mt-1">Link: whisperlink.me/yourlink</p> | |
| </div> | |
| <span class="text-sm text-indigo-200">2 hours ago</span> | |
| </div> | |
| <div class="mt-3"> | |
| <p class="text-white">Hey! Just wanted to say your project is really cool. Keep up the great work!</p> | |
| </div> | |
| <div class="mt-4 flex gap-2"> | |
| <button class="text-xs bg-indigo-500 hover:bg-indigo-600 text-white px-3 py-1 rounded-full transition"> | |
| <i data-feather="corner-up-left" class="w-3 h-3 inline mr-1"></i> Reply | |
| </button> | |
| <button class="text-xs bg-transparent border border-white/30 hover:bg-white/10 text-white px-3 py-1 rounded-full transition"> | |
| <i data-feather="eye" class="w-3 h-3 inline mr-1"></i> Request ID | |
| </button> | |
| <button class="text-xs bg-transparent border border-white/30 hover:bg-white/10 text-white px-3 py-1 rounded-full transition"> | |
| <i data-feather="flag" class="w-3 h-3 inline mr-1"></i> Report | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Second message item --> | |
| <div class="p-6 hover:bg-white/5 transition-colors duration-200"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h3 class="font-medium text-white">From: Anonymous</h3> | |
| <p class="text-indigo-100 mt-1">Link: whisperlink.me/work</p> | |
| </div> | |
| <span class="text-sm text-indigo-200">1 day ago</span> | |
| </div> | |
| <div class="mt-3"> | |
| <p class="text-white">When will the new feature be ready? We're really excited about it!</p> | |
| </div> | |
| <div class="mt-4 flex gap-2"> | |
| <button class="text-xs bg-indigo-500 hover:bg-indigo-600 text-white px-3 py-1 rounded-full transition"> | |
| <i data-feather="corner-up-left" class="w-3 h-3 inline mr-1"></i> Reply | |
| </button> | |
| <button class="text-xs bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded-full transition"> | |
| <i data-feather="user-check" class="w-3 h-3 inline mr-1"></i> Identity Revealed | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Empty state --> | |
| <!-- <div class="p-12 text-center text-indigo-200"> | |
| <i data-feather="inbox" class="w-12 h-12 mx-auto mb-4"></i> | |
| <h3 class="text-xl font-medium mb-2">No messages yet</h3> | |
| <p>Share your WhisperLink to start receiving anonymous messages</p> | |
| </div> --> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |