<div class="pre nb" data-copy="true" data-download="false" data-file="filename" data-lang="fileformat" data-text=" THAY ĐỔI TIÊU ĐỀ BẠN MUỐN TẠI ĐÂY" data-time="true" data-view="true">
<pre>
NỘI DUNG CODE
</pre>
</div>
/* Code Box */
.pre {
background: #f6f6f6;
color: #2f3337;
direction: ltr;
position: relative;
border-radius: 3px;
overflow: hidden;
margin: 1.7em auto;
}
.pre pre {
margin: 0;
color: inherit;
background: inherit;
display: block;
position: relative;
font-size: 13px;
line-height: 1.6em;
border-radius: 3px;
padding: 30px 20px 20px;
-moz-tab-size: 2;
tab-size: 2;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
overflow: auto;
direction: ltr;
white-space: pre;
}
.pre.adv {
border-radius: 10px;
}
.pre.adv::before {
display: none;
}
.pre:not(.str) .prCd {
display: none;
}
.pre.str .prTl {
display: none;
}
.pre.adv pre {
padding-top: 60px;
}
.preM {
position: absolute;
top: 0;
right: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.04);
padding: 10px 10px 10px 0px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
z-index: 2;
}
.preT {
font-size: 12px;
font-family: var(--fontC);
line-height: 1rem;
position: relative;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 10px;
}
.preA {
display: flex;
gap: 8px;
white-space: nowrap;
}
.preA button {
outline: none;
border: none;
width: 30px;
height: 30px;
background: #d9d9d9;
padding: 0;
margin: 0;
border-radius: 50%;
transition: border-radius 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.preA button:hover {
border-radius: 40%;
}
.preA button > svg {
width: 18px;
height: 18px;
stroke: none;
fill: #2e2e2e;
transition: all 0.5s ease;
}
.pre.cpd .prCp svg,
.pre.pnd .prDl svg,
.pre.dwn .prDl svg {
animation: jiggle 1s;
}
.pre.cpd .prCp svg .a,
.pre:not(.cpd) .prCp svg .b {
opacity: 0;
}
.pre.dwn .prDl svg .a,
.pre.pnd .prDl svg .a,
.pre:not(.pnd) .prDl svg .b,
.pre:not(.dwn) .prDl svg .c {
opacity: 0;
}
@keyframes jiggle {
0% {
transform: rotate(0);
}
20% {
transform: rotate(26deg);
}
40% {
transform: rotate(-26deg);
}
60% {
transform: rotate(26deg);
}
80% {
transform: rotate(-26deg);
}
100% {
transform: rotate(0);
}
}
@-webkit-keyframes jiggle {
0% {
transform: rotate(0);
}
20% {
transform: rotate(26deg);
}
40% {
transform: rotate(-26deg);
}
60% {
transform: rotate(26deg);
}
80% {
transform: rotate(-26deg);
}
100% {
transform: rotate(0);
}
}
0 < document.querySelectorAll("div.pre.nb").length &&
(() => {
let preD = document.querySelectorAll("div.pre.nb");
function saveDoc(x, d, n) {
if (
((n = typeof n == "string" ? n : "text/plain"),
(d =
typeof d == "string" ? d : "File_" + new Date().getTime() + ".txt"),
x)
) {
n = new Blob([x], {
type: n
});
if (navigator.msSaveBlob) return navigator.msSaveBlob(n, d);
{
let x = window.URL.createObjectURL(n),
c = document.createElement("a");
c.classList.add("hidden"),
(c.href = x),
(c.download = d),
document.body.appendChild(c),
c.click(),
c.remove(),
window.URL.revokeObjectURL(x);
}
}
}
for (let r = 0; r < preD.length; r++) {
let b = preD[r];
b.classList.add("adv");
let x = b.dataset.text || "File_" + new Date().getTime(),
e = b.dataset.file || x,
_ = b.dataset.lang || ".txt",
m =
"undefined" !== typeof b.dataset.time
? isNaN(Number(b.dataset.time))
? "false" === b.dataset.time
? 0
: 3
: Number(b.dataset.time)
: 3,
c =
"undefined" === typeof b.dataset.download ||
b.dataset.download == "true",
d = "undefined" === typeof b.dataset.copy || b.dataset.copy == "true",
n = "undefined" === typeof b.dataset.view || b.dataset.view == "true",
a = b.querySelector("pre"),
t = a.innerText;
b.insertAdjacentHTML(
"afterbegin",
"<div class='preM'><div class='preT'><span class='prTl'>" +
(null == x ? "</>" : x) +
"</span><span class='prCd'></span></div><div class='preA'>" +
(n
? "\x3C!--[ Prev" +
"iew ]--><button class='prVw'><svg viewBox='0 0 24 24'><path d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'/></svg></button>"
: "") +
(c
? "\x3C!--[ Download ]--><button class='prDl'><svg viewBox='0 0 24 24'><path class='a' d='M8 17V15H16V17H8M16 10L12 14L8 10H10.5V6H13.5V10H16M12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4Z'/><path class='b' d='M13,2.03C17.73,2.5 21.5,6.25 21.95,11C22.5,16.5 18.5,21.38 13,21.93V19.93C16.64,19.5 19.5,16.61 19.96,12.97C20.5,8.58 17.39,4.59 13,4.05V2.05L13,2.03M11,2.06V4.06C9.57,4.26 8.22,4.84 7.1,5.74L5.67,4.26C7.19,3 9.05,2.25 11,2.06M4.26,5.67L5.69,7.1C4.8,8.23 4.24,9.58 4.05,11H2.05C2.25,9.04 3,7.19 4.26,5.67M2.06,13H4.06C4.24,14.42 4.81,15.77 5.69,16.9L4.27,18.33C3.03,16.81 2.26,14.96 2.06,13M7.1,18.37C8.23,19.25 9.58,19.82 11,20V22C9.04,21.79 7.18,21 5.67,19.74L7.1,18.37M12,16.5L7.5,12H11V8H13V12H16.5L12,16.5Z'/><path class='c' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M7,15H17V17H7V15M10.3,11.2L8.4,9.3L7,10.7L10.3,14L17,7.3L15.6,5.9L10.3,11.2Z'/></svg></button>"
: "") +
(d
? "\x3C!--[ Copy ]--><button class='prCp'><svg viewBox='0 0 24 24'><path class='a' d='M20,16V4H8V16H20M22,16A2,2 0 0,1 20,18H8C6.89,18 6,17.1 6,16V4C6,2.89 6.89,2 8,2H20A2,2 0 0,1 22,4V16M16,20V22H4A2,2 0 0,1 2,20V7H4V20H16Z'/><path class='b' d='M20,16V10H22V16A2,2 0 0,1 20,18H8C6.89,18 6,17.1 6,16V4C6,2.89 6.89,2 8,2H16V4H8V16H20M10.91,7.08L14,10.17L20.59,3.58L22,5L14,13L9.5,8.5L10.91,7.08M16,20V22H4A2,2 0 0,1 2,20V7H4V20H16Z'/></svg></button>"
: "") +
"</div></di" +
"v>"
);
let i = b.querySelector(".prVw"),
l = b.querySelector(".prDl"),
f = b.querySelector(".prCp"),
W = b.querySelector(".prCd");
null !== i &&
i.addEventListener("click", () => {
var x = "#252526";
x =
"<!DOCTYPE html><html><head><title>" +
e.replace(/\./g, "").replace(/ /g, "_") +
_ +
"</title><meta content='width=device-width,initial-scale=1,user-scalable=1,minimum-scale=1,maximum-scale=5' name='viewport'/><meta content='" +
x +
"' name='theme-color'/><meta content='" +
x +
"' name='msapplication-navbutton-color'/><meta content='" +
x +
"' name='apple-mobile-web-app-status-bar-style'/><link rel='shortcut icon' type='image/png' href='https://www.nldblog.com/main/android-icon-192x192.png'><style>body{min-height:100vh;background:#252526;color:#fff}*{margin:0;padding:0}html{line-height:1em;background:#1d1f21;color:#c5c8c6}pre{white-space:pre-wrap;word-wrap:break-word;word-break:break-all;padding:20px}pre i{font-style:normal}</style></head><body><div class='pre'>" +
a.outerHTML +
"</div></body></html>";
x = new Blob([x], {
type: "text/html"
});
window.navigator.msSaveOrOpenBlob
? window.navigator.msSaveOrOpenBlob(blobObject, fileName)
: ((x = window.URL.createObjectURL(x)),
window.open(x, "_blank"),
window.URL.revokeObjectURL(x));
}),
null !== l &&
l.addEventListener("click", () => {
l.disabled = !0;
let c = m;
b.classList.add("pnd", "str"),
(W.innerHTML =
0 !== m
? "Please wai" + "t " + c + "s..."
: "Please wai" + "t...");
let a = setInterval(() => {
0 !== m && --c,
0 !== m && (W.innerHTML = "Please wait " + c + "s..."),
c <= 0 &&
(clearInterval(a),
setTimeout(() => {
(W.innerHTML = "Downloading..."),
setTimeout(() => {
b.classList.remove("pnd"),
b.classList.add("dwn"),
saveDoc(
t,
e.replace(/\./g, "").replace(/ /g, "_") +
"_by_BlogDX_ducxoan.com" +
_,
"text/plain"
),
(W.innerHTML = "Download started..."),
setTimeout(() => {
b.classList.remove("dwn", "str"), (l.disabled = !1);
}, 3e3);
}, 2e3);
}, 1e3));
}, 1e3);
}),
null !== f &&
f.addEventListener("click", () => {
var x = getSelection(),
c = document.createRange();
c.selectNodeContents(a),
x.removeAllRanges(),
x.addRange(c),
document.execCommand("copy"),
x.removeAllRanges(),
(f.disabled = !0),
b.classList.add("cpd"),
setTimeout(function () {
b.classList.remove("cpd"), (f.disabled = !1);
}, 3e3);
});
}
})();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.