[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_369":370,"_371":372},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_281":-5,"_20":282,"_22":283,"_284":285,"_286":287,"_26":288,"_24":289,"_290":-5,"_291":-5,"_292":51,"_293":294,"_295":43,"_296":-5,"_297":-5,"_298":299},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","choohuiharn","name","help","branchName","main","version","path","index.html","project",{"_33":222,"_13":14,"_44":223,"_224":-5,"_225":51,"_226":227,"_228":227,"_229":230,"_231":-5,"_232":233,"_234":82,"_235":43,"_236":-5,"_237":-5,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":-5,"_249":250,"_251":250,"_252":253,"_254":253,"_255":253,"_256":250,"_257":250,"_258":259,"_260":261,"_262":263,"_264":51},"tree",[54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69],"file",{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":45,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_18":53},"contents",[],"upstream","pull","ahead","behind","envVars","id","2f0bb623-8ee9-410a-8827-e317518a2f97","fileId","d0994b24-7a09-11f1-9176-1607ee4eb77e","parentId","branchId","ecdceecf-e2d9-4c47-bc90-badf417f4ec6","branchVersion",199,"latest",true,"createdAt",["D",1785657939979],16,"fileType","content","\n\n \n \n \n Home\n \n \n \n \n \n \n \n \n \n \n \n\n

\n\n \n

\n $\"Book\"$ \n $\"Circle\"$ \n $\"Line\"$ \n $\"Magnifying$ \n $\"Curve$ \n $\"Star\"$ \n $\"Circle$ \n $\"Stethescope\"$ \n $\"Curve$ \n $\"Circle$ \n $\"Star\"$ \n $\"Screwdriver\"$ \n

Find YOUR Future Career!

\n\n \n \n\n \n

Careers

\n \n

\n\n \n

Why did we create this?

In this era, many people, including teenagers, don't know what to do\n with their lives. So we decided to make this to help teenagers and people\n to find the job that is most suitable for them and the way to reach their goal.

\n $\"quiz$ \n $\"quiz$ \n

\n\n \n

Questions You Might Ask

\n \n \n \n \n \n

\n\n \n \n\n \n

Contact us

\n \n

\n $\"Curve$ \n $\"Book\"$ \n $\"Star\"$ \n\n $\"Logo\"$ \n $\"Logo\"$ \n\n $\"Line\"$ \n $\"Curve$ \n $\"Circle$ \n $\"Circle$ \n

\n\n

