!function (w) { const codewithar = w; const functions = function () { this.root = codewithar.an(window.self.document.body); this.button = codewithar.makeid(6); this.chackBox = codewithar.makeid(6); this.px = function (e) { return e + "px" } this.createClass = function (c, n) { let e = []; for (var i = 1; i <= n; i++) c.push("cr_" + codewithar.makeid(6)); for (const n in c) { e[n] = codewithar.div(c[n]), e[n].num = c, e[n].set("number", n) } return { class: c, element: e }; } this.setting_data = codewithar.json(codewithar.storage("settingModule")); this.setting = codewithar.setting; this.updateColor = function (theme) { this.setting_data?.theme == 'default' ? window.matchMedia('(prefers-color-scheme: light)').matches == true ? this.theme = "light" : this.theme = "dark" : this.theme = this.setting_data?.theme; this.color = (function (e, a) { for (const n in e) { a[n] = e[n][theme || a.theme]; } return a; }({ backgroundMain: { light: "#fbfbfb", dark: "#202124", }, backgroundPrimary: { light: "#ffffff", dark: "#292a2d", }, backgroundSecondary: { light: "#f6f6f6", dark: "#3b3b3b", }, colorMain: { light: "#202124", dark: "#e4e4e4", }, colorPrimary: { light: "#000", dark: "#fff", }, linkMain: { light: "#008cff", dark: "#008cff", }, hover: { light: "#00000015", dark: "#ffffff15", }, buttonHover: { light: "#0003", dark: "#fff6", }, borderMain: { light: "#3f4042", dark: "#3f4042", }, borderPrimary: { light: "#c9cacb", dark: "#4e4e4efc", }, borderSecondary: { light: "#c9cacb", dark: "#3a3a3a", }, buttonColor: { light: "#282828", dark: "#e4e4e4", }, buttonBackground: { light: "#f1f3f4", dark: "#6d6d6d", } }, this)); } this.st = function (e, o, h) { h = codewithar.an(h || window.self.document.head); let sty = h.sl("style", false).get.call({ class: o }) || codewithar.c("style"); sty.type = "text/css"; sty.addClass(o).in(e); h.append(sty); } this.em = this.createClass([], 100); this.updateCss = function (e) { this.updateColor(); this.color = e || this.color; this.st(` body{ margin: 0;overflow: hidden;padding: 0;font-family: Karla, system-ui, sans-serif;font-size: 12px;user-select: none;background:${this.color?.backgroundPrimary};color:${this.color?.colorPrimary};} icon{ position: relative;width: 18px;height: 18px;display: flex;align-items: center;} svg{ fill:${this.color?.colorMain};height: 18px;} .loader{ background:${this.color?.backgroundPrimary};} .active{ color: #1a73e8 !important;font-weight: 600;} select{ background:${this.color?.backgroundPrimary};padding: 5px;border-radius: 0;color: inherit;border: none;outline: none;font-size: 12px;} select option{ padding: 4px;border-radius: 0;min-height: 3em;} .${this.c(20)}{ overflow: auto;overflow-y: scroll;height: 530px;} .${this.c(20)}::-webkit-scrollbar{ background-color: ${this.color?.backgroundPrimary};width: 12px;} .${this.c(20)}::-webkit-scrollbar-thumb{ background: #6d6d6d;border: solid 3px ${this.color?.backgroundPrimary};border-radius: 10px;} .${this.c(20)}::-webkit-scrollbar-track{ background: ${this.color?.backgroundPrimary};border-radius: 10px;} .${this.button}{ cursor: pointer;user-select: none;overflow: hidden;border: none;outline: none;} .${this.button} svg{ margin-right: 10px;} .${this.c(22)}{font-weight: 600; background:${this.color?.backgroundPrimary};height: auto !important;display: flex;justify-content: space-between;padding: 0.6em 1em;cursor: pointer;font-size: 16px;} .${this.c(23)}{ max-height: 0;padding: 0 1.2em;overflow: hidden;transition: .35s;} .${this.c(23)}{ padding: 10px 1.2em 20px;max-height: 1000vh;border-bottom: solid 1px ${this.color?.borderPrimary};} .${this.c(24)}{ font-size: 12px;margin: 15px 0 10px;line-height: 1.6;} .${this.c(25)}{ font-size: 14px;display: flex;gap: 5px;} .${this.c(26)} { height: 28px;border: solid 1px ${this.color?.borderPrimary};margin: 0 5px;padding: 0.1em 3em;display: flex;align-items: center;justify-content: center;font-size: 12px;border-radius: 25px;transition: 0.3s;} .${this.c(25)} .active{ background: #0084ff;color: #fff !important;border-color: #0084ff;} .${this.c(28)}{ column-count: 2;column-gap: 24px;} .${this.c(29)}{ height: auto;padding: 0.5em;color: ${this.color?.colorPrimary};width: -webkit-fill-available;background: transparent;} .${this.c(30)}{ position: relative;display: flex;align-items: center;gap: 5px;flex: none;} .${this.chackBox}{ display: flex;align-items: center;position: relative;justify-content: center;width: 12px;height: 12px;border: 0.1rem solid ${this.color?.borderMain};border-radius: 25px;} .active .${this.chackBox}{ border-color: #0084ff;} .active .${this.chackBox}::after{ content: "";width: 0.5rem;height: 0.5rem;border-radius: 25px;background: #0084ff;} .${this.c(98)}{ flex: none;} .${this.c(99)}{ align-items: center;display: flex;padding: 0.4em 1em;gap: 10px;} `, "setting", this.live_view_comtainer); } this.c = function (e) { return this.em.class[e] } this.e = function (e) { return this.em.element[e]; } this.s = function (e, n) { n = this.root.s(this.c(e)); (n || {}).num = this.em.class; return n } this.select = function (a, n, b, c) { var opt = codewithar.div(this.c(99)); var s = opt.div(this.c(98)).in(a); var o = opt.c("select").addClass(this.c(98)).set("name", n); for (const no in b) { this.z = o.c("option").in(b[no]).set("value", no).set("aria-label", b[no]); if (this.setting_data[n] == no) { this.z.selected = true } }; o.addEventListener("change", (e) => { this.setting_data[n] = e.target.value; this.setting(); }); return opt; } this.updateCss(); this.setting(); } var a = new functions(); // Personalization // Start 20 // document.parentElement personalizationTab = a.e(20).div(21).div(22).in(` ` + "Personalization").on(function () { this.parentElement.toggleClass("show") }).addClass(a.button).parentElement.div(23); personalizationTab.div(24).in("Theme :") a.themeGroup = personalizationTab.div(25); for (let n = 0, g = [ { value: "light", N: "Light" }, { value: "dark", N: "Dark" }, { value: "default", N: "System" } ]; n < g.length; n++) { a.themeButton = a.themeGroup.div(26).addClass(a.button).in(g[n].N).on(function () { a.setting_data.theme = g[n].value; a.setting(); this.parentElement.childNodes.forEach(element => element.removeClass("active")); this.addClass("active") }); if (a.setting_data.theme == g[n].value) { a.themeButton.addClass("active"); } } personalizationTab.div(24).in("Font :") personalizationTab.div(27).append(a.select("Font Size : ", "fontSize", { "12": "Vary Small", "14": "Small", "16": "Medium (Recommended)", "18": "Large", "20": "Very large", })) personalizationTab.div(27).append(a.select("Font Famaly :", "fontFamaly", { "sans-serif": "Sans Serif", "system-ui": "System Ui", "Karla, system-ui, sans-serif": "Default (Recommended)", "cursive": "Cursive", "roboto": "Roboto", "Karla": "Karla", })); // Languages Languages = a.e(20).div(21).div(22).in(` ` + "Languages").on(function () { this.parentElement.toggleClass("show") }).addClass(a.button).parentElement.div(23); Languages.div(24).in("Notes : Change the language of a translated website by google Translate").css({ margin: "10px 0 20px", }); var lan = Languages.div(28); var languages_list = [ { name: "Amharic", code: "am" }, { name: "Arabic", code: "ar" }, { name: "Basque", code: "eu" }, { name: "Bengali", code: "bn" }, { name: "Bulgarian", code: "bg" }, { name: "Catalan", code: "ca" }, { name: "Chinese (PRC)", code: "zh-CN" }, { name: "Chinese (Taiwan)", code: "zh-TW" }, { name: "Croatian", code: "hr" }, { name: "Czech", code: "cs" }, { name: "Danish", code: "da" }, { name: "Dutch", code: "nl" }, { name: "English (UK)", code: "en-GB" }, { name: "English (US)", code: "en" }, { name: "Estonian", code: "et" }, { name: "Filipino", code: "fil" }, { name: "Finnish", code: "fi" }, { name: "French", code: "fr" }, { name: "German", code: "de" }, { name: "Greek", code: "el" }, { name: "Gujarati", code: "gu" }, { name: "Hebrew", code: "iw" }, { name: "Hindi", code: "hi" }, { name: "Hungarian", code: "hu" }, { name: "Icelandic", code: "is" }, { name: "Indonesian", code: "id" }, { name: "Italian", code: "it" }, { name: "Japanese", code: "ja" }, { name: "Kannada", code: "kn" }, { name: "Korean", code: "ko" }, { name: "Latvian", code: "lv" }, { name: "Lithuanian", code: "lt" }, { name: "Malay", code: "ms" }, { name: "Malayalam", code: "ml" }, { name: "Marathi", code: "mr" }, { name: "Norwegian", code: "no" }, { name: "Polish", code: "pl" }, { name: "Portuguese", code: "pt-BR" }, { name: "Portuguese", code: "pt-PT" }, { name: "Romanian", code: "ro" }, { name: "Russian", code: "ru" }, { name: "Serbian", code: "sr" }, { name: "Slovak", code: "sk" }, { name: "Slovenian", code: "sl" }, { name: "Spanish", code: "es" }, { name: "Swahili", code: "sw" }, { name: "Swedish", code: "sv" }, { name: "Sanskrit", code: "sa" }, { name: "Tamil", code: "ta" }, { name: "Telugu", code: "te" }, { name: "Thai", code: "th" }, { name: "Turkish", code: "tr" }, { name: "Urdu", code: "ur" }, { name: "Ukrainian", code: "uk" }, { name: "Vietnamese", code: "vi" }, { name: "Welsh", code: "cy" } ]; for (const n of languages_list) { a.langButton = lan.c("button").set("value", n.code).addClass(a.button).on(function () { codewithar.translateLangActive(this.value).then(d => { if (d === true) { a.setting_data.languages = this.value; this.parentElement.childNodes.forEach(element => element.removeClass("active")); this.addClass("active"); a.setting() } }) }).addClass(a.c(29)); if (a.setting_data.languages == n.code) a.langButton.addClass("active") a.langButton.div(a.c(30)).div(a.chackBox).parentElement.div(a.c(31)).in(n.name) } // Reset Setting personalizationTab = a.e(20).div(21).div(22).in(` ` + "Reset Settings").on(function () { a.setting_data = { fontSize: 16, fontFamaly: 'Karla, system-ui, sans-serif', theme: 'default', languages: "en"} a.setting(), location.reload(); }).addClass(a.button); a.root.innerHTML = null; a.root.append(a.e(20)); codewithar.bu(a.button, window.self); }(ar || window);