Hugging Face's logo

Spaces:
awacke1
/
HTML5DragDropCards
Running

App Files Community
awacke1 commited on
Commit
58e28e6
·
verified ·
1 Parent(s): 6f39bb9

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +39 -17
index.html CHANGED
@@ -1,19 +1,41 @@
1
- <!doctype html>
 
 
 
 
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
 
 
 
 
1
+ import streamlit as st
2
+
3
+ # A-Frame HTML template with drag-and-drop functionality
4
+ aframe_html = """
5
+ <!DOCTYPE html>
6
  <html>
7
+ <head>
8
+ <meta charset="UTF-8">
9
+ <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
10
+ <!-- Include the drag-and-drop component -->
11
+ <script src="https://unpkg.com/aframe-physics-system/dist/aframe-physics-system.min.js"></script>
12
+ <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
13
+ </head>
14
+ <body>
15
+ <a-scene physics="debug: true">
16
+ <!-- Card entity -->
17
+ <a-box id="card" position="0 0.5 0" rotation="0 45 0" depth="0.01" height="0.64" width="0.44"
18
+ src="https://your-server.com/path/to/card-texture.png"
19
+ dynamic-body
20
+ grabbable
21
+ constraint="target: #hand; type: lock">
22
+ </a-box>
23
+
24
+ <!-- Environment -->
25
+ <a-entity environment="preset: forest;"></a-entity>
26
+
27
+ <!-- Camera -->
28
+ <a-entity camera look-controls position="0 1.6 0">
29
+ <a-entity id="hand" cursor="fuse: true; fuseTimeout: 500"
30
+ position="0 0 -1"
31
+ geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
32
+ material="color: black; shader: flat">
33
+ </a-entity>
34
+ </a-entity>
35
+ </a-scene>
36
+ </body>
37
  </html>
38
+ """
39
+
40
+ # Streamlit command to render the A-Frame scene
41
+ st.markdown(aframe_html, unsafe_allow_html=True)