https://moodweather.heytcm.com/

送信済みURL:
https://moodweather.heytcm.com/
レポート終了日:
リンクテキスト
https://twitter.com/moodweatherTwitter
https://facebook.com/moodweatherFacebook
https://instagram.com/moodweatherInstagram
名前規模
0object
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
gtagfunction
dataLayerobject
clarityfunction
gsapVersionsobject
Linearobject
Power0object
規模分類ログ
errornetwork
URL
https://www.clarity.ms/tag/XXXXXX
テキスト
Failed to load resource: the server responded with a status of 400 ()
logother
URL
https://moodweather.heytcm.com/
テキスト
Service Worker registered with scope: https://moodweather.heytcm.com/
<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="{&quot;token&quot;: &quot;27d8dbdd5c394eca861d9560b44b0d7c&quot;}"></script><!-- Cloudflare Pages Analytics -->
</body></html>