room.py

#!/usr/bin/env python3
import math

def printen(string):
	print(string, end="")

items=[
{"url":"https://staging.cohostcdn.org/attachment/4e61ceb0-6840-4b80-821a-be6a01338300/art.jpg","ratio":1.42539},
{"url":"https://staging.cohostcdn.org/attachment/13d3f7b3-df6b-465f-b427-49e8a88dac03/bookshelf.png","ratio":0.711744},
{"url":"https://staging.cohostcdn.org/attachment/879ffd80-2e4c-4afd-a4cf-9dd40c9d0acd/lamp.png","ratio":0.384695},
{"url":"https://staging.cohostcdn.org/attachment/d049c88d-4289-4e67-b8b2-6e5bd519edb7/sofa.png","ratio":2},
{"url":"https://staging.cohostcdn.org/attachment/630c360e-e0ef-4a8c-8974-a2332cfa8007/chair.png","ratio":0.990099},
{"url":"https://staging.cohostcdn.org/attachment/ccbe9b25-425b-4a35-99ea-220994dd3714/table.png","ratio":2.03252},
{"url":"https://staging.cohostcdn.org/attachment/9b32c2ac-bab9-4a3d-a4b5-9fad9f4e61b1/succulent.png","ratio":0.874092},
{"url":"https://staging.cohostcdn.org/attachment/1f967019-ffd2-434d-afbe-8de073b3638d/NGage.png","ratio":1.9305},
{"url":"https://staging.cohostcdn.org/attachment/4dc4b69a-b1ed-468b-b007-01352190d034/minidisc.png","ratio":1.70485},
{"url":"https://staging.cohostcdn.org/attachment/e21634d0-2bf7-43ef-bdce-3409953468d3/estradot.png","ratio":0.896861},
{"url":"https://staging.cohostcdn.org/attachment/b6cb5015-7464-449d-9454-1c009d552c27/toriel.png","ratio":0.976431},
{"url":"https://staging.cohostcdn.org/attachment/66bc3154-10cd-4e4f-b1ea-7ef256088b98/miku.png","ratio":0.582393},
]

printen('''<div style="width:100%;padding-bottom:60%;background:url('https://media.istockphoto.com/photos/3d-rendering-of-empty-room-interior-white-brown-colors-picture-id521806786?b=1&k=20&m=521806786&s=170667a&w=0&h=VAQJJc3W3qZnptSWBFHCL4JvYw7aqzozbxFIz5b7EAc=');background-position:center;background-size:cover;overflow:hidden;position:relative;">''')

rowheight = 75
rowmargin = 10
maxwidth = 540
left = 0
top = 0
for item in items:
	url = item["url"]
	ratio = item["ratio"]
	width = math.floor(rowheight*ratio)

	printen(f'''<div style="position: absolute;top: 0px;bottom: 0px;left: 0px;direction: rtl;font-size: 0px;line-height: 0;pointer-events: none;white-space: nowrap;"><div style="overflow: visible;width: 1px;height: 1px;display: inline-block;direction: ltr;vertical-align: text-top;position: relative;top: -9px;left: -9px;"><div style="position: relative;display: grid;grid-template-rows: 1fr;grid-template-columns: 1fr;"><div style="pointer-events: none;background-image: url('{url}');background-size: 100% 100%;background-position: center center;background-repeat: no-repeat;grid-row: 1;grid-column: 1;transform: translate(-50%, -50%);"></div><div style="overflow: hidden; resize: both; width: {width}px;height: {rowheight}px;min-width: 36px; min-height: 36px; top: 0px; left: 0px; pointer-events: auto; position: relative; grid-area: 1 / 1 / auto / auto; transform: translate(-50%, -50%); clip-path: polygon(calc(100% - 18px) calc(100% - 18px), calc(100% - 18px) 100%, 100% 100%, 100% calc(100% - 18px));"></div></div></div><div style="overflow: hidden; resize: both; direction: ltr; display: inline-block; width: {left + 18 + width//2}px;height: {top + 18 + rowheight//2}px; position: relative; opacity: 0.3; background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAAAATklEQVR4AY3OAQYAMQwF0d7/0q2KrzFGZZZVPPLXxlc/RHIjEyIMxBnWBBAFcNODOaSo8X7C3uU/hY3Q5Bwm6vBkCKTiOU3mWkYkI5KQA4BYG/M4zBNLAAAAAElFTkSuQmCC&quot;) 100% 100% no-repeat; clip-path: polygon(calc(100% - 18px) calc(100% - 18px), calc(100% - 18px) 100%, 100% 100%, 100% calc(100% - 18px)); pointer-events: auto;"></div></div>''')

	left += width + rowmargin
	if left > maxwidth:
		left = 0
		top += rowheight + rowmargin
printen('''</div>''')