1<!doctype html> 2<!-- Developed by Shiplogic - https://shiplogic.com --> 3<html lang="en"> 4 <head> 5 <meta charset="utf-8" /> 6 <meta 7 name="viewport" 8 content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" 9 /> 10 <link rel="manifest" href="/manifest.json" /> 11 <link id="favicon" rel="shortcut icon" href="/favicon.png" /> 12 <meta name="theme-color" content="#000000" /> 13 14 <!-- Preload loading-screen assets so the loader can paint sooner --> 15 <link rel="preload" as="image" href="/bakkie.svg" /> 16 <link rel="preload" as="image" href="/wheel.svg" /> 17 18 <style> 19 #loading-screen { 20 position: absolute; 21 top: 0; 22 left: 0; 23 width: 100%; 24 height: 100%; 25 overflow: hidden; 26 background: #fff; 27 } 28 29 .loading-screen-content { 30 /* Reset all possible inherited styles */ 31 all: initial; 32 /* Set explicit positioning */ 33 position: fixed !important; 34 top: 50% !important; 35 left: 50% !important; 36 transform: translate(-50%, -50%) !important; 37 z-index: 999999 !important; 38 /* Prevent any text styling inheritance */ 39 font-family: initial; 40 font-size: initial; 41 line-height: initial; 42 color: initial; 43 background: transparent !important; 44 border: none !important; 45 margin: 0 !important; 46 padding: 0 !important; 47 box-sizing: content-box !important; 48 /* Initially hidden */ 49 opacity: 0 !important; 50 } 51 52 .loading-screen-content.show { 53 opacity: 1 !important; 54 animation: idleBounce 0.45s ease-in-out infinite !important; 55 } 56 57 @keyframes idleBounce { 58 0%, 59 100% { 60 transform: translate(-50%, calc(-50% - 8px)); 61 } 62 50% { 63 transform: translate(-50%, calc(-50% - 11px)); 64 } 65 } 66 67 .loading-screen-content img { 68 max-width: none !important; 69 } 70 71 .loading-screen-content .bakkie { 72 width: 200px !important; 73 vertical-align: top !important; 74 } 75 76 @keyframes rotateWheel { 77 from { 78 transform: rotate(0deg); 79 } 80 to { 81 transform: rotate(360deg); 82 } 83 } 84 85 .loading-screen-content .bakkie-wheel { 86 width: 30px; 87 animation: rotateWheel 0.5s linear infinite; 88 transform-origin: center; 89 } 90 91 .loading-screen-content .bakkie-logo { 92 width: 80px; 93 } 94 95 .smoke-container { 96 position: absolute; 97 top: 78px; 98 left: -10px; 99 width: 20px; 100 height: 20px; 101 pointer-events: none; 102 } 103 104 .smoke-particle { 105 position: absolute; 106 width: 4px; 107 height: 4px; 108 background: rgba(150, 150, 150, 0.6); 109 border-radius: 50%; 110 opacity: 0; 111 animation: smokeRise 2s ease-out infinite; 112 } 113 114 .smoke-particle:nth-child(1) { 115 animation-delay: 0s; 116 animation-duration: 2.1s; 117 left: 2px; 118 } 119 120 .smoke-particle:nth-child(2) { 121 animation-delay: 0.3s; 122 animation-duration: 1.7s; 123 left: 6px; 124 } 125 126 .smoke-particle:nth-child(3) { 127 animation-delay: 0.6s; 128 animation-duration: 2.4s; 129 left: 4px; 130 } 131 132 .smoke-particle:nth-child(4) { 133 animation-delay: 0.9s; 134 animation-duration: 1.9s; 135 left: 8px; 136 } 137 138 .smoke-particle:nth-child(5) { 139 animation-delay: 1.2s; 140 animation-duration: 2.2s; 141 left: 0px; 142 } 143 144 @keyframes smokeRise { 145 0% { 146 transform: translateY(0) translateX(0) scale(0.4); 147 opacity: 0.7; 148 } 149 150 100% { 151 transform: translateY(-32px) translateX(-42px) scale(1.6); 152 opacity: 0; 153 } 154 } 155 156 .road { 157 background: #eee; 158 background-image: 159 repeating-linear-gradient( 160 90deg, 161 transparent, 162 transparent 2px, 163 rgba(0, 0, 0, 0.03) 2px, 164 rgba(0, 0, 0, 0.03) 4px 165 ), 166 repeating-linear-gradient( 167 0deg, 168 transparent, 169 transparent 2px, 170 rgba(0, 0, 0, 0.03) 2px, 171 rgba(0, 0, 0, 0.03) 4px 172 ), 173 radial-gradient(circle at 20% 30%, rgba(0, 0, 0, 0.02) 0%, transparent 2px), 174 radial-gradient(circle at 60% 70%, rgba(0, 0, 0, 0.02) 0%, transparent 2px), 175 radial-gradient(circle at 80% 20%, rgba(0, 0, 0, 0.02) 0%, transparent 2px); 176 background-size: 177 4px 4px, 178 4px 4px, 179 100px 100px, 180 120px 120px, 181 90px 90px; 182 height: 50%; 183 position: absolute; 184 top: calc(50% + 30px); 185 width: 100%; 186 overflow: hidden; 187 animation: rollRoad 0.6s linear infinite; 188 } 189 190 @keyframes rollRoad { 191 from { 192 background-position: 193 0 0, 194 0 0, 195 0 0, 196 0 0, 197 0 0; 198 } 199 to { 200 background-position: 201 -80px 0, 202 -80px 0, 203 -80px 0, 204 -80px 0, 205 -80px 0; 206 } 207 } 208 209 /* Dark mode road: black overlay lines are invisible on a dark base, 210 so use a subtle light overlay instead */ 211 #loading-screen.is-dark .road { 212 background-image: 213 repeating-linear-gradient( 214 90deg, 215 transparent, 216 transparent 2px, 217 rgba(255, 255, 255, 0.04) 2px, 218 rgba(255, 255, 255, 0.04) 4px 219 ), 220 repeating-linear-gradient( 221 0deg, 222 transparent, 223 transparent 2px, 224 rgba(255, 255, 255, 0.04) 2px, 225 rgba(255, 255, 255, 0.04) 4px 226 ), 227 radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 2px), 228 radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.03) 0%, transparent 2px), 229 radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 2px); 230 } 231 232 /* Indeterminate progress cue */ 233 .loading-progress { 234 position: fixed; 235 bottom: 48px; 236 left: 50%; 237 transform: translateX(-50%); 238 width: 160px; 239 height: 3px; 240 background: rgba(0, 0, 0, 0.08); 241 border-radius: 2px; 242 overflow: hidden; 243 z-index: 999999; 244 opacity: 0; 245 transition: opacity 0.3s ease; 246 } 247 248 .loading-screen-content.show ~ .loading-progress { 249 opacity: 1; 250 } 251 252 #loading-screen.is-dark .loading-progress { 253 background: rgba(255, 255, 255, 0.1); 254 } 255 256 .loading-progress-bar { 257 position: absolute; 258 top: 0; 259 height: 100%; 260 width: 40%; 261 border-radius: 2px; 262 background: rgba(0, 0, 0, 0.35); 263 animation: indeterminate 1.2s ease-in-out infinite; 264 } 265 266 #loading-screen.is-dark .loading-progress-bar { 267 background: rgba(255, 255, 255, 0.45); 268 } 269 270 @keyframes indeterminate { 271 0% { 272 left: -40%; 273 } 274 100% { 275 left: 100%; 276 } 277 } 278 279 /* Respect users who prefer reduced motion */ 280 @media (prefers-reduced-motion: reduce) { 281 .loading-screen-content.show, 282 .loading-screen-content .bakkie-wheel, 283 .smoke-particle, 284 .road, 285 .loading-progress-bar { 286 animation: none !important; 287 } 288 289 .loading-screen-content.show { 290 transform: translate(-50%, -50%) !important; 291 } 292 293 .smoke-particle { 294 opacity: 0 !important; 295 } 296 } 297 298 body, 299 html { 300 margin: 0; 301 padding: 0; 302 } 303 </style> 304 <title></title> 305
305<script src="/index.config.js"></script>
305 306
306<script src="/robots-loader.js"></script>
306 307
307<script src="/loading-screen.js"></script>
307 308
308<script type="module" crossorigin src="/assets/main-B8aAhXJ7.js"></script>
308 309 <link rel="modulepreload" crossorigin href="/assets/react-vendor-Bqf2vwgD.js"> 310 <link rel="modulepreload" crossorigin href="/assets/detect-browser-KS8fqzLC.js"> 311 <link rel="modulepreload" crossorigin href="/assets/raygun-8T1JTxH6.js"> 312 <link rel="modulepreload" crossorigin href="/assets/fontawesome-B_YrodPL.js"> 313 <link rel="modulepreload" crossorigin href="/assets/dexie-CHhaZb09.js"> 314 <link rel="modulepreload" crossorigin href="/assets/lodash-DwqJlx9e.js"> 315 <link rel="modulepreload" crossorigin href="/assets/react-router-BdiPjGpe.js"> 316 <link rel="modulepreload" crossorigin href="/assets/react-hook-form-NX7SULTW.js"> 317 <link rel="modulepreload" crossorigin href="/assets/uuid-SoommWqA.js"> 318 <link rel="modulepreload" crossorigin href="/assets/libphonenumber-Bs_56CJR.js"> 319 <link rel="modulepreload" crossorigin href="/assets/iconLibrary-DY9wls56.js"> 320 <link rel="modulepreload" crossorigin href="/assets/index-MfYquvAk.js"> 321 <link rel="modulepreload" crossorigin href="/assets/google-oauth-B1e8M3oY.js"> 322 <link rel="modulepreload" crossorigin href="/assets/axios-42ANG6Sg.js"> 323 <link rel="modulepreload" crossorigin href="/assets/headlessui-DGoynQdn.js"> 324 <link rel="modulepreload" crossorigin href="/assets/gtm-8jAo5NOf.js"> 325 <link rel="stylesheet" crossorigin href="/assets/index-C2mB7xqe.css"> 326 <link rel="stylesheet" crossorigin href="/assets/main-KGmINvK0.css"> 327 </head> 328 <body> 329 <!-- Meta Pixel and LinkedIn Insight Tag are initialised at runtime from 330 provider settings (see src/utils/trackingPixelUtils.ts) so that each 331 provider can configure their own IDs. --> 332 <noscript>You need to enable JavaScript to run this app. </noscript> 333 <div id="loading-screen" role="status" aria-live="polite" aria-label="Loading"> 334 <div class="loading-screen-content" aria-hidden="true"> 335 <img class="bakkie" alt="" /> 336 <img 337 id="bakkie-wheel1" 338 class="bakkie-wheel" 339 style="position: absolute; top: 68px; left: 32.5px" 340 /> 341 <img 342 id="bakkie-wheel2" 343 class="bakkie-wheel" 344 style="position: absolute; top: 68px; left: 156px" 345 /> 346 <div class="smoke-container"> 347 <div class="smoke-particle"></div> 348 <div class="smoke-particle"></div> 349 <div class="smoke-particle"></div> 350 <div class="smoke-particle"></div> 351 <div class="smoke-particle"></div> 352 </div> 353 <img class="bakkie-logo" style="position: absolute; top: 15px; left: 10px" /> 354 </div> 355 <div class="loading-progress" aria-hidden="true"> 356 <div class="loading-progress-bar"></div> 357 </div> 358 <div class="road" aria-hidden="true"></div> 359 </div> 360 <div id="root"> 361 </div> 362 <link 363 defer 364 href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap" 365 rel="stylesheet" 366 crossorigin 367 /> 368 </body> 369</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.