Cufudud/replitail-explorer
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>Discord Clone | RepliTail Explorer</title>7 <link rel="stylesheet" href="style.css">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/feather-icons/dist/feather.min.js"></script>11</head>12<body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">13 <custom-navbar></custom-navbar>14 15 <main class="flex-grow flex overflow-hidden">16 <!-- Server sidebar -->17 <div class="w-16 bg-gray-900 border-r border-gray-800 flex flex-col items-center py-3 overflow-y-auto">18 <div class="w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center mb-2 hover:rounded-2xl transition-all duration-200 cursor-pointer">19 <i data-feather="message-circle" class="w-6 h-6"></i>20 </div>21 <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center mb-2 hover:rounded-2xl transition-all duration-200 cursor-pointer">22 <i data-feather="hash" class="w-6 h-6"></i>23 </div>24 <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center mb-2 hover:rounded-2xl transition-all duration-200 cursor-pointer">25 <i data-feather="mic" class="w-6 h-6"></i>26 </div>27 <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center mb-2 hover:rounded-2xl transition-all duration-200 cursor-pointer">28 <i data-feather="users" class="w-6 h-6"></i>29 </div>30 <div class="flex-1"></div>31 <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center mb-2 hover:rounded-2xl transition-all duration-200 cursor-pointer">32 <i data-feather="settings" class="w-6 h-6"></i>33 </div>34 </div>35 36 <!-- Channels sidebar -->37 <div class="w-60 bg-gray-800 border-r border-gray-700 flex flex-col">38 <div class="p-4 border-b border-gray-700 font-medium">Discord Server</div>39 <div class="p-3 text-gray-400 font-medium text-xs uppercase tracking-wider">Text Channels</div>40 <div class="flex-1 overflow-y-auto">41 <div class="px-2 py-1 hover:bg-gray-700 cursor-pointer flex items-center">42 <i data-feather="hash" class="w-4 h-4 mr-1 text-gray-400"></i>43 <span>general</span>44 </div>45 <div class="px-2 py-1 hover:bg-gray-700 cursor-pointer flex items-center">46 <i data-feather="hash" class="w-4 h-4 mr-1 text-gray-400"></i>47 <span>random</span>48 </div>49 <div class="px-2 py-1 hover:bg-gray-700 cursor-pointer flex items-center">50 <i data-feather="hash" class="w-4 h-4 mr-1 text-gray-400"></i>51 <span>help</span>52 </div>53 </div>54 <div class="p-3 border-t border-gray-700 flex items-center">55 <a href="https://discord.gg/tecarmyy" class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center mr-2">56 <i data-feather="external-link" class="w-4 h-4"></i>57 </a>58<div class="flex-1">59 <div class="text-sm font-medium">Join Our Server</div>60 <div class="text-xs text-gray-400">discord.gg/tecarmyy</div>61</div>62 <div class="flex space-x-1">63 <button class="text-gray-400 hover:text-gray-200">64 <i data-feather="mic" class="w-4 h-4"></i>65 </button>66 <button class="text-gray-400 hover:text-gray-200">67 <i data-feather="headphones" class="w-4 h-4"></i>68 </button>69 <button class="text-gray-400 hover:text-gray-200">70 <i data-feather="settings" class="w-4 h-4"></i>71 </button>72 </div>73 </div>74 </div>75 76 <!-- Main chat area -->77 <div class="flex-1 flex flex-col bg-gray-700">78 <div class="p-4 border-b border-gray-600 flex items-center">79 <i data-feather="hash" class="w-5 h-5 text-gray-400 mr-2"></i>80 <span class="font-medium">general</span>81 </div>82 83 <div class="flex-1 overflow-y-auto p-4 space-y-4">84 <!-- Messages -->85 <div class="flex">86 <div class="w-10 h-10 rounded-full bg-purple-600 flex-shrink-0 flex items-center justify-center mr-3">87 U188 </div>89 <div>90 <div class="flex items-baseline">91 <span class="font-medium mr-2">User1</span>92 <span class="text-xs text-gray-400">Today at 12:30 PM</span>93 </div>94 <p class="text-gray-200">Hey everyone! How's it going?</p>95 </div>96 </div>97 98 <div class="flex">99 <div class="w-10 h-10 rounded-full bg-blue-600 flex-shrink-0 flex items-center justify-center mr-3">100 U2101 </div>102 <div>103 <div class="flex items-baseline">104 <span class="font-medium mr-2">User2</span>105 <span class="text-xs text-gray-400">Today at 12:32 PM</span>106 </div>107 <p class="text-gray-200">Doing great! Working on a new project.</p>108 </div>109 </div>110 111 <div class="flex">112 <div class="w-10 h-10 rounded-full bg-green-600 flex-shrink-0 flex items-center justify-center mr-3">113 U3114 </div>115 <div>116 <div class="flex items-baseline">117 <span class="font-medium mr-2">User3</span>118 <span class="text-xs text-gray-400">Today at 12:35 PM</span>119 </div>120 <p class="text-gray-200">Anyone want to collaborate on something?</p>121 </div>122 </div>123 </div>124 125 <div class="p-4 border-t border-gray-600">126 <div class="relative">127 <input 128 type="text" 129 placeholder="Message #general" 130 class="w-full bg-gray-600 rounded-lg px-4 py-2 pr-10 focus:outline-none focus:ring-1 focus:ring-indigo-500"131 >132 <div class="absolute right-2 top-2 flex space-x-1">133 <button class="text-gray-400 hover:text-gray-200">134 <i data-feather="plus" class="w-5 h-5"></i>135 </button>136 <button class="text-gray-400 hover:text-gray-200">137 <i data-feather="gift" class="w-5 h-5"></i>138 </button>139 <button class="text-gray-400 hover:text-gray-200">140 <i data-feather="image" class="w-5 h-5"></i>141 </button>142 </div>143 </div>144 </div>145 </div>146 147 <!-- Members sidebar -->148 <div class="w-60 bg-gray-800 border-l border-gray-700 p-3 overflow-y-auto">149 <div class="text-xs font-medium text-gray-400 uppercase tracking-wider mb-2">Online — 3</div>150 <div class="space-y-1">151 <div class="flex items-center py-1 px-2 rounded hover:bg-gray-700 cursor-pointer">152 <div class="w-8 h-8 rounded-full bg-purple-600 flex-shrink-0 flex items-center justify-center mr-2 relative">153 <span class="text-xs">U1</span>154 <div class="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full bg-green-500 border-2 border-gray-800"></div>155 </div>156 <span class="text-sm truncate">User1</span>157 </div>158 <div class="flex items-center py-1 px-2 rounded hover:bg-gray-700 cursor-pointer">159 <div class="w-8 h-8 rounded-full bg-blue-600 flex-shrink-0 flex items-center justify-center mr-2 relative">160 <span class="text-xs">U2</span>161 <div class="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full bg-green-500 border-2 border-gray-800"></div>162 </div>163 <span class="text-sm truncate">User2</span>164 </div>165 <div class="flex items-center py-1 px-2 rounded hover:bg-gray-700 cursor-pointer">166 <div class="w-8 h-8 rounded-full bg-green-600 flex-shrink-0 flex items-center justify-center mr-2 relative">167 <span class="text-xs">U3</span>168 <div class="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full bg-green-500 border-2 border-gray-800"></div>169 </div>170 <span class="text-sm truncate">User3</span>171 </div>172 </div>173 </div>174 </main>175 176 <custom-footer></custom-footer>177 178 <script src="components/navbar.js"></script>179 <script src="components/footer.js"></script>180 <script src="script.js"></script>181 <script>182 feather.replace();183 </script>184</body>185</html>