steven
4d30803b60
Add static site, shared layout, and Node dev server with standard .gitignore. Co-authored-by: Cursor <cursoragent@cursor.com>
1338 lines
58 KiB
HTML
1338 lines
58 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
<meta name="description"
|
||
content="Probably the most complete UI kit out there. Multiple functionalities and controls added, extended color palette and beautiful typography, designed as its own extended version of Bootstrap at the highest level of quality. ">
|
||
<meta name="author" content="Webpixels">
|
||
<title>live Page</title>
|
||
|
||
<link type="text/css" href="../assets/vendor/icon/iconfont.css" rel="stylesheet">
|
||
<link type="text/css" href="../assets/css/style.css" rel="stylesheet">
|
||
<!-- Theme CSS -->
|
||
<link type="text/css" href="../assets/css/theme.css" rel="stylesheet">
|
||
<link type="text/css" href="../assets/css/index.css" rel="stylesheet">
|
||
<link type="text/css" href="../assets/css/academy.css" rel="stylesheet">
|
||
|
||
</head>
|
||
|
||
<body class="aifo-bg-primary">
|
||
<div id="nav-container"></div>
|
||
|
||
|
||
<main class="main" id="live-page">
|
||
<!-- banner start -->
|
||
<div class="live-banner"></div>
|
||
|
||
<div class="content" ><!-- Live Now Section -->
|
||
<section id="live" class="py-5">
|
||
<div class="container">
|
||
<div class="row"><!-- Left: Video -->
|
||
<div class="col-lg-8 mb-4"><!-- State 1: LIVE NOW (default visible) -->
|
||
<div id="liveNowState">
|
||
<div class="video-container">
|
||
<div class="live-badge">
|
||
Live
|
||
</div>
|
||
|
||
<iframe
|
||
width="560"
|
||
height="315"
|
||
src="https://www.youtube.com/embed/S3twb2Bqxfs?si=VHWVIbmuHhqZMpsu"
|
||
title="YouTube video player"
|
||
frameborder="0"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
|
||
</iframe>
|
||
</div>
|
||
<div class="video-meta">
|
||
Live now • Trading Psychology • 1,284 watching
|
||
</div>
|
||
</div><!-- State 2: UPCOMING (hidden by default) -->
|
||
<div id="upcomingState" style="display: none;">
|
||
<div class="upcoming-container">
|
||
<div class="upcoming-content">
|
||
<div class="upcoming-title">
|
||
Next Live Session
|
||
</div>
|
||
<div class="countdown" id="countdown">
|
||
00:12:34
|
||
</div>
|
||
<div class="start-time">
|
||
Starts at 7:00 PM (Sydney)<br>
|
||
8:00 AM (London) • 3:00 AM (Toronto)
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="video-meta">
|
||
Upcoming • Risk Management Masterclass
|
||
</div>
|
||
</div>
|
||
</div><!-- Right: Info Card -->
|
||
<div class="col-lg-4">
|
||
<div class="card-dark">
|
||
<h3 class="session-title">Live Trading Room: Risk Management</h3>
|
||
<ul class="session-bullets">
|
||
<li>Challenge rules breakdown</li>
|
||
<li>Risk limits explained</li>
|
||
<li>Position sizing strategies</li>
|
||
<li>Live Q&A with traders</li>
|
||
<li>Real-time market analysis</li>
|
||
</ul>
|
||
<div class="host-row">
|
||
<div class="host-avatar">
|
||
AC
|
||
</div>
|
||
<div class="live-info">
|
||
<p class="host-name">Alex Chen</p>
|
||
<p class="host-title">Head Trader</p>
|
||
</div>
|
||
</div>
|
||
<div class="risk-notice">
|
||
<div class="risk-notice-title">
|
||
⚠️ Risk Notice
|
||
</div>
|
||
<p class="risk-notice-text">Trading involves risk. This live session is for
|
||
educational purposes only and does not constitute financial advice.</p>
|
||
</div><button class="btn btn-default btn-primary-orange">Create Account</button>
|
||
<button
|
||
class="btn btn-default btn-secondary-orange">Buy Challenge</button>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section><!-- Schedule Section -->
|
||
|
||
<section class="upcoming-schedule-section">
|
||
<div class="container">
|
||
<div class="text-center fade-in schedule-title">
|
||
<h1><span class="text-white" id="title-part1">Upcoming</span> <span class="text-orange" id="title-part2">Schedule</span></h1>
|
||
|
||
<div class="fluid-paragraph text-center mt-4">
|
||
<p class="lead lh-180">
|
||
Join our live sessions to accelerate your trading journey
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="sessionList">
|
||
<div class="session-card " data-id="1">
|
||
<div class="card-main-content">
|
||
<div class="date-badge">
|
||
<div class="day">WED</div>
|
||
<div class="date">16</div>
|
||
</div>
|
||
<div class="session-info">
|
||
<div class="session-title">Rules Deep Dive: Phase 1</div>
|
||
<div class="session-time">7:00 PM Sydney • 8:00 AM London • 3:00 AM Toronto</div>
|
||
<div class="session-tags">
|
||
<span class="tag-chip">Challenge Rules</span><span class="tag-chip">Phase Requirements</span><span class="tag-chip">Live Q&A</span>
|
||
</div>
|
||
</div>
|
||
<div class="action-area">
|
||
<button class="btn-calendar " data-id="1">
|
||
Add to Calendar
|
||
</button>
|
||
<div class="reminder-text">Set reminder</div>
|
||
</div>
|
||
</div>
|
||
<div class="expanded-panel">
|
||
<div class="expanded-content">
|
||
<div class="session-details">
|
||
<h3>Session Overview</h3>
|
||
<p class="session-overview">Rules walkthrough, pass criteria, common disqualifiers. Get a complete understanding of Phase 1 requirements and ensure you start your challenge with confidence.</p>
|
||
<div class="key-takeaways">
|
||
<h4>Key Takeaways</h4>
|
||
<div class="takeaway-item">Risk limits checklist for Phase 1</div><div class="takeaway-item">Daily loss guardrails and maximum drawdown rules</div><div class="takeaway-item">Live Q&A with common challenge questions</div>
|
||
</div>
|
||
</div>
|
||
<div class="signup-section">
|
||
<div class="host-info">
|
||
<div class="host-avatar">A</div>
|
||
<div class="host-details">
|
||
<h4>Alex Morgan</h4>
|
||
<div class="host-title">Senior Trading Coach</div>
|
||
<div class="host-bio">Helped 500+ traders pass challenges</div>
|
||
</div>
|
||
</div>
|
||
<form class="signup-form" data-id="1">
|
||
<input type="text" class="form-input" placeholder="Enter your name" name="name" required="">
|
||
<input type="email" class="form-input" placeholder="Enter your email" name="email" required="">
|
||
<button type="submit" class="btn-submit">Submit</button>
|
||
<div class="form-note">We'll send you the calendar invite and reminder email.</div>
|
||
<div class="success-message" style="display: none;">Successfully subscribed! Check your email for the calendar invite.</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session-card " data-id="2">
|
||
<div class="card-main-content">
|
||
<div class="date-badge">
|
||
<div class="day">THU</div>
|
||
<div class="date">17</div>
|
||
</div>
|
||
<div class="session-info">
|
||
<div class="session-title">Risk Management Masterclass</div>
|
||
<div class="session-time">7:00 PM Sydney • 8:00 AM London • 3:00 AM Toronto</div>
|
||
<div class="session-tags">
|
||
<span class="tag-chip">Position Sizing</span><span class="tag-chip">Stop Loss Strategies</span><span class="tag-chip">Risk Limits</span>
|
||
</div>
|
||
</div>
|
||
<div class="action-area">
|
||
<button class="btn-calendar " data-id="2">
|
||
Add to Calendar
|
||
</button>
|
||
<div class="reminder-text">Set reminder</div>
|
||
</div>
|
||
</div>
|
||
<div class="expanded-panel">
|
||
<div class="expanded-content">
|
||
<div class="session-details">
|
||
<h3>Session Overview</h3>
|
||
<p class="session-overview">Practical risk sizing for prop challenges. Learn how to calculate position sizes that keep you safe while maximizing your growth potential.</p>
|
||
<div class="key-takeaways">
|
||
<h4>Key Takeaways</h4>
|
||
<div class="takeaway-item">Position sizing formulas for funded accounts</div><div class="takeaway-item">Dynamic stop loss placement techniques</div><div class="takeaway-item">Risk-reward optimization for challenges</div>
|
||
</div>
|
||
</div>
|
||
<div class="signup-section">
|
||
<div class="host-info">
|
||
<div class="host-avatar">S</div>
|
||
<div class="host-details">
|
||
<h4>Sophie Lee</h4>
|
||
<div class="host-title">Risk & Performance Mentor</div>
|
||
<div class="host-bio">Former institutional risk manager</div>
|
||
</div>
|
||
</div>
|
||
<form class="signup-form" data-id="2">
|
||
<input type="text" class="form-input" placeholder="Enter your name" name="name" required="">
|
||
<input type="email" class="form-input" placeholder="Enter your email" name="email" required="">
|
||
<button type="submit" class="btn-submit">Submit</button>
|
||
<div class="form-note">We'll send you the calendar invite and reminder email.</div>
|
||
<div class="success-message" style="display: none;">Successfully subscribed! Check your email for the calendar invite.</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session-card " data-id="3">
|
||
<div class="card-main-content">
|
||
<div class="date-badge">
|
||
<div class="day">FRI</div>
|
||
<div class="date">18</div>
|
||
</div>
|
||
<div class="session-info">
|
||
<div class="session-title">Advanced Trading Psychology</div>
|
||
<div class="session-time">7:00 PM Sydney • 8:00 AM London • 3:00 AM Toronto</div>
|
||
<div class="session-tags">
|
||
<span class="tag-chip">Mindset</span><span class="tag-chip">Discipline</span><span class="tag-chip">Emotional Control</span>
|
||
</div>
|
||
</div>
|
||
<div class="action-area">
|
||
<button class="btn-calendar " data-id="3">
|
||
Add to Calendar
|
||
</button>
|
||
<div class="reminder-text">Set reminder</div>
|
||
</div>
|
||
</div>
|
||
<div class="expanded-panel">
|
||
<div class="expanded-content">
|
||
<div class="session-details">
|
||
<h3>Session Overview</h3>
|
||
<p class="session-overview">How to stay consistent under drawdown pressure. Master the mental game that separates successful funded traders from those who fail.</p>
|
||
<div class="key-takeaways">
|
||
<h4>Key Takeaways</h4>
|
||
<div class="takeaway-item">Emotional regulation during losing streaks</div><div class="takeaway-item">Building unshakeable trading discipline</div><div class="takeaway-item">Recovery strategies after rule violations</div>
|
||
</div>
|
||
</div>
|
||
<div class="signup-section">
|
||
<div class="host-info">
|
||
<div class="host-avatar">D</div>
|
||
<div class="host-details">
|
||
<h4>Daniel Rivera</h4>
|
||
<div class="host-title">Performance Psychologist</div>
|
||
<div class="host-bio">PhD in Trading Psychology</div>
|
||
</div>
|
||
</div>
|
||
<form class="signup-form" data-id="3">
|
||
<input type="text" class="form-input" placeholder="Enter your name" name="name" required="">
|
||
<input type="email" class="form-input" placeholder="Enter your email" name="email" required="">
|
||
<button type="submit" class="btn-submit">Submit</button>
|
||
<div class="form-note">We'll send you the calendar invite and reminder email.</div>
|
||
<div class="success-message" style="display: none;">Successfully subscribed! Check your email for the calendar invite.</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="controls-section"><button id="toggleBtn" class="btn-show-more"> <span id="toggleText">Show More Sessions</span> <span id="toggleIcon">▼</span> </button>
|
||
<ul id="pagination" class="pagination" style="display: none;"></ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Replay Library Section -->
|
||
|
||
<section class="post-sessions-section">
|
||
<div class="container">
|
||
<div class="past-sessions-module">
|
||
<div class="past-sessions-header">
|
||
<h2><span class="white-text">Past</span> <span class="orange-text">Sessions</span></h2>
|
||
<p class="past-sessions-subtitle">Watch previous sessions on demand</p>
|
||
</div>
|
||
<div class="replay-tabs">
|
||
<div class="replay-tabs-bg">
|
||
<button class="replay-tab is-active" data-category="all">All</button>
|
||
<button class="replay-tab" data-category="rules">Rules</button>
|
||
<button class="replay-tab" data-category="risk">Risk</button>
|
||
<button class="replay-tab" data-category="psychology">Psychology</button>
|
||
<button class="replay-tab" data-category="live-review">Live Review</button>
|
||
<button class="replay-tab" data-category="qa">Q&A</button>
|
||
</div>
|
||
</div>
|
||
<div id="replayGrid" class="row">
|
||
<div class="col-lg-4 col-md-6 col-12">
|
||
<div class="replay-card">
|
||
<div class="replay-thumbnail">
|
||
<span class="icon iconfont icon-zhiboxiaodianshi-01"></span>
|
||
<div class="replay-duration">48:12</div>
|
||
</div>
|
||
<div class="replay-content">
|
||
<div class="replay-title">How to Pass the Challenge Without Overtrading</div>
|
||
<div class="replay-meta">48:12 • 12 Dec 2024</div>
|
||
<div class="replay-category-badge">Rules</div>
|
||
<a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer" class="btn-watch-replay">
|
||
Watch Replay
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-4 col-md-6 col-12">
|
||
<div class="replay-card">
|
||
<div class="replay-thumbnail">
|
||
<span class="icon iconfont icon-zhiboxiaodianshi-01"></span>
|
||
<div class="replay-duration">36:40</div>
|
||
</div>
|
||
<div class="replay-content">
|
||
<div class="replay-title">Daily Loss Limit: How to Protect Your Account</div>
|
||
<div class="replay-meta">36:40 • 09 Dec 2024</div>
|
||
<div class="replay-category-badge">Risk</div>
|
||
<a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer" class="btn-watch-replay">
|
||
Watch Replay
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-4 col-md-6 col-12">
|
||
<div class="replay-card">
|
||
<div class="replay-thumbnail">
|
||
<span class="icon iconfont icon-zhiboxiaodianshi-01"></span>
|
||
<div class="replay-duration">42:05</div>
|
||
</div>
|
||
<div class="replay-content">
|
||
<div class="replay-title">Handling Drawdowns Without Breaking Rules</div>
|
||
<div class="replay-meta">42:05 • 05 Dec 2024</div>
|
||
<div class="replay-category-badge">Psychology</div>
|
||
<a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer" class="btn-watch-replay">
|
||
Watch Replay
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-4 col-md-6 col-12">
|
||
<div class="replay-card">
|
||
<div class="replay-thumbnail">
|
||
<span class="icon iconfont icon-zhiboxiaodianshi-01"></span>
|
||
<div class="replay-duration">55:18</div>
|
||
</div>
|
||
<div class="replay-content">
|
||
<div class="replay-title">London Open Chart Review (Live Replay)</div>
|
||
<div class="replay-meta">55:18 • 02 Dec 2024</div>
|
||
<div class="replay-category-badge">Live Review</div>
|
||
<a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer" class="btn-watch-replay">
|
||
Watch Replay
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-4 col-md-6 col-12">
|
||
<div class="replay-card">
|
||
<div class="replay-thumbnail">
|
||
<span class="icon iconfont icon-zhiboxiaodianshi-01"></span>
|
||
<div class="replay-duration">31:22</div>
|
||
</div>
|
||
<div class="replay-content">
|
||
<div class="replay-title">Trader Q&A: Common Challenge Mistakes</div>
|
||
<div class="replay-meta">31:22 • 28 Nov 2024</div>
|
||
<div class="replay-category-badge">Q&A</div>
|
||
<a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer" class="btn-watch-replay">
|
||
Watch Replay
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-4 col-md-6 col-12">
|
||
<div class="replay-card">
|
||
<div class="replay-thumbnail">
|
||
<span class="icon iconfont icon-zhiboxiaodianshi-01"></span>
|
||
<div class="replay-duration">39:10</div>
|
||
</div>
|
||
<div class="replay-content">
|
||
<div class="replay-title">Phase 1 Checklist: What You Must Not Do</div>
|
||
<div class="replay-meta">39:10 • 24 Nov 2024</div>
|
||
<div class="replay-category-badge">Rules</div>
|
||
<a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer" class="btn-watch-replay">
|
||
Watch Replay
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="replay-actions"><button id="loadMoreBtn" class="btn-load-more">Load More Replays</button> <a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer" class="view-all-link"> View All Replays on YouTube → </a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="festured-highlights-section">
|
||
<div class="container">
|
||
<!-- Featured Highlights Module -->
|
||
<div class="featured-highlights">
|
||
<div class="highlights-header">
|
||
<h2><span class="white-text">Featured</span> <span class="orange-text">Highlights</span></h2>
|
||
<p class="highlights-subtitle">Quick insights from our best sessions</p>
|
||
</div>
|
||
<div class="highlights-shell">
|
||
<div class="highlights-track-wrapper">
|
||
<div class="highlights-track" id="highlightsTrack"></div>
|
||
</div>
|
||
<div class="highlights-prev" id="highlightsPrev">
|
||
<span class="icon iconfont icon-zuobian"></span>
|
||
</div>
|
||
<div class="highlights-next" id="highlightsNext">
|
||
<span class="icon iconfont icon-zuobian1"></span>
|
||
</div>
|
||
<div class="highlights-progress">
|
||
<div class="highlights-progress-fill" id="highlightsProgressFill"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<section id="section-10" class="slice slice-lg d-flex align-items-center">
|
||
<div class="bg-orange-light"></div>
|
||
<div class="container">
|
||
<div class="mb-md text-center fade-in">
|
||
<h1 class="heading h1">Join <img src="../assets/images/backgrounds/Frame 1000008381.png" alt="Funded Trading"
|
||
class="tx-img floating-img"></h1>
|
||
<h1 class="heading h1"> <img src="../assets/images/backgrounds/Frame 1000008386.png" alt="Funded Trading"
|
||
class="zfj-img floating-img"><span class="text-orange">Our Community</span></h1>
|
||
<div class="fluid-paragraph text-center mt-4">
|
||
<p class="lead lh-180">
|
||
Join a <span class="text-orange">supportive network</span> of traders where you can <br>share insights,
|
||
learn together, and celebrate <br>every step of your journey.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-center ">
|
||
<div class="col-auto">
|
||
<div class="hero-buttons d-flex flex-wrap justify-content-center fade-in">
|
||
<a href="#" class="btn btn-start-challenge d-flex align-items-center justify-content-center"><img
|
||
src="../assets/images/backgrounds/btn-icon-1.png" alt="Funded Trading"> Join Discord</a>
|
||
<a href="#" class="btn btn-free-trial">
|
||
<span class="btn-join-telegram-icon"></span>
|
||
<!--<img src="../assets/images/backgrounds/btn-icon-2.png" alt="Funded Trading" class="floating-img"> -->
|
||
Join Telegram
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
</div><!-- Video Modal -->
|
||
<div class="modal fade video-modal" id="videoModal" tabindex="-1" role="dialog">
|
||
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="videoModalTitle">Highlight Video</h5><button type="button"
|
||
class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="video-modal-container" id="videoModalContainer"><!-- Video will be loaded here -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- Footer -->
|
||
|
||
|
||
|
||
|
||
</main>
|
||
|
||
<div id="footer-container"></div>
|
||
|
||
<!-- Core -->
|
||
<script src="../assets/vendor/jquery/jquery-3.7.1.min.js"></script>
|
||
<script src="../assets/vendor/popper/popper.min.js"></script>
|
||
<script src="../assets/js/bootstrap/bootstrap.min.js"></script>
|
||
<!-- FontAwesome 5 -->
|
||
<script src="../assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
|
||
<!-- Page plugins -->
|
||
<script src="../assets/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
|
||
<script src="../assets/vendor/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
|
||
<script src="../assets/vendor/input-mask/input-mask.min.js"></script>
|
||
<script src="../assets/vendor/nouislider/js/nouislider.min.js"></script>
|
||
<script src="../assets/vendor/textarea-autosize/textarea-autosize.min.js"></script>
|
||
<!-- Theme JS -->
|
||
<script src="../assets/js/theme.js"></script>
|
||
<!-- Top code bar behavior -->
|
||
|
||
<script src="/js/layout.js"></script>
|
||
</body>
|
||
|
||
<script>
|
||
const defaultConfigLive = {
|
||
main_title: "Upcoming Schedule",
|
||
subtitle: "Join our live sessions to accelerate your trading journey"
|
||
};
|
||
|
||
// Highlights data (10 videos for carousel)
|
||
const highlightsData = [
|
||
{
|
||
id: 1,
|
||
title: "Risk Rule That Fails Most Traders",
|
||
duration: "01:10",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 2,
|
||
title: "The #1 Mistake in Position Sizing",
|
||
duration: "01:45",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 3,
|
||
title: "How to Avoid Emotional Trading",
|
||
duration: "03:30",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 4,
|
||
title: "Quick Tip: Daily Drawdown Explained",
|
||
duration: "00:58",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 5,
|
||
title: "Phase 1 Secrets: Passing Cleanly",
|
||
duration: "02:12",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 6,
|
||
title: "Stop Loss Placement in Volatility",
|
||
duration: "02:05",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 7,
|
||
title: "Overtrading Warning Signs",
|
||
duration: "01:26",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 8,
|
||
title: "Consistency Rules in 60 Seconds",
|
||
duration: "01:00",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 9,
|
||
title: "Managing Risk During News Events",
|
||
duration: "02:35",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 10,
|
||
title: "Top 3 Psychology Mistakes to Avoid",
|
||
duration: "01:52",
|
||
url: "https://www.youtube.com"
|
||
}
|
||
];
|
||
|
||
// Replay videos data (24 videos for robust Load More functionality)
|
||
const replayVideos = [
|
||
{
|
||
id: 1,
|
||
title: "How to Pass the Challenge Without Overtrading",
|
||
duration: "48:12",
|
||
date: "12 Dec 2024",
|
||
category: "rules",
|
||
categoryLabel: "Rules",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 2,
|
||
title: "Daily Loss Limit: How to Protect Your Account",
|
||
duration: "36:40",
|
||
date: "09 Dec 2024",
|
||
category: "risk",
|
||
categoryLabel: "Risk",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 3,
|
||
title: "Handling Drawdowns Without Breaking Rules",
|
||
duration: "42:05",
|
||
date: "05 Dec 2024",
|
||
category: "psychology",
|
||
categoryLabel: "Psychology",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 4,
|
||
title: "London Open Chart Review (Live Replay)",
|
||
duration: "55:18",
|
||
date: "02 Dec 2024",
|
||
category: "live-review",
|
||
categoryLabel: "Live Review",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 5,
|
||
title: "Trader Q&A: Common Challenge Mistakes",
|
||
duration: "31:22",
|
||
date: "28 Nov 2024",
|
||
category: "qa",
|
||
categoryLabel: "Q&A",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 6,
|
||
title: "Phase 1 Checklist: What You Must Not Do",
|
||
duration: "39:10",
|
||
date: "24 Nov 2024",
|
||
category: "rules",
|
||
categoryLabel: "Rules",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 7,
|
||
title: "Risk Management Fundamentals for Funded Traders",
|
||
duration: "52:35",
|
||
date: "20 Nov 2024",
|
||
category: "risk",
|
||
categoryLabel: "Risk",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 8,
|
||
title: "Trading Psychology: Overcoming Fear and Greed",
|
||
duration: "41:18",
|
||
date: "17 Nov 2024",
|
||
category: "psychology",
|
||
categoryLabel: "Psychology",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 9,
|
||
title: "Live Chart Analysis: EUR/USD Setup Breakdown",
|
||
duration: "56:42",
|
||
date: "14 Nov 2024",
|
||
category: "live-review",
|
||
categoryLabel: "Live Review",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 10,
|
||
title: "Your Profit Target Questions Answered",
|
||
duration: "28:45",
|
||
date: "11 Nov 2024",
|
||
category: "qa",
|
||
categoryLabel: "Q&A",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 11,
|
||
title: "Maximum Drawdown Rules Explained Step-by-Step",
|
||
duration: "43:28",
|
||
date: "08 Nov 2024",
|
||
category: "rules",
|
||
categoryLabel: "Rules",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 12,
|
||
title: "Position Sizing Calculator: Complete Guide",
|
||
duration: "45:20",
|
||
date: "05 Nov 2024",
|
||
category: "risk",
|
||
categoryLabel: "Risk",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 13,
|
||
title: "Building Mental Resilience After Losses",
|
||
duration: "49:33",
|
||
date: "02 Nov 2024",
|
||
category: "psychology",
|
||
categoryLabel: "Psychology",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 14,
|
||
title: "Live Trading Room: Gold Market Deep Dive",
|
||
duration: "1:12:15",
|
||
date: "30 Oct 2024",
|
||
category: "live-review",
|
||
categoryLabel: "Live Review",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 15,
|
||
title: "Common Questions About Daily Loss Limits",
|
||
duration: "34:47",
|
||
date: "27 Oct 2024",
|
||
category: "qa",
|
||
categoryLabel: "Q&A",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 16,
|
||
title: "Trading Rules Every Funded Trader Must Know",
|
||
duration: "47:55",
|
||
date: "24 Oct 2024",
|
||
category: "rules",
|
||
categoryLabel: "Rules",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 17,
|
||
title: "Stop Loss Strategies That Actually Work",
|
||
duration: "50:06",
|
||
date: "21 Oct 2024",
|
||
category: "risk",
|
||
categoryLabel: "Risk",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 18,
|
||
title: "Dealing with Losing Streaks: Practical Tips",
|
||
duration: "39:52",
|
||
date: "18 Oct 2024",
|
||
category: "psychology",
|
||
categoryLabel: "Psychology",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 19,
|
||
title: "Live Review: Top 5 Trading Mistakes This Week",
|
||
duration: "58:34",
|
||
date: "15 Oct 2024",
|
||
category: "live-review",
|
||
categoryLabel: "Live Review",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 20,
|
||
title: "Scaling Questions: From Pass to Payout",
|
||
duration: "33:18",
|
||
date: "12 Oct 2024",
|
||
category: "qa",
|
||
categoryLabel: "Q&A",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 21,
|
||
title: "Challenge Rules Deep Dive: Everything You Need",
|
||
duration: "1:05:40",
|
||
date: "09 Oct 2024",
|
||
category: "rules",
|
||
categoryLabel: "Rules",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 22,
|
||
title: "Risk-Reward Ratios Explained for Beginners",
|
||
duration: "37:22",
|
||
date: "06 Oct 2024",
|
||
category: "risk",
|
||
categoryLabel: "Risk",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 23,
|
||
title: "The Psychology of Consistency in Trading",
|
||
duration: "44:15",
|
||
date: "03 Oct 2024",
|
||
category: "psychology",
|
||
categoryLabel: "Psychology",
|
||
url: "https://www.youtube.com"
|
||
},
|
||
{
|
||
id: 24,
|
||
title: "New York Session Live Analysis Replay",
|
||
duration: "1:08:52",
|
||
date: "30 Sep 2024",
|
||
category: "live-review",
|
||
categoryLabel: "Live Review",
|
||
url: "https://www.youtube.com"
|
||
}
|
||
];
|
||
|
||
let currentReplayCategory = 'all';
|
||
let displayedReplayCount = 6;
|
||
|
||
const sessions = [
|
||
{
|
||
id: 1,
|
||
day: "WED",
|
||
date: "16",
|
||
title: "Rules Deep Dive: Phase 1",
|
||
times: "7:00 PM Sydney • 8:00 AM London • 3:00 AM Toronto",
|
||
tags: ["Challenge Rules", "Phase Requirements", "Live Q&A"],
|
||
overview: "Rules walkthrough, pass criteria, common disqualifiers. Get a complete understanding of Phase 1 requirements and ensure you start your challenge with confidence.",
|
||
takeaways: [
|
||
"Risk limits checklist for Phase 1",
|
||
"Daily loss guardrails and maximum drawdown rules",
|
||
"Live Q&A with common challenge questions"
|
||
],
|
||
host: { name: "Alex Morgan", title: "Senior Trading Coach", bio: "Helped 500+ traders pass challenges" }
|
||
},
|
||
{
|
||
id: 2,
|
||
day: "THU",
|
||
date: "17",
|
||
title: "Risk Management Masterclass",
|
||
times: "7:00 PM Sydney • 8:00 AM London • 3:00 AM Toronto",
|
||
tags: ["Position Sizing", "Stop Loss Strategies", "Risk Limits"],
|
||
overview: "Practical risk sizing for prop challenges. Learn how to calculate position sizes that keep you safe while maximizing your growth potential.",
|
||
takeaways: [
|
||
"Position sizing formulas for funded accounts",
|
||
"Dynamic stop loss placement techniques",
|
||
"Risk-reward optimization for challenges"
|
||
],
|
||
host: { name: "Sophie Lee", title: "Risk & Performance Mentor", bio: "Former institutional risk manager" }
|
||
},
|
||
{
|
||
id: 3,
|
||
day: "FRI",
|
||
date: "18",
|
||
title: "Advanced Trading Psychology",
|
||
times: "7:00 PM Sydney • 8:00 AM London • 3:00 AM Toronto",
|
||
tags: ["Mindset", "Discipline", "Emotional Control"],
|
||
overview: "How to stay consistent under drawdown pressure. Master the mental game that separates successful funded traders from those who fail.",
|
||
takeaways: [
|
||
"Emotional regulation during losing streaks",
|
||
"Building unshakeable trading discipline",
|
||
"Recovery strategies after rule violations"
|
||
],
|
||
host: { name: "Daniel Rivera", title: "Performance Psychologist", bio: "PhD in Trading Psychology" }
|
||
},
|
||
{
|
||
id: 4,
|
||
day: "SAT",
|
||
date: "19",
|
||
title: "Entry Models for High-Probability Trades",
|
||
times: "7:00 PM Sydney • 8:00 AM London • 3:00 AM Toronto",
|
||
tags: ["Market Structure", "Confirmations", "Examples"],
|
||
overview: "Learn proven entry models used by professional traders. Focus on high-probability setups with clear market structure confirmations.",
|
||
takeaways: [
|
||
"Identify institutional order blocks",
|
||
"Multi-timeframe confirmation techniques",
|
||
"Real chart examples and case studies"
|
||
],
|
||
host: { name: "Chris Wong", title: "Lead Analyst", bio: "10+ years institutional trading" }
|
||
},
|
||
{
|
||
id: 5,
|
||
day: "SUN",
|
||
date: "20",
|
||
title: "News Trading: What to Do and What to Avoid",
|
||
times: "7:00 PM Sydney • 8:00 AM London • 3:00 AM Toronto",
|
||
tags: ["Economic Calendar", "Volatility", "Risk"],
|
||
overview: "Navigate high-impact news events safely during your challenge. Learn when to trade, when to stay flat, and how to protect your account.",
|
||
takeaways: [
|
||
"Economic calendar interpretation",
|
||
"Pre-news and post-news strategies",
|
||
"Volatility management during NFP, CPI, FOMC"
|
||
],
|
||
host: { name: "Mia Thompson", title: "Macro Strategist", bio: "Former Reuters market analyst" }
|
||
},
|
||
{
|
||
id: 6,
|
||
day: "MON",
|
||
date: "21",
|
||
title: "Backtesting Basics for Retail Traders",
|
||
times: "7:00 PM Sydney • 8:00 AM London • 3:00 AM Toronto",
|
||
tags: ["Methodology", "Data Quality", "Journaling"],
|
||
overview: "Build a robust backtesting process to validate your strategy before risking real capital. Learn proper methodology and avoid common pitfalls.",
|
||
takeaways: [
|
||
"Step-by-step backtesting framework",
|
||
"Data quality and reliability checks",
|
||
"Integrating backtest results into your journal"
|
||
],
|
||
host: { name: "Ethan Park", title: "Quant Educator", bio: "Algorithmic trading specialist" }
|
||
},
|
||
{
|
||
id: 7,
|
||
day: "TUE",
|
||
date: "22",
|
||
title: "Challenge Pass Plan: 10-Day Execution Framework",
|
||
times: "7:00 PM Sydney • 8:00 AM London • 3:00 AM Toronto",
|
||
tags: ["Daily Targets", "Rules Safety", "Routine"],
|
||
overview: "A complete 10-day roadmap to pass your challenge efficiently. Learn daily profit targets, risk limits, and how to maintain consistency.",
|
||
takeaways: [
|
||
"Daily target setting and tracking",
|
||
"Rule safety margin calculations",
|
||
"Pre-market and post-market routines"
|
||
],
|
||
host: { name: "Olivia Chen", title: "Trading Coach", bio: "Passed 15+ prop firm challenges" }
|
||
},
|
||
{
|
||
id: 8,
|
||
day: "WED",
|
||
date: "23",
|
||
title: "Scaling & Consistency: From Pass to Payout",
|
||
times: "7:00 PM Sydney • 8:00 AM London • 3:00 AM Toronto",
|
||
tags: ["Consistency Rules", "Scaling", "Payout Prep"],
|
||
overview: "What happens after you pass? Learn consistency requirements, scaling strategies, and how to prepare for your first payout.",
|
||
takeaways: [
|
||
"Funded account consistency rules",
|
||
"Position size scaling strategies",
|
||
"Payout schedule and documentation"
|
||
],
|
||
host: { name: "Liam Patel", title: "Funded Trader Mentor", bio: "Managing $500K+ funded capital" }
|
||
},
|
||
{
|
||
id: 9,
|
||
day: "THU",
|
||
date: "24",
|
||
title: "Technical Analysis Clinic (Live Chart Review)",
|
||
times: "7:00 PM Sydney • 8:00 AM London • 3:00 AM Toronto",
|
||
tags: ["Support/Resistance", "Trend", "Live Review"],
|
||
overview: "Join us for a live chart review session. Watch real-time analysis of support, resistance, and trend identification on major pairs.",
|
||
takeaways: [
|
||
"Key level identification techniques",
|
||
"Trend structure analysis",
|
||
"Live market commentary and Q&A"
|
||
],
|
||
host: { name: "Isabella Reed", title: "Technical Analyst", bio: "CMT, 12 years chart analysis" }
|
||
},
|
||
{
|
||
id: 10,
|
||
day: "FRI",
|
||
date: "25",
|
||
title: "Common Mistakes That Fail Challenges",
|
||
times: "7:00 PM Sydney • 8:00 AM London • 3:00 AM Toronto",
|
||
tags: ["Overtrading", "Revenge Trades", "Risk Breaches"],
|
||
overview: "Learn from others' failures. We analyze the most common mistakes that cause traders to breach challenge rules and how to avoid them.",
|
||
takeaways: [
|
||
"Overtrading triggers and prevention",
|
||
"Revenge trading psychology and solutions",
|
||
"Risk breach case studies and warnings"
|
||
],
|
||
host: { name: "Noah Bennett", title: "Program Advisor", bio: "Reviewed 1000+ failed challenges" }
|
||
},
|
||
{
|
||
id: 11,
|
||
day: "SAT",
|
||
date: "26",
|
||
title: "Trade Journaling Workshop",
|
||
times: "7:00 PM Sydney • 8:00 AM London �� 3:00 AM Toronto",
|
||
tags: ["Templates", "Metrics", "Feedback"],
|
||
overview: "Build a professional trade journal that accelerates your learning curve. Get templates, key metrics to track, and feedback loops.",
|
||
takeaways: [
|
||
"Journal templates for funded traders",
|
||
"Performance metrics that matter",
|
||
"Weekly and monthly review frameworks"
|
||
],
|
||
host: { name: "Grace Kim", title: "Trading Operations", bio: "Performance analytics expert" }
|
||
}
|
||
];
|
||
|
||
let currentPage = 1;
|
||
let isExpanded = false;
|
||
let expandedCardId = null;
|
||
let subscribedSessions = new Set();
|
||
|
||
function getFilteredReplays() {
|
||
if (currentReplayCategory === 'all') {
|
||
return replayVideos;
|
||
}
|
||
return replayVideos.filter(video => video.category === currentReplayCategory);
|
||
}
|
||
|
||
function renderReplays() {
|
||
const replayGrid = document.getElementById('replayGrid');
|
||
const filteredReplays = getFilteredReplays();
|
||
const replaysToShow = filteredReplays.slice(0, displayedReplayCount);
|
||
|
||
replayGrid.innerHTML = replaysToShow.map(video => `
|
||
<div class="col-lg-4 col-md-6 col-12">
|
||
<div class="replay-card">
|
||
<div class="replay-thumbnail">
|
||
<span class="icon iconfont icon-zhiboxiaodianshi-01"></span>
|
||
<div class="replay-duration">${video.duration}</div>
|
||
</div>
|
||
<div class="replay-content">
|
||
<div class="replay-title">${video.title}</div>
|
||
<div class="replay-meta">${video.duration} • ${video.date}</div>
|
||
<div class="replay-category-badge">${video.categoryLabel}</div>
|
||
<a href="${video.url}" target="_blank" rel="noopener noreferrer" class="btn-watch-replay">
|
||
Watch Replay
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
|
||
// Update Load More button
|
||
const loadMoreBtn = document.getElementById('loadMoreBtn');
|
||
if (displayedReplayCount >= filteredReplays.length) {
|
||
loadMoreBtn.disabled = true;
|
||
loadMoreBtn.textContent = 'No More Replays';
|
||
} else {
|
||
loadMoreBtn.disabled = false;
|
||
loadMoreBtn.textContent = 'Load More Replays';
|
||
}
|
||
}
|
||
|
||
function renderSessions() {
|
||
const sessionList = document.getElementById('sessionList');
|
||
const itemsPerPage = 10;
|
||
let sessionsToShow = [];
|
||
|
||
if (isExpanded) {
|
||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||
const endIndex = startIndex + itemsPerPage;
|
||
sessionsToShow = sessions.slice(startIndex, endIndex);
|
||
} else {
|
||
sessionsToShow = sessions.slice(0, 3);
|
||
}
|
||
|
||
sessionList.innerHTML = sessionsToShow.map(session => {
|
||
const isSubscribed = subscribedSessions.has(session.id);
|
||
const isExpanded = expandedCardId === session.id;
|
||
|
||
return `
|
||
<div class="session-card ${isExpanded ? 'expanded' : ''}" data-id="${session.id}">
|
||
<div class="card-main-content">
|
||
<div class="date-badge">
|
||
<div class="day">${session.day}</div>
|
||
<div class="date">${session.date}</div>
|
||
</div>
|
||
<div class="session-info">
|
||
<div class="session-title">${session.title}</div>
|
||
<div class="session-time">${session.times}</div>
|
||
<div class="session-tags">
|
||
${session.tags.map(tag => `<span class="tag-chip">${tag}</span>`).join('')}
|
||
</div>
|
||
</div>
|
||
<div class="action-area">
|
||
<button class="btn-calendar ${isSubscribed ? 'subscribed' : ''}" data-id="${session.id}">
|
||
${isSubscribed ? '✓ Subscribed' : 'Add to Calendar'}
|
||
</button>
|
||
<div class="reminder-text">${isSubscribed ? 'Reminder enabled' : 'Set reminder'}</div>
|
||
</div>
|
||
</div>
|
||
<div class="expanded-panel">
|
||
<div class="expanded-content">
|
||
<div class="session-details">
|
||
<h3>Session Overview</h3>
|
||
<p class="session-overview">${session.overview}</p>
|
||
<div class="key-takeaways">
|
||
<h4>Key Takeaways</h4>
|
||
${session.takeaways.map(item => `<div class="takeaway-item">${item}</div>`).join('')}
|
||
</div>
|
||
</div>
|
||
<div class="signup-section">
|
||
<div class="host-info">
|
||
<div class="host-avatar">${session.host.name.charAt(0)}</div>
|
||
<div class="host-details">
|
||
<h4>${session.host.name}</h4>
|
||
<div class="host-title">${session.host.title}</div>
|
||
<div class="host-bio">${session.host.bio}</div>
|
||
</div>
|
||
</div>
|
||
<form class="signup-form" data-id="${session.id}">
|
||
<input type="text" class="form-input" placeholder="Enter your name" name="name" required>
|
||
<input type="email" class="form-input" placeholder="Enter your email" name="email" required>
|
||
<button type="submit" class="btn-submit">Submit</button>
|
||
<div class="form-note">We'll send you the calendar invite and reminder email.</div>
|
||
<div class="success-message" style="display: none;">Successfully subscribed! Check your email for the calendar invite.</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
|
||
attachEventListeners();
|
||
}
|
||
|
||
function attachEventListeners() {
|
||
document.querySelectorAll('.btn-calendar').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const sessionId = parseInt(this.dataset.id);
|
||
const card = document.querySelector(`.session-card[data-id="${sessionId}"]`);
|
||
|
||
if (subscribedSessions.has(sessionId)) {
|
||
return;
|
||
}
|
||
|
||
if (expandedCardId === sessionId) {
|
||
expandedCardId = null;
|
||
card.classList.remove('expanded');
|
||
} else {
|
||
document.querySelectorAll('.session-card').forEach(c => c.classList.remove('expanded'));
|
||
expandedCardId = sessionId;
|
||
card.classList.add('expanded');
|
||
}
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll('.signup-form').forEach(form => {
|
||
form.addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
const sessionId = parseInt(this.dataset.id);
|
||
const nameInput = this.querySelector('input[name="name"]');
|
||
const emailInput = this.querySelector('input[name="email"]');
|
||
const submitBtn = this.querySelector('.btn-submit');
|
||
const successMsg = this.querySelector('.success-message');
|
||
|
||
if (!nameInput.value.trim() || !emailInput.value.trim()) {
|
||
return;
|
||
}
|
||
|
||
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||
if (!emailPattern.test(emailInput.value)) {
|
||
return;
|
||
}
|
||
|
||
submitBtn.disabled = true;
|
||
subscribedSessions.add(sessionId);
|
||
|
||
setTimeout(() => {
|
||
successMsg.style.display = 'block';
|
||
|
||
setTimeout(() => {
|
||
expandedCardId = null;
|
||
renderSessions();
|
||
}, 1500);
|
||
}, 300);
|
||
});
|
||
});
|
||
}
|
||
|
||
function renderPagination() {
|
||
const pagination = document.getElementById('pagination');
|
||
const totalPages = Math.ceil(sessions.length / 10);
|
||
|
||
if (!isExpanded || totalPages <= 1) {
|
||
pagination.style.display = 'none';
|
||
return;
|
||
}
|
||
|
||
pagination.style.display = 'flex';
|
||
pagination.innerHTML = Array.from({ length: totalPages }, (_, i) => i + 1)
|
||
.map(page => `
|
||
<li class="page-item ${page === currentPage ? 'active' : ''}">
|
||
<a class="page-link" href="#" data-page="${page}">${page}</a>
|
||
</li>
|
||
`).join('');
|
||
|
||
pagination.querySelectorAll('.page-link').forEach(link => {
|
||
link.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
currentPage = parseInt(this.dataset.page);
|
||
expandedCardId = null;
|
||
renderSessions();
|
||
renderPagination();
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
});
|
||
});
|
||
}
|
||
|
||
document.getElementById('toggleBtn').addEventListener('click', function() {
|
||
isExpanded = !isExpanded;
|
||
currentPage = 1;
|
||
expandedCardId = null;
|
||
|
||
const toggleText = document.getElementById('toggleText');
|
||
const toggleIcon = document.getElementById('toggleIcon');
|
||
|
||
if (isExpanded) {
|
||
toggleText.textContent = 'Show Less Sessions';
|
||
toggleIcon.textContent = '▲';
|
||
} else {
|
||
toggleText.textContent = 'Show More Sessions';
|
||
toggleIcon.textContent = '▼';
|
||
}
|
||
|
||
renderSessions();
|
||
renderPagination();
|
||
});
|
||
|
||
|
||
|
||
// Replay tabs click handler
|
||
document.querySelectorAll('.replay-tab').forEach(tab => {
|
||
tab.addEventListener('click', function() {
|
||
// Update active state
|
||
document.querySelectorAll('.replay-tab').forEach(t => t.classList.remove('is-active'));
|
||
this.classList.add('is-active');
|
||
|
||
// Update category filter
|
||
currentReplayCategory = this.dataset.category;
|
||
displayedReplayCount = 6;
|
||
|
||
// Re-render replays
|
||
renderReplays();
|
||
});
|
||
});
|
||
|
||
// Load More button handler
|
||
document.getElementById('loadMoreBtn').addEventListener('click', function() {
|
||
|
||
displayedReplayCount += 6;
|
||
renderReplays();
|
||
});
|
||
|
||
// Render highlights carousel
|
||
function renderHighlights() {
|
||
const track = $('#highlightsTrack');
|
||
|
||
const highlightsHTML = highlightsData.map(video => `
|
||
<div class="highlight-card" data-url="${video.url}">
|
||
<div class="highlight-thumb">
|
||
<div class="highlight-thumb-bg"></div>
|
||
<div class="highlight-play"></div>
|
||
<div class="highlight-duration">${video.duration}</div>
|
||
</div>
|
||
<div class="highlight-title">${video.title}</div>
|
||
</div>
|
||
`).join('');
|
||
|
||
track.html(highlightsHTML);
|
||
|
||
// Update progress bar
|
||
updateHighlightsProgress();
|
||
}
|
||
|
||
// Update progress bar based on scroll position
|
||
function updateHighlightsProgress() {
|
||
const track = document.getElementById('highlightsTrack');
|
||
const progressFill = document.getElementById('highlightsProgressFill');
|
||
|
||
const scrollLeft = track.scrollLeft;
|
||
const scrollWidth = track.scrollWidth;
|
||
const clientWidth = track.clientWidth;
|
||
const maxScroll = scrollWidth - clientWidth;
|
||
|
||
if (maxScroll <= 0) {
|
||
progressFill.style.width = '100%';
|
||
} else {
|
||
const progress = (scrollLeft / maxScroll) * 100;
|
||
progressFill.style.width = progress + '%';
|
||
}
|
||
}
|
||
|
||
// Highlights navigation
|
||
$('#highlightsPrev').on('click', function() {
|
||
const track = $('#highlightsTrack');
|
||
const scrollAmount = 440; // Approximately 2 cards width
|
||
const currentScroll = track.scrollLeft();
|
||
|
||
track.animate({
|
||
scrollLeft: Math.max(0, currentScroll - scrollAmount)
|
||
}, 250, function() {
|
||
updateHighlightsProgress();
|
||
});
|
||
});
|
||
|
||
$('#highlightsNext').on('click', function() {
|
||
const track = $('#highlightsTrack');
|
||
const scrollAmount = 440; // Approximately 2 cards width
|
||
const currentScroll = track.scrollLeft();
|
||
const maxScroll = track[0].scrollWidth - track[0].clientWidth;
|
||
|
||
track.animate({
|
||
scrollLeft: Math.min(maxScroll, currentScroll + scrollAmount)
|
||
}, 250, function() {
|
||
updateHighlightsProgress();
|
||
});
|
||
});
|
||
|
||
// Monitor scroll for progress bar updates
|
||
$('#highlightsTrack').on('scroll', function() {
|
||
updateHighlightsProgress();
|
||
});
|
||
|
||
// Click on highlight card to open video
|
||
$(document).on('click', '.highlight-card', function() {
|
||
const url = $(this).data('url');
|
||
window.open(url, '_blank', 'noopener,noreferrer');
|
||
});
|
||
|
||
async function onConfigChange(config) {
|
||
const titleText = config.main_title || defaultConfigLive.main_title;
|
||
const subtitleText = config.subtitle || defaultConfigLive.subtitle;
|
||
|
||
const parts = titleText.split(' ');
|
||
if (parts.length >= 2) {
|
||
document.getElementById('title-part1').textContent = parts.slice(0, -1).join(' ');
|
||
document.getElementById('title-part2').textContent = parts[parts.length - 1];
|
||
} else {
|
||
document.getElementById('title-part1').textContent = titleText;
|
||
document.getElementById('title-part2').textContent = '';
|
||
}
|
||
|
||
document.getElementById('subtitle').textContent = subtitleText;
|
||
}
|
||
|
||
if (window.elementSdk) {
|
||
window.elementSdk.init({
|
||
defaultConfigLive: defaultConfigLive,
|
||
onConfigChange: onConfigChange,
|
||
mapToCapabilities: (config) => ({
|
||
recolorables: [],
|
||
borderables: [],
|
||
fontEditable: undefined,
|
||
fontSizeable: undefined
|
||
}),
|
||
mapToEditPanelValues: (config) => new Map([
|
||
["main_title", config.main_title || defaultConfigLive.main_title],
|
||
["subtitle", config.subtitle || defaultConfigLive.subtitle]
|
||
])
|
||
});
|
||
}
|
||
|
||
renderSessions();
|
||
renderPagination();
|
||
renderReplays();
|
||
renderHighlights();
|
||
</script>
|
||
|
||
</html> |