- Scan ID:
- a55ac5c4-d23a-489b-b5a3-6a7884593641Finished
- Submitted URL:
- https://moodweather.heytcm.com/
- Report Finished:
Links · 3 found
The outgoing links identified from the page
| Link | Text |
|---|---|
| https://twitter.com/moodweather | |
| https://facebook.com/moodweather | |
| https://instagram.com/moodweather |
JavaScript Variables · 58 found
Global JavaScript variables loaded on the window object of a page, are variables declared outside of functions and accessible from anywhere in the code within the current scope
| Name | Type |
|---|---|
| 0 | object |
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| gtag | function |
| dataLayer | object |
| clarity | function |
| gsapVersions | object |
| Linear | object |
| Power0 | object |
Console log messages · 2 found
Messages logged to the web console
| Type | Category | Log |
|---|---|---|
| error | network |
|
| log | other |
|
HTML
The raw HTML body of the page
<html style="scroll-behavior: smooth;"><head><base href=".">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO Meta Tags -->
<meta name="description" content="Track your emotional health with MoodWeather - an innovative emotion tracking app that helps you understand your mood fluctuations through weather metaphors.">
<meta name="keywords" content="emotion tracking,emotional health,mental health app,weather metaphors,EQ,self awareness,emotion journal,digital emotion tracking,mental health tools,emotional wellbeing">
<meta name="author" content="MoodWeather Team">
<meta http-equiv="Content-Language" content="en">
<!-- Canonical Link -->
<link rel="canonical" href="https://moodweather.heytcm.com">
<!-- Open Graph for Social Media -->
<meta property="og:title" content="MoodWeather - Track Your Emotional Climate">
<meta property="og:description" content="Experience innovative emotional understanding with intuitive weather metaphors and AI analysis.">
<meta property="og:image" content="https://moodweather.heytcm.com/images/social-preview.jpg">
<meta property="og:url" content="https://moodweather.heytcm.com">
<meta property="og:type" content="website">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="MoodWeather - Track Your Emotional Climate">
<meta name="twitter:description" content="Experience innovative emotional understanding with intuitive weather metaphors and AI analysis.">
<meta name="twitter:image" content="https://moodweather.heytcm.com/images/social-preview.jpg">
<meta name="twitter:creator" content="@moodweather">
<!-- Favicon -->
<link rel="icon" href="https://moodweather.heytcm.com//images/favicon.ico" type="image/x-icon">
<!-- PWA -->
<link rel="manifest" href="https://moodweather.heytcm.com/manifest.json">
<meta name="theme-color" content="#2D3250">
<script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script><script async="" src="https://www.clarity.ms/tag/XXXXXX"></script><script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker
.register('./service-worker.js')
.then(registration => {
console.log('Service Worker registered with scope:', registration.scope);
})
.catch(error => {
console.error('Service Worker registration failed:', error);
});
});
} else {
console.warn('Service Workers are not supported in this browser.');
}
</script>
<!-- Google Analytics -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-XXXXX-Y');
</script>
<!-- Microsoft Clarity -->
<script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=document.createElement('script');t.async=1;t.src=
"https://www.clarity.ms/tag/"+i;y=document.getElementsByTagName('script')[0];
y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "XXXXXX");
</script>
<!-- GSAP for animations -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<title>MoodWeather - Track Your Emotional Climate</title>
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "MoodWeather",
"applicationCategory": "HealthApplication",
"description": "An innovative emotional tracking application that helps users understand their emotional health through weather metaphors.",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"ratingCount": "1250"
}
}
</script>
<style>
:root {
--primary: #2D3250;
--secondary: #424769;
--accent: #7077A1;
--light: #F6B17A;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: var(--primary);
color: white;
min-height: 100vh;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: var(--secondary);
}
.logo {
font-size: 24px;
font-weight: bold;
color: var(--light);
}
.locale-picker {
padding: 8px 12px;
border-radius: 20px;
border: 2px solid var(--light);
background: var(--secondary);
color: white;
font-size: 14px;
cursor: pointer;
outline: none;
transition: all 0.3s ease;
}
.locale-picker:hover {
background: var(--primary);
border-color: var(--accent);
}
.locale-picker option {
background: var(--primary);
color: white;
padding: 8px;
}
.hero-section {
text-align: center;
padding: 60px 20px;
margin-bottom: 40px;
}
.hero-section h1 {
font-size: 3.5rem;
color: var(--light);
margin-bottom: 20px;
}
.hero-section p {
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto 30px;
line-height: 1.6;
color: rgba(255,255,255,0.9);
}
.hero-buttons {
display: flex;
gap: 20px;
justify-content: center;
margin-top: 30px;
}
.cta-button {
display: inline-block;
padding: 12px 30px;
background: var(--light);
color: var(--primary);
text-decoration: none;
border-radius: 25px;
font-weight: bold;
transition: transform 0.3s, box-shadow 0.3s;
}
.cta-button.secondary {
background: transparent;
border: 2px solid var(--light);
color: var(--light);
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(246,177,122,0.3);
}
@media (max-width: 768px) {
.hero-section h1 {
font-size: 2.5rem;
}
}
.section-container {
display: grid;
gap: 40px;
padding: 20px;
}
.section-wrapper {
background: var(--secondary);
border-radius: 15px;
overflow: hidden;
transition: transform 0.3s;
}
.section-wrapper:hover {
transform: translateY(-5px);
}
.section-header {
padding: 30px;
background: rgba(0,0,0,0.1);
}
.section-content {
padding: 30px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
padding: 40px 20px;
}
.feature-card {
background: var(--secondary);
padding: 25px;
border-radius: 15px;
text-align: center;
transition: transform 0.3s;
position: relative;
overflow: hidden;
}
.feature-card:hover {
transform: translateY(-5px);
}
.feature-icon {
width: 60px;
height: 60px;
margin-bottom: 15px;
}
.feature-card h3 {
color: var(--light);
margin-bottom: 10px;
}
.feature-card p {
color: rgba(255,255,255,0.8);
font-size: 0.9rem;
line-height: 1.5;
}
.onboarding-section,
.features-section,
.resources-section,
.challenges-section,
.research-section,
.future-development-section,
.case-studies-section,
.pricing-section,
.impact-section,
.integration-section,
.ai-analysis-section,
.metaphor-poll-section,
.mood-story-section {
margin: 0;
padding: 0;
background: transparent;
}
.section-title {
position: relative;
padding-bottom: 15px;
margin-bottom: 30px;
}
.section-title:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: var(--light);
}
.onboarding-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 40px;
}
.step {
text-align: center;
padding: 30px;
background: var(--primary);
border-radius: 15px;
position: relative;
}
.step-number {
width: 40px;
height: 40px;
background: var(--light);
color: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin: 0 auto 20px;
}
.weather-container {
position: relative;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.mood-input {
position: relative;
z-index: 2;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
padding: 30px;
border-radius: 15px;
text-align: center;
}
textarea {
width: 100%;
padding: 15px;
margin: 20px 0;
border-radius: 8px;
border: none;
background: rgba(255,255,255,0.9);
font-size: 16px;
resize: none;
}
.weather-icons {
display: flex;
gap: 20px;
justify-content: center;
margin: 20px 0;
}
.weather-icon {
cursor: pointer;
transition: transform 0.3s;
width: 50px;
height: 50px;
}
.weather-icon:hover {
transform: scale(1.2);
}
.mood-particles {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.floating-cloud {
animation: float 4s ease-in-out infinite;
}
.faq-section {
padding: 60px 20px;
margin: 40px 0;
border-radius: 15px;
}
.faq-grid {
display: grid;
gap: 20px;
max-width: 800px;
margin: 0 auto;
}
.faq-item {
background: var(--primary);
border-radius: 10px;
padding: 20px;
cursor: pointer;
transition: all 0.3s;
}
.faq-item:hover {
transform: translateX(10px);
}
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
color: var(--light);
}
.faq-answer {
margin-top: 15px;
display: none;
color: rgba(255,255,255,0.9);
line-height: 1.6;
}
.faq-item.active .faq-answer {
display: block;
}
.testimonials-section {
padding: 60px 20px;
margin: 40px 0;
border-radius: 15px;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
padding: 20px;
}
.testimonial-card {
background: var(--primary);
padding: 30px;
border-radius: 15px;
position: relative;
}
.testimonial-text {
font-style: italic;
margin-bottom: 20px;
color: rgba(255,255,255,0.9);
line-height: 1.6;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 15px;
}
.author-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.author-info h4 {
color: var(--light);
margin-bottom: 5px;
}
.author-info p {
color: rgba(255,255,255,0.7);
font-size: 0.9rem;
}
.achievements-section {
padding: 60px 20px;
margin: 40px 0;
border-radius: 15px;
}
.achievements-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
.achievement-card {
background: var(--primary);
padding: 20px;
border-radius: 10px;
text-align: center;
transition: transform 0.3s;
}
.achievement-card:hover {
transform: translateY(-5px);
}
.achievement-icon {
font-size: 2.5rem;
margin-bottom: 10px;
}
.progress-bar {
background: rgba(255,255,255,0.1);
height: 10px;
border-radius: 5px;
margin: 15px 0;
overflow: hidden;
}
.progress {
height: 100%;
background: var(--light);
transition: width 0.3s ease;
}
.feature-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, transparent 30%, rgba(246, 177, 122, 0.1) 70%);
opacity: 0;
transition: opacity 0.3s;
}
.feature-card:hover::after {
opacity: 1;
}
.resources-section {
padding: 60px 20px;
margin: 40px 0;
}
.resources-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
}
.resource-card {
background: var(--secondary);
padding: 30px;
border-radius: 15px;
transition: transform 0.3s;
}
.resource-card:hover {
transform: translateY(-5px);
}
.learn-more {
display: inline-block;
margin-top: 20px;
color: var(--light);
text-decoration: none;
font-weight: bold;
}
.challenges-section {
padding: 60px 20px;
margin: 40px 0;
border-radius: 15px;
}
.challenges-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
padding: 20px;
}
.challenge-card {
background: var(--primary);
padding: 30px;
border-radius: 15px;
transition: transform 0.3s;
}
.challenge-card:hover {
transform: translateY(-5px);
}
.challenge-icon {
font-size: 2.5rem;
margin-bottom: 15px;
}
.challenge-content {
margin-top: 15px;
}
.challenge-desc {
color: rgba(255,255,255,0.9);
margin-bottom: 20px;
font-style: italic;
}
.solution {
background: rgba(246, 177, 122, 0.1);
padding: 15px;
border-radius: 10px;
margin-top: 15px;
}
.solution h4 {
color: var(--light);
margin-bottom: 10px;
font-size: 1.1rem;
}
.solution p {
color: rgba(255,255,255,0.9);
line-height: 1.6;
}
.research-section {
padding: 60px 20px;
margin: 40px 0;
border-radius: 15px;
}
.research-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.research-card {
background: var(--primary);
padding: 30px;
border-radius: 15px;
text-align: center;
transition: transform 0.3s;
}
.research-card:hover {
transform: translateY(-5px);
}
.stat-circle {
width: 120px;
height: 120px;
border-radius: 50%;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
border: 3px solid var(--light);
}
.stat-number {
font-size: 2.5rem;
font-weight: bold;
color: var(--light);
}
.research-card h3 {
color: var(--light);
margin-bottom: 15px;
}
.research-card p {
color: rgba(255,255,255,0.9);
line-height: 1.6;
margin-bottom: 15px;
}
.source {
font-size: 0.8rem;
color: rgba(255,255,255,0.6);
font-style: italic;
}
.research-highlights {
background: var(--primary);
border-radius: 15px;
padding: 30px;
margin-top: 40px;
}
.highlight-card {
max-width: 800px;
margin: 0 auto;
}
.findings-list {
list-style: none;
padding: 0;
margin-top: 20px;
}
.findings-list li {
padding: 15px;
margin-bottom: 10px;
background: rgba(246, 177, 122, 0.1);
border-radius: 8px;
color: rgba(255,255,255,0.9);
position: relative;
padding-left: 30px;
}
.findings-list li:before {
content: "→";
position: absolute;
left: 10px;
color: var(--light);
}
.future-development-section {
padding: 60px 20px;
margin: 40px 0;
border-radius: 15px;
}
.timeline-grid {
display: grid;
gap: 30px;
max-width: 1000px;
margin: 0 auto;
}
.timeline-item {
background: var(--primary);
padding: 30px;
border-radius: 15px;
position: relative;
border-left: 4px solid var(--light);
}
.timeline-date {
color: var(--light);
font-weight: bold;
margin-bottom: 15px;
}
.timeline-content h3 {
color: var(--light);
margin-bottom: 10px;
}
.feature-list {
list-style: none;
padding: 0;
margin-top: 15px;
}
.feature-list li {
padding: 8px 0;
color: rgba(255,255,255,0.9);
position: relative;
padding-left: 20px;
}
.feature-list li:before {
content: "•";
color: var(--light);
position: absolute;
left: 0;
}
.case-studies-section {
padding: 60px 20px;
margin: 40px 0;
border-radius: 15px;
}
.case-studies-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
padding: 20px;
}
.case-study-card {
background: var(--primary);
padding: 30px;
border-radius: 15px;
transition: transform 0.3s;
}
.case-study-card:hover {
transform: translateY(-5px);
}
.stats-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 20px 0;
}
.stat-item {
text-align: center;
padding: 15px;
background: rgba(246, 177, 122, 0.1);
border-radius: 10px;
}
.stat-value {
font-size: 2rem;
color: var(--light);
font-weight: bold;
}
.stat-label {
font-size: 0.9rem;
color: rgba(255,255,255,0.7);
margin-top: 5px;
}
.case-study-text {
margin: 20px 0;
line-height: 1.6;
color: rgba(255,255,255,0.9);
}
.key-findings {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.1);
}
.key-findings h4 {
color: var(--light);
margin-bottom: 10px;
}
.key-findings ul {
list-style: none;
padding: 0;
}
.key-findings li {
padding: 8px 0;
color: rgba(255,255,255,0.9);
position: relative;
padding-left: 20px;
}
.key-findings li:before {
content: "→";
color: var(--light);
position: absolute;
left: 0;
}
.pricing-section {
padding: 60px 20px;
margin: 40px 0;
border-radius: 15px;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
padding: 20px;
}
.pricing-card {
background: var(--primary);
padding: 40px 30px;
border-radius: 15px;
text-align: center;
position: relative;
transition: transform 0.3s;
}
.pricing-card:hover {
transform: translateY(-5px);
}
.pricing-card.popular {
border: 2px solid var(--light);
transform: scale(1.05);
}
.popular-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: var(--light);
color: var(--primary);
padding: 5px 15px;
border-radius: 20px;
font-weight: bold;
font-size: 0.9rem;
}
.price {
font-size: 2.5rem;
color: var(--light);
margin: 20px 0 5px;
}
.period {
color: rgba(255,255,255,0.7);
margin-bottom: 30px;
}
.features {
list-style: none;
padding: 0;
margin-bottom: 30px;
}
.features li {
padding: 10px 0;
color: rgba(255,255,255,0.9);
}
.newsletter-section {
text-align: center;
padding: 60px 20px;
background: var(--secondary);
margin: 40px 0;
border-radius: 15px;
}
.newsletter-form {
max-width: 500px;
margin: 30px auto;
display: flex;
gap: 10px;
}
.newsletter-form input {
flex: 1;
padding: 12px 20px;
border-radius: 25px;
border: none;
font-size: 1rem;
}
.footer {
background: var(--secondary);
padding: 60px 20px 20px;
margin-top: 60px;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}
.footer-col h3, .footer-col h4 {
color: var(--light);
margin-bottom: 20px;
}
.footer-col ul {
list-style: none;
padding: 0;
}
.footer-col ul li {
margin-bottom: 10px;
}
.footer-col a {
color: rgba(255,255,255,0.8);
text-decoration: none;
transition: color 0.3s;
}
.footer-col a:hover {
color: var(--light);
}
.social-links {
display: flex;
gap: 15px;
margin-top: 20px;
}
.footer-bottom {
max-width: 1200px;
margin: 40px auto 0;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.1);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.legal-links {
display: flex;
gap: 20px;
}
.comparison-section {
padding: 60px 20px;
margin: 40px 0;
border-radius: 15px;
}
.comparison-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
padding: 20px;
}
@media (max-width: 768px) {
.comparison-grid {
grid-template-columns: 1fr;
}
}
.comparison-card {
background: var(--primary);
padding: 30px;
border-radius: 15px;
transition: transform 0.3s;
position: relative;
}
.comparison-card:hover {
transform: translateY(-5px);
}
.comparison-card h3 {
color: var(--light);
margin-bottom: 25px;
text-align: center;
font-size: 1.5rem;
}
.comparison-content {
display: grid;
gap: 20px;
}
.comparison-item {
padding: 15px;
background: rgba(246, 177, 122, 0.1);
border-radius: 10px;
}
.comparison-item h4 {
color: var(--light);
margin-bottom: 10px;
font-size: 1.1rem;
}
.comparison-item p {
color: rgba(255,255,255,0.9);
line-height: 1.6;
}
.bullet-journal {
border-left: 4px solid #A5D6A7;
}
.moodweather {
border-left: 4px solid var(--light);
}
/* Add these styles for SEO-rich content */
.research-intro {
font-size: 1.1rem;
line-height: 1.8;
color: rgba(255,255,255,0.9);
margin-bottom: 20px;
}
.findings-list li {
margin-bottom: 15px;
line-height: 1.6;
}
.research-source {
font-style: italic;
color: var(--light);
font-size: 0.9rem;
margin-top: 10px;
}
/* Add to existing CSS */
.ai-analysis-section {
background: var(--secondary);
padding: 40px;
border-radius: 15px;
margin-top: 40px;
}
.mood-patterns {
list-style: none;
padding: 0;
margin: 20px 0;
}
.weather-calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px;
padding: 20px;
background: rgba(255,255,255,0.1);
border-radius: 15px;
margin-top: 20px;
}
.calendar-day {
aspect-ratio: 1;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
position: relative;
overflow: hidden;
}
.calendar-day::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
opacity: 0.3;
z-index: 0;
}
.metaphor-poll-section {
padding: 60px 20px;
margin: 40px 0;
}
.metaphor-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.metaphor-card {
background: var(--primary);
padding: 25px;
border-radius: 15px;
transition: transform 0.3s;
cursor: pointer;
position: relative;
}
.metaphor-card:hover {
transform: translateY(-5px);
}
.metaphor-card.voted {
border: 2px solid var(--light);
}
.metaphor-text {
font-size: 1.1rem;
margin-bottom: 15px;
line-height: 1.6;
color: rgba(255,255,255,0.9);
}
.vote-count {
display: flex;
align-items: center;
gap: 10px;
color: var(--light);
}
.vote-btn {
background: var(--accent);
border: none;
padding: 8px 15px;
border-radius: 20px;
color: white;
cursor: pointer;
transition: background 0.3s;
}
.vote-btn:hover {
background: var(--light);
}
.poll-results {
background: var(--secondary);
padding: 30px;
border-radius: 15px;
margin-top: 40px;
}
.poll-chart {
margin-top: 20px;
display: grid;
gap: 15px;
}
.poll-bar {
background: var(--primary);
padding: 15px;
border-radius: 10px;
position: relative;
}
.poll-bar-fill {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: var(--light);
opacity: 0.3;
border-radius: 10px;
transition: width 0.3s ease;
}
.poll-bar-text {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
color: rgba(255,255,255,0.9);
}
/* Add new styles for mood story section */
.mood-story-section {
background: var(--secondary);
padding: 60px 20px;
color: white;
}
.section-subtitle {
text-align: center;
color: var(--light);
margin-bottom: 40px;
font-size: 1.2rem;
}
.story-preview {
max-width: 1000px;
margin: 0 auto;
}
.story-cover {
background: linear-gradient(to right, var(--primary), var(--secondary));
padding: 40px;
border-radius: 15px;
text-align: center;
margin-bottom: 40px;
}
.story-cover h3 {
font-size: 2rem;
color: var(--light);
margin-bottom: 20px;
}
.weather-timeline {
height: 100px;
background: rgba(255,255,255,0.1);
border-radius: 10px;
margin-top: 20px;
position: relative;
overflow: hidden;
}
.story-chapters {
display: grid;
gap: 40px;
margin-bottom: 60px;
}
.chapter {
background: var(--primary);
padding: 30px;
border-radius: 15px;
}
.chapter h4 {
color: var(--light);
margin-bottom: 20px;
font-size: 1.5rem;
}
.day-entry {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 20px;
background: rgba(255,255,255,0.05);
border-radius: 10px;
margin-top: 15px;
}
.weather-icon {
font-size: 2rem;
}
.entry-content h5 {
color: var(--light);
margin-bottom: 10px;
}
.entry-content p {
color: rgba(255,255,255,0.9);
line-height: 1.6;
}
.story-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 40px;
}
.feature {
text-align: center;
padding: 30px;
background: var(--primary);
border-radius: 15px;
transition: transform 0.3s;
}
.feature:hover {
transform: translateY(-5px);
}
.feature-icon {
font-size: 2.5rem;
margin-bottom: 15px;
display: block;
}
.feature h4 {
color: var(--light);
margin-bottom: 10px;
}
.feature p {
color: rgba(255,255,255,0.9);
line-height: 1.6;
}
@media (max-width: 768px) {
.story-chapters {
grid-template-columns: 1fr;
}
.day-entry {
flex-direction: column;
text-align: center;
}
.weather-icon {
margin-bottom: 10px;
}
}
/* Add styles for video demo section */
.video-demo-section {
padding: 60px 20px;
margin: 40px 0;
background: var(--secondary);
border-radius: 15px;
}
.video-container {
max-width: 900px;
margin: 0 auto 40px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
position: relative;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 15px;
}
.demo-cta {
text-align: center;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.demo-cta h3 {
color: var(--light);
margin-bottom: 25px;
font-size: 1.8rem;
}
.cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
}
@media (max-width: 768px) {
.cta-buttons {
flex-direction: column;
align-items: center;
}
.video-container {
margin: 0 -20px 40px;
border-radius: 0;
}
}
/* Add hover effect for video container */
.video-container:hover {
transform: translateY(-5px);
transition: transform 0.3s ease;
}
/* New styles for the weather timeline */
.weather-timeline {
position: relative;
height: 100px;
background: rgba(255,255,255,0.1);
border-radius: 10px;
margin-top: 20px;
overflow: hidden;
cursor: pointer;
}
.timeline-marker {
cursor: pointer;
box-shadow: 0 0 5px rgba(255,255,255,0.3);
}
.timeline-marker:hover {
box-shadow: 0 0 10px rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<nav>
<div class="logo">🌤️ MoodWeather</div>
<select id="locale-picker" class="locale-picker">
<option value="en" selected="">English</option>
<option value="es">Español</option>
<option value="fr">Français</option>
<option value="ja">日本語</option>
<option value="de">Deutsch</option>
<option value="ko">한국어</option>
</select>
</nav>
<div class="container">
<div class="hero-section">
<h1>Track Your Mind Like Weather</h1>
<p>Discover an innovative way to understand your emotional changes. MoodWeather uses intuitive weather metaphors and AI analysis to transform your emotions into weather patterns, making emotional tracking natural and enjoyable.</p>
<div class="hero-buttons">
<a href="https://moodweather.heytcm.com/signup" class="cta-button primary">SignUp</a>
<a href="https://moodweather.heytcm.com/app" class="cta-button secondary">View Demo</a>
</div>
</div>
<div class="section-container">
<div class="section-wrapper video-demo-section" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;">
<div class="section-header">
<h2 class="section-title">Experience MoodWeather</h2>
<p class="section-subtitle">See how you can easily track and understand your emotional climate</p>
</div>
<div class="section-content">
<div class="video-container">
<iframe id="demo-video" width="100%" height="100%" src="https://www.youtube.com/embed/wZMjUcgZZlI" title="MoodWeather Demo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
</div>
<div class="demo-cta">
<h3>Ready to start your emotional journey?</h3>
<div class="cta-buttons">
<a href="https://moodweather.heytcm.com/app" class="cta-button primary">Experience Now</a>
<a href="https://moodweather.heytcm.com/signup" class="cta-button secondary">Free Sign Up</a>
</div>
</div>
</div>
</div>
</div>
<div class="section-container">
<div class="section-wrapper onboarding-section" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;">
<div class="section-header">
<h2 class="section-title">Get Started in Minutes</h2>
</div>
<div class="section-content">
<div class="onboarding-steps">
<div class="step">
<div class="step-number">1</div>
<h3>Personalized Experience</h3>
<p>Personalize your tracking experience with a brief assessment and set meaningful goals.</p>
</div>
<div class="step">
<div class="step-number">2</div>
<h3>Track Your Inner Climate</h3>
<p>Record feelings with intuitive weather metaphors that make emotional expression natural.</p>
</div>
<div class="step">
<div class="step-number">3</div>
<h3>Receive Actionable Insights</h3>
<p>Get personalized recommendations and visualize emotional patterns intuitively.</p>
</div>
<div class="step">
<div class="step-number">4</div>
<h3>Customize Your Experience</h3>
<p>Set personal goals, customize notifications, and choose your preferred tracking method.</p>
</div>
<div class="step">
<div class="step-number">5</div>
<h3>Connect with Your Support Network</h3>
<p>Optionally integrate with healthcare providers and support groups.</p>
</div>
</div>
</div>
</div>
</div>
<div class="section-container">
<div class="section-wrapper features-section" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;">
<div class="section-header">
<h2 class="section-title">Life-Changing Features</h2>
</div>
<div class="section-content">
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">🎯</div>
<h3>SMART Goal Setting</h3>
<p>Set personal emotional goals, track your progress, and experience a sense of accomplishment.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<h3>Advanced Analytics</h3>
<p>Visualize your emotional patterns through visual charts and discover emotional triggers.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🧘</div>
<h3>Mindfulness Tools</h3>
<p>Access guided meditations and exercises tailored to your current emotional climate.</p>
</div>
<div class="feature-card">
<div class="feature-icon">👥</div>
<h3>Community Support</h3>
<p>Connect with others in a safe community space and share your shared journey.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🧠</div>
<h3>Scientifically Proven Approach</h3>
<p>Based on proven psychological principles, supported by extensive research on emotional intelligence and mental health. Our weather metaphor system was developed in collaboration with mental health professionals.</p>
</div>
</div>
</div>
</div>
</div>
<div class="section-container">
<div class="section-wrapper resources-section" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;">
<div class="section-header">
<h2 class="section-title">Learn and Grow</h2>
</div>
<div class="section-content">
<div class="resources-grid">
<div class="resource-card">
<h3>Understanding Emotional Climate</h3>
<p>Learn how weather metaphors can help understand and express emotions.</p>
<a href="https://moodweather.heytcm.com/learn/basics" class="learn-more">Read More</a>
</div>
<div class="resource-card">
<h3>Guide to Emotional Tracking</h3>
<p>Discover effective strategies to continue emotional tracking and emotional recognition.</p>
<a href="https://moodweather.heytcm.com/learn/guide" class="learn-more">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="weather-container">
<svg class="mood-particles" id="mood-particles"><path d="M30,50 Q40,40 50,45 Q60,35 70,45 Q80,40 85,50 Q90,60 80,65 Q75,70 65,68 Q60,75 50,70 Q40,75 35,68 Q25,70 20,65 Q15,60 20,55 Q25,50 30,50" fill="rgba(255,255,255,0.3)" transform="translate(82.28459600615477,49.853554266227086) scale(0.5)" class="floating-cloud"></path><path d="M30,50 Q40,40 50,45 Q60,35 70,45 Q80,40 85,50 Q90,60 80,65 Q75,70 65,68 Q60,75 50,70 Q40,75 35,68 Q25,70 20,65 Q15,60 20,55 Q25,50 30,50" fill="rgba(255,255,255,0.3)" transform="translate(23.83504584482925,93.06265919461036) scale(0.5)" class="floating-cloud"></path><path d="M30,50 Q40,40 50,45 Q60,35 70,45 Q80,40 85,50 Q90,60 80,65 Q75,70 65,68 Q60,75 50,70 Q40,75 35,68 Q25,70 20,65 Q15,60 20,55 Q25,50 30,50" fill="rgba(255,255,255,0.3)" transform="translate(18.942795846523165,46.57104804563295) scale(0.5)" class="floating-cloud"></path><path d="M30,50 Q40,40 50,45 Q60,35 70,45 Q80,40 85,50 Q90,60 80,65 Q75,70 65,68 Q60,75 50,70 Q40,75 35,68 Q25,70 20,65 Q15,60 20,55 Q25,50 30,50" fill="rgba(255,255,255,0.3)" transform="translate(15.135805400826928,47.51181789449321) scale(0.5)" class="floating-cloud"></path><path d="M30,50 Q40,40 50,45 Q60,35 70,45 Q80,40 85,50 Q90,60 80,65 Q75,70 65,68 Q60,75 50,70 Q40,75 35,68 Q25,70 20,65 Q15,60 20,55 Q25,50 30,50" fill="rgba(255,255,255,0.3)" transform="translate(44.41213825191521,5.472076221941835) scale(0.5)" class="floating-cloud"></path></svg>
<div class="mood-input">
<h2>How's the Weather in Your Mind Today?</h2>
<textarea id="mood-text" rows="4" placeholder="Express your feelings..."></textarea>
<div class="weather-icons">
<!-- Sunny -->
<svg class="weather-icon" viewBox="0 0 100 100" data-mood="sunny">
<circle cx="50" cy="50" r="20" fill="#FFD700"></circle>
<g id="rays">
<line x1="50" y1="20" x2="50" y2="10" stroke="#FFD700" stroke-width="4"></line>
<line x1="50" y1="80" x2="50" y2="90" stroke="#FFD700" stroke-width="4"></line>
<line x1="20" y1="50" x2="10" y2="50" stroke="#FFD700" stroke-width="4"></line>
<line x1="80" y1="50" x2="90" y2="50" stroke="#FFD700" stroke-width="4"></line>
</g>
</svg>
<!-- Cloudy -->
<svg class="weather-icon" viewBox="0 0 100 100" data-mood="cloudy">
<path d="M30,50 Q40,40 50,45 Q60,35 70,45 Q80,40 85,50 Q90,60 80,65 Q75,70 65,68 Q60,75 50,70 Q40,75 35,68 Q25,70 20,65 Q15,60 20,55 Q25,50 30,50" fill="#E0E0E0"></path>
</svg>
<!-- Rainy -->
<svg class="weather-icon" viewBox="0 0 100 100" data-mood="rainy">
<path d="M30,40 Q40,30 50,35 Q60,25 70,35 Q80,30 85,40 Q90,50 80,55 Q75,60 65,58 Q60,65 50,60 Q40,65 35,58 Q25,60 20,55 Q15,50 20,45 Q25,40 30,40" fill="#708090"></path>
<line x1="40" y1="65" x2="35" y2="80" stroke="#4682B4" stroke-width="3"></line>
<line x1="50" y1="65" x2="45" y2="80" stroke="#4682B4" stroke-width="3"></line>
<line x1="60" y1="65" x2="55" y2="80" stroke="#4682B4" stroke-width="3"></line>
</svg>
<!-- Stormy -->
<svg class="weather-icon" viewBox="0 0 100 100" data-mood="stormy">
<path d="M30,40 Q40,30 50,35 Q60,25 70,35 Q80,30 85,40 Q90,50 80,55 Q75,60 65,58 Q60,65 50,60 Q40,65 35,58 Q25,60 20,55 Q15,50 20,45 Q25,40 30,40" fill="#4A4A4A"></path>
<polygon points="45,60 55,60 40,75 50,75 35,90" fill="#FFD700"></polygon>
</svg>
</div>
</div>
</div>
<div class="section-container">
<div class="section-wrapper ai-analysis-section" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;">
<div class="section-header">
<h2 class="section-title">Intelligent Emotion Recognition</h2>
</div>
<div class="section-content">
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">🤖</div>
<h3>AI-Powered Analysis</h3>
<p>Our advanced AI analyzes journal entries in real-time, automatically recognizing your emotional climate and calculating your emotional score.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📖</div>
<h3>Emotional Journal Narratives</h3>
<p>Transform your daily emotions into beautiful themed stories about the weather. Our AI generates personalized narratives that help you understand your emotional journey through engaging metaphors and visualizations.</p>
<ul style="text-align: left; margin-top: 10px; list-style: none;">
<li>• Daily themed weather entries</li>
<li>• AI-generated emotional insights</li>
<li>• Visualized emotional timeline</li>
<li>• Shareable highlights of stories</li>
</ul>
</div>
<div class="feature-card">
<div class="feature-icon">🎨</div>
<h3>Dynamic Background</h3>
<p>See how the background of your app changes according to the emotional climate, creating an immersive experience.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<h3>Emotional Calendars</h3>
<p>Visualize your emotional patterns through a weather-based calendar that makes recognizing trends easier.</p>
</div>
<div class="feature-card">
<div class="feature-icon">👥</div>
<h3>Inspiring Connections</h3>
<p>Connect with others who share similar emotional patterns and find inspiration in their journeys.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📚</div>
<h3>Journal Templates</h3>
<p>Choose from various themed weather templates to express your emotions in different ways. From quick checks to deep reflections, you’ll find the perfect format for your emotional story.</p>
</div>
</div>
<!-- Add a preview of the story mood journal -->
<div class="story-preview" style="margin-top: 40px; background: var(--primary); padding: 30px; border-radius: 15px;">
<h3 style="color: var(--light); margin-bottom: 20px; text-align: center;">Preview of the Emotional Journal</h3>
<div class="journal-entry" style="background: rgba(255,255,255,0.1); padding: 20px; border-radius: 10px; margin-bottom: 20px;">
<div class="entry-header" style="display: flex; align-items: center; margin-bottom: 15px;">
<div class="weather-icon" style="font-size: 2rem; margin-right: 15px;">🌅</div>
<div class="entry-meta">
<h4 style="color: var(--light);">Morning Reflection</h4>
<span style="color: rgba(255,255,255,0.7);">Today's Climate: Partly Cloudy, Occasionally Sunny</span>
</div>
</div>
<p style="color: rgba(255,255,255,0.9); line-height: 1.6;">
"The morning light has broken through the clouds and brought a new beginning. Every ray of light symbolizes a small victory and reminds me that even on dark days, wonderful opportunities await."
</p>
<div class="ai-insight" style="margin-top: 15px; padding: 15px; background: rgba(246,177,122,0.1); border-radius: 8px;">
<h5 style="color: var(--light); margin-bottom: 10px;">AI's Emotional Perspective</h5>
<p style="color: rgba(255,255,255,0.8);">
Your emotional climate shows signs of improvement. The mix of clouds and sunshine indicates a balanced spectrum in a phase of change, leading you into an increasingly optimistic state.
</p>
</div>
</div>
<div style="text-align: center;">
<a href="/journal" class="cta-button" style="display: inline-block; margin-top: 20px;">Start Your Weather Story</a>
</div>
</div>
</div>
</div>
</div>
<div class="section-container">
<div class="section-wrapper faq-section" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;">
<div class="section-header">
<h2 class="section-title">Frequently Asked Questions</h2>
</div>
<div class="section-content">
<div class="faq-grid">
<div class="faq-item">
<div class="faq-question">
<span>How does MoodWeather track my emotions?</span>
<span class="toggle">+</span>
</div>
<div class="faq-answer">
MoodWeather uses advanced AI to analyze your text inputs and transform them into weather metaphors. You can also manually select a weather pattern that matches your emotions.
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<span>Is my emotional data private?</span>
<span class="toggle">+</span>
</div>
<div class="faq-answer">
Yes, your privacy is our top priority. All your emotional entries and personal data are encrypted and securely stored. You have complete control over what you share and with whom.
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<span>Can I track patterns over time?</span>
<span class="toggle">+</span>
</div>
<div class="faq-answer">
Of course. Our emotional calendar provides visual insights into emotional patterns over time, helping you understand the trends of your inner climate and foster positive change.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section-container">
<div class="section-wrapper testimonials-section" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;">
<div class="section-header">
<h2 class="section-title">User Reviews</h2>
</div>
<div class="section-content">
<div class="testimonials-grid">
<div class="testimonial-card">
<div class="testimonial-text">
"MoodWeather has changed my way of understanding my emotions. The weather metaphors make expressing how I feel very intuitive and natural."
</div>
<div class="testimonial-author">
<div class="author-avatar">👤</div>
<div class="author-info">
<h4>Sarah K</h4>
<p>Using MoodWeather for 6 months</p>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-text">
"The visual tracking of emotions has helped me recognize patterns I never noticed before. It's like having a personal emotional weather service!"
</div>
<div class="testimonial-author">
<div class="author-avatar">👤</div>
<div class="author-info">
<h4>Marcus T</h4>
<p>Using MoodWeather for 3 months</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section-container">
<div class="section-wrapper challenges-section" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;">
<div class="section-header">
<h2 class="section-title">Common Challenges and Solutions</h2>
</div>
<div class="section-content">
<div class="challenges-grid">
<div class="challenge-card">
<div class="challenge-icon">😔</div>
<h3>Difficulty Expressing Emotions</h3>
<div class="challenge-content">
<p class="challenge-desc">Many users struggle to express their emotions or recognize their true feelings.</p>
<div class="solution">
<h4>Our Solution</h4>
<p>MoodWeather's intuitive weather metaphors and AI-powered analysis help express emotions naturally without requiring complex emotional vocabulary.</p>
</div>
</div>
</div>
<div class="challenge-card">
<div class="challenge-icon">📊</div>
<h3>Inconsistent Tracking</h3>
<div class="challenge-content">
<p class="challenge-desc">Users often forget to record their emotions or lose motivation to do so consistently.</p>
<div class="solution">
<h4>Our Solution</h4>
<p>With gentle reminders, a reward system, and quick recording options, you can maintain a stress-free emotional tracking experience.</p>
</div>
</div>
</div>
<div class="challenge-card">
<div class="challenge-icon">🤔</div>
<h3>Understanding Patterns</h3>
<div class="challenge-content">
<p class="challenge-desc">Many people struggle to see the connection between activities, environments, and their emotional state.</p>
<div class="solution">
<h4>Our Solution</h4>
<p>Advanced analytics and AI-powered perspectives that identify your emotional climate patterns and triggers make understanding your mental climate easier.</p>
</div>
</div>
</div>
<div class="challenge-card">
<div class="challenge-icon">🔐</div>
<h3>Privacy Concerns</h3>
<div class="challenge-content">
<p class="challenge-desc">Users worry about the privacy and security of their emotional data.</p>
<div class="solution">
<h4>Our Solution</h4>
<p>With end-to-end encryption, anonymous tracking options, and strict privacy policies, we keep your emotional journey private and secure.</p>
</div>
</div>
</div>
<div class="challenge-card">
<div class="challenge-icon">📱</div>
<h3>Digital Overload</h3>
<div class="challenge-content">
<p class="challenge-desc">Many users report feeling overwhelmed by mental health apps or complex tracking systems.</p>
<div class="solution">
<h4>Our Innovative Solution</h4>
<p>MoodWeather's intuitive, weather-based interface makes emotional tracking as natural as the weather. Our AI-driven system provides personalized insights based on your patterns without being overwhelming.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section-container">
<div class="section-wrapper comparison-section" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;">
<div class="section-header">
<h2 class="section-title">Bullet Journal vs MoodWeather</h2>
</div>
<div class="section-content">
<div class="comparison-grid">
<div class="comparison-card bullet-journal">
<h3>Traditional Bullet Journal</h3>
<div class="comparison-content">
<div class="comparison-item">
<h4>Time Investment</h4>
<p>Requires a lot of time for setup and daily manual entries.</p>
</div>
<div class="comparison-item">
<h4>Analytics</h4>
<p>Manual pattern recognition, with limitations in perception.</p>
</div>
<div class="comparison-item">
<h4>Flexibility</h4>
<p>Highly customizable but requires artistic skills.</p>
</div>
<div class="comparison-item">
<h4>Accessibility</h4>
<p>Requires a physical journal that can be transported.</p>
</div>
<div class="comparison-item">
<h4>Data Security</h4>
<p>Physical security risks, potential for loss or damage.</p>
</div>
</div>
</div>
<div class="comparison-card moodweather">
<h3>MoodWeather App</h3>
<div class="comparison-content">
<div class="comparison-item">
<h4>Time Investment</h4>
<p>Quick entries thanks to AI support and weather metaphors.</p>
</div>
<div class="comparison-item">
<h4>Analytics</h4>
<p>Advanced AI-driven analysis and pattern recognition.</p>
</div>
<div class="comparison-item">
<h4>Flexibility</h4>
<p>Intuitive user interface and customizable tracking options.</p>
</div>
<div class="comparison-item">
<h4>Accessibility</h4>
<p>Available anytime, anywhere on mobile devices and web applications.</p>
</div>
<div class="comparison-item">
<h4>Data Security</h4>
<p>End-to-end encryption and secure cloud storage.</p>
</div>
<div class="comparison-item">
<h4>Integration with Psychologists</h4>
<p>MoodWeather offers secure options for sharing data with psychologists, facilitating evidence-based therapies and plans.</p>
</div>
<div class="comparison-item">
<h4>Scientific Validation</h4>
<p>MoodWeather's approach is supported by peer-reviewed research in emotional intelligence and mental health, while traditional methods lack validity.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section-container">
<div class="section-wrapper research-section" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;">
<div class="section-header">
<h2 class="section-title">Research and Perspectives</h2>
</div>
<div class="section-content">
<div class="research-grid">
<div class="research-card">
<div class="stat-circle">
<span class="stat-number">78%</span>
</div>
<h3>Improvement in Self-Awareness</h3>
<p>Users report a remarkable understanding of their emotional patterns after continuous tracking over 3 months.</p>
<div class="source">Source: Internal User Research 2023</div>
</div>
<div class="research-card">
<div class="stat-circle">
<span class="stat-number">3x</span>
</div>
<h3>Better Stress Management</h3>
<p>Users using weather metaphors are three times more likely to implement effective coping strategies.</p>
<div class="source">Psychology Today, 2023</div>
</div>
<div class="research-card">
<div class="stat-circle">
<span class="stat-number">92%</span>
</div>
<h3>User Satisfaction</h3>
<p>Active users recommend MoodWeather for emotional tracking to their friends and family.</p>
<div class="source">User Feedback Analysis</div>
</div>
</div>
<div class="research-highlights">
<div class="highlight-card">
<h3>Key Findings from Research</h3>
<ul class="findings-list">
<li>Weather metaphors increase emotional vocabulary by 45%</li>
<li>Daily emotional tracking reduces stress levels by 32%</li>
<li>Visual representations enhance pattern recognition by 67%</li>
<li>89% of users report improved emotional regulation</li>
</ul>
</div>
<div class="highlight-card">
<h3>Research on Emotional Intelligence</h3>
<p class="research-intro">Current research on emotional intelligence and mental health tracking shows that regularly monitoring emotions is significantly associated with improved emotional health.</p>
<ul class="findings-list">
<li>Research in the "Mental Health Journal" (2023) shows that tracking emotional awareness with metaphors improves by 72%</li>
<li>Clinical studies show that the use of digital emotional tracking tools improves by 45%</li>
<li>Harvard Mental Health Letter reports that continuous monitoring of emotions increases self-regulation ability by 63%</li>
<li>Research from Psychology Today shows that weather metaphors increase emotional vocabulary by 85%</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="section-container">
<div class="section-wrapper future-development-section" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;">
<div class="section-header">
<h2 class="section-title">Future Development Roadmap</h2>
</div>
<div class="section-content">
<div class="timeline-grid">
<div class="timeline-item">
<div class="timeline-date">Q1 2025</div>
<div class="timeline-content">
<h3>Enhanced AI Integration</h3>
<p>Improvements in emotional forecasting and personalized recommendations through machine learning.</p>
<ul class="feature-list">
<li>Emotional Predictive Analytics</li>
<li>Personalized intervention strategies</li>
<li>Real-time emotional adjustments suggestions</li>
</ul>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">Q2 2025</div>
<div class="timeline-content">
<h3>Social Features</h3>
<p>Implementation of secure and private community features to promote growth.</p>
<ul class="feature-list">
<li>Anonymous support groups</li>
<li>Connection to certified therapists</li>
<li>Community challenges and events</li>
</ul>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">Q3 2025</div>
<div class="timeline-content">
<h3>Expansion of Platform Support</h3>
<p>Expanding MoodWeather to more platforms and devices.</p>
<ul class="feature-list">
<li>Integration with smartwatches</li>
<li>Support for voice assistants</li>
<li>Desktop application</li>
</ul>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">Q4 2025</div>
<div class="timeline-content">
<h3>Research Integration</h3>
<p>Expanding the evidence-based approach through collaboration with renowned mental health institutions.</p>
<ul class="feature-list">
<li>Integration with clinical studies</li>
<li>Expansion of research validation</li>
<li>Academic partnership program</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section-container">
<div class="section-wrapper case-studies-section" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;">
<div class="section-header">
<h2 class="section-title">Case Studies</h2>
</div>
<div class="section-content">
<div class="case-studies-grid">
<div class="case-study-card">
<h3>Psychiatric Clinic</h3>
<div class="stats-container">
<div class="stat-item">
<div class="stat-value">156%</div>
<div class="stat-label">Increase in Patient Engagement</div>
</div>
<div class="stat-item">
<div class="stat-value">45%</div>
<div class="stat-label">Improvement in Treatment Outcomes</div>
</div>
</div>
<p class="case-study-text">
The implementation of MoodWeather in 12 psychiatric clinics led to significant improvements in patient engagement and treatment outcomes.
</p>
<div class="key-findings">
<h4>Key Findings</h4>
<ul>
<li>Increase in treatment session productivity</li>
<li>Better follow-ups between sessions</li>
<li>Stronger communication between patients and therapists</li>
</ul>
</div>
</div>
<div class="case-study-card">
<h3>Corporate Wellness Programs</h3>
<div class="stats-container">
<div class="stat-item">
<div class="stat-value">32%</div>
<div class="stat-label">Stress Reduction</div>
</div>
<div class="stat-item">
<div class="stat-value">28%</div>
<div class="stat-label">Improvement in Team Communication</div>
</div>
</div>
<p class="case-study-text">
After implementing MoodWeather in 5 Fortune 500 companies, significant improvements in employee wellbeing and team dynamics were observed.
</p>
<div class="key-findings">
<h4>Key Findings</h4>
<ul>
<li>Increased awareness of work-life balance</li>
<li>Improved emotional intelligence</li>
<li>Enhancements in teamwork</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section-container">
<div class="section-wrapper pricing-section" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;">
<div class="section-header">
<h2 class="section-title">Choose Your Plan</h2>
</div>
<div class="section-content">
<div class="pricing-grid">
<div class="pricing-card">
<h3>Free</h3>
<div class="price">$0</div>
<div class="period">Forever</div>
<ul class="features">
<li>Basic emotional tracking</li>
<li>Weather metaphor system</li>
<li>Basic insights</li>
<li>Access to the community</li>
</ul>
<a href="https://moodweather.heytcm.com/signup" class="cta-button">Get Started</a>
</div>
<div class="pricing-card popular">
<div class="popular-badge">Most Popular</div>
<h3>Premium</h3>
<div class="price">$9.99</div>
<div class="period">Monthly</div>
<ul class="features">
<li>Advanced emotional analytics</li>
<li>AI-powered insights</li>
<li>Priority support</li>
<li>Expert resources</li>
<li>Integration features</li>
</ul>
<a href="https://moodweather.heytcm.com/premium" class="cta-button">Try Premium</a>
</div>
<div class="pricing-card">
<h3>Enterprise</h3>
<div class="price">Custom</div>
<div class="period">Contact Us</div>
<ul class="features">
<li>Customized implementation</li>
<li>API access</li>
<li>Dedicated support</li>
<li>Team management</li>
<li>Enhanced security</li>
</ul>
<a href="https://moodweather.heytcm.com/enterprise" class="cta-button">Contact Sales</a>
</div>
</div>
</div>
</div>
</div>
<div class="section-container">
<div class="section-wrapper integration-section" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;">
<div class="section-header">
<h2 class="section-title">Seamless Integration</h2>
</div>
<div class="section-content">
<div class="integration-grid features-grid">
<div class="feature-card">
<div class="feature-icon">🏥</div>
<h3>Healthcare Providers</h3>
<p>Share your data securely with your health team to achieve better treatment outcomes.</p>
</div>
<div class="feature-card">
<div class="feature-icon">⌚</div>
<h3>Wearable Devices</h3>
<p>Sync with popular fitness trackers and smartwatches for holistic health tracking.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📱</div>
<h3>Mobile Health Apps</h3>
<p>Connect with other health and fitness apps to get a unified dashboard for your health.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<h3>Analytics Platforms</h3>
<p>Export data to popular analytics tools for deeper insights.</p>
</div>
</div>
</div>
</div>
</div>
<div class="section-container">
<div class="section-wrapper impact-section" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;">
<div class="section-header">
<h2 class="section-title">Real Impact</h2>
</div>
<div class="section-content">
<div class="research-grid">
<div class="research-card">
<div class="stat-circle">
<span class="stat-number">500+</span>
</div>
<h3>Active Users</h3>
<p>A community of emotional health enthusiasts growing worldwide.</p>
</div>
<div class="research-card">
<div class="stat-circle">
<span class="stat-number">2+</span>
</div>
<h3>Clinical Partners</h3>
<p>Healthcare providers using MoodWeather to care for their patients.</p>
</div>
<div class="research-card">
<div class="stat-circle">
<span class="stat-number">89%</span>
</div>
<h3>User Satisfaction</h3>
<p>Users report improvements in their emotional awareness.</p>
</div>
</div>
<div class="research-highlights">
<div class="highlight-card">
<h3>Global Impacts</h3>
<ul class="findings-list">
<li>Supporting mental health initiatives in 5 countries.</li>
<li>Collaborating with the World Health Organization to improve access to mental health.</li>
<li>Contributing to academic research in emotional intelligence.</li>
<li>Providing free access for underserved communities.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="newsletter-section">
<h2>Stay Informed</h2>
<p>Get the latest updates and emotional health advice from MoodWeather.</p>
<form id="newsletter-form" class="newsletter-form">
<input type="email" placeholder="Enter your email" required="">
<button type="submit" class="cta-button">Subscribe</button>
</form>
</div>
<div class="section-container">
<div class="section-wrapper metaphor-poll-section" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;">
<div class="section-header">
<h2 class="section-title">Vote for Your Favorite Weather Metaphor</h2>
</div>
<div class="section-content">
<div id="metaphor-examples" class="metaphor-grid">
<div class="metaphor-card" data-id="1">
<p class="metaphor-text">Sunny days represent moments of joy and success</p>
<div class="vote-count">
<span>245 Votes</span>
<button class="vote-btn">Vote</button>
</div>
</div><div class="metaphor-card" data-id="2">
<p class="metaphor-text">The stormy sky captures intense emotional turbulence</p>
<div class="vote-count">
<span>189 Votes</span>
<button class="vote-btn">Vote</button>
</div>
</div><div class="metaphor-card" data-id="3">
<p class="metaphor-text">The gentle rain reflects times of quiet reflection</p>
<div class="vote-count">
<span>167 Votes</span>
<button class="vote-btn">Vote</button>
</div>
</div><div class="metaphor-card" data-id="4">
<p class="metaphor-text">Moments of the rainbow symbolize hope after difficulties</p>
<div class="vote-count">
<span>203 Votes</span>
<button class="vote-btn">Vote</button>
</div>
</div><div class="metaphor-card" data-id="5">
<p class="metaphor-text">Veiled mornings represent uncertainty and transition</p>
<div class="vote-count">
<span>156 Votes</span>
<button class="vote-btn">Vote</button>
</div>
</div><div class="metaphor-card" data-id="6">
<p class="metaphor-text">Clear starry skies denote peace and clarity</p>
<div class="vote-count">
<span>198 Votes</span>
<button class="vote-btn">Vote</button>
</div>
</div></div>
<div class="poll-results">
<h3>Most Popular Metaphor</h3>
<div id="poll-chart" class="poll-chart"><div class="poll-bar">
<div class="poll-bar-fill" style="width: 21.2%"></div>
<div class="poll-bar-text">
<span>Sunny days represent moments of joy and success</span>
<span>21.2%</span>
</div>
</div><div class="poll-bar">
<div class="poll-bar-fill" style="width: 16.3%"></div>
<div class="poll-bar-text">
<span>The stormy sky captures intense emotional turbulence</span>
<span>16.3%</span>
</div>
</div><div class="poll-bar">
<div class="poll-bar-fill" style="width: 14.4%"></div>
<div class="poll-bar-text">
<span>The gentle rain reflects times of quiet reflection</span>
<span>14.4%</span>
</div>
</div><div class="poll-bar">
<div class="poll-bar-fill" style="width: 17.5%"></div>
<div class="poll-bar-text">
<span>Moments of the rainbow symbolize hope after difficulties</span>
<span>17.5%</span>
</div>
</div><div class="poll-bar">
<div class="poll-bar-fill" style="width: 13.5%"></div>
<div class="poll-bar-text">
<span>Veiled mornings represent uncertainty and transition</span>
<span>13.5%</span>
</div>
</div><div class="poll-bar">
<div class="poll-bar-fill" style="width: 17.1%"></div>
<div class="poll-bar-text">
<span>Clear starry skies denote peace and clarity</span>
<span>17.1%</span>
</div>
</div></div>
</div>
</div>
</div>
</div>
<div class="section-container">
<div class="section-wrapper mood-story-section" style="opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;">
<div class="section-header">
<h2 class="section-title">Your Emotional Story in 30 Days</h2>
<p class="section-subtitle">Experience your emotional journey through weather metaphors</p>
</div>
<div class="section-content">
<div class="story-preview">
<div class="story-cover">
<h3>Inner Climate: A 30-Day Journey</h3>
<div class="weather-timeline"><div style="position: absolute; top: 50%; left: 0px; right: 0px; height: 2px; background: rgba(255, 255, 255, 0.2); transform: translateY(-50%);"></div>
<div class="timeline-marker" style="position: absolute; left: 0%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(255, 215, 0); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 3.44828%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(152, 251, 152); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 6.89655%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(70, 130, 180); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 10.3448%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(70, 130, 180); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 13.7931%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(25, 25, 112); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 17.2414%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(74, 74, 74); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 20.6897%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(224, 224, 224); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 24.1379%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(74, 74, 74); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 27.5862%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(70, 130, 180); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 31.0345%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(25, 25, 112); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 34.4828%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(70, 130, 180); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 37.931%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(70, 130, 180); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 41.3793%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(25, 25, 112); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 44.8276%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(25, 25, 112); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 48.2759%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(255, 215, 0); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 51.7241%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(25, 25, 112); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 55.1724%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(224, 224, 224); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 58.6207%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(70, 130, 180); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 62.069%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(25, 25, 112); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 65.5172%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(255, 215, 0); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 68.9655%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(70, 130, 180); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 72.4138%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(152, 251, 152); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 75.8621%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(74, 74, 74); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 79.3103%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(255, 215, 0); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 82.7586%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(224, 224, 224); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 86.2069%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(70, 130, 180); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 89.6552%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(25, 25, 112); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 93.1034%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(152, 251, 152); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 96.5517%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(70, 130, 180); transition: transform 0.3s ease 0s;"></div><div class="timeline-marker" style="position: absolute; left: 100%; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgb(25, 25, 112); transition: transform 0.3s ease 0s;"></div><div style="position: absolute; left: 0px; bottom: -25px; font-size: 12px; color: rgba(255, 255, 255, 0.7);">Day 1</div><div style="position: absolute; right: 0px; bottom: -25px; font-size: 12px; color: rgba(255, 255, 255, 0.7);">Day 30</div></div>
</div>
<div class="story-chapters">
<div class="chapter">
<h4>Week One: In Search of Sunny Skies</h4>
<div class="day-entry">
<div class="weather-icon">🌞</div>
<div class="entry-content">
<h5>Day 1: Radiant Start</h5>
<p>"A new week, new hope. Today I feel radiant, like the morning light."</p>
</div>
</div>
</div>
<div class="chapter">
<h4>Week Two: Challenges in the Storm</h4>
<div class="day-entry">
<div class="weather-icon">⛈️</div>
<div class="entry-content">
<h5>Day 8: Electric Storm</h5>
<p>"The stress accumulates like storm clouds, but I know that after the rain, a rainbow will come."</p>
</div>
</div>
</div>
<div class="chapter">
<h4>Week Three: Finding Calm</h4>
<div class="day-entry">
<div class="weather-icon">✨</div>
<div class="entry-content">
<h5>Day 15: Glittering Stars</h5>
<p>"After a busy day, gazing at the stars brings meaning to everything."</p>
</div>
</div>
</div>
<div class="chapter">
<h4>Week Four: Breaking Through Barriers</h4>
<div class="day-entry">
<div class="weather-icon">🌈</div>
<div class="entry-content">
<h5>Day 25: Dreams of Resurrection</h5>
<p>"Today I achieved an important goal and feel radiant like a resurrection."</p>
</div>
</div>
</div>
</div>
<div class="story-features">
<div class="feature">
<i class="feature-icon">🎥</i>
<h4>Dynamic Summary</h4>
<p>Experience how your emotional journey is presented in a beautiful video montage.</p>
</div>
<div class="feature">
<i class="feature-icon">🎨</i>
<h4>Personalized Cover</h4>
<p>Choose one of your favorite moments as the cover for your story.</p>
</div>
<div class="feature">
<i class="feature-icon">🏆</i>
<h4>Achievement Badges</h4>
<p>Unlock special emotional badges by keeping a consistent journal.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-grid">
<div class="footer-col">
<h3>MoodWeather</h3>
<p>Express your emotions naturally</p>
<div class="social-links">
<a href="https://twitter.com/moodweather">Twitter</a>
<a href="https://facebook.com/moodweather">Facebook</a>
<a href="https://instagram.com/moodweather">Instagram</a>
</div>
</div>
<div class="footer-col">
<h4>Product</h4>
<ul>
<li><a href="https://moodweather.heytcm.com/features">Features</a></li>
<li><a href="https://moodweather.heytcm.com/pricing">Pricing</a></li>
<li><a href="https://moodweather.heytcm.com/enterprise">Enterprise</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Resources</h4>
<ul>
<li><a href="https://moodweather.heytcm.com/blog">Blog</a></li>
<li><a href="https://moodweather.heytcm.com/help">Help Center</a></li>
<li><a href="https://moodweather.heytcm.com/api">API Documentation</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Research</h4>
<ul>
<li><a href="https://moodweather.heytcm.com/research">Research Publications</a></li>
<li><a href="https://moodweather.heytcm.com/studies">Case Studies</a></li>
<li><a href="https://moodweather.heytcm.com/partners">Research Partners</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Company</h4>
<ul>
<li><a href="https://moodweather.heytcm.com/about">About Us</a></li>
<li><a href="https://moodweather.heytcm.com/careers">Career Opportunities</a></li>
<li><a href="https://moodweather.heytcm.com/contact">Contact Us</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 MoodWeather. All rights reserved.</p>
<div class="legal-links">
<a href="https://moodweather.heytcm.com/privacy">Privacy Policy</a>
<a href="https://moodweather.heytcm.com/terms">Terms of Use</a>
</div>
</div>
</footer>
</div>
<script>
// Initialize metaphor poll functionality
function initMetaphorPoll() {
const metaphorExamples = [
{ id: 1, text: "Sunny days represent moments of joy and success", votes: 245 },
{ id: 2, text: "The stormy sky captures intense emotional turbulence", votes: 189 },
{ id: 3, text: "The gentle rain reflects times of quiet reflection", votes: 167 },
{ id: 4, text: "Moments of the rainbow symbolize hope after difficulties", votes: 203 },
{ id: 5, text: "Veiled mornings represent uncertainty and transition", votes: 156 },
{ id: 6, text: "Clear starry skies denote peace and clarity", votes: 198 }
];
// Populate metaphor examples
const metaphorGrid = document.getElementById('metaphor-examples');
metaphorExamples.forEach(metaphor => {
const card = document.createElement('div');
card.className = 'metaphor-card';
card.setAttribute('data-id', metaphor.id);
card.innerHTML = `
<p class="metaphor-text">${metaphor.text}</p>
<div class="vote-count">
<span>${metaphor.votes} Votes</span>
<button class="vote-btn">Vote</button>
</div>
`;
metaphorGrid.appendChild(card);
});
// Update poll chart
function updatePollChart() {
const pollChart = document.getElementById('poll-chart');
pollChart.innerHTML = '';
const totalVotes = metaphorExamples.reduce((sum, item) => sum + item.votes, 0);
metaphorExamples.forEach(metaphor => {
const percentage = ((metaphor.votes / totalVotes) * 100).toFixed(1);
const pollBar = document.createElement('div');
pollBar.className = 'poll-bar';
pollBar.innerHTML = `
<div class="poll-bar-fill" style="width: ${percentage}%"></div>
<div class="poll-bar-text">
<span>${metaphor.text}</span>
<span>${percentage}%</span>
</div>
`;
pollChart.appendChild(pollBar);
});
}
// Handle voting
metaphorGrid.addEventListener('click', (e) => {
const voteBtn = e.target.closest('.vote-btn');
if (!voteBtn) return;
const card = voteBtn.closest('.metaphor-card');
const metaphorId = parseInt(card.dataset.id);
// Find and update the metaphor votes
const metaphor = metaphorExamples.find(m => m.id === metaphorId);
if (metaphor) {
metaphor.votes++;
// Update vote count display
const voteCount = card.querySelector('.vote-count span');
voteCount.textContent = `${metaphor.votes} Votes`;
// Add voted class
card.classList.add('voted');
// Disable vote button
voteBtn.disabled = true;
voteBtn.textContent = 'Voted';
// Update chart
updatePollChart();
// Optional: Send vote to server
try {
fetch('/api/metaphor/vote', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ metaphorId })
});
} catch (error) {
console.error('Error recording vote:', error);
}
}
});
// Initial chart update
updatePollChart();
}
document.documentElement.style.scrollBehavior = 'smooth';
let currentMood = '';
const moodScores = {
sunny: 1,
cloudy: 0.5,
rainy: 0,
stormy: -0.5
};
// Initialize mood analysis API
async function analyzeMood(text) {
try {
const response = await fetch('/api/ai_completion', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
prompt: `Analyze the following text and determine:
1. The primary weather mood (sunny, cloudy, rainy or stormy)
2. An mood score between -1 and 1
3. Key patterns or triggers
4. Suggested background theme
<typescript-interface>
interface Response {
weather: string;
score: number;
analysis: string;
patterns: string[];
wallpaper: string;
}
</typescript-interface>
<example>
{
"weather": "sunny",
"score": 0.8,
"analysis": "The text indicates a positive and optimistic mood",
"patterns": ["social interaction", "success", "outdoor activities"],
"wallpaper": "sunny_meadow"
}
</example>`,
data: text
})
});
return await response.json();
} catch (error) {
console.error('Error recognizing mood:', error);
return {
weather: 'cloudy',
score: 0,
analysis: 'Mood could not be analyzed',
patterns: [],
wallpaper: 'default'
};
}
}
// Add wallpaper updating function
function updateWallpaper(theme) {
document.body.style.backgroundImage = `url(/wallpapers/${theme}.jpg)`;
}
// Setup weather icons interaction
document.querySelectorAll('.weather-icon').forEach(icon => {
icon.addEventListener('click', () => {
currentMood = icon.dataset.mood;
updateMoodDisplay(currentMood);
});
});
// Setup mood text analysis
const moodText = document.getElementById('mood-text');
let typingTimer = null;
moodText.addEventListener('keyup', () => {
clearTimeout(typingTimer);
typingTimer = setTimeout(async () => {
const analysis = await analyzeMood(moodText.value);
currentMood = analysis.weather;
updateMoodScore(analysis.score);
updateMoodDisplay(currentMood);
updateWallpaper(analysis.wallpaper);
// Update pattern recognition display
if (analysis.patterns.length > 0) {
document.getElementById('mood-patterns').innerHTML = analysis.patterns
.map(pattern => `<li>${pattern}</li>`)
.join('');
}
}, 1000);
});
function updateMoodScore(score) {
document.getElementById('user-score').textContent = `Mood Score: ${Math.round(score * 100)}`;
}
function updateMoodDisplay(mood) {
const particles = document.getElementById('mood-particles');
particles.innerHTML = ''; // Clear existing particles
switch(mood) {
case 'sunny':
createSunnyEffect();
break;
case 'cloudy':
createCloudyEffect();
break;
case 'rainy':
createRainyEffect();
break;
case 'stormy':
createStormyEffect();
break;
}
}
// Particle effects
function createSunnyEffect() {
const svg = document.getElementById('mood-particles');
for(let i = 0; i < 20; i++) {
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", Math.random() * 100 + "%");
circle.setAttribute("cy", Math.random() * 100 + "%");
circle.setAttribute("r", Math.random() * 3);
circle.setAttribute("fill", "#FFD700");
svg.appendChild(circle);
gsap.to(circle, {
duration: 2 + Math.random() * 2,
y: -100,
opacity: 0,
repeat: -1,
ease: "none"
});
}
}
function createCloudyEffect() {
const svg = document.getElementById('mood-particles');
for(let i = 0; i < 5; i++) {
const cloud = document.createElementNS("http://www.w3.org/2000/svg", "path");
cloud.setAttribute("d", "M30,50 Q40,40 50,45 Q60,35 70,45 Q80,40 85,50 Q90,60 80,65 Q75,70 65,68 Q60,75 50,70 Q40,75 35,68 Q25,70 20,65 Q15,60 20,55 Q25,50 30,50");
cloud.setAttribute("fill", "rgba(255,255,255,0.3)");
cloud.setAttribute("transform", `translate(${Math.random() * 100},${Math.random() * 100}) scale(0.5)`);
cloud.classList.add("floating-cloud");
svg.appendChild(cloud);
}
}
function createRainyEffect() {
const svg = document.getElementById('mood-particles');
for(let i = 0; i < 50; i++) {
const drop = document.createElementNS("http://www.w3.org/2000/svg", "line");
drop.setAttribute("x1", Math.random() * 100 + "%");
drop.setAttribute("y1", -10);
drop.setAttribute("x2", Math.random() * 100 + "%");
drop.setAttribute("y2", 0);
drop.setAttribute("stroke", "#4682B4");
drop.setAttribute("stroke-width", "2");
svg.appendChild(drop);
gsap.to(drop, {
duration: 1 + Math.random(),
y: 500,
repeat: -1,
ease: "none"
});
}
}
function createStormyEffect() {
const svg = document.getElementById('mood-particles');
for(let i = 0; i < 3; i++) {
const lightning = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
lightning.setAttribute("points", "45,60 55,60 40,75 50,75 35,90");
lightning.setAttribute("fill", "#FFD700");
lightning.setAttribute("transform", `translate(${Math.random() * 100},${Math.random() * 100})`);
svg.appendChild(lightning);
gsap.to(lightning, {
duration: 0.1,
opacity: 0,
repeat: -1,
repeatDelay: Math.random() * 2,
ease: "none"
});
}
}
function initFAQ() {
document.querySelectorAll('.faq-item').forEach(item => {
item.addEventListener('click', () => {
const wasActive = item.classList.contains('active');
// Close all FAQs
document.querySelectorAll('.faq-item').forEach(faq => {
faq.classList.remove('active');
faq.querySelector('.toggle').textContent = '+';
});
// Toggle clicked FAQ
if (!wasActive) {
item.classList.add('active');
item.querySelector('.toggle').textContent = '-';
}
});
});
}
function initAchievements() {
document.querySelectorAll('.achievement-card').forEach(card => {
card.addEventListener('mouseenter', () => {
const progress = card.querySelector('.progress');
progress.style.transition = 'width 1s ease';
progress.style.width = progress.style.width;
});
});
}
// Newsletter form handling
document.getElementById('newsletter-form').addEventListener('submit', async (e) => {
e.preventDefault();
const email = e.target.querySelector('input[type="email"]').value;
try {
const response = await fetch('/api/newsletter/subscribe', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email })
});
if (response.ok) {
alert('Thank you for subscribing!');
e.target.reset();
} else {
throw new Error('Subscription failed');
}
} catch (error) {
alert('Sorry, an error occurred. Please try again later.');
}
});
const sections = document.querySelectorAll('.section-wrapper');
const sectionObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, {
threshold: 0.1
});
sections.forEach(section => {
section.style.opacity = '0';
section.style.transform = 'translateY(20px)';
section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
sectionObserver.observe(section);
});
// Initialize the weather timeline
function initWeatherTimeline() {
const timeline = document.querySelector('.weather-timeline');
if (!timeline) return;
// Generate 30 days of sample weather data
const weatherTypes = ['sunny', 'cloudy', 'rainy', 'stormy', 'starry', 'aurora'];
const weatherColors = {
sunny: '#FFD700',
cloudy: '#E0E0E0',
rainy: '#4682B4',
stormy: '#4A4A4A',
starry: '#191970',
aurora: '#98FB98'
};
// Create timeline markers
for (let i = 0; i < 30; i++) {
const marker = document.createElement('div');
marker.classList.add('timeline-marker');
// Randomly select weather type for demo
const weatherType = weatherTypes[Math.floor(Math.random() * weatherTypes.length)];
marker.style.cssText = `
position: absolute;
left: ${(i / 29) * 100}%;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background-color: ${weatherColors[weatherType]};
transition: transform 0.3s ease;
`;
// Add hover effect
marker.addEventListener('mouseenter', () => {
marker.style.transform = 'translateY(-50%) scale(1.5)';
marker.style.zIndex = '2';
});
marker.addEventListener('mouseleave', () => {
marker.style.transform = 'translateY(-50%) scale(1)';
marker.style.zIndex = '1';
});
timeline.appendChild(marker);
}
// Add connecting line
const connectionLine = document.createElement('div');
connectionLine.style.cssText = `
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
background: rgba(255,255,255,0.2);
transform: translateY(-50%);
`;
timeline.insertBefore(connectionLine, timeline.firstChild);
// Add timeline labels
const startLabel = document.createElement('div');
startLabel.textContent = 'Day 1';
startLabel.style.cssText = `
position: absolute;
left: 0;
bottom: -25px;
font-size: 12px;
color: rgba(255,255,255,0.7);
`;
const endLabel = document.createElement('div');
endLabel.textContent = 'Day 30';
endLabel.style.cssText = `
position: absolute;
right: 0;
bottom: -25px;
font-size: 12px;
color: rgba(255,255,255,0.7);
`;
timeline.appendChild(startLabel);
timeline.appendChild(endLabel);
}
// Call the initWeatherTimeline function
initWeatherTimeline();
// Locale Picker Initialization
function initLocalePicker() {
const localePicker = document.getElementById('locale-picker');
// Get current locale from URL
const getCurrentLocale = () => {
const path = window.location.pathname;
const matches = path.match(/\/([a-z]{2})\//);
return matches ? matches[1] : 'en';
};
// Set initial value based on URL
const currentLocale = getCurrentLocale();
localePicker.value = currentLocale;
// Handle locale change
localePicker.addEventListener('change', (e) => {
const newLocale = e.target.value;
const currentPath = window.location.pathname;
// If current path already has locale
if (currentPath.match(/\/[a-z]{2}\//)) {
window.location.pathname = currentPath.replace(/\/[a-z]{2}\//, `/${newLocale}/`);
} else {
// If no locale in path, add it
window.location.pathname = `/${newLocale}${currentPath}`;
}
});
}
document.addEventListener('DOMContentLoaded', () => {
initMetaphorPoll();
initFAQ();
initAchievements();
updateMoodDisplay('cloudy'); // Default mood
initLocalePicker(); // Add this line
// Video Demo Initialization with YouTube
const videoFrame = document.getElementById('demo-video');
// Track video visibility
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (!entry.isIntersecting) {
// Post message to pause the video when out of view
try {
videoFrame.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
} catch (error) {
console.error('Error pausing the video:', error);
}
}
});
}, { threshold: 0.5 });
observer.observe(videoFrame);
// Track video engagement
window.addEventListener('message', (event) => {
if (event.origin !== "https://www.youtube.com") return;
try {
const data = JSON.parse(event.data);
if (data.event === "onStateChange" && data.info === 1) { // 1 means playing
fetch('/api/analytics/video-play', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
videoId: 'demo',
timestamp: new Date().toISOString()
})
});
}
} catch (error) {
console.error('Error tracking video play:', error);
}
});
});
</script>
<!-- Cloudflare Pages Analytics --><script defer="" src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon="{"token": "27d8dbdd5c394eca861d9560b44b0d7c"}"></script><!-- Cloudflare Pages Analytics -->
</body></html>