Spaces:
Running
Running
| <html><head><base href="https://websim.ai/motivationalmuse" /><title>Motivational Muse - Personalized Inspiration</title><style> | |
| body { | |
| font-family: 'Lato', Arial, sans-serif; | |
| line-height: 1.6; | |
| color: #333; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| min-height: 100vh; | |
| } | |
| h1, h2 { | |
| color: #2c3e50; | |
| } | |
| h1 { | |
| text-align: center; | |
| font-size: 2.5em; | |
| margin-bottom: 20px; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.1); | |
| } | |
| .container { | |
| background-color: #ffffff; | |
| border-radius: 15px; | |
| padding: 30px; | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| textarea, input[type="text"] { | |
| width: 100%; | |
| padding: 10px; | |
| margin-bottom: 20px; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| font-size: 16px; | |
| } | |
| button { | |
| background-color: #3498db; | |
| color: white; | |
| border: none; | |
| 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, transform 0.1s; | |
| } | |
| button:hover { | |
| background-color: #2980b9; | |
| transform: scale(1.05); | |
| } | |
| #output { | |
| margin-top: 20px; | |
| padding: 20px; | |
| background-color: #f9f9f9; | |
| border-left: 5px solid #3498db; | |
| border-radius: 5px; | |
| font-style: italic; | |
| font-size: 18px; | |
| line-height: 1.8; | |
| text-align: center; | |
| } | |
| .footer { | |
| margin-top: 30px; | |
| text-align: center; | |
| font-size: 0.9em; | |
| color: #7f8c8d; | |
| } | |
| #moodSelect, #goalInput { | |
| margin-bottom: 10px; | |
| } | |
| .sparkle { | |
| display: inline-block; | |
| animation: sparkle 1.5s infinite alternate; | |
| } | |
| @keyframes sparkle { | |
| 0% { transform: scale(1); opacity: 1; } | |
| 100% { transform: scale(1.2); opacity: 0.8; } | |
| } | |
| </style></head><body> | |
| <div class="container"> | |
| <h1><span class="sparkle">✨</span> Motivational Muse <span class="sparkle">✨</span></h1> | |
| <p>Welcome to Motivational Muse, your personal wellspring of inspiration and encouragement. Let us tailor a motivational message just for you, based on your current mood and goals. Remember, every journey begins with a single step, and we're here to help you take that step with confidence!</p> | |
| <h2>How are you feeling today?</h2> | |
| <select id="moodSelect"> | |
| <option value="excited">Excited</option> | |
| <option value="determined">Determined</option> | |
| <option value="anxious">Anxious</option> | |
| <option value="tired">Tired</option> | |
| <option value="doubtful">Doubtful</option> | |
| </select> | |
| <h2>What's your current goal or challenge?</h2> | |
| <input type="text" id="goalInput" placeholder="Enter your goal here..."> | |
| <button onclick="generateMotivation()">Inspire Me!</button> | |
| <div id="output"></div> | |
| <h2>Daily Affirmation:</h2> | |
| <p id="dailyAffirmation"></p> | |
| <h2>Why Positive Motivation Matters:</h2> | |
| <ul> | |
| <li>Boosts self-confidence and self-esteem</li> | |
| <li>Increases resilience in face of challenges</li> | |
| <li>Improves focus and productivity</li> | |
| <li>Enhances overall well-being and mental health</li> | |
| <li>Helps in achieving personal and professional goals</li> | |
| </ul> | |
| </div> | |
| <div class="footer"> | |
| <p>© 2023 Motivational Muse | <a href="https://websim.ai/motivationalmuse/about">About</a> | <a href="https://websim.ai/motivationalmuse/contact">Contact</a></p> | |
| </div> | |
| <script> | |
| function generateMotivation() { | |
| const mood = document.getElementById('moodSelect').value; | |
| const goal = document.getElementById('goalInput').value; | |
| const outputDiv = document.getElementById('output'); | |
| let motivation = ""; | |
| switch(mood) { | |
| case 'excited': | |
| motivation = "Your enthusiasm is electric! Channel that excitement into your goal of " + goal + ". The world is ready for your vibrant energy!"; | |
| break; | |
| case 'determined': | |
| motivation = "Your determination is your superpower. With every step towards " + goal + ", you're proving your strength. Keep pushing forward!"; | |
| break; | |
| case 'anxious': | |
| motivation = "It's okay to feel anxious about " + goal + ". Take a deep breath. Remember, courage isn't the absence of fear, but acting despite it. You've got this!"; | |
| break; | |
| case 'tired': | |
| motivation = "Even when you're tired, you're still making progress towards " + goal + ". Rest if you must, but don't quit. Your perseverance will pay off!"; | |
| break; | |
| case 'doubtful': | |
| motivation = "Doubt is just a speed bump on the road to " + goal + ". Believe in yourself like we believe in you. Your potential is limitless!"; | |
| break; | |
| } | |
| outputDiv.innerHTML = motivation; | |
| generateDailyAffirmation(); | |
| } | |
| function generateDailyAffirmation() { | |
| const affirmations = [ | |
| "I am capable of achieving greatness.", | |
| "Every day, in every way, I'm getting better and better.", | |
| "I have the power to create change.", | |
| "I am worthy of love, respect, and success.", | |
| "My potential to succeed is infinite.", | |
| "I am confident and capable in all that I do.", | |
| "I trust in my ability to figure things out." | |
| ]; | |
| const affirmation = affirmations[Math.floor(Math.random() * affirmations.length)]; | |
| document.getElementById('dailyAffirmation').innerText = affirmation; | |
| } | |
| // Generate a daily affirmation on page load | |
| generateDailyAffirmation(); | |
| </script> | |
| </body></html> |