Arlonar/codesky-programming-challenges-in-the-clouds
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>CodeSky - Programming Challenges</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script>12 tailwind.config = {13 theme: {14 extend: {15 colors: {16 primary: {17 500: '#0ea5e9',18 },19 secondary: {20 500: '#78716c',21 }22 }23 }24 }25 }26 </script>27</head>28<body class="bg-stone-50 min-h-screen">29 <custom-navbar></custom-navbar>30 31 <main class="container mx-auto px-4 py-8">32 <div class="max-w-6xl mx-auto">33 <div class="flex flex-col md:flex-row gap-8">34 <!-- Sidebar -->35 <div class="w-full md:w-1/4 space-y-6">36 <div class="bg-white rounded-xl shadow-sm p-6">37 <h2 class="text-xl font-bold text-stone-800 mb-4">Filters</h2>38 <div class="space-y-4">39 <div>40 <label class="block text-sm font-medium text-stone-700 mb-1">Difficulty</label>41 <select class="w-full rounded-lg border-stone-200 text-stone-700">42 <option>All</option>43 <option>Easy</option>44 <option>Medium</option>45 <option>Hard</option>46 </select>47 </div>48 <div>49 <label class="block text-sm font-medium text-stone-700 mb-1">Status</label>50 <div class="space-y-2">51 <label class="flex items-center">52 <input type="checkbox" class="rounded border-stone-300 text-sky-500">53 <span class="ml-2 text-stone-600">Solved</span>54 </label>55 <label class="flex items-center">56 <input type="checkbox" class="rounded border-stone-300 text-sky-500">57 <span class="ml-2 text-stone-600">Unsolved</span>58 </label>59 </div>60 </div>61 <button class="w-full bg-sky-500 hover:bg-sky-600 text-white py-2 px-4 rounded-lg transition">62 Apply Filters63 </button>64 </div>65 </div>66 </div>67 68 <!-- Main content -->69 <div class="w-full md:w-3/4">70 <div class="bg-white rounded-xl shadow-sm overflow-hidden">71 <div class="border-b border-stone-100 px-6 py-4 flex items-center justify-between">72 <h2 class="text-xl font-bold text-stone-800">Problems</h2>73 <div class="relative">74 <input type="text" placeholder="Search problems..." class="pl-10 pr-4 py-2 border border-stone-200 rounded-lg focus:ring-2 focus:ring-sky-300 focus:border-sky-300">75 <i data-feather="search" class="absolute left-3 top-2.5 text-stone-400"></i>76 </div>77 </div>78 79 <div class="overflow-x-auto">80 <table class="min-w-full divide-y divide-stone-200">81 <thead class="bg-stone-50">82 <tr>83 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-stone-500 uppercase tracking-wider">#</th>84 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-stone-500 uppercase tracking-wider">Title</th>85 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-stone-500 uppercase tracking-wider">Difficulty</th>86 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-stone-500 uppercase tracking-wider">Solved</th>87 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-stone-500 uppercase tracking-wider">Rating</th>88 </tr>89 </thead>90 <tbody class="bg-white divide-y divide-stone-200">91 <tr class="hover:bg-stone-50 cursor-pointer">92 <td class="px-6 py-4 whitespace-nowrap text-sm text-stone-500">1</td>93 <td class="px-6 py-4 whitespace-nowrap">94 <a href="#" class="text-sm font-medium text-sky-500 hover:text-sky-600">Two Sum</a>95 </td>96 <td class="px-6 py-4 whitespace-nowrap">97 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Easy</span>98 </td>99 <td class="px-6 py-4 whitespace-nowrap text-sm text-stone-500">1,234</td>100 <td class="px-6 py-4 whitespace-nowrap text-sm text-stone-500">101 <div class="flex items-center">102 <i data-feather="star" class="w-4 h-4 text-yellow-400"></i>103 <span class="ml-1">4.5</span>104 </div>105 </td>106 </tr>107 <tr class="hover:bg-stone-50 cursor-pointer">108 <td class="px-6 py-4 whitespace-nowrap text-sm text-stone-500">2</td>109 <td class="px-6 py-4 whitespace-nowrap">110 <a href="#" class="text-sm font-medium text-sky-500 hover:text-sky-600">Reverse Linked List</a>111 </td>112 <td class="px-6 py-4 whitespace-nowrap">113 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Medium</span>114 </td>115 <td class="px-6 py-4 whitespace-nowrap text-sm text-stone-500">876</td>116 <td class="px-6 py-4 whitespace-nowrap text-sm text-stone-500">117 <div class="flex items-center">118 <i data-feather="star" class="w-4 h-4 text-yellow-400"></i>119 <span class="ml-1">4.2</span>120 </div>121 </td>122 </tr>123 <tr class="hover:bg-stone-50 cursor-pointer">124 <td class="px-6 py-4 whitespace-nowrap text-sm text-stone-500">3</td>125 <td class="px-6 py-4 whitespace-nowrap">126 <a href="#" class="text-sm font-medium text-sky-500 hover:text-sky-600">Merge k Sorted Lists</a>127 </td>128 <td class="px-6 py-4 whitespace-nowrap">129 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Hard</span>130 </td>131 <td class="px-6 py-4 whitespace-nowrap text-sm text-stone-500">432</td>132 <td class="px-6 py-4 whitespace-nowrap text-sm text-stone-500">133 <div class="flex items-center">134 <i data-feather="star" class="w-4 h-4 text-yellow-400"></i>135 <span class="ml-1">4.8</span>136 </div>137 </td>138 </tr>139 </tbody>140 </table>141 </div>142 143 <div class="px-6 py-4 border-t border-stone-100 flex items-center justify-between">144 <div class="flex-1 flex justify-between sm:hidden">145 <a href="#" class="relative inline-flex items-center px-4 py-2 border border-stone-300 text-sm font-medium rounded-md text-stone-700 bg-white hover:bg-stone-50"> Previous </a>146 <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-stone-300 text-sm font-medium rounded-md text-stone-700 bg-white hover:bg-stone-50"> Next </a>147 </div>148 <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">149 <div>150 <p class="text-sm text-stone-500">Showing <span class="font-medium">1</span> to <span class="font-medium">3</span> of <span class="font-medium">10</span> results</p>151 </div>152 <div>153 <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">154 <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-stone-300 bg-white text-sm font-medium text-stone-500 hover:bg-stone-50">155 <span class="sr-only">Previous</span>156 <i data-feather="chevron-left" class="h-5 w-5"></i>157 </a>158 <a href="#" aria-current="page" class="z-10 bg-sky-50 border-sky-500 text-sky-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 1 </a>159 <a href="#" class="bg-white border-stone-300 text-stone-500 hover:bg-stone-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 2 </a>160 <a href="#" class="bg-white border-stone-300 text-stone-500 hover:bg-stone-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 3 </a>161 <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-stone-300 bg-white text-sm font-medium text-stone-500 hover:bg-stone-50">162 <span class="sr-only">Next</span>163 <i data-feather="chevron-right" class="h-5 w-5"></i>164 </a>165 </nav>166 </div>167 </div>168 </div>169 </div>170 </div>171 </div>172 </div>173 </main>174 175 <custom-footer></custom-footer>176 177 <script src="components/navbar.js"></script>178 <script src="components/footer.js"></script>179 <script src="script.js"></script>180 <script>feather.replace();</script>181<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>182</body>183</html>