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="A beautiful voxel art scene featuring a pagoda in a garden with cherry blossoms"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: linear-gradient(to bottom, #87CEEB, #98FB98); | |
| font-family: 'Arial', sans-serif; | |
| overflow: hidden; | |
| } | |
| #header { | |
| position: absolute; | |
| top: 20px; | |
| left: 20px; | |
| z-index: 100; | |
| color: white; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.5); | |
| } | |
| #header h1 { | |
| font-size: 2rem; | |
| margin-bottom: 10px; | |
| } | |
| #header a { | |
| color: #FFD700; | |
| text-decoration: none; | |
| font-weight: bold; | |
| } | |
| #header a:hover { | |
| text-decoration: underline; | |
| } | |
| #container { | |
| width: 100vw; | |
| height: 100vh; | |
| } | |
| #info { | |
| position: absolute; | |
| bottom: 20px; | |
| left: 20px; | |
| color: white; | |
| text-shadow: 1px 1px 2px rgba(0,0,0,0.5); | |
| background: rgba(0,0,0,0.3); | |
| padding: 10px; | |
| border-radius: 5px; | |
| } | |
| #controls { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| color: white; | |
| text-shadow: 1px 1px 2px rgba(0,0,0,0.5); | |
| background: rgba(0,0,0,0.3); | |
| padding: 10px; | |
| border-radius: 5px; | |
| } | |
| .control-btn { | |
| background: rgba(255,255,255,0.2); | |
| border: none; | |
| color: white; | |
| padding: 5px 10px; | |
| margin: 5px; | |
| border-radius: 3px; | |
| cursor: pointer; | |
| } | |
| .control-btn:hover { | |
| background: rgba(255,255,255,0.3); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="header"> | |
| <h1>Voxel Pagoda Garden</h1> | |
| <p>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p> | |
| </div> | |
| <div id="container"></div> | |
| <div id="info"> | |
| <p>Drag to rotate • Scroll to zoom • Explore the pagoda and garden</p> | |
| </div> | |
| <div id="controls"> | |
| <button class="control-btn" id="dayNight">Toggle Day/Night</button> | |
| <button class="control-btn" id="blossoms">Toggle Blossoms</button> | |
| </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> |