CINXE.COM
Document
<!DOCTYPE html> <html lang="en"> <!-- Flags are fetched from <a href="https://url.uk.m.mimecastprotect.com/s/neb4CXQ8BSgzvAguDi7CW6RZZ?domain=flagsapi.com">https://flagsapi.com/</a> --> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* Import a Google Font */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); /* START - CSS reset */ *, *::before, *::after { box-sizing: border-box; } @-ms-viewport { width: device-width; } html, body { overscroll-behavior-x: none; overscroll-behavior-y: contain; } html { font-family: 'Roboto', sans-serif; font-size: 43.75%; /* 1rem = 7px */ line-height: 1.6; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @media (min-width: 768px) { html { font-size: 62.5%; /* 1rem = 10px for tablet and desktop */ } } body { font-size: 1.6rem; min-height: 100vh; margin: 0; } a { text-decoration: none; } select { outline: none; } /* END - CSS reset */ /* START - Page base styles */ :root { /* #EE3A43 */ --base-primary: 357, 84%, 58%; /* #BC1019 */ --base-primary-dark: 357, 84%, 40%; --primary-color: hsl(var(--base-primary)); --primary-color-active: hsla(var(--base-primary), 0.1); --primary-color-dark: hsl(var(--base-primary-dark)); --secondary-color: #FFFFFF; --text-color: #333333; --text-color-invert: #FFFFFF; --border-color: #CCCCCC; --border-color-active: #AAAAAA; --page-background-color: #F5F5F5; --page-shadow-color: #999999; --button-shadow-color: #CCCCCC; } html body { background-color: var(--page-background-color); color: var(--text-color); text-align: center; display: grid; place-items: center; padding: 2rem; } .container { width: 100%; max-width: 48rem; margin: auto; background: var(--secondary-color); border-radius: 2rem; padding: 4rem 2rem; box-shadow: 0 0 1rem 0 var(--page-shadow-color); font-size: 2rem; font-weight: 500; } .brand-logo { height: 18rem; } .brand-logo img, .brand-logo svg { display: inline-block; width: 100%; height: 100%; object-fit: contain; } .language-selection, .location-selection { margin-bottom: 2rem; } .language-selection .language-buttons { display: flex; justify-content: center; gap: 2rem; } .radio-group { display: flex; flex-direction: column; gap: 1rem; padding: 0 2rem; } .radio-option { --spacing: .4rem; border: 2px solid var(--border-color); border-radius: 1rem; cursor: pointer; padding: 0 calc(var(--spacing) * 4); display: inline-flex; align-items: center; gap: calc(var(--spacing) * 4); min-height: calc(var(--spacing) * 12); transition: all 0.1s linear; } .radio-option:hover, .radio-option:has(input:checked) { border-color: var(--border-color-active); background-color: var(--primary-color-active); } .radio-option input[type="radio"] { display: none; } .radio-option .country-flag { width: calc(var(--spacing) * 12); height: calc(var(--spacing) * 12); aspect-ratio: 1; display: block; } .radio-option .country-flag img { width: 100%; height: 100%; object-fit: contain; } .radio-custom { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); aspect-ratio: 1; background-color: var(--secondary-color); border-radius: 50%; box-shadow: 0 0 0 2px var(--border-color); display: grid; place-items: center; } .radio-option .radio-custom:has(:checked) { box-shadow: 0 0 0 2px var(--primary-color); } .radio-option .radio-custom:has(:checked)::after { content: ""; width: 50%; height: 50%; aspect-ratio: 1; background-color: var(--primary-color); border-radius: 50%; } footer { margin-top: 5rem; } .button-continue { background-color: var(--primary-color); color: var(--text-color-invert); border: none; border-radius: .5rem; padding: 1.5rem 3rem; cursor: pointer; text-decoration: none; transition: background-color 0.3s ease; display: inline-block; } .button-continue:hover { background-color: var(--primary-color-dark); box-shadow: 0 4px 8px var(--button-shadow-color); } </style> </head> <body> <div class="container"> <header class="brand-logo"> <svg viewBox="0 0 59 54" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_176_156036)"> <path fill-rule="evenodd" clip-rule="evenodd" d="M51.7227 49.8462V48.8077H52.0468L52.2412 49.5162L52.4336 48.8077H52.7584V49.8462H52.5575V49.0287L52.3444 49.8462H52.136L51.9237 49.0287V49.8462H51.7227ZM50.0378 49.8462V48.9835H49.6512V48.8077H50.687V48.9835H50.3012V49.8462H50.0378ZM39.2941 27C39.7707 26.9527 40.3416 26.6454 40.7132 26.3667C41.1345 26.0509 41.2062 25.4961 41.3655 24.9231C40.3553 25.0848 39.5411 25.9769 39.2941 27ZM16.5084 30.1154C18.0178 29.6106 19.428 29.2161 20.2173 28.3011C21.4306 26.8942 19.911 25.9805 17.9863 25.9615C17.7176 27.6139 16.7839 28.8024 16.5084 30.1154ZM3.98378 38.13C4.1887 37.9227 4.08479 34.6691 3.48557 33.0951C2.80569 31.3092 0.00282258 32.0323 1.32038 36.5327C1.62677 37.7354 3.11208 39.0117 3.98378 38.13ZM20.8106 6.53809C18.9364 7.29701 17.3359 8.00784 15.6099 8.98954C11.4616 11.3491 8.07547 15.8236 6.54242 20.4433C5.11242 24.7528 5.14001 34.3926 7.0371 38.4956C8.60156 41.8791 9.02919 42.0675 11.3912 44.4668C13.5991 46.7092 17.8743 49.4531 21.0254 50.2559C22.0997 50.5295 23.165 50.6717 24.2588 50.8524C24.9035 50.9589 25.4289 51.3112 25.1061 51.452C22.7994 52.4576 15.458 49.5401 13.2114 47.9913C10.2537 45.9524 8.48715 43.5835 6.40899 40.9059C3.84957 37.608 3.39142 43.9755 10.9881 49.8276C17.9589 55.1974 29.435 54.9972 37.381 51.424C43.202 48.8065 47.5013 45.0838 50.4498 39.505C51.464 37.5862 52.2055 35.9422 52.8036 33.5894C53.8798 29.3556 53.3693 22.6468 52.2898 18.4635C50.6365 12.0569 45.5207 8.07909 40.1091 5.66988C36.2692 3.9603 32.4617 4.45955 33.9824 3.50393C35.3539 2.64208 39.887 4.32392 41.1551 4.885C43.2575 5.81517 45.2486 7.08912 46.8895 8.20593C55.0322 13.7479 56.6847 25.9401 54.4063 35.0562C53.8167 37.4149 52.904 39.6357 51.8116 41.5023C49.6139 45.2577 46.4392 48.1098 42.8249 50.4849C42.343 50.8016 40.1649 51.9049 40.4778 52.508C40.8386 53.2034 43.5446 52.0079 43.9822 51.7662C47.2305 49.9708 51.3366 46.2428 53.7091 43.3914C56.4153 40.1385 58.2337 35.8868 58.7433 30.3954C59.3148 24.2374 58.8823 19.9289 56.7182 14.6974C50.3861 -0.610144 34.343 -2.62049 20.0234 2.57363C16.8891 3.71055 13.7448 5.28234 11.2026 7.27004C9.89033 8.29614 8.76053 9.24705 7.69637 10.5214C4.90493 13.8644 3.41645 15.9845 2.37654 20.9861C2.00701 22.7631 1.71868 27.6189 2.52555 29.1187C2.67406 29.3946 3.21904 30.1655 3.77462 29.7814C4.19906 29.4882 4.08018 28.3487 4.10176 27.8138C4.15794 26.412 4.30377 25.0054 4.54613 23.6699C5.36832 19.1377 7.34675 14.7975 10.6386 11.673C11.6457 10.7173 11.5876 10.5989 12.9803 9.55418C14.9378 8.08596 22.1224 4.36591 22.4217 5.58998C22.5242 6.00996 21.8944 6.09902 20.8106 6.53809ZM35.0578 10.4076C35.7168 10.2871 36.0694 10.6514 36.2089 11.2334L36.9359 14.2665C37.2372 14.6554 40.5251 15.5818 41.2403 15.8439C42.686 16.3735 43.9432 17.0183 45.2803 17.7027C45.8435 17.991 46.8423 18.4961 46.4585 19.3634C46.129 20.1078 44.9482 19.8835 44.119 19.8836C34.1327 19.8855 26.9901 20.8013 17.4429 22.2301C16.5744 22.3601 12.9182 23.186 12.461 22.6881C11.7915 21.9588 14.8448 20.3591 15.3725 20.0417C16.6033 19.301 17.7822 18.5983 19.11 17.9993C23.111 16.1941 21.8186 17.2049 23.9548 13.9383C24.7963 12.6513 24.6185 12.5845 25.4 12.4206L35.0578 10.4076ZM23.9114 24.8635C23.0347 23.211 26.1862 21.5352 26.7633 21.8449C27.2242 22.0923 25.9891 23.4886 25.7804 23.7795C25.3843 24.3316 24.929 25.1514 23.9114 24.8635ZM43.0957 26.6736C43.6058 26.8695 43.9815 26.8561 44.4727 27.1326C44.411 27.7541 43.9113 27.9221 43.2262 28.0312C42.1287 28.2061 42.0608 27.9474 41.3405 27.6593C40.7494 28.4303 39.1533 29.159 37.7116 28.8721C37.3834 29.6577 35.9889 29.9423 34.8887 29.9756C34.3229 29.9929 31.3052 30.1669 31.0791 30.1003C30.6666 29.0607 32.1773 27.968 32.5731 27.5882C32.8023 27.3683 34.7263 25.7657 34.8013 25.7316C34.0987 25.684 33.29 25.9698 32.52 25.8883C31.7702 25.809 31.1802 25.2244 31.7678 24.514C31.9297 24.4357 34.2213 24.2148 34.7201 24.131C35.6052 23.9822 37.2223 23.6594 37.2366 24.7746C37.2462 25.5247 36.1796 26.2953 35.7968 26.6945C35.2842 27.2294 34.6723 27.9783 34.0658 28.338C34.4384 28.7082 35.0746 28.6964 35.6837 28.7328C36.2718 28.768 36.8081 28.6547 37.319 28.5601C37.0032 26.9331 37.6617 26.014 39.0991 25.0047C40.2822 24.174 42.3884 23.6683 43.4021 23.9751C43.7206 25.1438 42.863 25.5718 43.0957 26.6736ZM16.027 30.3961C15.4833 31.1089 15.0547 32.6582 14.667 33.6391C14.2986 34.5715 13.76 36.5297 12.611 36.3323C11.8193 35.3365 13.1614 31.7491 13.5591 30.6863C14.2485 28.8442 15.0617 27.4287 15.9785 26.073C15.5611 26.0899 15.2144 26.3431 14.9003 26.0298C13.6416 24.7732 19.0369 22.3659 21.1655 25.2314C23.1005 27.836 19.2441 31.0871 16.2454 30.7425L16.027 30.3961ZM28.3271 31.0407C31.4132 30.7968 32.7991 31.4151 34.3953 31.1647C34.6408 31.1261 36.7077 30.3735 36.0629 31.3962C36.0165 31.4698 35.6897 31.7164 35.541 31.7997C33.3476 33.0309 30.9032 32.1513 27.6798 32.7359C26.62 32.9282 25.2882 33.5169 24.9348 33.0624C24.2118 32.1337 26.4684 30.3676 27.3222 29.4837L29.2749 27.4471C28.8722 27.4972 25.9477 28.0863 26.0717 26.8419C26.1138 26.4181 26.2077 26.5364 26.2974 26.4518C26.6701 26.161 31.181 25.8403 31.723 26.0076C31.871 26.7365 31.7828 26.9989 31.3883 27.5829C30.3195 29.1653 28.8629 30.1033 28.3271 31.0407ZM22.9865 32.1309C21.6729 32.5646 21.2422 30.618 22.222 28.8701C22.7447 27.9375 23.5861 26.8622 23.7851 26.5034C24.0376 26.0487 23.8865 25.9255 24.5101 25.9701C25.3608 27.1147 24.0835 29.3932 23.5129 30.5486C23.2217 31.1384 22.884 31.933 22.9865 32.1309ZM39.4452 33.1625C40.4028 33.087 43.1893 32.213 43.4243 32.595C43.6629 32.9832 40.4603 34.0843 39.5999 34.3675C38.7972 34.6317 38.7944 34.4921 38.5226 35.1842L37.0212 39.3011C36.7758 40.0102 36.8201 40.3932 36.1814 40.5C35.2893 38.8174 36.4784 36.5706 36.7229 35.0695C35.853 35.0246 35.1178 34.9932 35.1524 34.177C35.1806 33.5123 36.3893 33.7612 37.4313 33.6223C37.9677 32.9332 38.387 31.9833 38.8998 31.452C39.3115 31.0252 39.9754 30.9852 39.9501 31.8086C39.9394 32.1565 39.5628 32.8723 39.4452 33.1625ZM23.2344 38.1355L25.6608 37.5383C25.9067 37.2886 27.2858 32.6463 28.2538 33.2924L28.4228 33.7065C28.5041 34.3283 27.8141 36.0391 27.81 36.9041C28.3213 36.749 28.5141 36.5262 28.9369 36.7575C28.7883 37.3139 28.3601 37.4278 27.849 37.7971C26.772 38.5752 27.8189 42.7129 25.229 42.1511C24.9595 42.0927 24.9658 40.3348 25.229 39.2564C24.783 39.289 23.8981 39.7143 23.3588 39.8873C22.6852 40.1036 22.5292 40.2421 22.4406 40.5805C22.3851 40.7919 22.3558 41.0814 22.2428 41.5169C21.9287 42.7276 21.5995 45.2207 20.0666 44.5373C19.816 44.3561 19.7369 44.2413 19.6789 43.7409C19.6314 43.3318 19.6832 42.9175 19.7497 42.5132C19.8676 41.7961 20.0908 41.1522 20.2358 40.512C19.4411 40.5244 18.8272 40.4523 18.5798 39.5948C18.5958 38.5838 20.1389 38.7075 20.9451 38.5022C21.5623 37.4318 22.1331 35.333 23.4933 33.8776C25.4887 31.7426 23.3632 37.7117 23.2344 38.1355ZM34.954 39.0249C33.8625 39.4917 33.4387 38.1373 33.0599 37.5047C32.5387 38.0167 31.0594 39.9455 29.5442 39.3479C28.3128 38.8621 29.3074 37.0145 29.476 36.4214C29.7319 35.521 29.485 36.1187 29.0945 35.565C29.3889 35.0422 30.4529 34.909 30.8749 35.3964C31.3523 35.9476 31.0467 36.9993 30.9455 37.6642C31.981 37.3388 33.2649 35.9492 33.8617 35.0552C34.1242 34.6621 34.7172 34.1151 34.9017 34.3099C35.3799 34.8146 35.0433 35.7282 34.9348 36.5204C34.8623 37.0482 34.662 38.894 34.954 39.0249Z" fill="#EE3A43"></path> </g> <defs> <clipPath id="clip0_176_156036"> <rect width="58" height="54" fill="white" transform="translate(0.972656)"></rect> </clipPath> </defs> </svg> </header> <section class="language-selection"> <p>賰賷賮 鬲乇賷丿 兀賳 鬲乇賶 丕賱賲賵賯毓責<br>HOW WOULD YOU LIKE TO VIEW THE SITE?</p> <div class="language-buttons"> <label class="radio-option"> <span class="radio-custom"><input type="radio" name="language" value="en" checked></span> <span class="language-name"> ENGLISH</span> </label> <label class="radio-option"> <span class="radio-custom"><input type="radio" name="language" value="ar"></span> <span class="language-name"> 毓乇亘賷</span> </label> </div> </section> <section class="location-selection"> <p>兀賷賳 兀賳鬲 賲賵噩賵丿責<br>WHERE ARE YOU LOCATED?<br></p> <div class="radio-group"> <label class="radio-option"> <span class="radio-custom"><input type="radio" name="country" value="uae" checked></span> <span class="country-flag"><img src="https://flagsapi.com/AE/flat/48.png" alt="United Arab Emirates Flag"></span> <span class="country-name">United Arab Emirates</span> </label> <label class="radio-option"> <span class="radio-custom"><input type="radio" name="country" value="saudi"></span> <span class="country-flag"><img src="https://flagsapi.com/SA/flat/48.png" alt="Saudi Arabia Flag"></span> <span class="country-name">Saudi Arabia</span> </label> <label class="radio-option"> <span class="radio-custom"><input type="radio" name="country" value="https://bahrain.pizzahut.me/"></span> <span class="country-flag"><img src="https://flagsapi.com/BH/flat/48.png" alt="Bahrain Flag"></span> <span class="country-name">Bahrain</span> </label> <label class="radio-option"> <span class="radio-custom"><input type="radio" name="country" value="https://jeddah.pizzahut.me/"></span> <span class="country-flag"><img src="https://flagsapi.com/SA/flat/48.png" alt="Jeddah Flag"></span> <span class="country-name">Jeddah</span> </label> <label class="radio-option"> <span class="radio-custom"><input type="radio" name="country" value="https://qatar.pizzahut.me/"></span> <span class="country-flag"><img src="https://flagsapi.com/QA/flat/48.png" alt="Qatar Flag"></span> <span class="country-name">Qatar</span> </label> <label class="radio-option"> <span class="radio-custom"><input type="radio" name="country" value="https://oman.pizzahut.me/"></span> <span class="country-flag"><img src="https://flagsapi.com/OM/flat/48.png" alt="Oman Flag"></span> <span class="country-name">Oman</span> </label> </div> </section> <footer> <a id="continueBtn" class="button-continue" href="/" target="_self">CONTINUE</a> </footer> </div> <script> (function () { const brandName = 'pizzahut'; function updateContinueLink() { const selectedCountry = document.querySelector('input[name="country"]:checked').value; const selectedLanguage = document.querySelector('input[name="language"]:checked').value; const continueLink = document.getElementById('continueBtn'); if (selectedCountry.split('.').length > 1) { continueLink.href = selectedCountry; } else { continueLink.href = `https://${selectedCountry}.${brandName}.me/${selectedLanguage}/home`; } } document.querySelectorAll('input[name="language"], input[name="country"]').forEach(radio => { radio.addEventListener('change', updateContinueLink); }); updateContinueLink(); })(); </script> </body> </html>