Pastebin | Laravel.io

<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 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>