-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsupabaase2.html
101 lines (91 loc) · 3.53 KB
/
supabaase2.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
<!DOCTYPE html>
<html>
<head>
<title>Educational Videos</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
// Fetch video data
fetch('videodata.json')
.then(res => res.json())
.then(data => {
const app = document.getElementById('app');
// Login button (initially visible)
const loginButton = document.createElement('button');
loginButton.textContent = 'Login';
loginButton.classList.add(
'bg-blue-500', 'hover:bg-blue-700', 'text-white',
'font-bold', 'py-2', 'px-4', 'rounded'
);
loginButton.addEventListener('click', handleLogin);
app.appendChild(loginButton);
let loggedIn = false;
function handleLogin() {
const password = prompt('Enter password:');
if (password === 'testpassword') {
loggedIn = true;
loginButton.remove();
renderVideos(data);
} else {
alert('Incorrect password');
}
}
function renderVideos(videos) {
const heading = document.createElement('h1');
heading.textContent = 'Educational Videos (Admin)';
heading.classList.add('text-3xl', 'font-bold', 'mb-4');
app.appendChild(heading);
const grid = document.createElement('div');
grid.classList.add(
'grid', 'grid-cols-1', 'md:grid-cols-2', 'lg:grid-cols-3', 'gap-4'
);
app.appendChild(grid);
videos.forEach(video => {
const videoCard = document.createElement('div');
videoCard.classList.add(
'bg-white', 'rounded-lg', 'shadow-md', 'p-4'
);
grid.appendChild(videoCard);
// Title (editable)
const title = document.createElement('div');
title.textContent = video.title;
title.classList.add('text-xl', 'font-semibold', 'mb-2');
title.contentEditable = loggedIn;
title.addEventListener('input', () => {
video.title = title.textContent;
});
videoCard.appendChild(title);
// Description (editable)
const description = document.createElement('div');
description.textContent = video.description;
description.classList.add('text-gray-600', 'mb-2');
description.contentEditable = loggedIn;
description.addEventListener('input', () => {
video.description = description.textContent;
});
videoCard.appendChild(description);
// ... (add other editable fields similarly)
// Save button (visible only when logged in)
if (loggedIn) {
const saveButton = document.createElement('button');
saveButton.textContent = 'Save';
saveButton.classList.add(
'bg-green-500', 'hover:bg-green-700', 'text-white',
'font-bold', 'py-2', 'px-4', 'rounded', 'mt-2'
);
saveButton.addEventListener('click', () => {
// In a real application, you'd send the updated 'video' object to Supabase here
console.log('Saving video:', video);
alert('Video updated successfully!'); // Placeholder for now
});
videoCard.appendChild(saveButton);
}
});
}
});
</script>
</head>
<body>
<div class="container mx-auto p-4" id="app">
</div>
</body>
</html>