Hugging Face's logo

Spaces:
Mkdm
/
ar
Running

App Files Community
ar / index.html
Mkdm's picture
Mkdm
all servisc botton not work make it work to try ar - Initial Deployment
b302d18 verified
Raw History Blame Contribute Delete
19.2 kB
<!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>