| .. | |||||
| image | |||||
| config.php | |||||
| coursePlayer.php | |||||
| dashboard.php | |||||
| error_log | |||||
| invite_friends.php | |||||
| login_reg.php | |||||
| profile.php | |||||
| wallet.php |
| Server IP : 139.59.11.189 / Your IP : 216.73.217.123 Web Server : LiteSpeed System : Linux Jupiter.hostitsmartserver.com 5.14.0-611.49.2.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Thu Apr 30 09:05:08 EDT 2026 x86_64 User : xjlivlhf ( 1472) PHP Version : 7.4.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /home/xjlivlhf/www/dm.hopewayindia.com/student/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Course Player - Hopeway India </title>
<style>
:root {
--bg-root: #050510;
--bg-header: #0B0B1A;
--border-color: #1C1C35;
--primary: #7C4DFF;
--primary-glow: rgba(124, 77, 255, 0.4);
--text-light: #FFFFFF;
--text-muted: #8F8FB6;
--success: #10B981;
--card-bg: #0F0F20;
--card-hover: #13123A;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
/* Custom Scrollbar for Premium Look */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-root); }
::-webkit-scrollbar-thumb { background: #2A2A40; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }
body {
background-color: var(--bg-root);
color: var(--text-light);
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
/* ---------------- HEADER ---------------- */
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
background-color: var(--bg-header);
border-bottom: 1px solid var(--border-color);
flex-shrink: 0;
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
z-index: 10;
}
.header-left {
display: flex;
align-items: center;
gap: 20px;
flex: 1;
}
.back-btn {
display: flex;
align-items: center;
gap: 8px;
background-color: rgba(124,77,255,0.1);
border: 1px solid rgba(124,77,255,0.3);
padding: 8px 16px;
border-radius: 12px;
color: #C4A8FF;
text-decoration: none;
font-size: 13px;
font-weight: 700;
transition: all 0.3s ease;
}
.back-btn:hover {
background-color: var(--primary);
color: #FFF;
box-shadow: 0 0 15px var(--primary-glow);
}
.back-btn .icon { font-size: 16px; font-weight: bold; }
.header-title-box { flex: 1; overflow: hidden; }
.header-title { font-size: 16px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.5px;}
.header-sub { color: var(--text-muted); font-size: 12px; margin-top: 4px; font-weight: 600;}
.header-right {
display: flex;
align-items: center;
gap: 10px;
}
.brand-badge {
background: rgba(245, 158, 11, 0.15);
color: #F59E0B;
border: 1px solid rgba(245, 158, 11, 0.3);
padding: 6px 12px;
border-radius: 8px;
font-size: 11px;
font-weight: 900;
letter-spacing: 1px;
}
/* ---------------- MAIN LAYOUT ---------------- */
.main-wrapper {
display: flex;
flex: 1;
flex-direction: column;
overflow: hidden;
}
/* ---------------- VIDEO PLAYER AREA ---------------- */
.player-area {
display: flex;
flex-direction: column;
background: #000;
position: relative;
z-index: 5;
box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}
.player-container {
width: 100%;
aspect-ratio: 16 / 9;
max-height: 55vh;
display: flex; justify-content: center; align-items: center;
position: relative;
}
.player-container iframe, .player-container video {
width: 100%; height: 100%; border: none; object-fit: contain; outline: none; background: #000;
}
.no-video {
text-align: center; color: var(--text-muted); background: #080812;
width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.no-video span { font-size: 48px; margin-bottom: 16px; opacity: 0.8;}
.no-video h3 { color: #FFF; font-size: 18px; margin-bottom: 8px; font-weight: 800;}
.no-video p { font-size: 13px; }
/* Now Playing Bar */
.now-playing-bar {
display: flex; align-items: center; padding: 16px 24px;
background-color: var(--bg-header); border-bottom: 1px solid var(--border-color);
}
.pulse-dot {
width: 12px; height: 12px; border-radius: 50%; background-color: var(--success);
margin-right: 16px; animation: pulse 1.5s infinite ease-in-out; flex-shrink: 0;
box-shadow: 0 0 10px var(--success);
}
@keyframes pulse {
0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.np-label { font-size: 10px; color: var(--success); font-weight: 900; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; }
.np-title { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #FFF;}
/* ---------------- SIDEBAR / CHAPTER LIST ---------------- */
.sidebar-area {
flex: 1;
display: flex;
flex-direction: column;
background: var(--bg-root);
overflow: hidden;
}
.sidebar-header {
padding: 16px 24px;
border-bottom: 1px solid var(--border-color);
background: rgba(255,255,255,0.02);
font-size: 14px;
font-weight: 800;
color: #E0E0E0;
letter-spacing: 1px;
text-transform: uppercase;
}
.chapter-list-wrap {
flex: 1; overflow-y: auto; padding: 20px; padding-bottom: 60px;
}
.chap-item {
display: flex; align-items: center; background-color: var(--card-bg);
border-radius: 16px; border: 1px solid var(--border-color);
margin-bottom: 12px; padding: 10px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.chap-item:hover { background-color: var(--card-hover); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.2);}
/* Active Chapter Styling */
.chap-item.active {
border-color: var(--primary);
background-color: var(--card-hover);
box-shadow: 0 0 20px var(--primary-glow);
}
/* Chapter Thumbnail */
.chap-thumb-wrap { position: relative; width: 110px; height: 70px; border-radius: 10px; overflow: hidden; background: #1A1A30; flex-shrink: 0;}
.chap-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s;}
.chap-item:hover .chap-thumb-wrap img { transform: scale(1.05); }
.chap-thumb-placeholder { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #1C1C35; font-size: 24px; color: #5B5B8A;}
.chap-num-badge {
position: absolute; top: 6px; left: 6px; width: 22px; height: 22px;
border-radius: 6px; background: rgba(0,0,0,0.8); color: #FFF;
font-size: 10px; font-weight: 900; display: flex; justify-content: center; align-items: center;
backdrop-filter: blur(4px);
}
.chap-item.active .chap-num-badge { background: var(--primary); }
.chap-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(124,77,255,0.2); display: none; }
.chap-item.active .chap-overlay { display: block; }
/* Chapter Info */
.chap-info { flex: 1; padding: 0 16px; overflow: hidden; }
.chap-title { font-size: 14px; font-weight: 700; color: #C0C0D8; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.3s;}
.chap-item.active .chap-title { color: #FFF; }
.duration-badge {
display: inline-block; margin-top: 8px; background: rgba(124,77,255,0.1);
border-radius: 6px; padding: 4px 8px; font-size: 11px; font-weight: 600; color: #9B7FDF;
border: 1px solid rgba(124,77,255,0.2);
}
/* Play Icon */
.chap-icon-wrap {
width: 44px; height: 44px; border-radius: 22px; background: rgba(255,255,255,0.03);
display: flex; justify-content: center; align-items: center; flex-shrink: 0; color: #5B5B8A; font-size: 16px;
transition: all 0.3s;
}
.chap-item:hover .chap-icon-wrap { background: rgba(255,255,255,0.08); color: #FFF;}
.chap-item.active .chap-icon-wrap { background: var(--primary); color: #FFF; box-shadow: 0 4px 15px var(--primary-glow);}
/* Responsive Layouts */
@media(min-width: 992px) {
.main-wrapper { flex-direction: row; }
.player-area { width: 65%; border-right: 1px solid var(--border-color); height: 100%;}
.player-container { max-height: none; height: calc(100vh - 80px - 85px); }
.sidebar-area { width: 35%; height: 100%;}
}
@media(max-width: 991px) {
.header-right { display: none; }
.player-container { max-height: 35vh; }
}
@media(max-width: 480px) {
header { padding: 12px 16px; }
.back-btn { padding: 6px 12px; font-size: 12px; }
.header-title { font-size: 14px; }
.chap-thumb-wrap { width: 90px; height: 60px; }
.chap-title { font-size: 13px; }
.chap-icon-wrap { width: 36px; height: 36px; font-size: 14px; }
}
</style>
</head>
<body>
<header>
<div class="header-left">
<a href="dashboard.php" class="back-btn">
<span class="icon">←</span> Dashboard
</a>
<div class="header-title-box">
<div class="header-title" id="courseTitle">Loading Course...</div>
<div class="header-sub" id="courseSub">0 Chapters</div>
</div>
</div>
<div class="header-right">
<div class="brand-badge">HopewayIndia</div>
</div>
</header>
<div class="main-wrapper">
<div class="player-area">
<div class="player-container" id="videoContainer">
</div>
<div class="now-playing-bar" id="nowPlayingBar" style="display: none;">
<div class="pulse-dot"></div>
<div style="overflow: hidden;">
<div class="np-label" id="npLabel">NOW PLAYING</div>
<div class="np-title" id="npTitle">Select a chapter</div>
</div>
</div>
</div>
<div class="sidebar-area">
<div class="sidebar-header">Course Content</div>
<div class="chapter-list-wrap" id="chapterList">
</div>
</div>
</div>
<script>
// ── Session & Auto-logout Polling ────────────────────────────────────
const API_BASE = "https://dm.hopewayindia.com/api";
const ADMIN_BASE = "https://dm.hopewayindia.com/admin";
let _studentId = null;
let _studentToken = "";
let _sessionPollTimer = null;
function redirectToLogin() { window.location.href = "login_reg.php"; }
function startSessionPolling() {
if (_sessionPollTimer) return;
_sessionPollTimer = setInterval(async () => {
if (!_studentId || !_studentToken) return;
try {
const res = await fetch(
`${API_BASE}/check_session.php?student_id=${_studentId}&token=${encodeURIComponent(_studentToken)}&t=${Date.now()}`
);
const data = await res.json();
if (data.session_expired || !data.valid) {
clearInterval(_sessionPollTimer);
localStorage.clear();
alert(data.message || "Your account has been logged in on another device. You have been automatically logged out.");
redirectToLogin();
}
} catch (e) {
// Network error — silently ignore
}
}, 20000); // 20 seconds
}
// ─────────────────────────────────────────────────────────────────────
let courseData = null;
let currentIndex = 0;
// Utilities
function ytId(url) {
if (!url) return "";
const m = url.match(/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|shorts\/))([A-Za-z0-9_\-]{11})/);
return m ? m[1] : "";
}
function getVideoUrl(url) {
if (!url) return "";
if (url.startsWith("http")) return url;
return `${ADMIN_BASE}/${url}`;
}
// Initialize Page
window.onload = () => {
// ── Session validation ─────────────────────────────────────────
const stdRaw = localStorage.getItem("student_data");
_studentToken = localStorage.getItem("student_token") || "";
if (!stdRaw || !_studentToken) { redirectToLogin(); return; }
try {
const stdParsed = JSON.parse(stdRaw);
if (!stdParsed.id) { redirectToLogin(); return; }
_studentId = Number(stdParsed.id);
} catch(e) { redirectToLogin(); return; }
startSessionPolling(); // ← auto-logout polling shuru karo
// ──────────────────────────────────────────────────────────────
// --- TEMPORARY DUMMY DATA ---
// Agar localStorage empty hai, toh yeh dummy data daal dega taaki video play ho sake
if (!localStorage.getItem("current_view_course")) {
const dummyData = {
name: "Full Stack Web Development",
lessons: [
{ title: "1. Introduction to the Course (YouTube Video)", video_url: "https://www.youtube.com/watch?v=Ke90Tje7VS0", duration: "5:20" },
{ title: "2. Setting up the Environment (Direct MP4)", video_url: "https://www.w3schools.com/html/mov_bbb.mp4", duration: "10:15" },
{ title: "3. No Video Attached", video_url: "", duration: "2:00" }
]
};
localStorage.setItem("current_view_course", JSON.stringify(dummyData));
}
// ----------------------------
const dataStr = localStorage.getItem("current_view_course");
try {
courseData = JSON.parse(dataStr);
// Update Header Info
document.getElementById("courseTitle").innerText = courseData.name;
let total = courseData.lessons ? courseData.lessons.length : 0;
document.getElementById("courseSub").innerText = `${total} Chapter${total !== 1 ? 's' : ''}`;
if (total > 0) {
renderChapters();
playLesson(0); // Auto play the first chapter
} else {
document.getElementById("videoContainer").innerHTML = `
<div class="no-video">
<span>📖</span>
<h3>No Chapters Available</h3>
<p>Content will appear here once added by the instructor.</p>
</div>
`;
}
} catch(e) {
console.error("Data parse error", e);
window.location.href = "dashboard.php";
}
};
// Render Sidebar List
function renderChapters() {
const listDiv = document.getElementById("chapterList");
let html = "";
courseData.lessons.forEach((lesson, index) => {
const vid = ytId(lesson.video_url);
let thumbHtml = "";
// Thumbnail setup
if(vid) {
thumbHtml = `<img src="https://img.youtube.com/vi/${vid}/mqdefault.jpg" alt="Thumb">`;
} else {
thumbHtml = `<div class="chap-thumb-placeholder">▶</div>`;
}
let durationHtml = lesson.duration ? `<div class="duration-badge">⏱ ${lesson.duration}</div>` : '';
html += `
<div class="chap-item" id="chapItem_${index}" onclick="playLesson(${index})">
<div class="chap-thumb-wrap">
${thumbHtml}
<div class="chap-overlay"></div>
<div class="chap-num-badge">${index + 1}</div>
</div>
<div class="chap-info">
<div class="chap-title" title="${lesson.title}">${lesson.title}</div>
${durationHtml}
</div>
<div class="chap-icon-wrap" id="chapIcon_${index}">▶</div>
</div>
`;
});
listDiv.innerHTML = html;
}
// Handle Video Playback
function playLesson(index) {
currentIndex = index;
const lesson = courseData.lessons[index];
const container = document.getElementById("videoContainer");
const yId = ytId(lesson.video_url);
// 1. Load the video based on type
if (yId) {
// IMPORTANT: Added &mute=1 to bypass browser autoplay blocks
container.innerHTML = `
<iframe
src="https://www.youtube.com/embed/${yId}?autoplay=1&mute=1&rel=0&modestbranding=1"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
`;
} else if (lesson.video_url) {
// IMPORTANT: Added 'muted' attribute to bypass browser autoplay blocks
const vUrl = getVideoUrl(lesson.video_url);
container.innerHTML = `
<video controls autoplay muted playsinline controlsList="nodownload">
<source src="${vUrl}" type="video/mp4">
Your browser does not support the video tag.
</video>
`;
} else {
// No video URL found
container.innerHTML = `
<div class="no-video">
<span>🎬</span>
<h3>No Video Found</h3>
<p>Video content is missing for this specific chapter.</p>
</div>
`;
}
// 2. Update Now Playing Info
document.getElementById("nowPlayingBar").style.display = "flex";
document.getElementById("npLabel").innerText = `NOW PLAYING • Chapter ${index + 1}/${courseData.lessons.length}`;
document.getElementById("npTitle").innerText = lesson.title;
// 3. Update Active Classes in the List
document.querySelectorAll('.chap-item').forEach(el => el.classList.remove('active'));
document.querySelectorAll('.chap-icon-wrap').forEach(el => el.innerText = '▶');
const activeItem = document.getElementById(`chapItem_${index}`);
const activeIcon = document.getElementById(`chapIcon_${index}`);
if(activeItem) {
activeItem.classList.add('active');
activeItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
if(activeIcon) {
activeIcon.innerText = '⏸';
}
// For Mobile: Scroll to top
if(window.innerWidth < 992) {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
}
</script>
</body>
</html>| .. | |||||
| image | |||||
| config.php | |||||
| coursePlayer.php | |||||
| dashboard.php | |||||
| error_log | |||||
| invite_friends.php | |||||
| login_reg.php | |||||
| profile.php | |||||
| wallet.php |