Hugging Face's logo

Spaces:
SEA-AI
/
brain-videoslider
Running

App Files Community
kevinconka commited on
Commit
b056989
·
verified ·
1 Parent(s): ebf948f

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +203 -19
index.html CHANGED
@@ -1,19 +1,203 @@
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
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Video Comparison Slider</title>
8
+ <style>
9
+ body, html {
10
+ margin: 0;
11
+ padding: 0;
12
+ display: flex;
13
+ justify-content: center;
14
+ align-items: center;
15
+ height: 100vh;
16
+ background-color: black; /* Set a black background */
17
+ }
18
+
19
+ .video-container {
20
+ position: relative;
21
+ width: 80vw; /* Set the width to 80% of the page */
22
+ height: 45vw; /* Maintain aspect ratio */
23
+ overflow: hidden;
24
+ }
25
+
26
+ video {
27
+ position: absolute;
28
+ top: 0;
29
+ left: 0;
30
+ width: 100%;
31
+ height: 100%;
32
+ object-fit: cover;
33
+ }
34
+
35
+ .second-video {
36
+ clip-path: inset(0 50% 0 0);
37
+ /* Initially shows half of the second video */
38
+ }
39
+
40
+ .slider {
41
+ position: absolute;
42
+ top: 0;
43
+ left: 30%;
44
+ width: 2px;
45
+ height: 100%;
46
+ background: rgb(0, 80, 150);
47
+ cursor: ew-resize;
48
+ z-index: 10;
49
+ animation: slide-animation 5s ease-in-out forwards;
50
+ border-radius: 4px;
51
+ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
52
+ }
53
+
54
+ .slider::before,
55
+ .slider::after {
56
+ content: '';
57
+ position: absolute;
58
+ top: 50%;
59
+ transform: translateY(-50%);
60
+ width: 20px;
61
+ height: 20px;
62
+ background-size: contain;
63
+ background-repeat: no-repeat;
64
+ transition: opacity 0.3s;
65
+ }
66
+
67
+ .slider::before {
68
+ left: -22px;
69
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgb(0, 80, 150)"><path d="M15.41,7.41 L14,6 L8,12 L14,18 L15.41,16.59 L11.83,13 L20,13 L20,11 L11.83,11 L15.41,7.41 Z"/></svg>');
70
+ }
71
+
72
+ .slider::after {
73
+ right: -22px;
74
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgb(0, 80, 150)"><path d="M8.59,7.41 L13.17,11 L4,11 L4,13 L13.17,13 L8.59,16.59 L10,18 L16,12 L10,6 L8.59,7.41 Z"/></svg>');
75
+ }
76
+
77
+ .slider.ready:hover::before,
78
+ .slider.ready:hover::after {
79
+ transform: translateY(-50%) scale(1.2);
80
+ }
81
+
82
+ .slider.ready::before,
83
+ .slider.ready::after {
84
+ opacity: 0.7;
85
+ }
86
+
87
+ .slider.ready:hover::before,
88
+ .slider.ready:hover::after {
89
+ opacity: 1;
90
+ }
91
+
92
+ @keyframes slide-animation {
93
+ 0% {
94
+ left: 100%;
95
+ }
96
+
97
+ 10% {
98
+ left: 80%;
99
+ }
100
+
101
+ 20% {
102
+ left: 85%;
103
+ }
104
+
105
+ 50% {
106
+ left: 20%;
107
+ }
108
+
109
+ 70% {
110
+ left: 60%;
111
+ }
112
+
113
+ 100% {
114
+ left: 30%;
115
+ }
116
+ }
117
+ </style>
118
+ </head>
119
+
120
+ <body>
121
+ <div class="video-container" id="videoContainer">
122
+ <video id="video1" src="flir_brain_padded.mp4" autoplay loop muted></video>
123
+ <video id="video2" class="second-video" src="flir_20240905_120243.mp4" autoplay loop muted></video>
124
+ <div class="slider" id="slider"></div>
125
+ </div>
126
+
127
+ <script>
128
+ const slider = document.getElementById('slider');
129
+ const container = document.getElementById('videoContainer');
130
+ const secondVideo = document.getElementById('video2');
131
+
132
+ let isDragging = false;
133
+
134
+ slider.addEventListener('mousedown', () => {
135
+ isDragging = true;
136
+ });
137
+
138
+ window.addEventListener('mouseup', () => {
139
+ isDragging = false;
140
+ });
141
+
142
+ window.addEventListener('mousemove', (event) => {
143
+ if (!isDragging) return;
144
+
145
+ const rect = container.getBoundingClientRect();
146
+ const offsetX = event.clientX - rect.left;
147
+
148
+ const sliderPosition = Math.max(0, Math.min(offsetX, rect.width));
149
+
150
+ // Move slider position
151
+ slider.style.left = `${sliderPosition}px`;
152
+
153
+ // Adjust second video visibility using clip-path
154
+ secondVideo.style.clipPath = `inset(0 ${rect.width - sliderPosition}px 0 0)`;
155
+ });
156
+
157
+ // Function to update clip-path in real-time
158
+ function updateClipPath() {
159
+ const rect = container.getBoundingClientRect();
160
+ const sliderPosition = parseFloat(window.getComputedStyle(slider).left); // Get current slider position
161
+ secondVideo.style.clipPath = `inset(0 ${rect.width - sliderPosition}px 0 0)`;
162
+ requestAnimationFrame(updateClipPath); // Continuously call this function during animation
163
+ }
164
+
165
+ // Enable user control after the animation ends
166
+ slider.addEventListener('animationend', () => {
167
+ slider.classList.add('ready'); // Add 'ready' class to show arrows
168
+ slider.style.animation = 'none';
169
+ slider.style.cursor = 'ew-resize';
170
+ slider.style.pointerEvents = 'auto';
171
+
172
+ // User interaction
173
+ let isDragging = false;
174
+
175
+ slider.addEventListener('mousedown', () => {
176
+ isDragging = true;
177
+ });
178
+
179
+ window.addEventListener('mouseup', () => {
180
+ isDragging = false;
181
+ });
182
+
183
+ window.addEventListener('mousemove', (event) => {
184
+ if (!isDragging) return;
185
+
186
+ const rect = container.getBoundingClientRect();
187
+ const offsetX = event.clientX - rect.left;
188
+ const sliderPosition = Math.max(0, Math.min(offsetX, rect.width));
189
+
190
+ // Move slider position and update video visibility
191
+ slider.style.left = `${sliderPosition}px`;
192
+ secondVideo.style.clipPath = `inset(0 ${rect.width - sliderPosition}px 0 0)`;
193
+ });
194
+ });
195
+
196
+ // Start updating clip-path once the page loads
197
+ window.onload = () => {
198
+ updateClipPath();
199
+ };
200
+ </script>
201
+ </body>
202
+
203
+ </html>