|
|
<!DOCTYPE html>
|
|
|
<html lang="vi">
|
|
|
<head>
|
|
|
<meta charset="UTF-8" />
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
<title>Upload Videos - Kho truyện Mã A Lềnh</title>
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
<link
|
|
|
rel="stylesheet"
|
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
|
|
/>
|
|
|
<link
|
|
|
href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap"
|
|
|
rel="stylesheet"
|
|
|
/>
|
|
|
<style>
|
|
|
body {
|
|
|
font-family: "Noto Serif", serif;
|
|
|
background-color: #fff9f0;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body class="bg-amber-50">
|
|
|
<div class="container mx-auto px-4 py-8 max-w-2xl">
|
|
|
<div class="flex items-center mb-8">
|
|
|
<div class="bg-amber-700 text-white p-3 rounded-lg mr-4">
|
|
|
<i class="fas fa-upload text-2xl"></i>
|
|
|
</div>
|
|
|
<h1 class="text-3xl font-bold text-amber-900">Upload Videos</h1>
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-lg">
|
|
|
<h2 class="text-xl font-bold mb-4 text-amber-800">
|
|
|
Upload Story Videos
|
|
|
</h2>
|
|
|
|
|
|
<div class="space-y-6">
|
|
|
|
|
|
<div class="border border-amber-200 rounded-lg p-4">
|
|
|
<h3 class="font-bold text-amber-900 mb-2">
|
|
|
Chuyện con suối Mường Tiên
|
|
|
</h3>
|
|
|
<div class="mb-4">
|
|
|
<div class="relative">
|
|
|
<input
|
|
|
type="file"
|
|
|
id="video1"
|
|
|
name="video1"
|
|
|
accept="video/*"
|
|
|
class="hidden"
|
|
|
onchange="updateFileName(this, 'video1-name')"
|
|
|
/>
|
|
|
<label
|
|
|
for="video1"
|
|
|
class="flex items-center justify-center px-4 py-2 bg-amber-100 text-amber-800 rounded-lg cursor-pointer hover:bg-amber-200 transition w-full"
|
|
|
>
|
|
|
<i class="fas fa-file-video mr-2"></i>
|
|
|
<span>Choose Video File</span>
|
|
|
</label>
|
|
|
<div id="video1-name" class="mt-2 text-sm text-gray-600">
|
|
|
No file chosen
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<button
|
|
|
class="upload-btn w-full bg-amber-600 hover:bg-amber-700 text-white font-bold py-2 px-4 rounded-lg transition"
|
|
|
data-video="1"
|
|
|
data-filename="chuyen-con-suoi-muong-tien.mp4"
|
|
|
>
|
|
|
Upload Video
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="border border-amber-200 rounded-lg p-4">
|
|
|
<h3 class="font-bold text-amber-900 mb-2">
|
|
|
Chiếc bánh trong đẩy túi
|
|
|
</h3>
|
|
|
<div class="mb-4">
|
|
|
<div class="relative">
|
|
|
<input
|
|
|
type="file"
|
|
|
id="video2"
|
|
|
name="video2"
|
|
|
accept="video/*"
|
|
|
class="hidden"
|
|
|
onchange="updateFileName(this, 'video2-name')"
|
|
|
/>
|
|
|
<label
|
|
|
for="video2"
|
|
|
class="flex items-center justify-center px-4 py-2 bg-amber-100 text-amber-800 rounded-lg cursor-pointer hover:bg-amber-200 transition w-full"
|
|
|
>
|
|
|
<i class="fas fa-file-video mr-2"></i>
|
|
|
<span>Choose Video File</span>
|
|
|
</label>
|
|
|
<div id="video2-name" class="mt-2 text-sm text-gray-600">
|
|
|
No file chosen
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<button
|
|
|
class="upload-btn w-full bg-amber-600 hover:bg-amber-700 text-white font-bold py-2 px-4 rounded-lg transition"
|
|
|
data-video="2"
|
|
|
data-filename="chiec-banh-trong-day-tui.mp4"
|
|
|
>
|
|
|
Upload Video
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="border border-amber-200 rounded-lg p-4">
|
|
|
<h3 class="font-bold text-amber-900 mb-2">
|
|
|
Vũng đầm của thần rồng
|
|
|
</h3>
|
|
|
<div class="mb-4">
|
|
|
<div class="relative">
|
|
|
<input
|
|
|
type="file"
|
|
|
id="video3"
|
|
|
name="video3"
|
|
|
accept="video/*"
|
|
|
class="hidden"
|
|
|
onchange="updateFileName(this, 'video3-name')"
|
|
|
/>
|
|
|
<label
|
|
|
for="video3"
|
|
|
class="flex items-center justify-center px-4 py-2 bg-amber-100 text-amber-800 rounded-lg cursor-pointer hover:bg-amber-200 transition w-full"
|
|
|
>
|
|
|
<i class="fas fa-file-video mr-2"></i>
|
|
|
<span>Choose Video File</span>
|
|
|
</label>
|
|
|
<div id="video3-name" class="mt-2 text-sm text-gray-600">
|
|
|
No file chosen
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<button
|
|
|
class="upload-btn w-full bg-amber-600 hover:bg-amber-700 text-white font-bold py-2 px-4 rounded-lg transition"
|
|
|
data-video="3"
|
|
|
data-filename="vung-dam-cua-than-rong.mp4"
|
|
|
>
|
|
|
Upload Video
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="mt-6 flex justify-between">
|
|
|
<a
|
|
|
href="index.html"
|
|
|
class="flex items-center text-amber-700 hover:text-amber-900 transition"
|
|
|
>
|
|
|
<i class="fas fa-arrow-left mr-2"></i>
|
|
|
<span>Back to Stories</span>
|
|
|
</a>
|
|
|
<div id="upload-status" class="text-green-600 font-bold"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
function updateFileName(input, targetId) {
|
|
|
const target = document.getElementById(targetId);
|
|
|
if (input.files.length > 0) {
|
|
|
target.textContent = input.files[0].name;
|
|
|
} else {
|
|
|
target.textContent = "No file chosen";
|
|
|
}
|
|
|
}
|
|
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
|
const uploadButtons = document.querySelectorAll(".upload-btn");
|
|
|
|
|
|
uploadButtons.forEach((button) => {
|
|
|
button.addEventListener("click", function () {
|
|
|
const videoId = this.getAttribute("data-video");
|
|
|
const targetFilename = this.getAttribute("data-filename");
|
|
|
const fileInput = document.getElementById("video" + videoId);
|
|
|
const statusElement = document.getElementById("upload-status");
|
|
|
|
|
|
if (!fileInput.files.length) {
|
|
|
statusElement.textContent = "Please select a file first.";
|
|
|
statusElement.className = "text-red-600 font-bold";
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
const file = fileInput.files[0];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
button.textContent = "Uploading...";
|
|
|
button.disabled = true;
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
button.textContent = "Uploaded!";
|
|
|
button.classList.remove("bg-amber-600", "hover:bg-amber-700");
|
|
|
button.classList.add("bg-green-600", "hover:bg-green-700");
|
|
|
|
|
|
statusElement.textContent =
|
|
|
'Video "' + targetFilename + '" has been selected.';
|
|
|
statusElement.className = "text-green-600 font-bold";
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
button.textContent = "Upload Video";
|
|
|
button.disabled = false;
|
|
|
button.classList.remove("bg-green-600", "hover:bg-green-700");
|
|
|
button.classList.add("bg-amber-600", "hover:bg-amber-700");
|
|
|
}, 3000);
|
|
|
}, 1500);
|
|
|
});
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
