NEW APP

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Moner Relief Pro - Complete Wellness App</title>
    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
    <style>
        :root {
            --primary: #4F46E5;
            --primary-light: #EEF2FF;
            --secondary: #10B981;
            --secondary-light: #ECFDF5;
            --bg: #F9FAFB;
            --card: #FFFFFF;
            --text-main: #1F2937;
            --text-sub: #6B7280;
            --danger: #EF4444;
        }

        body.dark-mode {
            --bg: #111827; --card: #1F2937; --text-main: #F9FAFB; --text-sub: #9CA3AF; --primary-light: #312E81; --secondary-light: #064E3B;
        }

        * { box-sizing: border-box; font-family: 'Segoe UI', Tahoma, sans-serif; transition: 0.3s; }
        body { margin: 0; background-color: var(--bg); color: var(--text-main); padding: 15px; padding-bottom: 50px; }
        .app-wrapper { max-width: 450px; margin: 0 auto; }

        .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .card { background: var(--card); border-radius: 24px; padding: 20px; margin-bottom: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); overflow: hidden;}
        
        h2 { font-size: 18px; margin: 0 0 15px; font-weight: 700; display: flex; align-items: center; gap: 8px;}

        /* Mood Selection */
        .moods-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .mood-item { border: 2px solid #eee; border-radius: 15px; padding: 12px; text-align: center; cursor: pointer; background: var(--card); }
        body.dark-mode .mood-item { border-color: #374151; }
        .mood-item.active { border-color: var(--primary); background: var(--primary); color: white; }
        .mood-emoji { font-size: 24px; display: block; }
        .mood-label { font-size: 12px; font-weight: bold; }

        /* Direction Boxes */
        .direction-box { display: none; padding: 15px; border-radius: 15px; margin-top: 15px; animation: fadeIn 0.5s; }
        .dont-box { background: #FEF2F2; border-left: 4px solid var(--danger); margin-bottom: 10px; }
        .do-box { background: var(--secondary-light); border-left: 4px solid var(--secondary); }
        .direction-box ul { padding-left: 20px; margin: 10px 0 0; font-size: 14px; color: var(--text-main); }

        /* Destructive Metaphors Section (New) */
        .destroy-container { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10px 0; }
        .lottie-wrap { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; }
        .burn-overlay-text { position: absolute; font-size: 12px; color: #555; max-width: 120px; word-wrap: break-word; opacity: 0.8; display: none;}

        /* Breathing UI */
        .breath-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 0; }
        .breath-circle-wrap { width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
        .breath-circle { 
            width: 90px; height: 90px; border-radius: 50%; background: var(--primary-light); 
            border: 2px solid var(--primary); display: flex; align-items: center; 
            justify-content: center; font-weight: bold; color: var(--primary); 
            transition: transform 1s ease, background 1s ease; 
        }
        .breath-circle.grow { transform: scale(1.4); background: #dbeafe; }
        .breath-circle.hold { transform: scale(1.4); background: #bfdbfe; }
        .breath-circle.shrink { transform: scale(0.9); background: #f0f9ff; }

        /* Journal & Saved Notes */
        textarea { width: 100%; min-height: 100px; border: 2px solid #eee; border-radius: 15px; padding: 12px; margin: 15px 0; background: var(--bg); color: var(--text-main); outline: none; resize: none; }
        .btn { width: 100%; border: none; border-radius: 12px; padding: 12px; font-weight: 600; cursor: pointer; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 8px;}
        .btn-primary { background: var(--primary); color: white; }
        .btn-secondary { background: var(--secondary); color: white; }
        .btn-danger { background: var(--danger); color: white; }
        
        .saved-item { background: var(--bg); padding: 15px; border-radius: 15px; margin-bottom: 10px; border: 1px solid #eee; position: relative; }
        body.dark-mode .saved-item { border-color: #374151; }
        .mood-tag { font-size: 11px; background: var(--primary-light); color: var(--primary); padding: 3px 8px; border-radius: 10px; font-weight: bold; margin-bottom: 5px; display: inline-block; }
        .time { font-size: 11px; color: var(--text-sub); margin-top: 8px; display: block; }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
        .fade-out { animation: fadeOut 1s forwards; }
        @keyframes fadeOut { to { opacity: 0; transform: scale(0.8) translateY(-20px); filter: blur(3px); } }
    </style>
</head>
<body>

<div class="app-wrapper">
    <div class="header">
        <h1 style="color:var(--primary); margin:0;">Moner Relief <small style="font-weight:400; font-size:12px;">PRO</small></h1>
        <button onclick="document.body.classList.toggle('dark-mode')" style="background:none; border:none; cursor:pointer; font-size:20px;">🌙</button>
    </div>

    <div class="card">
        <h2>আজ আপনার অনুভূতি কী?</h2>
        <div class="moods-grid">
            <div class="mood-item" onclick="setMood(this,'রাগ', '😡')"><span class="mood-emoji">😡</span><span class="mood-label">রাগ</span></div>
            <div class="mood-item" onclick="setMood(this,'কষ্ট', '😢')"><span class="mood-emoji">😢</span><span class="mood-label">কষ্ট</span></div>
            <div class="mood-item" onclick="setMood(this,'চাপ', '😰')"><span class="mood-emoji">😰</span><span class="mood-label">চাপ</span></div>
            <div class="mood-item" onclick="setMood(this,'হতাশা', '😞')"><span class="mood-emoji">😞</span><span class="mood-label">হতাশা</span></div>
            <div class="mood-item" onclick="setMood(this,'অপমান', '😤')"><span class="mood-emoji">😤</span><span class="mood-label">অপমান</span></div>
            <div class="mood-item" onclick="setMood(this,'একাকীত্ব', '😟')"><span class="mood-emoji">😟</span><span class="mood-label">একাকীত্ব</span></div>
        </div>

        <div id="dontBox" class="direction-box dont-box">
            <strong style="color:var(--danger)">🚫 আজ যা করবেন না:</strong>
            <ul id="dontList"></ul>
        </div>
        <div id="doBox" class="direction-box do-box">
            <strong style="color:var(--secondary)">✅ আজ যা করতে পারেন:</strong>
            <ul id="doList"></ul>
        </div>
    </div>

    <div id="angerSection" class="card" style="display:none; border-color: var(--danger);">
        <h2>🔨 রাগ ঝেড়ে ফেলুন (Smash It)</h2>
        <p style="font-size: 14px; color: var(--text-sub); margin-top: -10px;">খুব রাগ হচ্ছে? স্ক্রিনে প্লেটটিতে ট্যাপ করে ভেঙে ফেলুন। কল্পনায় ভাবুন আপনার রাগ ভেঙে যাচ্ছে।</p>
        <div class="destroy-container">
            <div class="lottie-wrap" onclick="smashPlate()">
                <lottie-player id="platePlayer" src="https://assets2.lottiefiles.com/packages/lf20_wst5m4pt.json"  background="transparent"  speed="1"  style="width: 250px; height: 250px;" ></lottie-player>
            </div>
            <button class="btn btn-danger" onclick="smashPlate()">🔨 প্লেটটি ভাঙুন</button>
        </div>
    </div>

    <div class="card">
        <h2>🫁 Breathing Reset (৪-৪-৬)</h2>
        <div class="breath-container">
            <div class="breath-circle-wrap">
                <div id="breathCircle" class="breath-circle">প্রস্তুত?</div>
            </div>
            <div id="breathMessage" style="font-size:14px; color:var(--text-sub);">শান্ত হয়ে বসুন।</div>
            <button class="btn btn-secondary" style="margin-top:15px;" onclick="startBreathing()">ব্যায়াম শুরু করুন</button>
        </div>
    </div>

    <div class="card">
        <h2>✍️ মনের কথা লিখে হালকা করুন</h2>
        <textarea id="journalText" placeholder="আজ কী হয়েছে? কে কষ্ট দিয়েছে? সব লিখে ফেলুন... কেউ দেখবে না।"></textarea>
        
        <div id="burnContainer" class="destroy-container" style="display:none;">
            <div class="lottie-wrap">
                <div id="burnTextOverlay" class="burn-overlay-text"></div>
                <lottie-player id="firePlayer" src="https://assets1.lottiefiles.com/packages/lf20_76biv48f.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"></lottie-player>
            </div>
            <p style="color: var(--danger); font-weight:bold;">চিন্তাগুলো পুড়ে ছাই হয়ে যাচ্ছে...</p>
        </div>

        <div id="journalBtns" style="display:flex; gap:8px;">
            <button class="btn btn-primary" onclick="saveNote()">💾 সেভ করুন</button>
            <button class="btn btn-danger" style="background: var(--danger);" onclick="burnNote()">🔥 কাগজটি পুড়িয়ে দিন</button>
        </div>
    </div>

    <div class="card">
        <h2>📚 পুরনো ডায়েরি</h2>
        <div id="savedNotes"></div>
    </div>
</div>

<script>
    let selectedMood = "";
    const moodData = {
        'রাগ': { dont: ["তৎক্ষণাৎ উত্তর দিবেন না।", "১-১০০ গুনুন।"], do: [" ঠান্ডা পানি খান।", "৫ মিনিট সরে যান।"] },
        'কষ্ট': { dont: ["নিজেকে বন্দি করবেন না।", "পুরনো ছবি দেখবেন না।"], do: ["বন্ধুকে ফোন দিন।", "ডায়েরি লিখুন।"] },
        'চাপ': { dont: ["একসাথে অনেক কাজ করবেন না।", "সোশ্যাল মিডিয়া দেখবেন না।"], do: ["জরুরি ১টি কাজ করুন।", "চোখ বন্ধ রাখুন।"] },
        'হতাশা': { dont: ["বড় সিদ্ধান্ত নিবেন না।", "বিছানায় শুয়ে থাকবেন না।"], do: ["বাইরে হাঁটুন।", "সাফল্য মনে করুন।"] },
        'অপমান': { dont: ["প্রতিশোধের চিন্তা করবেন না।", "চুপ করে সহ্য করবেন না।"], do: ["নিজের শক্তি লিখুন।", "ব্যস্ত থাকুন।"] },
        'একাকীত্ব': { dont: ["ভার্চুয়াল জগতে থাকবেন না।", "সবার থেকে লুকাবেন না।"], do: ["কাউকে ফোন দিন।", "শখের কাজ করুন।"] }
    };

    function setMood(el, mood, emoji) {
        selectedMood = mood;
        document.querySelectorAll('.mood-item').forEach(i => i.classList.remove('active'));
        el.classList.add('active');
        
        document.getElementById('dontBox').style.display = "block";
        document.getElementById('doBox').style.display = "block";
        document.getElementById('dontList').innerHTML = moodData[mood].dont.map(i => `<li>${i}</li>`).join("");
        document.getElementById('doList').innerHTML = moodData[mood].do.map(i => `<li>${i}</li>`).join("");

        // Show Anger Section if 'রাগ' is selected
        if(mood === 'রাগ') {
            document.getElementById('angerSection').style.display = 'block';
            document.getElementById('platePlayer').seek(0); // Reset animation
        } else {
            document.getElementById('angerSection').style.display = 'none';
        }
    }

    // New Function: Smash Plate with Hammer
    function smashPlate() {
        const player = document.getElementById('platePlayer');
        player.play(); // Play Lottie animation
        
        // Vibrate phone if supported (Global standard UX for destruction)
        if (navigator.vibrate) { navigator.vibrate(200); }

        setTimeout(() => {
            alert("আপনার রাগ ভেঙে গুঁড়ো হয়ে গেছে। শান্ত হোন।");
            player.stop(); // Stop/Reset
            document.getElementById('angerSection').style.display = 'none'; // Hide after smash
        }, 2000); // Duration of animation
    }

    // New Function: Burn Paper Note (Real Paper Effect)
    function burnNote() {
        const area = document.getElementById('journalText');
        const text = area.value.trim();
        if(!text) return;

        const burnContainer = document.getElementById('burnContainer');
        const journalBtns = document.getElementById('journalBtns');
        const overlayText = document.getElementById('burnTextOverlay');
        const firePlayer = document.getElementById('firePlayer');

        // Prepare UI
        journalBtns.style.display = 'none';
        area.style.display = 'none';
        burnContainer.style.display = 'flex';
        
        // Put textarea text into the fire animation wrap to make it look real
        overlayText.innerText = text.substring(0, 100) + (text.length > 100 ? '...' : '');
        overlayText.style.display = 'block';

        // Play Fire Animation
        firePlayer.play();
        
        // Animate text fading/burning away
        overlayText.classList.add('fade-out');

        setTimeout(() => {
            // Reset UI
            area.value = "";
            area.style.display = 'block';
            journalBtns.style.display = 'flex';
            burnContainer.style.display = 'none';
            overlayText.style.display = 'none';
            overlayText.classList.remove('fade-out');
            firePlayer.stop();

            alert("আপনার কষ্ট বা চিন্তাগুলো পুড়ে ছাই হয়ে গেছে। ওগুলো আর আপনার কাছে নেই।");
        }, 3500); // Duration of burn animation
    }

    // Breathing Logic (Kept Same)
    function startBreathing() {
        const circle = document.getElementById("breathCircle");
        const msg = document.getElementById("breathMessage");
        circle.className = "breath-circle";
        circle.innerHTML = "শুরু";
        setTimeout(() => { circle.className = "breath-circle grow"; circle.innerHTML = "নিন"; msg.innerHTML = "৪ সেকেন্ড শ্বাস নিন"; }, 1000);
        setTimeout(() => { circle.className = "breath-circle hold"; circle.innerHTML = "ধুন"; msg.innerHTML = "৪ সেকেন্ড ধরে রাখুন"; }, 5000);
        setTimeout(() => { circle.className = "breath-circle shrink"; circle.innerHTML = "ছাড়ুন"; msg.innerHTML = "৬ সেকেন্ড ধীরে ছাড়ুন"; }, 9000);
        setTimeout(() => { circle.className = "breath-circle"; circle.innerHTML = "ভালো"; msg.innerHTML = "এক রাউন্ড শেষ।"; }, 15000);
    }

    function saveNote() {
        const text = document.getElementById('journalText').value.trim();
        if(!text) return alert("কিছু লিখুন!");
        const notes = JSON.parse(localStorage.getItem('monerNotes') || '[]');
        notes.unshift({ mood: selectedMood || 'সাধারণ', text, time: new Date().toLocaleString('bn-BD') });
        localStorage.setItem('monerNotes', JSON.stringify(notes));
        document.getElementById('journalText').value = "";
        loadNotes();
        alert("নোট সেভ হয়েছে।");
    }

    function loadNotes() {
        const container = document.getElementById('savedNotes');
        const notes = JSON.parse(localStorage.getItem('monerNotes') || '[]');
        container.innerHTML = notes.slice(0, 5).map(n => `
            <div class="saved-item">
                <span class="mood-tag">${n.mood}</span>
                <p style="margin:5px 0; font-size:14px;">${n.text}</p>
                <span class="time">${n.time}</span>
            </div>
        `).join("");
    }

    window.onload = loadNotes;
</script>

</body>
</html>
Moner Relief Pro – Complete Wellness App
আজ আপনার অনুভূতি কী?

😡রাগ
😢কষ্ট
😰চাপ
😞হতাশা
😤অপমান
😟একাকীত্ব
🚫 আজ যা করবেন না:
✅ আজ যা করতে পারেন:
🫁 Breathing Reset (৪-৪-৬)

প্রস্তুত?
শান্ত হয়ে বসুন।
Moner Relief PRO

আজ আপনার অনুভূতি কী?

🔨 রাগ ঝেড়ে ফেলুন (Smash It)

🫁 Breathing Reset (৪-৪-৬)

✍️ মনের কথা লিখে হালকা করুন

📚 পুরনো ডায়েরি
