Skip to content

Instantly share code, notes, and snippets.

@mkhmylife

mkhmylife/NewsFeedScreen.tsx

Created May 29, 2023 08:36
Show Gist options
  • Save mkhmylife/8983003700088607d9dcfd55c7cda28a to your computer and use it in GitHub Desktop.
Save mkhmylife/8983003700088607d9dcfd55c7cda28a to your computer and use it in GitHub Desktop.
Download ZIP
NewsFeedScreen.tsx
Raw
NewsFeedScreen.tsx
import {ActivityIndicator, Linking, Platform, ScrollView, Share, StyleSheet, TouchableOpacity} from 'react-native';
import WebView, {WebViewNavigation} from "react-native-webview";
import { View, Text } from '../components/Themed';
import Layout from "../constants/Layout";
import Colors from "../constants/Colors";
import React, {useEffect, useMemo, useRef, useState} from "react";
import {NativeStackScreenProps} from "@react-navigation/native-stack";
import {RootStackParamList} from "../types";
import {BlogArticle, getBlogArticle} from "../services/news";
import ImageBlurLoading from "react-native-image-blur-loading";
import {logEvent} from "../services/tracking";
import {Feather} from "@expo/vector-icons";
import {useNavigation} from "@react-navigation/native";
import * as WebBrowser from 'expo-web-browser';
import ChargersSlider from "../components/ChargersSlider";
import {BannerAdSize, GAMBannerAd} from "react-native-google-mobile-ads";
import {bannerAdUnitIDChargerMap} from "../services/admod";
import {useShowAd} from "../services/supporter";
const css = `<style>*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,Noto Sans HK,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246/0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.prose{color:var(--tw-prose-body);max-width:65ch}.prose :where([class~=lead]):not(:where([class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose] *)){color:inherit;text-decoration:underline;font-weight:inherit}.prose :where(strong):not(:where([class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(ol):not(:where([class~=not-prose] *)){list-style-type:decimal;padding-left:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose] *)){list-style-type:disc;padding-left:1.625em}.prose :where(ol>li):not(:where([class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(hr):not(:where([class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-left-width:.25rem;border-left-color:var(--tw-prose-quote-borders);quotes:"\\201C""\\201D""\\2018""\\2019";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose :where(h1 strong):not(:where([class~=not-prose] *)){font-weight:900}.prose :where(h2):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose :where(h2 strong):not(:where([class~=not-prose] *)){font-weight:800}.prose :where(h3):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:500;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose] *)){font-weight:500}.prose :where(h4):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:500;margin-top:1.5em;margin-bottom:.5em;line-height:1.5;font-size:1.3em}.prose :where(h4 strong):not(:where([class~=not-prose] *)){font-weight:500;font-size:1.3em}.prose :where(figure>*):not(:where([class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose :where(code):not(:where([class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em}.prose :where(code):not(:where([class~=not-prose] *)):before{content:"\`"}.prose :where(code):not(:where([class~=not-prose] *)):after{content:"\`"}.prose :where(a code):not(:where([class~=not-prose] *)){color:var(--tw-prose-links)}.prose :where(pre):not(:where([class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding:.8571429em 1.1428571em}.prose :where(pre code):not(:where([class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose] *)){width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-right:.5714286em;padding-bottom:.5714286em;padding-left:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose] *)){vertical-align:baseline;padding:.5714286em}.prose{--tw-prose-body:#374151;--tw-prose-headings:#111827;--tw-prose-lead:#4b5563;--tw-prose-links:#111827;--tw-prose-bold:#111827;--tw-prose-counters:#6b7280;--tw-prose-bullets:#d1d5db;--tw-prose-hr:#e5e7eb;--tw-prose-quotes:#111827;--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-code:#111827;--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:#d1d5db;--tw-prose-td-borders:#e5e7eb;--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:rgb(0 0 0/50%);--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:1rem;line-height:1.75}.prose :where(p):not(:where([class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em;font-size:17px}.prose :where(img):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em;width:100%}.prose :where(video):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(figure):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(h2 code):not(:where([class~=not-prose] *)){font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose] *)){font-size:.9em}.prose :where(li):not(:where([class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose] *)){padding-left:.375em}.prose :where(ul>li):not(:where([class~=not-prose] *)){padding-left:.375em}.prose>:where(ul>li p):not(:where([class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose>:where(ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose>:where(ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose>:where(ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose>:where(ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(hr+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose] *)){padding-left:0}.prose :where(thead th:last-child):not(:where([class~=not-prose] *)){padding-right:0}.prose :where(tbody td:first-child):not(:where([class~=not-prose] *)){padding-left:0}.prose :where(tbody td:last-child):not(:where([class~=not-prose] *)){padding-right:0}.prose>:where(:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose>:where(:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-stone{--tw-prose-body:#44403c;--tw-prose-headings:#1c1917;--tw-prose-lead:#57534e;--tw-prose-links:#1c1917;--tw-prose-bold:#1c1917;--tw-prose-counters:#78716c;--tw-prose-bullets:#d6d3d1;--tw-prose-hr:#e7e5e4;--tw-prose-quotes:#1c1917;--tw-prose-quote-borders:#e7e5e4;--tw-prose-captions:#78716c;--tw-prose-code:#1c1917;--tw-prose-pre-code:#e7e5e4;--tw-prose-pre-bg:#292524;--tw-prose-th-borders:#d6d3d1;--tw-prose-td-borders:#e7e5e4;--tw-prose-invert-body:#d6d3d1;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#a8a29e;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#a8a29e;--tw-prose-invert-bullets:#57534e;--tw-prose-invert-hr:#44403c;--tw-prose-invert-quotes:#f5f5f4;--tw-prose-invert-quote-borders:#44403c;--tw-prose-invert-captions:#a8a29e;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d6d3d1;--tw-prose-invert-pre-bg:rgb(0 0 0/50%);--tw-prose-invert-th-borders:#57534e;--tw-prose-invert-td-borders:#44403c}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-y-0{top:0;bottom:0}.inset-x-0{left:0;right:0}.left-0{left:0}.bottom-0{bottom:0}.top-0{top:0}.right-0{right:0}.-top-3{top:-.75rem}.bottom-2{bottom:.5rem}.right-2{right:.5rem}.top-10{top:2.5rem}.bottom-4{bottom:1rem}.right-4{right:1rem}.top-4{top:1rem}.left-4{left:1rem}.z-10{z-index:10}.z-50{z-index:50}.order-2{order:2}.order-1{order:1}.col-span-12{grid-column:span 12/span 12}.float-left{float:left}.-m-3{margin:-.75rem}.mx-auto{margin-left:auto;margin-right:auto}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-10{margin-top:2.5rem;margin-bottom:2.5rem}.my-40{margin-top:10rem;margin-bottom:10rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-4{margin-top:1rem;margin-bottom:1rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.-mx-1{margin-left:-.25rem;margin-right:-.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.-my-2{margin-top:-.5rem;margin-bottom:-.5rem}.mt-10{margin-top:2.5rem}.mb-5{margin-bottom:1.25rem}.mb-10{margin-bottom:2.5rem}.mb-3{margin-bottom:.75rem}.mt-4{margin-top:1rem}.mb-6{margin-bottom:1.5rem}.mr-10{margin-right:2.5rem}.mb-16{margin-bottom:4rem}.mb-4{margin-bottom:1rem}.ml-6{margin-left:1.5rem}.mb-0{margin-bottom:0}.mt-6{margin-top:1.5rem}.mt-2{margin-top:.5rem}.mt-8{margin-top:2rem}.mb-8{margin-bottom:2rem}.mr-2{margin-right:.5rem}.mt-5{margin-top:1.25rem}.mr-3{margin-right:.75rem}.mb-1{margin-bottom:.25rem}.mr-4{margin-right:1rem}.mb-2{margin-bottom:.5rem}.mt-3{margin-top:.75rem}.mb-12{margin-bottom:3rem}.mt-1{margin-top:.25rem}.ml-3{margin-left:.75rem}.mt-7{margin-top:1.75rem}.mb-7{margin-bottom:1.75rem}.ml-1{margin-left:.25rem}.mr-1{margin-right:.25rem}.-mr-2{margin-right:-.5rem}.mr-8{margin-right:2rem}.ml-8{margin-left:2rem}.ml-5{margin-left:1.25rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-video{aspect-ratio:16/9}.h-full{height:100%}.h-8{height:2rem}.h-12{height:3rem}.h-5{height:1.25rem}.h-48{height:12rem}.h-28{height:7rem}.h-4{height:1rem}.h-56{height:14rem}.h-16{height:4rem}.h-6{height:1.5rem}.h-2\\.5{height:.625rem}.h-2{height:.5rem}.h-32{height:8rem}.h-9{height:2.25rem}.min-h-full{min-height:100%}.w-full{width:100%}.w-32{width:8rem}.w-44{width:11rem}.w-1\\/3{width:33.333333%}.w-2\\/3{width:66.666667%}.w-8{width:2rem}.w-12{width:3rem}.w-4{width:1rem}.w-max{width:-webkit-max-content;width:-moz-max-content;width:max-content}.w-5{width:1.25rem}.w-4\\/5{width:80%}.w-3\\.5{width:.875rem}.w-3{width:.75rem}.w-24{width:6rem}.w-6{width:1.5rem}.w-36{width:9rem}.w-60{width:15rem}.w-2\\.5{width:.625rem}.w-2{width:.5rem}.w-1\\/2{width:50%}.w-auto{width:auto}.max-w-5xl{max-width:64rem}.max-w-md{max-width:28rem}.max-w-7xl{max-width:80rem}.flex-shrink-0{flex-shrink:0}.origin-top-right{transform-origin:top right}.scale-75{--tw-scale-x:.75;--tw-scale-y:.75}.scale-75,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@-webkit-keyframes pulse{50%{opacity:.5}}@keyframes pulse{50%{opacity:.5}}.animate-pulse{-webkit-animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.resize-none{resize:none}.snap-x{-ms-scroll-snap-type:x var(--tw-scroll-snap-strictness);scroll-snap-type:x var(--tw-scroll-snap-strictness)}.snap-start{scroll-snap-align:start}.snap-center{scroll-snap-align:center}.list-disc{list-style-type:disc}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-flow-row-dense{grid-auto-flow:row dense}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-content-center{place-content:center}.content-center{align-content:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-20{gap:5rem}.gap-10{gap:2.5rem}.gap-6{gap:1.5rem}.gap-1{gap:.25rem}.gap-8{gap:2rem}.gap-5{gap:1.25rem}.gap-4{gap:1rem}.gap-y-8{row-gap:2rem}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.-space-y-px>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(-1px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(-1px * var(--tw-space-y-reverse))}.space-x-0>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0px * var(--tw-space-x-reverse));margin-left:calc(0px * calc(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2.5rem * var(--tw-space-y-reverse))}.space-x-5>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.25rem * var(--tw-space-x-reverse));margin-left:calc(1.25rem * calc(1 - var(--tw-space-x-reverse)))}.divide-y-2>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(2px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(2px * var(--tw-divide-y-reverse))}.divide-gray-50>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(249 250 251/var(--tw-divide-opacity))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.rounded-xl{border-radius:2rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded{border-radius:.25rem}.rounded-\\[12px\\]{border-radius:12px}.rounded-sm{border-radius:.125rem}.rounded-\\[24px\\]{border-radius:24px}.rounded-t-md{border-top-left-radius:.375rem;border-top-right-radius:.375rem}.rounded-b-md{border-bottom-right-radius:.375rem;border-bottom-left-radius:.375rem}.border{border-width:1px}.border-b-2{border-bottom-width:2px}.border-t{border-top-width:1px}.border-r{border-right-width:1px}.border-solid{border-style:solid}.border-transparent{border-color:transparent}.border-primary{--tw-border-opacity:1;border-color:rgb(250 169 26/var(--tw-border-opacity))}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-\\[\\#ff424d\\]{--tw-border-opacity:1;border-color:rgb(255 66 77/var(--tw-border-opacity))}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity))}.border-gray-400{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity))}.border-darkBlue{--tw-border-opacity:1;border-color:rgb(0 37 71/var(--tw-border-opacity))}.border-\\[\\#777\\]{--tw-border-opacity:1;border-color:rgb(119 119 119/var(--tw-border-opacity))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity))}.border-lime-600{--tw-border-opacity:1;border-color:rgb(101 163 13/var(--tw-border-opacity))}.border-sky-500{--tw-border-opacity:1;border-color:rgb(14 165 233/var(--tw-border-opacity))}.border-neutral-400{--tw-border-opacity:1;border-color:rgb(163 163 163/var(--tw-border-opacity))}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-grey{--tw-border-opacity:1;border-color:rgb(103 111 138/var(--tw-border-opacity))}.border-\\[\\#888\\]{--tw-border-opacity:1;border-color:rgb(136 136 136/var(--tw-border-opacity))}.border-r-\\[\\#DAE3F0\\]{--tw-border-opacity:1;border-right-color:rgb(218 227 240/var(--tw-border-opacity))}.bg-primary{--tw-bg-opacity:1;background-color:rgb(250 169 26/var(--tw-bg-opacity))}.bg-\\[\\#F3F1EA\\]{--tw-bg-opacity:1;background-color:rgb(243 241 234/var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity))}.bg-\\[\\#EB5254\\]{--tw-bg-opacity:1;background-color:rgb(235 82 84/var(--tw-bg-opacity))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.bg-\\[\\#ff424d\\]{--tw-bg-opacity:1;background-color:rgb(255 66 77/var(--tw-bg-opacity))}.bg-amber-200{--tw-bg-opacity:1;background-color:rgb(253 230 138/var(--tw-bg-opacity))}.bg-\\[\\#EAEEF2\\]{--tw-bg-opacity:1;background-color:rgb(234 238 242/var(--tw-bg-opacity))}.bg-darkBlue{--tw-bg-opacity:1;background-color:rgb(0 37 71/var(--tw-bg-opacity))}.bg-\\[\\#E51837\\]{--tw-bg-opacity:1;background-color:rgb(229 24 55/var(--tw-bg-opacity))}.bg-\\[\\#009ADA\\]{--tw-bg-opacity:1;background-color:rgb(0 154 218/var(--tw-bg-opacity))}.bg-\\[\\#1F2F57\\]{--tw-bg-opacity:1;background-color:rgb(31 47 87/var(--tw-bg-opacity))}.bg-\\[\\#FFC128\\]{--tw-bg-opacity:1;background-color:rgb(255 193 40/var(--tw-bg-opacity))}.bg-\\[\\#F3F3F3\\]{--tw-bg-opacity:1;background-color:rgb(243 243 243/var(--tw-bg-opacity))}.bg-\\[\\#0E8C38\\]{--tw-bg-opacity:1;background-color:rgb(14 140 56/var(--tw-bg-opacity))}.bg-\\[\\#CF0B0B\\]{--tw-bg-opacity:1;background-color:rgb(207 11 11/var(--tw-bg-opacity))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity))}.bg-lime-600{--tw-bg-opacity:1;background-color:rgb(101 163 13/var(--tw-bg-opacity))}.bg-sky-500{--tw-bg-opacity:1;background-color:rgb(14 165 233/var(--tw-bg-opacity))}.bg-neutral-400{--tw-bg-opacity:1;background-color:rgb(163 163 163/var(--tw-bg-opacity))}.bg-\\[\\#f3f3f3\\]{--tw-bg-opacity:1;background-color:rgb(243 243 243/var(--tw-bg-opacity))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity))}.bg-\\[\\#F7F7F7\\]{--tw-bg-opacity:1;background-color:rgb(247 247 247/var(--tw-bg-opacity))}.bg-\\[\\#363636\\]{--tw-bg-opacity:1;background-color:rgb(54 54 54/var(--tw-bg-opacity))}.bg-\\[\\#202020\\]{--tw-bg-opacity:1;background-color:rgb(32 32 32/var(--tw-bg-opacity))}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.from-primary{--tw-gradient-from:#faa91a;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgb(250 169 26/0))}.from-transparent{--tw-gradient-from:transparent;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}.to-orange{--tw-gradient-to:#fa861a}.to-\\[\\#002547\\]{--tw-gradient-to:#002547}.to-\\[\\#003A47\\]{--tw-gradient-to:#003a47}.to-\\[\\#470000\\]{--tw-gradient-to:#470000}.bg-contain{background-size:contain}.bg-center{background-position:50%}.bg-no-repeat{background-repeat:no-repeat}.fill-current{fill:currentColor}.object-cover{-o-object-fit:cover;object-fit:cover}.p-8{padding:2rem}.p-5{padding:1.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-3{padding:.75rem}.p-10{padding:2.5rem}.py-52{padding-top:13rem;padding-bottom:13rem}.py-12{padding-top:3rem;padding-bottom:3rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-20{padding-left:5rem;padding-right:5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-7{padding-top:1.75rem;padding-bottom:1.75rem}.py-16{padding-top:4rem;padding-bottom:4rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-8{padding-left:2rem;padding-right:2rem}.py-48{padding-top:12rem;padding-bottom:12rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.px-0{padding-left:0;padding-right:0}.pt-20{padding-top:5rem}.pb-3{padding-bottom:.75rem}.pl-8{padding-left:2rem}.pb-20{padding-bottom:5rem}.pl-3{padding-left:.75rem}.pl-5{padding-left:1.25rem}.pb-5{padding-bottom:1.25rem}.pb-10{padding-bottom:2.5rem}.pt-5{padding-top:1.25rem}.pb-8{padding-bottom:2rem}.pr-8{padding-right:2rem}.pl-4{padding-left:1rem}.pt-10{padding-top:2.5rem}.pt-8{padding-top:2rem}.pb-6{padding-bottom:1.5rem}.text-center{text-align:center}.text-right{text-align:right}.align-top{vertical-align:top}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.text-\\[18px\\]{font-size:18px}.text-\\[15px\\]{font-size:15px}.text-\\[17px\\]{font-size:17px}.font-medium{font-weight:500}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-6{line-height:1.5rem}.leading-tight{line-height:1.25}.leading-8{line-height:2rem}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-primary{--tw-text-opacity:1;color:rgb(250 169 26/var(--tw-text-opacity))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.text-green-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity))}.text-\\[\\#EB5254\\]{--tw-text-opacity:1;color:rgb(235 82 84/var(--tw-text-opacity))}.text-blue-800{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-\\[\\#363636\\]{--tw-text-opacity:1;color:rgb(54 54 54/var(--tw-text-opacity))}.text-grey{--tw-text-opacity:1;color:rgb(103 111 138/var(--tw-text-opacity))}.text-\\[\\#5c5c5c\\]{--tw-text-opacity:1;color:rgb(92 92 92/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-\\[\\#676767\\]{--tw-text-opacity:1;color:rgb(103 103 103/var(--tw-text-opacity))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-\\[\\#777\\]{--tw-text-opacity:1;color:rgb(119 119 119/var(--tw-text-opacity))}.text-grey2{--tw-text-opacity:1;color:rgb(54 54 54/var(--tw-text-opacity))}.text-\\[\\#676F8A\\]{--tw-text-opacity:1;color:rgb(103 111 138/var(--tw-text-opacity))}.text-\\[\\#757575\\]{--tw-text-opacity:1;color:rgb(117 117 117/var(--tw-text-opacity))}.text-\\[\\#CECECE\\]{--tw-text-opacity:1;color:rgb(206 206 206/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-\\[\\#888\\]{--tw-text-opacity:1;color:rgb(136 136 136/var(--tw-text-opacity))}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.placeholder-gray-500::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(107 114 128/var(--tw-placeholder-opacity))}.placeholder-gray-500:-ms-input-placeholder{--tw-placeholder-opacity:1;color:rgb(107 114 128/var(--tw-placeholder-opacity))}.placeholder-gray-500::placeholder{--tw-placeholder-opacity:1;color:rgb(107 114 128/var(--tw-placeholder-opacity))}.opacity-0{opacity:0}.opacity-80{opacity:.8}.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0/0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0/0.1),0 4px 6px -4px rgb(0 0 0/0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-black{--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0/var(--tw-ring-opacity))}.ring-opacity-5{--tw-ring-opacity:0.05}.drop-shadow-lg{--tw-drop-shadow:drop-shadow(0 10px 8px rgb(0 0 0/0.04)) drop-shadow(0 4px 3px rgb(0 0 0/0.1))}.drop-shadow-lg,.drop-shadow-md{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-md{--tw-drop-shadow:drop-shadow(0 4px 3px rgb(0 0 0/0.07)) drop-shadow(0 2px 2px rgb(0 0 0/0.06))}.drop-shadow-sm{--tw-drop-shadow:drop-shadow(0 1px 1px rgb(0 0 0/0.05))}.drop-shadow-sm,.grayscale{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale:grayscale(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition{transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.duration-200{transition-duration:.2s}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.swiper{--swiper-navigation-size:18px;--swiper-theme-color:#fff}.swiper .swiper-button-next,.swiper .swiper-button-prev{border-radius:200px;background:rgba(0,0,0,.8);width:50px;height:50px;top:50%;margin-top:0;transform:translateY(-50%)}@media only screen and (max-width:768px){.swiper .swiper-button-next,.swiper .swiper-button-prev{display:none}}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{display:none}.blog-single .wp-block-image{max-width:100%}.blog-single .wp-block-image img{border-radius:10px}.blog-single .wp-block-image figcaption{text-align:center;color:gray}.blog-single .wp-block-image figcaption a{text-decoration:underline}.blog-single ul{list-style:disc}.blog-single h3{font-size:1.6em}.placeholder\\:text-gray-300::-moz-placeholder{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.placeholder\\:text-gray-300:-ms-input-placeholder{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.placeholder\\:text-gray-300::placeholder{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.last\\:hidden:last-child{display:none}.checked\\:border-darkBlue:checked{--tw-border-opacity:1;border-color:rgb(0 37 71/var(--tw-border-opacity))}.checked\\:bg-darkBlue:checked{--tw-bg-opacity:1;background-color:rgb(0 37 71/var(--tw-bg-opacity))}.hover\\:cursor-pointer:hover{cursor:pointer}.hover\\:gap-2:hover{gap:.5rem}.hover\\:border-primary:hover{--tw-border-opacity:1;border-color:rgb(250 169 26/var(--tw-border-opacity))}.hover\\:border-gray-500:hover{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity))}.hover\\:bg-primary:hover{--tw-bg-opacity:1;background-color:rgb(250 169 26/var(--tw-bg-opacity))}.hover\\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.hover\\:bg-darkBlue:hover{--tw-bg-opacity:1;background-color:rgb(0 37 71/var(--tw-bg-opacity))}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.hover\\:bg-gradient-to-r:hover{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.hover\\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\\:text-indigo-500:hover{--tw-text-opacity:1;color:rgb(99 102 241/var(--tw-text-opacity))}.hover\\:text-\\[\\#ff424d\\]:hover{--tw-text-opacity:1;color:rgb(255 66 77/var(--tw-text-opacity))}.hover\\:text-darkBlue:hover{--tw-text-opacity:1;color:rgb(0 37 71/var(--tw-text-opacity))}.hover\\:text-primary:hover{--tw-text-opacity:1;color:rgb(250 169 26/var(--tw-text-opacity))}.hover\\:text-gray-500:hover{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.hover\\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.hover\\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.hover\\:drop-shadow-lg:hover{--tw-drop-shadow:drop-shadow(0 10px 8px rgb(0 0 0/0.04)) drop-shadow(0 4px 3px rgb(0 0 0/0.1))}.hover\\:drop-shadow-lg:hover,.hover\\:grayscale-0:hover{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\\:grayscale-0:hover{--tw-grayscale:grayscale(0)}.focus\\:z-10:focus{z-index:10}.focus\\:border-indigo-500:focus{--tw-border-opacity:1;border-color:rgb(99 102 241/var(--tw-border-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\\:ring-inset:focus{--tw-ring-inset:inset}.focus\\:ring-indigo-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(99 102 241/var(--tw-ring-opacity))}.group:last-child .group-last\\:hidden{display:none}.group:hover .group-hover\\:visible{visibility:visible}.group:hover .group-hover\\:scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:border-primary{--tw-border-opacity:1;border-color:rgb(250 169 26/var(--tw-border-opacity))}.group:hover .group-hover\\:text-\\[\\#757575\\]{--tw-text-opacity:1;color:rgb(117 117 117/var(--tw-text-opacity))}.group:hover .group-hover\\:opacity-100{opacity:1}@media (min-width:640px){.sm\\:col-span-6{grid-column:span 6/span 6}.sm\\:p-7{padding:1.75rem}.sm\\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:768px){.md\\:order-1{order:1}.md\\:order-2{order:2}.md\\:col-span-3{grid-column:span 3/span 3}.md\\:col-span-6{grid-column:span 6/span 6}.md\\:mx-0{margin-left:0;margin-right:0}.md\\:ml-3{margin-left:.75rem}.md\\:mr-0{margin-right:0}.md\\:mb-0{margin-bottom:0}.md\\:mr-5{margin-right:1.25rem}.md\\:mt-0{margin-top:0}.md\\:mb-5{margin-bottom:1.25rem}.md\\:ml-1{margin-left:.25rem}.md\\:ml-2{margin-left:.5rem}.md\\:mb-3{margin-bottom:.75rem}.md\\:mb-8{margin-bottom:2rem}.md\\:ml-6{margin-left:1.5rem}.md\\:block{display:block}.md\\:inline-block{display:inline-block}.md\\:flex{display:flex}.md\\:grid{display:grid}.md\\:hidden{display:none}.md\\:h-52{height:13rem}.md\\:h-96{height:24rem}.md\\:h-24{height:6rem}.md\\:h-6{height:1.5rem}.md\\:w-1\\/4{width:25%}.md\\:w-1\\/3{width:33.333333%}.md\\:w-2\\/3{width:66.666667%}.md\\:w-\\[360px\\]{width:360px}.md\\:w-auto{width:auto}.md\\:w-1\\/2{width:50%}.md\\:w-24{width:6rem}.md\\:w-full{width:100%}.md\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\\:grid-cols-\\[2fr_1fr\\]{grid-template-columns:2fr 1fr}.md\\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.md\\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\\:flex-nowrap{flex-wrap:nowrap}.md\\:place-content-between{place-content:space-between}.md\\:justify-start{justify-content:flex-start}.md\\:justify-end{justify-content:flex-end}.md\\:gap-6{gap:1.5rem}.md\\:space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.md\\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px * var(--tw-space-y-reverse))}.md\\:p-52{padding:13rem}.md\\:p-6{padding:1.5rem}.md\\:p-5{padding:1.25rem}.md\\:py-16{padding-top:4rem;padding-bottom:4rem}.md\\:py-3{padding-top:.75rem;padding-bottom:.75rem}.md\\:py-20{padding-top:5rem;padding-bottom:5rem}.md\\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}.md\\:py-28{padding-top:7rem;padding-bottom:7rem}.md\\:py-12{padding-top:3rem;padding-bottom:3rem}.md\\:py-4{padding-top:1rem;padding-bottom:1rem}.md\\:px-4{padding-left:1rem;padding-right:1rem}.md\\:pt-40{padding-top:10rem}.md\\:pb-8{padding-bottom:2rem}.md\\:pb-20{padding-bottom:5rem}.md\\:pr-10{padding-right:2.5rem}.md\\:text-left{text-align:left}.md\\:text-center{text-align:center}.md\\:text-right{text-align:right}.md\\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\\:text-base{font-size:1rem;line-height:1.5rem}.md\\:text-sm{font-size:.875rem;line-height:1.25rem}.md\\:text-2xl{font-size:1.5rem;line-height:2rem}.md\\:text-xl{font-size:1.25rem;line-height:1.75rem}.md\\:text-xs{font-size:.75rem;line-height:1rem}.md\\:text-\\[17px\\]{font-size:17px}.md\\:leading-6{line-height:1.5rem}.md\\:last\\:block:last-child{display:block}}@media (min-width:1024px){.lg\\:prose-xl{font-size:1.25rem;line-height:1.8}.lg\\:prose-xl :where(p):not(:where([class~=not-prose] *)){margin-top:1.2em;margin-bottom:1.2em}.lg\\:prose-xl :where([class~=lead]):not(:where([class~=not-prose] *)){font-size:1.2em;line-height:1.5;margin-top:1em;margin-bottom:1em}.lg\\:prose-xl :where(blockquote):not(:where([class~=not-prose] *)){margin-top:1.6em;margin-bottom:1.6em;padding-left:1.0666667em}.lg\\:prose-xl :where(h1):not(:where([class~=not-prose] *)){font-size:2.8em;margin-top:0;margin-bottom:.8571429em;line-height:1}.lg\\:prose-xl :where(h2):not(:where([class~=not-prose] *)){font-size:1.8em;margin-top:1.5555556em;margin-bottom:.8888889em;line-height:1.1111111}.lg\\:prose-xl :where(h3):not(:where([class~=not-prose] *)){font-size:1.5em;margin-top:1.6em;margin-bottom:.6666667em;line-height:1.3333333}.lg\\:prose-xl :where(h4):not(:where([class~=not-prose] *)){margin-top:1.8em;margin-bottom:.6em;line-height:1.6}.lg\\:prose-xl :where(img):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.lg\\:prose-xl :where(video):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.lg\\:prose-xl :where(figure):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.lg\\:prose-xl :where(figure>*):not(:where([class~=not-prose] *)){margin-top:0;margin-bottom:0}.lg\\:prose-xl :where(figcaption):not(:where([class~=not-prose] *)){font-size:.9em;line-height:1.5555556;margin-top:1em}.lg\\:prose-xl :where(code):not(:where([class~=not-prose] *)){font-size:.9em}.lg\\:prose-xl :where(h2 code):not(:where([class~=not-prose] *)){font-size:.8611111em}.lg\\:prose-xl :where(h3 code):not(:where([class~=not-prose] *)){font-size:.9em}.lg\\:prose-xl :where(pre):not(:where([class~=not-prose] *)){font-size:.9em;line-height:1.7777778;margin-top:2em;margin-bottom:2em;border-radius:.5rem;padding:1.1111111em 1.3333333em}.lg\\:prose-xl :where(ol):not(:where([class~=not-prose] *)){padding-left:1.6em}.lg\\:prose-xl :where(ul):not(:where([class~=not-prose] *)){padding-left:1.6em}.lg\\:prose-xl :where(li):not(:where([class~=not-prose] *)){margin-top:.6em;margin-bottom:.6em}.lg\\:prose-xl :where(ol>li):not(:where([class~=not-prose] *)){padding-left:.4em}.lg\\:prose-xl :where(ul>li):not(:where([class~=not-prose] *)){padding-left:.4em}.lg\\:prose-xl>:where(ul>li p):not(:where([class~=not-prose] *)){margin-top:.8em;margin-bottom:.8em}.lg\\:prose-xl>:where(ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.2em}.lg\\:prose-xl>:where(ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.2em}.lg\\:prose-xl>:where(ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.2em}.lg\\:prose-xl>:where(ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.2em}.lg\\:prose-xl :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose] *)){margin-top:.8em;margin-bottom:.8em}.lg\\:prose-xl :where(hr):not(:where([class~=not-prose] *)){margin-top:2.8em;margin-bottom:2.8em}.lg\\:prose-xl :where(hr+*):not(:where([class~=not-prose] *)){margin-top:0}.lg\\:prose-xl :where(h2+*):not(:where([class~=not-prose] *)){margin-top:0}.lg\\:prose-xl :where(h3+*):not(:where([class~=not-prose] *)){margin-top:0}.lg\\:prose-xl :where(h4+*):not(:where([class~=not-prose] *)){margin-top:0}.lg\\:prose-xl :where(table):not(:where([class~=not-prose] *)){font-size:.9em;line-height:1.5555556}.lg\\:prose-xl :where(thead th):not(:where([class~=not-prose] *)){padding-right:.6666667em;padding-bottom:.8888889em;padding-left:.6666667em}.lg\\:prose-xl :where(thead th:first-child):not(:where([class~=not-prose] *)){padding-left:0}.lg\\:prose-xl :where(thead th:last-child):not(:where([class~=not-prose] *)){padding-right:0}.lg\\:prose-xl :where(tbody td):not(:where([class~=not-prose] *)){padding:.8888889em .6666667em}.lg\\:prose-xl :where(tbody td:first-child):not(:where([class~=not-prose] *)){padding-left:0}.lg\\:prose-xl :where(tbody td:last-child):not(:where([class~=not-prose] *)){padding-right:0}.lg\\:prose-xl>:where(:first-child):not(:where([class~=not-prose] *)){margin-top:0}.lg\\:prose-xl>:where(:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.lg\\:flex{display:flex}.lg\\:hidden{display:none}.lg\\:w-1\\/3{width:33.333333%}.lg\\:flex-auto{flex:1 1 auto}.lg\\:justify-start{justify-content:flex-start}.lg\\:space-x-10>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(2.5rem * var(--tw-space-x-reverse));margin-left:calc(2.5rem * calc(1 - var(--tw-space-x-reverse)))}.lg\\:px-8{padding-left:2rem;padding-right:2rem}}@font-face{font-family:swiper-icons;src:url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(270deg,rgba(0,0,0,.5),transparent)}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(90deg,rgba(0,0,0,.5),transparent)}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(0deg,rgba(0,0,0,.5),transparent)}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent)}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-start:var(--swiper-centered-offset-before);margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-before:var(--swiper-centered-offset-before);margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);letter-spacing:0;text-transform:none;font-variant:normal;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:"prev"}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:"next"}.swiper-button-lock{display:none}.popup-content{margin:auto;background:#fff;width:50%;padding:5px;border:1px solid #d7d7d7}[role=tooltip].popup-content{width:200px;box-shadow:0 0 3px rgba(0,0,0,.16);border-radius:5px}.popup-overlay{background:rgba(0,0,0,.5)}[data-popup=tooltip].popup-overlay{background:transparent}.popup-arrow{filter:drop-shadow(0 -3px 3px rgba(0,0,0,.16));color:#fff;stroke-width:2px;stroke:#d7d7d7;stroke-dasharray:30px;stroke-dashoffset:-54px;left:0;right:0;top:0;bottom:0}@-webkit-keyframes react-loading-skeleton{to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes react-loading-skeleton{to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.react-loading-skeleton{--base-color:#ebebeb;--highlight-color:#f5f5f5;--animation-duration:1.5s;--animation-direction:normal;--pseudo-element-display:block;background-color:var(--base-color);width:100%;border-radius:.25rem;display:inline-flex;line-height:1;position:relative;overflow:hidden;z-index:1}.react-loading-skeleton:after{content:" ";display:var(--pseudo-element-display);position:absolute;top:0;left:0;right:0;height:100%;background-repeat:no-repeat;background-image:linear-gradient(90deg,var(--base-color),var(--highlight-color),var(--base-color));-webkit-transform:translateX(-100%);transform:translateX(-100%);-webkit-animation-name:react-loading-skeleton;animation-name:react-loading-skeleton;-webkit-animation-direction:var(--animation-direction);animation-direction:var(--animation-direction);-webkit-animation-duration:var(--animation-duration);animation-duration:var(--animation-duration);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}</style>`;
const webViewScript = `
setTimeout(function() {
window.ReactNativeWebView.postMessage(document.body.scrollHeight);
}, 500);
setTimeout(function() {
window.ReactNativeWebView.postMessage(document.body.scrollHeight);
}, 2000);
true; // note: this is required, or you'll sometimes get silent failures
`;
export default function BlogArticleScreen({route} : NativeStackScreenProps<RootStackParamList, 'BlogArticle'>) {
const [webViewLoaded, setWebViewLoaded] = useState<boolean>(false);
const [webViewHeight, setWebViewHeight] = useState(Layout.window.height);
const [featuredImageUrl, setFeaturedImageUrl] = useState<string>();
const showAd = useShowAd();
const [article, setArticle] = useState<BlogArticle|null>(null);
const webView = useRef<WebView>(null);
const [html, setHtml] = useState<string>("");
const navigation = useNavigation();
const articleContent = useMemo(() => {
if (!article) {
return null;
}
try {
const contentArr = article.content.split("<div class=\"saswp-faq-block-section\">");
return contentArr[0];
} catch (e) {
return article.content;
}
}, [article]);
const share = async () => {
if (article) {
const url = `https://www.kilowatt.hk/blog/${article.id}`;
logEvent('share_blog', {
articleId: article.id,
articleTitle: article.title,
});
await Share.share({
message: `${article.title}\n${url}\nKilowatt 香港駕車平台`,
});
}
}
const handleWebViewNavigationStateChange = (newNavState: WebViewNavigation) => {
const { url } = newNavState;
if (!url || url.includes("about:blank")) return true;
if (webView.current) {
webView.current.stopLoading();
try {
if (url.includes('www.kilowatt.hk')) {
// Try deeplink to open kilowatt's url
return Linking.openURL(url.replace("https://www.kilowatt.hk/", "kilowatt://"));
}
return WebBrowser.openBrowserAsync(url);
} catch (e) {
console.error(e);
}
}
};
useEffect(() => {
(async () => {
if (route.params.id) {
const article = await getBlogArticle(route.params.id);
setArticle(article);
}
})();
}, [route.params]);
useEffect(() => {
if (article) {
navigation.setOptions({
title: article.title
});
setFeaturedImageUrl(article.imageUrl);
const html = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
${css}
<style>
img { width: 100%; height: auto; border-radius: 8px }
a { color: ${Colors.light.tint} !important; overflow-wrap: anywhere; text-overflow: ellipsis; word-break: break-all }
body { padding-left: 4px; padding-right: 4px; font-size: 16px; color: #302d2a; padding-bottom: 10px; font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji }
p { line-height: 26px;}
figure { width: 100%; margin-left: 0; margin-right: 0; }
figcaption { margin-top: 12px; color: rgb(128,128,128); text-align: center; font-weight: 500; font-size: 14px; }
h1 { font-size: 24px; }
h2 { margin-top 40px; font-size: 24px; }
h3 { margin-top 40px; font-size: 20px; }
h4 { margin-top 31px; font-size: 18px; }
ul { padding-left: 20px }
li { margin-bottom: 4px; line-height: 26px; }
.wp-block-embed__wrapper { aspect-ratio: 16/9; }
iframe { width: 100%; height: 100%; }
iframe.shorts { aspect-ratio: 9/16 !important; }
.mapouter, .gmap_canvas { width: 100% !important; max-height: 300px; }
.wp-block-separator { margin: 48px auto; border: 1px solid rgb(231, 229, 228); width: 90%; }
.wp-block-table { overflow-x: auto }
table { min-width: 100%; table-layout: auto; text-align: left; border-collapse: collapse; margin-bottom: 20px; }
table tr:first-child td { border-bottom: 1px solid #e7e5e4; padding: 10px 0; }
table tr:not(:first-child) td { border-bottom: 1px solid #e7e5e4; padding: 18px 0; }
table tr:last-child td { border-bottom: none; }
table tr td:not(:last-child) { padding-right: 20px; }
</style>
</head>
<body style="">
<div class="max-w-7xl mx-auto px-4 sm:px-6 mt-10">
${articleContent}
</div>
</body>
</html>
`;
setHtml(html);
}
}, [article]);
return (
<View style={{ flex: 1 }}>
<ScrollView>
<View style={{aspectRatio: 1024/538,}}>
<ImageBlurLoading style={[styles.image]} source={{uri: featuredImageUrl}} />
</View>
<View style={{marginTop: 16, paddingHorizontal: 12, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
<Text style={{width: Layout.window.width - 24 - 30, paddingRight: 8, fontSize: 24, fontWeight: 'bold', color: '#302d2a' }}>{article?.title}</Text>
<View style={{width: 30}}>
<TouchableOpacity onPress={() => share()}>
<Feather name="share" size={24} />
</TouchableOpacity>
</View>
</View>
<WebView
ref={webView}
scalesPageToFit={false}
style={[styles.webView, {height: webViewHeight, opacity: 0.99}]}
scrollEnabled={false}
source={{html}}
onLoad={() => setWebViewLoaded(true)}
onMessage={event => {
setWebViewHeight(parseInt(event.nativeEvent.data));
}}
javaScriptEnabled={true}
injectedJavaScript ={webViewScript}
domStorageEnabled={true}
onNavigationStateChange={handleWebViewNavigationStateChange}
//androidHardwareAccelerationDisabled={true}
/>
<View>
{article && article.carParkIds && article.carParkIds.length > 0 ? (
<View style={{marginHorizontal: 8, marginBottom: 32}}>
<View style={{marginBottom: 16}}>
<Text style={styles.chargerSliderTitle}>相關充電站</Text>
<ChargersSlider carParkIds={article.carParkIds} />
</View>
<View>
<Text style={styles.chargerSliderTitle}>附近的充電站</Text>
<ChargersSlider nearbyOfCarParkId={article.carParkIds[0]} />
</View>
</View>
) : null}
{article && article.chargerGroupId ? (
<View style={{marginHorizontal: 8, marginBottom: 32}}>
<Text style={styles.chargerSliderTitle}>相關充電站</Text>
<ChargersSlider chargerGroupId={article.chargerGroupId} />
</View>
) : null}
</View>
<View style={{height: showAd ? (Platform.OS === 'ios' ? 88 : 48) : 0}} />
</ScrollView>
{!webViewLoaded && (
<ActivityIndicator
style={styles.webviewLoader}
size="large"
color={Colors.grey.text}
/>
)}
{showAd ? (
<View style={{position: 'absolute', bottom: 0, zIndex: 1}}>
<GAMBannerAd
unitId={bannerAdUnitIDChargerMap}
sizes={[BannerAdSize.ANCHORED_ADAPTIVE_BANNER, BannerAdSize.FULL_BANNER]}
/>
</View>
) : null}
</View>
);
}
// const htmlStyle = StyleSheet.create({
// h2: {
// marginTop: 30,
// fontSize: 30,
// fontWeight: '600',
// color: 'rgb(68, 64, 60)',
// },
// h3: {
// marginTop: 30,
// fontSize: 26,
// fontWeight: '600',
// color: 'rgb(68, 64, 60)',
// },
// h4: {
// marginTop: 21,
// fontSize: 21,
// fontWeight: '500',
// color: 'rgb(68, 64, 60)',
// },
// figure: {
// marginTop: 16,
// },
// figcaption: {
// marginVertical: 16,
// color: 'rgb(128,128,128)',
// textAlign: 'center',
// width: '100%',
// fontWeight: '500',
// },
// imgContainer: {
// marginBottom: 16,
// },
// img: {
// width: '100%',
// height: undefined,
// aspectRatio: 640/336,
// resizeMode: 'cover',
// borderRadius: 8,
// overflow: "hidden",
// },
// p: {
// fontSize: 17,
// lineHeight: 26,
// marginVertical: 16,
// color: 'rgb(68, 64, 60)',
// },
// a: {
// textDecorationLine: 'underline',
// },
// });
const styles = StyleSheet.create({
container: {
flex: 1,
},
webView: {
flex: 1,
paddingBottom: 16,
marginBottom: 16,
},
webviewLoader: {
position: "absolute",
top: 0,
bottom: 0,
left: 0,
right: 0,
},
image: {
resizeMode: 'contain',
width: '100%',
height: '100%',
overflow: "hidden"
},
chargerSliderTitle: {
fontSize: 24,
fontWeight: 'bold',
marginVertical: 16,
color: '#302d2a',
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment