-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex3.html
157 lines (141 loc) · 5.13 KB
/
index3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inshorts-like Summary</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.card-container {
position: relative;
width: 300px;
height: 400px;
overflow: hidden;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px;
background-color: #fff;
box-sizing: border-box;
overflow: hidden;
border-radius: 8px;
transition: transform 0.3s ease;
}
.card img {
width: 100%;
height: auto;
margin-bottom: 10px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.card .content {
overflow-y: auto;
flex: 1;
}
.card h3 {
font-size: 18px;
margin-top: 0;
}
.card p {
font-size: 14px;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="card-container" id="cardContainer">
<!-- Swipe cards will be dynamically inserted here -->
</div>
<script>
let currentIndex = 0;
let startY = 0;
let videosData = []; // To store fetched video data
// Function to fetch data from Flask backend
async function fetchVideos() {
try {
const response = await fetch('http://localhost:5003/videos'); // Adjust URL as per your Flask app URL
videosData = await response.json();
createSwipeCards();
} catch (error) {
console.error('Error fetching videos:', error);
}
}
// Function to create swipe cards
function createSwipeCards() {
const cardContainer = document.getElementById('cardContainer');
videosData.forEach((video, index) => {
const card = document.createElement('div');
card.classList.add('card');
// Image
const img = document.createElement('img');
img.src = video.video_thumbnail;
card.appendChild(img);
// Content
const content = document.createElement('div');
content.classList.add('content');
// Title
const title = document.createElement('h3');
title.textContent = video.video_title;
content.appendChild(title);
// Summary (not implemented in this example, but you can fetch and display it similarly)
card.appendChild(content);
cardContainer.appendChild(card);
// Adjust card position based on index
card.style.transform = `translateY(${index * 100}%)`;
});
// Add touch event listeners for swipe functionality
cardContainer.addEventListener('touchstart', touchStart);
cardContainer.addEventListener('touchmove', touchMove);
cardContainer.addEventListener('touchend', touchEnd);
}
// Handle touch start event
function touchStart(event) {
const touch = event.touches[0];
startY = touch.clientY;
}
// Handle touch move event
function touchMove(event) {
const touch = event.touches[0];
const deltaY = touch.clientY - startY;
moveCards(deltaY);
}
// Handle touch end event
function touchEnd(event) {
// Determine direction of swipe
const cardContainer = document.getElementById('cardContainer');
const cardHeight = cardContainer.clientHeight;
if (Math.abs(startY - event.changedTouches[0].clientY) > 50) {
if (startY > event.changedTouches[0].clientY && currentIndex < videosData.length - 1) {
currentIndex++;
} else if (startY < event.changedTouches[0].clientY && currentIndex > 0) {
currentIndex--;
}
cardContainer.style.transform = `translateY(-${currentIndex * cardHeight}px)`;
}
}
// Function to move cards based on deltaY
function moveCards(deltaY) {
const cardContainer = document.getElementById('cardContainer');
cardContainer.style.transform = `translateY(calc(-${currentIndex * 100}% + ${deltaY}px))`;
}
// Call the function to fetch videos when the page loads
window.onload = fetchVideos;
</script>
</body>
</html>