make this  *<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MoodLift</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
</head>
<body class="bg-gray-100 h-screen flex items-center justify-center">
    <div class="bg-white p-8 rounded-lg shadow-md w-1/2">
        <h1 class="text-3xl text-gray-700 font-bold mb-4">MoodLift</h1>
        <p class="text-lg text-gray-600 mb-6">Get your daily dose of motivation and validation!</p>
        <button id="generate-phrase" class="w-full bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded-lg">Get Your Daily Lift</button>
        <div id="phrase-container" class="mt-6 text-lg text-gray-600"></div>
        <button id="show-knowledge-base" class="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded-lg mt-4 flex justify-center items-center">
            <i class="fa-solid fa-book fa-lg"></i>
        </button>
        <div id="knowledge-base" class="mt-6 text-lg text-gray-600 hidden">
            <h2 class="text-xl text-gray-700 font-bold mb-2">MoodBoard</h2>
            <ul id="knowledge-base-list" class="list-disc list-inside">
                <!-- Phrases will be generated here -->
            </ul>
            <button id="add-phrase" class="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded-lg mt-4">Add Your Own Vibes</button>
            <div id="add-phrase-form" class="hidden mt-6">
                <input id="new-phrase" type="text" class="w-full p-2 border border-gray-400 rounded-lg" placeholder="Enter a new phrase that lifts your mood">
                <button id="save-phrase" class="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded-lg mt-2">Save Your Vibes</button>
            </div>
        </div>
        <div class="mt-6">
            <select id="label-select" class="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded-lg">
                <option value="validated">Validated</option>
                <option value="motivated">Motivated</option>
                <option value="inspired">Inspired</option>
            </select>
        </div>
    </div>

    <script>
        let phrases = [
            "You are enough, just as you are.",
            "Believe in yourself and you'll be unstoppable.",
            "Your worth is not defined by your productivity.",
            "You are doing the best you can, and that's something to be proud of.",
            "It's okay to not be okay, and it's okay to ask for help.",
            "You are strong, capable, and resilient.",
            "Your feelings are valid, and it's okay to feel them.",
            "You are not alone, and you are loved.",
            "You are doing better than you think you are.",
            "Keep going, even when it's hard.",
        ];

        const generatePhraseButton = document.getElementById('generate-phrase');
        const phraseContainer = document.getElementById('phrase-container');
        const showKnowledgeBaseButton = document.getElementById('show-knowledge-base');
        const knowledgeBase = document.getElementById('knowledge-base');
        const knowledgeBaseList = document.getElementById('knowledge-base-list');
        const addPhraseButton = document.getElementById('add-phrase');
        const addPhraseForm = document.getElementById('add-phrase-form');
        const newPhraseInput = document.getElementById('new-phrase');
        const savePhraseButton = document.getElementById('save-phrase');

        // Initialize base
        phrases.forEach(phrase => {
            const li = document.createElement('li');
            li.textContent = phrase;
            knowledgeBaseList.appendChild(li);
        });

        generatePhraseButton.addEventListener('click', () => {
            const randomPhrase = phrases[Math.floor(Math.random() * phrases.length)];
            phraseContainer.innerText = randomPhrase;
        });

        showKnowledgeBaseButton.addEventListener('click', () => {
            if (knowledgeBase.classList.contains('hidden')) {
                knowledgeBase.classList.remove('hidden');
                showKnowledgeBaseButton.innerHTML = `
                    <i class="fa-solid fa-book fa-lg"></i>
                `;
            } else {
                knowledgeBase.classList.add('hidden');
                showKnowledgeBaseButton.innerHTML = `
                    <i class="fa-solid fa-book fa-lg"></i>
                `;
            }
        });

        addPhraseButton.addEventListener('click', () => {
            if (addPhraseForm.classList.contains('hidden')) {
                addPhraseForm.classList.remove('hidden');
                addPhraseButton.innerText = 'Cancel';
            } else {
                addPhraseForm.classList.add('hidden');
                addPhraseButton.innerText = 'Add Your Own Vibes';
            }
        });

        savePhraseButton.addEventListener('click', () => {
            const newPhrase = newPhraseInput.value;
            if (newPhrase !== '') {
                phrases.push(newPhrase);
                const li = document.createElement('li');
                li.textContent = newPhrase;
                knowledgeBaseList.appendChild(li);
                newPhraseInput.value = '';
                addPhraseForm.classList.add('hidden');
                addPhraseButton.innerText = 'Add Your Own Vibes';
            }
        });
    </script>
</body>
</html>