UnknownProbably/undefined
1
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>Leaderboard - RevQ</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script>11 tailwind.config = {12 theme: {13 extend: {14 colors: {15 primary: {16 500: '#6366f1',17 },18 secondary: {19 500: '#f43f5e',20 }21 }22 }23 }24 }25 </script>26</head>27<body class="bg-gray-900 min-h-screen text-gray-200">28 <nav class="bg-gray-800 shadow-sm py-3 px-6 rounded-full max-w-6xl mx-auto mt-6 sticky top-6 z-50 border border-gray-700 backdrop-blur-sm bg-opacity-80">29 <div class="max-w-6xl mx-auto flex justify-between items-center">30 <div class="flex items-center space-x-2">31 <div class="flex items-center space-x-2">32 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-primary-500">33 <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>34 <path d="M8 14C8 14 9.5 16 12 16C14.5 16 16 14 16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>35 <path d="M15 9H15.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>36 <path d="M9 9H9.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>37 <path d="M12 12V14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>38 <path d="M12 2L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>39 <path d="M19 5L17 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>40 <path d="M5 5L7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>41 </svg>42 <h1 class="text-xl font-bold text-white">RevQ</h1>43 </div>44 </div>45 <div class="hidden md:flex space-x-6">46 <a href="index.html" class="text-gray-300 hover:text-primary-500">Home</a>47 <a href="courses.html" class="text-gray-300 hover:text-primary-500">Courses</a>48 <a href="leaderboard.html" class="text-primary-500">Leaderboard</a>49 <a href="about.html" class="text-gray-300 hover:text-primary-500">About</a>50 </div>51 <div class="flex items-center space-x-4">52 <button class="px-4 py-2 rounded-full text-primary-500 border border-primary-500 hover:bg-primary-500 hover:text-white transition">Login</button>53 <button class="px-4 py-2 rounded-full bg-primary-500 text-white hover:bg-primary-600 transition">Sign Up</button>54 <button class="md:hidden">55 <i data-feather="menu"></i>56 </button>57 </div>58 </div>59 </nav>60 61 <section class="py-16 px-6">62 <div class="max-w-6xl mx-auto">63 <h1 class="text-4xl font-bold text-white mb-8"><span class="text-primary-500">Leaderboard</span></h1>64 65 <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">66 <div class="flex justify-between items-center mb-6">67 <h2 class="text-xl font-semibold">Top Learners This Week</h2>68 <div class="flex space-x-2">69 <button class="px-4 py-2 rounded-lg bg-gray-700 text-white">Weekly</button>70 <button class="px-4 py-2 rounded-lg bg-gray-700 text-white">Monthly</button>71 <button class="px-4 py-2 rounded-lg bg-primary-500 text-white">All Time</button>72 </div>73 </div>74 75 <div class="overflow-x-auto">76 <table class="w-full">77 <thead>78 <tr class="text-gray-400 border-b border-gray-700">79 <th class="text-left pb-4">Rank</th>80 <th class="text-left pb-4">User</th>81 <th class="text-left pb-4">XP</th>82 <th class="text-left pb-4">Level</th>83 <th class="text-left pb-4">Courses</th>84 </tr>85 </thead>86 <tbody>87 <!-- Top 1 -->88 <tr class="border-b border-gray-700 hover:bg-gray-700/50">89 <td class="py-4">90 <div class="flex items-center">91 <div class="w-8 h-8 rounded-full bg-yellow-500 flex items-center justify-center mr-3">92 <i data-feather="award" class="w-4 h-4 text-white"></i>93 </div>94 <span>1</span>95 </div>96 </td>97 <td class="py-4">98 <div class="flex items-center">99 <img src="http://static.photos/people/200x200/1" alt="User" class="w-10 h-10 rounded-full mr-3">100 <span>CodeMaster</span>101 </div>102 </td>103 <td class="py-4">24,587</td>104 <td class="py-4">42</td>105 <td class="py-4">8</td>106 </tr>107 108 <!-- Top 2 -->109 <tr class="border-b border-gray-700 hover:bg-gray-700/50">110 <td class="py-4">111 <div class="flex items-center">112 <div class="w-8 h-8 rounded-full bg-gray-500 flex items-center justify-center mr-3">113 <span>2</span>114 </div>115 </div>116 </td>117 <td class="py-4">118 <div class="flex items-center">119 <img src="http://static.photos/people/200x200/2" alt="User" class="w-10 h-10 rounded-full mr-3">120 <span>DataWizard</span>121 </div>122 </td>123 <td class="py-4">21,304</td>124 <td class="py-4">38</td>125 <td class="py-4">7</td>126 </tr>127 128 <!-- Top 3 -->129 <tr class="border-b border-gray-700 hover:bg-gray-700/50">130 <td class="py-4">131 <div class="flex items-center">132 <div class="w-8 h-8 rounded-full bg-amber-700 flex items-center justify-center mr-3">133 <span>3</span>134 </div>135 </div>136 </td>137 <td class="py-4">138 <div class="flex items-center">139 <img src="http://static.photos/people/200x200/3" alt="User" class="w-10 h-10 rounded-full mr-3">140 <span>WebNinja</span>141 </div>142 </td>143 <td class="py-4">19,876</td>144 <td class="py-4">36</td>145 <td class="py-4">6</td>146 </tr>147 148 <!-- Rest of top 10 -->149 <tr class="border-b border-gray-700 hover:bg-gray-700/50">150 <td class="py-4">4</td>151 <td class="py-4">AIExplorer</td>152 <td class="py-4">18,542</td>153 <td class="py-4">34</td>154 <td class="py-4">5</td>155 </tr>156 157 <tr class="border-b border-gray-700 hover:bg-gray-700/50">158 <td class="py-4">5</td>159 <td class="py-4">DevGuru</td>160 <td class="py-4">17,890</td>161 <td class="py-4">33</td>162 <td class="py-4">5</td>163 </tr>164 </tbody>165 </table>166 </div>167 168 <div class="mt-8 text-center">169 <button class="px-6 py-2 rounded-lg border border-primary-500 text-primary-500 hover:bg-primary-500/20 transition">170 View Full Leaderboard171 </button>172 </div>173 </div>174 </div>175 </section>176 177 <footer class="bg-gray-900 text-white py-12 px-6 border-t border-gray-700">178 <div class="max-w-6xl mx-auto grid md:grid-cols-4 gap-8">179 <div>180 <div class="flex items-center space-x-2 mb-4">181 <i data-feather="award" class="text-primary-500"></i>182 <h3 class="text-xl font-bold">RevQ</h3>183 </div>184 <p class="text-gray-300">Making learning fun, engaging, and rewarding through gamification.</p>185 </div>186 <div>187 <h4 class="text-lg font-semibold mb-4">Explore</h4>188 <ul class="space-y-2">189 <li><a href="index.html" class="text-gray-300 hover:text-white transition">Home</a></li>190 <li><a href="courses.html" class="text-gray-300 hover:text-white transition">Courses</a></li>191 <li><a href="leaderboard.html" class="text-gray-300 hover:text-white transition">Leaderboard</a></li>192 <li><a href="about.html" class="text-gray-300 hover:text-white transition">About</a></li>193 </ul>194 </div>195 <!-- Rest of footer same as index.html -->196 </div>197 </footer>198 199 <script>200 feather.replace();201 </script>202</body>203</html>