const randomColor = Math.floor(Math.random()*16777215).toString(16); document.querySelector('#blog-title').firstElementChild.style.backgroundColor = '#' + randomColor; let scrollHeight = Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight ); let paras = document.getElementsByClassName("para"); for (let i = 0; i < paras.length; i++) { var imageSrc = paras[i].style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0]; var image = new Image(); image.src = imageSrc; if ( screen.width > screen.height ) { paras[i].setAttribute("offset", paras[i].getBoundingClientRect().bottom - image.height * 0.5); } else { paras[i].parentNode.insertBefore(image, paras[i].nextSibling); paras[i].style.display = 'none'; } } window.addEventListener('scroll', () => { let { scrollY } = window; if ( screen.width > screen.height ) { for (let i = 0; i < paras.length; i++) { paras[i].style.backgroundPositionY = paras[i].getAttribute("offset") * 0.1 + -0.1 * scrollY + 'px'; } } }); //components //console component class Console{ comps=[]; input_received=false; blocking_interval=null; text_color="#bbb"; constructor(root){ this.elem=document.createElement("span"); this.elem.className="console"; root.appendChild(this.elem); this.resetTextColor(); } appendComponent(comp){ this.comps.push(comp); this.elem.appendChild(comp.elem); } writeLine(txt){ let text=new Text(txt,this.text_color); this.appendComponent(text); } async readLine(txt){ let text=new Text(txt,this.text_color); this.appendComponent(text); let input=new Input(this.text_color); this.appendComponent(input); input.elem.focus({ preventScroll: true}); return new Promise(resolve=>{ this.blocking_interval=setInterval(()=>{ if(this.input_received){ this.input_received=false; clearInterval(this.blocking_interval); resolve(input.elem.innerText); } },500); }) } setTextColor(color){ this.text_color=color; } resetTextColor(){ this.text_color="#bbb"; } //helpers get lastComp(){return this.comps[this.comps.length-1]}; } //text component class Text{ constructor(txt,color){ this.elem=document.createElement("span"); this.elem.className="text"; this.elem.style.color=color; this.elem.innerText=txt; } } //input component class Input{ constructor(color){ this.elem=document.createElement("span"); this.elem.style.color=color; this.elem.contentEditable=true; this.elem.addEventListener('keydown',function(e){ let key=e.key; if(key=="Enter"){ e.preventDefault(); cmd.input_received=true; cmd.lastComp.elem.contentEditable=false; cmd.lastComp.elem.style.borderWidth="0px"; } }); } } /************************************/ let root=document.getElementById("root"); let cmd=new Console(root); let prompt = "C:\\>" async function execute(){ let command= await cmd.readLine(prompt); if ( command == "projects" ) window.location = "/current.html"; else if ( command == "blog" ) window.location = "/blog"; else if ( command == "archive" ) window.location = "/archive"; else if ( command == "dir" ) window.location = "/archive"; else if ( command == "home" ) window.location = "/"; else if ( command == "connect" ) window.location = "/connect.html"; else if ( command == "reboot" ) location.reload(); else if ( command == "a:" ) { prompt = "A:\\>"; cmd.writeLine("\n"); cmd=new Console(root); execute(); } else if ( command == "b:" ) { prompt = "B:\\>"; cmd.writeLine("\n"); cmd=new Console(root); execute(); } else if ( command == "c:" ) { prompt = "C:\\>"; cmd.writeLine("\n"); cmd=new Console(root); execute(); } else { cmd.writeLine("\nSyntax error\n"); cmd=new Console(root); execute(); } } execute();