💛 メモ帳

doc = document;
Fid = a => typeof(a) == "object" ? a : doc.getElementById(a);
Ftag = (...e) => (e.length > 1 ? Fid(e[0]) : doc).getElementsByTagName(e[e.length - 1]);
Fcn = (...e) => (e.length > 1 ? Fid(e[0]) : doc).getElementsByClassName(e[e.length - 1]);

bgSize = "40px 40px";
bgPos = "0 0, 20px 20px, 0 0, 20px 20px, 0 0";
rgba0 = "188,170,164 ,1";
rgba1 = "121,85,72 ,1";
rgba2 = "121,85,72 ,1";
rgba3 = "188,170,164 ,1";
rgba4 = "188,170,164 ,1";
rgba5 = "121,85,72 ,1";

cssExec = n => {
const cl = doc.body.classList;
const obj = Fid("css2");
switch(n) {
case 0 : cl.toggle("menu-hide"); break;

}

};

defCode = () => {
return `#cssGen {
background-color: rgba(188,170,164 ,1);
background-image:
linear-gradient(45deg,
rgba(121,85,72 ,1) 25%, rgba(121,85,72 ,1) 25%,
transparent 25%, transparent 100%),
linear-gradient(-135deg,
rgba(121,85,72 ,1) 25%, rgba(121,85,72 ,1) 25%,
transparent 25%, transparent 100%),
linear-gradient(-135deg,
rgba(188,170,164 ,1) 25%, rgba(188,170,164 ,1) 25%,
transparent 25%, transparent 100%),
linear-gradient(45deg,
rgba(188,170,164 ,1) 25%, rgba(188,170,164 ,1) 25%,
transparent 25%, transparent 100%),
linear-gradient(45deg,
rgba(121,85,72 ,1) 0%,
rgba(121,85,72 ,1) 6%, transparent 6%,
transparent 11%, rgba(121,85,72 ,1) 11%,
rgba(121,85,72 ,1) 17%, transparent 17%,
transparent 22%, rgba(121,85,72 ,1) 22%,
rgba(121,85,72 ,1) 28%, transparent 28%,
transparent 33%, rgba(121,85,72 ,1) 33%,
rgba(121,85,72 ,1) 39%, transparent 39%,
transparent 44%, rgba(121,85,72 ,1) 44%,
rgba(121,85,72 ,1) 50%, transparent 50%,
transparent 55%, rgba(121,85,72 ,1) 55%,
rgba(121,85,72 ,1) 61%, transparent 61%,
transparent 66%, rgba(121,85,72 ,1) 66%,
rgba(121,85,72 ,1) 72%, transparent 72%,
transparent 77%, rgba(121,85,72 ,1) 77%,
rgba(121,85,72 ,1) 83%, transparent 83%,
transparent 88%, rgba(121,85,72 ,1) 88%,
rgba(121,85,72 ,1) 94%, transparent 94%,
transparent 100%);
background-size: 40px 40px;
background-position: 0 0, 20px 20px, 0 0, 20px 20px, 0 0;
}`;
};


bgCode = () => {
return `#cssGen {
background-size:${ bgSize };
background-position:${ bgPos };
background-color:rgba(${ rgba0 });
background-image:linear-gradient(
45deg, rgba(${rgba1}) 0, rgba(${rgba1}) 25%,
transparent 25%, transparent 100%), linear-gradient(
-135deg, rgba(${rgba2}) 0, rgba(${rgba2}) 25%,
transparent 25%, transparent 100%), linear-gradient(
-135deg, rgba(${rgba3}) 0, rgba(${rgba3}) 25%,
transparent 25%, transparent 100%), linear-gradient(
45deg, rgba(${rgba4}) 0, rgba(${rgba4}) 25%,
transparent 25%, transparent 100%), repeating-linear-gradient(
45deg, rgba(${rgba5}) 0, rgba(${rgba5}) 2.5px,
transparent 2.5px, transparent 5px);
}`
};

entry = () =>{
let css = doc.createElement(`style`);
css.type = `text/css`;
css.textContent = Fid("otherCSS").textContent;
doc.body.append(css);
css = doc.createElement(`style`);
css.type = `text/css`;
css.id = "css2";
css.textContent = defCode(); //bgCode();
doc.body.append(css);
const obj = Fid("cssGen");
obj.classList.add("biz");
const str = `
\x3cspan class="loader" onclick="cssExec(0)">menu\x3c/span>
\x3ca href="javascript:cssExec(1)">(2)\x3c/a>
\x3ca href="javascript:cssExec(2)">(3)\x3c/a>
\x3cdiv>
\x3ctextarea id="cssDisp1">\x3c/textarea>
\x3ctextarea id="cssDisp2">\x3c/textarea>
\x3c/div>
`;
setTimeout(() => {
obj.innerHTML = str;
Fid("cssDisp1").value = bgCode();
Fid("cssDisp2").value = bgCode.toString();
// setTimeout(() => {
obj.classList.remove("biz");
// }, 1000);
}, 1000);


};
entry();