uploadpage
uploadpage
// try {
// const response = await axios.post('http://localhost:5000/api/upload',
formData);
// return (
// <div className="upload-page">
// <div className="background">
// <div className="shape"></div>
// <div className="shape"></div>
// </div>
// <div className="upload-container">
// <h3>Upload Video</h3>
// <form onSubmit={handleSubmit} className="upload-form">
// <div className="form-group">
// <label>Domain</label>
// <input
// type="text"
// value={domain}
// onChange={(e) => setDomain(e.target.value)}
// required
// />
// </div>
// <div className="form-group">
// <label>Title</label>
// <input
// type="text"
// value={title}
// onChange={(e) => setTitle(e.target.value)}
// required
// />
// </div>
// <div className="form-group">
// <label>Upload Video</label>
// <input
// type="file"
// onChange={(e) => setVideoFile(e.target.files[0])}
// required
// />
// </div>
// <div className="form-group">
// <label>Questions & Answers</label>
// {questionsAndAnswers.map((qa, index) => (
// <div key={index} className="qa-group">
// <input
// type="text"
// placeholder="Question"
// value={qa.question}
// onChange={(e) => handleQAChange(index, 'question',
e.target.value)}
// />
// <input
// type="text"
// placeholder="Answer"
// value={qa.answer}
// onChange={(e) => handleQAChange(index, 'answer',
e.target.value)}
// />
// </div>
// ))}
// <button type="button" className="add-qa-btn" onClick={handleAddQA}>
// + Add Another Q&A
// </button>
// </div>
// <button type="submit" className="submit-btn">
// Submit
// </button>
// </form>
// </div>
// <style>
// {`
// * {
// margin: 0;
// padding: 0;
// box-sizing: border-box;
// font-family: 'Poppins', sans-serif;
// }
// body {
// background-color: #080710;
// background-image: url('background.jpg');
// background-size: cover;
// background-position: center;
// }
// .upload-container {
// max-width: 600px;
// width: 100%;
// background: rgba(255, 255, 255, 0.13);
// padding: 40px;
// border-radius: 12px;
// backdrop-filter: blur(12px);
// border: 2px solid rgba(255, 255, 255, 0.1);
// box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
// position: absolute;
// transform: translate(-50%, -50%);
// top: 50%;
// left: 50%;
// text-align: center;
// }
// h3 {
// font-size: 26px;
// font-weight: 500;
// color: white;
// margin-bottom: 15px;
// }
// .form-group {
// margin-bottom: 18px;
// text-align: left;
// }
// .form-group label {
// font-size: 16px;
// font-weight: 500;
// color: white;
// }
// .form-group input {
// width: 100%;
// height: 45px;
// background: rgba(255, 255, 255, 0.1);
// border-radius: 5px;
// border: none;
// padding: 0 10px;
// margin-top: 6px;
// font-size: 14px;
// color: white;
// outline: none;
// transition: all 0.3s ease;
// }
// .form-group input:focus {
// border: 1px solid #66ff66;
// box-shadow: 0 0 6px #66ff66;
// transform: scale(1.02);
// }
// .qa-group {
// display: flex;
// flex-direction: column;
// gap: 10px;
// margin-bottom: 10px;
// }
// .qa-group input {
// padding: 10px;
// border-radius: 5px;
// background: rgba(255, 255, 255, 0.1);
// color: white;
// border: none;
// }
// .qa-group input:focus {
// border: 1px solid #4CAF50;
// box-shadow: 0 0 5px #4CAF50;
// transform: scale(1.02);
// }
// .add-qa-btn, .submit-btn {
// background: white;
// color: #080710;
// padding: 14px;
// border-radius: 5px;
// cursor: pointer;
// width: 100%;
// font-size: 16px;
// font-weight: bold;
// transition: all 0.3s ease;
// }
// .add-qa-btn:hover, .submit-btn:hover {
// background: #66ff66;
// transform: scale(1.05);
// }
// h3 {
// font-size: 22px;
// }
// .form-group input {
// padding: 8px;
// }
// .add-qa-btn, .submit-btn {
// font-size: 14px;
// padding: 12px;
// }
// }
// `}
// </style>
// </div>
// );
// };
try {
const response = await axios.post("http://localhost:5000/api/upload",
formData);
return (
<div className="upload-page">
<div className="background">
<div className="shape"></div>
<div className="shape"></div>
</div>
<div className="upload-container">
<h3>Upload Video</h3>
<form onSubmit={handleSubmit} className="upload-form">
<div className="form-group">
<label>Domain</label>
<input type="text" value={domain} onChange={(e) =>
setDomain(e.target.value)} required />
</div>
<div className="form-group">
<label>Title</label>
<input type="text" value={title} onChange={(e) =>
setTitle(e.target.value)} required />
</div>
<div className="form-group">
<label>Upload Video</label>
<input type="file" onChange={(e) => setVideoFile(e.target.files[0])}
required />
</div>
<div className="qa-section">
<label>Questions & Answers</label>
<div className="qa-scrollable">
{questionsAndAnswers.map((qa, index) => (
<div key={index} className="qa-group">
<input
type="text"
placeholder="Question"
value={qa.question}
onChange={(e) => handleQAChange(index, "question",
e.target.value)}
/>
<input
type="text"
placeholder="Answer"
value={qa.answer}
onChange={(e) => handleQAChange(index, "answer",
e.target.value)}
/>
</div>
))}
</div>
<button type="button" className="add-qa-btn" onClick={handleAddQA}>
+ Add Another Q&A
</button>
</div><br/>
<style>
{`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #080710;
background-image: url('background.jpg');
background-size: cover;
background-position: center;
}
.upload-container {
max-width: 600px;
width: 100%;
background: rgba(255, 255, 255, 0.13);
padding: 40px;
border-radius: 12px;
backdrop-filter: blur(12px);
border: 2px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
text-align: center;
overflow: hidden;
}
h3 {
font-size: 26px;
font-weight: 500;
color: white;
margin-bottom: 15px;
}
.form-group {
margin-bottom: 18px;
text-align: left;
}
.form-group label {
font-size: 16px;
font-weight: 500;
color: white;
}
.form-group input {
width: 100%;
height: 45px;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
border: none;
padding: 0 10px;
margin-top: 6px;
font-size: 14px;
color: white;
outline: none;
}
.qa-section {
margin-top: 10px;
text-align: left;
}
.qa-scrollable {
max-height: 200px;
overflow-y: auto;
padding-right: 5px;
}
.qa-group {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 10px;
transition: all 0.3s ease-in-out;
}
.qa-group input {
padding: 10px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.1);
color: white;
border: none;
}
.qa-group input:focus {
border: 1px solid #4CAF50;
box-shadow: 0 0 5px #4CAF50;
}
.add-qa-btn, .submit-btn {
background: white;
color: #080710;
padding: 14px;
border-radius: 5px;
cursor: pointer;
width: 100%;
font-size: 16px;
font-weight: bold;
transition: all 0.3s ease;
}
.add-qa-btn:hover, .submit-btn:hover {
background: #66ff66;
transform: scale(1.05);
}
h3 {
font-size: 22px;
}
.form-group input {
padding: 8px;
}
.add-qa-btn, .submit-btn {
font-size: 14px;
padding: 12px;
}
}
`}
</style>
</div>
);
};