windows.py

#!/usr/bin/env python3

def printen(strr):
	print(strr, end='')


internet_text='''<h1 style="font-size: 1.8em;margin-bottom: 0.25em;padding: 0;font-family: 'Linux Libertine','Georgia','Times',serif;line-height: 1.3;    border-bottom: 1px solid #a2a9b1;font-weight:normal;">Basilisk collection</h1>
<div style="font-family: sans-serif;font-size: calc(1em * 0.8);margin-bottom:1.1em;">From Wikipedia, the free encyclopedia</div>
<p style="font-family: sans-serif;margin: 0.5em 0;font-size: calc(1em * 0.875);line-height: 1.6;">The <b>basilisk collection</b> (also known as the <b>basilisk file</b> or <b>basilisk.txt</b>) is a collection of over 125 million <a style="color:#0645AD;" href="https://en.wikipedia.org/wiki/Proof_of_work#Background" title="Proof of work">partial hash inversions</a> of the <a style="color:#0645AD;" href="https://en.wikipedia.org/wiki/SHA-256" class="mw-redirect" title="SHA-256">SHA-256</a> <a style="color:#0645AD;" href="https://en.wikipedia.org/wiki/Cryptographic_hash_function" title="Cryptographic hash function">cryptographic hash function</a>. Assuming state-of-the art methods were used to compute the inversions, the entries in the collection collectively represent a <a style="color:#0645AD;" href="https://en.wikipedia.org/wiki/Proof-of-work" class="mw-redirect" title="Proof-of-work">proof-of-work</a> far exceeding the computational capacity of the human race.<sup id="cite_ref-calc_1-0" class="reference"><a style="color:#0645AD;" href="#cite_note-calc-1">[1]</a></sup><sup id="cite_ref-killed_2-0" class="reference"><a style="color:#0645AD;" href="#cite_note-killed-2">[2]</a></sup> The collection was released in parts through <a style="color:#0645AD;" href="https://en.wikipedia.org/wiki/BitTorrent" title="BitTorrent">BitTorrent</a> beginning in June 2018, although it was not widely reported or discussed until early 2019.<sup id="cite_ref-history_3-0" class="reference"><a style="color:#0645AD;" href="#cite_note-history-3">[3]</a></sup> On August 4th, 2019 the complete collection of 125,552,089 known hash inversions was compiled and published by <a style="color:#0645AD;" href="https://en.wikipedia.org/wiki/University_of_Toronto#CryTor" title="University of Toronto">CryTor</a>, the cybersecurity lab of the <a style="color:#0645AD;" href="https://en.wikipedia.org/wiki/University_of_Toronto" title="University of Toronto">University of Toronto</a>.<sup id="cite_ref-toronto_4-0" class="reference"><a style="color:#0645AD;" href="#cite_note-toronto-4">[4]</a></sup>
</p>
<p style="font-family: sans-serif;margin-bottom:0;"><a href="https://suricrasia.online/unfiction/basilisk/" style="text-decoration:underline;color: #0645AD;font-weight:700;font-size: .6rem;">read more</a></p>'''


printen('''<div style="font-size: 0px; width: 100%; padding-bottom: 80%; overflow: hidden; white-space: nowrap; position: relative; background: #008080;font-family: 'Liberation Mono', monospace;">''')

windows = [{
	"html": "hello! welcome to micohost wandows! how may I take your order?",
	"url": "https://staging.cohostcdn.org/attachment/e56723fd-fb10-4c33-b646-64166b75a381/questionbubble.png",
	"title": "hello world",
	"id": "hello"
},{
	"html": internet_text,
	"url": "https://staging.cohostcdn.org/attachment/fa83255a-eda4-4573-ad0e-1140e7fe3bc1/chrome.png",
	"title": "interwebsite exploration",
	"id": "browser"
},{
	"html": '''<div style="font-size:20px">HELLO WELCOME TO MY TUTORIAL ON HOW TO REMOVE THE BANDICAM WATERMARK ON YOUR VIDEOS!<BR/><BR/>STEP 1: INSTALL GHIDRA FROM INTERNET<BR/>STEP 2: MAKE NEW PROJECT USING BANDICAM EXE<BR/>STEP 3: PICK CODE BROWSER FROM TOOL CHEST<BR/>STEP 4: ADD NOOP SLIDE TO WATERMARK FUNCTION<BR/><BR/>THANKS FOR WATCHING :)</div>''',
	"url": "https://staging.cohostcdn.org/attachment/fa4197f7-2662-4800-9af0-1c08ba6eed8b/notes_2.png",
	"title": "notepad.exe",
	"id": "notes"
},{
	"html": '''<div style="text-align:center;"><img style="margin-top:0;max-width:100%;display:block;" src="https://upload.wikimedia.org/wikipedia/en/2/27/Bliss_%28Windows_XP%29.png"/><img style="max-width:100%;display:block;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/Toronto_Skyline_Summer_2020.jpg/640px-Toronto_Skyline_Summer_2020.jpg"/><img style="max-width:100%;display:block;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Bull_shark_%282007%29.jpg/640px-Bull_shark_%282007%29.jpg"/></div>''',
	"url": "https://staging.cohostcdn.org/attachment/8a6a575c-02b2-4e49-9c6f-a8b35f5ccca5/camera2.png",
	"title": "camera roll",
	"id": "camera"
}]

