Spaces:
Sleeping
Sleeping
File size: 1,840 Bytes
1be7f3c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
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) |