Hugging Face's logo

Spaces:
eaglelandsonce
/
layered_presentation
Running

App Files Community
eaglelandsonce commited on
Commit
4dec4fd
·
verified ·
1 Parent(s): f13a97f

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +10 -3
index.html CHANGED
@@ -1,4 +1,4 @@
1
- =<!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
@@ -50,7 +50,7 @@
50
  <div class="website-layer" id="websiteLayer" style="display: none;">
51
  <iframe id="websiteFrame" src="" frameborder="0"></iframe>
52
  </div>
53
- <div class="textbox-layer" id="textboxLayer" style="display: none;">
54
  <div id="textboxContent"></div>
55
  </div>
56
  </div>
@@ -108,6 +108,7 @@
108
  responseBox.style.display = 'none';
109
  responseContent.innerHTML = '';
110
  videoPlayer.src = '';
 
111
  textboxLayer.style.display = 'none';
112
  textboxContent.innerHTML = '';
113
  textboxVisible = false;
@@ -133,12 +134,18 @@
133
 
134
  function toggleTextboxLayer() {
135
  if (textboxVisible) {
136
- textboxLayer.style.display = 'none';
 
 
 
137
  textboxContent.innerHTML = '';
138
  } else {
139
  const markdownText = slides[currentIndex]?.text || "No additional text available.";
140
  textboxContent.innerHTML = marked(markdownText);
141
  textboxLayer.style.display = 'block';
 
 
 
142
  }
143
  textboxVisible = !textboxVisible;
144
  }
 
1
+ <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
 
50
  <div class="website-layer" id="websiteLayer" style="display: none;">
51
  <iframe id="websiteFrame" src="" frameborder="0"></iframe>
52
  </div>
53
+ <div class="textbox-layer" id="textboxLayer" style="display: none; transform: translateX(100%);">
54
  <div id="textboxContent"></div>
55
  </div>
56
  </div>
 
108
  responseBox.style.display = 'none';
109
  responseContent.innerHTML = '';
110
  videoPlayer.src = '';
111
+ textboxLayer.style.transform = 'translateX(100%)';
112
  textboxLayer.style.display = 'none';
113
  textboxContent.innerHTML = '';
114
  textboxVisible = false;
 
134
 
135
  function toggleTextboxLayer() {
136
  if (textboxVisible) {
137
+ textboxLayer.style.transform = 'translateX(100%)';
138
+ setTimeout(() => {
139
+ textboxLayer.style.display = 'none';
140
+ }, 300);
141
  textboxContent.innerHTML = '';
142
  } else {
143
  const markdownText = slides[currentIndex]?.text || "No additional text available.";
144
  textboxContent.innerHTML = marked(markdownText);
145
  textboxLayer.style.display = 'block';
146
+ setTimeout(() => {
147
+ textboxLayer.style.transform = 'translateX(0)';
148
+ }, 10);
149
  }
150
  textboxVisible = !textboxVisible;
151
  }