Lokesh Darapureddy: First Page

<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">

	<title>Community Classroom - Quality Education. Free for all.</title>

	<!-- Favicons -->
	<link href="../../assets/img/logo.png" rel="icon">

	<!-- Google Fonts -->
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i\|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i\|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

	<!----CSS For Toggle-->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

	<!-- Vendor CSS Files -->
	<link href="../../assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link href="../../assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
	<link href="../../assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
	<link href="../../assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">


	<!-- Template Main CSS File -->
	<link href="../../assets/css/style.css" rel="stylesheet">
	<link href="../../assets/css/course-content.css" rel="stylesheet">

	<!-- jquery CDN -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

	</head>

	<body>
	<!-- ======= Header ======= -->
	<header id="header" class="d-flex align-items-center fixed-top">
	<div class="container d-inline-flex align-items-center justify-content-between">
	<h1 class="logo"><a href="../../index.html"><img src="../../assets/img/logo2.png" alt="" class="img-fluid" id="logo-img"></a></h1>
	<nav id="navbar" class="navbar">
	<ul>
	<li><a class="nav-link" href="../../index.html">Home</a></li>
	<li><a class="nav-link active" href="../../courses.html">Courses</a></li>
	<li><a class="nav-link" href="../../index.html#team">Team</a></li>
	<li><a class="nav-link" href="../../index.html#about">About Us</a></li>
	<li><a class="nav-link scrollto" href="#contact">Contact Us</a></li>
	</ul>
	<i class="bx bx-list-ul mobile-nav-toggle"></i>
	</nav>
	</div>
	<div id="themeToggle">
	<input type="checkbox" class="checkbox" id="chk" />
	<label class="label" for="chk">
	<i class="fas fa-sun" id="theme-button"></i>
	<i class="fas fa-moon" id="theme-button"></i>
	<div class="ball m-auto"></div>
	</label>
	</div>
	</header>
	<!-- End Header -->

	<!-- Main Container -->
	<div class="container-fluid d-flex justify-content-center">
	<div class="row gx-3 player">

	<!-- Main Video -->
	<div class="col-lg-9 col-md-12 col-12 mt-4 mb-0 mb-lg-4 order-1 video-player">
	<div class="card">
	<div class="main-video">
	<!-- Video updated dynamically on clicking title -->
	</div>
	</div>
	</div>
	<!-- Main Video -->

	<!-- Content -->
	<div class="col-lg-3 col-md-12 col-12 mt-4 mb-4 order-2 content-list">
	<div class="card">
	<div class="card-header" style="background-color: #3167e6">
	<h4 class="mb-0" style="color: white; font-weight: 600">Topics</h4>
	</div>
	<div class="video-list">
	<!-- Content loaded dynamically from YouTube API -->
	</div>
	</div>
	</div>
	<!-- Content -->

	</div>
	</div>

	<!-- ======= Footer ======= -->
	<footer id="contact">

	<div class="footer-top">

	<div class="container">

	<div class="row justify-content-center">
	<div class="col-sm-6 foot1">
	<h3>Community Classroom</h3>
	<p class="tagline">Quality Education. Free for all.</p>
	</div>
	<div class="col-sm-3 foot2">
	<h3>Contact Us:</h3>
	<span><i class='bx bxs-envelope'></i><a href="mailto:kunal@commclassroom.org">kunal@commclassroom.org</a></span><br>
	</div>
	</div>

	<div class="social-links row justify-content-center">
	<a href="https://twitter.com/commclassroom" class="twitter" target="_blank"><i class="bx bxl-twitter"></i></a>
	<a href="https://www.instagram.com/commclassroom/" class="instagram" target="_blank"><i class="bx bxl-instagram"></i></a>
	<a href="https://www.linkedin.com/company/commclassroom" class="linkedin" target="_blank"><i class="bx bxl-linkedin"></i></a>
	<a href="https://t.me/commclassroom" class="telegram"><i class="bx bxl-telegram" target="_blank"></i></a>
	<a href="https://discord.io/commclassroom" class="discord"><i class="bx bxl-discord" target="_blank"></i></a>
	<a href="https://www.youtube.com/KunalKushwaha" class="youtube"><i class="bx bxl-youtube" target="_blank"></i></a>
	</div>

	</div>
	</div>

	<div class="container footer-bottom clearfix">
	<div class="cccopyright">
	Designed by <a href="https://bootstrapmade.com/" target="_blank">BootstrapMade</a>
	</div>
	</div>
	</footer>
	<!-- End Footer -->

	<script>
	$(document).ready(function () {

	var key = config.API_KEY;
	var playlistId = 'PL9gnSGHSqcnr_DxHsP7AW9ftq0AtAyYqJ';
	var URL = 'https://www.googleapis.com/youtube/v3/playlistItems';
	var options = {
	part: 'snippet',
	key: key,
	maxResults: 20,
	playlistId: playlistId
	}

	loadVids()

	function loadVids() {
	$.getJSON(URL, options, function (data) {
	var firstID = data.items[0].snippet.resourceId.videoId;
	var firstTitle = data.items[0].snippet.title;
	mainVid(firstID, firstTitle);
	vidContent(data);
	});
	}

	function mainVid(firstID, firstTitle) {
	$('.main-video').html(`
	<div class="video">
	<h3 class="main-title px-2">${firstTitle}</h3>
	<iframe src="https://www.youtube.com/embed/${firstID}" allowfullscreen></iframe>
	</div>
	`)
	}

	function vidContent(data) {
	$.each(data.items, function (i, item) {
	var title = item.snippet.title;
	var id = item.snippet.resourceId.videoId;
	$('.video-list').append(`
	<div class="vid" data-key="${id}" data-title="${title}">
	<iframe src="https://www.youtube.com/embed/${id}" allowfullscreen></iframe>
	<h6 class="title">${title}</h6>
	</div>
	`);
	});
	}

	$('.video-list').on('click', '.vid', function () {
	var firstID = $(this).attr('data-key');
	var firstTitle = $(this).attr('data-title');
	mainVid(firstID, firstTitle);
	$(".vid").removeClass("active");
	$(this).addClass("active");
	})
	});
	</script>

	<!-- Vendor JS Files -->
	<script src="../../assets/vendor/swiper/swiper-bundle.min.js"></script>
	<script src="../../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
	<script src="../../assets/vendor/glightbox/js/glightbox.min.js"></script>
	<script src="../../assets/vendor/purecounter/purecounter.js"></script>

	<!-- <script src="./course-content.js"></script> -->
	<script src="../../config.js"></script>
	<script src="../../assets/js/course-content.js"></script>

	</body>

	</html>

Lokesh Darapureddy

Friday, 30 July 2021

First Page

0 Comments:

Post a Comment

About Me

Previous Posts