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>Dark Mode Website with Spline Embed</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; | |
| } | |
| </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/9zdGaKbmeUwyMVbk/scene.splinecode"> | |
| <img src="https://somnath.com/spline-preview.png" alt="3D interactive scene with geometric shapes and vibrant colors" width="100%" height="100%" style="width: 100%; height: 100%; object-fit: cover;"> | |
| </spline-viewer> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', (event) => { | |
| const splineViewer = document.querySelector('spline-viewer'); | |
| splineViewer.addEventListener('load', () => { | |
| console.log('Spline scene loaded successfully'); | |
| }); | |
| splineViewer.addEventListener('error', (error) => { | |
| console.error('Error loading Spline scene:', error); | |
| }); | |
| }); | |
| </script> | |
| </body></html> | |
| """ | |
| # Render the HTML code using Streamlit's components | |
| components.html(html_code, height=800) |