Blame for index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AR Creator Studio</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6d28d9',
                        secondary: '#10b981',
                        dark: '#0f172a',
                        darker: '#020617',
                        light: '#f8fafc',
                    }
                }
            }
        }
    </script>
    <style>
        .sidebar {
            scrollbar-width: thin;
            scrollbar-color: #6d28d9 #020617;
        }
        .sidebar::-webkit-scrollbar {
            width: 6px;
        }
        .sidebar::-webkit-scrollbar-track {
            background: #020617;
        }
        .sidebar::-webkit-scrollbar-thumb {
            background-color: #6d28d9;
            border-radius: 6px;
        }
        .ar-preview {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
        }
        .floating-chat {
            box-shadow: 0 10px 25px -5px rgba(109, 40, 217, 0.3);
        }
        .submenu {
            transition: all 0.3s ease;
            max-height: 0;
            overflow: hidden;
        }
        .submenu.open {
            max-height: 500px;
        }
    </style>
</head>
<body class="bg-darker text-light font-sans flex flex-col h-screen">
    <!-- Top Bar -->
    <div class="bg-dark border-b border-gray-800 p-4 flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <h1 class="text-xl font-bold text-primary">AR Creator Studio</h1>
            <div class="bg-gray-800 text-sm px-3 py-1 rounded-full">
                <span class="text-primary">1</span> of <span class="text-secondary">2</span> AR Experiences Published
            </div>
        </div>
        <div class="flex space-x-3">
            <button class="px-4 py-2 rounded-md border border-gray-700 hover:bg-gray-800 transition">
                Close
            </button>
            <button class="px-4 py-2 rounded-md bg-primary hover:bg-purple-800 transition font-medium">
                Publish
            </button>
        </div>
    </div>

    <!-- Main Content -->
    <div class="flex flex-1 overflow-hidden">
        <!-- Sidebar -->
        <div class="w-64 bg-dark border-r border-gray-800 flex flex-col sidebar overflow-y-auto">
            <div class="p-4">
                <h2 class="text-lg font-semibold mb-4">Create AR Experience</h2>
                
                <!-- Add Experience Image -->
                <div class="mb-6">
                    <button class="w-full flex items-center justify-between p-3 bg-gray-800 rounded-lg hover:bg-gray-700 transition">
                        <span class="flex items-center">
                            <i class="fas fa-image mr-3 text-primary"></i>
                            Add Experience Image
                        </span>
                        <i class="fas fa-chevron-right text-xs text-gray-400"></i>
                    </button>
                </div>
                
                <!-- Add Element -->
                <div class="mb-6">
                    <div class="mb-2">
                        <button id="elements-btn" class="w-full flex items-center justify-between p-3 bg-gray-800 rounded-lg hover:bg-gray-700 transition">
                            <span class="flex items-center">
                                <i class="fas fa-cube mr-3 text-primary"></i>
                                Add Element
                            </span>
                            <i id="elements-arrow" class="fas fa-chevron-down text-xs text-gray-400"></i>
                        </button>
                    </div>
                    <div id="elements-submenu" class="submenu pl-8">
                        <div class="mb-2">
                            <button class="w-full text-left p-2 rounded hover:bg-gray-700 transition flex items-center">
                                <i class="fas fa-video mr-3 text-blue-400"></i>
                                Video
                            </button>
                        </div>
                        <div class="mb-2">
                            <button class="w-full text-left p-2 rounded hover:bg-gray-700 transition flex items-center">
                                <i class="fas fa-photo-film mr-3 text-green-400"></i>
                                GIF
                            </button>
                        </div>
                        <div class="mb-2">
                            <button class="w-full text-left p-2 rounded hover:bg-gray-700 transition flex items-center">
                                <i class="fas fa-cube mr-3 text-purple-400"></i>
                                3D Object
                            </button>
                        </div>
                        <div class="mb-2">
                            <button class="w-full text-left p-2 rounded hover:bg-gray-700 transition flex items-center">
                                <i class="fas fa-images mr-3 text-yellow-400"></i>
                                Image Gallery
                            </button>
                        </div>
                        <div class="mb-2">
                            <button class="w-full text-left p-2 rounded hover:bg-gray-700 transition flex items-center">
                                <i class="fas fa-globe mr-3 text-red-400"></i>
                                360° Media
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- Add Buttons -->
                <div class="mb-6">
                    <div class="mb-2">
                        <button id="buttons-btn" class="w-full flex items-center justify-between p-3 bg-gray-800 rounded-lg hover:bg-gray-700 transition">
                            <span class="flex items-center">
                                <i class="fas fa-square-plus mr-3 text-primary"></i>
                                Add Buttons (Optional)
                            </span>
                            <i id="buttons-arrow" class="fas fa-chevron-down text-xs text-gray-400"></i>
                        </button>
                    </div>
                    <div id="buttons-submenu" class="submenu pl-8">
                        <div class="mb-2">
                            <button class="w-full text-left p-2 rounded hover:bg-gray-700 transition flex items-center">
                                <i class="fas fa-link mr-3 text-blue-400"></i>
                                URL Button
                            </button>
                        </div>
                        <div class="mb-2">
                            <button class="w-full text-left p-2 rounded hover:bg-gray-700 transition flex items-center">
                                <i class="fas fa-vr-cardboard mr-3 text-green-400"></i>
                                AR Button
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- Help Section -->
                <div class="mt-8 pt-6 border-t border-gray-800">
                    <h3 class="text-sm font-medium text-gray-400 mb-3">Need Help?</h3>
                    <a href="#" class="flex items-center text-primary hover:text-purple-400 transition">
                        <i class="fas fa-circle-play mr-2"></i>
                        Quick Tutorial
                    </a>
                </div>
            </div>
        </div>

        <!-- Main Preview Area -->
        <div class="flex-1 flex flex-col">
            <div class="ar-preview flex-1 flex items-center justify-center p-8 relative">
                <div class="max-w-2xl w-full h-full bg-gray-900 rounded-xl border-2 border-gray-700 flex items-center justify-center relative overflow-hidden">
                    <div id="ar-content" class="w-full h-full">
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div class="text-center p-6">
                                <i class="fas fa-cube text-4xl text-gray-600 mb-4"></i>
                                <h3 class="text-xl font-medium mb-2">AR Experience Demo</h3>
                                <p class="text-gray-400 mb-4">Try our sample AR experience</p>
                                <button id="try-ar" class="px-4 py-2 bg-primary hover:bg-purple-800 rounded-md transition">
                                    <i class="fas fa-vr-cardboard mr-2"></i> Try AR Now
                                </button>
                            </div>
                        </div>
                        <!-- Sample AR elements that appear when Try AR is clicked -->
                        <div id="ar-elements" class="hidden absolute inset-0">
                            <div class="ar-object" style="top: 30%; left: 40%;">
                                <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white">
                                    <i class="fas fa-cube"></i>
                                </div>
                            </div>
                            <div class="ar-object" style="top: 50%; left: 60%;">
                                <div class="w-20 h-20 bg-green-500 rounded-lg flex items-center justify-center text-white">
                                    <i class="fas fa-tree"></i>
                                </div>
                            </div>
                            <div class="ar-object" style="top: 70%; left: 30%;">
                                <div class="w-24 h-24 bg-purple-500 rounded-full flex items-center justify-center text-white">
                                    <i class="fas fa-globe"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Floating action buttons -->
                <div class="absolute bottom-6 right-6 flex space-x-3">
                    <button class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center transition">
                        <i class="fas fa-undo text-gray-400"></i>
                    </button>
                    <button class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center transition">
                        <i class="fas fa-redo text-gray-400"></i>
                    </button>
                    <button class="w-10 h-10 rounded-full bg-primary hover:bg-purple-800 flex items-center justify-center transition">
                        <i class="fas fa-eye text-white"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-dark border-t border-gray-800 p-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="text-sm text-gray-400 mb-3 md:mb-0">
                © 2023 AR Creator Studio. All rights reserved.
            </div>
            <div class="flex space-x-4">
                <a href="#" class="text-gray-400 hover:text-blue-400 transition">
                    <i class="fab fa-linkedin-in"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-red-400 transition">
                    <i class="fab fa-youtube"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-pink-400 transition">
                    <i class="fab fa-instagram"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-blue-400 transition">
                    <i class="fab fa-twitter"></i>
                </a>
            </div>
            <div class="flex space-x-4 mt-3 md:mt-0">
                <a href="#" class="text-sm text-gray-400 hover:text-primary transition">Contact</a>
                <a href="#" class="text-sm text-gray-400 hover:text-primary transition">Privacy</a>
                <a href="#" class="text-sm text-gray-400 hover:text-primary transition">Terms</a>
            </div>
        </div>
    </footer>

    <!-- Floating Chat Button -->
    <button class="floating-chat fixed bottom-6 right-6 w-14 h-14 rounded-full bg-primary hover:bg-purple-800 flex items-center justify-center transition shadow-lg">
        <i class="fas fa-comment-dots text-white text-xl"></i>
    </button>

    <script>
        // Toggle submenus
        document.getElementById('elements-btn').addEventListener('click', function() {
            const submenu = document.getElementById('elements-submenu');
            const arrow = document.getElementById('elements-arrow');
            
            submenu.classList.toggle('open');
            arrow.classList.toggle('fa-chevron-down');
            arrow.classList.toggle('fa-chevron-up');
        });
        
        document.getElementById('buttons-btn').addEventListener('click', function() {
            const submenu = document.getElementById('buttons-submenu');
            const arrow = document.getElementById('buttons-arrow');
            
            submenu.classList.toggle('open');
            arrow.classList.toggle('fa-chevron-down');
            arrow.classList.toggle('fa-chevron-up');
        });
        
        // Simulate chat button click
        document.querySelector('.floating-chat').addEventListener('click', function() {
            alert('Chat support is available 24/7 for any AR creation questions!');
        });

        // AR Element Types
        const arElements = {
            video: { icon: 'fa-video', color: 'bg-blue-500', content: '<i class="fas fa-video"></i>' },
            gif: { icon: 'fa-photo-film', color: 'bg-green-500', content: '<i class="fas fa-photo-film"></i>' },
            '3d': { icon: 'fa-cube', color: 'bg-purple-500', content: '<i class="fas fa-cube"></i>' },
            gallery: { icon: 'fa-images', color: 'bg-yellow-500', content: '<i class="fas fa-images"></i>' },
            '360': { icon: 'fa-globe', color: 'bg-red-500', content: '<i class="fas fa-globe"></i>' }
        };

        // Initialize AR Experience
        function initAR(elementType = null) {
            const arContent = document.getElementById('ar-content');
            const arElementsContainer = document.getElementById('ar-elements');
            
            // Hide initial content
            arContent.querySelector('div').classList.add('hidden');
            arElementsContainer.classList.remove('hidden');
            
            // Clear previous elements
            arElementsContainer.innerHTML = '';
            
            // Add specific element if specified
            if (elementType && arElements[elementType]) {
                const element = arElements[elementType];
                const arObject = document.createElement('div');
                arObject.className = `ar-object absolute w-24 h-24 ${element.color} rounded-lg flex items-center justify-center text-white text-2xl`;
                arObject.style.top = '50%';
                arObject.style.left = '50%';
                arObject.style.transform = 'translate(-50%, -50%)';
                arObject.innerHTML = element.content;
                arElementsContainer.appendChild(arObject);
            } else {
                // Add default demo elements
                const defaultElements = [
                    { type: '3d', top: '30%', left: '40%', size: 'w-16 h-16', shape: 'rounded-full' },
                    { type: 'gif', top: '50%', left: '60%', size: 'w-20 h-20', shape: 'rounded-lg' },
                    { type: '360', top: '70%', left: '30%', size: 'w-24 h-24', shape: 'rounded-full' }
                ];
                
                defaultElements.forEach(el => {
                    const element = arElements[el.type];
                    const arObject = document.createElement('div');
                    arObject.className = `ar-object absolute ${el.size} ${element.color} ${el.shape} flex items-center justify-center text-white text-2xl`;
                    arObject.style.top = el.top;
                    arObject.style.left = el.left;
                    arObject.innerHTML = element.content;
                    arElementsContainer.appendChild(arObject);
                });
            }
            
            // Show AR instructions
            alert('Point your camera at a flat surface to view AR objects. On mobile, this would launch your camera.');
        }

        // Try AR functionality
        document.getElementById('try-ar').addEventListener('click', initAR);
        
        // Make all element buttons work with AR
        document.querySelectorAll('#elements-submenu button').forEach((button, index) => {
            button.addEventListener('click', function() {
                const elementTypes = ['video', 'gif', '3d', 'gallery', '360'];
                initAR(elementTypes[index]);
            });
        });

        // Make AR button in buttons submenu work
        document.querySelector('#buttons-submenu button:nth-child(2)').addEventListener('click', initAR);

        // Make publish button functional
        document.querySelector('button:contains("Publish")').addEventListener('click', function() {
            alert('Your AR experience has been published! Share the link with others to try it.');
        });

        // Make AR objects interactive
        function setupARInteractions() {
            document.querySelectorAll('.ar-object').forEach(obj => {
                obj.addEventListener('click', function() {
                    alert('In a real AR experience, you could move and interact with this object!');
                });
            });
        }
        
        // Re-run setup whenever new AR elements are added
        const observer = new MutationObserver(setupARInteractions);
        observer.observe(document.getElementById('ar-elements'), {
            childList: true,
            subtree: true
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Mkdm/ar" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>