<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Building BIM Schematic Plan</title>
<style>
:root {
--bg-color: #0f172a;
--panel-bg: #1e293b;
--accent-color: #38bdf8;
--text-main: #f8fafc;
--text-muted: #94a3b8;
--core-bg: #334155;
--core-border: #f59e0b;
--grid-line: rgba(255, 255, 255, 0.05);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-color);
color: var(--text-main);
display: flex;
height: 100vh;
overflow: hidden;
}
/* Sidebar Controls */
#sidebar {
width: 320px;
background-color: var(--panel-bg);
border-right: 1px solid #334155;
display: flex;
flex-direction: column;
z-index: 10;
}
.header {
padding: 20px;
border-bottom: 1px solid #334155;
}
.header h1 {
font-size: 1.2rem;
color: var(--accent-color);
margin-bottom: 5px;
}
.header p {
font-size: 0.8rem;
color: var(--text-muted);
}
.floor-list {
flex: 1;
overflow-y: auto;
padding: 10px;
}
.floor-btn {
width: 100%;
padding: 12px 15px;
margin-bottom: 6px;
background-color: #0f172a;
border: 1px solid #334155;
color: var(--text-main);
border-radius: 6px;
text-align: left;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
justify-content: space-between;
align-items: center;
}
.floor-btn:hover {
border-color: var(--accent-color);
background-color: #1e293b;
}
.[Link] {
background-color: #0284c7;
border-color: var(--accent-color);
font-weight: bold;
}
.floor-btn [Link] {
font-size: 0.75rem;
background: rgba(255,255,255,0.1);
padding: 2px 6px;
border-radius: 4px;
}
/* Main Viewer Area */
#main {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
}
.top-bar {
height: 60px;
background-color: var(--panel-bg);
border-bottom: 1px solid #334155;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}
.viewport {
flex: 1;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background-image:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: 20px 20px;
overflow: auto;
}
/* Blueprint Plan Box (35m x 44m ratio) */
.plan-container {
width: 700px;
height: 880px;
border: 3px solid #64748b;
background-color: #020617;
position: relative;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
display: grid;
grid-template-columns: repeat(35, 1fr);
grid-template-rows: repeat(44, 1fr);
gap: 1px;
padding: 2px;
}
/* Generic Spatial Block Styling */
.room {
background-color: #1e293b;
border: 1px solid #475569;
border-radius: 3px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 0.65rem;
text-align: center;
color: #e2e8f0;
padding: 2px;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.2s;
}
.room:hover {
filter: brightness(1.2);
z-index: 5;
}
/* Core Specific Styling */
.core-element {
background-color: var(--core-bg) !important;
border: 1px solid var(--core-border) !important;
color: #fbbf24 !important;
font-weight: bold;
}
.legend {
display: flex;
gap: 15px;
font-size: 0.8rem;
}
.legend-item {
display: flex;
align-items: center;
gap: 6px;
}
.legend-box {
width: 14px;
height: 14px;
border-radius: 3px;
}
</style>
</head>
<body>
<div id="sidebar">
<div class="header">
<h1>Schematic BIM Viewer</h1>
<p>Approx. Floor Area: 1,540 m² (35m × 44m)</p>
</div>
<div class="floor-list" id="floorButtons"></div>
</div>
<div id="main">
<div class="top-bar">
<h2 id="currentFloorTitle">Select Floor</h2>
<div class="legend">
<div class="legend-item">
<div class="legend-box" style="background: #334155; border: 1px solid
#f59e0b;"></div>
<span>Fixed Building Core</span>
</div>
<div class="legend-item">
<div class="legend-box" style="background: #1e293b; border: 1px solid
#475569;"></div>
<span>Floor Program / Rooms</span>
</div>
</div>
</div>
<div class="viewport">
<div class="plan-container" id="planGrid"></div>
</div>
</div>
<script>
const floorsData = [
{ id: "B2", name: "Basement 2 (Services & Utilities)", rooms: [
{ name: "Generator Room", w: 10, h: 9, x: 1, y: 1 },
{ name: "Transformer Room", w: 10, h: 6, x: 11, y: 1 },
{ name: "Electrical Room", w: 6, h: 5, x: 21, y: 1 },
{ name: "Pump Room", w: 6, h: 5, x: 27, y: 1 },
{ name: "Domestic Water Cistern", w: 10, h: 9, x: 1, y: 10 },
{ name: "Fire Reserve Tank", w: 10, h: 6, x: 11, y: 10 },
{ name: "STP", w: 15, h: 6, x: 21, y: 6 },
{ name: "Solid Waste Storage", w: 6, h: 5, x: 1, y: 19 },
{ name: "Security Office", w: 6, h: 5, x: 1, y: 25 },
{ name: "Parking & Driveway", w: 35, h: 12, x: 1, y: 33 }
]},
{ id: "B1", name: "Basement 1 (Parking)", rooms: [
{ name: "38 Parking Slots & Driveway", w: 35, h: 12, x: 1, y: 1 },
{ name: "2x Accessible Parking", w: 6, h: 5, x: 1, y: 28 },
{ name: "Utility Room", w: 6, h: 5, x: 7, y: 28 },
{ name: "Ramp (7.5m wide)", w: 35, h: 8, x: 1, y: 37 }
]},
{ id: "GF", name: "Ground Floor (Commercial)", rooms: [
{ name: "Grand Lobby", w: 15, h: 12, x: 1, y: 1 },
{ name: "Reception", w: 5, h: 3, x: 16, y: 1 },
{ name: "Bank", w: 15, h: 12, x: 21, y: 1 },
{ name: "ATM Lobby", w: 3, h: 5, x: 16, y: 4 },
{ name: "Convenience Store", w: 15, h: 10, x: 1, y: 13 },
{ name: "Coffee Shop", w: 10, h: 9, x: 26, y: 13 },
{ name: "Boutique A", w: 10, h: 6, x: 1, y: 28 },
{ name: "Boutique B", w: 10, h: 6, x: 11, y: 28 },
{ name: "Barbershop", w: 10, h: 6, x: 1, y: 34 },
{ name: "Beauty Salon", w: 10, h: 9, x: 11, y: 34 },
{ name: "Information Desk", w: 3, h: 5, x: 28, y: 28 },
{ name: "Utility Room", w: 6, h: 5, x: 28, y: 34 }
]},
{ id: "2F", name: "2nd Floor (Amenities)", rooms: [
{ name: "Cafeteria", w: 15, h: 12, x: 1, y: 1 },
{ name: "Terrace Dining", w: 15, h: 12, x: 21, y: 1 },
{ name: "Function Hall", w: 18, h: 15, x: 1, y: 13 },
{ name: "Gym", w: 15, h: 12, x: 21, y: 13 },
{ name: "Bar", w: 10, h: 9, x: 1, y: 28 },
{ name: "Game Room", w: 9, h: 5, x: 11, y: 28 },
{ name: "Common Kitchen", w: 10, h: 9, x: 1, y: 37 },
{ name: "Business Center", w: 10, h: 9, x: 26, y: 28 },
{ name: "Admin / Security / Maint. Offices", w: 20, h: 6, x: 11, y: 37 }
]},
{ id: "3F", name: "3rd Floor (Office)", rooms: [
{ name: "Exec Office 1", w: 15, h: 8, x: 1, y: 1 },
{ name: "Exec Office 2", w: 15, h: 8, x: 21, y: 1 },
{ name: "Board Room", w: 15, h: 9, x: 1, y: 9 },
{ name: "Exec Office 3", w: 15, h: 8, x: 21, y: 9 },
{ name: "Shared Lounge", w: 10, h: 9, x: 1, y: 28 },
{ name: "Conference Room", w: 15, h: 6, x: 11, y: 28 },
{ name: "Pantry", w: 6, h: 5, x: 27, y: 28 },
{ name: "Exec Office 4", w: 15, h: 8, x: 1, y: 37 }
]},
{ id: "4F", name: "4th Floor (Office)", rooms: [
{ name: "Office Unit 1", w: 9, h: 10, x: 1, y: 1 },
{ name: "Office Unit 2", w: 9, h: 10, x: 10, y: 1 },
{ name: "Office Unit 3", w: 9, h: 10, x: 19, y: 1 },
{ name: "Office Unit 4", w: 9, h: 10, x: 27, y: 1 },
{ name: "Office Unit 5", w: 9, h: 10, x: 1, y: 11 },
{ name: "Office Unit 6", w: 9, h: 10, x: 27, y: 11 },
{ name: "Meeting Room", w: 15, h: 6, x: 1, y: 28 },
{ name: "Pantry", w: 6, h: 5, x: 17, y: 28 },
{ name: "Utility", w: 6, h: 5, x: 24, y: 28 }
]},
{ id: "5F", name: "5th Floor (Office)", rooms: [
{ name: "Co-working Lounge", w: 15, h: 8, x: 1, y: 1 },
{ name: "Meeting Room", w: 10, h: 6, x: 16, y: 1 },
{ name: "Pantry", w: 6, h: 5, x: 27, y: 1 },
{ name: "8x Office Units (6x10m)", w: 35, h: 12, x: 1, y: 28 }
]},
{ id: "6F", name: "6th Floor (Office)", rooms: [
{ name: "10x Office Units (5x6m)", w: 25, h: 12, x: 1, y: 1 },
{ name: "Shared Workspace", w: 10, h: 9, x: 26, y: 1 },
{ name: "Printing Room", w: 6, h: 5, x: 26, y: 10 },
{ name: "Pantry", w: 6, h: 5, x: 1, y: 28 }
]},
{ id: "7F", name: "7th Floor (Office)", rooms: [
{ name: "Innovation Lab", w: 10, h: 9, x: 1, y: 1 },
{ name: "Shared Lounge", w: 10, h: 9, x: 26, y: 1 },
{ name: "Meeting Pods (3x5m)", w: 12, h: 5, x: 12, y: 1 },
{ name: "8x Flexible Suites (5x9m)", w: 35, h: 12, x: 1, y: 28 }
]},
{ id: "8F", name: "8th Floor (Office)", rooms: [
{ name: "Premium Office 1", w: 15, h: 8, x: 1, y: 1 },
{ name: "Premium Office 2", w: 15, h: 8, x: 21, y: 1 },
{ name: "Executive Lounge", w: 10, h: 9, x: 1, y: 9 },
{ name: "Pantry", w: 6, h: 5, x: 1, y: 28 },
{ name: "4x Standard Offices", w: 24, h: 10, x: 8, y: 28 }
]},
{ id: "9F", name: "9th Floor (Hospitality)", rooms: [
{ name: "Reception Lounge", w: 10, h: 9, x: 1, y: 1 },
{ name: "Linen", w: 6, h: 5, x: 12, y: 1 },
{ name: "Housekeeping", w: 6, h: 5, x: 19, y: 1 },
{ name: "8x Hotel Rooms (5x9m)", w: 35, h: 12, x: 1, y: 28 }
]},
{ id: "10F", name: "10th Floor (Hospitality)", rooms: [
{ name: "Guest Lounge", w: 10, h: 9, x: 1, y: 1 },
{ name: "2x Family Suites (9x10m)", w: 18, h: 10, x: 12, y: 1 },
{ name: "Housekeeping", w: 6, h: 5, x: 1, y: 28 },
{ name: "6x Deluxe Suites (6x10m)", w: 28, h: 10, x: 8, y: 28 }
]},
{ id: "11F", name: "11th Floor (Residential)", rooms: [
{ name: "Family Lounge", w: 10, h: 9, x: 1, y: 1 },
{ name: "Laundry Room", w: 6, h: 5, x: 12, y: 1 },
{ name: "4x Residential Units (15x8m)", w: 35, h: 16, x: 1, y: 28 }
]},
{ id: "12F", name: "12th Floor (Residential)", rooms: [
{ name: "Sky Garden", w: 15, h: 8, x: 1, y: 1 },
{ name: "Lounge", w: 10, h: 9, x: 17, y: 1 },
{ name: "2x Large Units (15x12m)", w: 30, h: 12, x: 1, y: 28 }
]},
{ id: "13F", name: "13th Floor (Penthouse)", rooms: [
{ name: "Penthouse A (15x16m)", w: 15, h: 16, x: 1, y: 1 },
{ name: "Penthouse B (15x16m)", w: 15, h: 16, x: 21, y: 1 },
{ name: "Private Lounge", w: 10, h: 9, x: 1, y: 28 },
{ name: "Viewing Deck", w: 15, h: 6, x: 12, y: 28 }
]},
{ id: "ROOF", name: "14th Floor (Roof)", rooms: [
{ name: "Solar Panels", w: 15, h: 12, x: 1, y: 1 },
{ name: "Roof Garden", w: 15, h: 12, x: 21, y: 1 },
{ name: "Mechanical & OH Water Tank", w: 20, h: 9, x: 1, y: 13 },
{ name: "Cooling Towers", w: 15, h: 6, x: 21, y: 13 },
{ name: "Maintenance & Pump", w: 12, h: 5, x: 1, y: 28 }
]}
];
// FIXED BUILDING CORE
const fixedCoreElements = [
{ name: "Elevator Lobby", w: 10, h: 9, x: 13, y: 18 },
{ name: "Pass. Elevators (3)", w: 9, h: 5, x: 13, y: 13 },
{ name: "Service Elev.", w: 3, h: 5, x: 22, y: 13 },
{ name: "Fire Exit Stair 1", w: 3, h: 5, x: 10, y: 18 },
{ name: "Fire Exit Stair 2", w: 3, h: 5, x: 23, y: 18 },
{ name: "PWD Toilet", w: 3, h: 5, x: 10, y: 23 },
{ name: "Male Toilet", w: 3, h: 5, x: 13, y: 27 },
{ name: "Female Toilet", w: 3, h: 5, x: 16, y: 27 },
{ name: "Electrical Room", w: 6, h: 5, x: 19, y: 27 },
{ name: "AHU", w: 6, h: 5, x: 25, y: 27 },
{ name: "Pipe Chase", w: 3, h: 5, x: 10, y: 13 },
{ name: "Garbage Chute", w: 3, h: 5, x: 25, y: 18 }
];
let activeFloorIndex = 2;
function renderSidebar() {
const container = [Link]('floorButtons');
[Link] = '';
[Link]((floor, idx) => {
const btn = [Link]('button');
[Link] = `floor-btn ${idx === activeFloorIndex ? 'active' : ''}`;
[Link] = `<span>${[Link]}</span> <span
class="badge">${[Link]}</span>`;
[Link] = () => selectFloor(idx);
[Link](btn);
});
}
function selectFloor(index) {
activeFloorIndex = index;
renderSidebar();
renderFloorPlan();
}
function renderFloorPlan() {
const grid = [Link]('planGrid');
const title = [Link]('currentFloorTitle');
[Link] = '';
const currentFloor = floorsData[activeFloorIndex];
[Link] = [Link];
[Link](room => {
const el = [Link]('div');
[Link] = 'room';
[Link] = `${room.x} / span ${room.w}`;
[Link] = `${room.y} / span ${room.h}`;
[Link] = `<strong>${[Link]}</strong><span>${room.w}m ×
${room.h}m</span>`;
[Link](el);
});
[Link](core => {
const el = [Link]('div');
[Link] = 'room core-element';
[Link] = `${core.x} / span ${core.w}`;
[Link] = `${core.y} / span ${core.h}`;
[Link] = `<strong>${[Link]}</strong><span>${core.w}m ×
${core.h}m</span>`;
[Link](el);
});
}
renderSidebar();
renderFloorPlan();
</script>
</body>
</html>