Hugging Face's logo

Spaces:
cyberorigin
/
episode-visualizer
Running

App Files Community
4
qhrong commited on
Commit
d62f948
·
verified ·
1 Parent(s): c005e35

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +71 -31
index.html CHANGED
@@ -7,22 +7,45 @@
7
  <title>Motion Capture Visualization</title>
8
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
9
  <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
 
10
  <style>
11
  body {
12
- font-family: Arial, sans-serif;
13
  margin: 0;
14
  padding: 20px;
15
  display: flex;
16
  flex-direction: column;
17
  align-items: center;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  }
19
 
20
  .content-container {
21
  display: flex;
22
  justify-content: space-between;
23
- width: 100%;
24
- max-width: 1200px;
25
- margin-top: 20px;
26
  }
27
 
28
  .video-container {
@@ -48,6 +71,11 @@
48
  button {
49
  margin: 0 5px;
50
  font-size: 20px;
 
 
 
 
 
51
  }
52
 
53
  .checkbox-container {
@@ -72,36 +100,48 @@
72
  <body>
73
  <h1>Motion Capture Visualization</h1>
74
 
75
- <div class="checkbox-container">
76
- <label>
77
- <input type="radio" name="videoOption" value="fold_towels" checked> Fold towels
78
- </label>
79
- <label>
80
- <input type="radio" name="videoOption" value="pipette"> Pipette
81
- </label>
82
- <label>
83
- <input type="radio" name="videoOption" value="take_the_item"> Take the item
84
- </label>
85
- <label>
86
- <input type="radio" name="videoOption" value="twist_the_tube"> Twist the tube
87
- </label>
88
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
89
 
90
- <div class="content-container">
91
- <div class="video-container">
92
- <video id="laptopVideo">
93
- <source src="https://huggingface.co/datasets/cyberorigin/fold_towels/resolve/main/Video/video.mp4"
94
- type="video/mp4">
95
- Your browser does not support the video tag.
96
- </video>
97
- <div class="controls">
98
- <button id="playPauseBtn">▶️</button>
99
- <button id="rewindBtn">⏪</button>
100
- <button id="forwardBtn">⏩</button>
101
- <button id="restartBtn">↩️</button>
102
  </div>
 
103
  </div>
104
- <div id="plotDiv"></div>
105
  </div>
106
 
107
  <div id="loadingIndicator">Loading...</div>
 
7
  <title>Motion Capture Visualization</title>
8
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
9
  <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
10
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
11
  <style>
12
  body {
13
+ font-family: 'Orbitron', sans-serif;
14
  margin: 0;
15
  padding: 20px;
16
  display: flex;
17
  flex-direction: column;
18
  align-items: center;
19
+ background-color: #000;
20
+ color: #fff;
21
+ }
22
+
23
+ h1 {
24
+ color: gold;
25
+ text-shadow: 2px 2px 4px rgba(255,215,0,0.5);
26
+ }
27
+
28
+ .main-container {
29
+ display: flex;
30
+ width: 100%;
31
+ max-width: 1400px;
32
+ }
33
+
34
+ .episode-list {
35
+ width: 150px;
36
+ margin-right: 20px;
37
+ }
38
+
39
+ .episode-list label {
40
+ display: block;
41
+ margin-bottom: 5px;
42
+ color: #ddd;
43
  }
44
 
45
  .content-container {
46
  display: flex;
47
  justify-content: space-between;
48
+ flex-grow: 1;
 
 
49
  }
50
 
51
  .video-container {
 
71
  button {
72
  margin: 0 5px;
73
  font-size: 20px;
74
+ background-color: #333;
75
+ color: #fff;
76
+ border: none;
77
+ padding: 5px 10px;
78
+ cursor: pointer;
79
  }
80
 
81
  .checkbox-container {
 
100
  <body>
101
  <h1>Motion Capture Visualization</h1>
102
 
103
+ <div class="main-container">
104
+ <div class="episode-list">
105
+ <h3>Episodes</h3>
106
+ <!-- Episode checkboxes -->
107
+ <label><input type="checkbox"> Episode 1</label>
108
+ <label><input type="checkbox"> Episode 2</label>
109
+ <!-- ... Add all episodes up to 30 ... -->
110
+ <label><input type="checkbox"> Episode 29</label>
111
+ <label><input type="checkbox"> Episode 30</label>
112
+ </div>
113
+
114
+ <div class="content-container">
115
+ <div class="checkbox-container">
116
+ <label>
117
+ <input type="radio" name="videoOption" value="fold_towels" checked> Fold towels
118
+ </label>
119
+ <label>
120
+ <input type="radio" name="videoOption" value="pipette"> Pipette
121
+ </label>
122
+ <label>
123
+ <input type="radio" name="videoOption" value="take_the_item"> Take the item
124
+ </label>
125
+ <label>
126
+ <input type="radio" name="videoOption" value="twist_the_tube"> Twist the tube
127
+ </label>
128
+ </div>
129
 
130
+ <div class="video-container">
131
+ <video id="laptopVideo">
132
+ <source src="https://huggingface.co/datasets/cyberorigin/fold_towels/resolve/main/Video/video.mp4"
133
+ type="video/mp4">
134
+ Your browser does not support the video tag.
135
+ </video>
136
+ <div class="controls">
137
+ <button id="playPauseBtn">▶️</button>
138
+ <button id="rewindBtn">⏪</button>
139
+ <button id="forwardBtn">⏩</button>
140
+ <button id="restartBtn">↩️</button>
141
+ </div>
142
  </div>
143
+ <div id="plotDiv"></div>
144
  </div>
 
145
  </div>
146
 
147
  <div id="loadingIndicator">Loading...</div>