<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Bathroom Visualizer</title>
    <link rel="stylesheet" href="https://geethanarasimha-aurea.github.io/link/btvstyles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="container">
        <aside id="grid1">
            <h1>Tile Upload & Settings</h1>
            <label for="bathroomSize">Set Bathroom Size (feet):</label>
            <div id="bathroomSize">
                <input type="number" id="floorWidth" placeholder="Width" step="0.1" value="6">
                <input type="number" id="floorLength" placeholder="Length" step="0.1" value="10">
            </div>
            <hr>

            <label for="tileSize" id="tileSizeLabel">Tile Size (feet):</label>
            <div id="tileSize">
                <input type="number" id="tileWidth" placeholder="Width" step="0.1" value="2">
                <input type="number" id="tileLength" placeholder="Length" step="0.1" value="2">
            </div>

            <label for="floorTileSize">Floor Tile Size (feet):</label>
            <div id="floorTileSize">
                <input type="number" id="floorTileWidth" placeholder="Width" step="0.1" value="2">
                <input type="number" id="floorTileLength" placeholder="Length" step="0.1" value="2">
            </div>

            <label for="walls">Upload Walls:</label>
            <div id="walls">
                <label for="leftWall" class="upload-label"><i class="fas fa-upload"></i> Left Wall</label>
                <input type="file" id="leftWall" accept="image/*">
                <label for="rightWall" class="upload-label"><i class="fas fa-upload"></i> Right Wall</label>
                <input type="file" id="rightWall" accept="image/*">
            </div>
            <div id="frontFloor">
                <label for="frontWall" class="upload-label"><i class="fas fa-upload"></i> Front Wall</label>
                <input type="file" id="frontWall" accept="image/*">
                <label for="floor" class="upload-label"><i class="fas fa-upload"></i> Floor</label>
                <input type="file" id="floor" accept="image/*">
            </div>

            <!-- Snapshot button -->
            <button id="snapshotBtn"><i class="fas fa-camera"></i> Take Snapshot</button>
        </aside>
        <main id="grid2">
            <div id="viewer"></div>
        </main>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
    <script src="https://geethanarasimha-aurea.github.io/link/btvscripts.js"></script>
    
    
    
</body>
</html>
