Spaces:
Sleeping
Sleeping
| import streamlit.components.v1 as components | |
| import streamlit as st | |
| # Set the page config (optional) | |
| st.set_page_config(page_title="Dark Mode Website with Spline Embed", layout="wide") | |
| # Embed your HTML file | |
| html_code = """<html><head><base href="https://somnath.com/"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Interactive 3D Scene Website</title><style> | |
| body, html { | |
| margin: 0; | |
| padding: 0; | |
| font-family: Arial, sans-serif; | |
| background-color: #25272c; | |
| color: #ffffff; | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| .container { | |
| position: relative; | |
| width: 100%; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| .spline-container { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100vh; | |
| } | |
| .info-overlay { | |
| position: absolute; | |
| bottom: 20px; | |
| left: 20px; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| padding: 10px 20px; | |
| border-radius: 5px; | |
| z-index: 5; | |
| opacity: 0; | |
| transition: opacity 0.3s ease-in-out; | |
| } | |
| .info-overlay:hover { | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="spline-container"> | |
| <script type="module" src="https://unpkg.com/@splinetool/viewer@1.9.28/build/spline-viewer.js"></script> | |
| <spline-viewer url="https://prod.spline.design/xgVpJw5nLv2ugUpH/scene.splinecode"></spline-viewer> | |
| </div> | |
| <div class="info-overlay"> | |
| <p>Interact with the 3D scene using your mouse or touch!</p> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', (event) => { | |
| const splineViewer = document.querySelector('spline-viewer'); | |
| const infoOverlay = document.querySelector('.info-overlay'); | |
| splineViewer.addEventListener('load', () => { | |
| console.log('Spline scene loaded successfully'); | |
| infoOverlay.style.opacity = '1'; | |
| setTimeout(() => { | |
| infoOverlay.style.opacity = '0'; | |
| }, 3000); | |
| }); | |
| splineViewer.addEventListener('error', (error) => { | |
| console.error('Error loading Spline scene:', error); | |
| infoOverlay.innerHTML = '<p>Error loading 3D scene. Please try again later.</p>'; | |
| infoOverlay.style.opacity = '1'; | |
| }); | |
| // Add interactivity to the Spline scene | |
| splineViewer.addEventListener('mousedown', () => { | |
| document.body.style.cursor = 'grabbing'; | |
| }); | |
| splineViewer.addEventListener('mouseup', () => { | |
| document.body.style.cursor = 'grab'; | |
| }); | |
| splineViewer.addEventListener('mousemove', () => { | |
| infoOverlay.style.opacity = '0'; | |
| }); | |
| // Responsive design for mobile devices | |
| function handleResize() { | |
| const vh = window.innerHeight * 0.01; | |
| document.documentElement.style.setProperty('--vh', `${vh}px`); | |
| } | |
| window.addEventListener('resize', handleResize); | |
| handleResize(); | |
| }); | |
| </script> | |
| </body></html> | |
| """ | |
| # Render the HTML code using Streamlit's components | |
| components.html(html_code, height=800) |