Documentation & Integration Guide

This document contains the source code for the Bali Villa Plumbing Dashboard and the existing Gallery Webpage. Use the Table of Contents on the left to navigate between the different code modules.

Goal: Integrate the "New Project" code into the "Gallery Page" as a 5th item.

2. The New Project: Bali Villa Plumbing

This is the standalone code for the new dashboard. This entire block needs to be inserted into the Gallery page's "Project Embed Container" section.

<!-- START OF NEW PROJECT: BALI VILLA -->
<div id="project-bali-villa" class="project-embed-container">
    <style>
        /* CSS styles from Source Lines 17-62 go here */
        #project-bali-villa .tab-active { border-bottom-color: #3D405B; color: #3D405B; }
        /* ... (Include full CSS from source) ... */
    </style>

    <div class="container mx-auto p-4">
        <header>
            <h1>MEP Project Dashboard: Bali Villa</h1>
            <p>A Proposal for the Tayeb Estate...</p>
        </header>

        <!-- TABS: Overview, Concept, Costs, Directory, Timeline -->
        <nav id="nav-tabs-bali">...</nav>
        
        <!-- CONTENT PANES -->
        <div id="tab-content-bali">
             <!-- Full content from Source Lines 80-200 goes here -->
        </div>
    </div>
</div>
<!-- END OF NEW PROJECT -->

3. Main Gallery Page

This is the host page. To add the Bali project, you must first add a "Card" to the visual grid so users can click on it.

A. The Head & Styles

Standard HTML setup found in Source Lines 352-508.

B. The Project Grid (Action Required)

Locate the <div class="gallery-grid"> section (around Source Line 519). You must add the following code block as the 5th item:

<!-- ADD THIS NEW CARD TO THE GRID -->
<div class="project-card">
    <div class="project-card-content">
        <h3>Bali Villa MEP Dashboard</h3>
        <img src="https://images.squarespace-cdn.com/content/v1/687e95ef0bfdb47a3e4afc8f/16184646-ab13-4e03-a95b-0a8948545b2e/plubming1.png?format=1000w" alt="Bali Villa">
        <p>A comprehensive MEP installation proposal featuring tiered cost analysis, local vendor directory, and execution timeline.</p>
        <a href="#project-bali-villa" class="view-project-btn">View Project Dashboard</a>
    </div>
</div>

4. Existing Embedded Projects

These are the existing projects currently in the file. They are hidden by default and appear when the buttons above are clicked.

Eden Roc Development

Source Lines: 556 -