| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Shastra Charcha</title> |
| <link rel="stylesheet" href="sastra_style.css"> |
| |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> |
| </head> |
| <body> |
| <header> |
| <h1>Shastra Charcha</h1> |
| <button id="menuButton" class="menu-button"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </header> |
| <div class="container"> |
| <div class="sidebar" id="sidebar"> |
| <button onclick="window.location.href='index.html'" class="home-button"> |
| <i class="fas fa-home"></i> Home |
| </button> |
| <h2>Shastra Collection</h2> |
| <ul id="shastraList"> |
| |
| </ul> |
| </div> |
| |
| <div class="main"> |
| <h2 id="chapterTitle">Select a chapter to view details.</h2> |
| <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> |
| <audio id="audioPlayer" controls> |
| Your browser does not support the audio element. |
| </audio> |
| </div> |
| </div> |
|
|
| <div class="video-block"> |
| <h3>Chapter Meaning</h3> |
| <iframe id="videoPlayer" width="100%" height="315" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> |
| </div> |
| </div> |
| <div class="transcript-block"> |
| <h3>Video Transcript</h3> |
| <p id="transcript">Transcript will appear here once a chapter is selected.</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <script src="sastra_script.js" defer></script> |
| </body> |
| </html> |
|
|
