Spaces:
Sleeping
Sleeping
File size: 2,973 Bytes
0a359f6 69daacc 0a359f6 69daacc 0a359f6 69daacc 0a359f6 69daacc 0a359f6 69daacc 0a359f6 69daacc 0a359f6 69daacc 0a359f6 69daacc 0a359f6 69daacc 0a359f6 |
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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
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) |