Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BeliefScape - Sacred 3D Model Sharing</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"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| .model-card:hover .model-overlay { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .model-overlay { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| .prayer-animation { | |
| animation: float 4s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .stained-glass { | |
| background: linear-gradient(45deg, rgba(106,27,154,0.7), rgba(41,182,246,0.7), rgba(255,215,0,0.7), rgba(244,67,54,0.7)); | |
| background-size: 400% 400%; | |
| animation: gradient 15s ease infinite; | |
| } | |
| @keyframes gradient { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-[Inter]"> | |
| <!-- Header with religious theme --> | |
| <header class="stained-glass text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-seedling text-3xl mr-3 prayer-animation text-emerald-500"></i> | |
| <h1 class="text-3xl font-semibold tracking-tight">BeliefScape</h1> | |
| </div> | |
| <nav class="flex items-center space-x-6"> | |
| <a href="#" class="hover:text-yellow-200 transition">Home</a> | |
| <a href="#" class="hover:text-yellow-200 transition">Gallery</a> | |
| <a href="#" class="hover:text-yellow-200 transition">Upload</a> | |
| <a href="#" class="hover:text-yellow-200 transition">Prayers</a> | |
| <a href="#" class="hover:text-yellow-200 transition">About</a> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative bg-cover bg-center h-96" style="background-image: url('https://images.unsplash.com/photo-1518709268805-4e9042af9f23?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80');"> | |
| <div class="absolute inset-0 bg-black bg-opacity-50"></div> | |
| <div class="container mx-auto px-4 h-full flex items-center relative z-10"> | |
| <div class="max-w-2xl text-white"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">Share Sacred 3D Creations</h2> | |
| <p class="text-xl mb-6">Upload, explore and experience divine 3D models from various faith traditions. A spiritual journey through digital dimensions.</p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-purple-600 hover:bg-purple-700 px-6 py-3 rounded-lg font-medium transition">Upload Model</button> | |
| <button class="bg-white text-purple-800 hover:bg-gray-200 px-6 py-3 rounded-lg font-medium transition">Explore Gallery</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Models Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-purple-900 mb-2">Featured Sacred Models</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Browse through our collection of spiritually significant 3D models from around the world</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Model Card 1 --> | |
| <div class="bg-gray-50 rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out model-card"> | |
| <div class="relative h-64 bg-gray-200"> | |
| <img src="https://images.unsplash.com/photo-1589998059171-988d887b4ef5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1476&q=80" alt="Buddha Statue" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center model-overlay"> | |
| <button class="bg-white text-purple-800 px-6 py-2 rounded-full font-medium hover:bg-purple-100 transition">View in 3D</button> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800">Golden Buddha</h3> | |
| <p class="text-gray-600">Buddhism</p> | |
| </div> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">Featured</span> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| <span class="text-gray-600 ml-2">4.7</span> | |
| </div> | |
| <button class="text-purple-600 hover:text-purple-800"> | |
| <i class="far fa-bookmark"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Model Card 2 --> | |
| <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition model-card"> | |
| <div class="relative h-64 bg-gray-200"> | |
| <img src="https://images.unsplash.com/photo-1529107381185-bbdb361c87f4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Cross" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center model-overlay"> | |
| <button class="bg-white text-purple-800 px-6 py-2 rounded-full font-medium hover:bg-purple-100 transition">View in 3D</button> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800">Celtic Cross</h3> | |
| <p class="text-gray-600">Christianity</p> | |
| </div> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">New</span> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| <span class="text-gray-600 ml-2">4.2</span> | |
| </div> | |
| <button class="text-purple-600 hover:text-purple-800"> | |
| <i class="far fa-bookmark"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Model Card 3 --> | |
| <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition model-card"> | |
| <div class="relative h-64 bg-gray-200"> | |
| <img src="https://images.unsplash.com/photo-1566438480900-0609be27a4be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1498&q=80" alt="Hindu Deity" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center model-overlay"> | |
| <button class="bg-white text-purple-800 px-6 py-2 rounded-full font-medium hover:bg-purple-100 transition">View in 3D</button> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800">Ganesha Statue</h3> | |
| <p class="text-gray-600">Hinduism</p> | |
| </div> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Popular</span> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <span class="text-gray-600 ml-2">5.0</span> | |
| </div> | |
| <button class="text-purple-600 hover:text-purple-800"> | |
| <i class="far fa-bookmark"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="border-2 border-purple-600 text-purple-600 hover:bg-purple-600 hover:text-white px-8 py-3 rounded-lg font-medium transition">View All Models</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Upload Section --> | |
| <section class="py-16 bg-purple-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto bg-white rounded-2xl shadow-lg overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-purple-100 p-8 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-cloud-upload-alt text-6xl text-purple-600 mb-6"></i> | |
| <h3 class="text-2xl font-bold text-purple-900 mb-2">Share Your Sacred Creations</h3> | |
| <p class="text-gray-600">Upload 3D models of religious artifacts, spiritual symbols, or sacred architecture</p> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 p-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Upload 3D Model</h2> | |
| <form> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Model Name</label> | |
| <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" placeholder="e.g. Ancient Cross"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Religion/Spiritual Tradition</label> | |
| <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"> | |
| <option>Christianity</option> | |
| <option>Islam</option> | |
| <option>Hinduism</option> | |
| <option>Buddhism</option> | |
| <option>Judaism</option> | |
| <option>Sikhism</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Description</label> | |
| <textarea class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" rows="3" placeholder="Describe the spiritual significance of your model"></textarea> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2">Upload Files</label> | |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center"> | |
| <i class="fas fa-file-upload text-3xl text-gray-400 mb-2"></i> | |
| <p class="text-gray-500">Drag & drop your 3D model files here or click to browse</p> | |
| <p class="text-xs text-gray-400 mt-2">Supported formats: .obj, .gltf, .fbx, .stl</p> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 rounded-lg font-medium transition">Submit Sacred Model</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Spiritual Features Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-purple-900 mb-2">Spiritual Features</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Enhance your experience with our unique spiritual tools</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-8 rounded-xl text-center hover:shadow-lg transition"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-hands-praying text-2xl text-purple-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Virtual Prayer Space</h3> | |
| <p class="text-gray-600">Create a personalized sacred space around your 3D models for meditation and prayer</p> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-xl text-center hover:shadow-lg transition"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-book-bible text-2xl text-blue-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Scripture Integration</h3> | |
| <p class="text-gray-600">Attach relevant sacred texts or teachings to your models for deeper understanding</p> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-xl text-center hover:shadow-lg transition"> | |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-people-group text-2xl text-green-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Faith Communities</h3> | |
| <p class="text-gray-600">Connect with others who share your spiritual interests and discuss sacred art</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-16 bg-purple-900 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-2">Sacred Experiences</h2> | |
| <p class="opacity-80 max-w-2xl mx-auto">What our community members say about their spiritual journey with 3D models</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-purple-800 p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-purple-600 flex items-center justify-center mr-4"> | |
| <span class="text-xl">M</span> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Maria G.</h4> | |
| <p class="text-purple-300 text-sm">Catholic Educator</p> | |
| </div> | |
| </div> | |
| <p class="italic">"Using the 3D models of ancient churches has transformed how I teach religious history. My students can now explore sacred spaces that would otherwise be inaccessible."</p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <div class="bg-purple-800 p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-purple-600 flex items-center justify-center mr-4"> | |
| <span class="text-xl">A</span> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Amit P.</h4> | |
| <p class="text-purple-300 text-sm">Hindu Devotee</p> | |
| </div> | |
| </div> | |
| <p class="italic">"As someone living far from India, being able to view and interact with detailed 3D models of our deities brings me closer to my spiritual roots. The community annotations add so much depth."</p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <div class="bg-purple-800 p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-purple-600 flex items-center justify-center mr-4"> | |
| <span class="text-xl">R</span> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Rabbi D.</h4> | |
| <p class="text-purple-300 text-sm">Jewish Scholar</p> | |
| </div> | |
| </div> | |
| <p class="italic">"The collection of historical Jewish artifacts in 3D is remarkable. I've used these models in my synagogue to teach about our heritage in an engaging, interactive way."</p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Call to Action --> | |
| <section class="py-16 bg-gradient-to-r from-purple-600 to-blue-600 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-4">Ready to Begin Your Sacred 3D Journey?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of spiritual explorers sharing and discovering sacred models from around the world</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-purple-800 hover:bg-gray-100 px-8 py-3 rounded-lg font-medium text-lg transition">Sign Up Free</button> | |
| <button class="border-2 border-white hover:bg-white hover:bg-opacity-10 px-8 py-3 rounded-lg font-medium text-lg transition">Learn More</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-16 pb-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-church mr-2"></i> Divine Dimensions | |
| </h3> | |
| <p class="text-gray-400">A sacred space for sharing and exploring spiritual 3D models from all faith traditions.</p> | |
| <div class="flex space-x-4 mt-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Explore</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Featured Models</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">New Arrivals</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Popular Models</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Faith Collections</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Virtual Tours</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Community</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Forums</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Events</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Prayer Groups</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Testimonials</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Support</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Upload Guidelines</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Spiritual Advisory</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Donate</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 Divine Dimensions. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Prayer Modal (hidden by default) --> | |
| <div id="prayerModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl max-w-md w-full mx-4 p-8 relative"> | |
| <button id="closePrayerModal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <div class="text-center"> | |
| <i class="fas fa-hands-praying text-4xl text-purple-600 mb-4"></i> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">Sacred Moment</h3> | |
| <p class="text-gray-600 mb-6">Take a moment for prayer or meditation as you view this sacred model</p> | |
| <div class="bg-gray-100 p-4 rounded-lg mb-6"> | |
| <p class="italic text-gray-700">"May this digital space become a vessel for spiritual connection and understanding across all traditions."</p> | |
| </div> | |
| <div class="flex justify-center space-x-4"> | |
| <button class="bg-purple-600 text-white px-6 py-2 rounded-lg hover:bg-purple-700 transition">Start Prayer</button> | |
| <button class="border border-gray-300 px-6 py-2 rounded-lg hover:bg-gray-100 transition">Light Candle</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple script to toggle prayer modal | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const prayerButtons = document.querySelectorAll('[data-prayer]'); | |
| const prayerModal = document.getElementById('prayerModal'); | |
| const closeButton = document.getElementById('closePrayerModal'); | |
| prayerButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| prayerModal.classList.remove('hidden'); | |
| }); | |
| }); | |
| closeButton.addEventListener('click', () => { | |
| prayerModal.classList.add('hidden'); | |
| }); | |
| // Close modal when clicking outside | |
| prayerModal.addEventListener('click', (e) => { | |
| if (e.target === prayerModal) { | |
| prayerModal.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| </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=Echooo427/beliefscape" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |