Roman0903/whispchat-ghostly-messaging
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>WhispChat 👻</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.fog.min.js"></script>11 <style>12 @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&family=Syne+Mono&display=swap');13 body {14 font-family: 'Quicksand', sans-serif;15 overflow: hidden;16 }17 .message-bubble {18 animation: floatUp 0.5s ease-out;19 }20 @keyframes floatUp {21 from { transform: translateY(20px); opacity: 0; }22 to { transform: translateY(0); opacity: 1; }23 }24 .ghost-typing {25 position: relative;26 }27 .ghost-typing::after {28 content: '👻';29 position: absolute;30 right: -25px;31 animation: ghostFloat 2s infinite ease-in-out;32 }33 @keyframes ghostFloat {34 0%, 100% { transform: translateY(0); }35 50% { transform: translateY(-10px); }36 }37 .glow-input {38 box-shadow: 0 0 15px rgba(159, 122, 234, 0.5);39 }40 .glow-input:focus {41 box-shadow: 0 0 20px rgba(159, 122, 234, 0.8);42 }43 </style>44</head>45<body class="bg-gray-900 text-purple-100 min-h-screen">46 <div id="vanta-bg" class="fixed inset-0 -z-10"></div>47 48 <div class="container mx-auto px-4 py-8 flex flex-col h-screen max-w-4xl">49 <!-- Header -->50 <header class="flex items-center justify-between mb-6">51 <div class="flex items-center">52 <h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600">53 WhispChat 👻54 </h1>55 <span class="ml-2 text-xs bg-purple-900 text-purple-200 px-2 py-1 rounded-full">beta</span>56 </div>57 <div class="flex space-x-4">58 <button class="p-2 rounded-full hover:bg-purple-800 transition-all">59 <i data-feather="settings"></i>60 </button>61 <button class="p-2 rounded-full hover:bg-purple-800 transition-all">62 <i data-feather="moon"></i>63 </button>64 </div>65 </header>66 67 <!-- Main Chat Area -->68 <div class="flex-1 overflow-y-auto mb-4 space-y-4 pr-2 custom-scrollbar">69 <!-- Sample Messages -->70 <div class="flex flex-col space-y-2">71 <!-- Received Message -->72 <div class="flex items-start">73 <div class="bg-purple-800 rounded-full p-2 mr-3">74 <i data-feather="user" class="w-5 h-5"></i>75 </div>76 <div class="message-bubble bg-purple-800/50 backdrop-blur-sm rounded-2xl px-4 py-2 max-w-xs">77 <p>Hey there! 👋</p>78 <span class="text-xs text-purple-300 block mt-1">2:45 PM</span>79 </div>80 </div>81 82 <!-- Sent Message -->83 <div class="flex items-start justify-end">84 <div class="message-bubble bg-pink-600/50 backdrop-blur-sm rounded-2xl px-4 py-2 max-w-xs">85 <p>Hi! What's up? 👻</p>86 <span class="text-xs text-pink-200 block mt-1 text-right">2:46 PM</span>87 </div>88 </div>89 90 <!-- Ghost Typing Indicator -->91 <div class="flex items-start ghost-typing">92 <div class="bg-purple-800 rounded-full p-2 mr-3">93 <i data-feather="user" class="w-5 h-5"></i>94 </div>95 <div class="bg-purple-800/30 rounded-full px-4 py-2">96 <div class="flex space-x-1">97 <div class="w-2 h-2 bg-purple-300 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>98 <div class="w-2 h-2 bg-purple-300 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>99 <div class="w-2 h-2 bg-purple-300 rounded-full animate-bounce" style="animation-delay: 0.3s"></div>100 </div>101 </div>102 </div>103 </div>104 </div>105 106 <!-- Input Area -->107 <div class="bg-gray-800/50 backdrop-blur-md rounded-xl p-4">108 <div class="flex items-center space-x-3">109 <button class="p-2 rounded-full hover:bg-purple-800/50 transition-all">110 <i data-feather="plus"></i>111 </button>112 <div class="flex-1 relative">113 <input 114 type="text" 115 placeholder="Whisper something..." 116 class="w-full bg-gray-700/50 border border-purple-500/30 rounded-full py-3 px-4 focus:outline-none glow-input transition-all"117 >118 <button class="absolute right-3 top-1/2 transform -translate-y-1/2 p-1 rounded-full hover:bg-purple-800/50">119 <i data-feather="send" class="w-5 h-5"></i>120 </button>121 </div>122 <button class="p-2 rounded-full hover:bg-purple-800/50 transition-all">123 <i data-feather="mic"></i>124 </button>125 </div>126 <div class="flex justify-between mt-2 px-1">127 <div class="flex space-x-2">128 <button class="text-xs text-purple-300 hover:text-purple-100">GIF</button>129 <button class="text-xs text-purple-300 hover:text-purple-100">Stickers</button>130 <button class="text-xs text-purple-300 hover:text-purple-100">#Tags</button>131 </div>132 <span class="text-xs text-purple-300">End-to-end encrypted</span>133 </div>134 </div>135 </div>136 137 <script>138 // Initialize Vanta.js fog effect139 VANTA.FOG({140 el: "#vanta-bg",141 mouseControls: true,142 touchControls: true,143 gyroControls: false,144 minHeight: 200.00,145 minWidth: 200.00,146 highlightColor: 0x8a5cf6,147 midtoneColor: 0x5c2d91,148 lowlightColor: 0x1a1033,149 baseColor: 0x0,150 blurFactor: 0.60,151 speed: 1.50152 });153 154 // Feather icons155 feather.replace();156 157 // Auto-scroll to bottom of chat158 const chatArea = document.querySelector('.custom-scrollbar');159 chatArea.scrollTop = chatArea.scrollHeight;160 161 // Simulate receiving a message162 setTimeout(() => {163 const messages = [164 "The ghosts are typing... 👀",165 "Boo! Did I scare you? 😈",166 "Want to hear a ghost joke? Why don't ghosts like rain? It dampens their spirits! 👻"167 ];168 169 const typingIndicator = document.querySelector('.ghost-typing');170 if (typingIndicator) {171 setTimeout(() => {172 typingIndicator.classList.remove('ghost-typing');173 174 const randomMessage = messages[Math.floor(Math.random() * messages.length)];175 176 const messageDiv = document.createElement('div');177 messageDiv.className = 'flex items-start message-bubble';178 messageDiv.innerHTML = `179 <div class="bg-purple-800 rounded-full p-2 mr-3">180 <i data-feather="user" class="w-5 h-5"></i>181 </div>182 <div class="bg-purple-800/50 backdrop-blur-sm rounded-2xl px-4 py-2 max-w-xs">183 <p>${randomMessage}</p>184 <span class="text-xs text-purple-300 block mt-1">${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</span>185 </div>186 `;187 188 typingIndicator.parentNode.insertBefore(messageDiv, typingIndicator.nextSibling);189 feather.replace();190 191 // Scroll to bottom192 chatArea.scrollTop = chatArea.scrollHeight;193 }, 2000);194 }195 }, 3000);196 </script>197</body>198</html>199