ras / index.html
bhagvat's picture
Update index.html
ae16883 verified
Raw
History Blame Contribute Delete
13.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="BhagvatRas - Explore Bhagwat Mahapuran Charcha, spiritual texts, and discussions about Bhagwat Prapti. Engage with shloks, videos, transcripts, and more.">
<meta name="keywords" content="BhagvatRas, Bhagwat Charcha, spiritual discussions, Bhagwat Prapti, shloks, Hinduism, spiritual texts, bhagvat Mahapuran, Shrimad Bhagwat Mahapuran, 18000 sloke of bhagvat, Bhagavata Purana, Srimad Bhagavat Katha, bhagvat Mahapuran shloks, Bhagwat Mahapuran shloks">
<meta name="author" content="BhagvatRas">
<!-- Open Graph Meta Tags for Social Media Sharing -->
<meta property="og:title" content="BhagvatRas - Spiritual Insights and Discussions">
<meta property="og:description" content="BhagvatRas - Explore Bhagwat Mahapuran Charcha, spiritual texts, and discussions about Bhagwat Prapti. Engage with shloks, videos, transcripts, and more.">
<meta property="og:image" content="https://bhagvat-ras.static.hf.space/icon_bhagvatras1.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://bhagvat-ras.static.hf.space">
<meta property="og:type" content="website">
<title>BhagvatRas - Spiritual Insights and Discussions</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<link rel="manifest" href="manifest.json">
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/jwt-decode@3.1.2/build/jwt-decode.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<meta name="google-site-verification" content="Iwql3dDm8tRl73USshmFJaWpMhmnQHVfOKvVsVJi6ZU" />
</head>
<body>
<div id="loading-container" class="loading-container">
<div id="loading-bar" class="loading-bar"></div>
<p id="loading-text" class="loading-text">Loading, please wait...</p>
</div>
<header>
<h1 style="display: flex; align-items: center;">
<img src="icon_bhagvatras1.png" alt="BhagvatRas Logo"
style="height: 40px; margin-right: 10px; cursor: pointer;"
onclick="shareApp()">
BhagvatRas
</h1>
<!-- Header Container -->
<div class="header">
<!-- Mobile Menu Button (Left Side) -->
<button id="menuButton" class="mobile-menu-button">
<i class="fas fa-bars"></i> <!-- Stylish Menu Icon -->
</button>
<!-- Mobile Dropdown Menu (Initially Hidden) -->
<div id="mobileMenu" class="mobile-menu">
<div id="user-info-mobile" style="display: none;">
<button id="user-button-mobile" class="menu-item">
<i class="fas fa-user"></i> <span id="user-initials"></span>
</button>
<div id="user-dropdown-mobile" class="dropdown-menu">
<p id="user-name-mobile"></p>
<button id="logout-button-mobile" class="menu-item">
<i class="fas fa-sign-out-alt"></i> LogOut
</button>
</div>
</div>
<button class="menu-item" id="loginButton" onclick="window.location.href='login.html'">
<i class="fas fa-user-circle"></i> Login
</button>
<button id="voiceSettingsBtnMobile" class="menu-item" type="button">
<i class="fas fa-microphone"></i> Voice settings
</button>
<button class="menu-item" id="donateButton">
<i class="fas fa-donate"></i> Donate
</button>
<button class="menu-item" id="botButton" onclick="window.location.href='bot_index.html'">
<i class="fas fa-robot"></i> AI Bot
</button>
<button class="menu-item" onclick="checkLoginAndOpenSatsang()">
<i class="fas fa-headphones"></i> Satsang
</button>
<button class="menu-item" id="japaCounter" onclick="window.location.href='japa_counter.html'">
<i class="fas fa-robot"></i> Japa Counter
</button>
</div>
<!-- Desktop Header Buttons (Visible Only on PC) -->
<div class="header-buttons">
<div id="user-info" style="display: none;">
<button id="user-button" class="header-button" data-tooltip="User Info">
<!-- User Initials -->
</button>
<div id="user-dropdown" class="dropdown-menu" style="display: none;">
<p id="user-name"></p>
<button id="logout-button" class="header-button" data-tooltip="Logout">
<i class="fas fa-sign-out-alt"></i> LogOut
</button>
</div>
</div>
<div id="login-link" style="display: inline;">
<button class="header-button" id="loginButton" data-tooltip="Login" onclick="window.location.href='login.html'">
<i class="fas fa-user-circle"></i>
</button>
</div>
<button id="voiceSettingsBtn" class="menu-item" type="button" title="Voice settings">
<i class="fas fa-microphone"></i>
</button>
<button class="header-button" id="donateButton" data-tooltip="Donate">
<i class="fas fa-donate"></i>
</button>
<button class="header-button" id="botButton" data-tooltip="AI Bot" onclick="window.location.href='bot_index.html'">
<i class="fas fa-robot"></i>
</button>
<button class="header-button" data-tooltip="Satsang" onclick="checkLoginAndOpenSatsang()">
<i class="fas fa-headphones"></i>
</button>
<button class="header-button" id="botButton" data-tooltip="Japa Counter" onclick="window.location.href='japa_counter.html'">
<i class="fas fa-praying-hands"></i>
</button>
</div>
</div>
<!-- Modal for Donate details -->
<div id="donateModal" class="donate-modal">
<div class="donate-modal-content">
<span class="close">&times;</span>
<h2>Donate to Support Us</h2>
<p>Your generous support helps us continue our work. Please fill in your details and select an amount:</p>
<!-- User Information -->
<form id="donateForm">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required placeholder="Your full name">
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required placeholder="Your email address">
<!-- Donation Amount Selection -->
<h3>Choose Donation Amount:</h3>
<div id="amountOptions">
<button type="button" class="amount-btn" data-amount="100">₹100</button>
<button type="button" class="amount-btn" data-amount="200">₹200</button>
<button type="button" class="amount-btn" data-amount="300">₹300</button>
<button type="button" class="amount-btn" data-amount="500">₹500</button>
<button type="button" class="amount-btn" data-amount="1000">₹1000</button>
</div>
<input type="number" id="customAmount" name="amount" placeholder="Or enter custom amount">
<!-- Payment Options -->
<h3>Payment Methods:</h3>
<div id="paymentMethods">
<button type="button" id="openUpiApp">Pay via UPI</button>
<!-- <button type="submit" id="payWithCard">Pay via Debit/Credit Card</button> -->
</div>
</form>
</div>
</div>
</header>
<div class="overlay"></div>
<div class="container">
<div class="sidebar" id="sidebar">
<!-- <h2>Shastra Collection</h2> -->
<h2 id="shastraHeader">📚 Shastra Collection</h2>
<ul id="shastraList">
<!-- Shastra groups and chapters will be dynamically loaded here -->
</ul>
</div>
<div class="main">
<h2 id="chapterTitle">Select a chapter to view details.</h2>
<!-- Global Audio Player -->
<div class="audio-container">
<audio id="audioPlayer" controls>
Your browser does not support the audio element.
</audio>
</div>
<div class="content-blocks">
<div class="sloke-block">
<h3>Slokes</h3>
<div id="slokeContent">Select a chapter to view slokes.</div>
<div class="audio-container">
<button id="playAllButton" class="play-all-button">Play All</button> <!-- Play All button -->
<!-- <audio id="audioPlayer" controls>
Your browser does not support the audio element.
</audio> -->
</div>
</div>
<div class="video-block">
<h3>Bhagvat Charcha By Sri Hit Premanand Govinda Saran Ji Maharaj</h3>
<!-- <iframe id="videoPlayer" width="100%" height="315" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> -->
<div id="videoPlayer" style="width: 100%; height: 315px;"></div>
</div>
</div>
<div class="transcript-block">
<h3>Chapter Meaning</h3>
<div id="transcript-content">Transcript will appear here once a chapter is selected.</div>
<!-- <p id="transcript">Transcript will appear here once a chapter is selected.</p>
</div> -->
<!-- <div class="transcript-footer"> -->
<div class="audio-container">
<button id="playTranscriptButton" class="play-all-button">Play Transcript</button>
<!-- <audio id="audioPlayer" controls>
Your browser does not support the audio element.
</audio> -->
</div>
</div>
</div>
</div>
<button id="installAppButton" style="display:none;">
📱 Install BhagvatRas App for a better experience
</button>
<!-- Next Chapter button -->
<div class="next-chapter-container">
<button id="nextChapterButton" class="next-chapter-btn">
<i class="fas fa-arrow-right"></i> <!-- Next Icon -->
</button>
</div>
<!-- JavaScript -->
<script src="script.js" defer></script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "BhagvatRas",
"url": "https://bhagvat-ras.static.hf.space",
"description": "Explore Bhagwat Charcha and spiritual texts in BhagvatRas.",
"publisher": {
"@type": "Organization",
"name": "BhagvatRas Team"
}
}
</script>
<!-- Footer Section -->
<footer>
<div class="footer-content">
<p><strong>BhagvatRas</strong> — A Spiritual Gateway to the Bhagwat Mahapuran</p>
<p>
<i class="fas fa-envelope" style="color:#d93025;"></i>
<a href="mailto:bhagvatras@gmail.com" style="margin-left: 6px;">Contact Us</a>
</p>
</div>
</footer>
<div id="voiceModal" class="modal" aria-hidden="true">
<div class="modal-content">
<span class="modal-close" id="voiceModalClose">&times;</span>
<h3>Voice settings</h3>
<div class="field">
<label for="voiceLang">Language</label>
<select id="voiceLang">
<option value="sa-IN">Sanskrit (sa‑IN)</option>
<option value="hi-IN">Hindi (hi‑IN)</option>
<option value="en-IN">English (en‑IN)</option>
</select>
</div>
<div class="field">
<label for="voiceSelect">Voice</label>
<select id="voiceSelect"></select>
<button id="voiceSample" type="button">▶ Sample</button>
</div>
<div class="row">
<label>Rate <input id="voiceRate" type="range" min="0.6" max="1.2" step="0.05"></label>
<label>Pitch <input id="voicePitch" type="range" min="0.7" max="1.2" step="0.05"></label>
</div>
<div class="actions">
<button id="voiceSave" type="button">Save</button>
<button id="voiceReset" type="button">Reset</button>
</div>
</div>
</div>
<!-- <footer>
<div class="footer-content">
<p>BhagvatRas.</p>
<p>If you have any questions, feel free to <a href="mailto:bhagvatras@gmail.com">Contact Us</a> via email.</p>
</div>
</footer> -->
</body>
</html>