!function (codewithar) {
if (!this.ar) return;
"use strict";
const appRoot = codewithar.div("_root"), body = codewithar.an(document.body), codeViewLive = {}, head = codewithar.an(document.head);
function main() {
// DataTransfer
codeViewLive.px = function (e) { return e + "px" }
codeViewLive.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 };
}
codeViewLive.svg = {
check: '',
fullscreen: '',
arrow_down: '',
close: '',
browser: '',
};
codeViewLive.icon = function (e, o) { return `${codeViewLive.svg[e]} `; }
codeViewLive.activeTheme = codewithar.setting_data.theme;
codeViewLive.update_color = function (theme) {
this?.activeTheme == 'default'
? window.matchMedia('(prefers-color-scheme: light)').matches == true ? this.activeTheme = "light" : this.activeTheme = "dark"
: this.activeTheme = this?.activeTheme;
this.color = (function (e, color = {}) {
for (const n in e) { color[n] = e[n][theme || codeViewLive.activeTheme]; }
return color;
}(
{
backgroundMain: {
light: "#fff",
dark: "#202124",
},
backgroundPrimary: {
light: "rgb(232 232 232)",
dark: "rgb(58 58 58)",
},
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: "#686868",
},
borderSecondary: {
light: "#c9cacb",
dark: "#3a3a3a",
},
buttonColor: {
light: "#282828",
dark: "#e4e4e4",
},
buttonBackground: {
light: "#f1f3f4",
dark: "#6d6d6d",
}
}));
}
codeViewLive.update_color();
codeViewLive.st = function (e, o, h) { h = codewithar.an(h || 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); }
// Class Define
var em = codeViewLive.createClass([], 100);
codeViewLive.class = { flexCe: codewithar.makeid(9) }
appRoot.num = em.class;
const devices = [
[25, 50, 2, 25],
[50, 65, 1.538, 17.5],
[75, 75, 1.33, 12.5],
[100, 100, 1, 0],
[150, 125, 0.8, -12.5],
[200, 150, 0.6666, -25],
[400, 200, 0.5, -50],
]
codeViewLive.getStorage = function () {
if (typeof this.storage == "undefined") {
this.storage = codewithar.json(codewithar.storage("cr_tyRRuk"));
}
// Chack One More
if (this.storage == null) {
this.storage = { window: 4, container: 720 };
}
this.storage = codewithar.json(codewithar.storage("cr_tyRRuk", codewithar.json(codeViewLive.storage, true)));
return this.storage;
}
codeViewLive.getStorage();
codeViewLive.getViewLayout = function (e) { return codeViewLive.px((devices[codeViewLive.storage.window][1] * e) / 100); }
codeViewLive.c = function (e) { return em.class[e] }
codeViewLive.e = function (e) { return em.element[e]; }
codeViewLive.s = function (e, n) { n = appRoot.s(codeViewLive.c(e)); (n || {}).num = em.class; return n }
codeViewLive.updates = function () {
codeViewLive.view_container = appRoot.s(codeViewLive.c(19));
if (codeViewLive.view_container) codeViewLive.view_container.remove();
codeViewLive.view_container = codewithar.c("iframe");
codeViewLive.view_container.css({
width: codeViewLive.storage.container || "100%",
height: "100%",
width: "100%",
overflow: "hidden",
border: "none",
});
codeViewLive.setWindow(codeViewLive.storage.window);
if (!codeViewLive.codes) {
codeViewLive.codes = {};
for (let n = 0, c = ["html", "css", "js", "javascripr"]; n < c.length; n++) {
codeViewLive.code = codewithar.s("language-" + c[n], codewithar.data.codeview) || codewithar.c("div");
if (codeViewLive.code.innerHTML) codeViewLive.codes[c[n]] = codewithar.htmlDecode(codeViewLive.code.innerHTML);
}
}
header.s(codeViewLive.c(0)).in(codeViewLive.icon("browser") + codeViewLive.e(52).in((codewithar.htmlDecode(codeViewLive.codes.html).match(/]*>([^<]+)<\/title>/)?.[1] || "Document")).outerHTML)
codeViewLive.view_container.addEventListener("load", function () {
let document = codeViewLive.view_container.contentDocument || codeViewLive.view_container.contentWindow.document;
var script = codewithar.htmlDecode(codeViewLive.codes.html).match(/(<|%3C)script[\s\S]*?(>|%3E)[\s\S]*?(<|%3C)(\/|%2F)script[\s\S]*?(>|%3E)/gi);
var scripttag = "";
for (let n = 0; n < script?.length; n++) { scripttag += script[n], codeViewLive.codes.html = codeViewLive.codes.html.replace(script[n], " ") };
script = codewithar.div("id").in(scripttag).sl("script", false);
// console.log(document.all[0]);
var v_style = codewithar.c("style").in(codeViewLive.codes.css || null);
var v_script = codewithar.c("script").in(codeViewLive.codes.js || null);
var head = codewithar.htmlDecode(codeViewLive.codes.html).match(/]*>[\s\S]*<\/head>/gi);
var body = codewithar.htmlDecode(codeViewLive.codes.html).match(/]*>[\s\S]*<\/body>/gi);
document.open();
document.write("");
document.write("");
document.write(`${head}`);
document.write(`${body}`);
document.write("");
document.close();
if (!head) { document.body.innerHTML = codewithar.htmlDecode(codeViewLive.codes.html); }
document.head.append(v_style);
var getscript;
for (const n of script) {
if (n.innerHTML) { var s = codewithar.c("script").in(n.innerHTML); document.body.append(s); }
else if (n.src) { getscript = codewithar.c("script"); getscript.src = n.src, document.body.append(getscript)}
}
getscript
? getscript.addEventListener("load", function () { document.body.append(v_script); })
: document.body.append(v_script);
var title = codewithar.htmlDecode(codeViewLive.codes.html).match(/]*>([^<]+)<\/title>/);
})
container.div(codeViewLive.c(19)).append(codeViewLive.view_container);
// container.div(codeViewLive.c(19)).append(codeViewLive.view_container);
// var scrollbar = appRoot.div("scrollnar").css({
// height: e.window.self.innerHeight + "px",
// width: "10px",
// position: "absolute",
// right: 0,
// top: 0,
// zIndex: 9999,
// background: "#000",
// });
// var scrollbary = appRoot.div("scrollnar").css({
// width: e.window.self.innerWidth + "px",
// height: "10px",
// position: "absolute",
// right: 0,
// top: 0,
// zIndex: 9999,
// background: "#000",
// });
}
if (!codewithar.live_view_comtainer || codewithar.data.target.innerText == "Live Demo") {
codewithar.live_view_comtainer = function () { return codewithar.body.s("f4nArc") }
}
codeViewLive.live_view_comtainer = codewithar.live_view_comtainer();
codeViewLive.live_view_comtainer.css({ display: "flex", flexDirection: "column", });
codeViewLive.css_update_live = function (e) {
codeViewLive.color = e || codeViewLive.color;
codeViewLive.st(`body{margin: 0;padding: 0; font-family:'roboto'; font-size:12px;overflow:hidden; user-select: none;background:${codeViewLive.color?.backgroundMain};color:${codeViewLive.color?.colorPrimary};} iframe{background:#fff;}
icon { position: relative; width:18px;height: 18px; display: flex; align-items: center;}
svg{fill:${codeViewLive.color?.colorMain};height: 18px;}
.scrollnar { position: absolute; right: 0;overflow: scroll; }
.${codeViewLive.class.flexCe}{display: flex;align-items: center; justify-content: center;gap: 4px}
.${codeViewLive.c(0)}{display: flex; align-items: center; gap: 6px;}
.${codeViewLive.c(0)} svg{height:12px}
.${codeViewLive.c(0)} icon {height: 100%;}
.${codeViewLive.c(1)}{display: flex; align-items: center; justify-content: center; height:auto;font-size: 13px; padding: 5px 0;color: ${codeViewLive.color?.colorMain}; cursor: pointer;}
.${codeViewLive.c(1)}:hover{background:${codeViewLive.color?.buttonHover};}
.${codeViewLive.c(10)}{position: fixed;width: max-content; height: fit-content;text-align: left;font-size: 77%;bottom: 1%;left: 1%;background: ${codeViewLive.color?.backgroundPrimary}; display: block;padding:0.5% 0.8%;}
.${codeViewLive.c(19)}{ display: flex;height:100%; justify-content: center; width:100% }
.${codeViewLive.c(20)}{font-size:${codeViewLive.getViewLayout(12)}; display: flex; flex-direction: column; align-items: center;}
.${codeViewLive.c(21)}{display: flex; position: relative;align-items: center; justify-content: center;background: ${codeViewLive.color?.backgroundSecondary};width: 100%;height: ${codeViewLive.getViewLayout(16)}; overflow: hidden;border-bottom: solid ${codeViewLive.getViewLayout(1.5)} ${codeViewLive.color?.borderPrimary};}
.${codeViewLive.c(22)}{display: flex;position: absolute; align-items: center;justify-content: center;height: 100%;border: ${codeViewLive.getViewLayout(1.5)} solid ${codeViewLive.color?.borderPrimary};color: ${codeViewLive.color?.colorMain};}
.${codeViewLive.c(29)}{height: -webkit-fill-available; display: flex;height: ${codeViewLive.getViewLayout(window.innerHeight - 44)};}
.${codeViewLive.c(30)}{background:${codeViewLive.color?.backgroundMain};margin: 0 auto; width: -webkit-fill-available;}
`, "live", head);
codeViewLive.st(`
.${codeViewLive.button}{display: flex;transition: all 0.1s;min-width: max-content;line-height: 1;font-size: 12px;padding: 4px 8px;background: ${codeViewLive.color?.buttonBackground}; color: ${codeViewLive.color?.buttonColor}; cursor: pointer; font-family: sans-serif; border: solid 1px #0001;position: relative; overflow: hidden;}
.${codeViewLive.button}::after{content: "";position: absolute; left: 0;top: 0; width: 100%;height: 100%;}
.${codeViewLive.button} icon, .${codeViewLive.button} svg{width: 12px;height:12px;}
.${codeViewLive.class.flexCe}{display: flex;align-items: center; justify-content: center;gap: 4px}
.${codeViewLive.c(0)}{display: flex; align-items: center; gap: 6px;user-select: none;}
.${codeViewLive.c(0)}{display: flex; align-items: center; gap: 6px;user-select: none;}
.${codeViewLive.c(0)} svg{height:12px}
.${codeViewLive.c(0)} icon {height: 100%;}
.${codeViewLive.c(1)}{display: flex; align-items: center; justify-content: center; height:auto;padding: 5px 0;color: ${codeViewLive.color?.colorMain}; cursor: pointer;}
.${codeViewLive.c(1)}:hover{background:${codeViewLive.color?.buttonHover};}
.${codeViewLive.c(8)}{ z-index:99; position:fixed;display:none;background:${codeViewLive.color?.backgroundPrimary}; height:fit-content; overflow:hidden; right:4px;top:30px;box-shadow:0 2px 6px 0px #0001;}
.${codeViewLive.c(9)}{display: flex; align-items: center; justify-content: center;}
.${codeViewLive.c(10)}{position: fixed;width: max-content; height: fit-content;text-align: left;font-size: 77%;bottom: 1%;left: 1%;background: ${codeViewLive.color?.backgroundPrimary}; display: block;padding:0.5% 0.8%;}
.${codeViewLive.c(19)}{ display: flex;height:100%; justify-content: center; width:100% }
.${codeViewLive.c(21)}{display: flex; position: relative;align-items: center; justify-content: center;background: ${codeViewLive.color?.backgroundSecondary};width: 100%;height: ${codeViewLive.getViewLayout(16)}; overflow: hidden;border-bottom: solid ${codeViewLive.getViewLayout(1.5)} ${codeViewLive.color?.borderPrimary};}
.${codeViewLive.c(30)}{background:${codeViewLive.color?.backgroundMain};margin: 0 auto; width: -webkit-fill-available;}
.${codeViewLive.c(51)}{background:${codeViewLive.color?.backgroundPrimary};padding: 0 4px; width: -webkit-fill-available;height:30px;border-bottom: solid 2px ${codeViewLive.color?.borderPrimary};justify-content: space-between;}
.${codeViewLive.c(52)}{display: -webkit-box; -webkit-box-orient: vertical;text-decoration: none; overflow: hidden; -webkit-line-clamp: 1;}
`, "live", codeViewLive.live_view_comtainer);
}
codeViewLive.a = {};
var header = codeViewLive.live_view_comtainer.div([codeViewLive.c(21), codeViewLive.c(51)], 0).css({ height: codeViewLive.getViewLayout(23) + "px" });
var size_menu = header.div(codeViewLive.c(8));
var container = appRoot.div(codeViewLive.c(20));
codeViewLive.setWindow = function (e) {
this.storage.window = e;
this.a.n = devices[this.storage.window];
container.css({ width: this.a.n[1] + "%", height: this.a.n[1] + "%", transform: `scale(${this.a.n[2]}) translate(${this.a.n[3]}%, ${this.a.n[3]}%)` });
this.getStorage();
codeViewLive.css_update_live()
}
// Header
// Start Class 50
header.div(codeViewLive.c(0));
var rightButtonContenar = header.div(codeViewLive.class.flexCe)
codeViewLive.headerUpdate = function () { header.s(codeViewLive.c(9)).in(devices[codeViewLive.storage.window][0] + "%" + codeViewLive.icon("arrow_down")); }
// Menu
for (let item = 0; item < 7; item++) {
size_menu.div(codeViewLive.c(1)).in(devices[item][0] + "%").on(function () { size_menu.css({ display: "none" }); codeViewLive.setWindow(item); codeViewLive.headerUpdate() });
}
rightButtonContenar.div(codeViewLive.c(9)).addClass(codeViewLive.button).in(devices[codeViewLive.storage.window][0] + "%" + codeViewLive.icon("arrow_down"))
.on(function () {
// console.log(this.g());
size_menu.css({ display: "block", width: codeViewLive.px(this.g("width")), left: codeViewLive.px(this.g("x")), top: codeViewLive.px(this.g("y") + this.g("height") + 3) })
});
codeViewLive.setLiveContainerCss = function () {
if (codeViewLive.screenFull) return;
for (const n in codeViewLive.rg) {
if (typeof codeViewLive.storage.liveContainerCss == "undefined") codeViewLive.storage.liveContainerCss = {};
codeViewLive.storage.liveContainerCss[n] = codewithar.live_view_comtainer().style[n];
}
codeViewLive.getStorage()
}
codeViewLive.fullscreen = function () {
codeViewLive.rg = { width: "50%", height: "50%", position: "fixed", zIndex: 99999, resize: "auto", left: "50%", top: "50%", margin: 0, border: "solid 1px" + codeViewLive.color.borderPrimary, };
function move(e, o) {
codeViewLive.setLiveContainerCss();
e = e || codeViewLive.storage.liveContainerCss || codeViewLive.rg;
codeViewLive.live_view_comtainer = codewithar.live_view_comtainer();
codewithar.move(codeViewLive.live_view_comtainer, header, codeViewLive.main, o);
codeViewLive.live_view_comtainer.css(e)
if (e.position == "initial") {
codeViewLive.live_view_comtainer.removeAttribute("style");
codeViewLive.live_view_comtainer.css({ display: "flex", flexDirection: "column" })
}
}
codeViewLive.screenFull = true;
if (this.get("screen") == "hapscreen") { codeViewLive.screenFull = false, this.set("screen", "offscreen"), move({ position: "fixed", width: "100%", height: "100%", left: 0, top: 0 }, false); codeViewLive.screenFull = true }
else if (this.get("screen") == "offscreen") { this.set("screen", "fullscreen"), move({ position: "initial", margin: "8px" }); }
else { this.set("screen", "hapscreen"), move(); codeViewLive.screenFull = false; }
for (let n = 0, a = this.sl("svg", false); n < a.length; n++) {
if (a[n].css({ display: "none" }).get("class") == this.get("screen")) {
a[n].css({ display: "block" })
}
}
}
codeViewLive.close = function () {
codeViewLive.setLiveContainerCss()
if (codeViewLive.liveServerSession) { codeViewLive.liveServerSession(false) }
else { codeViewLive.live_view_comtainer.remove() }
}
for (let n = 0, a = ["fullscreen", "close"]; n < a.length; n++) {
rightButtonContenar.div(codeViewLive.button).in(codeViewLive.icon(a[n])).on(codeViewLive[a[n]]).css({});
}
var device = [[2560, "4K"], [1440, "Laptop L"], [1024, "Laptop"], [768, "Tablet"], [425, "Mobile L"], [375, "Mobile M"], [320, "Mobile S"],]
var container_head = container.div(codeViewLive.c(21));
var show_width = container_head.div(codeViewLive.c(23));
for (const n of device) {
codeViewLive.a.e = container_head.div(codeViewLive.c(22)).css({ width: n[0] + "px", background: "transparent" }).on(
function () {
codeViewLive.storage.container = codeViewLive.px(n[0]);
codeViewLive.view_container.css({ width: codeViewLive.px(n[0]) });
codeViewLive.getStorage();
}
);
codeViewLive.a.e.addEventListener("mouseenter", function () {
show_width.in(`${n[1]} - ${n[0]}px`);
this.style.background = codeViewLive.color?.hover;
});
codeViewLive.a.e.addEventListener("mouseleave", function () {
show_width.innerHTML = null;
this.style.background = "transparent";
});
}
codeViewLive.windowSizeView = function () {
(appRoot.s(codeViewLive.c(10)) || appRoot.div(codeViewLive.c(10))).in(`Screen Size ${codeViewLive.getViewLayout(this.innerWidth || window.innerWidth)} x ${codeViewLive.getViewLayout(this.innerHeight || window.innerHeight)}`);
}
codeViewLive.sow = function (e) {
e.window.addEventListener("resize", codeViewLive.windowSizeView);
}
codeViewLive.e(29).append(codeViewLive.e(30));
body.set("theme", codeViewLive.activeTheme)
body.innerHTML = null;
body.append(appRoot);
codeViewLive.windowSizeView();
codeViewLive.css_update_live()
codeViewLive.updates();
codewithar.bu(codeViewLive.button, window.self);
new ResizeObserver(codeViewLive.windowSizeView).observe(appRoot);
return;
}
new main();
}(typeof window.ar == "undefined" ? window : window.ar);