Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Voxel Pagoda Garden</title> | |
| <meta name="description" content="An immersive voxel art scene featuring a beautiful pagoda surrounded by cherry blossoms in a serene Japanese garden"> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| background: linear-gradient(135deg, #87CEEB 0%, #98FB98 100%); | |
| font-family: 'Arial', sans-serif; | |
| overflow: hidden; | |
| } | |
| #info { | |
| position: absolute; | |
| top: 10px; | |
| width: 100%; | |
| text-align: center; | |
| color: #2c3e50; | |
| z-index: 100; | |
| pointer-events: none; | |
| } | |
| #info h1 { | |
| font-size: 2.5em; | |
| margin: 0; | |
| text-shadow: 2px 2px 4px rgba(255,255,255,0.7); | |
| } | |
| #info p { | |
| font-size: 1.2em; | |
| margin: 10px 0; | |
| text-shadow: 1px 1px 2px rgba(255,255,255,0.7); | |
| } | |
| #built-with { | |
| position: absolute; | |
| bottom: 20px; | |
| right: 20px; | |
| z-index: 100; | |
| } | |
| #built-with a { | |
| color: #2c3e50; | |
| text-decoration: none; | |
| font-weight: bold; | |
| background: rgba(255,255,255,0.8); | |
| padding: 8px 15px; | |
| border-radius: 20px; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.2); | |
| pointer-events: all; | |
| } | |
| #built-with a:hover { | |
| background: rgba(255,255,255,1); | |
| transform: translateY(-2px); | |
| } | |
| #loading { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| color: #2c3e50; | |
| font-size: 1.5em; | |
| z-index: 1000; | |
| } | |
| canvas { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="info"> | |
| <h1>Voxel Pagoda Garden</h1> | |
| <p>A serene Japanese garden with cherry blossoms</p> | |
| </div> | |
| <div id="built-with"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a> | |
| </div> | |
| <div id="loading">Loading beautiful voxel garden...</div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="js/voxel-scene.js"></script> | |
| </body> | |
| </html> |