\n\n \n \n","deleted",false,"label",[19],{"_33":194,"_13":195,"_35":196,"_37":-5,"_38":39,"_40":197,"_42":43,"_44":198,"_17":199,"_47":200,"_48":-5,"_50":51,"_52":-5,"_77":201,"_18":202},{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":191,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_77":192,"_18":193},{"_33":183,"_13":184,"_35":185,"_37":-5,"_38":39,"_40":186,"_42":43,"_44":187,"_17":114,"_47":24,"_48":188,"_50":51,"_52":-5,"_77":189,"_18":190},{"_33":175,"_13":176,"_35":177,"_37":-5,"_38":39,"_40":178,"_42":43,"_44":179,"_17":114,"_47":24,"_48":180,"_50":51,"_52":-5,"_77":181,"_18":182},{"_33":167,"_13":168,"_35":169,"_37":-5,"_38":39,"_40":170,"_42":43,"_44":171,"_17":105,"_47":96,"_48":172,"_50":51,"_52":-5,"_77":173,"_18":174},{"_33":159,"_13":160,"_35":161,"_37":-5,"_38":39,"_40":162,"_42":43,"_44":163,"_17":114,"_47":24,"_48":164,"_50":51,"_52":-5,"_77":165,"_18":166},{"_33":151,"_13":152,"_35":153,"_37":-5,"_38":39,"_40":154,"_42":43,"_44":155,"_17":114,"_47":24,"_48":156,"_50":51,"_52":-5,"_77":157,"_18":158},{"_33":143,"_13":144,"_35":145,"_37":-5,"_38":39,"_40":146,"_42":43,"_44":147,"_17":105,"_47":96,"_48":148,"_50":51,"_52":-5,"_77":149,"_18":150},{"_33":134,"_13":135,"_35":136,"_37":-5,"_38":39,"_40":137,"_42":43,"_44":138,"_17":139,"_47":24,"_48":140,"_50":51,"_52":-5,"_77":141,"_18":142},{"_33":126,"_13":127,"_35":128,"_37":-5,"_38":39,"_40":129,"_42":43,"_44":130,"_17":85,"_47":96,"_48":131,"_50":51,"_52":-5,"_77":132,"_18":133},{"_33":118,"_13":119,"_35":120,"_37":-5,"_38":39,"_40":121,"_42":43,"_44":122,"_17":114,"_47":24,"_48":123,"_50":51,"_52":-5,"_77":124,"_18":125},{"_33":109,"_13":110,"_35":111,"_37":-5,"_38":39,"_40":112,"_42":43,"_44":113,"_17":114,"_47":24,"_48":115,"_50":51,"_52":-5,"_77":116,"_18":117},{"_33":100,"_13":101,"_35":102,"_37":-5,"_38":39,"_40":103,"_42":43,"_44":104,"_17":105,"_47":96,"_48":106,"_50":51,"_52":-5,"_77":107,"_18":108},{"_33":90,"_13":91,"_35":92,"_37":-5,"_38":39,"_40":93,"_42":43,"_44":94,"_17":95,"_47":96,"_48":97,"_50":51,"_52":-5,"_77":98,"_18":99},{"_33":80,"_13":81,"_35":82,"_37":-5,"_38":39,"_40":83,"_42":43,"_44":84,"_17":85,"_47":86,"_48":87,"_50":51,"_52":-5,"_77":88,"_18":89},{"_33":70,"_13":71,"_35":72,"_37":-5,"_38":39,"_40":73,"_42":43,"_44":74,"_17":75,"_47":24,"_48":76,"_50":51,"_52":-5,"_77":78,"_18":79},"f92fd8bb-3df5-4470-a565-8efed2293d0a","style.css","f351c3f4-7d32-11f1-a381-1607ee4eb77e",200,["D",1785657970083],22,":root {\n --background: #f5f5f5;\n --grid: #eaeaff;\n --purple: #b469ff;\n --pink: #ff66bc;\n --orange: #fc6b44;\n --yellow: #ffea29;\n --green: #03d66c;\n --vibrant-blue: #6397ff;\n --medium-blue: #7eb0fc;\n --light-blue: #9fc2fd;\n --text: #1a2376;\n}\n\n.dark-theme {\n --background: #0f1427;\n --grid: #252e50;\n --purple: #b469ff;\n --pink: #ff66bc;\n --orange: #fc6b44;\n --yellow: #ffea29;\n --green: #03d66c;\n --vibrant-blue: #4891ff;\n --medium-blue: #132542;\n --light-blue: #1b3864;\n --text: #f5f5f5;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n background-color: var(--background);\n color: var(--text);\n font-family: \"Atkinson Hyperlegible\", sans-serif;\n transition: background-color 0.4s ease, color 0.4s ease;\n padding-top: 76px;\n\n background-image:\n linear-gradient(var(--grid) 0.1em, transparent 0.1em),\n linear-gradient(90deg, var(--grid) 0.1em, transparent 0.1em);\n background-size: 2em 2em;\n}\n\n.btn {\n display: inline-block;\n text-decoration: none;\n font-weight: 700;\n border-radius: 50px;\n padding: 12px 32px;\n font-size: 18px;\n transition: transform 0.2s ease-in-out, box-shadow 0.2s ease;\n border: none;\n cursor: pointer;\n\n}\n\n.btn-primary {\n background-color: var(--light-blue);\n color: var(--text);\n box-shadow: 0 4px 0 var(--medium-blue);\n}\n\n.btn:hover {\n transform: translateY(-2px);\n}\n.container {\n max-width: 900px;\n margin: 0 auto;\n padding: 40px 20px;\n min-height: 440px;\n}\n\nh2.section-title {\n font-family: \"Ultra\", serif;\n font-size: 42px;\n text-align: center;\n color: var(--text);\n margin-bottom: 30px;\n}\n\n\n.hero-section {\n min-height: 850px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n padding: 40px 20px;\n overflow: hidden;\n}\n\n.hero-title {\n font-family: \"Ultra\", serif;\n font-weight: 400;\n font-style: normal;\n font-size: 71px;\n color: var(--text);\n text-align: center;\n letter-spacing: -0.5px;\n}\n\n.decorations {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n .decoration-book {\n position: absolute;\n width: 193px;\n height: 205px;\n top: 131px;\n left: 66px;\n }\n .decoration-circleG {\n position: absolute;\n width: 76px;\n height: 89px;\n top: 268px;\n left: 380px;\n }\n .decoration-line {\n position: absolute;\n width: 284px;\n height: 296px;\n top: 49px;\n left: 471px;\n }\n .decoration-magnifyi {\n position: absolute;\n width:218px;\n height: 229px;\n top: 170px;\n left: 843px;\n }\n .decoration-curveP {\n position: absolute;\n width:188px;\n height:194px;\n top: 103px;\n right: 300px;\n }\n .decoration-starT {\n position: absolute;\n width:167px;\n height: 173px;\n top: 223px;\n right: 134px;\n }\n .decoration-circleO {\n position: absolute;\n width:75px;\n height: 89px;\n top: 338px;\n right: 29px;\n }\n .decoration-ste {\n position: absolute;\n width:217px;\n height: 224px;\n top: 491px;\n left: 51px;\n }\n .decoration-curvePi {\n position: absolute;\n width:174px;\n height: 182px;\n top: 537px;\n left: 388px;\n }\n .decoration-circleP {\n position: absolute;\n width: 76px;\n height: 89px;\n top: 537px;\n left: 737px;\n }\n .decoration-starB {\n position: absolute;\n width: 167px;\n height: 173px;\n top: 520px;\n right: 408px;\n rotate: 140deg;\n }\n .decoration-screw {\n position: absolute;\n width: 248px;\n height: 257px;\n top: 507px;\n right: 107px;\n }\n}\n/* Quiz Banner */\n.quiz-banner {\n background-color: var(--grid);\n padding: 80px 0;\n max-width:720;\n}\n\n.quiz-cta-section {\n display: flex;\n gap: 48px;\n align-items: center;\n}\n\n.quiz-image {\n flex: 0 0 260px;\n height: 330px;\n width:384;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.quiz-text-content h2 {\n font-family: \"Ultra\", serif;\n font-weight: 400;\n font-size: 42px;\n color: var(--text);\n line-height: 1.15;\n margin-bottom: 14px;\n}\n\n.quiz-text-content p {\n font-size: 17px;\n line-height: 1.6;\n margin-bottom: 24px;\n max-width: 520px;\n}\n\n/* Careers */\n.careers-section {\n padding: 70px 0;\n}\n\n.careers-title {\n color: var(--text);\n margin-bottom: 36px;\n}\n\n/* Carousel */\n.careers-carousel-wrapper {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 0 24px;\n}\n\n.careers-carousel-btn {\n flex-shrink: 0;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n border: 3px solid var(--light-blue);\n background: var(--background);\n color: var(--text);\n font-size: 22px;\n cursor: pointer;\n transition: background 0.2s, border-color 0.2s;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.careers-carousel-btn:hover {\n background: var(--light-blue);\n}\n\n.careers-carousel {\n display: flex;\n gap: 20px;\n overflow-x: auto;\n scroll-behavior: smooth;\n scroll-snap-type: x mandatory;\n padding-bottom: 10px;\n scrollbar-width: none;\n flex: 1;\n}\n\n.careers-carousel::-webkit-scrollbar {\n display: none;\n}\n\n.career-card {\n flex: 0 0 240px;\n scroll-snap-align: start;\n background-color: #ffffff;\n border-radius: 14px;\n padding: 22px 18px 18px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n cursor: pointer;\n text-decoration: none;\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\n.career-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 8px 24px rgba(100, 140, 255, 0.2);\n}\n\n.dark-theme .career-card {\n background-color: #1e2d5a;\n color: #f5f5f5;\n}\n\n.career-card h3 {\n font-size: 16px;\n font-weight: 700;\n color: var(--text);\n}\n\n.career-card p {\n font-size: 13px;\n line-height: 1.55;\n flex: 1;\n color: var(--text);\n}\n\n.career-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 6px;\n}\n\n.salary {\n font-size: 13px;\n font-weight: 700;\n color: var(--text);\n}\n\n.career-badge {\n display: inline-block;\n padding: 4px 14px;\n border-radius: 50px;\n font-size: 12px;\n font-weight: 700;\n color: #ffffff;\n}\n\n.badge-blue { background-color: var(--vibrant-blue); }\n.badge-purple { background-color: var(--purple); }\n.badge-pink { background-color: var(--pink); }\n.badge-green { background-color: var(--green); color: #0a2e1a; }\n.badge-orange { background-color: var(--orange); }\n.badge-yellow { background-color: var(--yellow); color: #3a2800; }\n\n/* Skeleton placeholders */\n.career-card--skeleton {\n pointer-events: none;\n opacity: 0.5;\n gap: 14px;\n}\n\n@keyframes shimmer {\n 0% { background-position: -400px 0; }\n 100% { background-position: 400px 0; }\n}\n\n.skeleton-line {\n height: 14px;\n border-radius: 6px;\n background: linear-gradient(90deg, var(--grid) 25%, var(--light-blue) 50%, var(--grid) 75%);\n background-size: 800px 100%;\n animation: shimmer 1.4s infinite linear;\n}\n\n.skeleton-line.short {\n width: 60%;\n margin-top: 4px;\n}\n\n/* Why */\n.why-section {\n background-color: var(--light-blue);\n padding: 80px 0;\n}\n\n.dark-theme .why-section {\n background-color: #1b3864;\n}\n\n.why-content {\n display: flex;\n gap: 60px;\n align-items: center;\n}\n\n.why-text {\n flex: 1;\n}\n\n.why-title {\n text-align: left !important;\n margin-bottom: 20px;\n}\n\n.why-text p {\n font-size: 17px;\n line-height: 1.7;\n color: var(--text);\n}\n\n.why-image-placeholder {\n flex: 0 0 240px;\n height: 250px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* FAQ */\n.faq-section {\n padding: 80px 0;\n}\n\n.faq-list {\n display: flex;\n flex-direction: column;\n gap: 14px;\n max-width: 780px;\n margin: 0 auto;\n}\n\n.faq-item {\n width: 100%;\n background-color: var(--light-blue);\n color: var(--text);\n border: none;\n border-radius: 10px;\n padding: 18px 24px;\n font-size: 22px;\n font-family: \"Atkinson Hyperlegible\", sans-serif;\n font-weight: 400;\n text-align: left;\n cursor: pointer;\n transition: filter 0.2s ease, transform 0.15s ease;\n}\n\n.faq-item:hover {\n filter: brightness(1.1);\n transform: translateY(-2px);\n}\n\n/* FAQ Modal */\n.faq-modal-overlay {\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.45);\n z-index: 2000;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.25s ease;\n}\n\n.faq-modal-overlay.open {\n opacity: 1;\n pointer-events: all;\n}\n\n.faq-modal {\n background: var(--background);\n border-radius: 14px;\n padding: 28px 30px 30px;\n max-width: 480px;\n width: 90%;\n box-shadow: 0 12px 40px rgba(0,0,0,0.2);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n transition: transform 200ms ease-in-out;\n}\n\n.faq-modal-overlay.open .faq-modal {\n transform: translate(-50%, -50%) scale(1);\n}\n\n.dark-theme .faq-modal {\n background: var(--light-blue);\n color: var(--text);\n}\n\n.faq-modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-left: -30px;\n margin-right: -30px;\n padding-left: 30px;\n padding-right: 30px;\n padding-bottom: 8px; \n margin-bottom: 10px; \n border-bottom: 3px solid var(--text);\n}\n\n.faq-modal-dots {\n display: flex;\n gap: 2px;\n}\n\n.dot {\n width: 21px;\n height: 21px;\n border-radius: 50%;\n}\n.dotB { background-color: var(--vibrant-blue); }\n.dotPi { background-color: var(--pink); }\n.dotG { background-color: var(--green); }\n.dotY { background-color: var(--yellow); }\n.dotO { background-color: var(--orange); }\n.dotP { background-color: var(--purple); }\n\n.faq-modal-close {\n position: absolute;\n top: 14px;\n right: 18px;\n background: none;\n border: none;\n font-size: 40px;\n cursor: pointer;\n color: var(--text);\n line-height: 1;\n}\n\n.faq-modal-close:hover {\n color: var(--medium-blue);\n}\n\n#faqModalAnswer {\n font-size: 15px;\n line-height: 1.7;\n color: var(--text);\n}\n\n/* Contact */\n.contact-section {\n background-color: var(--grid);\n padding: 80px 0;\n}\n\n.contact-content {\n display: flex;\n gap: 60px;\n align-items: flex-start;\n}\n\n.contact-form-wrapper {\n flex: 1;\n}\n\n.contact-title {\n color: var(--text);\n text-align: left !important;\n margin-bottom: 28px;\n}\n\n.contact-form {\n display: flex;\n flex-direction: column;\n gap: 14px;\n max-width: 480px;\n}\n\n.form-input {\n width: 100%;\n padding: 13px 16px;\n border-radius: 8px;\n border: none;\n font-size: 15px;\n font-family: \"Atkinson Hyperlegible\", sans-serif;\n background-color: var(--background);\n color: var(--text);\n outline: none;\n}\n\n.form-input:focus {\n box-shadow: 0 0 0 3px rgba(99, 151, 255, 0.5);\n}\n\n.form-textarea {\n resize: vertical;\n min-height: 120px;\n}\n\n.form-select {\n cursor: pointer;\n}\n\n@keyframes floatUpDown {\n 0%, 100% { transform: translateY(0px); }\n 50% { transform: translateY(-12px); }\n}\n\n.contact-decorations {\n flex: 0 0 300px;\n position: relative;\n min-height: 400px;\n}\n\n.contact-decorations img {\n position: absolute;\n opacity: 0.9;\n}\n\n.CoCurvePi {\n width: 120px;\n top: 300px;\n left: -40px;\n animation: floatUpDown 3.2s ease-in-out infinite;\n}\n\n.CoBook {\n width: 120px;\n top: 34px;\n left: -30px;\n animation: floatUpDown 3.8s ease-in-out infinite 0.4s;\n}\n\n.CoStar {\n width: 105px;\n rotate: -20deg;\n top: 140px;\n left: 50px;\n animation: floatUpDown 2.8s ease-in-out infinite 0.9s;\n}\n\n.CoLogo {\n width: 250px;\n bottom: 0;\n left: 50%;\n}\n.CoLogoDark {\n display: none;\n}\n\n.dark-theme .CoLogoLight {\n display: none;\n}\n\n.dark-theme .CoLogoDark {\n display: block;\n}\n\n.CoLine {\n width: 200px;\n top: -30px;\n right: -80px;\n rotate:-10deg;\n animation: floatUpDown 4s ease-in-out infinite 0.2s;\n}\n\n.CoCurveP {\n width: 120px;\n bottom: 280px;\n right: -250px;\n animation: floatUpDown 3.5s ease-in-out infinite 0.7s;\n}\n\n.CoCircleG {\n width: 65px;\n top: 125px;\n right: -150px;\n animation: floatUpDown 2.6s ease-in-out infinite 1.1s;\n}\n\n.CoCircleB {\n width: 92px;\n top: 250px;\n right: -250px;\n animation: floatUpDown 3s ease-in-out infinite 0.5s;\n}\n\n@media (max-width: 900px) {\n .hero-title {\n font-size: 40px;\n }\n .decoration-book {\n position: absolute;\n width: 433px;\n height: 55px;\n top: 131px;\n left: 0px;\n }\n .decoration-circleG {\n position: absolute;\n width: 76px;\n height: 89px;\n top: 268px;\n left: 0px;\n }\n .decoration-line {\n position: absolute;\n width: 284px;\n height: 296px;\n top: 49px;\n left: 0px;\n }\n .decoration-magnifyi {\n width:218px;\n height: 229px;\n top: 170px;\n left: 0px;\n\n }.decorations .decoration-curveP {\n width: 108px;\n height: 114px;\n top: 103px;\n right: 5px;\n }\n .decoration-ste {\n width: 17px;\n height: 224px;\n top: 491px;\n left: 51px;\n }\n .decorations .decoration-starT {\n width: 97px;\n height: 103px;\n top: 183px;\n right: 44px;\n }\n .decorations .decoration-circleO {\n width: 35px;\n height: 59px;\n top: 300px;\n right: 10px;\n }\n .decorations .decoration-starB {\n width: 97px;\n height: 103px;\n top: 490px;\n right: 106px;\n rotate: 140deg;\n }\n .decorations .decoration-screw {\n width: 98px;\n height: 107px;\n top: 507px;\n right: 17px;\n }\n .quiz-cta-section,\n .why-content,\n .contact-content {\n flex-direction: column;\n }\n\n .quiz-image-placeholder,\n .why-image-placeholder {\n width: 100%;\n flex: unset;\n }\n .contact-decorations {\n display: none;\n }\n}\n\n\n/* Phone */\nhtml { overflow-x: hidden; }\nbody { overflow-x: hidden; }\n\n@media (max-width: 600px) {\n /* Hero */\n .hero-section {\n min-height: 480px;\n padding: 30px 16px;\n }\n\n .hero-title { font-size: 36px; }\n\n .decorations .decoration-book {\n width: 88px; height: auto;\n top: 80px; left: 6px;\n }\n .decorations .decoration-circleG{\n width: 34px; height: auto;\n top: 150px; left: 106px; \n }\n .decorations .decoration-line{\n width: 88px; height: auto;\n top: 20px; left: 106px;\n }\n .decorations .decoration-ste {\n width: 88px; height: auto;\n top: 300px; left: 6px;\n }\n .decorations .decoration-curvePi{\n width: 68px; height: auto;\n top: 350px; left: 120px; \n }\n .decorations .decoration-magnifyi{\n width: 66px; height: auto;\n top: 105px; right: 120px; left: auto;\n }\n .decorations .decoration-starT {\n width: 66px; height: auto;\n top: 135px; right: 50px; left: auto;\n }\n .decorations .decoration-curveP{\n width: 88px; height: auto;\n top: 80px; right: 6px;\n }\n .decorations .decoration-screw {\n width: 88px; height: auto;\n top: 330px; bottom: 16px; right: 6px; left: auto;\n }\n .decorations .decoration-circleO {\n width: 36px; height: auto;\n top: 195px; right: 10px; left: auto;\n }\n .decorations .decoration-circleP{\n width: 36px; height: auto;\n top: 335px; right: 130px; left: auto;\n }\n .decorations .decoration-starB{\n width: 76px; height: auto;\n top: 275px; right: 50px; left: auto;\n }\n\n /* Sections */\n h2.section-title { font-size: 28px; }\n .quiz-text-content h2 { font-size: 26px; }\n\n .container { padding: 24px 16px; }\n\n /* carousel */\n .careers-section { padding: 36px 0; }\n .careers-carousel-wrapper { padding: 0 20px; gap: 6px; }\n .careers-carousel-btn { width: 34px; height: 34px; font-size: 18px; }\n\n /* FAQ */\n .faq-item {\n font-size: 17px;\n padding: 14px 18px;\n }\n\n /* Buttons */\n .btn { font-size: 16px; padding: 10px 24px; }\n\n /* Why img*/\n .quiz-image-placeholder,\n .why-image-placeholder { height: 180px; }\n\n /* Contact */\n .contact-title { text-align: center !important; }\n .contact-form-wrapper { width: 100%; display: flex; flex-direction: column; align-items: center; }\n .contact-form { max-width: 100%; width: 100%; }\n}\n\n@media (min-width: 1700px) {\n .decorations .decoration-curveP {\n width: 208px;\n height: 214px;\n top: 103px;\n right: 500px;\n }\n .decorations .decoration-starT {\n width: 167px;\n height: 173px;\n top: 223px;\n right: 204px;\n }\n .decorations .decoration-circleO {\n width: 75px;\n height: 89px;\n top: 338px;\n right: 50px;\n }\n .decorations .decoration-starB {\n width: 167px;\n height: 173px;\n top: 520px;\n right: 608px;\n rotate: 140deg;\n }\n .decorations .decoration-screw {\n width: 248px;\n height: 257px;\n top: 507px;\n right: 157px;\n }\n}","children",[],[71],"77c4eca0-2ed2-4705-b699-b8f75af3242d","serve.ts","99aa5e40-7a0a-11f1-ab20-1607ee4eb77e",78,["D",1784340559739],4,"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nimport { email } from \"https://esm.town/v/std/email\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\n// Ensure the contacts table exists\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS contact_submissions (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n email TEXT NOT NULL,\n subject TEXT NOT NULL,\n message TEXT NOT NULL,\n created_at TEXT DEFAULT (datetime('now'))\n )\n`);\n\nexport default staticHTTPServer(import.meta.url, async (req) => {\n const { pathname } = new URL(req.url);\n\n if (pathname === \"/api/contact\" && req.method === \"POST\") {\n try {\n const { name, email: senderEmail, subject, message } =\n await req.json();\n\n // Server-side validation\n if (!name || !senderEmail || !subject || !message) {\n return Response.json(\n { error: \"All fields are required.\" },\n { status: 400 },\n );\n }\n\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n if (!emailRegex.test(senderEmail)) {\n return Response.json(\n { error: \"Please enter a valid email address.\" },\n { status: 400 },\n );\n }\n\n // Store in SQLite\n await sqlite.execute({\n sql:\n \"INSERT INTO contact_submissions (name, email, subject, message) VALUES (?, ?, ?, ?)\",\n args: [name, senderEmail, subject, message],\n });\n\n // Send notification email to the val owner (free tier: self only)\n try {\n await email({\n subject: `[Cureer Contact] ${subject}`,\n text:\n `Name: ${name}\\nSender Email: ${senderEmail}\\n\\nMessage:\\n${message}`,\n replyTo: senderEmail,\n });\n } catch (emailErr) {\n // Email may fail, but the submission is saved in the database\n console.error(\"Email notification failed (data still saved):\",\n emailErr);\n }\n\n return Response.json({\n ok: true,\n message: \"Message sent successfully!\",\n });\n } catch (err) {\n console.error(\"Contact form error:\", err);\n return Response.json(\n { error: \"Failed to send message. Please try again later.\" },\n { status: 500 },\n );\n }\n }\n\n return null; // fall through to static file serving\n});\n",[],[81],"afb5119d-181a-4dd5-b48f-3d11980e96ec","script.js","b17dae72-8249-11f1-b735-1607ee4eb77e",201,["D",1785657983693],8,"script","(function () {\n const CAREERS_API =\n \"https://script.google.com/macros/s/AKfycbxQBx4JvjiaqWRjl_Uq86z-kfxSgsB4wLbRgEZOonNf6yczHxkBlSA50Zx_1lqpMKHt/exec\";\n\n const BADGE = {\n R: { cls: \"badge-blue\", label: \"Realistic\" },\n I: { cls: \"badge-purple\", label: \"Investigative\" },\n A: { cls: \"badge-pink\", label: \"Artistic\" },\n S: { cls: \"badge-green\", label: \"Social\" },\n E: { cls: \"badge-orange\", label: \"Enterprising\" },\n C: { cls: \"badge-yellow\", label: \"Conventional\" },\n };\n\n const carousel = document.getElementById(\"careers-carousel\");\n const prevBtn = document.getElementById(\"careers-prev\");\n const nextBtn = document.getElementById(\"careers-next\");\n\n if (!carousel) return; \n\n const CARD_W = 260; \n\n if (prevBtn) prevBtn.addEventListener(\"click\", () => carousel.scrollBy({ left: -CARD_W * 3, behavior: \"smooth\" }));\n if (nextBtn) nextBtn.addEventListener(\"click\", () => carousel.scrollBy({ left: CARD_W * 3, behavior: \"smooth\" }));\n\n async function fetchCareers() {\n const TYPES = [\"R\", \"I\", \"A\", \"S\", \"E\", \"C\"];\n const responses = await Promise.all(\n TYPES.map((t) =>\n fetch(`${CAREERS_API}?action=results&primary=${t}&secondary=R`)\n .then((r) => r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`)))\n .catch(() => ({ topMatches: [], otherJobs: [] }))\n )\n );\n\n const seen = new Set();\n const jobs = [];\n responses.forEach((data) => {\n [...(data.topMatches || []), ...(data.otherJobs || [])].forEach((job) => {\n if (job.id && !seen.has(job.id)) {\n seen.add(job.id);\n jobs.push(job);\n }\n });\n });\n\n jobs.sort((a, b) => (a.title || \"\").localeCompare(b.title || \"\"));\n return jobs;\n }\n\n function buildCard(job) {\n const type = job.primary || job.category || \"\";\n const badge = BADGE[type] || { cls: \"badge-blue\", label: type };\n const salary = (job.salaryStart && job.salaryEnd)\n ? `${job.salaryStart} – ${job.salaryEnd}`\n : (job.salary || \"\");\n\n const a = document.createElement(\"a\");\n a.className = \"career-card\";\n a.href = `job.html#${job.id}`;\n a.innerHTML = `\n

${job.title || \"\"}

${job.shortDescription || job.description || \"\"}

\n `;\n return a;\n }\n\n fetchCareers()\n .then((jobs) => {\n carousel.innerHTML = \"\";\n if (!jobs.length) {\n carousel.innerHTML = \"

No careers found.

\";\n return;\n }\n jobs.forEach((job) => carousel.appendChild(buildCard(job)));\n })\n .catch(() => {\n carousel.innerHTML = \"

Could not load careers.

\";\n });\n})();\n\n\ndocument.querySelectorAll(\".faq-item\").forEach((btn) => {\n btn.addEventListener(\"click\", () => {\n document.getElementById(\"faqModalAnswer\").textContent = btn.dataset.answer;\n\n const overlay = document.getElementById(\"faqModal\");\n overlay.classList.add(\"open\");\n overlay.setAttribute(\"aria-hidden\", \"false\");\n });\n});\n\ndocument\n .getElementById(\"faqModalClose\")\n ?.addEventListener(\"click\", closeFaqModal);\n\ndocument.getElementById(\"faqModal\")?.addEventListener(\"click\", (e) => {\n if (e.target === e.currentTarget) {\n closeFaqModal();\n }\n});\n\nfunction closeFaqModal() {\n const overlay = document.getElementById(\"faqModal\");\n overlay.classList.remove(\"open\");\n overlay.setAttribute(\"aria-hidden\", \"true\");\n}\n\nwindow.addEventListener(\"load\", () => {\n const hero = document.querySelector(\".hero-section\");\n if (!hero) return;\n\n const heroRect = hero.getBoundingClientRect();\n const heroCenterX = heroRect.left + heroRect.width / 2;\n const heroCenterY = heroRect.top + heroRect.height / 2;\n\n const title = hero.querySelector(\".hero-title\");\n const decorations = [...hero.querySelectorAll(\".decorations img\")];\n\n title.animate(\n [\n { transform: \"scale(0.2)\", opacity: 0 },\n { transform: \"scale(1)\", opacity: 1 },\n ],\n {\n duration: 600,\n delay: 100,\n easing: \"cubic-bezier(0.34, 1.56, 0.64, 1)\",\n fill: \"both\",\n }\n );\n\n decorations.forEach((el, i) =>{\n const r = el.getBoundingClientRect();\n\n const dx = heroCenterX - (r.left + r.width / 2);\n const dy = heroCenterY - (r.top + r.height / 2);\n\n el.animate(\n [\n {\n transform: `translate(${dx}px, ${dy}px) scale(0.15)`,\n opacity: 0,\n },\n {\n transform: \"translate(0,0) scale(1)\",\n opacity: 1,\n },\n ],\n {\n duration: 700,\n delay: 150 + i * 60,\n easing: \"cubic-bezier(0.34, 1.56, 0.64, 1)\",\n fill: \"both\",\n }\n );\n });\n\n const totalAnimMs =\n 150 + (decorations.length - 1) * 60 + 700 + 200;\n\n setTimeout(() => {\n decorations.forEach((el) =>\n el.getAnimations().forEach((a) => a.cancel())\n );\n\n void hero.offsetHeight;\n\n const centers = decorations.map((el) => {\n const r = el.getBoundingClientRect();\n return {\n x: r.left + r.width / 2,\n y: r.top + r.height / 2,\n };\n });\n\n decorations.forEach((el) => {\n el.style.transition = \"transform .35s ease-out\";\n });\n\n const RADIUS = 150;\n const MAX_SHIFT = 20;\n\n hero.addEventListener(\"mousemove\", (e) => {\n decorations.forEach((el, i) => {\n const dx = e.clientX - centers[i].x;\n const dy = e.clientY - centers[i].y;\n const dist = Math.hypot(dx, dy);\n\n if (dist < RADIUS && dist > 0) {\n const s = ((1 - dist / RADIUS) * MAX_SHIFT) / dist;\n el.style.transform = `translate(${dx * s}px, ${dy * s}px)`;\n } else {\n el.style.transform = \"\";\n }\n });\n });\n\n hero.addEventListener(\"mouseleave\", () =>{\n decorations.forEach((el) => {\n el.style.transform = \"\";\n });\n });\n }, totalAnimMs);\n});\n\nconst contactForm = document.querySelector(\".contact-form\");\n\nif (contactForm) {\n const submitBtn = contactForm.querySelector('button[type=\"submit\"]');\n const originalText = submitBtn.textContent;\n\n function showFormMessage(text, type) {\n const existing = contactForm.querySelector(\".form-message\");\n if (existing) existing.remove();\n\n const msg = document.createElement(\"div\");\n msg.className = `form-message form-message-${type}`;\n msg.textContent = text;\n\n contactForm.appendChild(msg);\n\n setTimeout(() => {\n msg.remove();\n }, 5000);\n }\n\n contactForm.addEventListener(\"submit\", async (e)=> {\n e.preventDefault();\n\n const name = document.getElementById(\"contactName\").value.trim();\n const email = document.getElementById(\"contactEmail\").value.trim();\n const subject = document.getElementById(\"contactSubject\").value;\n const message = document.getElementById(\"contactMessage\").value.trim();\n\n if (!name || !email || !subject || !message) {\n showFormMessage(\"Please fill in all fields.\", \"error\");\n return;\n }\n\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n\n if (!emailRegex.test(email)) {\n showFormMessage(\"Please enter a valid email address.\", \"error\");\n return;\n }\n\n submitBtn.disabled = true;\n submitBtn.textContent = \"Sending...\";\n\n const formData = {\n access_key: \"6c803d2e-b85e-44f2-9a8f-a7d795b4ffb8\",\n name,\n email,\n subject,\n message,\n };\n\n try {\n const response= await fetch(\"https://api.web3forms.com/submit\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n Accept: \"application/json\",\n },\n body: JSON.stringify(formData),\n });\n\n const result = await response.json();\n\n if (result.success) {\n showFormMessage(\n \"Message sent successfully! We'll get back to you soon.\",\n \"success\"\n );\n\n contactForm.reset();\n } else {\n showFormMessage(\n result.message || \"Failed to send message.\",\n \"error\"\n );\n }\n } catch (error) {\n showFormMessage(\n \"Network error. Please try again later.\",\n \"error\"\n );\n } finally {\n submitBtn.disabled = false;\n submitBtn.textContent = originalText;\n }\n });\n}",[],[91],"026dfa3d-e54e-480b-8ef0-9d28c4735b16","quiz.js","4e23d4ec-8e46-11f1-b681-1607ee4eb77e",174,["D",1785656912096],2,"const API_URL =\n \"https://script.google.com/macros/s/AKfycbxQBx4JvjiaqWRjl_Uq86z-kfxSgsB4wLbRgEZOonNf6yczHxkBlSA50Zx_1lqpMKHt/exec\";\n\nconst quiz = [\n {\n question: \"Which do you like to do most?\",\n answers: [\n { text: \"Organising the plan for an outing\", type: \"C\" },\n { text: \"Building things\", type: \"R\" },\n { text: \"Resolving conflicts between people\", type: \"S\" },\n { text: \"Researching topics of interest\", type: \"I\" },\n { text: \"Being in charge of a group\", type: \"E\" },\n { text: \"Drawing and painting\", type: \"A\" },\n ],\n },\n\n {\n question: \"Which do you like to do most?\",\n answers: [\n { text: \"Reading, writing, and wordplay\", type: \"A\" },\n { text: \"Keeping a journal or daily planner\", type: \"C\" },\n { text: \"Taking care of animals\", type: \"R\" },\n { text: \"Meeting and getting to know people\", type: \"S\" },\n { text: \"Organising an event\", type: \"E\" },\n { text: \"Watching documentaries and science videos\", type: \"I\" },\n ],\n },\n\n {\n question: \"Which do you like to do most?\",\n answers: [\n { text: \"Solving puzzles or mysteries\", type: \"I\" },\n { text: \"Playing musical instruments\", type: \"A\" },\n { text: \"Learning a new language\", type: \"C\" },\n { text: \"Making sure those around me are okay\", type: \"S\" },\n { text: \"Negotiating and making deals\", type: \"E\" },\n { text: \"Exploring nature and being outdoors\", type: \"R\" },\n ],\n },\n\n {\n question: \"Which do you like to do most?\",\n answers: [\n { text: \"Taking and editing pictures\", type: \"A\" },\n { text: \"Public speaking and debate\", type: \"E\" },\n { text: \"Fixing and taking things apart\", type: \"R\" },\n { text: \"Volunteering with a charity\", type: \"S\" },\n { text: \"Solving maths equations\", type: \"I\" },\n { text: \"Conducting recipe-based cooking\", type: \"C\" },\n ],\n },\n\n {\n question: \"Which do you like to do most?\",\n answers: [\n { text: \"Acting, performing, or dancing\", type: \"A\" },\n { text: \"Fighting for a cause\", type: \"E\" },\n { text: \"Understanding how people behave\", type: \"I\" },\n { text: \"Working with a group\", type: \"S\" },\n { text: \"Managing money\", type: \"C\" },\n { text: \"Playing sports or working out\", type: \"R\" },\n ],\n },\n\n {\n question: \"Which do you like to do most?\",\n answers: [\n { text: \"Playing board games or card games\", type: \"C\" },\n { text: \"Hanging out with people online\", type: \"S\" },\n { text: \"Running or managing a business\", type: \"E\" },\n { text: \"Doing DIY projects\", type: \"R\" },\n { text: \"Designing or crafting\", type: \"A\" },\n { text: \"Conducting experiments\", type: \"I\" },\n ],\n },\n\n {\n question: \"Which do you like to do most?\",\n answers: [\n { text: \"Gardening or working on a farm\", type: \"R\" },\n { text: \"Teaching or guiding others\", type: \"S\" },\n { text: \"Exploring coding and programming\", type: \"I\" },\n { text: \"Being a school club committee\", type: \"E\" },\n { text: \"Organising and arranging stuff\", type: \"C\" },\n { text: \"Making films or videos\", type: \"A\" },\n ],\n },\n];\n\n\nconst descriptions = {\n R: \"You enjoy practical, hands-on activities and solving real-world problems.\",\n\n I: \"You enjoy analysing, researching, and discovering new ideas.\",\n\n A: \"You enjoy expressing yourself through creativity and imagination.\",\n\n S: \"You enjoy helping, teaching, and working with other people.\",\n\n E: \"You enjoy leading, persuading, and managing people or projects.\",\n\n C: \"You enjoy organising, planning, and working with structure.\",\n};\n\nlet scores = {\n R: 0,\n I: 0,\n A: 0,\n S: 0,\n E: 0,\n C: 0,\n};\n\n\nlet currentQuestion = 0;\nlet selectedAnswer = null;\n\n\nconst landingPage = document.getElementById(\"landing-page\");\nconst quizPage = document.getElementById(\"quiz-page\");\nconst resultPage = document.getElementById(\"result-page\");\n\nconst startBtn = document.getElementById(\"start-btn\");\nconst nextBtn = document.getElementById(\"next-btn\");\nconst restartBtn = document.getElementById(\"restart-btn\");\n\nconst question = document.getElementById(\"question\");\nconst answers = document.getElementById(\"answers\");\n\nconst progress = document.getElementById(\"progress\");\nconst progressText = document.getElementById(\"progress-text\");\n\nconst primaryName = document.getElementById(\"primary-name\");\n\nconst secondaryName = document.getElementById(\"secondary-name\");\n\nconst primaryDescription = document.getElementById(\"primary-description\");\n\nconst secondaryDescription = document.getElementById(\"secondary-description\");\n\nconst topMatches = document.getElementById(\"top-matches\");\n\nconst otherJobsList = document.getElementById(\"other-jobs-list\");\n\n\nstartBtn.addEventListener(\"click\", () => {\n landingPage.classList.remove(\"active\");\n quizPage.classList.add(\"active\");\n\n loadQuestion();\n});\n\n\nfunction loadQuestion() {\n selectedAnswer = null;\n\n question.textContent = quiz[currentQuestion].question;\n\n answers.innerHTML = \"\";\n\n quiz[currentQuestion].answers.forEach((answer) => {\n const button = document.createElement(\"button\");\n\n button.classList.add(\"answer-btn\");\n\n button.textContent = answer.text;\n\n button.addEventListener(\"click\", () => {\n document.querySelectorAll(\".answer-btn\").forEach((btn) => {\n btn.classList.remove(\"selected\");\n });\n\n button.classList.add(\"selected\");\n\n selectedAnswer = answer.type;\n });\n\n answers.appendChild(button);\n });\n\n updateProgress();\n}\n\n\nfunction updateProgress() {\n const percentage = ((currentQuestion + 1) / quiz.length) * 100;\n\n progress.style.width = percentage + \"%\";\n\n progressText.textContent = `Question ${currentQuestion + 1} / ${quiz.length}`;\n}\n\n\nnextBtn.addEventListener(\"click\", () => {\n if (selectedAnswer === null) {\n alert(\"Please select an answer before continuing.\");\n\n return;\n }\n\n scores[selectedAnswer]++;\n currentQuestion++;\n if (currentQuestion < quiz.length) {\n loadQuestion();\n } \n else {\n showResults();\n }\n});\n\nfunction showResults() {\n quizPage.classList.remove(\"active\");\n resultPage.classList.add(\"active\");\n\n const ranking = Object.entries(scores)\n .sort((a, b) => b[1] - a[1]);\n\n const primary = ranking[0][0];\n const secondary = ranking[1][0];\n\n primaryName.textContent = personalityNames(primary);\n secondaryName.textContent = personalityNames(secondary);\n primaryDescription.textContent = descriptions[primary];\n secondaryDescription.textContent = descriptions[secondary];\n document.querySelector(\".other-jobs h2\").textContent =\n `Other ${personalityNames(primary)} Careers`;\n\n loadCareerResults(primary, secondary);\n}\n\n\nfunction personalityNames(letter) {\n switch (letter) {\n case \"R\":\n return \"Realistic\";\n\n case \"I\":\n return \"Investigative\";\n\n case \"A\":\n return \"Artistic\";\n\n case \"S\":\n return \"Social\";\n\n case \"E\":\n return \"Enterprising\";\n\n case \"C\":\n return \"Conventional\";\n\n default:\n return \"\";\n }\n}\n\n\nrestartBtn.addEventListener(\"click\", () => {\n localStorage.removeItem(\"careerResults\");\n\n scores = {\n R: 0,\n I: 0,\n A: 0,\n S: 0,\n E: 0,\n C: 0,\n };\n\n currentQuestion = 0;\n selectedAnswer = null;\n\n resultPage.classList.remove(\"active\");\n quizPage.classList.remove(\"active\");\n landingPage.classList.add(\"active\");\n});\n\nfunction renderResults(data) {\n primaryName.textContent = personalityNames(data.primary);\n\n secondaryName.textContent = personalityNames(data.secondary);\n\n primaryDescription.textContent = data.primaryDescription;\n secondaryDescription.textContent = data.secondaryDescription;\n\n topMatches.innerHTML = \"\";\n\n otherJobsList.innerHTML = \"\";\n\n displayTopMatches(data.topMatches);\n\n displayOtherJobs(data.otherJobs);\n\n const heading = document.querySelector(\".other-jobs h2\");\n\n heading.textContent = `Other ${personalityNames(data.primary)} Careers`;\n}\n\nfunction displayTopMatches(jobs) {\n topMatches.innerHTML = \"\";\n\n jobs.forEach((job, index) => {\n const card = document.createElement(\"div\");\n\n card.className = \"career-card top-match\";\n\n card.innerHTML = `\n\n

\n\n

${job.title}

\n\n

${job.description}

\n\n \n\n ${\n index === 0\n ? \"Top Match\"\n : index === 1\n ? \"Top Match\"\n : \"Top Match\"\n }\n\n\n\n

\n\n \n\n Learn More →\n\n \n\n `;\n\n card\n .querySelector(\".learn-more-btn\")\n .addEventListener(\"click\", () => {\n window.location.href = `job.html#${job.id}`;\n });\n\n topMatches.appendChild(card);\n });\n}\n\nfunction displayOtherJobs(jobs) {\n otherJobsList.innerHTML = \"\";\n\n jobs.forEach((job, index) => {\n const card = document.createElement(\"div\");\n\n card.className = \"career-card\";\n\n card.innerHTML = `\n\n

\n\n

${job.title}

\n\n

${job.description}

\n\n

\n\n \n\n Learn More →\n\n \n\n `;\n\n card\n .querySelector(\".learn-more-btn\")\n .addEventListener(\"click\", () => {\n window.location.href = `job.html#${job.id}`;\n });\n\n otherJobsList.appendChild(card);\n });\n}\nwindow.addEventListener(\"load\", () => {\n const saved = localStorage.getItem(\"careerResults\");\n\n if (!saved) return;\n\n const data = JSON.parse(saved);\n\n landingPage.classList.remove(\"active\");\n quizPage.classList.remove(\"active\");\n resultPage.classList.add(\"active\");\n\n renderResults(data);\n currentQuestion = 0;\n selectedAnswer = null;\n});\n\nasync function loadCareerResults(primary, secondary) {\n topMatches.innerHTML = `\n

Finding your best matches…

`;\n otherJobsList.innerHTML = \"\";\n\n try {\n const response = await fetch(\n `${API_URL}?action=results&primary=${primary}&secondary=${secondary}`,\n );\n\n if (!response.ok) {\n throw new Error(\"Failed to fetch career data.\");\n }\n\n const data = await response.json();\n\n data.primary = primary;\n data.secondary = secondary;\n data.primaryDescription = descriptions[primary];\n data.secondaryDescription = descriptions[secondary];\n\n localStorage.setItem(\n \"careerResults\",\n JSON.stringify(data),\n );\n\n renderResults(data);\n } catch (error) {\n console.error(error);\n\n topMatches.innerHTML = `\n

Unable to load careers.

Please try again later.

`;\n\n otherJobsList.innerHTML = \"\";\n }\n}",[],[101],"9df656de-3412-4459-b864-ad9e27f61865","quiz.html","27cfeb14-8e46-11f1-aed8-1607ee4eb77e",167,["D",1785656772105],3,"\n\n \n \n \n Quiz\n \n \n \n \n \n \n \n \n \n \n

\n\n

\n $\"Logo\"$ \n $\"Logo\"$ \n\n

Find Your Dream Career

\n\n

\n Answer a few questions to discover careers that match your\n personality.\n

\n\n \n

\n\n\n

\n\n

\n Question 1 / 7\n

\n\n\n\n

\n Question appears here\n

\n\n\n

\n\n \n

\n\n\n

\n\n

\n\n\n \n\n\n

\n\n

Your Job Matches

\n\n

\n\n\n

\n\n

\n Other Careers You May Like\n

\n\n

\n\n\n

\n\n

\n\n \n

\n \n",[],[110],"fa346ca8-347a-4c2e-82a4-ef9577878464","quiz.css","3d6be662-8e46-11f1-8e54-1607ee4eb77e",171,["D",1785656802114],":root {\n --background: #f5f5f5;\n --grid: #eaeaff;\n --purple: #b469ff;\n --pink: #ff66bc;\n --orange: #fc6b44;\n --yellow: #ffea29;\n --green: #03d66c;\n --vibrant-blue: #6397ff;\n --medium-blue: #7eb0fc;\n --light-blue: #9fc2fd;\n --text: #1a2376;\n --retake-blue: #7eb0fc;\n}\n\n.dark-theme {\n --background: #0f1427;\n --grid: #252e50;\n --purple: #b469ff;\n --pink: #ff66bc;\n --orange: #fc6b44;\n --yellow: #ffea29;\n --green: #03d66c;\n --vibrant-blue: #4891ff;\n --medium-blue: #132542;\n --light-blue: #1b3864;\n --text: #f5f5f5;\n --retake-blue: #ebe3e3;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: \"Atkinson Hyperlegible\", sans-serif;\n}\n\nbody {\n background-color: var(--background);\n color: var(--text);\n\n transition: background-color 0.4s ease, color 0.4s ease;\n\n padding-top: 76px;\n\n background-image:\n linear-gradient(var(--grid) 1px, transparent 1px),\n linear-gradient(90deg, var(--grid) 1px, transparent 1px);\n background-size: 40px 40px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n min-height: 100vh;\n\n padding: 76px 20px 40px;\n}\n\n.container {\n width: 100%;\n max-width: 950px;\n}\n\n.page {\n display: none;\n animation: fade 0.4s ease;\n}\n\n.page.active {\n display: block;\n}\n\n@keyframes fade {\n from {\n opacity: 0;\n transform: translateY(15px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Hero */\n\n.hero {\n text-align: center;\n}\n\n.CoLogo {\n width: 500px;\n margin-bottom: -50px;\n}\n\n/* Light */\n.CoLogoLight {\n display: inline-block;\n}\n\n.CoLogoDark {\n display: none;\n}\n\n/* Dark */\n.dark-theme .CoLogoLight {\n display: none;\n}\n\n.dark-theme .CoLogoDark {\n display: inline-block;\n}\n\n.hero h1 {\n font-family: \"Modak\", system-ui;\n font-weight: 400;\n font-size: 40px;\n margin-bottom: 15px;\n}\n\n.hero p {\n color: var(--text);\n font-family: \"Atkinson Hyperlegible\", sans-serif;\n margin-bottom: 40px;\n font-size: 20px;\n}\n\n#start-btn {\n background: #6da7ff;\n color: white;\n\n border: none;\n\n padding: 15px 50px;\n\n border-radius: 50px;\n\n font-size: 18px;\n font-weight: 600;\n\n cursor: pointer;\n\n transition: 0.25s;\n}\n\n#start-btn:hover {\n background: #4b8df7;\n\n transform: translateY(-2px);\n}\n\n/* QUIZZZZZ */\n\n.progress-wrapper {\n margin-bottom: 35px;\n}\n\n.progress-bar {\n width: 100%;\n height: 12px;\n\n background: #d9e8ff;\n\n border-radius: 20px;\n\n overflow: hidden;\n}\n\n#progress {\n width: 0%;\n\n height: 100%;\n\n background: #6da7ff;\n\n transition: 0.3s;\n}\n\n#progress-text {\n margin-top: 10px;\n\n text-align: right;\n\n color: #6d7aa8;\n}\n\n.question-container {\n text-align: center;\n\n margin-bottom: 35px;\n}\n\n#question {\n font-family: \"Ultra\", serif;\n font-weight: 700;\n font-style: normal;\n font-size: 40px;\n}\n\n.answers {\n display: grid;\n\n grid-template-columns: repeat(3, 1fr);\n\n gap: 20px;\n}\n\n.answer-btn {\n background: white;\n border: 2px solid #b7d0ff;\n border-radius: 14px;\n padding: 25px;\n min-height: 100px;\n font-family: \"Atkinson Hyperlegible\", sans-serif;\n font-size: 24px;\n cursor: pointer;\n transition: 0.25s;\n color: #2c4177;\n}\n\n.answer-btn:hover {\n background: #eef5ff;\n\n transform: translateY(-4px);\n}\n\n.answer-btn.selected {\n background: #6da7ff;\n\n color: white;\n\n border-color: #6da7ff;\n}\n\n/* Next Button */\n\n#next-btn {\n width: 100%;\n\n margin-top: 35px;\n\n background: #6da7ff;\n\n color: white;\n\n border: none;\n\n border-radius: 40px;\n\n height: 55px;\n\n font-size: 25px;\n\n font-family: \"Ultra\", serif;\n font-weight: 700;\n\n cursor: pointer;\n\n transition: 0.25s;\n}\n\n#next-btn:hover {\n background: #4b8df7;\n}\n\n/* RESULTS PAGE */\n\n.results-layout {\n display: grid;\n margin-top: 45px;\n grid-template-columns: 330px 1fr;\n gap: 35px;\n align-items: start;\n}\n\n/* LEFT PANEL */\n\n.personality-panel {\n background: var(--background);\n\n border: 3px solid var(--medium-blue);\n\n border-radius: 14px;\n\n overflow: hidden;\n\n display: flex;\n\n flex-direction: column;\n}\n\n.personality-panel h1 {\n font-size: 35px;\n\n padding: 25px 25px 10px;\n\n color: var(--text);\n}\n\n.primary-personality,\n.secondary-personality {\n padding: 0 25px 25px;\n}\n\n.secondary-personality {\n padding-top: 0px;\n}\n\n.primary-personality h2,\n.secondary-personality h2 {\n font-size: 28px;\n\n color: var(--text);\n\n margin-bottom: 10px;\n}\n\n.secondary-personality h3 {\n color: #656ca2;\n\n margin-bottom: 10px;\n\n font-size: 22px;\n}\n\n.primary-personality p,\n.secondary-personality p {\n line-height: 1.6;\n\n font-size: 20px;\n\n color: var(--text);\n}\n\n/* Retake Button */\n\n#restart-btn {\n margin-top: auto;\n border: none;\n border-top: 3px solid var(--medium-blue);\n background: var(--background);\n color: var(--retake-blue);\n text-decoration: underline;\n font-size: 20px;\n cursor: pointer;\n padding: 4px;\n transition: 0.25s;\n}\n\n#restart-btn:hover {\n color: #6397ff;\n}\n\n/* RIGHT PANEL */\n\n.jobs-panel h1 {\n font-size: 40px;\n margin-bottom: 10px;\n\n color: var(--text);\n}\n\n.other-jobs {\n margin-top: 40px;\n}\n\n.other-jobs h2 {\n margin-bottom: 20px;\n\n font-size: 30px;\n\n color: var(--text);\n}\n\n/* Career Cards */\n\n.career-card {\n display: flex;\n\n justify-content: space-between;\n\n align-items: flex-start;\n\n background: var(--background);\n\n border: 3px solid var(--medium-blue);\n\n border-radius: 18px;\n\n padding: 20px;\n\n margin-bottom: 18px;\n\n gap: 20px;\n}\n\n.career-info {\n flex: 1;\n}\n\n.career-info h3 {\n font-size: 28px;\n\n margin-bottom: 8px;\n\n color: var(--text);\n}\n\n.career-info p {\n font-size: 18px;\n\n color: var(--text);\n\n line-height: 1.5;\n}\n\n/* Top Match Badge */\n\n.badge {\n display: inline-block;\n\n margin-top: 15px;\n\n background: var(--light-blue);\n\n color: var(--text);\n\n padding: 8px 16px;\n\n border-radius: 999px;\n\n font-size: 15px;\n\n font-weight: 600;\n}\n\n/* Learn More Button */\n\n.learn-more-btn {\n align-self: flex-end;\n\n background: none;\n\n border: none;\n\n color: var(--retake-blue);\n\n font-size: 24px;\n\n cursor: pointer;\n\n transition: 0.2s;\n\n white-space: nowrap;\n}\n\n.learn-more-btn:hover {\n color: #6397ff;\n\n transform: translateX(4px);\n}\n\n.top-match {\n border-color: var(--medium-blue);\n}\n\n/* Loading */\n\n.results-loading {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 18px;\n padding: 60px 20px;\n color: #6d7aa8;\n font-size: 18px;\n}\n\n.spinner {\n width: 48px;\n height: 48px;\n border: 5px solid var(--light-blue);\n border-top-color: var(--vibrant-blue);\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n@media (max-width: 600px) {\n .CoLogo {\n width: min(320px, 88vw);\n margin-bottom: -20px;\n }\n #question {\n font-size: 24px;\n }\n\n /* phone */\n .answers {\n grid-template-columns: repeat(2, 1fr);\n gap: 12px;\n }\n\n .answer-btn {\n font-size: 18px;\n padding: 16px 10px;\n min-height: 70px;\n }\n\n #next-btn {\n font-size: 20px;\n height: 48px;\n }\n\n .personality-panel h1 {\n font-size: 26px;\n }\n .primary-personality h2,\n .secondary-personality h2 {\n font-size: 22px;\n }\n .primary-personality p,\n .secondary-personality p {\n font-size: 16px;\n }\n .career-info h3 {\n font-size: 22px;\n }\n .career-info p {\n font-size: 16px;\n }\n .jobs-panel h1 {\n font-size: 28px;\n }\n\n .hero h1 {\n font-size: 32px;\n }\n .hero p {\n font-size: 17px;\n }\n}\n\n@media (max-width: 420px) {\n .answers {\n grid-template-columns: 1fr;\n }\n #question {\n font-size: 22px;\n }\n}\n\n@media (max-width: 900px) {\n .CoLogo {\n width: 350px;\n }\n .results-layout {\n grid-template-columns: 1fr;\n }\n\n .personality-panel {\n order: 1;\n }\n\n .jobs-panel {\n order: 2;\n }\n\n .career-card {\n flex-direction: column;\n }\n\n .learn-more-btn {\n align-self: flex-start;\n\n margin-top: 15px;\n }\n}",[],[119],"76ffdd26-0c97-4a2f-98ca-c7a03872e094","nav.js","26c83626-7a0b-11f1-82de-1607ee4eb77e",79,["D",1784341281514],"(function () {\n const navEl = document.querySelector(\"nav\");\n if (!navEl) return;\n\n let isHovering = false;\n let hideTimer = null;\n const HIDE_DELAY = 1200;\n\n const isMobile = () => window.innerWidth <= 800;\n\n function showNav() {\n navEl.classList.remove(\"nav-hidden\");\n }\n\n function scheduleHide() {\n clearTimeout(hideTimer);\n\n if (isMobile()) {\n showNav();\n return;\n }\n\n hideTimer = setTimeout(() => {\n if (!isHovering) {\n navEl.classList.add(\"nav-hidden\");\n }\n }, HIDE_DELAY);\n }\n\n window.addEventListener(\n \"scroll\",\n () => {\n showNav();\n scheduleHide();\n },\n { passive: true },\n );\n\n navEl.addEventListener(\"mouseenter\", () => {\n if (isMobile()) return;\n isHovering = true;\n clearTimeout(hideTimer);\n showNav();\n });\n\n navEl.addEventListener(\"mouseleave\", () => {\n if (isMobile()) return;\n isHovering = false;\n scheduleHide();\n });\n\n const HOVER_ZONE_HEIGHT = 12;\n document.addEventListener(\n \"mousemove\",\n (e) => {\n if (isMobile()) return;\n\n if (e.clientY <= navEl.offsetHeight + HOVER_ZONE_HEIGHT) {\n isHovering = true;\n clearTimeout(hideTimer);\n showNav();\n } else if (isHovering) {\n isHovering = false;\n scheduleHide();\n }\n },\n { passive: true },\n );\n\n navEl.addEventListener(\"touchstart\", () => {\n if (isMobile()) return;\n isHovering = true;\n clearTimeout(hideTimer);\n showNav();\n });\n\n if (isMobile()) {\n showNav();\n } else {\n scheduleHide();\n }\n})();\n\nfunction showSidebar() {\n const sidebar = document.querySelector(\".sidebar\");\n sidebar.style.display = \"flex\";\n}\n\nfunction hideSidebar() {\n const sidebar = document.querySelector(\".sidebar\");\n sidebar.style.display = \"none\";\n}\n\nconst themeToggleBtn = document.querySelector(\".theme-toggle\");\nconst themeIcon = document.getElementById(\"theme-icon\");\n\nfunction toggleTheme() {\n themeToggleBtn.classList.add(\"flip\");\n\n setTimeout(() => {\n if (document.body.classList.contains(\"dark-theme\")) {\n document.body.classList.remove(\"dark-theme\");\n themeIcon.src = \"img/sun.png\";\n localStorage.setItem(\"theme\", \"light\");\n } else {\n document.body.classList.add(\"dark-theme\");\n themeIcon.src = \"img/moon.png\";\n localStorage.setItem(\"theme\", \"dark\");\n }\n }, 200);\n\n setTimeout(() => {\n themeToggleBtn.classList.remove(\"flip\");\n }, 400);\n}\n\nwindow.addEventListener(\"DOMContentLoaded\", () => {\n const savedTheme = localStorage.getItem(\"theme\");\n if (savedTheme === \"dark\") {\n document.body.classList.add(\"dark-theme\");\n themeIcon.src = \"img/moon.png\";\n } else {\n document.body.classList.remove(\"dark-theme\");\n themeIcon.src = \"img/sun.png\";\n }\n});",[],[127],"39f95511-1b53-4785-865b-0df7265b6e39","nav.css","c437e4a2-7a0a-11f1-9348-1607ee4eb77e",47,["D",1783780243700],9,":root {\n --background: #f5f5f5;\n --grid: #eaeaff;\n --purple: #b469ff;\n --pink: #ff66bc;\n --orange: #fc6b44;\n --yellow: #ffea29;\n --green: #03d66c;\n --vibrant-blue: #6397ff;\n --medium-blue: #7eb0fc;\n --light-blue: #9fc2fd;\n --text: #1a2376;\n}\n\n.dark-theme {\n --background: #0f1427;\n --grid: #252e50;\n --purple: #b469ff;\n --pink: #ff66bc;\n --orange: #fc6b44;\n --yellow: #ffea29;\n --green: #03d66c;\n --vibrant-blue: #4891ff;\n --medium-blue: #132542;\n --light-blue: #1b3864;\n --text: #f5f5f5;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n background-color: var(--background);\n color: var(--text);\n font-family: \"Inter\", sans-serif;\n transition: background-color 0.4s ease, color 0.4s ease;\n padding-top: 76px;\n}\n\nnav {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n z-index: 1000;\n background: var(--medium-blue);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n transition: background 0.4s ease, transform 0.35s ease, opacity 0.35s ease;\n}\n\nnav.nav-hidden {\n transform: translateY(-100%);\n opacity: 0;\n pointer-events: none;\n}\n\nnav ul.main-menu {\n width: 100%;\n list-style: none;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n padding: 10px 20px;\n}\n\nnav a {\n height: 100%;\n padding: 0 20px;\n text-decoration: none;\n font-size: 22px;\n font-weight: 500;\n display: flex;\n align-items: center;\n color: var(--text);\n transition: opacity 0.2s ease;\n}\n\nnav a:hover {\n opacity: 0.8;\n}\n\n.logo {\n margin-right: auto;\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.logo img {\n height: 55px;\n width: auto;\n}\n\n.logo .logo-dark {\n display: none;\n}\n\n.dark-theme .logo .logo-light {\n display: none;\n}\n\n.dark-theme .logo .logo-dark {\n display: block;\n}\n\nnav .main-menu .logo span {\n font-family: \"Ultra\", serif;\n font-weight: 400;\n font-style: normal;\n font-size: 36px;\n color: var(--text);\n}\n\n.theme-toggle {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n margin-left: 10px;\n}\n\n.theme-toggle img {\n width: 35px;\n height: 35px;\n}\n\n@keyframes fullSpin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n.theme-toggle.flip img {\n animation: fullSpin 0.4s ease-in-out;\n}\n\n.menu-button {\n display: none;\n cursor: pointer;\n padding: 0 10px;\n}\n\n.menu-button svg {\n width: 30px;\n height: 30px;\n stroke: white;\n}\n\n.sidebar {\n position: fixed;\n top: 0;\n right: 0;\n height: 100vh;\n width: 250px;\n z-index: 999;\n background-color: var(--medium-blue);\n box-shadow: -10px 0 20px rgba(0, 0, 0, 0.15);\n display: none;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n padding: 20px;\n list-style: none;\n}\n\n.sidebar li {\n width: 100%;\n margin-bottom: 15px;\n}\n\n.sidebar a {\n width: 100%;\n font-size: 24px;\n}\n\n.close-button {\n cursor: pointer;\n border: none;\n outline: none;\n background: none;\n font-size: 45px;\n color: #ffffff;\n}\n\n@media (max-width: 800px) {\n nav.nav-hidden {\n transform: translateY(0) !important;\n opacity: 1 !important;\n pointer-events: auto !important;\n }\n\n .hideOnMobile {\n display: none;\n }\n\n .menu-button {\n display: block;\n }\n}\n\n@media (max-width: 400px) {\n .sidebar {\n width: 100%;\n }\n}",[],[135],"a723805f-e112-4a62-82ba-43a679a674b0","jobbig.js","6c39dc96-8e47-11f1-8015-1607ee4eb77e",190,["D",1785657337433],"const API_URL =\n \"https://script.google.com/macros/s/AKfycbxQBx4JvjiaqWRjl_Uq86z-kfxSgsB4wLbRgEZOonNf6yczHxkBlSA50Zx_1lqpMKHt/exec\";\n\nconst TYPES = [\"R\", \"I\", \"A\", \"S\", \"E\", \"C\"];\n\nconst jobsGrid = document.getElementById(\"jobs-grid\");\nconst jobsLoader = document.getElementById(\"jobs-loader\");\nconst noResults = document.getElementById(\"no-results\");\nconst searchInput = document.getElementById(\"search-input\");\n\n\nlet allJobs = [];\n\n\nwindow.addEventListener(\"DOMContentLoaded\", fetchAllJobs);\n\n\nasync function fetchAllJobs() {\n try {\n const responses = await Promise.all(\n TYPES.map((t) =>\n fetch(`${API_URL}?action=results&primary=${t}&secondary=R`)\n .then((r) => r.json())\n )\n );\n\n const seen = new Set();\n const jobs = [];\n\n responses.forEach((data) => {\n const batch = [\n ...(data.topMatches || []),\n ...(data.otherJobs || []),\n ];\n batch.forEach((job) => {\n if (job.id && !seen.has(job.id)) {\n seen.add(job.id);\n jobs.push(job);\n }\n });\n });\n\n jobs.sort((a, b) => (a.title || \"\").localeCompare(b.title || \"\"));\n\n allJobs = jobs;\n renderGrid(allJobs);\n } catch (err) {\n console.error(err);\n jobsLoader.innerHTML =\n `

Could not load careers — please try again later.

`;\n }\n}\n\nconst template = document.getElementById(\"job-card-template\");\n\nfunction renderGrid(jobs) {\n jobsLoader.classList.add(\"hidden\");\n jobsGrid.innerHTML = \"\";\n\n if (jobs.length === 0) {\n noResults.classList.remove(\"hidden\");\n return;\n }\n noResults.classList.add(\"hidden\");\n\n jobs.forEach((job) => {\n const clone = template.content.cloneNode(true);\n const card = clone.querySelector(\".jb-card\");\n\n const img = clone.querySelector(\".jb-card-image img\");\n if (job.image) {\n img.src = job.image;\n } else {\n img.src = `img/${job.id}.png`;\n }\n img.alt = job.title || \"\";\n img.onerror = () => { img.style.display = \"none\"; };\n\n clone.querySelector(\".jb-card-title\").textContent =\n job.title || \"\";\n clone.querySelector(\".jb-card-desc\").textContent =\n job.description || job.shortDescription || \"\";\n\n const btn = clone.querySelector(\".jb-learn-more\");\n btn.addEventListener(\"click\", () => {\n window.location.href = `job.html#${job.id}`;\n });\n\n card.addEventListener(\"click\", (e) => {\n if (e.target.closest(\".jb-learn-more\")) return;\n window.location.href = `job.html#${job.id}`;\n });\n\n jobsGrid.appendChild(clone);\n });\n}\n\n\nsearchInput.addEventListener(\"input\", () => {\n const q = searchInput.value.trim().toLowerCase();\n\n if (!q) {\n renderGrid(allJobs);\n return;\n }\n\n const filtered = allJobs.filter(\n (job) =>\n (job.title || \"\").toLowerCase().includes(q) ||\n (job.description || \"\").toLowerCase().includes(q)\n );\n\n renderGrid(filtered);\n});",[],[144],"8ad4fef5-6658-406a-a746-d190e4b9ba9e","jobbig.html","a01f3132-8e47-11f1-a70c-1607ee4eb77e",194,["D",1785657379827],"\n\n \n \n \n Jobs — Cureer\n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n\n \n

\n \n \n

\n\n

Loading careers…

\n\n

No careers match your search.

\n\n

\n\n \n \n",[],[152],"0fa69c51-0352-4726-8363-77e4d690dba5","jobbig.css","b6be2f74-8e47-11f1-a55f-1607ee4eb77e",198,["D",1785657418945],":root {\n --background: #f5f5f5;\n --grid: #eaeaff;\n --purple: #b469ff;\n --pink: #ff66bc;\n --orange: #fc6b44;\n --yellow: #ffea29;\n --green: #03d66c;\n --vibrant-blue: #6397ff;\n --medium-blue: #7eb0fc; \n --light-blue: #9fc2fd;\n --text: #1a2376;\n --retake-blue: #7eb0fc;\n}\n\n.dark-theme {\n --background: #0f1427;\n --grid: #252e50;\n --purple: #b469ff;\n --pink: #ff66bc;\n --orange: #fc6b44;\n --yellow: #ffea29;\n --green: #03d66c;\n --vibrant-blue: #4891ff;\n --medium-blue: #132542;\n --light-blue: #1b3864;\n --text: #f5f5f5;\n --retake-blue: #7eb0fc;\n}\n\nbody {\n background-color: var(--background);\n color: var(--text);\n font-family: \"Atkinson Hyperlegible\", sans-serif;\n transition: background-color 0.4s ease, color 0.4s ease;\n\n background-image:\n linear-gradient(var(--grid) 0.1em, transparent 0.1em),\n linear-gradient(90deg, var(--grid) 0.1em, transparent 0.1em);\n background-size: 2em 2em;\n}\n\n/* Search */\n\n.search-wrapper {\n display: flex;\n justify-content: center;\n padding: 28px 20px 20px;\n}\n\n.search-bar {\n display: flex;\n align-items: center;\n background: var(--background);\n border: 2.5px solid var(--light-blue);\n border-radius: 50px;\n padding: 10px 18px 10px 24px;\n width: min(540px, 100%);\n gap: 10px;\n box-shadow: 0 2px 10px rgba(100, 140, 255, 0.12);\n transition: border-color 0.2s, box-shadow 0.2s;\n}\n\n.search-bar:focus-within {\n border-color: var(--vibrant-blue);\n box-shadow: 0 3px 16px rgba(100, 140, 255, 0.22);\n}\n\n#search-input {\n flex: 1;\n border: none;\n outline: none;\n background: transparent;\n font-size: 20px;\n color: var(--text);\n font-family: \"Atkinson Hyperlegible\", sans-serif;\n}\n\n#search-input::placeholder {\n color: var(--text);\n opacity: 0.5;\n}\n\n.search-icon {\n background: none;\n border: none;\n cursor: pointer;\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--text);\n}\n\n.search-icon svg {\n width: 26px;\n height: 26px;\n}\n\n.jobs-container {\n width: min(1200px, 95%);\n margin: 0 auto;\n padding: 0 0 80px;\n position: relative;\n min-height: 300px;\n}\n\n/* Loader */\n\n.jobs-loader {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 18px;\n padding: 60px 0;\n}\n\n.jobs-loader.hidden {\n display: none;\n}\n\n.jobs-loader p {\n font-size: 18px;\n color: var(--retake-blue);\n}\n\n.loader-spinner {\n width: 52px;\n height: 52px;\n border: 5px solid var(--grid);\n border-top-color: var(--vibrant-blue);\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n}\n\n@keyframes spin {\n to { transform: rotate(360deg); }\n}\n\n.no-results {\n text-align: center;\n font-size: 20px;\n color: var(--text);\n padding: 60px 0;\n opacity: 0.6;\n}\n\n.hidden {\n display: none !important;\n}\n\n\n.jobs-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 18px;\n}\n\n/* Card */\n\n.jb-card {\n background: var(--background);\n border: 3px solid var(--medium-blue);\n border-radius: 14px;\n overflow: hidden;\n cursor: pointer;\n transition: transform 0.22s ease, box-shadow 0.22s ease;\n display: flex;\n flex-direction: column;\n}\n\n.jb-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 8px 28px rgba(100, 140, 255, 0.25);\n}\n\n.jb-card-image {\n background: var(--light-blue);\n display: flex;\n align-items: flex-end;\n justify-content: center;\n height: 180px;\n overflow: hidden;\n padding-top: 12px;\n}\n\n.jb-card-image img {\n width: auto;\n height: 100%;\n object-fit: contain;\n object-position: bottom;\n display: block;\n}\n\n.jb-card-image img:not([src]),\n.jb-card-image img[src=\"\"] {\n visibility: hidden;\n}\n\n.jb-card-body {\n padding: 14px 16px 16px;\n display: flex;\n flex-direction: column;\n flex: 1;\n}\n\n.jb-card-title {\n font-family: \"Atkinson Hyperlegible\", sans-serif;\n font-weight: 700;\n font-size: 20px;\n color: var(--text);\n margin-bottom: 6px;\n line-height: 1.25;\n}\n\n.jb-card-desc {\n font-size: 16px;\n color: var(--text);\n line-height: 1.45;\n flex: 1;\n opacity: 0.9;\n}\n\n.jb-learn-more {\n margin-top: 10px;\n align-self: flex-end;\n background: none;\n border: none;\n cursor: pointer;\n font-size: 15px;\n font-weight: 700;\n color: var(--text);\n padding: 0;\n text-decoration: underline;\n text-underline-offset: 3px;\n transition: opacity 0.2s;\n}\n\n.jb-learn-more:hover {\n opacity: 0.7;\n}\n\n@media (max-width: 900px) {\n .jobs-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n@media (max-width: 600px) {\n .search-wrapper { padding: 20px 12px 14px; }\n\n .jb-card-title { font-size: 17px; }\n .jb-card-desc { font-size: 14px; }\n .jb-card-image { height: 150px; }\n}\n\n@media (max-width: 560px) {\n .jobs-grid {\n grid-template-columns: 1fr;\n }\n\n .search-bar {\n padding: 8px 14px 8px 18px;\n }\n\n #search-input {\n font-size: 17px;\n }\n}",[],[160],"78ad4aaa-175b-4619-b820-e99238c3c6bd","job.js","66596e5e-8e47-11f1-a0c7-1607ee4eb77e",187,["D",1785657282078],"const API_URL =\n \"https://script.google.com/macros/s/AKfycbxQBx4JvjiaqWRjl_Uq86z-kfxSgsB4wLbRgEZOonNf6yczHxkBlSA50Zx_1lqpMKHt/exec\";\n\nconst descriptions = {\n R: \"You enjoy practical, hands-on activities and solving real-world problems.\",\n I: \"You enjoy analysing, researching, and discovering new ideas.\",\n A: \"You enjoy expressing yourself through creativity and imagination.\",\n S: \"You enjoy helping, teaching, and working with other people.\",\n E: \"You enjoy leading, persuading, and managing people or projects.\",\n C: \"You enjoy organising, planning, and working with structure.\",\n};\n\nconst heroImage = document.getElementById(\"job-image\");\n\nconst jobTitle = document.getElementById(\"job-title\");\n\nconst jobDescription = document.getElementById(\"job-description\");\n\nconst personalityContainer = document.getElementById(\n \"personality-container\",\n);\n\nconst salaryStart = document.getElementById(\"salary-start\");\n\nconst salaryEnd = document.getElementById(\"salary-end\");\n\nconst pathway = document.getElementById(\"pathway\");\n\nconst schoolsList = document.getElementById(\"school-list\");\n\nconst startNow = document.getElementById(\"start-now\");\n\nwindow.addEventListener(\"DOMContentLoaded\", loadJob);\nwindow.addEventListener(\"hashchange\", loadJob);\n\n\nconst pageLoader = document.getElementById(\"page-loader\");\n\nfunction hideLoader() {\n if (pageLoader) pageLoader.classList.add(\"hidden\");\n}\n\nasync function loadJob() {\n const jobID = window.location.hash.slice(1) || null;\n\n window.scrollTo({ top: 0, behavior: \"smooth\" });\n\n if (!jobID) {\n hideLoader();\n jobTitle.textContent = \"Job Not Found\";\n jobDescription.textContent = \"No job ID was provided in the URL.\";\n return;\n }\n\n if (pageLoader) pageLoader.classList.remove(\"hidden\");\n\n try {\n const response = await fetch(\n `${API_URL}?action=job&id=${jobID}`,\n );\n\n const data = await response.json();\n\n if (data.error) {\n hideLoader();\n jobTitle.textContent = \"Job Not Found\";\n jobDescription.textContent = data.error;\n return;\n }\n\n displayJob(data);\n hideLoader();\n } catch (error) {\n console.error(error);\n hideLoader();\n jobTitle.textContent = \"Error\";\n jobDescription.textContent =\n \"Could not load job data. Please try again later.\";\n }\n}\n\n\nfunction displayJob(data) {\n\n heroImage.src = data.image;\n\n heroImage.alt = data.title;\n\n jobTitle.textContent = data.title;\n\n jobDescription.textContent = data.shortDescription;\n\n personalityContainer.innerHTML = `\n

${personalityName(data.primary)}

${descriptions[data.primary] || data.primaryDescription || \"Description not available.\"}

${personalityName(data.secondary)}

${descriptions[data.secondary] || data.secondaryDescription || \"Description not available.\"}

\n `;\n\n\n salaryStart.textContent = data.salaryStart;\n\n salaryEnd.textContent = data.salaryEnd;\n\n\n pathway.innerHTML = createPathway(data.pathway);\n\n\n startNow.textContent = data.startNow;\n\n\n schoolsList.innerHTML = \"\";\n\n if (data.schools && data.schools.length > 0) {\n data.schools.forEach((school) => {\n const li = document.createElement(\"li\");\n\n li.textContent = school;\n\n schoolsList.appendChild(li);\n });\n } else {\n schoolsList.innerHTML = \"

No schools listed yet.

\";\n }\n\n loadQuiz(data.quiz);\n\n loadRelatedJobs(data.relatedJobs);\n}\n\n\nfunction personalityName(letter) {\n switch (letter) {\n case \"R\":\n return \"Realistic\";\n\n case \"I\":\n return \"Investigative\";\n\n case \"A\":\n return \"Artistic\";\n\n case \"S\":\n return \"Social\";\n\n case \"E\":\n return \"Enterprising\";\n\n case \"C\":\n return \"Conventional\";\n\n default:\n return letter || \"Unknown\";\n }\n}\n\n\nfunction createPathway(path) {\n if (!path) return \"

Pathway information not available.

\";\n\n const items = path.split(\"→\");\n\n let html = \"\";\n\n items.forEach((step, index) => {\n const text = step.trim();\n if (text) {\n html += `

${text}

`;\n\n if (index < items.length - 1) {\n html += `

↓

`;\n }\n }\n });\n\n return html;\n}\n\n\nconst quizQuestion = document.getElementById(\"quiz-question\");\n\nconst quizOptions = document.getElementById(\"quiz-options\");\n\nconst quizProgress = document.getElementById(\"quiz-progress\");\n\nconst quizProgressFill = document.getElementById(\"quiz-progress-fill\");\n\nconst quizNext = document.getElementById(\"quiz-next\");\n\n\nlet quizData = [];\n\nlet currentQuiz = 0;\n\nlet selectedAnswer = null;\n\nlet score = 0;\n\nfunction loadQuiz(questions) {\n quizData = questions;\n\n currentQuiz = 0;\n\n score = 0;\n\n if (!quizData || quizData.length === 0) {\n quizQuestion.textContent = \"No quiz available for this job yet.\";\n\n quizOptions.innerHTML = \"\";\n\n quizProgress.textContent = \"\";\n\n quizProgressFill.style.width = \"0%\";\n\n quizNext.style.display = \"none\";\n\n return;\n }\n\n quizNext.style.display = \"\";\n\n showQuizQuestion();\n}\n\n\nfunction showQuizQuestion() {\n selectedAnswer = null;\n\n const question = quizData[currentQuiz];\n\n quizQuestion.textContent = question.question;\n\n quizOptions.innerHTML = \"\";\n\n const options = [\n question.option1,\n\n question.option2,\n ];\n\n options.forEach((option) => {\n const button = document.createElement(\"button\");\n\n button.textContent =\n typeof option === \"boolean\"\n ? option ? \"True\" : \"False\"\n : option;\n\n button.className = \"quiz-option\";\n\n button.addEventListener(\"click\", () => {\n document\n .querySelectorAll(\".quiz-option\")\n .forEach((btn) => {\n btn.classList.remove(\"selected\");\n });\n\n button.classList.add(\"selected\");\n\n selectedAnswer = option;\n });\n\n quizOptions.appendChild(button);\n });\n\n updateQuizProgress();\n}\n\n\nfunction updateQuizProgress() {\n quizProgress.textContent = `Question ${currentQuiz + 1} / ${quizData.length}`;\n\n quizProgressFill.style.width = ((currentQuiz + 1) / quizData.length) * 100 +\n \"%\";\n}\n\nquizNext.addEventListener(\"click\", () => {\n if (selectedAnswer === null) {\n alert(\"Please choose an answer.\");\n\n return;\n }\n\n if (\n selectedAnswer ===\n quizData[currentQuiz].correct\n ) {\n score++;\n }\n\n currentQuiz++;\n\n if (currentQuiz < quizData.length) {\n showQuizQuestion();\n } else {\n finishQuiz();\n }\n});\n\n\nfunction finishQuiz() {\n quizQuestion.textContent = `You scored ${score} / ${quizData.length}!`;\n\n quizOptions.innerHTML = \"\";\n\n quizProgress.textContent = \"Completed\";\n\n quizProgressFill.style.width = \"100%\";\n\n quizNext.style.display = \"none\";\n\n const button = document.createElement(\"button\");\n\n button.className = \"quiz-option\";\n\n button.textContent = \"Try Again\";\n\n button.addEventListener(\"click\", () => {\n loadQuiz(quizData);\n });\n\n quizOptions.appendChild(button);\n}\n\nconst relatedJobsContainer = document.getElementById(\"related-jobs\");\n\n\nfunction loadRelatedJobs(jobs) {\n relatedJobsContainer.innerHTML = \"\";\n\n if (!jobs || jobs.length === 0) {\n relatedJobsContainer.innerHTML = \"

No related careers found.

\";\n\n return;\n }\n\n jobs.forEach((job) => {\n const card = createRelatedCard(job);\n\n relatedJobsContainer.appendChild(card);\n });\n}\n\n\nfunction createRelatedCard(job) {\n const card = document.createElement(\"div\");\n\n card.className = \"job-card\";\n\n card.innerHTML = `\n\n \n\n

\n\n

${job.title}

\n\n

${job.description}

\n\n \n\n Learn More →\n\n \n\n

\n\n `;\n\n card\n .querySelector(\".learn-more-btn\")\n .addEventListener(\"click\", () => {\n window.location.href = `job.html#${job.id}`;\n });\n\n return card;\n}\n\nconst previousRelated = document.getElementById(\"previous-related\");\n\nconst nextRelated = document.getElementById(\"next-related\");\n\nconst CARD_SCROLL = 320; \n\nif (previousRelated) {\n previousRelated.addEventListener(\"click\", () => {\n relatedJobsContainer.scrollBy({ left: -CARD_SCROLL, behavior: \"smooth\" });\n });\n}\n\nif (nextRelated) {\n nextRelated.addEventListener(\"click\", () => {\n relatedJobsContainer.scrollBy({ left: CARD_SCROLL, behavior: \"smooth\" });\n });\n}",[],[168],"ad33b69f-793c-4be3-9634-53200a8f6075","job.html","97691202-8e46-11f1-8dce-1607ee4eb77e",180,["D",1785657003929],"\n\n \n \n \n Career Information\n \n \n \n \n \n \n \n \n \n\n \n\n \n\n

\n\n $\"Career$ \n

\n\n

Loading career info…

\n\n

\n Accountant\n

\n\n

\n They help companies keep track of their money.\n

\n\n

Does this job match me?

\n\n

\n This career usually suits people with these personalities.\n

\n\n

\n\n\n

Salary Expectation

\n\n

Estimated salary in Malaysia.

\n\n

\n Starting Salary\n\n

\n RM0\n

\n\n \n →\n \n\n

\n Experienced Salary\n\n

\n RM0\n

\n\n \n *Salary estimates may vary.\n \n

\n\n\n

Academic Pathway

\n\n

One possible route into this career.

\n\n

Suggested Schools

\n\n

Institutions offering related courses.

\n\n

Start Now

\n\n

\n\n\n

Test Your Job Knowledge

\n\n

\n Question 1 / 3\n

\n\n

\n\n \n

\n\n\n \n

\n\n\n \n \n",[],[176],"236fbb40-784a-4309-af09-47704ffee2d0","job.css","0d377802-8e47-11f1-91f4-1607ee4eb77e",184,["D",1785657134486],":root {\n --background: #f5f5f5;\n --grid: #eaeaff;\n --purple: #b469ff;\n --pink: #ff66bc;\n --orange: #fc6b44;\n --yellow: #ffea29;\n --green: #03d66c;\n --vibrant-blue: #6397ff;\n --medium-blue: #7eb0fc; \n --light-blue: #9fc2fd;\n --text: #1a2376;\n --retake-blue: #7eb0fc;\n}\n\n.dark-theme {\n --background: #0f1427;\n --grid: #252e50;\n --purple: #b469ff;\n --pink: #ff66bc;\n --orange: #fc6b44;\n --yellow: #ffea29;\n --green: #03d66c;\n --vibrant-blue: #4891ff;\n --medium-blue: #132542;\n --light-blue: #1b3864;\n --text: #f5f5f5;\n --retake-blue: #7eb0fc;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n background-color: var(--background);\n color: var(--text);\n font-family: \"Atkinson Hyperlegible\", sans-serif;\n transition: background-color 0.4s ease, color 0.4s ease;\n padding-top: 76px;\n\n background-image:\n linear-gradient(var(--grid) 0.1em, transparent 0.1em),\n linear-gradient(90deg, var(--grid) 0.1em, transparent 0.1em);\n background-size: 2em 2em;\n}\n.container {\n width: min(1200px, 95%);\n margin: auto;\n padding: 30px 0 80px;\n position: relative;\n}\n\n#page-loader {\n position: fixed;\n inset: 0;\n z-index: 9000;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 18px;\n background: var(--background);\n}\n\n#page-loader p {\n font-size: 18px;\n color: var(--retake-blue);\n}\n\n#page-loader.hidden {\n display: none;\n}\n\n\n.loader-spinner {\n width: 52px;\n height: 52px;\n border: 5px solid var(--grid);\n border-top-color: var(--medium-blue);\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n}\n\n@keyframes spin {\n to { transform: rotate(360deg); }\n}\n\n\n.hero {\n background: var(--light-blue);\n overflow: hidden;\n text-align: center;\n position: relative;\n margin-top: -110px;\n}\n\n\n.hero-image {\n width: 400px;\n display: block;\n margin: 110px auto 10px;\n position: relative;\n z-index: 1;\n}\n\n.hero::after {\n content: \"\";\n display: block;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 30px;\n background: radial-gradient(circle at 20px 0, var(--background) 20px, transparent 21px)\n repeat-x;\n background-size: 40px 30px;\n transform: rotate(180deg);\n z-index: 2;\n}\n\n.cloud-divider img {\n display: block;\n width: 100%;\n}\n\n\n.job-heading {\n text-align: center;\n margin: 30px 0;\n}\n\n#job-title {\n font-size: 45px;\n font-weight: 700 !important;\n font-family: \"Ultra\", serif !important;\n}\n\n#job-description {\n font-size: 20px;\n color: var(--text);\n \n margin-top: 10px;\n}\n\n\n.info-grid {\n display: grid;\n grid-template-columns: 1fr 1.3fr;\n gap: 25px;\n margin-top: 35px;\n}\n\n.card {\n background: var(--background);\n border: 3px solid var(--light-blue);\n border-radius: 14px;\n padding: 22px;\n}\n\n.card h2 {\n margin-bottom: 12px;\n font-size: 34px;\n}\n\n.card h3 {\n margin-top: 12px;\n font-size: 28px;\n}\n\n.card p {\n line-height: 1.5;\n font-size: 20px;\n}\n\n.wide {\n grid-column: 1 / -1;\n}\n\n\n#personality-container {\n display: flex;\n flex-direction: column;\n gap: 14px;\n margin-top: 10px;\n}\n\n.personality-tag h3 {\n font-size: 22px;\n color: var(--text);\n}\n\n.personality-tag p {\n font-size: 17px;\n line-height: 1.5;\n}\n\n\n.salary {\n display: flex;\n justify-content: space-around;\n align-items: center;\n margin-top: 20px;\n}\n\n.salary > div {\n text-align: center;\n}\n\n.salary small {\n display: block;\n font-size: 15px;\n margin-bottom: 6px;\n color: var(--text);\n}\n\n.salary h3 {\n font-size: 40px;\n}\n\n.arrow {\n font-size: 42px;\n color: var(--retake-blue);\n}\n\n\n#pathway {\n text-align: center;\n font-size: 26px;\n line-height: 1.8;\n}\n\n.pathway-arrow {\n color: var(--retake-blue);\n font-size: 42px;\n}\n\n\n#school-list {\n margin-left: 26px;\n font-size: 19px;\n}\n\n#school-list li {\n margin: 8px 0;\n}\n\n\n.quiz-card {\n margin-top: 45px;\n background: var(--background);\n border: 3px solid var(--light-blue);\n border-radius: 18px;\n padding: 30px;\n text-align: center;\n}\n\n.quiz-card h2 {\n font-size: 30px;\n margin-bottom: 10px;\n}\n\n#quiz-progress {\n color: #5b6da3;\n margin-bottom: 10px;\n}\n\n.quiz-progress {\n height: 14px;\n background: #d9e4ff;\n border-radius: 20px;\n overflow: hidden;\n margin: 18px 0 30px;\n}\n\n#quiz-progress-fill {\n width: 0%;\n height: 100%;\n background: #7eb0fc;\n transition: width 0.3s ease;\n}\n\n#quiz-question {\n font-size: 32px;\n margin-bottom: 25px;\n}\n\n#quiz-options {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n#quiz-options button {\n height: 60px;\n border: 3px solid var(--retake-blue);\n background: white;\n border-radius: 15px;\n font-size: 22px;\n cursor: pointer;\n transition: 0.25s;\n}\n\n#quiz-options button:hover {\n background: var(--blue-light);\n}\n\n#quiz-options button.selected {\n background: var(--retake-blue);\n color: white;\n border-color: var(--retake-blue);\n}\n\n#quiz-next {\n margin-top: 25px;\n background: var(--retake-blue);\n color: white;\n border: none;\n padding: 14px 45px;\n border-radius: 40px;\n font-size: 18px;\n font-weight: 600;\n cursor: pointer;\n transition: 0.25s;\n}\n\n#quiz-next:hover {\n background: #253a86;\n}\n\n.related-section {\n margin-top: 45px;\n}\n\n.related-section h2 {\n text-align: center;\n font-size: 40px;\n margin-bottom: 25px;\n}\n\n.carousel-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.carousel-btn {\n flex-shrink: 0;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n border: 3px solid var(--light-blue);\n background: var(--background);\n color: var(--text);\n font-size: 22px;\n cursor: pointer;\n transition: background 0.2s, border-color 0.2s;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.carousel-btn:hover {\n background: var(--light-blue);\n}\n\n#related-jobs {\n display: flex;\n gap: 20px;\n overflow-x: auto;\n scroll-behavior: smooth;\n scroll-snap-type: x mandatory;\n padding-bottom: 12px;\n scrollbar-width: none;\n}\n\n#related-jobs::-webkit-scrollbar {\n display: none;\n}\n\n.job-card {\n flex: 0 0 300px;\n scroll-snap-align: start;\n background: var(--background);\n border: 2px solid var(--light-blue);\n border-radius: 18px;\n overflow: hidden;\n transition: transform 0.25s;\n}\n\n.job-card:hover {\n transform: translateY(-5px);\n}\n\n.job-card img {\n width: 100%;\n height: 180px;\n background: var(--light-blue);\n object-fit: cover;\n}\n\n.job-card-content {\n padding: 15px;\n}\n\n.job-card h3 {\n font-size: 20px;\n margin-bottom: 8px;\n font-family: \"Ultra\", serif;\n font-weight: 700;\n}\n\n.job-card p {\n font-size: 19px;\n line-height: 1.4;\n}\n\n.learn-more-btn {\n display: block;\n width: 100%;\n text-align: right;\n margin-top: 12px;\n background: none;\n border: none;\n color: var(--vibrant-blue);\n font-weight: bold;\n font-size: 16px;\n cursor: pointer;\n padding: 0 15px 15px;\n}\n\n.learn-more-btn:hover {\n color: var(--text);\n}\n\n.hero-image {\n width: min(400px, 85vw);\n}\n\n@media (max-width: 600px) {\n .hero-image { margin-top: 100px; }\n\n #job-title { font-size: 26px; }\n #job-description { font-size: 15px; }\n\n .card h2 { font-size: 22px; }\n .card h3 { font-size: 18px; margin-top: 8px; }\n .card p { font-size: 16px; }\n\n .salary h3 { font-size: 28px; }\n\n #pathway { font-size: 18px; }\n .pathway-arrow { font-size: 26px; }\n\n #school-list { font-size: 16px; }\n\n .quiz-card h2 { font-size: 22px; }\n #quiz-question { font-size: 20px; }\n #quiz-options button { font-size: 16px; height: 50px; }\n #quiz-next { font-size: 15px; padding: 12px 30px; }\n\n .related-section h2 { font-size: 26px; }\n\n .job-card {\n flex: 0 0 270px;\n }\n}\n\n@media (max-width: 1000px) {\n .info-grid {\n grid-template-columns: 1fr;\n }\n\n .wide {\n grid-column: auto;\n }\n\n #related-jobs {\n grid-template-columns: 1fr;\n }\n\n #job-title {\n font-size: 34px;\n }\n\n #job-description {\n font-size: 17px;\n }\n\n #quiz-question {\n font-size: 26px;\n }\n\n .salary {\n flex-direction: column;\n gap: 20px;\n }\n\n .arrow {\n transform: rotate(90deg);\n }\n #quiz-options button {\n font-size: 13px;\n}\n\n}",[],[184],["D",1785657939979],[],[19],"f40d1020-92c4-4933-af30-50ffbcd91767","img","6c27cdd4-7a0c-11f1-b9e1-1607ee4eb77e",24,["D",1783432926352],1,"directory",[203,204],[195],{"_33":213,"_13":214,"_35":215,"_37":196,"_38":39,"_40":216,"_42":43,"_44":217,"_17":218,"_47":24,"_48":219,"_50":51,"_52":-5,"_77":220,"_18":221},{"_33":205,"_13":206,"_35":207,"_37":196,"_38":39,"_40":208,"_42":43,"_44":209,"_17":114,"_47":24,"_48":210,"_50":51,"_52":-5,"_77":211,"_18":212},"2a8510f2-d624-4984-bb07-57f1728acfbb","star.png","3f7929b6-7d88-11f1-8829-1607ee4eb77e",57,["D",1783816034223],"https://mail.google.com/mail/u/0?ui=2&ik=8f87c42fe1&attid=0.1&permmsgid=msg-f:1870426276623248436&th=19f516c9e4af6c34&view=fimg&realattid=19f516c4fcb67a517e71&disp=thd&attbid=ANGjdJ-iDzYnEu5Eeq5xrIbZrVT6XGJ7n6YqncQyq03UdX9NlA6i7B-LBFmqunj-gMi9R6wFMHwwJxSBlhRCFJkdcfg7A1MDb7Du-zbyiA6FjYVZloyAMpKva5-ciUs&ats=2524608000000&sz=w1920-h945&auditContext=forDisplay%3Dtrue",[],[195,206],"28a7080b-990d-45b7-9a00-1d18c1e5fc78","logo.png","207696e4-7a0d-11f1-85ed-1607ee4eb77e",62,["D",1783816454922],6,"https://lh3.googleusercontent.com/chat_attachment/AP1Ws4t2aMk8oHRwbWZ_SunZYo2EElET1IlXN3EMnwaHWoOwooROWciTo7UdXzmHTqkuAz38rkXhiSisT3fKD1Rewrdn0atuBHUoBksIWbF3z532xkJwSsWluiSbCgEDJ6F-eFPFExf1I5VYDw1tmYRLiUhsnqBWtstGo5goHcjZJ-pS-rdhGNGEV5dSgAa5tqxGJdnsGjZaGY6ZgJv50LnIajRS5pdTLgFVdFzk1PrffQyy2eeUhSWmkMMtsL2TVnLgPVXjI_DO8Jo6tb7h8cmt8klkBBFcionYh-BY12XNW09fXwMCYxUgT272L-toSDpFbaM=w1920-h945-rw",[],[195,214],"b601698f-d59b-404a-a4f0-6ff34210ef90",["D",1783431759081],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","userId","a5372d44-4410-431b-b7ba-4cc45e50b8c6","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019f3ccc-6a6f-71fe-96b0-8fed2e021d1a","tursoName","b601698fd59b404aa4f06ff34210ef90","tursoHostname","b601698fd59b404aa4f06ff34210ef90-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789494036282],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_280":276},"org",{"_11":12,"_273":274,"_275":276,"_232":233,"_277":278,"_279":51},"branch",{"_17":93,"_13":16,"_33":39,"_265":222,"_266":-5,"_267":-5,"_268":-5,"_269":-5,"_270":-5,"_271":14,"_272":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","ChooHuiHarn","avatar","https://avatars.githubusercontent.com/u/166193576?v=4","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":222,"_13":14,"_44":364,"_224":-5,"_225":51,"_226":227,"_228":227,"_229":230,"_231":-5,"_232":233,"_234":82,"_235":43,"_236":-5,"_237":-5,"_238":239,"_240":241,"_242":243,"_244":245,"_246":365,"_248":-5,"_249":250,"_251":250,"_252":253,"_254":253,"_255":253,"_256":250,"_257":250,"_258":366,"_260":367,"_262":368,"_264":51},[310,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327],"files",[310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327],"counts",{"_301":239,"_302":199,"_303":239,"_32":304,"_305":306},[],{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":45,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_18":300},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],"pulls","branches","forks",{"_307":239,"_309":239},"connections",{"_307":239,"_308":239},"count","unfilledCount","emptyCount",{"_33":194,"_13":195,"_35":196,"_37":-5,"_38":39,"_40":197,"_42":43,"_44":198,"_17":199,"_47":200,"_48":-5,"_50":51,"_52":-5,"_77":362,"_18":363},{"_33":213,"_13":214,"_35":215,"_37":196,"_38":39,"_40":216,"_42":43,"_44":217,"_17":218,"_47":24,"_48":219,"_50":51,"_52":-5,"_77":360,"_18":361},{"_33":205,"_13":206,"_35":207,"_37":196,"_38":39,"_40":208,"_42":43,"_44":209,"_17":114,"_47":24,"_48":210,"_50":51,"_52":-5,"_77":358,"_18":359},{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":191,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_77":356,"_18":357},{"_33":183,"_13":184,"_35":185,"_37":-5,"_38":39,"_40":186,"_42":43,"_44":187,"_17":114,"_47":24,"_48":188,"_50":51,"_52":-5,"_77":354,"_18":355},{"_33":175,"_13":176,"_35":177,"_37":-5,"_38":39,"_40":178,"_42":43,"_44":179,"_17":114,"_47":24,"_48":180,"_50":51,"_52":-5,"_77":352,"_18":353},{"_33":167,"_13":168,"_35":169,"_37":-5,"_38":39,"_40":170,"_42":43,"_44":171,"_17":105,"_47":96,"_48":172,"_50":51,"_52":-5,"_77":350,"_18":351},{"_33":159,"_13":160,"_35":161,"_37":-5,"_38":39,"_40":162,"_42":43,"_44":163,"_17":114,"_47":24,"_48":164,"_50":51,"_52":-5,"_77":348,"_18":349},{"_33":151,"_13":152,"_35":153,"_37":-5,"_38":39,"_40":154,"_42":43,"_44":155,"_17":114,"_47":24,"_48":156,"_50":51,"_52":-5,"_77":346,"_18":347},{"_33":143,"_13":144,"_35":145,"_37":-5,"_38":39,"_40":146,"_42":43,"_44":147,"_17":105,"_47":96,"_48":148,"_50":51,"_52":-5,"_77":344,"_18":345},{"_33":134,"_13":135,"_35":136,"_37":-5,"_38":39,"_40":137,"_42":43,"_44":138,"_17":139,"_47":24,"_48":140,"_50":51,"_52":-5,"_77":342,"_18":343},{"_33":126,"_13":127,"_35":128,"_37":-5,"_38":39,"_40":129,"_42":43,"_44":130,"_17":85,"_47":96,"_48":131,"_50":51,"_52":-5,"_77":340,"_18":341},{"_33":118,"_13":119,"_35":120,"_37":-5,"_38":39,"_40":121,"_42":43,"_44":122,"_17":114,"_47":24,"_48":123,"_50":51,"_52":-5,"_77":338,"_18":339},{"_33":109,"_13":110,"_35":111,"_37":-5,"_38":39,"_40":112,"_42":43,"_44":113,"_17":114,"_47":24,"_48":115,"_50":51,"_52":-5,"_77":336,"_18":337},{"_33":100,"_13":101,"_35":102,"_37":-5,"_38":39,"_40":103,"_42":43,"_44":104,"_17":105,"_47":96,"_48":106,"_50":51,"_52":-5,"_77":334,"_18":335},{"_33":90,"_13":91,"_35":92,"_37":-5,"_38":39,"_40":93,"_42":43,"_44":94,"_17":95,"_47":96,"_48":97,"_50":51,"_52":-5,"_77":332,"_18":333},{"_33":80,"_13":81,"_35":82,"_37":-5,"_38":39,"_40":83,"_42":43,"_44":84,"_17":85,"_47":86,"_48":87,"_50":51,"_52":-5,"_77":330,"_18":331},{"_33":70,"_13":71,"_35":72,"_37":-5,"_38":39,"_40":73,"_42":43,"_44":74,"_17":75,"_47":24,"_48":76,"_50":51,"_52":-5,"_77":328,"_18":329},[],[71],[],[81],[],[91],[],[101],[],[110],[],[119],[],[127],[],[135],[],[144],[],[152],[],[160],[],[168],[],[176],[],[184],[],[19],[],[195,206],[],[195,214],[311,312],[195],["D",1783431759081],["D",1789494036282],{"_11":12,"_280":276},{"_11":12,"_273":274,"_275":276,"_232":233,"_277":278,"_279":51},{"_17":93,"_13":16,"_33":39,"_265":222,"_266":-5,"_267":-5,"_268":-5,"_269":-5,"_270":-5,"_271":14,"_272":12},"ctx",{"_258":-5,"_297":402,"_403":404,"_405":406,"_407":51,"_408":51,"_409":51,"_410":43,"_411":-5,"_412":-7,"_413":-7,"_414":239,"_415":51,"_416":51,"_417":-5,"_418":51,"_419":51,"_420":51,"_421":-5},"ENV",{"_373":374,"_375":376,"_377":16,"_378":379,"_380":381,"_382":383,"_384":385,"_386":387,"_388":389,"_390":391,"_392":393,"_394":395,"_396":397,"_398":399,"_400":401},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Find YOUR Future Career!

Ready to discoveryour career path?

Careers

Why did we create this?

Questions You Might Ask

Contact us

${job.title || \"\"}

${job.title}

${job.title}

Unable to load careers.

Find Your Dream Career

\n Question appears here\n

Your Job Matches

\n Other Careers You May Like\n

${personalityName(data.primary)}

${personalityName(data.secondary)}

${job.title}

\n Accountant\n

Does this job match me?

Salary Expectation

\n RM0\n

\n RM0\n

Academic Pathway

Suggested Schools

Start Now

Test Your Job Knowledge

\n More Jobs Like This\n

Ready to discover
your career path?