328 lines
9.6 KiB
HTML
328 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Path of Knowledge</title>
|
|
<style>
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f4f4f9;
|
|
color: #333;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
h1 {
|
|
margin: 0;
|
|
padding: 15px;
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
text-align: center;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.container {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
.sections {
|
|
flex: 1;
|
|
background-color: #ffffff;
|
|
padding: 10px;
|
|
border-right: 1px solid #ddd;
|
|
overflow-y: auto;
|
|
}
|
|
.contents {
|
|
flex: 2;
|
|
background-color: #ffffff;
|
|
padding: 10px;
|
|
overflow-y: auto;
|
|
}
|
|
.section, .subsection {
|
|
margin: 10px 0;
|
|
padding: 10px;
|
|
background-color: #f4f4f9;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.section:hover, .subsection:hover, .subsection.active {
|
|
background-color: #e6e6e6;
|
|
border-color: #4CAF50;
|
|
color: #4CAF50;
|
|
}
|
|
.section.active {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
border-color: #4CAF50;
|
|
}
|
|
.collapse-content {
|
|
display: none;
|
|
margin-left: 15px;
|
|
}
|
|
.contact-info {
|
|
padding: 10px;
|
|
background-color: #333;
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
.contact-info a {
|
|
color: #4CAF50;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
.contact-info a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
flex-direction: column;
|
|
}
|
|
.sections, .contents {
|
|
border: none;
|
|
flex: none;
|
|
overflow-y: auto;
|
|
padding: 10px;
|
|
}
|
|
h1 {
|
|
font-size: 18px;
|
|
padding: 10px;
|
|
}
|
|
.section, .subsection {
|
|
padding: 8px;
|
|
}
|
|
.contact-info {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* new */
|
|
|
|
.sections, .contents {
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */
|
|
scrollbar-width: thin; /* Firefox */
|
|
scrollbar-color: #4CAF50 #f4f4f9; /* Custom scrollbar colors */
|
|
}
|
|
|
|
/* Custom scrollbar styles for Webkit browsers */
|
|
.sections::-webkit-scrollbar, .contents::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.sections::-webkit-scrollbar-thumb, .contents::-webkit-scrollbar-thumb {
|
|
background-color: #4CAF50;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.sections::-webkit-scrollbar-track, .contents::-webkit-scrollbar-track {
|
|
background-color: #f4f4f9;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.sections, .contents {
|
|
overflow-y: auto;
|
|
max-height: 50vh; /* Prevents overflow beyond the screen */
|
|
}
|
|
}
|
|
|
|
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f4f4f9;
|
|
color: #333;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh; /* Ensures the body spans the full height of the viewport */
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sections, .contents {
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
padding: 10px;
|
|
}
|
|
|
|
.sections {
|
|
flex: 1;
|
|
border-right: 1px solid #ddd;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.contents {
|
|
flex: 2;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
/* Footer Styling */
|
|
.contact-info {
|
|
padding: 10px;
|
|
background-color: #333;
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Ensures the content container can grow and allows scrolling */
|
|
html, body {
|
|
height: auto; /* Allow body height to grow with content */
|
|
overflow-y: auto;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
flex-direction: column;
|
|
}
|
|
.sections, .contents {
|
|
padding: 10px;
|
|
}
|
|
h1 {
|
|
font-size: 18px;
|
|
padding: 10px;
|
|
}
|
|
.contact-info {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Path of Knowledge</h1>
|
|
<div class="container">
|
|
<div class="sections">
|
|
<!-- Section 1 -->
|
|
<div class="section" onclick="toggleCollapse('collapse1', this)">
|
|
Path of Knowledge
|
|
</div>
|
|
<div id="collapse1" class="collapse-content">
|
|
<div class="subsection" onclick="selectSubsection(this, 'https://knowledge.krrishg.com/path-of-knowledge.html')">Introduction</div>
|
|
<div class="subsection" onclick="selectSubsection(this, 'https://knowledge.krrishg.com/steps.html')">Steps</div>
|
|
</div>
|
|
|
|
<!-- Section 2 -->
|
|
<div class="section" onclick="toggleCollapse('collapse2', this)">
|
|
Listening
|
|
</div>
|
|
<div id="collapse2" class="collapse-content">
|
|
<div class="subsection" onclick="selectSubsection(this, 'https://knowledge.krrishg.com/essential-knowledge.html')">Essential Knowledge</div>
|
|
<div class="subsection" onclick="selectSubsection(this, 'https://knowledge.krrishg.com/knowledge-and-information.html')">Knowledge and Information</div>
|
|
<div class="subsection" onclick="selectSubsection(this, 'https://knowledge.krrishg.com/truth-and-its-criteria.html')">Truth and it's Criteria</div>
|
|
<div class="subsection" onclick="selectSubsection(this, 'https://knowledge.krrishg.com/questions.html')">Questions</div>
|
|
<div class="subsection" onclick="selectSubsection(this, 'https://knowledge.krrishg.com/existence.html')">Existence</div>
|
|
<div class="subsection" onclick="selectSubsection(this, 'https://knowledge.krrishg.com/experiencer.html')">Experiencer</div>
|
|
<div class="subsection" onclick="selectSubsection(this, 'https://knowledge.krrishg.com/self-realization.html')">Self Realization</div>
|
|
<div class="subsection" onclick="selectSubsection(this, 'https://knowledge.krrishg.com/experience.html')">Experience</div>
|
|
<div class="subsection" onclick="selectSubsection(this, 'https://knowledge.krrishg.com/oneness.html')">Oneness</div>
|
|
</div>
|
|
|
|
<!-- Section 3 -->
|
|
<div class="section" onclick="toggleCollapse('collapse3', this)">
|
|
Contemplation
|
|
</div>
|
|
<div id="collapse3" class="collapse-content">
|
|
<div class="subsection" onclick="selectSubsection(this, 'https://knowledge.krrishg.com/what-is-contemplation.html')">What is Contemplation?</div>
|
|
<div class="subsection" onclick="selectSubsection(this, 'https://knowledge.krrishg.com/methods-of-contemplation.html')">Methods of Contemplation</div>
|
|
</div>
|
|
|
|
<!-- Section 4 -->
|
|
<div class="section" onclick="toggleCollapse('collapse4', this)">
|
|
Abidance
|
|
</div>
|
|
<div id="collapse4" class="collapse-content">
|
|
<div class="subsection" onclick="selectSubsection(this, 'https://knowledge.krrishg.com/abidance-practices.html')">Abidance Practices</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contents on the right -->
|
|
<div class="contents" id="contentArea">
|
|
<h2>Content Area</h2>
|
|
<p>Click on a section or subsection to display content here.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contact Information -->
|
|
<div class="contact-info">
|
|
<p>Contact Us:</p>
|
|
<p>Email: <a href="mailto:krrishg@protonmail.com">krrishg@protonmail.com</a></p>
|
|
<p>Telegram: <a href="https://t.me/krrishg" target="_blank">t.me/krrishg</a></p>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
// Automatically toggle the first section
|
|
const firstSection = document.querySelector(".section");
|
|
if (firstSection) {
|
|
toggleCollapse("collapse1", firstSection);
|
|
}
|
|
|
|
// Automatically select the first subsection of the first section
|
|
const firstSubsection = document.querySelector("#collapse1 .subsection");
|
|
if (firstSubsection) {
|
|
firstSubsection.classList.add("active"); // Highlight the selected subsection
|
|
selectSubsection(firstSubsection, 'https://knowledge.krrishg.com/path-of-knowledge.html')
|
|
}
|
|
});
|
|
|
|
function selectSubsection(subsection, file) {
|
|
// Remove the 'active' class from all subsections
|
|
const allSubsections = document.querySelectorAll(".subsection");
|
|
allSubsections.forEach(sub => sub.classList.remove("active"));
|
|
|
|
// Add the 'active' class to the clicked subsection
|
|
subsection.classList.add("active");
|
|
|
|
// Load the content for the selected subsection
|
|
// const file = subsection.getAttribute("onclick").match(/'(.*?)'/)[1]; // Extract the URL
|
|
loadContent(file);
|
|
}
|
|
|
|
function toggleCollapse(id, element) {
|
|
const content = document.getElementById(id);
|
|
const isVisible = content.style.display === 'block';
|
|
content.style.display = isVisible ? 'none' : 'block';
|
|
element.classList.toggle('active', !isVisible);
|
|
}
|
|
|
|
function loadContent(file) {
|
|
fetch(file)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
return response.text();
|
|
})
|
|
.then(data => {
|
|
document.getElementById('contentArea').innerHTML = data;
|
|
})
|
|
.catch(error => {
|
|
document.getElementById('contentArea').innerHTML = '<p>Error loading content. Please try again later.</p>';
|
|
console.error('There was a problem with the fetch operation:', error);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
|