How To Make Meditation App (Source Code)

Updated On Write a Comment on How To Make Meditation App (Source Code)

Mediation is rapidly emerging as a favoured approach for resolving various conflicts and disputes, thanks in part to its collaborative nature and focus on finding mutually agreeable solutions. In today’s digital age, the advent of technology has paved the way for virtual mediation, which can be seamlessly conducted through dedicated mediation applications. These innovative platforms offer significant advantages, including convenience, time efficiency, and cost-effectiveness, making thm ideal for individuals and businesses seeking mediation services without the typical hassles associated with traditional face-to-face meetings.

If you possess the technical expertise and creativity necessary to develop an application, you’re in a unique position to make a significant impact. Here a detailed, step-by-step guide on how to create a mediation app that not only meet user needs but also stands out in a competitive market

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Peaceful Meditation</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background: linear-gradient(45deg, #092E33, #01413d);
        }
        .meditation-container {
               background: rgba(255, 255, 255, 0.1); /* Light white with transparency */
backdrop-filter: blur(10px); /* Apply blur effect */
        border-radius: 20px;
        padding: 30px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
        max-width: 500px;
        text-align: center;
        }
        .meditation-icon {
            width: 100px;
            height: 100px;
            margin-bottom: 1rem;
            
        }
        h1 {
    color: white; /* White text */
    background: rgba(255, 255, 255, 0.1); /* Light white transparent background */
    backdrop-filter: blur(10px); /* Blur effect */
    padding: 10px 20px;
    border-radius: 10px;
}
        .timer {
            font-size: 3rem;
            margin: 1rem 0;
            color: #fff;
        }
        .controls {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 1rem;
        }
        button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #45a049;
        }
        #muteButton {
            background-color: #f44336;
        }
        #muteButton:hover {
            background-color: #d32f2f;
        }
        .meditation-summary {
            margin-top: 1rem;
            font-style: italic;
            color: #666;
        }
    </style>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.elementor-1911 .elementor-element.elementor-element-2e43d051::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--wpr-bg-c207f700-c058-4e66-bd27-657e91baf57f: url('https://notarena.com/wp-content/uploads/2024/10/BG.png');}.lazyloading{--wpr-bg-c2e64abd-fa25-49f5-b1a9-b81af9ab7f2f: url('https://notarena.com/wp-content/plugins/wp-smushit/app/assets/images/smush-placeholder.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".elementor-1911 .elementor-element.elementor-element-2e43d051, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-video-container, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-video-container, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-slideshow, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-slideshow, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-motion-effects-container > .elementor-motion-effects-layer","style":".elementor-1911 .elementor-element.elementor-element-2e43d051::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--wpr-bg-c207f700-c058-4e66-bd27-657e91baf57f: url('https:\/\/notarena.com\/wp-content\/uploads\/2024\/10\/BG.png');}","hash":"c207f700-c058-4e66-bd27-657e91baf57f","url":"https:\/\/notarena.com\/wp-content\/uploads\/2024\/10\/BG.png"},{"selector":".lazyloading","style":".lazyloading{--wpr-bg-c2e64abd-fa25-49f5-b1a9-b81af9ab7f2f: url('https:\/\/notarena.com\/wp-content\/plugins\/wp-smushit\/app\/assets\/images\/smush-placeholder.png');}","hash":"c2e64abd-fa25-49f5-b1a9-b81af9ab7f2f","url":"https:\/\/notarena.com\/wp-content\/plugins\/wp-smushit\/app\/assets\/images\/smush-placeholder.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
    <div class="meditation-container">
        <svg class="meditation-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12 11C10.9 11 10 11.9 10 13C10 14.1 10.9 15 12 15C13.1 15 14 14.1 14 13C14 11.9 13.1 11 12 11ZM12 6C9.79 6 8 7.79 8 10H10C10 8.9 10.9 8 12 8C13.1 8 14 8.9 14 10C14 10.55 13.78 11.05 13.41 11.41L11 13.83V16H13V14.83L14.59 13.24C15.5 12.34 16 11.22 16 10C16 7.79 14.21 6 12 6Z" fill="#4CAF50"/>
        </svg>
        <h1>Peaceful Meditation</h1>
        <div class="timer" id="timer">00:00</div>
        <div class="controls">
            <button id="startStopButton">Start</button>
            
        </div>
        <p class="meditation-summary" id="meditationSummary"></p>
    </div>

    <audio id="meditationAudio" loop>
        <source src="https://soundbible.com/mp3/Zen_Meditation_Relaxation_Music-Healing_Yoga_Meditation-1807823903.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>

    <script>
        const startStopButton = document.getElementById('startStopButton');
        const muteButton = document.getElementById('muteButton');
        const timer = document.getElementById('timer');
        const meditationSummary = document.getElementById('meditationSummary');
        const audio = document.getElementById('meditationAudio');

        let isRunning = false;
        let seconds = 0;
        let intervalId;

        startStopButton.addEventListener('click', toggleMeditation);
        muteButton.addEventListener('click', toggleMute);

        function toggleMeditation() {
            if (isRunning) {
                stopMeditation();
            } else {
                startMeditation();
            }
        }

        function startMeditation() {
            isRunning = true;
            startStopButton.textContent = 'Stop';
            audio.play();
            intervalId = setInterval(updateTimer, 1000);
        }

        function stopMeditation() {
            isRunning = false;
            startStopButton.textContent = 'Start';
            audio.pause();
            clearInterval(intervalId);
            updateMeditationSummary();
            seconds = 0;
            updateTimerDisplay();
        }

        function updateTimer() {
            seconds++;
            updateTimerDisplay();
        }

        function updateTimerDisplay() {
            const minutes = Math.floor(seconds / 60);
            const remainingSeconds = seconds % 60;
            timer.textContent = `${padZero(minutes)}:${padZero(remainingSeconds)}`;
        }

        function padZero(number) {
            return number.toString().padStart(2, '0');
        }

        function toggleMute() {
            audio.muted = !audio.muted;
            muteButton.textContent = audio.muted ? 'Unmute' : 'Mute';
        }

        function updateMeditationSummary() {
            const minutes = Math.floor(seconds / 60);
            const remainingSeconds = seconds % 60;
            meditationSummary.textContent = `Your meditation time: ${minutes} minute${minutes !== 1 ? 's' : ''} and ${remainingSeconds} second${remainingSeconds !== 1 ? 's' : ''}.`;
        }
    </script>
</body>
</html>
Share via

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

The Plugins

Send this to a friend