Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Point Washington Project - Interactive Showcase</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div id="root"></div>

    <script type="text/babel">
        const projectDetails = {
            "Metal Roof": "High-quality metal roofing provides excellent durability and energy efficiency.",
            "Balconies": "Spacious balconies offer outdoor living space and panoramic views.",
            "Windows": "Energy-efficient windows with DP rating of 50.13 for superior wind resistance.",
            "Doors": "Stylish and secure entrance doors complement the overall design."
        };

        const ProjectDetails = ({ activeLabel }) => {
            const [showMore, setShowMore] = React.useState(false);

            return (
                <div class="bg-white p-6 rounded-lg shadow-md">
                    <h2 class="text-2xl font-bold mb-4">Project Details</h2>
                    <p><strong>Building Dimensions and Structure:</strong> Multi-story, symmetrical design with balconies and windows.</p>
                    <p><strong>Materials:</strong> Metal roof, PVC windows, Low-E glass, and argon gas filling.</p>
                    <p><strong>Window DP Ratings:</strong> All windows have a DP rating of 50.13, indicating high resistance to wind and pressure forces.</p>
                    {activeLabel && (
                        <div class="mt-4 p-4 bg-blue-100 rounded-lg">
                            <p class="font-semibold">{activeLabel}</p>
                            <p>{projectDetails[activeLabel]}</p>
                        </div>
                    )}
                    {showMore && (
                        <div class="mt-4">
                            <p><strong>Energy Efficiency:</strong> The building is designed to meet LEED Gold certification standards.</p>
                            <p><strong>Landscaping:</strong> Drought-resistant native plants are used to minimize water consumption.</p>
                            <p><strong>Parking:</strong> Underground parking with EV charging stations is available for residents.</p>
                        </div>
                    )}
                    <button 
                        onClick={() => setShowMore(!showMore)} 
                        class="mt-4 text-blue-500 hover:text-blue-700"
                    >
                        {showMore ? "Show Less" : "Show More"}
                    </button>
                </div>
            );
        };

        const DPRatingChart = () => {
            React.useEffect(() => {
                const ctx = document.getElementById('dpRatingChart').getContext('2d');
                new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: ['Type A', 'Type B', 'Type C', 'Type D', 'Type E', 'Type F'],
                        datasets: [{
                            label: 'DP Rating',
                            data: [50.13, 50.13, 50.13, 50.13, 50.13, 50.13],
                            backgroundColor: 'rgba(59, 130, 246, 0.5)',
                            borderColor: 'rgb(59, 130, 246)',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true,
                                max: 60
                            }
                        },
                        responsive: true,
                        maintainAspectRatio: false
                    }
                });
            }, []);

            return (
                <div class="bg-white p-6 rounded-lg shadow-md mt-6">
                    <h2 class="text-2xl font-bold mb-4">DP Ratings Chart</h2>
                    <div class="h-64">
                        <canvas id="dpRatingChart"></canvas>
                    </div>
                </div>
            );
        };

        const ImageGallery = () => {
            const [images, setImages] = React.useState([
                "/api/placeholder/800/600",
                "/api/placeholder/800/600",
                "/api/placeholder/800/600"
            ]);
            const [currentImage, setCurrentImage] = React.useState(0);
            const [isLightboxOpen, setIsLightboxOpen] = React.useState(false);

            const nextImage = () => setCurrentImage((prev) => (prev + 1) % images.length);
            const prevImage = () => setCurrentImage((prev) => (prev - 1 + images.length) % images.length);

            const handleFileUpload = (event) => {
                const files = Array.from(event.target.files);
                const newImages = files.map(file => URL.createObjectURL(file));
                setImages(prevImages => [...prevImages, ...newImages]);
            };

            const openLightbox = () => setIsLightboxOpen(true);
            const closeLightbox = () => setIsLightboxOpen(false);

            return (
                <div>
                    <div class="relative">
                        <img 
                            src={images[currentImage]} 
                            alt={`Project Image ${currentImage + 1}`} 
                            class="w-full h-96 object-cover rounded-lg shadow-md cursor-pointer" 
                            onClick={openLightbox}
                        />
                        <button onClick={prevImage} class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-50 hover:bg-opacity-75 rounded-full p-2">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <button onClick={nextImage} class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-50 hover:bg-opacity-75 rounded-full p-2">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                    <div class="mt-4 flex justify-between items-center">
                        <label for="image-upload" class="cursor-pointer bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
                            Upload Images
                        </label>
                        <input 
                            id="image-upload" 
                            type="file" 
                            accept="image/*" 
                            multiple 
                            onChange={handleFileUpload} 
                            class="hidden"
                        />
                        <span class="text-gray-600">{currentImage + 1} / {images.length}</span>
                    </div>
                    {isLightboxOpen && (
                        <div class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
                            <div class="relative">
                                <img 
                                    src={images[currentImage]} 
                                    alt={`Project Image ${currentImage + 1}`} 
                                    class="max-w-full max-h-screen"
                                />
                                <button 
                                    onClick={closeLightbox}
                                    class="absolute top-4 right-4 text-white text-2xl"
                                >
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                    )}
                </div>
            );
        };

        const ContactForm = () => {
            const [formData, setFormData] = React.useState({
                name: '',
                email: '',
                message: ''
            });

            const handleChange = (e) => {
                setFormData({
                    ...formData,
                    [e.target.name]: e.target.value
                });
            };

            const handleSubmit = (e) => {
                e.preventDefault();
                alert('Thank you for your message! We will get back to you soon.');
                setFormData({ name: '', email: '', message: '' });
            };

            return (
                <div class="bg-white p-6 rounded-lg shadow-md mt-6">
                    <h2 class="text-2xl font-bold mb-4">Contact Us</h2>
                    <form onSubmit={handleSubmit}>
                        <div class="mb-4">
                            <label for="name" class="block text-gray-700 font-bold mb-2">Name</label>
                            <input 
                                type="text" 
                                id="name" 
                                name="name" 
                                value={formData.name} 
                                onChange={handleChange} 
                                class="w-full px-3 py-2 border rounded-lg"
                                required
                            />
                        </div>
                        <div class="mb-4">
                            <label for="email" class="block text-gray-700 font-bold mb-2">Email</label>
                            <input 
                                type="email" 
                                id="email" 
                                name="email" 
                                value={formData.email} 
                                onChange={handleChange} 
                                class="w-full px-3 py-2 border rounded-lg"
                                required
                            />
                        </div>
                        <div class="mb-4">
                            <label for="message" class="block text-gray-700 font-bold mb-2">Message</label>
                            <textarea 
                                id="message" 
                                name="message" 
                                value={formData.message} 
                                onChange={handleChange} 
                                class="w-full px-3 py-2 border rounded-lg"
                                rows="4"
                                required
                            ></textarea>
                        </div>
                        <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
                            Send Message
                        </button>
                    </form>
                </div>
            );
        };

        const App = () => {
            const [activeLabel, setActiveLabel] = React.useState(null);

            const handleLabelClick = (label) => {
                setActiveLabel(label);
            };

            return (
                <div class="container mx-auto px-4 py-8">
                    <h1 class="text-4xl font-bold text-center mb-8">Point Washington Project</h1>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                        <div>
                            <ImageGallery />
                            <div class="mt-4 flex justify-center space-x-4">
                                {Object.keys(projectDetails).map((label) => (
                                    <button
                                        key={label}
                                        class={`px-4 py-2 rounded ${activeLabel === label ? 'bg-blue-500 text-white' : 'bg-gray-200 hover:bg-gray-300'}`}
                                        onClick={() => handleLabelClick(label)}
                                    >
                                        {label}
                                    </button>
                                ))}
                            </div>
                        </div>
                        <div>
                            <ProjectDetails activeLabel={activeLabel} />
                            <DPRatingChart />
                            <ContactForm />
                        </div>
                    </div>
                </div>
            );
        };

        ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>
</html>

AI Structural Vision

AI-powered structural assessments for Florida high-rises. Expertise in LiDAR, IoT sensors, digital twins. Compliant with SB 4-D. Covers AI algorithms, risk assessment, regulations, and coastal challenges. Advanced tech for safer buildings.