OS Installation

{"script.js":"function content2(){\n document.getElementById(\"content1\").style.display = \"none\";\n document.getElementById(\"content2\").style.display = \"block\";\n}\n\nfunction content3(){\n document.getElementById(\"content2\").style.display = \"none\";\n document.getElementById(\"content3\").style.display = \"block\";\n}\n\nfunction content4(){\n document.getElementById(\"content3\").style.display = \"none\";\n document.getElementById(\"content4\").style.display = \"block\";\n}\n\n\n\nfunction play() {\n \n \n $('#window').fadeOut(800, function() {\n setTimeout(function() {\n $('.format').fadeIn(800);\n }, 1000);\n setTimeout(function() {\n $('.load div').animate({\n 'width': '40%'\n }, 3000, 'linear').animate({\n 'width': '100%'\n }, 500, 'linear', function() {\n \n $('.format').fadeOut(800, function() {\n setTimeout(function() {\n $('.install').fadeIn(800).css('display', 'flex');\n \n var loader = document.querySelector('#svgLoaderCircle'),\n percentagetext = document.querySelector('#svgPercentageText'),\n copyFiles = document.querySelector('.copyFiles'),\n installOS = document.querySelector('.installOS'),\n config = document.querySelector('.config'),\n progress = 820,\n percentage = 0;\n\n setInterval(function() {\n loader.setAttribute(\"stroke-dashoffset\", progress);\n percentagetext.innerHTML = percentage + \"%\";\n if (percentage <= 30) {\n copyFiles.classList.add('active');\n copyFiles.children[0].innerHTML = percentage + \"%\";\n installOS.classList.remove('active');\n installOS.classList.remove('done');\n installOS.children[0].innerHTML = \"\";\n config.classList.remove('active');\n config.classList.remove('done');\n config.children[0].innerHTML = \"\";\n }\n if (percentage >= 31 && percentage <= 75) {\n copyFiles.classList.remove('active');\n copyFiles.classList.add('done');\n copyFiles.children[0].innerHTML = \"\";\n installOS.classList.add('active');\n installOS.children[0].innerHTML = percentage + \"%\";\n config.classList.remove('active');\n config.children[0].innerHTML = \"\";\n }\n if (percentage >= 76) {\n copyFiles.classList.remove('active');\n copyFiles.children[0].innerHTML = \"\";\n installOS.classList.remove('active');\n installOS.classList.add('done');\n installOS.children[0].innerHTML = \"\";\n config.classList.add('active');\n config.children[0].innerHTML = percentage + \"%\";\n }\n percentage++;\n progress = +progress - 8.19;\n if (progress < 0) {\n progress = 820;\n }\n if (percentage > 100) {\n percentage = 0;\n \n }\n\n }, 500);\n \n }, 250);\n \n });\n\n });\n }, 1000);\n });\n}\n","style.css":"table {\n border:solid black 2px;\n width:60%;\n}\n\nth {\n background-color:lightGray;\n}\n\ntable, td, th {\n margin:10px;\n margin-left: auto;\n margin-right: auto;\n}\n\n#drive {\n height:50px;\n}\n\n.option {\n padding:5px;\n}\n\n.option:hover{\n border:solid black 1px;\n background-color:#add8e6;\n} \ninput {\n height:40px;\n width:600px;\n border:solid gray 2px;\n}\nbutton {\n margin:5px;\n height:25px;\n font-size:18px;\n float: right;\n}\n\n\nselect{\n margin:5px;\n height:25px;\n font-size:18px;\n \n}\n.logo {\n height:40%;\n display:block;\n margin:auto\n} \n\n.window{\n border: solid black 2px;\n width: 70%;\n height: auto;\n display: block;\n margin-left: auto;\n margin-right: auto;\n overflow: hidden;\n}\n\n.ui-titlebar {\n\tdisplay: flex;\n\twidth: 100%;\n\theight: 32px;\n\tbackground: #0072c6;\n\tuser-select: none;\n\tcursor: default;\n} \n.ui-titleicon {\n\tflex-grow: 1;\n\tmax-width: 32px;\n\tmax-height: 32px;\n}\n.ui-titletext {\n\tflex-grow: 2;\n\tmax-height: 32px;\n\twidth: auto;\n\tfont: 12px/32px \"Segoe UI\", Arial, sans-serif;\n\tcolor: #fff;\n\ttext-indent: 10px;\n\tfont-size:18px;\n}\n\n.content {\n\twidth: auto;\n\tfont: 12px/32px \"Segoe UI\", Arial, sans-serif;\n\tcolor: black;\n\tmargin: 10px;\n\tfont-size:18px;\n\t\n}\n\n#content1 {\n\tdisplay:block;\n}\n\n#content2 {\n display:none;\n}\n\n#content3 {\n display:none;\n}\n\n#content4 {\n display:none;\n}\n\n#content5 {\n display:none;\n}\n\n.ui-titlecontrols {\n\tmax-width: 144px;\n\tmax-height: 32px;\n\tflex-grow: 1;\n}\n.ui-btn {\n\tmargin: 0;\n\twidth: 48px;\n\theight:32px;\n\tborder: 0;\n\toutline: 0;\n\tbackground: transparent;\n}\n.ui-btn:hover {\n\tbackground: rgba(255,255,255,.1);\n}\n.ui-btn.close:hover {\n\tbackground: #e81123;\n}\n.ui-btn svg path, \n.ui-btn svg rect, \n.ui-btn svg polygon {\n\tfill: #fff;\n}\n.ui-btn svg {\n width: 10px;\n height: 10px;\n}\n\n@-webkit-keyframes blink {\n 0% {\n opacity: 0;\n }\n 40% {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 90% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n}\n\n\nsection {\n position: absolute;\n width: 100%;\n height: 100%;\n cursor: default;\n font: 12px/32px \"Segoe UI\", Arial, sans-serif;\n font-size:18px;\n}\n\nsection > div {\n top: 50%;\n width: 100%;\n text-align: center;\n transform: translateY(-50%);\n position: absolute;\n}\n\nh1 {\n font-size: 2em;\n font-weight: 400;\n}\n\nh2 {\n font-weight: 400;\n}\n\n\n.revert {\n left: 50px;\n right: auto;\n}\n\n.load {\n height: 2px;\n width: 30%;\n margin: 0 auto;\n}\n\n.load div {\n height: 2px;\n width: 0;\n background: #fff;\n}\n\n.install {\n /* display: flex; */\n flex-wrap: nowrap;\n align-items: center;\n flex-direction: column;\n background: #000;\n}\n.install h1 {\n font-size: 50px;\n margin: 60px 0 20px;\n}\n.install h2 {\n flex: 2;\n color: #888;\n font-size: 18px;\n margin: 0 0 20px;\n}\n.install svg {\n display: flex;\n flex: 50;\n width: 50%;\n max-width: 350px;\n}\n\n.install footer {\n display: flex;\n flex: 2;\n max-width: 700px;\n width: 90%;\n margin-top: auto;\n margin-bottom: 30px;\n}\n.install footer ul {\n display: flex;\n justify-content: space-around;\n width: 100%;\n list-style: none;\n}\n.install footer ul li {\n display: flex;\n color: #999;\n font-size: 12px;\n}\n.install footer ul li.active {\n color: #fff;\n}\nfooter ul li .percent {\n margin-left: 3px;\n}\n.install .done {\n color: #0087E5;\n}\n\n\n\n","index.html":"\n\n OS Installation\n \n \n \n \n\n\n\n

\n \t\n \t

Windows Setup

\n \t

\n \t\t\n \t

\n Language to install: \n \n
\n Time and currency format: \n \n

\n Enter your preferences and click \"Next\" to continue.\n
\n

Activate Windows

\n If this is the first time you're installing Windows on this PC\n (or if you're installing a different edition), you need to enter a valid\n Windows product key. Your product key should be in the confirmation\n email you received after buying a digital copy of Windows or on\n a label inside the box that Windows came in.

\n The product key looks like this: XXXXX-XXXXX-XXXXX-XXXXX-XXXXX

\n If you're reinstalling Windows, select I don't have a product key.\n Your copy of Windows will be automatically activated later.

\n

\n

Which type of installation do you want?

Upgrade: Install Windows and keep files, settings, and applications

\n

Custom: Install Windows only (advanced)

\n Your files, settings and applications are NOT moved with this option. \n We recommend backing up your files before you continue.\n

Where do you want to install Windows?

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

	Name	Total size	Free space
\n \n	Hard Drive	32.0 GB	32.0 GB

\n\n

\n \n\n\n\n"}

Activate Windows

Which type of installation do you want?

Where do you want to install Windows?

Formatting drives

Installing Windows 10

Your PC will restart several times. \n Sit back and relax.
Don't worry - this is fake :)

Activate Windows

Which type of installation do you want?

Where do you want to install Windows?

Formatting drives

Installing Windows 10

Your PC will restart several times. \n Sit back and relax.Don't worry - this is fake :)

Your PC will restart several times. \n Sit back and relax.
Don't worry - this is fake :)