Skip to content

Instantly share code, notes, and snippets.

@Keith-Hon

Keith-Hon/gist:0f07ed20699e5c03e4471ac128c8100f

Created August 2, 2024 14:37
Show Gist options
  • Save Keith-Hon/0f07ed20699e5c03e4471ac128c8100f to your computer and use it in GitHub Desktop.
Save Keith-Hon/0f07ed20699e5c03e4471ac128c8100f to your computer and use it in GitHub Desktop.
Download ZIP
floor plan editor
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Office Layout</title>
<style>
.room {
width: 250px;
height: 350px;
border: 1px solid black;
position: relative;
margin: 20px auto;
}
.furniture {
position: absolute;
border: 1px solid blue;
text-align: center;
font-size: 12px;
}
.desk1 { width: 80px; height: 160px; top: 0; right: 0px; background-color: lightgray; }
.desk2 { width: 60px; height: 120px; bottom: 81px; left: 0; background-color: lightyellow; }
.rack { width: 60px; height: 180px; bottom: 0; right: 0; background-color: lightgreen; }
.cabinet { width: 50px; height: 40px; bottom: 0px; left: 41px; background-color: lightblue; }
.shelf { width: 35px; height: 80px; bottom: 0px; left: 0; background-color: lightcoral; }
.printer { width: 40px; height: 40px; bottom: 0px; left: 101px; background-color: lightpink; }
.dimension {
position: absolute;
font-size: 14px;
color: red;
}
.dim-long { top: -20px; left: 50%; transform: translateX(-50%); }
.dim-short { top: 50%; left: -50px; transform: translateY(-50%); }
.door_vertical {
width: 10px;
height: 100px;
top: 0;
left: 0;
background-color: brown;
position: absolute;
text-align: center;
line-height: 10px;
color: white;
font-size: 10px;
}
.door_horiztonal {
width: 100px;
height: 10px;
top: 0;
left: 0;
background-color: brown;
position: absolute;
text-align: center;
line-height: 10px;
color: white;
font-size: 10px;
}
</style>
</head>
<body>
<div class="room">
<div class="dimension dim-long">2.5m</div>
<div class="dimension dim-short">3.5m</div>
<div class="door_vertical">D o o r</div>
<div class="door_horiztonal">Door</div>
<div class="furniture desk1">160cm x 80cm Desk 1</div>
<div class="furniture desk2">120cm x 60cm Desk 2</div>
<div class="furniture rack">180cm x 60cm Rack</div>
<div class="furniture cabinet">40cm x 60cm Cabinet</div>
<div class="furniture shelf">80cm x 35cm Shelf</div>
<div class="furniture printer">40cm x 40cm 3D Printer</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment