మినిట్ టు మినిట్ అప్డేట్స్
<style> table { border-collapse: collapse; width:100%; font-family: 'Ramabhadra', 'Mallanna', sans-serif; font-size:14px} th { text-align: left} tr:not(:last-child) { border-bottom: 1.5px solid #ccc;} a { text-decoration: none; color: #1b7ad2} td, th { padding-bottom: 0.25em; padding-top: 0.25em} </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Telangana State Results</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet" /> </head> <style> * { padding: 0; margin: 0; } body { font-family: Noto Sans; } .headerElectionState { padding: 16px; border-radius: 4px; background: #fff; } .DistrictHead { color: var(--grey-title-base-900, #191919); font-size: 14px; font-style: normal; font-weight: 700; line-height: 20px; padding-bottom: 5px; } .updateTime { color: var(--grey-tertiary-base-500, #666); font-size: 12px; font-style: normal; font-weight: 400; line-height: 16px; } .partyName { color: var(--grey-title-base-900, #191919); font-family: Noto Sans; font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; } .won, .leading, .totalSeats { color: var(--grey-tertiary-base-500, #666); text-align: start; font-family: Noto Sans; font-size: 11px; font-style: normal; font-weight: 400; line-height: 16px; height: 32px; display: flex; align-items: center; padding-top: 5.5px; } .wonCount, .leadingCount, .totalSeatsWon { color: var(--grey-title-base-900, #191919); text-align: center; font-family: Noto Sans; font-size: 20px; font-style: normal; font-weight: 700; } .note { color: var(--grey-tertiary-base-500, #666); font-family: Noto Sans; font-size: 11px; font-style: normal; font-weight: 400; line-height: 16px; padding: 24px 0px 24px 0px; } .statusWon { color: #f8fcf8; font-family: Noto Sans; font-size: 12px; font-style: normal; font-weight: 700; line-height: 16px; border-radius: 8px; padding: 3px 8px; background-color: #15841b; } .declaredWon { display: flex; align-items: center; justify-content: center; } .buttonConstituencyResults { border-radius: 8px; background: var(--brand-primary-base-500, #fb0); border: none; font-family: Noto Sans; color: var(--grey-title-light-800, #323232); font-size: 12px; font-style: normal; font-weight: 700; line-height: 16px; padding: 8px 16px; display: none; } .buttonResults { display: flex; align-items: center; justify-content: center; } .partiesTableContent { display: flex; padding-top: 24px; } .partiesDiv { display: flex; justify-content: space-evenly; text-align: center; flex: 1; } .partiesDiv div { padding: 3px; margin-top: 5px; } .translations { padding-top: 80px; } .refresh { display: flex; align-items: center; color: var(--blue-secondary-base-500, #0174d3); font-family: Noto Sans; font-size: 12px; font-style: normal; font-weight: 700; line-height: 16px; flex-wrap: wrap; gap: 8px; } .iconRefresh { display: flex; align-items: center; gap: 2px; } .material-icons { font-size: 18px; } .refreshing { color: var(--grey-tertiary-base-500, #666); font-size: 12px; font-style: normal; font-weight: 400; line-height: 16px; } .refreshAnimation { display: flex; align-items: center; gap: 2px; } .flexRefresh { display: flex; align-items: center; } .loader { border: 1px solid #ffffff; border-radius: 50%; border-top: 2px solid #3498db; width: 10px; height: 10px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .check { padding-right: 2px; color: var(--blue-secondary-base-500, #0174d3); padding-top: 5px; } .failed { display: flex; align-items: center; color: var(--grey-tertiary-base-500, #666); font-family: Noto Sans; font-size: 12px; font-style: normal; font-weight: 400; line-height: 16px; gap: 4px; } .svgDiv { padding-top: 4px; } </style> <body> <div class="headerElectionState" id="headerElectionState"> <div class="stateTopHeader" id="stateTopHeader"></div> <div class="partiesTableContent"> <div id="translations" class="translations"></div> <div id="partiesDiv" class="partiesDiv"></div> </div> <div class="note" id="note"></div> <div class="buttonResults"> <button class="buttonConstituencyResults" id="buttonConstituencyResults" onclick="handleConstituencyResults()" ></button> </div> </div> <script> var lastUpdatedTime; var isAPIFailed = false; var stateLevelCacheData; var onRefresh = true; var isOnline = false; window.addEventListener("online", () => (isOnline = false)); window.addEventListener("offline", () => (isOnline = true)); async function fetchStateLevelData() { try { var url = "https://api.getlokalapp.com/elections/state_level_results/?location_id=4"; const response = await fetch(url); if (response.status != 200) { isAPIFailed = true; stateLevelCacheData = data; lastUpdatedTime = Date.now(); } const data = await response.json(); lastUpdatedTime = Date.now(); isAPIFailed = false; stateLevelCacheData = data; return data; } catch (error) { isAPIFailed = true; console.error("Error fetching data:", error); } } const pollingInterval = 300000; function pollData() { setTimeout(() => { fetchData(); pollData(); }, pollingInterval); } pollData(); function runUpdatedTimeTimer(stateLevelData) { setInterval(() => { populateStateLevelData(stateLevelCacheData); runUpdatedTimeTimer(stateLevelData); }, 60000); } function handleConstituencyResults() { actionType = "internal_url"; actionData = "lokal://getlokalapp.com/view/content_category/3834"; Android.executeAction(actionType, actionData); } function calculateElapsedTime(lastUpdatedTimestamp) { const currentTime = new Date(); const lastUpdatedTime = new Date(lastUpdatedTimestamp); const timeDifferenceInMilliseconds = currentTime - lastUpdatedTime; const minutes = Math.floor(timeDifferenceInMilliseconds / 60000); return minutes; } async function fetchData() { let stateLevelData = await fetchStateLevelData(); console.log("object", stateLevelData); if (!stateLevelData) { stateLevelData = stateLevelCacheData; } if (stateLevelData) { document.getElementById("headerElectionState").style.display = "block"; runUpdatedTimeTimer(stateLevelData); populateStateLevelData(stateLevelData); } else { document.getElementById("headerElectionState").style.display = "none"; } } function populateStateLevelData(stateLevelData) { const stateTopHeader = document.getElementById("stateTopHeader"); const partiesDiv = document.getElementById("partiesDiv"); const translations = document.getElementById("translations"); const buttonConstituencyResults = document.getElementById( "buttonConstituencyResults" ); partiesDiv.innerHTML = ""; const minutesAgo = calculateElapsedTime(lastUpdatedTime); let translationString; if (minutesAgo === 0) { translationString = stateLevelData?.translations?.updated_just_now; } else { translationString = stateLevelData?.last_updated; } let updatedTranslation; if (stateLevelData) { updatedTranslation = translationString.replace( "${minutes}", minutesAgo ); } stateTopHeader.innerHTML = ` <div class="DistrictTitle"> <div class="DistrictHead">${stateLevelData?.title}</div> ${ !isAPIFailed ? `<div class="flexRefresh"> ${ stateLevelData?.result_declared ? `<div></div>` : ` <div> ${ minutesAgo === 0 && !onRefresh ? ` <div class="check"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> <mask id="mask0_1348_746" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16"> <rect width="16" height="16" fill="#D9D9D9"/> </mask> <g mask="url(#mask0_1348_746)"> <path d="M6.36661 11.7167C6.27772 11.7167 6.19438 11.7028 6.11661 11.675C6.03883 11.6472 5.96661 11.6 5.89994 11.5333L3.03327 8.66666C2.91105 8.54444 2.85272 8.38611 2.85827 8.19166C2.86383 7.99722 2.92772 7.83889 3.04994 7.71666C3.17216 7.59444 3.32772 7.53333 3.51661 7.53333C3.70549 7.53333 3.86105 7.59444 3.98327 7.71666L6.36661 10.1L12.0166 4.45C12.1388 4.32777 12.2972 4.26666 12.4916 4.26666C12.686 4.26666 12.8444 4.32777 12.9666 4.45C13.0888 4.57222 13.1499 4.73055 13.1499 4.925C13.1499 5.11944 13.0888 5.27777 12.9666 5.4L6.83327 11.5333C6.76661 11.6 6.69438 11.6472 6.61661 11.675C6.53883 11.7028 6.45549 11.7167 6.36661 11.7167Z" fill="#0174D3"/> </g> </svg> </div> ` : "" } </div> <div class="updateTime">${updatedTranslation}</div> ` } </div>` : `<div class="refresh"> ${ isOnline ? `<div class="failed"> <div class="svgDiv"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> <mask id="mask0_1151_2839" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16"> <rect width="16" height="16" fill="#D9D9D9"/> </mask> <g mask="url(#mask0_1151_2839)"> <path d="M7.99992 11.3333C8.18881 11.3333 8.34714 11.2694 8.47492 11.1416C8.6027 11.0138 8.66659 10.8555 8.66659 10.6666C8.66659 10.4777 8.6027 10.3194 8.47492 10.1916C8.34714 10.0638 8.18881 9.99992 7.99992 9.99992C7.81103 9.99992 7.6527 10.0638 7.52492 10.1916C7.39714 10.3194 7.33325 10.4777 7.33325 10.6666C7.33325 10.8555 7.39714 11.0138 7.52492 11.1416C7.6527 11.2694 7.81103 11.3333 7.99992 11.3333ZM7.99992 8.66659C8.18881 8.66659 8.34714 8.6027 8.47492 8.47492C8.6027 8.34714 8.66659 8.18881 8.66659 7.99992V5.33325C8.66659 5.14436 8.6027 4.98603 8.47492 4.85825C8.34714 4.73047 8.18881 4.66659 7.99992 4.66659C7.81103 4.66659 7.6527 4.73047 7.52492 4.85825C7.39714 4.98603 7.33325 5.14436 7.33325 5.33325V7.99992C7.33325 8.18881 7.39714 8.34714 7.52492 8.47492C7.6527 8.6027 7.81103 8.66659 7.99992 8.66659ZM7.99992 14.6666C7.0777 14.6666 6.21103 14.4916 5.39992 14.1416C4.58881 13.7916 3.88325 13.3166 3.28325 12.7166C2.68325 12.1166 2.20825 11.411 1.85825 10.5999C1.50825 9.78881 1.33325 8.92214 1.33325 7.99992C1.33325 7.0777 1.50825 6.21103 1.85825 5.39992C2.20825 4.58881 2.68325 3.88325 3.28325 3.28325C3.88325 2.68325 4.58881 2.20825 5.39992 1.85825C6.21103 1.50825 7.0777 1.33325 7.99992 1.33325C8.92214 1.33325 9.78881 1.50825 10.5999 1.85825C11.411 2.20825 12.1166 2.68325 12.7166 3.28325C13.3166 3.88325 13.7916 4.58881 14.1416 5.39992C14.4916 6.21103 14.6666 7.0777 14.6666 7.99992C14.6666 8.92214 14.4916 9.78881 14.1416 10.5999C13.7916 11.411 13.3166 12.1166 12.7166 12.7166C12.1166 13.3166 11.411 13.7916 10.5999 14.1416C9.78881 14.4916 8.92214 14.6666 7.99992 14.6666ZM7.99992 13.3333C9.48881 13.3333 10.7499 12.8166 11.7833 11.7833C12.8166 10.7499 13.3333 9.48881 13.3333 7.99992C13.3333 6.51103 12.8166 5.24992 11.7833 4.21659C10.7499 3.18325 9.48881 2.66659 7.99992 2.66659C6.51103 2.66659 5.24992 3.18325 4.21659 4.21659C3.18325 5.24992 2.66659 6.51103 2.66659 7.99992C2.66659 9.48881 3.18325 10.7499 4.21659 11.7833C5.24992 12.8166 6.51103 13.3333 7.99992 13.3333Z" fill="#989898"/> </g> </svg> </div> ${stateLevelData?.translations?.refresh_failed} </div> ` : `<div class="updateTime">${updatedTranslation}</div>` } <div class="iconRefresh"> <i class="material-icons">refresh</i> <p>${ stateLevelData?.translations?.refresh }</p> </div> </div>` } </div> `; translations.innerHTML = ""; if (!stateLevelData?.result_declared) { translations.innerHTML += `<div class="leading">${stateLevelData?.translations?.leading}<div>`; } translations.innerHTML += ` <div class="won">${stateLevelData?.translations?.won}<div>`; if (!stateLevelData?.result_declared) { translations.innerHTML += `<div class="totalSeats">${stateLevelData?.translations?.total_seats}<div>`; } stateLevelData?.parties?.map((party, index) => { const partyDiv = document.createElement("div"); if (party?.is_won) { partyDiv.style.backgroundColor = "#E6FFE9"; partyDiv.style.border = "1px solid #028A12"; partyDiv.style.borderRadius = "8px"; } partyDiv.innerHTML = ` <img src=${ party?.logo } style="border-radius:50%" width="28" height="28"/> <div class="partyName">${party?.name}</div> ${ !stateLevelData?.result_declared ? `<div class="leadingCount">${party?.leading}</div>` : "" } <div class="wonCount">${party?.won}</div> ${ !stateLevelData?.result_declared ? `<div class="totalSeatsWon">${party?.total_seats}</div>` : "" } <div class="declaredWon">${ party.is_won ? `<div class="statusWon">${stateLevelData?.translations?.won}</div>` : `<div></div>` }</div> `; partiesDiv.appendChild(partyDiv); }); note.innerHTML = `${stateLevelData?.note}`; buttonConstituencyResults.innerHTML = `${stateLevelData?.translations?.button_text}`; const iconRefreshDiv = document.querySelector(".iconRefresh"); if (iconRefreshDiv) { iconRefreshDiv.onclick = function () { const refreshDiv = document.querySelector(".refresh"); refreshDiv.style.display = "block"; refreshDiv.innerHTML = ` <div class="refreshAnimation"> <p class="loader"></p> <p class="refreshing">${stateLevelData?.translations?.refreshing}</p> </div> `; onRefresh = false; fetchData(); }; } onRefresh = true; } fetchData(); </script> </body> </html> <script type="text/javascript"> function validate(phone) { // const regex = /^\(?([0-9]{3,5})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4,5})$/; // const regex = /^(?([0-9]{3,5})\)?[-. ]*([0-9]{3})[-. ]*([0-9]{4,5})$/; const regex = /^[+\(\)\-. ,0-9]{3,}$/; return regex.test(phone); } phonenumbers = document.getElementsByTagName("a"); for (var i = 0; i < phonenumbers.length; i++) { if(validate(phonenumbers[i].innerHTML)){ phonenumbers[i].addEventListener('click',fn, false); } } function fn(ev){ ev.preventDefault(); Android.clickCall(this.innerHTML); } </script>
