<html>
<head>
<title>Zenova Lectures</title>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
.animated-border {
position: relative;
padding: 6px;
border-radius: 8px;
overflow: hidden;
background: linear-gradient(45deg, #ff6ec4, #7873f5, #ff6ec4, #7873f5);
background-size: 400%;
animation: borderAnimation 5s linear infinite;
}
.animated-border::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: inherit;
z-index: -1;
filter: blur(5px);
}
@keyframes borderAnimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.header-title {
color: #1a73e8;
}
.intro-text {
color: #fbbc05;
}
.button-text {
color: #333333;
font-family: 'Playfair Display', serif;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
border: 1px solid #333333;
border-radius: 4px;
padding: 8px 16px;
background-color: #f8f9fa;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.button-text:hover {
background-color: #e9ecef;
border-color: #666666;
}
.contact-title {
color: #1a73e8;
}
.contact-link {
color: #34a853;
}
</style>
</head>
<body class="bg-gray-900 text-white">
<div id="root"></div>
<script type="text/babel">
const subjects = ["physics", "maths", "organic", "inorganic", "physical"];
function App() {
const [selectedSubject, setSelectedSubject] = React.useState(null);
const [teachers, setTeachers] = React.useState([]);
const [selectedTeacher, setSelectedTeacher] = React.useState(null);
const [chapters, setChapters] = React.useState([]);
const [selectedChapter, setSelectedChapter] = React.useState(null);
const [lectureLink, setLectureLink] = React.useState(null);
const [loading, setLoading] = React.useState(false);
const fetchTeachers = async (subject) => {
setLoading(true);
const response = await axios.get(`https://zenova-api-green.vercel.app/teachers?subject=${subject}`);
setTeachers(response.data.teachers);
setLoading(false);
};
const fetchChapters = async (subject, teacher) => {
setLoading(true);
const response = await axios.get(`https://zenova-api-green.vercel.app/chapters?subject=${subject}&teacher=${teacher}`);
setChapters(response.data.chapters);
setLoading(false);
};
const fetchLectureLink = async (subject, teacher, chapter) => {
setLoading(true);
const response = await axios.get(`https://zenova-api-green.vercel.app/lecture?subject=${subject}&teacher=${teacher}&ch=${chapter}`);
setLectureLink(response.data.link);
setLoading(false);
};
const formatCamelCase = (text) => {
return text.replace(/([a-z])([A-Z])/g, '$1 $2');
};
return (
<div className="flex flex-col items-center justify-center min-h-screen p-4">
{/* Header Section */}
<header className="text-center mb-8">
<img src="https://te.legra.ph/file/a30f30e46ef1e58270ab2.jpg" alt="Zenova Logo" className="mx-auto mb-4 w-24 h-24 rounded-full" />
<h1 className="text-4xl font-bold header-title" style={{ fontFamily: 'Montserrat, sans-serif' }}>Zenova Lectures</h1>
<p className="text-lg mt-2" style={{ fontFamily: 'Montserrat, sans-serif' }}>Empowering Your Learning Journey</p>
</header>
{/* Introduction Section */}
<section className="text-center mb-8">
<p className="text-lg intro-text" style={{ fontFamily: 'Montserrat, sans-serif' }}>We provide easy access to lectures that are already available on various educational platforms and Telegram channels, curated for your convenience.</p>
</section>
{loading && <div className="text-lg mb-4">Loading...</div>}
{!selectedSubject && !loading && (
<div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{subjects.map(subject => (
<button
key={subject}
className="bg-blue-800 p-6 rounded-md text-center truncate animated-border"
onClick={() => {
setSelectedSubject(subject);
fetchTeachers(subject);
}}
style={{ fontFamily: 'Playfair Display, serif', fontSize: '1.25rem' }}
>
<span className="button-text">{subject.charAt(0).toUpperCase() + subject.slice(1)} 📚</span>
</button>
))}
</div>
)}
{selectedSubject && !selectedTeacher && !loading && (
<div className="flex flex-col items-center">
<h2 className="text-2xl font-bold header-title mb-4" style={{ fontFamily: 'Montserrat, sans-serif' }}>Select a Teacher</h2>
<div className="overflow-y-auto max-h-64 w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{teachers.map(teacher => (
<button
key={teacher}
className="bg-blue-800 p-6 rounded-md text-center truncate animated-border"
onClick={() => {
setSelectedTeacher(teacher);
fetchChapters(selectedSubject, teacher);
}}
style={{ fontFamily: 'Montserrat, sans-serif', fontSize: '1.25rem' }}
>
<span className="button-text">{formatCamelCase(teacher)} 👨🏫</span>
</button>
))}
</div>
<button
className="mt-4 bg-red-500 p-2 rounded-md"
onClick={() => {
setSelectedSubject(null);
setTeachers([]);
}}
style={{ fontFamily: 'Montserrat, sans-serif', fontSize: '1rem' }}
>
Back 🔙
</button>
</div>
)}
{selectedTeacher && !selectedChapter && !loading && (
<div className="flex flex-col items-center">
<h2 className="text-2xl font-bold header-title mb-4" style={{ fontFamily: 'Montserrat, sans-serif' }}>Select a Chapter</h2>
<div className="overflow-y-auto max-h-64 w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{chapters.map(chapter => (
<button
key={chapter}
className="bg-blue-800 p-6 rounded-md text-center truncate animated-border"
onClick={() => {
setSelectedChapter(chapter);
fetchLectureLink(selectedSubject, selectedTeacher, chapter);
}}
style={{ fontFamily: 'Montserrat, sans-serif', fontSize: '1.25rem' }}
>
<span className="button-text">{chapter} 📖</span>
</button>
))}
</div>
<button
className="mt-4 bg-red-500 p-2 rounded-md"
onClick={() => {
setSelectedTeacher(null);
setChapters([]);
}}
style={{ fontFamily: 'Montserrat, sans-serif', fontSize: '1rem' }}
>
Back 🔙
</button>
</div>
)}
{lectureLink && !loading && (
<div className="flex flex-col items-center">
<h2 className="text-2xl font-bold header-title mb-4" style={{ fontFamily: 'Montserrat, sans-serif' }}>Lecture Link</h2>
<a href={lectureLink} className="bg-green-500 p-4 rounded-md text-center" target="_blank" rel="noopener noreferrer" style={{ fontFamily: 'Montserrat, sans-serif', fontSize: '1.25rem' }}>
<span className="button-text">Go to Lecture 🎥</span>
</a>
<button
className="mt-4 bg-red-500 p-2 rounded-md"
onClick={() => {
setSelectedChapter(null);
setLectureLink(null);
}}
style={{ fontFamily: 'Montserrat, sans-serif', fontSize: '1rem' }}
>
Back 🔙
</button>
</div>
)}
<a href="https://t.me/your_channel_link" target="_blank" rel="noopener noreferrer" className="fixed bottom-0 right-0 mb-4 mr-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/82/Telegram_logo.svg" alt="Telegram Logo" className="w-12 h-12" />
</a>
{/* Contact Us Section */}
<footer className="text-center mt-8">
<h2 className="text-2xl font-bold contact-title mb-4" style={{ fontFamily: 'Montserrat, sans-serif' }}>Contact Us</h2>
<p>Email: <a href="mailto:contact@zenova.com" className="text-white" style={{ fontFamily: 'Montserrat, sans-serif' }}>contact@zenova.com</a></p>
<div className="mt-4">
<a href="https://facebook.com" className="text-white mx-2" target="_blank" rel="noopener noreferrer" style={{ fontFamily: 'Montserrat, sans-serif' }}>Facebook</a>
<a href="https://twitter.com" className="text-white mx-2" target="_blank" rel="noopener noreferrer" style={{ fontFamily: 'Montserrat, sans-serif' }}>Twitter</a>
<a href="https://instagram.com" className="text-white mx-2" target="_blank" rel="noopener noreferrer" style={{ fontFamily: 'Montserrat, sans-serif' }}>Instagram</a>
</div>
</footer>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
</script>
</body>
</html>