for idx, icon in enumerate(windows):
	printen(f'''<div style="width: 60px; height: {60*(idx+1)}px; min-height: 32px; min-width: 32px; max-width: 100%; max-height: 100%; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAAAAUklEQVR4AY3QAQbAQBBD0Tlj73+XbSCM72MSWObR6Dx0vpQheSmZEGEgzrCmgKiAmxbsyVBf+5DqezCXLTuhy+cwUYc3ilLGfyYjcy1GJEYkQn4IlK/ECwufagAAAABJRU5ErkJggg=='), url('{icon["url"]}'); background-position: 100% 100%, calc(100% - 10px) calc(100% - 10px); background-size: auto, 32px; background-repeat: no-repeat, no-repeat; overflow: auto; resize: both; position: absolute; top: 0px; left: 0px; clip-path: polygon(calc(100% - 42px) calc(100% - 42px), calc(100% - 42px) 100%, 100% 100%, 100% calc(100% - 42px));"><a href="#user-content-{icon["id"]}" style="position: absolute; width: 32px; height: 32px; right: 10px; bottom: 10px;"></a></div>''')

for idx, window in enumerate(windows):
	printen(f'''<details {"open" if idx == 0 else ""} style="position: absolute; top: 0px; bottom: 0px; left: 0px; direction: rtl; z-index: 1; pointer-events: none;">''')
	printen('''<summary style="display: inline-block; direction: ltr; width: 16px; height: 14px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAIAAACpTQvdAAAARElEQVR4AWP4TwpwcHAAabhy4QQxqKGhgWINDGAA4yJEMDVgqkCwCTuJAQkQ9gOm2ZTaQNgPFIUS3SKugTgA1eBAIgAAAs6nW/UJfgUAAAAASUVORK5CYII=') 0% 0% / cover; position: relative; top: -2px; left: -44px; z-index: 1; cursor: pointer; pointer-events: auto;"></summary>''')
	printen(f'''<div style="overflow: hidden; resize: both; width: 404px; height: 231px; border: 3px ridge rgb(221, 221, 221); position: relative; font-size: 12px; top: -22px; left: -22px; display: inline-block; vertical-align: text-top; direction: ltr; background-image: url('{window["url"]}'), linear-gradient(to right, rgb(10, 36, 106), rgb(162, 198, 236)), linear-gradient(rgb(255, 255, 255), rgb(124, 124, 124)), linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)); background-size: 16px, 100% 20px, 100% 2px; background-position: 22px 2px, left top, 0px 20px; background-repeat: no-repeat, no-repeat, no-repeat, repeat; pointer-events: auto; white-space: normal;">''')
	printen(f'''<div style="width: 100%; height: 16px; position: absolute; top: 1px; left: 40px; color: white; font-size: 12px; font-weight: bold;">{window["title"]}</div>''')
	printen(f'''<div style="position: absolute;inset: 22px 0px 0px;overflow-x:hidden;overflow-y:scroll;line-height:1;padding:1em;">{window["html"]}</div>''')
	printen('''</div>''')
	printen(f'''<div style="overflow: hidden; resize: both; width: {100+10*idx}px; height: {80 + 50*idx}px; position: relative; display: inline-block; z-index: 1; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAAAATklEQVR4AY3OAQYAMQwF0d7/0q2KrzFGZZZVPPLXxlc/RHIjEyIMxBnWBBAFcNODOaSo8X7C3uU/hY3Q5Bwm6vBkCKTiOU3mWkYkI5KQA4BYG/M4zBNLAAAAAElFTkSuQmCC') 100% 100% no-repeat; clip-path: polygon(calc(100% - 22px) calc(100% - 22px), calc(100% - 22px) 100%, 100% 100%, 100% calc(100% - 22px)); direction: ltr; pointer-events: auto;"></div>''')
	printen(f'''<div id="{window["id"]}" style="position: absolute; top: -150px;"></div>''')
	printen('''</details>''')

printen('''<div style="position: absolute;height: 26px;bottom: 0px;left: 0px;right: 0px;background: rgb(212, 208, 200);border: 1px outset white;"><div style="position: absolute;height: 20px;font-size: 12px;padding: 1px 4px;padding-left: 20px;font-weight: bold;top: 2px;left: 2px;background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAIAAACpTQvdAAAABnRSTlMA/wD/AP83WBt9AAAAU0lEQVR4AYWRgQbAUAwD+/8/nQFZXPUlZrbqxdHRnYn8w7oKLGlu44scHQD4hw4dOJTYQcDvaXGtn10rTJEtLiVDowakEQEHVupn7odjEaavVWAfCvn7BfcT5BUAAAAASUVORK5CYII='), rgb(212, 208, 200);background-repeat: no-repeat;background-position: 2px 2px;border: 1px outset white;cursor: pointer;">start</div></div>''')

printen('''</div>''')
printen('''<div style="font-size:70%;">note: icons only work on chrome :(</div>''')