Meditation app

<!DOCTYPE html>

<head>

<title>Meditate & Study</title>

<style>

body {

font-family: 'Inter', sans-serif;

background-color: #f0f4f8; /* A light, calming background */

min-height: 100vh;

}

</style>

</head>

<h1 class="text-3xl md:text-4xl font-bold">Meditate & Study</h1>

<p class="text-sm md:text-base mt-1 opacity-90">Your guide to focus, calm, and clarity.</p>

</header>

</main>

</div>

// Data for all meditation exercises

const meditationData = {

'focus': {

icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-yellow-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 1 0 0 7H13M12 22V12M17 12H13M17 12a5 5 0 0 0-5 5v5"/></svg>`,

exercises: [

{ name: "Mindful Breathing", way: "Focus on the sensation of your breath as it enters and leaves your body.", time: "2-5 minutes, especially before studying." },

{ name: "The \"One-Word\" Mantra", way: "Choose a word like \"calm\" or \"focus\" and silently repeat it with each inhale and exhale.", time: "5 minutes, when you feel distracted." },

{ name: "Gazing Meditation (Trataka)", way: "Fix your gaze on a single point, like a candle flame or a dot on the wall, without blinking.", time: "3-5 minutes." },

{ name: "Counting Breaths", way: "Inhale, count \"1,\" exhale. Inhale, count \"2,\" exhale, and so on, up to 10. Then start over.", time: "5-10 minutes." },

{ name: "Sensory Scan", way: "Focus on one sense at a time—the feel of your clothes on your skin, the sounds around you, the smell of the room.", time: "5 minutes, during a study break." },

{ name: "\"Stop, Breathe, Think\"", way: "When you feel overwhelmed, stop what you're doing, take a deep breath, and acknowledge your thoughts without judgment.", time: "1-2 minutes, whenever you feel stressed." },

{ name: "Body Scan", way: "Systematically bring your attention to each part of your body, from your toes to the top of your head.", time: "10 minutes, before a long study session." },

{ name: "Focused Listening", way: "Close your eyes and listen intently to the sounds around you, noticing their source, distance, and quality.", time: "5 minutes." },

{ name: "Pomodoro Meditation", way: "After a 25-minute Pomodoro study session, use the 5-minute break for a short, focused meditation.", time: "5 minutes." },

{ name: "The \"Spotlight\" Technique", way: "Imagine a mental spotlight and shine it on the specific task you need to do, visualizing yourself doing it successfully.", time: "1-2 minutes, right before starting a difficult task." }

]

'stress': {

icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 1 0 10 10c0-5.52-4.48-10-10-10zM12 12v.01M16 12a4 4 0 0 1-8 0"/></svg>`,

exercises: [

{ name: "4-7-8 Breathing", way: "Inhale for 4 seconds, hold for 7, and exhale for 8.", time: "3-5 rounds, especially before a test or presentation." },

{ name: "The \"Unfurling\" Technique", way: "Imagine your stress and worries as a tightly balled-up piece of paper. As you exhale, visualize it slowly unfurling and flattening out.", time: "5 minutes." },

{ name: "Guided Imagery", way: "Listen to a guided meditation track that takes you to a peaceful, safe place in your mind.", time: "10-15 minutes, before sleep or when feeling overwhelmed." },

{ name: "Progressive Muscle Relaxation", way: "Tense a muscle group for 5 seconds, then relax it completely. Work your way from your feet to your head.", time: "10-15 minutes." },

{ name: "Loving-Kindness (Metta) Meditation", way: "Send wishes of peace, happiness, and health to yourself, loved ones, and even those you struggle with.", time: "5-10 minutes." },

{ name: "Journaling and Meditation", way: "Meditate for 5 minutes to calm your mind, then write down your thoughts and feelings without judgment.", time: "15 minutes." },

{ name: "The \"Bubble\" Technique", way: "Imagine each of your worries as a bubble. As you exhale, watch the bubbles float away and pop.", time: "5 minutes." },

{ name: "Humming Meditation", way: "Inhale deeply, then exhale with a long, continuous \"Mmmm\" sound. Feel the vibration in your chest and head.", time: "3 minutes." },

{ name: "Gratitude Meditation", way: "Close your eyes and mentally list three things you are grateful for, focusing on the positive emotions associated with each.", time: "5 minutes, morning or night." },

{ name: "Self-Compassion Meditation", way: "Gently place your hand on your heart and offer yourself kind, reassuring words.", time: "5 minutes, when you feel you have failed." }

]

'memory': {

icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-green-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3M7 10l5 5 5-5M12 15V3"/></svg>`,

exercises: [

{ name: "Review and Recall Meditation", way: "After a study session, close your eyes and mentally review the key concepts you just learned.", time: "5 minutes, immediately after studying." },

{ name: "Mind Palace Meditation", way: "Visualize a familiar space (your room, your house) and mentally place each piece of information you need to remember in a specific location within that space.", time: "10 minutes." },

{ name: "Conceptual Mapping", way: "In your mind, create a web or map connecting different topics and ideas you are studying.", time: "5-10 minutes." },

{ name: "\"Mindful\" Reading", way: "Instead of skimming, read a text and pause after each paragraph to mentally summarize what you just read.", time: "During reading." },

{ name: "The \"Information Stream\"", way: "Imagine information from your textbook or notes flowing from the pages into your mind, like a gentle stream.", time: "5 minutes." },

{ name: "Audio-Meditation Integration", way: "Record yourself reading important notes, then listen to the recording while you meditate.", time: "10 minutes." },

{ name: "\"Flashcard\" Visualization", way: "Mentally flip through flashcards, visualizing the question on one side and the answer on the other.", time: "5 minutes, before a test." },

{ name: "Pattern Recognition Meditation", way: "As you review a subject, look for repeating patterns, themes, or formulas and mentally highlight them.", time: "5 minutes." },

{ name: "Narrative Meditation", way: "Turn a series of facts or events into a mental story or a mini-movie.", time: "5-10 minutes." },

{ name: "Mindful Note-Taking", way: "During class, write your notes with full attention, noticing the feel of the pen and the shape of the letters.", time: "During class." }

]

'well-being': {

icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-purple-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 1 0 10 10c0-5.52-4.48-10-10-10zM8 13s1.5 2 4 2 4-2 4-2M10 9h.01M14 9h.01"/></svg>`,

exercises: [

{ name: "Sun Salutation (Suryanamaskar)", way: "A series of 12 yoga poses that warm and energize the body.", time: "10 minutes, in the morning." },

{ name: "Yoga Nidra (Yogic Sleep)", way: "A guided meditation that leads you into a state of deep relaxation, on the verge of sleep.", time: "20-30 minutes, before bed." },

{ name: "Walking Meditation", way: "Walk slowly, focusing on the sensation of your feet touching the ground, the movement of your legs, and the rhythm of your breath.", time: "10-15 minutes, outdoors." },

{ name: "Morning Visualization", way: "Before you get out of bed, visualize your day unfolding successfully, with you being calm and productive.", time: "5 minutes, right after waking up." },

{ name: "Sound Bath Meditation", way: "Lie down and listen to the sounds of singing bowls or gongs.", time: "15-20 minutes." },

{ name: "Nature Meditation", way: "Sit in a park or your garden and simply observe the nature around you—a leaf, a bird, the wind.", time: "10 minutes." },

{ name: "The \"Energy Ball\"", way: "Imagine a ball of warm, healing energy in your hands. Breathe it into your body, sending it to any area that feels tense or tired.", time: "5 minutes." },

{ name: "Emotional Release Meditation", way: "Acknowledge a difficult emotion like sadness or frustration, sit with it without judgment, and then let it go with your breath.", time: "5-10 minutes." },

{ name: "Creative Visualization", way: "Visualize yourself achieving a goal, like getting an A on a test or giving a great presentation.", time: "5 minutes." },

{ name: "The \"Empty Cup\" Technique", way: "Imagine your mind is a cup filled with thoughts. Tip the cup over and watch the thoughts spill out, leaving your mind empty and clear.", time: "2-3 minutes." }

]

'test': {

icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zM12 16a4 4 0 0 1-4-4V8M12 16a4 4 0 0 0 4-4V8"/></svg>`,

exercises: [

{ name: "Test-Day Breathing", way: "Use 4-7-8 breathing or box breathing right before you enter the exam hall.", time: "2-3 minutes." },

{ name: "Visualization of Success", way: "Picture yourself confidently sitting for the exam, knowing the answers, and receiving a great score.", time: "5 minutes, the night before or morning of a test." },

{ name: "The \"Blank Slate\"", way: "Before starting the test, take a few deep breaths and imagine your mind as a blank slate, ready to receive and process information.", time: "1 minute." },

{ name: "Mindful Question Reading", way: "Read each question slowly and mindfully, paying attention to every word and instruction.", time: "During the test." },

{ name: "\"Brain Dump\" Meditation", way: "When you get the exam paper, close your eyes for a moment and mentally \"dump\" all the key formulas or dates you have memorized onto a mental \"sheet\" of paper.", time: "1 minute." },

{ name: "The \"Pause and Reset\"", way: "If you get stuck on a question, take a 30-second pause. Close your eyes, take a deep breath, and then return to the question.", time: "As needed." },

{ name: "\"Floating\" Meditation", way: "Imagine your worries and stress during the test are \"floating\" around the room, separate from you. You are simply a vessel of knowledge.", time: "As needed." },

{ name: "Reaffirmation Meditation", way: "Silently repeat a positive affirmation, such as \"I am prepared,\" or \"I will do my best,\" during the test.", time: "As needed." },

{ name: "\"Test-Day\" Mantra", way: "Choose a single word like \"calm,\" \"focus,\" or \"easy\" and silently repeat it throughout the exam.", time: "Throughout the test." },

{ name: "Post-Test Release", way: "After the exam, take 5 minutes to meditate and release all thoughts about how you did. You did your best.", time: "5 minutes, immediately after the test." }

]

};

const contentDiv = document.getElementById('dynamic-content');

const modalOverlay = document.getElementById('modal-overlay');

const confirmYesBtn = document.getElementById('confirm-yes');

const confirmNoBtn = document.getElementById('confirm-no');

let currentMeditationTimer = null;

let isTimerRunning = false;

let remainingTime = 0;

let intervalId = null;

// Function to show the main home page with categories

function showHome() {

contentDiv.innerHTML = `

<h2 class="text-2xl md:text-3xl font-bold text-gray-800">Hello, Aspirant.</h2>

<p class="mt-2 text-gray-600">What do you need help with today?</p>

${meditationData.focus.icon}

<span class="mt-4 text-lg font-semibold text-gray-800">${meditationData.focus.name}</span>

</div>

</button>

${meditationData.stress.icon}

<span class="mt-4 text-lg font-semibold text-gray-800">${meditationData.stress.name}</span>

</div>

</button>

${meditationData.memory.icon}

<span class="mt-4 text-lg font-semibold text-gray-800">${meditationData.memory.name}</span>

</div>

</button>

${meditationData['well-being'].icon}

<span class="mt-4 text-lg font-semibold text-gray-800">${meditationData['well-being'].name}</span>

</div>

</button>

${meditationData.test.icon}

<span class="mt-4 text-lg font-semibold text-gray-800">${meditationData.test.name}</span>

</div>

</button>

</div>

}

// Function to show a list of exercises for a chosen category

function showCategory(categoryKey) {

const category = meditationData[categoryKey];

let listHtml = category.exercises.map((exercise, index) => `

<h3 class="text-lg font-medium text-gray-800">${exercise.name}</h3>

</button>

`).join('');

contentDiv.innerHTML = `

</svg>

Back

</button>

<h2 class="text-2xl font-bold text-gray-800 mb-4">${category.name}</h2>

${listHtml}

</div>

}

// Function to show details and start button for a specific meditation

function showMeditation(categoryKey, index) {

const exercise = meditationData[categoryKey].exercises[index];

contentDiv.innerHTML = `

</svg>

Back

</button>

<h2 class="text-2xl font-bold text-gray-800">${exercise.name}</h2>

<p class="mt-2 text-gray-600"><span class="font-semibold text-gray-700">Time:</span> ${exercise.time}</p>

<p class="mt-4 text-gray-600"><span class="font-semibold text-gray-700">Way:</span> ${exercise.way}</p>

Start Meditation

</button>

</div>

}

// Function to start a meditation session

function startMeditation(categoryKey, index) {

const exercise = meditationData[categoryKey].exercises[index];

const timeInMinutes = parseInt(exercise.time.match(/\d+/)[0]);

remainingTime = timeInMinutes * 60; // Convert to seconds

contentDiv.innerHTML = `

<h2 class="text-2xl font-bold text-gray-800">${exercise.name}</h2>

${Math.floor(remainingTime / 60)}:${('0' + (remainingTime % 60)).slice(-2)}

</div>

<p class="text-sm text-gray-500 mt-2">Instructions will guide you through this process.</p>

<button onclick="toggleMeditationPause()" id="pause-button" class="px-6 py-2 bg-yellow-500 text-white rounded-xl font-medium shadow-md hover:bg-yellow-600 transition-colors">Pause</button>

</div>

isTimerRunning = true;

updateTimerAndInstructions(exercise.way);

}

function updateTimerAndInstructions(instructions) {

const timerDisplay = document.getElementById('timer-display');

const instructionText = document.getElementById('instruction-text');

// Just display the instructions and let the timer count down

instructionText.textContent = instructions;

intervalId = setInterval(() => {

if (isTimerRunning) {

remainingTime--;

if (remainingTime <= 0) {

clearInterval(intervalId);

timerDisplay.textContent = "0:00";

instructionText.textContent = "Meditation complete. Great job!";

document.getElementById('pause-button').style.display = 'none';

} else {

const minutes = Math.floor(remainingTime / 60);

const seconds = ('0' + (remainingTime % 60)).slice(-2);

timerDisplay.textContent = `${minutes}:${seconds}`;

}

}, 1000);

}

function toggleMeditationPause() {

isTimerRunning = !isTimerRunning;

const pauseBtn = document.getElementById('pause-button');

if (isTimerRunning) {

pauseBtn.textContent = 'Pause';

pauseBtn.classList.remove('bg-green-500');

pauseBtn.classList.add('bg-yellow-500');

} else {

pauseBtn.textContent = 'Resume';

pauseBtn.classList.remove('bg-yellow-500');

pauseBtn.classList.add('bg-green-500');

}

// Show the exit confirmation modal

function showExitModal() {

modalOverlay.style.display = 'flex';

// Stop the timer while the modal is open

isTimerRunning = false;

}

// Hide the exit confirmation modal

function hideExitModal() {

modalOverlay.style.display = 'none';

// Resume the timer if it was running before the modal

isTimerRunning = true;

}

// Handle modal button clicks

confirmYesBtn.addEventListener('click', () => {

clearInterval(intervalId);

showHome();

hideExitModal();

});

confirmNoBtn.addEventListener('click', () => {

hideExitModal();

});

// Initial view load

window.onload = showHome;

</script>

</body>

</html>

Apps

Search This Blog

Meditation app

Comments

Post a Comment