Changeset 6b10b67 for resources/views/filter.blade.php
- Timestamp:
- 01/29/24 13:15:08 (11 months ago)
- Branches:
- main
- Children:
- cf84baa
- Parents:
- 75151c6
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
resources/views/filter.blade.php
r75151c6 r6b10b67 22 22 .nav-item:hover { background: #1947ee; } 23 23 .account-link:hover { background: #3d68ff; } 24 .flex-parent-element { 25 display: flex; 26 width: 50%; 27 } 28 29 .flex-child-element { 30 flex: 1; 31 margin: 10px; 32 } 33 34 .flex-child-element:first-child { 35 margin-right: 20px; 36 } 37 .container { 38 display: block; 39 position: relative; 40 padding-left: 35px; 41 margin-bottom: 12px; 42 cursor: pointer; 43 font-size: 22px; 44 -webkit-user-select: none; 45 -moz-user-select: none; 46 -ms-user-select: none; 47 user-select: none; 48 } 49 50 /* Hide the browser's default checkbox */ 51 .container input { 52 position: absolute; 53 opacity: 0; 54 cursor: pointer; 55 height: 0; 56 width: 0; 57 } 58 59 /* Create a custom checkbox */ 60 .checkmark { 61 position: absolute; 62 top: 0; 63 left: 0; 64 height: 25px; 65 width: 25px; 66 background-color: #eee; 67 } 68 69 /* On mouse-over, add a grey background color */ 70 .container:hover input ~ .checkmark { 71 background-color: #ccc; 72 } 73 74 /* When the checkbox is checked, add a blue background */ 75 .container input:checked ~ .checkmark { 76 background-color: #2196F3; 77 } 78 79 /* Create the checkmark/indicator (hidden when not checked) */ 80 .checkmark:after { 81 content: ""; 82 position: absolute; 83 display: none; 84 } 85 86 /* Show the checkmark when checked */ 87 .container input:checked ~ .checkmark:after { 88 display: block; 89 } 90 91 /* Style the checkmark/indicator */ 92 .container .checkmark:after { 93 left: 9px; 94 top: 5px; 95 width: 5px; 96 height: 10px; 97 border: solid white; 98 border-width: 0 3px 3px 0; 99 -webkit-transform: rotate(45deg); 100 -ms-transform: rotate(45deg); 101 transform: rotate(45deg); 102 } 103 24 104 </style> 25 105 <script src="https://cdn.tailwindcss.com"></script> … … 37 117 <a href="/" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item"> 38 118 <i class="fas fa-tachometer-alt mr-3"></i> 39 Контролна табла119 Сортирај граѓани 40 120 </a> 41 121 <a href="/employees" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item"> … … 132 212 133 213 134 214 <main class="w-full flex-grow p-6"> 215 216 <h1 class="text-3xl text-black pb-6">Контролна табла</h1> 217 <div style="width: 600px"> 218 <form> 219 <label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label> 220 <div class="relative"> 221 <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"> 222 <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"> 223 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/> 224 </svg> 225 </div> 226 <input type="search" id="default-search" class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Пребарај матичен број..." required> 227 <button type="submit" class="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Search</button> 228 </div> 229 </form> 230 </div> 231 232 <div class="flex-parent-element"> 233 <h3>Возраст</h3> 234 235 <div class="flex-child-element"> <label class="container"><18 год 236 <input type="checkbox" checked="checked"> 237 <span class="checkmark"></span> 238 </label> 239 240 <label class="container"> 19-25 241 <input type="checkbox"> 242 <span class="checkmark"></span> 243 </label> 244 245 <label class="container">26-60 246 <input type="checkbox"> 247 <span class="checkmark"></span> 248 </label> 249 250 <label class="container">60+ 251 <input type="checkbox"> 252 <span class="checkmark"></span> 253 </label> 254 </div> 255 <h3>Пол</h3> 256 <div class="flex-child-element"> 257 <label class="container">М 258 <input type="checkbox" checked="checked"> 259 <span class="checkmark"></span> 260 </label> 261 262 <label class="container">Ж 263 <input type="checkbox"> 264 <span class="checkmark"></span> 265 </label> 266 </div> 267 </div> 268 269 270 271 <div class="w-full mt-12"> 272 <p class="text-xl pb-3 flex items-center"> 273 <i class="fas fa-list mr-3"></i> Граѓани 274 </p> 275 276 <div class="bg-white overflow-auto"> 277 <table class="min-w-full bg-white"> 278 <thead class="bg-gray-800 text-white"> 279 <tr> 280 <th class="text-left py-3 px-4 uppercase font-semibold text-sm">ЕМБГ</th> 281 <th class="w-1/3 text-left py-3 px-4 uppercase font-semibold text-sm">Име</th> 282 <th class="w-1/3 text-left py-3 px-4 uppercase font-semibold text-sm">Презиме</th> 283 <th class="w-1/3 text-left py-3 px-4 uppercase font-semibold text-sm">Пол</th> 284 <th class="w-1/3 text-left py-3 px-4 uppercase font-semibold text-sm">Адреса</th> 285 <th class="w-1/3 text-left py-3 px-4 uppercase font-semibold text-sm">Држава</th> 286 <th class="w-1/3 text-left py-3 px-4 uppercase font-semibold text-sm">Националност</th> 287 <th class="text-left py-3 px-4 uppercase font-semibold text-sm">Телефон</th> 288 </tr> 289 </thead> 290 <tbody class="text-gray-700"> 291 <tr> 292 <td class="w-1/3 text-left py-3 px-4">1011001470303</td> 293 <td class="w-1/3 text-left py-3 px-4">Емир</td> 294 <td class="w-1/3 text-left py-3 px-4">Абази</td> 295 <td class="w-1/3 text-left py-3 px-4">М</td> 296 <td class="w-1/3 text-left py-3 px-4">ул.Македонија бр.80 Тетово</td> 297 <td class="w-1/3 text-left py-3 px-4">Македонија</td> 298 <td class="w-1/3 text-left py-3 px-4">Албанец</td> 299 <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td> 300 </tr> 301 <tr class="bg-gray-200"> 302 <td class="w-1/3 text-left py-3 px-4">0302954470303</td> 303 <td class="w-1/3 text-left py-3 px-4">Василија</td> 304 <td class="w-1/3 text-left py-3 px-4">Васиљоска</td> 305 <td class="w-1/3 text-left py-3 px-4">Ж</td> 306 <td class="w-1/3 text-left py-3 px-4">ул.154 бр.20 Скопје</td> 307 <td class="w-1/3 text-left py-3 px-4">Македонија</td> 308 <td class="w-1/3 text-left py-3 px-4">Македонка</td> 309 <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td> 310 </tr> 311 </tbody> 312 </table> 313 </div> 314 </div> 315 </main> 135 316 </div> 317 136 318 137 319 <!-- AlpineJS -->
Note:
See TracChangeset
for help on using the changeset viewer.